/* =============================================================================
 *  status.css — بررسی وضعیت درخواست
 * -----------------------------------------------------------------------------
 *  این صفحه قبلاً سه کارتِ یک‌شکل بود که پشت سر هم عوض می‌شدند. مشکل، رنگ و
 *  گوشه‌ی گرد نبود؛ مشکل این بود که هیچ‌چیز نمی‌گفت «کجای کار هستی و چند قدم
 *  مانده». اینجا سه چیز اضافه شده که همان حسِ درگاه بانکی را می‌سازند:
 *
 *    ۱) نشانگر مرحله با خطِ پیشرفتِ واقعی (نه فقط چند نقطه)
 *    ۲) یک پوسته‌ی واحد که گام‌ها داخلش «ورق می‌خورند»، نه اینکه صفحه بپرد
 *    ۳) کادرهای تک‌رقمیِ کد پیامکی، با شمارشِ معکوس و ارسال مجدد
 *
 *  پالت همان هویتِ سایت است — سرمه‌ای + طلایی. تنها تغییرِ رنگی این است که
 *  سایه‌ها به‌جای مشکیِ خالص، هم‌رنگِ پس‌زمینه تیره شده‌اند؛ سایه‌ی مشکی روی
 *  سرمه‌ای، خاکستریِ کثیف می‌سازد.
 * ========================================================================== */

.status-page {
    /* دانه‌ی بسیار ریز روی پس‌زمینه — سطحِ تخت و کاملاً صاف، دیجیتالی و ارزان
       به نظر می‌رسد. این لایه آن‌قدر کم‌رنگ است که دیده نمی‌شود، ولی حس
       «چاپ‌شده» را برمی‌گرداند. */
    position: relative;
}
.status-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.status-page .container { position: relative; z-index: 1; }

/* =============================================================== سربرگ */
.st-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 8px 0 26px;
    flex-wrap: wrap;
}

.st-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--gold-soft);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
}
.st-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(255, 178, 0, .14);
    animation: stPulse 2.6s ease-in-out infinite;
}
@keyframes stPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 178, 0, .14); }
    50%      { box-shadow: 0 0 0 7px rgba(255, 178, 0, .05); }
}

.st-title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.01em;      /* تیترِ بزرگِ فارسی با تراکینگِ کمی منفی جمع‌تر می‌نشیند */
    color: var(--text);
    text-wrap: balance;
}

.st-sub {
    margin: 0;
    max-width: 56ch;             /* خطِ بلندتر از این، چشم را موقع برگشت گم می‌کند */
    color: var(--muted);
    font-size: 14px;
    line-height: 2;
    text-wrap: pretty;
}

.st-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 17px;
    min-height: 44px;

    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 13.5px;

    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .14s ease;
}
.st-back:hover  { border-color: var(--gold); color: var(--gold); background: rgba(255, 178, 0, .07); }
.st-back:active { transform: scale(.97); }
.st-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ======================================================== نشانگر مرحله */
.st-steps { margin: 0 0 22px; }

.st-steps ol {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
}

/* خطِ رابط بین دو مرحله. راست‌به‌چپ است، پس از هر گام به سمت راست کشیده
   می‌شود و به گامِ قبلی وصل می‌شود. */
.st-step::before {
    content: "";
    position: absolute;
    top: 19px;
    inset-inline-start: 50%;
    width: 100%;
    height: 2px;
    background: var(--line);
    z-index: 0;
    transition: background .4s ease;
}
.st-step:last-child::before { display: none; }

/* مرحله‌ی طی‌شده، خطِ بعد از خودش را طلایی می‌کند — پیشرفت باید در خودِ
   خط دیده شود، نه فقط در رنگِ دایره‌ها. */
.st-step.is-done::before { background: linear-gradient(270deg, var(--gold), rgba(255, 178, 0, .35)); }

.st-step-dot {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;

    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 13px;
    color: #5d5590;
    font-size: 14px;

    transition: color .3s ease, border-color .3s ease, background .3s ease,
                box-shadow .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.st-step-label {
    color: #6f68a3;
    font-size: 12px;
    font-weight: 600;
    transition: color .3s ease;
}

/* حالت فعلی: برجسته، با هاله — تنها گامی که «الان» است */
.st-step.is-active .st-step-dot {
    color: #17130a;
    background: linear-gradient(180deg, #ffc02e, var(--gold));
    border-color: transparent;
    box-shadow: 0 0 0 5px rgba(255, 178, 0, .12), 0 10px 24px -8px rgba(255, 178, 0, .5);
    transform: scale(1.06);
}
.st-step.is-active .st-step-label { color: var(--gold); }

/* حالت طی‌شده: تیکِ سبز، بدون برجستگی — کارش تمام شده و نباید توجه بگیرد */
.st-step.is-done .st-step-dot {
    color: #7bf0a8;
    background: rgba(46, 204, 113, .12);
    border-color: rgba(46, 204, 113, .38);
}
.st-step.is-done .st-step-dot i::before { content: "\f00c"; }
.st-step.is-done .st-step-label { color: #7bf0a8; }

/* ================================================= پوسته‌ی احراز هویت */
.st-shell {
    position: relative;
    overflow: hidden;
    max-width: 520px;
    margin: 0 auto;
    padding: 34px 28px 28px;

    background:
        radial-gradient(130% 90% at 50% -10%, rgba(255, 178, 0, .07), transparent 58%),
        linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--line);
    border-radius: 24px;
    /* سایه‌ی هم‌رنگِ پس‌زمینه، نه مشکیِ خالص */
    box-shadow:
        0 28px 70px -26px rgba(3, 2, 22, .8),
        0 0 0 1px rgba(255, 255, 255, .03) inset;
}
.st-shell[hidden] { display: none; }

/* خطِ نوریِ بالای کارت */
.st-shell-glow {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 178, 0, .6), transparent);
}

/* ------------------------------------------------------------ گام‌ها */
.st-pane { text-align: center; }
.st-pane[hidden] { display: none; }

/* ورود از سمتِ جلو (چپ در RTL) — حس «قدم بعدی»، نه «صفحه‌ی دیگر» */
.st-pane.is-active { animation: stPaneIn .38s cubic-bezier(.22, 1, .36, 1) both; }
.st-pane.is-back   { animation: stPaneBack .38s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes stPaneIn   { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes stPaneBack { from { opacity: 0; transform: translateX(22px);  } to { opacity: 1; transform: none; } }

.st-pane-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;

    border-radius: 20px;
    font-size: 24px;
    color: var(--gold);
    background: rgba(255, 178, 0, .1);
    border: 1px solid rgba(255, 178, 0, .24);
    box-shadow: 0 0 0 7px rgba(255, 178, 0, .04);
}

.st-pane-title {
    margin: 0 0 7px;
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
}

.st-pane-desc {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.95;
    text-wrap: pretty;
}

/* ------------------------------------------------- چیپِ کد رهگیری/شماره */
.st-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 8px 15px;

    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12.5px;
}
.st-chip i { color: var(--gold); font-size: 12px; }
.st-chip b {
    color: var(--gold);
    font-weight: 700;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.st-chip-phone b { letter-spacing: .1em; }

/* ------------------------------------------------------------ ورودی‌ها */
.st-field { margin: 0 0 6px; text-align: start; }

/* ⚠ برچسبِ همیشه‌دیده، نه placeholder به‌جای برچسب: در فرمِ احراز هویت،
   لحظه‌ای که کاربر شروع به تایپ می‌کند نباید یادش برود این کادر چه می‌خواست. */
.st-label {
    display: block;
    margin: 0 0 8px;
    padding-inline-start: 3px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
}

.st-input {
    width: 100%;
    padding: 15px 16px;
    min-height: 54px;

    background: #0e0b2b;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    font: inherit;
    font-size: 16px;            /* زیر ۱۶ روی iOS باعث زومِ خودکار می‌شود */
    text-align: center;
    outline: none;

    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.st-input::placeholder { color: #4b4380; letter-spacing: normal; }
.st-input:focus {
    border-color: var(--gold);
    background: #100d33;
    box-shadow: 0 0 0 3px rgba(255, 178, 0, .14);
}

.st-input-code {
    letter-spacing: .14em;
    font-weight: 700;
    text-transform: uppercase;
}
.st-input-num {
    letter-spacing: .22em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.st-input.is-bad {
    border-color: var(--err);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, .14);
    animation: stShake .38s ease;
}
@keyframes stShake {
    0%, 100% { transform: translateX(0); }
    22%      { transform: translateX(-6px); }
    44%      { transform: translateX(5px); }
    68%      { transform: translateX(-3px); }
}

/* ------------------------------------------------- کادرهای کد پیامکی */
.st-otp {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin: 0 0 8px;
}

.st-otp-box {
    width: 52px;
    height: 60px;

    background: #0e0b2b;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    font: inherit;
    font-size: 23px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
    caret-color: var(--gold);

    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.st-otp-box:focus {
    border-color: var(--gold);
    background: #120e38;
    box-shadow: 0 0 0 3px rgba(255, 178, 0, .16);
    transform: translateY(-2px);
}
/* کادرِ پرشده رنگ می‌گیرد تا پیشرفت در خودِ ورودی دیده شود */
.st-otp-box.filled { border-color: rgba(255, 178, 0, .45); color: var(--gold); }

.st-otp.is-bad .st-otp-box {
    border-color: var(--err);
    color: #ff9c92;
    animation: stShake .38s ease;
}
.st-otp.is-ok .st-otp-box {
    border-color: rgba(46, 204, 113, .6);
    color: #7bf0a8;
    background: rgba(46, 204, 113, .08);
}

.st-otp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 20px;
}

.st-timer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12.5px;
}
.st-timer i { font-size: 11px; opacity: .75; }
.st-timer b {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}
/* زیر ۳۰ ثانیه: رنگ عوض می‌شود — عدد به‌تنهایی فوریت را منتقل نمی‌کند */
.st-timer.is-urgent b { color: #ff9c92; }
.st-timer.is-over b   { color: #ff9c92; }

.st-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    min-height: 40px;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 600;

    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.st-link-btn:hover:not(:disabled) { background: rgba(255, 178, 0, .1); border-color: rgba(255, 178, 0, .28); }
.st-link-btn:disabled { color: #56508c; cursor: not-allowed; }
.st-link-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------ دکمه‌ها */
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 15px 22px;
    min-height: 54px;

    border-radius: 14px;
    font-size: 15.5px;
    font-weight: 700;

    transition: transform .14s ease, filter .18s ease, border-color .18s ease,
                color .18s ease, background .18s ease, box-shadow .2s ease;
}
.st-btn:active:not(:disabled) { transform: scale(.985); }
.st-btn:disabled { opacity: .55; cursor: not-allowed; }
.st-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.st-btn-primary {
    background: linear-gradient(180deg, #ffc02e, var(--gold));
    border: none;
    color: #17130a;
    box-shadow: 0 12px 30px -12px rgba(255, 178, 0, .55);
}
.st-btn-primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 16px 36px -12px rgba(255, 178, 0, .65); }

.st-btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
}
.st-btn-ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }

.st-btn-slim { margin-top: 10px; min-height: 46px; padding: 12px; font-size: 13.5px; font-weight: 600; }

.st-btn-row { display: flex; gap: 10px; }
.st-btn-row .st-btn-ghost { flex: 0 0 34%; }
.st-btn-row .st-btn-primary { flex: 1; }

/* اسپینرِ داخل دکمه — دکمه نباید موقع کار «مرده» به نظر برسد */
.st-btn.is-busy { pointer-events: none; }
.st-btn.is-busy .st-btn-label::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-inline-start: 9px;
    vertical-align: -2px;

    border: 2px solid rgba(23, 19, 10, .28);
    border-top-color: #17130a;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.st-btn-ghost.is-busy .st-btn-label::after { border-color: rgba(255,255,255,.2); border-top-color: var(--gold); }
.st-btn.is-busy > i { display: none; }

/* ------------------------------------------------------------- پیام‌ها */
.st-msg { min-height: 0; margin: 0; }
.st-msg:empty { display: none; }

.st-msg .m {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0 4px;
    padding: 12px 14px;
    text-align: start;

    border-radius: 12px;
    font-size: 13px;
    line-height: 1.85;
    animation: stMsgIn .26s ease both;
}
@keyframes stMsgIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.st-msg .m i { margin-top: 4px; flex: 0 0 auto; }
.st-msg .m.err  { background: rgba(231, 76, 60, .11); border: 1px solid rgba(231, 76, 60, .35); color: #ffb3ab; }
.st-msg .m.ok   { background: rgba(46, 204, 113, .1); border: 1px solid rgba(46, 204, 113, .35); color: #9df3bd; }
.st-msg .m.info { background: rgba(255, 178, 0, .08); border: 1px solid rgba(255, 178, 0, .28); color: var(--gold-soft); }

.st-foot-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 0;
    color: #6f68a3;
    font-size: 11.5px;
}
.st-foot-note i { opacity: .7; }

/* =============================================================================
 *  نتیجه — کارت پرونده
 * -----------------------------------------------------------------------------
 *  قبلاً همه‌ی فیلدها در یک شبکه‌ی یکنواخت پشت هم می‌آمدند و «شبا» با «شهر»
 *  هم‌وزن دیده می‌شد. حالا سه لایه‌ی خوانایی هست: سربرگِ وضعیت، گروه‌های
 *  عنوان‌دار، و داخل هر گروه فیلدهای هم‌خانواده.
 * ========================================================================== */
.st-result { margin-top: 26px; }
.st-result:empty { display: none; }

.st-card {
    overflow: hidden;
    margin: 0 0 16px;
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 22px 60px -28px rgba(3, 2, 22, .75);
    animation: stCardIn .45s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--d, 0ms);
}
@keyframes stCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------- سربرگِ پرونده */
.st-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 20px 22px;

    background:
        radial-gradient(90% 180% at 100% 0%, rgba(255, 178, 0, .09), transparent 60%),
        rgba(11, 9, 32, .45);
    border-bottom: 1px solid var(--line);
}

.st-card-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-card-id small { color: var(--muted); font-size: 11.5px; }
.st-card-id .code {
    color: var(--gold);
    font-size: 19px;
    font-weight: 800;
    direction: ltr;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.st-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;

    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.st-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px currentColor;
    opacity: .85;
}
.st-badge.pending   { color: #ffd27a; border-color: rgba(255, 210, 122, .42); background: rgba(255, 210, 122, .1); }
.st-badge.pending2  { color: #9ec6ff; border-color: rgba(158, 198, 255, .42); background: rgba(158, 198, 255, .1); }
.st-badge.approved  { color: #7bf0a8; border-color: rgba(123, 240, 168, .42); background: rgba(123, 240, 168, .1); }
.st-badge.rejected,
.st-badge.rejected2 { color: #ff9c92; border-color: rgba(255, 156, 146, .42); background: rgba(255, 156, 146, .1); }

/* ---------------------------------------------------------- گروه‌بندی */
.st-group { padding: 6px 22px 18px; }

.st-group-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 20px 0 13px;
    padding-bottom: 9px;

    border-bottom: 1px solid var(--line);
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
.st-group-title i { font-size: 11px; opacity: .8; }

.st-grid {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.st-item {
    min-width: 0;
    padding: 11px 13px;

    background: #100d33;
    border: 1px solid var(--line);
    border-inline-start: 2px solid rgba(255, 178, 0, .3);
    border-radius: 12px;

    transition: border-color .22s ease, background .22s ease;
}
.st-item.wide { grid-column: 1 / -1; }

.st-item .k {
    display: block;
    margin-bottom: 6px;
    color: #8079b5;
    font-size: 11px;
    font-weight: 600;
}
.st-item .v {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
.st-item.ltr .v {
    direction: ltr;
    text-align: end;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* کپی با یک کلیک — همان الگوی پنل ادمین، تا یک زبانِ واحد در کل سایت باشد */
.st-item.copyable { cursor: pointer; outline: none; position: relative; }
.st-item.copyable:hover { border-color: rgba(255, 178, 0, .5); background: #13103c; }
.st-item.copyable:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 178, 0, .15); }
.st-item.copied {
    border-color: rgba(46, 204, 113, .75) !important;
    background: rgba(46, 204, 113, .16) !important;
}
.st-item.copied .k::after {
    content: "  کپی شد";
    color: #7bf0a8;
    font-weight: 700;
}

/* ------------------------------------------------------------ علت رد */
.st-reject {
    margin: 4px 22px 20px;
    padding: 16px 18px;

    background: rgba(231, 76, 60, .09);
    border: 1px solid rgba(231, 76, 60, .32);
    border-inline-start: 3px solid var(--err);
    border-radius: 14px;
}
.st-reject h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 9px;
    color: #ffb3ab;
    font-size: 13.5px;
}
.st-reject p { margin: 0; font-size: 13.5px; line-height: 2.05; color: #ffd0cb; }

/* --------------------------------------------------------- دکمه‌ها */
.st-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-top: 18px;
}
.st-actions .full { grid-column: 1 / -1; }

.st-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 16px;
    min-height: 52px;

    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-align: center;

    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .14s ease;
}
.st-act:hover  { border-color: var(--gold); color: var(--gold); background: rgba(255, 178, 0, .07); }
.st-act:active { transform: scale(.985); }
.st-act:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.st-act:disabled { opacity: .6; cursor: not-allowed; }

.st-act.primary {
    background: linear-gradient(180deg, #ffc02e, var(--gold));
    border-color: transparent;
    color: #17130a;
    font-weight: 700;
    box-shadow: 0 12px 30px -14px rgba(255, 178, 0, .55);
}
.st-act.primary:hover { filter: brightness(1.06); color: #17130a; }

/* ------------------------------------------------------------- موبایل */
@media (max-width: 620px) {
    .st-head { flex-direction: column; align-items: stretch; }
    .st-back { align-self: flex-start; }
    .st-title { font-size: 21px; }

    .st-steps ol { gap: 0; }
    .st-step-label { font-size: 10.5px; }
    .st-step-dot { width: 34px; height: 34px; border-radius: 11px; font-size: 12.5px; }
    .st-step::before { top: 17px; }

    .st-shell { padding: 28px 18px 22px; border-radius: 20px; }
    .st-pane-icon { width: 54px; height: 54px; font-size: 21px; border-radius: 17px; }

    /* روی صفحه‌های باریک، پنج کادرِ ۵۲ پیکسلی جا نمی‌شود و آخری می‌شکند */
    .st-otp { gap: 7px; }
    .st-otp-box { width: 46px; height: 55px; font-size: 20px; border-radius: 12px; }

    .st-card-head { padding: 17px 16px; }
    .st-group { padding: 4px 16px 16px; }
    .st-reject { margin-inline: 16px; }
    .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-actions { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
    .st-otp-box { width: 42px; height: 51px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .st-pane.is-active, .st-pane.is-back, .st-card, .st-msg .m { animation: none; }
    .st-kicker-dot { animation: none; }
    .st-step-dot, .st-otp-box, .st-btn, .st-act { transition-duration: .01ms; }
}