/* ============================================================
   سبزحساب — صفحه ورود
   ============================================================
   🔴 چرا فایل و پیشوند جدا، و نه افزودن به `gate.css`:

   `gate.css` صفحه‌های انتخاب و ساخت کسب‌وکار را استایل می‌دهد و
   کلاس‌هایی مثل `.gate-form` و `.gate-foot` دارد. یک بار همین‌ها را
   بازنویسی کردم و هر دو صفحه شکستند. پیشوند `signin-` یعنی این اتفاق
   دیگر ممکن نیست.

   🔴 و چرا اینجا رنگ‌ها ثابت‌اند و از توکن‌های تم نمی‌آیند:

   صفحه ورود فقط حالت روز دارد. اگر `var(--surface)` می‌نوشتیم، روزی
   که کاربر تم تاریک را انتخاب کند این صفحه هم تیره می‌شد — دقیقا
   همان چیزی که نباید بشود.
   ============================================================ */

.signin {
    --si-bg:      #F6F8F6;
    --si-card:    #FFFFFF;
    --si-line:    #E3E7EC;
    --si-ink:     #16231F;
    --si-muted:   #6B7A75;
    --si-faint:   #93A19C;
    --si-brand:   #037347;
    --si-brand-d: #02603B;
    --si-tint:    #A9DCC4;
    --si-bad:     #B42318;

    margin: 0;
    min-block-size: 100dvh;
    /* همرنگ sabzhesab.com — رادیال‌گرادیانت سبز ملایم */
    background:
        radial-gradient(1100px 520px at 82% -12%, rgba(87, 211, 98, .16), transparent 60%),
        radial-gradient(900px 480px at 12% 108%, rgba(17, 173, 133, .12), transparent 60%),
        var(--si-bg);
    color: var(--si-ink);
    font-family: 'IRANSansX', 'IRANSans', Tahoma, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* نوار رنگی بالا — همان اکسنت برند پنل، برای یکدستی */
.signin::before {
    content: "";
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 5px;
    background: linear-gradient(120deg, #11AD85, #57D362 60%, #98E766);
    z-index: 5;
}

/* ---------- شکل‌های تزئینی ---------- */

/* 🔴 اینجا عمدا `left` فیزیکی است، نه `inset-inline-start` منطقی.
   صفحه همیشه RTL است و `inline-start` یعنی **راست** — که تزئین را
   دقیقا آینه طراحی مرجع می‌کرد. جای این شکل‌ها یک تصمیم بصری است،
   نه پیروی از جهت متن. */
.signin-decor {
    position: fixed;
    top: 0;
    left: 0;
    inline-size: 50vw;
    block-size: 100dvh;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    color: var(--si-tint);
}

/* 🔴 تصویر عمدا از لبه بیرون می‌زند.
   شکلی که کامل داخل کادر بنشیند، شبیه «تصویری که گذاشته‌اند» می‌شود؛
   شکلی که برش بخورد، بخشی از خود صفحه به نظر می‌رسد — همان کاری که
   طراحی مرجع با علامت تعجبش می‌کند. */
.signin-leaf {
    position: absolute;
    top: 0;
    left: 0;
    inline-size: 46vw;
    max-inline-size: 720px;
    block-size: auto;
    transform: rotate(-8deg);
    transform-origin: top left;
}


/* ---------- چیدمان ---------- */

.signin-main {
    position: relative;
    z-index: 1;
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    box-sizing: border-box;
}

/* روی دسکتاپ کارت از مرکز کنار می‌رود تا تزئین جا باز کند —
   همان تعادلی که در طراحی مرجع هست. */
@media (min-width: 1080px) {
    .signin-main {
        /* کارت در نیمه راست می‌نشیند و نیمه چپ برای تزئین باز می‌ماند —
           همان تعادل طراحی مرجع. `padding-left` فیزیکی، به همان دلیل بالا. */
        padding-left: 46vw;
        padding-right: 40px;
    }
}

.signin-card {
    inline-size: 100%;
    max-inline-size: 430px;
    background: var(--si-card);
    border: 1px solid var(--si-line);
    border-radius: 16px;
    padding: 40px 36px 30px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 10px 28px rgb(16 24 40 / .05);
}

@media (max-width: 480px) {
    .signin-card { padding: 30px 20px 24px; border-radius: 14px; }
}

.signin-logo {
    display: block;
    margin-inline: auto;
    inline-size: 200px;
    block-size: auto;
}

.signin-title {
    margin: 18px 0 30px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    line-height: 1.7;
}

/* ---------- هشدار ---------- */

.signin-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-block-end: 20px;
    padding: 11px 13px;
    border: 1px solid #FDA29B;
    border-radius: 10px;
    background: #FEF3F2;
    color: var(--si-bad);
    font-size: 12.5px;
    line-height: 1.8;
}
.signin-alert svg { flex: none; margin-block-start: 2px; }

/* ---------- فیلدها ---------- */

.signin-form { display: flex; flex-direction: column; gap: 22px; }

/* 🔴 برچسب روی خط کادر می‌نشیند.
   پس‌زمینه سفید برچسب، خط را همان‌جا می‌برد — الگوی outlined طراحی
   مرجع، بدون fieldset/legend که در RTL جای‌گیری قابل اتکایی ندارد. */
.signin-field { position: relative; }

.signin-field > label {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    padding-inline: 6px;
    background: var(--si-card);
    color: var(--si-faint);
    font-size: 11.5px;
    line-height: 1;
    pointer-events: none;
    transition: color .15s ease;
}

.signin-field > input {
    inline-size: 100%;
    block-size: 56px;
    padding-inline: 16px;
    border: 1px solid var(--si-line);
    border-radius: 10px;
    background: var(--si-card);
    color: var(--si-ink);
    font-family: 'IRANSansXNum', 'IRANSansX', Tahoma, sans-serif;
    font-size: 15px;
    /* جهت متن از خود فیلد می‌آید: فیلدهای لاتین (موبایل/رمز/کپچا) با
       dir=ltr همیشه چپ‌چین می‌مانند؛ نام/نام‌خانوادگی جهت ندارند و از
       زبان صفحه پیروی می‌کنند — فارسی راست، انگلیسی چپ. */
    text-align: start;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}


/* 🔴 تکمیل خودکار مرورگر، پس‌زمینه را با زور عوض می‌کند.
   Chrome و Safari روی فیلد پرشده یک پس‌زمینه آبی/خاکستری می‌نشانند که
   با `background` معمولی برداشته نمی‌شود — تنها راهش یک `inset shadow`
   بزرگ است. بدون این، کادر نام کاربری بعد از تکمیل خودکار رنگ عوض
   می‌کرد و شبیه فیلد غیرفعال می‌شد.
   `transition` طولانی هم همان ترفند شناخته‌شده است تا رنگ لحظه‌ای
   پیش از اعمال shadow دیده نشود. */
.signin-field > input:-webkit-autofill,
.signin-field > input:-webkit-autofill:hover,
.signin-field > input:-webkit-autofill:focus,
.signin-field > input:autofill {
    -webkit-text-fill-color: var(--si-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--si-card) inset;
    box-shadow: 0 0 0 1000px var(--si-card) inset;
    caret-color: var(--si-ink);
    transition: background-color 9999s ease-in-out 0s;
}

.signin-field > input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--si-card) inset, 0 0 0 3px rgb(3 115 71 / .12);
    box-shadow: 0 0 0 1000px var(--si-card) inset, 0 0 0 3px rgb(3 115 71 / .12);
}
.signin-field > input::placeholder { color: #BCC6C2; }
.signin-field > input:hover { border-color: #CBD5D1; }

.signin-field > input:focus {
    outline: none;
    border-color: var(--si-brand);
    box-shadow: 0 0 0 3px rgb(3 115 71 / .12);
}
/* 🔴 `input:focus ~ label` کار نمی‌کند: برچسب **قبل** از ورودی است و
   CSS برادر قبلی را انتخاب نمی‌کند. `:has` روی خود ظرف می‌نشیند. */
.signin-field:has(> input:focus) > label { color: var(--si-brand); }

.signin-field--bad > input { border-color: #FDA29B; }
.signin-field--bad > label { color: var(--si-bad); }

/* رمز: متن از همان ۱۶px شروع می‌شود که نام کاربری (پس هم‌تراز دیده
   می‌شوند)، و سمت راست ۴۸px جا برای دکمه چشم می‌ماند. چون رمز dir=ltr
   است، inline-start=چپ و inline-end=راست در هر دو زبان. */
.signin-field > input[type="password"],
.signin-field > input#password { padding-inline-start: 16px; padding-inline-end: 48px; }

/* 🔴 رمز با قلم لاتین تک‌فاصله نوشته می‌شود، نه قلم عددی فارسی.
   `IRANSansXNum` ارقام لاتین را به شکل فارسی نشان می‌دهد — برای مبلغ
   و تاریخ درست است، ولی روی رمز یعنی کاربر `123` تایپ می‌کند و
   `۱۲۳` می‌بیند. دکمه «نمایش رمز» دقیقا برای این است که ببیند چه
   تایپ کرده؛ نشان دادن نویسه دیگری، خود هدف را نقض می‌کند.
   تک‌فاصله بودن هم کمک می‌کند 0 و O و l و 1 از هم تشخیص داده شوند. */
.signin-field > input#password {
    font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
    font-size: 14.5px;
    letter-spacing: .02em;
}

.signin-eye {
    position: absolute;
    /* 🔴 راست فیزیکی، نه inline-start: رمز همیشه لاتین (dir=ltr) است و
       متنش از چپ شروع و به راست ختم می‌شود؛ پس دکمه چشم در هر دو زبان
       باید سمت راست بنشیند. inset-inline در فارسی به راست و در انگلیسی
       به چپ می‌افتاد و با متن قاطی می‌شد. */
    right: 8px;
    left: auto;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--si-faint);
    cursor: pointer;
}
.signin-eye:hover { color: var(--si-muted); background: #F2F4F7; }

/* کدام آیکون دیده شود، از روی همان `aria-pressed` تصمیم گرفته می‌شود
   که وضعیت را به صفحه‌خوان می‌گوید — پس ظاهر و معنا هیچ‌وقت از هم
   جدا نمی‌افتند. */
.signin-eye svg { display: block; }
.signin-eye .signin-eye-off { display: none; }
.signin-eye[aria-pressed="true"] .signin-eye-on { display: none; }
.signin-eye[aria-pressed="true"] .signin-eye-off { display: block; }
.signin-eye:focus-visible { outline: 2px solid var(--si-brand); outline-offset: 1px; }

/* ---------- ردیف زیر رمز ---------- */

.signin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: -8px;
    flex-wrap: wrap;
}

.signin-link {
    color: var(--si-brand);
    font-size: 12.5px;
    text-decoration: none;
}
.signin-link:hover { text-decoration: underline; }

.signin-remember {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--si-muted);
    font-size: 12.5px;
    cursor: pointer;
}
/* 🔴 ورودی بومی نامرئی می‌شود ولی از جریان خارج نمی‌شود:
   `display:none` یا `visibility:hidden` آن را از دسترس صفحه‌کلید و
   صفحه‌خوان هم خارج می‌کند. `opacity:0` روی همان مربع، هر دو را
   نگه می‌دارد. */
.signin-remember input {
    position: absolute;
    inline-size: 16px;
    block-size: 16px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.signin-box {
    inline-size: 16px;
    block-size: 16px;
    flex: none;
    border: 1.5px solid #C6D0CC;
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: background .12s ease, border-color .12s ease;
}

/* تیک با دو خط چرخیده ساخته می‌شود، نه با تصویر —
   نه فایلی لازم دارد نه data: URI که به CSP مربوط شود. */
.signin-box::after {
    content: '';
    position: absolute;
    inset-block-start: 1px;
    inset-inline-start: 4.5px;
    inline-size: 4px;
    block-size: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .12s ease;
}

.signin-remember input:checked + .signin-box {
    background: var(--si-brand);
    border-color: var(--si-brand);
}
.signin-remember input:checked + .signin-box::after { transform: rotate(45deg) scale(1); }

.signin-remember input:focus-visible + .signin-box {
    outline: 2px solid var(--si-brand);
    outline-offset: 2px;
}
.signin-remember:hover .signin-box { border-color: #A9B6B1; }

/* ---------- دکمه ---------- */

.signin-submit {
    inline-size: 100%;
    block-size: 52px;
    margin-block-start: 4px;
    border: 0;
    border-radius: 10px;
    background: var(--si-brand);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease;
}
.signin-submit:hover { background: var(--si-brand-d); }
.signin-submit:active { transform: translateY(1px); }
.signin-submit:focus-visible { outline: 2px solid var(--si-brand); outline-offset: 2px; }

/* ---------- پاورقی ---------- */

.signin-sep {
    block-size: 1px;
    margin: 26px 0 18px;
    background: var(--si-line);
}

.signin-foot {
    margin: 0;
    text-align: center;
    color: var(--si-muted);
    font-size: 12.5px;
    line-height: 1.9;
}

/* ---------- موبایل ---------- */

/* 🔴 تزئین در عرض کم حذف می‌شود، نه کوچک.

   آستانه ۱۰۸۰ است نه ۹۰۰: روی ۹۰۰ پیکسل، فاصله برگ تا کارت به ۸
   پیکسل می‌رسید — نه همپوشانی، ولی آن‌قدر تنگ که شلوغ به نظر برسد.
   اندازه‌گیری شد، حدس زده نشد. */
@media (max-width: 1079px) {
    .signin-decor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .signin-submit { transition: none; }
}

/* ---------- ثبت‌نام: زیرعنوان، کپچا، تیک قوانین ---------- */
.signin-sub {
    text-align: center;
    color: var(--si-muted);
    font-size: 13px;
    line-height: 1.9;
    margin: -6px 0 18px;
}

.signin-captcha {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.signin-captcha__img {
    border: 1px solid var(--si-line);
    border-radius: 8px;
    background: #fff;
    display: block;
}

.signin-captcha__refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--si-line);
    border-radius: 8px;
    background: var(--si-card);
    color: var(--si-muted);
    cursor: pointer;
}

.signin-captcha__refresh:hover {
    color: var(--si-tint);
}

.signin-terms {
    align-items: flex-start;
}

.signin-terms--bad > span:last-child {
    color: var(--si-bad);
}

/* ---------- ثبت‌نام: کارت پهن و چیدمان دوستونی روی دسکتاپ ----------

   فرم ثبت‌نام شش فیلد دارد؛ تک‌ستونی روی لپ‌تاپ بیش از حد بلند می‌شد.
   روی عرض کافی، فیلدها جفت‌جفت کنار هم می‌نشینند و ارتفاع فرم نصف می‌شود.
   زیر ۶۲۰px دوباره تک‌ستونی می‌شود تا روی موبایل چیزی فشرده نشود. */

.signin-card--wide {
    max-inline-size: 680px;
}

.signin-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

@media (min-width: 620px) {
    .signin-grid { grid-template-columns: 1fr 1fr; }
    /* در ردیف کپچا، ورودی و تصویر ته‌به‌ته تراز شوند */
    .signin-grid--captcha { align-items: center; }
}

/* روی ردیف کپچا، بلوک تصویر دیگر فاصله زیرین جدا لازم ندارد */
.signin-grid--captcha .signin-captcha { margin-bottom: 0; }

/* 🔴 روی دسکتاپ، کارت پهن ثبت‌نام دیگر در نیمه راست جا نمی‌شود.
   قاعده صفحه ورود کارت را با padding-left: 46vw به راست می‌راند تا
   تزئین در نیمه چپ بنشیند؛ برای کارت ۶۸۰px این یعنی سرریز. پس روی
   صفحه ثبت‌نام کارت را وسط می‌آوریم و تزئین پشت گوشه بالا-چپ می‌ماند. */
@media (min-width: 1080px) {
    .signin--register .signin-main {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* 🔴 هیچ اسکرول افقی: تزئین عمدا از لبه بیرون می‌زند و در عرض‌های میانی
   می‌توانست نوار افقی بسازد. ریشه‌ها را (شبکه و کپچا) پایین می‌بندیم و
   این هم تور ایمنی نهایی است. تزئین fixed است و کلیپ خودش را دارد،
   پس چیزی از محتوا بریده نمی‌شود. */
.signin { overflow-x: hidden; }

/* ستون‌های شبکه اجازه کوچک‌شدن زیر min-content بگیرند تا فیلد/تصویر
   با عرض ذاتی، شبکه را از کارت پهن‌تر نکند. */
.signin-grid > * { min-inline-size: 0; }
.signin-field > input { min-inline-size: 0; }

.signin-captcha { flex-wrap: wrap; }
.signin-captcha__img { max-inline-size: 100%; height: auto; }

/* ---------- کلید انتخاب زبان ---------- */

.signin-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;   /* داخل نوار پایین می‌نشیند */
    padding: 3px;
    border: 1px solid var(--si-line);
    border-radius: 999px;
    background: var(--si-card);
}

.signin-lang__opt {
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--si-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.6;
    transition: background .12s ease, color .12s ease;
}
.signin-lang__opt:hover { color: var(--si-ink); }
.signin-lang__opt.is-on {
    background: rgba(3, 115, 71, .1);
    color: var(--si-brand);
}

/* ---------- نسخه نرم‌افزار ---------- */

/* ---------- نوار پایین صفحه: نسخه (چپ) و کلید زبان (راست) ----------
   🔴 dir=ltr روی خود نوار، پس با عوض‌شدن زبان جای این دو عوض نمی‌شود:
   نسخه همیشه سمت چپ می‌ماند، کلید زبان همیشه سمت راست. */
.signin-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .82);
    border-block-start: 1px solid var(--si-line);
    backdrop-filter: blur(6px);
}

.signin-bar__ver {
    font-size: 11px;
    color: var(--si-faint);
    letter-spacing: .3px;
    /* «Version 2.3.7» یک رشته انگلیسی است — ارقامش همیشه لاتین، حتی در فارسی */
    font-family: 'BrandLatinNum', 'IRANSansX', Tahoma, sans-serif;
}

/* جا برای نوار پایین تا محتوای کارت زیرش پنهان نشود */
.signin-main { padding-block-end: 60px; }

/* ---------- احراز: ورود کد ---------- */
.signin-otp-input {
    text-align: center;
    letter-spacing: .4em;
    font-size: 20px;
    /* قلم تک‌فاصله لاتین تا کد ۵ رقمی در هر دو زبان روشن و بی‌ابهام دیده شود */
    font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
}

.signin-otp-expiry {
    margin: 12px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--si-faint);
}

.signin-otp-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-block-start: 12px;
}
.signin-otp-actions form { margin: 0; }
.signin-otp-actions button {
    background: none;
    border: 0;
    padding: 4px;
    font: inherit;
    color: var(--si-brand);
    cursor: pointer;
}
.signin-otp-actions button:hover { text-decoration: underline; }
.signin-otp-actions button[disabled] { color: var(--si-faint); cursor: default; text-decoration: none; }

/* هشدار موفق (سبز) — «کد دوباره ارسال شد» */
.signin-alert--ok {
    border-color: #A6E4C4;
    background: #EDFBF3;
    color: var(--si-brand);
}

/* ---------- احراز: دو بخش موبایل و ایمیل ---------- */
.signin-verify {
    border: 1px solid var(--si-line);
    border-radius: 12px;
    padding: 16px;
    margin-block-end: 14px;
}
.signin-verify--done {
    border-color: #A6E4C4;
    background: #F3FCF7;
}
.signin-verify__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-block-end: 12px;
}
.signin-verify__label { font-weight: 700; font-size: 14px; }
.signin-verify__head b { color: var(--si-muted); font-size: 13px; }
.signin-verify__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
    color: var(--si-brand);
    font-weight: 700;
    font-size: 13px;
}
.signin-verify--done .signin-verify__head { margin-block-end: 0; }

.signin-verify__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.signin-verify__send {
    padding: 9px 16px;
    border: 1px solid var(--si-brand);
    border-radius: 9px;
    background: var(--si-card);
    color: var(--si-brand);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.signin-verify__send:hover { background: rgba(3, 115, 71, .06); }
.signin-verify__actions form { margin: 0; }

.signin-verify__form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.signin-verify__form .signin-otp-input {
    flex: 1;
    min-inline-size: 0;
    block-size: 48px;
    border: 1px solid var(--si-line);
    border-radius: 9px;
    padding-inline: 14px;
    box-sizing: border-box;
    background: var(--si-card);
    color: var(--si-ink);
    letter-spacing: .3em;
    font-size: 18px;
}
.signin-submit--sm {
    block-size: 48px;
    inline-size: auto;
    margin: 0;
    padding-inline: 20px;
    white-space: nowrap;
}
.signin-verify__err { color: var(--si-bad); font-size: 12.5px; margin: 8px 0 0; }
.signin-verify__resend { margin-block-start: 8px; }
.signin-verify__resend form { margin: 0; }
.signin-verify__resend button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--si-brand);
    cursor: pointer;
}
.signin-verify__resend button[disabled] { color: var(--si-faint); cursor: default; }

/* ---------- ارقام لاتین در حالت انگلیسی ----------
   🔴 قلم IRANSansXNum ارقام لاتین (0-9) را به شکل فارسی (۰-۹) می‌کشد —
   که برای رابط فارسی درست است ولی در انگلیسی غلط. پس در lang=en ورودی‌ها
   قلم معمولی می‌گیرند تا عددها لاتین دیده شوند. رمز id-محور است و
   monospace‌اش دست‌نخورده می‌ماند. */
html[lang="en"] .signin,
html[lang="en"] .signin-field > input {
    font-family: 'BrandLatinNum', 'IRANSansX', Tahoma, sans-serif;
}

/* ============================================================
   اجزای صفحه «ساخت کسب‌وکار» — همان زبان بصری ورود
   ============================================================ */

/* زیرعنوان کارت */
.signin-sub {
    margin: -4px 0 20px;
    font-size: 13px; line-height: 1.9; color: var(--si-muted); text-align: center;
}

/* دکمه خروج — بالای صفحه، سمت راست (RTL) */
.signin-out {
    position: fixed;
    inset-block-start: 14px;
    inset-inline-start: 16px;
    z-index: 6;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--si-muted); text-decoration: none;
    padding: 7px 13px; border: 1px solid var(--si-line); border-radius: 999px;
    background: rgba(255, 255, 255, .86); backdrop-filter: blur(4px);
}
.signin-out:hover { color: var(--si-bad); border-color: var(--si-bad); }

/* دو ستون (تاریخ‌های سال مالی) */
.signin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .signin-grid { grid-template-columns: 1fr; } }

/* راهنمای زیر فیلد */
.signin-hint { display: block; margin-block-start: 6px; font-size: 11.5px; color: var(--si-muted); line-height: 1.75; }

/* لیبل گروه (برای گزینه‌های دوتایی، که فیلد شناور نیستند) */
.signin-glabel { display: block; margin-block-end: 8px; font-size: 12.5px; font-weight: 600; color: var(--si-ink); }
.signin-group { display: block; }

/* گزینه‌های دوتایی کنار هم — تومان/ریال، روش بهایابی */
.signin-seg-row { display: flex; gap: 8px; }
.signin-seg {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 11px 8px; cursor: pointer; text-align: center;
    border: 1px solid var(--si-line); border-radius: 10px;
    background: var(--si-card); color: var(--si-ink); font-size: 13.5px;
    transition: border-color .12s, background .12s, color .12s;
}
.signin-seg input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.signin-seg:hover { border-color: var(--si-tint); }
.signin-seg:has(input:checked) {
    border-color: var(--si-brand);
    box-shadow: inset 0 0 0 1px var(--si-brand);
    background: color-mix(in oklab, var(--si-brand) 8%, #fff);
    color: var(--si-brand-d); font-weight: 700;
}
.signin-seg:has(input:focus-visible) { outline: 2px solid var(--si-brand); outline-offset: 2px; }

/* بخش پیشرفته جمع‌شونده */
.signin-more { border-block-start: 1px solid var(--si-line); padding-block-start: 2px; }
.signin-more > summary {
    cursor: pointer; font-size: 12.5px; color: var(--si-muted);
    padding: 10px 0; list-style: none; user-select: none;
}
.signin-more > summary::-webkit-details-marker { display: none; }
.signin-more > summary::before { content: "◂ "; font-size: .8em; }
.signin-more[open] > summary::before { content: "▾ "; }
.signin-more[open] > *:not(summary) { margin-block-start: 14px; }