/*
 * ⭐⭐⭐ WI-270 — صفحهٔ ورود، طرحِ «شیشه‌ای تیره» (انتخابِ صریحِ مالک بینِ سه طرحِ زنده).
 *
 * ⚠️⚠️⚠️ فایلِ **مهمان-only** است و عمداً در `pages/login.css` ننشست: آن فایل یکی از سه
 * شیوه‌نامهٔ صفحه‌ای است که لایهٔ **احرازشده** هم بارش می‌کند، پس هر بایتش روی بودجهٔ
 * پوسته می‌نشیند و روی **هر** صفحهٔ برنامه هزینه می‌دهد (`PR-089`).
 *
 * ⚠️⚠️⚠️ **تک‌حالته می‌مانَد.** هیچ `@media (prefers-color-scheme)`، هیچ `data-theme` و
 * هیچ سوییچی اینجا نیست. تصمیمِ پیشینِ مالک («نه کلا حالت تاریکش رو نمیخوام») دربارهٔ
 * **حالتِ تاریکِ برنامه** بود — سوییچ و تبعیت از سیستم — نه دربارهٔ ظاهرِ این یک صفحه.
 * مالک سه طرحِ زنده را دید و «شیشه‌ای تیره» را انتخاب کرد؛ ناوردای «یک حالت، بدونِ
 * ماشینِ تم» دست‌نخورده است و فقط آن یک حالت از این پس تیره است.
 *
 * ⚠️⚠️ `admin-system.css` **پس از** این فایل بار می‌شود و دکمه و حلقهٔ فوکوس را با تخصصِ
 * برابر بازنویسی می‌کند؛ پس انتخابگرهای اینجا عمداً دو-کلاسه‌اند تا ببرند.
 *
 * ⚠️⚠️ همهٔ حرکت‌ها فقط `transform`/`opacity`اند. `transition: all` ممنوع.
 *
 * ⚠️ اعدادِ سبکِ دیداری از Skillِ `ui-ux-pro-max` (`--domain style "glassmorphism dark"`,
 * سبکِ «Modern Dark») آمده‌اند: **هرگز `#000000`ِ خالص** · لکه‌های محیطی با شدتِ کم ·
 * حاشیهٔ مویی · شعاعِ ۱۶px · منحنیِ `cubic-bezier(0.16, 1, 0.3, 1)` · فشارِ `scale(0.97)`.
 */

.lg-shell {
    /*
     * ⚠️⚠️ متغیرها روی **خودِ پوسته** می‌نشینند، نه روی `:root`. `:root`ِ این نصب
     *    مشترک است و `foundations/base.css` رویش `color-scheme: light` پین کرده؛
     *    نوشتنِ توکن‌های تیره روی `:root` یعنی نشت به هر صفحهٔ دیگری که روزی همین
     *    فایل را ببیند.
     */
    --lg-ink:        #f4f7fd;
    --lg-ink-soft:   #c9d4ea;
    --lg-ink-label:  #dde5f5;
    --lg-line:       rgba(255, 255, 255, 0.14);
    --lg-line-input: rgba(255, 255, 255, 0.22);
    --lg-glass:      rgba(255, 255, 255, 0.075);
    --lg-input:      rgba(255, 255, 255, 0.10);
    --lg-focus:      #8ab4ff;
    --lg-deep:       #070c18;

    /*
     * ⚠️⚠️ `color-scheme` اینجا **محدود به همین پوسته** تیره می‌شود. بدونِ آن،
     *    کاراتِ متن و نوارِ اسکرولِ بومی با پینِ سراسریِ `light` رندر می‌شوند و روی
     *    کارتِ تیره نامرئی‌اند. این سوییچِ تم نیست؛ اعلامِ روشناییِ همین ناحیه است.
     */
    color-scheme: dark;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    color: var(--lg-ink);

    /* ⚠️ «هرگز `#000000`ِ خالص» — قاعدهٔ صریحِ سبکِ Modern Dark. */
    background: linear-gradient(165deg, #16223d 0%, #0b1224 54%, var(--lg-deep) 100%);
}

/*
 * ⭐ سه لکهٔ نورِ محیطی.
 *
 * ⚠️⚠️⚠️ شدتشان عمداً **کم** است (قاعدهٔ Skill: ۰٫۰۸–۰٫۱۲). طرحِ نخستِ من ۰٫۵۵–۰٫۸۵
 * داشت — هفت تا ده برابر — و پس‌زمینه را از «نورِ محیطی» به «پس‌زمینهٔ پرنویز» می‌برد.
 *
 * ⚠️⚠️ افزون بر زیبایی، این سقف **ناوردایِ کنتراست** را هم نگه می‌دارد: کارت با پایهٔ
 * تیره ترکیب می‌شود، پس بیشترین سهمی که یک لکه می‌تواند در پس‌زمینهٔ **مؤثرِ** متن
 * داشته باشد چند درصد است و کنتراست مستقل از جای لکه‌ها می‌مانَد. بالابردنِ این عددها
 * یعنی ادعای عددیِ کنتراست دیگر معتبر نیست.
 *
 * ⚠️ `overflow: hidden` روی پوسته لازم است وگرنه لکه‌ها اسکرولِ افقی می‌سازند.
 */
.lg-shell::before,
.lg-shell::after,
.lg-glow {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    will-change: transform;
}

.lg-shell::before {
    inline-size: 32rem;
    block-size: 32rem;
    inset-block-start: -11rem;
    inset-inline-end: -9rem;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.55), rgba(96, 165, 250, 0) 70%);
    opacity: 0.12;
    animation: lg-drift-a 13s ease-in-out infinite alternate;
}

.lg-shell::after {
    inline-size: 28rem;
    block-size: 28rem;
    inset-block-end: -10rem;
    inset-inline-start: -8rem;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.55), rgba(45, 212, 191, 0) 70%);
    opacity: 0.11;
    animation: lg-drift-b 19s ease-in-out infinite alternate;
}

.lg-glow {
    inline-size: 22rem;
    block-size: 22rem;
    inset-block-end: 16%;
    inset-inline-end: 12%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.5), rgba(167, 139, 250, 0) 70%);
    opacity: 0.10;
    animation: lg-drift-c 23s ease-in-out infinite alternate;
}

/*
 * ⚠️ دوره‌ها در بازهٔ ۸ تا ۲۴ ثانیه‌اند — قاعدهٔ ثبت‌شدهٔ `AGENTS.md`. نقصِ ۸.۶۲۸ دقیقاً
 *    بیرونِ همین بازه بود (۲۶ ثانیه) و مالک گفت «یه ورود سادس».
 */
@keyframes lg-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-7rem, 6rem, 0) scale(1.2); }
}

@keyframes lg-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.12); }
    to   { transform: translate3d(6rem, -5rem, 0) scale(0.9); }
}

@keyframes lg-drift-c {
    from { transform: translate3d(0, 0, 0) scale(0.95); }
    to   { transform: translate3d(-5rem, -4rem, 0) scale(1.25); }
}

/*
 * ⭐⭐⭐ رفعِ ۸.۶۲۸ که باید بمانَد — کادر تمامِ صفحه را می‌گیرد.
 *
 * ⚠️⚠️⚠️ `pages/login.css` قاعدهٔ `.guest-shell { width: min(100%, 26rem) }` دارد و
 * `body.app-shell--guest` یک Flex Container است، پس `main` به **۳۶۴ پیکسل**
 * (۲۶rem × ۱۴px) جمع می‌شد و پس‌زمینه فقط همان نوار را رنگ می‌کرد. اندازه‌گیریِ واقعیِ
 * آن نقص روی نصب: viewport ۸۱۵px در برابرِ shell ۳۶۴px.
 *
 * ⚠️⚠️ ترتیبِ بارگذاری حل‌نشدنی است (`admin-system.css` **پس از** این فایل می‌آید)، پس
 * چاره **تخصص** است نه ترتیب: `body.app-shell--guest` (المان + کلاس) بر
 * `.app-shell--guest`ِ تک‌کلاسه می‌بَرد.
 */
/*
 * ⚠️⚠️⚠️ رنگ اینجا **مقدارِ خام** است، نه `var(--lg-deep)`. متغیرها روی `.lg-shell`
 *   اعلام شده‌اند و `body` **والدِ** آن است؛ متغیرهای CSS رو به پایین ارث می‌رسند، نه
 *   رو به بالا. نسخهٔ اولِ همین فایل `var(--lg-deep)` نوشت و مقدار **نامعتبر** شد، پس
 *   `body` پس‌زمینهٔ خاکستریِ `admin-system.css` را نگه داشت. فقط اندازه‌گیریِ پیکسلِ
 *   واقعی گرفتش (`PR-082`): هر ۱۲۸۰×۹۰۰ پیکسل `#f1f1f1` بود.
 */
body.app-shell--guest {
    padding: 0;
    background: #070c18;
}

/*
 * ⚠️⚠️⚠️ `html` هم باید تیره شود، وگرنه پس‌زمینهٔ `body` به **بومِ صفحه** منتقل
 *   نمی‌شود. قاعدهٔ CSS: انتقالِ پس‌زمینهٔ `body` به بوم فقط وقتی رخ می‌دهد که
 *   `html` خودش پس‌زمینه نداشته باشد — و اینجا `admin-system.css` روی `html`
 *   رنگِ `#f1f1f1` گذاشته. اندازه‌گیریِ واقعیِ DOM: `html ⇒ rgb(241,241,241)`.
 *   نتیجه‌اش نوارِ خاکستری زیرِ محتوا روی نمایشگرِ بلند یا هنگامِ Zoom بود.
 * ⚠️ اگر مرورگری `:has()` نداشته باشد، `min-height: 100dvh`ِ پوسته همچنان کلِ
 *   دیدگاه را می‌پوشانَد؛ یعنی این قاعده **بهبود** است، نه تکیه‌گاهِ یکتا.
 */
html:has(> body.app-shell--guest) {
    background: #070c18;
}

.app-shell--guest .guest-shell {
    width: 100%;
    max-width: none;
}

/*
 * ⭐ کارتِ شیشه‌ای.
 *
 * ⚠️⚠️⚠️ پایه **تیره و نیمه‌شفاف** است، نه روشن: کارتِ روشن روی زمینهٔ تیره باید متنِ
 * تیره بگیرد و آن‌وقت کلِ طرح دوباره روشن می‌شود. اینجا شیشه با یک لایهٔ سفیدِ بسیار
 * کم‌رنگ روی همان زمینهٔ تیره ساخته می‌شود.
 */
.lg-card {
    position: relative;
    inline-size: min(25rem, 100%);
    display: grid;
    gap: 1rem;
    padding: 1.75rem 1.5rem 1.55rem;
    border: 1px solid var(--lg-line);
    border-radius: 1.15rem;
    background: var(--lg-glass);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
    box-shadow: 0 24px 60px rgba(3, 7, 18, 0.55);
    animation: lg-card-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/*
 * ⚠️⚠️⚠️ جایی که `backdrop-filter` پشتیبانی نمی‌شود، شیشه **شفاف** می‌مانَد و متن روی
 * لکه‌های رنگی می‌افتد. پس پایهٔ مات‌تر جایگزین می‌شود — نه به‌عنوان زیبایی، به‌عنوان
 * ناوردایِ خوانایی.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lg-card {
        background: rgba(18, 27, 48, 0.92);
    }
}

@keyframes lg-card-in {
    from { opacity: 0; transform: translateY(26px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ⭐ ورودِ پلکانیِ محتوا — زیرِ نیم‌ثانیه؛ این صفحه را کارمند روزی چند بار می‌بیند. */
.lg-anim {
    opacity: 0;
    transform: translateY(16px);
    animation: lg-rise 440ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lg-anim--2 { animation-delay: 110ms; }
.lg-anim--3 { animation-delay: 200ms; }

@keyframes lg-rise {
    to { opacity: 1; transform: translateY(0); }
}

.lg-brand {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    text-align: center;
}

.lg-brand img {
    inline-size: auto;
    block-size: 3rem;
    max-inline-size: 11rem;
    object-fit: contain;
}

.lg-brand h1 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--lg-ink);
}

.lg-brand p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--lg-ink-soft);
}

.lg-form {
    display: grid;
    gap: 0.85rem;
}

.lg-field {
    display: grid;
    gap: 0.35rem;
}

.lg-field > span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lg-ink-label);
}

/*
 * ⚠️⚠️ `font-size: 16px` و ارتفاعِ ≥۴۴px هر دو از Quick Referenceِ `ui-ux-pro-max`
 *    آمده‌اند و در نسخهٔ پیشینِ همین صفحه **نقض** بودند: ۰٫۹۲rem با
 *    `1rem = 14px` یعنی ۱۲٫۸۸px ⇒ iOS در لحظهٔ فوکوس صفحه را خودکار Zoom می‌کرد؛ و
 *    `2.7rem` یعنی ۳۷٫۸px ⇒ زیرِ هدفِ لمسیِ ۴۴px.
 */
.lg-shell .lg-field input {
    min-block-size: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lg-line-input);
    border-radius: 0.7rem;
    background: var(--lg-input);
    font: inherit;
    font-size: 16px;
    color: var(--lg-ink);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

/*
 * ⚠️⚠️⚠️ Autofillِ Chrome پس‌زمینهٔ **روشنِ** خودش را می‌کشد و روی کارتِ تیره متن را
 * ناخوانا می‌کند. تنها راهِ واقعیِ غلبه، سایهٔ درونیِ ضخیم است؛ `background-color`
 * نادیده گرفته می‌شود. رنگِ متن هم جدا باید اعلام شود (`-webkit-text-fill-color`).
 */
.lg-shell .lg-field input:-webkit-autofill,
.lg-shell .lg-field input:-webkit-autofill:hover,
.lg-shell .lg-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lg-ink);
    -webkit-box-shadow: inset 0 0 0 1000px #1b2843;
    box-shadow: inset 0 0 0 1000px #1b2843;
    caret-color: var(--lg-ink);
}

/* ⚠️ دو-کلاسه تا بر بازنویسیِ `admin-system.css` غلبه کند. */
.lg-shell .lg-field input:focus-visible,
.lg-shell .lg-submit:focus-visible {
    outline: 2px solid var(--lg-focus);
    outline-offset: 2px;
    border-color: var(--lg-focus);
}

/* ⭐ بازخوردِ حالتِ **دائمی** — چیزی که کاربر در هر بار استفاده می‌بیند، برخلافِ
   انیمیشنِ یک‌بارهٔ بارگذاری. */
.lg-shell .lg-field input:focus {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(3, 7, 18, 0.45);
}

/*
 * ⚠️⚠️ دکمه **وارونهٔ** کارت است: سفیدِ توپر با متنِ تیره. روی زمینهٔ شیشه‌ای این تنها
 *    شکلی است که هم کنتراستِ بالا می‌دهد و هم «کنشِ اصلی» بودنش بدونِ رنگِ اضافه
 *    خوانده می‌شود (`primary-action` — یک CTA در هر صفحه).
 */
.lg-shell .lg-submit {
    min-block-size: 44px;
    inline-size: 100%;
    margin-block-start: 0.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid #ffffff;
    border-radius: 0.7rem;
    background: #ffffff;
    color: #0b1224;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 160ms ease, transform 120ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .lg-shell .lg-submit:hover {
        background: #e8eefb;
        box-shadow: 0 10px 26px rgba(3, 7, 18, 0.5);
    }
}

/* ⚠️ فشارِ `scale(0.97)` — همان عددِ سبکِ Modern Dark. */
.lg-shell .lg-submit:active { transform: scale(0.97); }

/* ⭐ حالتِ «در حالِ ارسال» از همان کلاسِ موجودِ net-guard می‌آید — حالتِ موازی ساخته نشد. */
.lg-shell .lg-submit.ng-btn-busy { opacity: 0.55; }

.lg-alert {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-radius: 0.65rem;
    font-size: 0.85rem;
    line-height: 1.8;
    background: rgba(127, 29, 29, 0.55);
    border: 1px solid rgba(248, 113, 113, 0.42);
    color: #ffe4e4;
}

.lg-alert--ok {
    background: rgba(6, 78, 59, 0.55);
    border-color: rgba(52, 211, 153, 0.4);
    color: #d6fbeb;
}

/* ⭐ خطا روی خودِ کارت بازخورد می‌دهد، نه در گوشهٔ صفحه. */
.lg-card--error {
    animation: lg-shake 220ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
    border-color: rgba(248, 113, 113, 0.42);
}

@keyframes lg-shake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(4px); }
    50%  { transform: translateX(-2px); }
    75%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

/* ⭐ ردیفِ کپچا: نبودنش هیچ فضای خالی نمی‌گذارد چون اصلاً رندر نمی‌شود. */
.lg-captcha {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0.5rem;
    animation: lg-reveal 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lg-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lg-captcha img {
    block-size: 44px;
    inline-size: auto;
    border: 1px solid var(--lg-line-input);
    border-radius: 0.6rem;
    background: #f8fafc;
}

/*
 * ⚠️⚠️⚠️ `.sr-only` اینجا **تعریف می‌شود** و از پوسته قرض گرفته نمی‌شود: آن کلاس در
 * فایلی است که فقط لایهٔ احرازشده بار می‌کند، پس روی صفحهٔ ورود متنِ «پنهان» **دیده**
 * می‌شد.
 */
.lg-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ⚠️ حرکت حذف می‌شود، ولی **سیگنالِ وضعیت** هرگز: کارتِ خطا حاشیهٔ قرمزش را نگه می‌دارد. */
@media (prefers-reduced-motion: reduce) {
    .lg-shell::before,
    .lg-shell::after,
    .lg-glow,
    .lg-anim,
    .lg-card,
    .lg-card--error,
    .lg-captcha {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* ⚠️ لکه‌ها بی‌حرکت می‌شوند ولی شدتشان همان می‌مانَد، وگرنه `opacity: 1` بالا
       ناخواسته پس‌زمینه را منفجر می‌کند و ناوردایِ کنتراست می‌شکند. */
    .lg-shell::before { opacity: 0.12; }
    .lg-shell::after  { opacity: 0.11; }
    .lg-glow          { opacity: 0.10; }

    .lg-shell .lg-submit:active,
    .lg-shell .lg-field input:focus { transform: none; }
}