/* ==========================================================================
   «أثر» — واجهة المنتج (صفحة المتجر، البداية، الأرشيف، الاستوديو، البطاقة)
   مبنية على رموز irheb.css: زوايا حادة، لون الهوية، كثافة معلومات عالية.
   ========================================================================== */

.ath {
    --ath-accent: #0f5f58;
    --ath-accent-soft: #eef7f5;
    --ath-accent-line: #9fd3c9;
    --ath-gold: #a8832f;
    --ath-gold-soft: #f7f1e3;
    padding-block: 12px 48px;
}

.ath [hidden] {
    display: none !important;
}

.ath h1,
.ath h2,
.ath h3 {
    font-family: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif;
}

.ath-muted {
    color: var(--muted);
}

.ath-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--ath-gold);
    letter-spacing: .02em;
}

.ath-kicker::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--ath-gold);
}

.ath-section {
    margin-top: 40px;
}

.ath-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ath-section__title {
    font-size: 22px;
    font-weight: 800;
    margin: 4px 0 0;
}

.ath-grid {
    display: grid;
    gap: 16px;
}

.ath-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ath-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ath-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------- صفحة المتجر ---------------- */

.ath-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 28px 0 8px;
}

.ath-hero__title {
    font-size: clamp(32px, 4.4vw, 50px);
    font-weight: 900;
    line-height: 1.2;
    margin: 10px 0 0;
    letter-spacing: -0.01em;
}

.ath-hero__title span {
    color: var(--ath-accent);
}

.ath-hero__lead {
    font-size: 17px;
    color: var(--ink-2);
    margin: 16px 0 0;
    max-width: 58ch;
    line-height: 1.8;
}

.ath-hero__actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.ath-hero__proof {
    display: flex;
    gap: 18px;
    margin-top: 22px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-2);
}

.ath-hero__proof span::before {
    content: '✓';
    color: var(--good);
    font-weight: 900;
    margin-inline-end: 6px;
}

.ath-stack {
    position: relative;
    height: 430px;
}

.ath-sheet {
    position: absolute;
    width: 300px;
    height: 400px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .14);
    padding: 20px;
    overflow: hidden;
}

.ath-sheet--back {
    inset-inline-end: 8%;
    top: 0;
    transform: rotate(-5deg);
    opacity: .9;
}

.ath-sheet--front {
    inset-inline-start: 6%;
    top: 26px;
    transform: rotate(3deg);
}

.ath-sheet__bar {
    height: 3px;
    background: linear-gradient(to left, var(--ath-accent) 70%, var(--ath-gold) 70%);
    margin: 10px 0 14px;
}

.ath-sheet__photo {
    height: 118px;
    background: linear-gradient(135deg, var(--ath-accent), #9fd3c9);
    position: relative;
}

.ath-sheet__photo::after {
    content: '';
    position: absolute;
    inset: 22px auto auto 26px;
    width: 46px;
    height: 46px;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .25);
}

.ath-sheet__title {
    font-family: 'Alexandria', sans-serif;
    font-weight: 800;
    font-size: 16px;
    margin-top: 12px;
    line-height: 1.4;
}

.ath-sheet__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 12px;
}

.ath-sheet__kpis div {
    background: var(--surface-2);
    border-top: 2px solid var(--ath-accent);
    padding: 6px;
    font-size: 10px;
    color: var(--muted);
}

.ath-sheet__kpis b {
    display: block;
    font-family: 'Alexandria', sans-serif;
    color: var(--ath-accent);
    font-size: 17px;
}

.ath-sheet__line {
    height: 6px;
    background: var(--surface-2);
    margin-top: 8px;
}

.ath-sheet__line:nth-child(odd) {
    width: 82%;
}

.ath-steps {
    counter-reset: ath-step;
}

.ath-step {
    counter-increment: ath-step;
    border-top: 3px solid var(--ath-accent);
}

.ath-step::before {
    content: counter(ath-step);
    font-family: 'Alexandria', sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: var(--ath-accent-line);
    display: block;
    line-height: 1;
    margin-bottom: 8px;
}

.ath-step h3,
.ath-kind h3,
.ath-output h3 {
    font-size: 16px;
    margin: 0 0 6px;
}

.ath-step p,
.ath-kind p,
.ath-output p {
    margin: 0;
    color: var(--ink-2);
    font-size: 14px;
}

.ath-kind {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.ath-kind:hover {
    border-color: var(--ath-accent);
    transform: translateY(-2px);
    text-decoration: none;
}

.ath-kind__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: var(--ath-accent-soft);
    color: var(--ath-accent);
    border: 1px solid var(--ath-accent-line);
    margin-bottom: 10px;
    font-size: 18px;
}

.ath-output {
    border-inline-start: 3px solid var(--ath-gold);
}

.ath-band {
    background: var(--ink);
    color: #e2e8f0;
    padding: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ath-band h3 {
    color: #fff;
    font-size: 16px;
    margin: 0 0 6px;
}

.ath-band p {
    margin: 0;
    font-size: 14px;
    color: #cbd5e1;
}

.ath-offer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 3px solid var(--line-strong);
}

.ath-offer--featured {
    border-top-color: var(--ath-gold);
    background: linear-gradient(to bottom, var(--ath-gold-soft), #fff 40%);
}

.ath-offer__name {
    font-weight: 800;
    font-size: 16px;
}

.ath-offer__price {
    font-family: 'Alexandria', sans-serif;
    font-size: 30px;
    font-weight: 900;
    color: var(--ink);
}

.ath-offer__price small {
    font-size: 14px;
    color: var(--muted);
    font-weight: 600;
}

.ath-offer__was {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 13px;
}

.ath-faq details {
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
}

.ath-faq summary {
    cursor: pointer;
    font-weight: 700;
}

.ath-faq p {
    margin: 8px 0 0;
    color: var(--ink-2);
}

/* ---------------- البداية ---------------- */

.ath-start {
    max-width: 920px;
    margin: 0 auto;
}

.ath-kinds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ath-kinds input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ath-kinds label {
    display: block;
    border: 1px solid var(--line);
    background: #fff;
    padding: 12px 14px;
    cursor: pointer;
    height: 100%;
}

.ath-kinds label strong {
    display: block;
    font-size: 15px;
}

.ath-kinds label span {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}

.ath-kinds input:checked + label {
    border-color: var(--ath-accent);
    background: var(--ath-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ath-accent);
}

.ath-kinds input:focus-visible + label {
    outline: 2px solid var(--ath-accent);
    outline-offset: 2px;
}

.ath-occasions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ath-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ath-field label,
.ath-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-2);
}

.ath-hint {
    font-size: 12.5px;
    color: var(--muted);
}

.ath-input,
.ath textarea,
.ath select {
    width: 100%;
    border: 1px solid var(--line-strong);
    background: #fff;
    padding: 9px 12px;
    font: inherit;
    font-size: 14.5px;
    color: var(--ink);
}

.ath textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.8;
}

.ath-input:focus,
.ath textarea:focus,
.ath select:focus {
    outline: none;
    border-color: var(--ath-accent);
    box-shadow: 0 0 0 3px rgba(15, 95, 88, .12);
}

.ath-input--big {
    font-size: 18px;
    font-weight: 700;
    padding: 12px 14px;
}

.ath-error {
    color: var(--critical);
    font-size: 13px;
    font-weight: 600;
}

/* ---------------- الشرائح (Chips) ---------------- */

.ath-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 11px;
    cursor: pointer;
    text-align: right;
}

.ath-chip:hover {
    border-color: var(--ath-accent);
    color: var(--ath-accent);
}

.ath-chip.is-on {
    background: var(--ath-accent);
    border-color: var(--ath-accent);
    color: #fff;
}

.ath-chip--add::before {
    content: '+';
    font-weight: 900;
    color: var(--ath-accent);
}

.ath-chip--add:hover::before {
    color: inherit;
}

.ath-chip--ai {
    border-color: #c4b5fd;
    color: #6d28d9;
    background: #faf5ff;
}

.ath-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---------------- الأرشيف ---------------- */

.ath-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ath-reports {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.ath-report {
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ath-report__cover {
    height: 132px;
    background: linear-gradient(135deg, var(--ath-accent-soft), #fff);
    display: grid;
    place-items: center;
    color: var(--ath-accent-line);
    font-family: 'Alexandria', sans-serif;
    font-size: 40px;
    font-weight: 900;
    overflow: hidden;
    position: relative;
}

.ath-report__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ath-report__status {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
}

.ath-report__body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ath-report__title {
    font-size: 15.5px;
    font-weight: 800;
    margin: 0;
    line-height: 1.5;
}

.ath-report__meta {
    font-size: 12.5px;
    color: var(--muted);
}

.ath-report__foot {
    border-top: 1px solid var(--line-subtle);
    padding: 10px 14px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.ath-meter {
    height: 4px;
    background: var(--surface-3);
}

.ath-meter span {
    display: block;
    height: 100%;
    background: var(--ath-accent);
}

.ath-empty {
    text-align: center;
    padding: 48px 20px;
    border: 1px dashed var(--line-strong);
    background: #fff;
}

.ath-empty h2 {
    font-size: 20px;
    margin: 0 0 8px;
}

/* ---------------- الاستوديو ---------------- */

/* الاستوديو مساحة عمل: يتجاوز عرض حاوية المتجر (980px) بتماثل حتى 1360px. */
.ath--wide {
    width: min(1360px, calc(100vw - 32px));
    margin-inline: calc((100% - min(1360px, calc(100vw - 32px))) / 2);
}

.ath-studio__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}

.ath-studio__title {
    flex: 1;
    min-width: 200px;
}

.ath-studio__title h1 {
    font-size: 20px;
    font-weight: 800;
    margin: 2px 0 0;
    line-height: 1.4;
}

.ath-save {
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
}

.ath-save.is-saving {
    color: var(--medium);
}

.ath-save.is-error {
    color: var(--critical);
    font-weight: 700;
}

.ath-studio__layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
}

.ath-rail {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ath-rail button {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    align-items: center;
    text-align: right;
    border: 0;
    border-inline-start: 3px solid transparent;
    background: transparent;
    font: inherit;
    padding: 9px 10px;
    cursor: pointer;
    color: var(--ink-2);
}

.ath-rail button:hover {
    background: var(--surface-2);
}

.ath-rail button.is-active {
    background: #fff;
    border-inline-start-color: var(--ath-accent);
    color: var(--ink);
    box-shadow: var(--shadow);
}

.ath-rail__num {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    font-size: 12px;
    font-weight: 800;
    background: #fff;
}

.ath-rail button.is-done .ath-rail__num {
    background: var(--ath-accent);
    border-color: var(--ath-accent);
    color: #fff;
}

.ath-rail__label strong {
    display: block;
    font-size: 14px;
}

.ath-rail__label small {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
}

.ath-panel {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.ath-panel__head {
    padding: 18px 22px 0;
}

.ath-panel__head h2 {
    font-size: 21px;
    font-weight: 800;
    margin: 4px 0 4px;
}

.ath-panel__head p {
    margin: 0;
    color: var(--ink-2);
    font-size: 14px;
}

.ath-panel__body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ath-panel__foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--line-subtle);
    background: var(--surface-2);
}

.ath-row {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}

.ath-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ath-block__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ath-block__title {
    font-size: 15px;
    font-weight: 800;
    margin: 0;
}

.ath-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ath-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 34px;
    gap: 8px;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line-subtle);
    padding: 6px 8px;
}

.ath-item__fields {
    display: grid;
    grid-template-columns: var(--template, 1fr);
    gap: 8px;
}

.ath-item__index {
    font-weight: 800;
    color: var(--ath-accent);
    font-size: 13px;
    text-align: center;
}

.ath-item .ath-input {
    padding: 7px 10px;
    font-size: 14px;
}

.ath-icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    color: var(--muted);
    display: grid;
    place-items: center;
}

.ath-icon-btn:hover {
    color: var(--critical);
    border-color: var(--critical);
}

.ath-add {
    align-self: flex-start;
    border: 1px dashed var(--ath-accent-line);
    background: var(--ath-accent-soft);
    color: var(--ath-accent);
    font: inherit;
    font-weight: 700;
    font-size: 13.5px;
    padding: 7px 14px;
    cursor: pointer;
}

.ath-add:hover {
    border-style: solid;
}

.ath-assist {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ath-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #c4b5fd;
    background: #faf5ff;
    color: #6d28d9;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
}

.ath-ai-btn:hover {
    background: #f3e8ff;
}

.ath-ai-btn[disabled] {
    opacity: .5;
    cursor: wait;
}

.ath-suggest {
    border: 1px solid #ddd6fe;
    background: #fbf9ff;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ath-suggest__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
    color: #6d28d9;
    font-weight: 700;
}

.ath-suggest__text {
    white-space: pre-line;
    line-height: 1.8;
    color: var(--ink);
    font-size: 14px;
}

.ath-suggest__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ath-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink-2);
    white-space: nowrap;
}

.ath-pill--good { background: var(--good-soft); color: var(--good); border-color: var(--good-border); }
.ath-pill--warn { background: var(--medium-soft); color: var(--medium); border-color: var(--medium-border); }
.ath-pill--bad { background: var(--critical-soft); color: var(--critical); border-color: var(--critical-border); }
.ath-pill--accent { background: var(--ath-accent-soft); color: var(--ath-accent); border-color: var(--ath-accent-line); }

.ath-segment {
    display: inline-flex;
    border: 1px solid var(--line-strong);
    background: #fff;
}

.ath-segment button {
    border: 0;
    border-inline-start: 1px solid var(--line);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--ink-2);
}

.ath-segment button:first-child {
    border-inline-start: 0;
}

.ath-segment button.is-on[data-value="achieved"] { background: var(--good); color: #fff; }
.ath-segment button.is-on[data-value="partial"] { background: var(--medium); color: #fff; }
.ath-segment button.is-on[data-value="not_achieved"] { background: var(--critical); color: #fff; }

.ath-goal-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line-subtle);
    background: var(--surface-2);
}

.ath-goal-status__text {
    font-weight: 700;
    font-size: 14px;
}

.ath-goal-status .ath-input {
    grid-column: 1 / -1;
    padding: 6px 10px;
    font-size: 13px;
}

.ath-live {
    font-size: 13px;
    color: var(--ink-2);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* الشواهد */

.ath-drop {
    border: 2px dashed var(--ath-accent-line);
    background: var(--ath-accent-soft);
    padding: 26px;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.ath-drop.is-over {
    background: #dff1ed;
    border-color: var(--ath-accent);
}

.ath-drop strong {
    display: block;
    font-size: 16px;
    color: var(--ath-accent);
}

.ath-drop span {
    font-size: 13px;
    color: var(--ink-2);
}

.ath-uploads {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ath-upload {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 10px;
    align-items: center;
    font-size: 12.5px;
}

.ath-upload .ath-meter {
    height: 6px;
}

.ath-upload.is-error {
    color: var(--critical);
}

.ath-evidence {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

.ath-photo {
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

.ath-photo.is-dragging {
    opacity: .4;
}

.ath-photo.is-drop-target {
    outline: 2px dashed var(--ath-accent);
    outline-offset: 2px;
}

.ath-photo__frame {
    position: relative;
    height: 140px;
    background: var(--surface-2);
    cursor: crosshair;
    overflow: hidden;
}

.ath-photo__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.ath-photo__focus {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
    border-radius: 50% !important;
    pointer-events: none;
}

.ath-photo__cover {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    background: var(--ath-gold);
    color: #111;
    font-size: 11px;
    font-weight: 800;
    padding: 1px 7px;
}

.ath-photo__handle {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    background: rgba(15, 23, 42, .6);
    color: #fff;
    font-size: 12px;
    padding: 1px 6px;
    cursor: grab;
}

.ath-photo__body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ath-photo__body .ath-input {
    padding: 6px 8px;
    font-size: 13px;
}

.ath-photo__actions {
    display: flex;
    gap: 6px;
    justify-content: space-between;
}

.ath-photo__actions button {
    border: 1px solid var(--line);
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
}

.ath-photo__actions button:hover {
    border-color: var(--ath-accent);
    color: var(--ath-accent);
}

.ath-photo__actions .is-danger:hover {
    border-color: var(--critical);
    color: var(--critical);
}

/* لوحة الذكاء الحي */

.ath-insight {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ath-ring {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 12px;
    align-items: center;
}

.ath-ring svg {
    width: 76px;
    height: 76px;
}

.ath-ring__value {
    font-family: 'Alexandria', sans-serif;
    font-weight: 900;
    font-size: 20px;
}

.ath-next {
    border: 1px solid var(--ath-gold);
    background: var(--ath-gold-soft);
    padding: 10px 12px;
    font-size: 13px;
}

.ath-next strong {
    display: block;
    margin-bottom: 4px;
    color: #5b4410;
}

.ath-next button {
    margin-top: 8px;
    border: 0;
    background: var(--ink);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
}

.ath-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ath-stat {
    background: var(--surface-2);
    border-top: 2px solid var(--ath-accent);
    padding: 8px 10px;
}

.ath-stat span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 700;
}

.ath-stat strong {
    font-family: 'Alexandria', sans-serif;
    font-size: 19px;
    font-weight: 800;
}

.ath-stat small {
    display: block;
    font-size: 11.5px;
    color: var(--ink-2);
}

.ath-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ath-check {
    font-size: 12.5px;
    padding: 7px 10px;
    border-inline-start: 3px solid var(--line-strong);
    background: var(--surface-2);
}

.ath-check--warn { border-inline-start-color: var(--medium); background: var(--medium-soft); }
.ath-check--bad { border-inline-start-color: var(--critical); background: var(--critical-soft); }
.ath-check--info { border-inline-start-color: var(--monitor); background: var(--monitor-soft); }

.ath-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.ath-checklist li {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ath-checklist li::before {
    content: '○';
    color: var(--muted);
    font-weight: 900;
    width: 14px;
}

.ath-checklist li.is-done::before {
    content: '✓';
    color: var(--good);
}

.ath-checklist button {
    border: 0;
    background: none;
    color: var(--ath-accent);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-inline-start: auto;
}

.ath-swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ath-swatch {
    width: 34px;
    height: 34px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--line-strong);
    cursor: pointer;
}

.ath-swatch.is-on {
    box-shadow: 0 0 0 2px var(--ink);
}

.ath-issue {
    border: 1px solid var(--ath-accent);
    background: linear-gradient(to left, var(--ath-accent-soft), #fff);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ath-issue h3 {
    margin: 0;
    font-size: 17px;
}

.ath-outputs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.ath-outputs a {
    display: block;
    border: 1px solid var(--line);
    background: #fff;
    padding: 12px;
    text-decoration: none;
    color: var(--ink);
    border-top: 3px solid var(--ath-accent);
}

.ath-outputs a:hover {
    border-color: var(--ath-accent);
}

.ath-outputs strong {
    display: block;
    font-size: 14px;
}

.ath-outputs span {
    font-size: 12px;
    color: var(--muted);
}

.ath-share {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ath-share input {
    flex: 1;
    min-width: 200px;
    direction: ltr;
    font-size: 12.5px;
}

.ath-mobile-steps {
    display: none;
}

/* ---------------- بطاقة المشاركة ---------------- */

.ath-card-stage {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.ath-card-stage canvas {
    width: 100%;
    height: auto;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
    background: #fff;
}

/* ---------------- الاستجابة ---------------- */

@media (max-width: 1180px) {
    .ath-studio__layout {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .ath-insight {
        grid-column: 1 / -1;
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .ath-hero,
    .ath-card-stage {
        grid-template-columns: 1fr;
    }

    .ath-stack {
        display: none;
    }

    .ath-grid--3,
    .ath-grid--4,
    .ath-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ath-kinds {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ath-studio__layout {
        grid-template-columns: 1fr;
    }

    .ath-rail {
        display: none;
    }

    .ath-mobile-steps {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 6px;
        margin-bottom: 12px;
    }

    .ath-mobile-steps button {
        flex: none;
        border: 1px solid var(--line);
        background: #fff;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        padding: 6px 12px;
    }

    .ath-mobile-steps button.is-active {
        background: var(--ath-accent);
        border-color: var(--ath-accent);
        color: #fff;
    }

    .ath-insight {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .ath-grid--2,
    .ath-grid--3,
    .ath-grid--4,
    .ath-band,
    .ath-kinds {
        grid-template-columns: 1fr;
    }

    .ath-row {
        grid-template-columns: 1fr;
    }

    .ath-item__fields {
        grid-template-columns: 1fr;
    }

    .ath-panel__head,
    .ath-panel__body,
    .ath-panel__foot {
        padding-inline: 14px;
    }
}

/* المساعد الذكي: شارة الحالة وملاحظات المراجعة */
.ath-pill--ai {
    background: var(--ath-accent-soft);
    color: var(--ath-accent);
    border-color: var(--ath-accent-line);
}

.ath-notes {
    margin: 0;
    padding-inline-start: 20px;
    display: grid;
    gap: 6px;
    line-height: 1.8;
}

.ath-coach {
    border-inline-start: 3px solid var(--ath-gold);
    padding-inline-start: 14px;
}

#occasion-name {
    margin-top: 10px;
}

/* معرض نماذج المخرجات */
.ath-samples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.ath-sample {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    background: #fff;
}

.ath-sample__frame {
    position: relative;
    display: block;
    aspect-ratio: 210 / 297;
    max-height: 420px;
    overflow: hidden;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.ath-sample__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.ath-sample__frame:hover,
.ath-sample__frame:focus-visible {
    outline: 2px solid var(--ath-accent);
    outline-offset: -2px;
}

.ath-sample__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.ath-sample__body h3 {
    margin: 0;
    font-size: 17px;
}

.ath-sample__body p {
    margin: 0 0 6px;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.8;
    flex: 1;
}

.ath-sample__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* اقتراحات تعليق الصورة: رقاقات تحت الحقل عند التركيز */
.ath-caption-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.ath-caption-picks .ath-chip {
    font-size: 12.5px;
    padding: 4px 9px;
}

/* ------------------------------------------------------------------ */
/* سلامة الإصدار: موضوع الوثيقة المعتمدة                              */
/* ------------------------------------------------------------------ */

.ath-identity-notice {
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid #e7c98a;
    border-inline-start: 4px solid #b7791f;
    background: #fffaf0;
    color: #5f3b06;
    font-size: 14px;
    line-height: 1.8;
}

.ath-identity-notice p { margin: 0; }
.ath-identity-notice p + p { margin-top: 6px; }

.ath-integrity {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: rgba(21, 128, 61, .06);
    border-inline-start: 3px solid #15803d;
    font-size: 13.5px;
    line-height: 1.85;
    color: #1f3b2d;
}

.ath .is-identity { background-image: linear-gradient(90deg, rgba(183, 121, 31, .07), rgba(183, 121, 31, .07)); }

.ath-identity-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #8a5a12;
}

.ath-identity-hint::before { content: '🔒 '; font-size: 11px; }