/*
 * صفحات احراز هویت (ورود، ثبت‌نام، بازیابی رمز، ورود دومرحله‌ای)
 * ======================================================================
 * چیدمان تمام‌صفحه و دوستونه: فرم سمت چپ، پنل زیرساخت سمت راست.
 * زیر ۱۰۲۴ پیکسل پنل زیرساخت حذف می‌شه و فقط فرم می‌مونه؛ برای همین
 * توی DOM فرم اول اومده (هم موبایل، هم ترتیب Tab).
 *
 * تصویر زیرساخت SVG درون‌خطیه (includes/auth-showcase.tpl) و انیمیشن‌هاش
 * همین‌جا تعریف شدن تا داخل تمپلیت آکولاد نداشته باشیم.
 */

/* ---------- شکستن از ظرف پیش‌فرض WHMCS برای تمام‌صفحه شدن ---------- */

.app-shell.is-auth-page .app-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/*
 * سلکتور عمداً #main-body داره.
 * theme.min.css خود WHMCS این رو داره:
 *     #main-body { margin:0; padding:20px 0; min-height:calc(...); background:... }
 * اولویت آیدی (1,0,0) از هر زنجیره کلاسی بیشتره، پس با
 * .app-shell.is-auth-page .app-content (0,3,0) اصلاً غلبه نمی‌شد و همون
 * ۲۰ پیکسل بالا/پایین باقی می‌موند. با افزودن #main-body اولویت می‌شه
 * (1,3,0) و بدون هیچ important برنده می‌شه.
 */
.app-shell.is-auth-page #main-body.app-content {
    padding: 0;
    margin: 0;
    min-height: 0;
    flex: 1;
    align-items: stretch;
    background-color: var(--app-bg);
}

/*
 * زنجیره ظرف‌های WHMCS رو صاف می‌کنیم تا صحنه تمام‌عرض بشه.
 * عمداً با * به‌جای .container-fluid: کلاس اون div شرطیه
 * ({if !$skipMainBodyContainer}) و ممکنه اصلاً خالی باشه.
 */
.app-shell.is-auth-page #main-body.app-content > *,
.app-shell.is-auth-page #main-body.app-content > * > .row,
.app-shell.is-auth-page #main-body.app-content > * > .row > .primary-content {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: none;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-shell.is-auth-page .app-footer { display: none; }

/* ---------- صحنه ---------- */

.auth-stage {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    background-color: var(--app-bg);
}

@media (min-width: 1024px) {
    .auth-stage { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); }
    .auth-stage.auth-stage-wide { grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); }
}

/* ---------- ستون فرم ---------- */

.auth-form-side {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.25rem;
    min-width: 0;
    background-color: var(--app-bg);
}

@media (min-width: 640px) { .auth-form-side { padding: 2.25rem 2rem; } }
@media (min-width: 1024px) { .auth-form-side { padding: 2.5rem 2.75rem; } }

.auth-form-inner {
    width: 100%;
    max-width: 25rem;
    margin: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0;
}

.auth-stage-wide .auth-form-inner { max-width: 38rem; }

/* ---------- سربرگ فرم ---------- */

.auth-head { margin-bottom: 1.5rem; }

.auth-head-mark {
    width: 3rem;
    height: 3rem;
    border-radius: var(--app-radius-md);
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    overflow: hidden;
    margin-bottom: 1.1rem;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .3);
}

.auth-head-mark img { width: 100%; height: 100%; object-fit: cover; }

.auth-head h1 {
    font-size: 1.28rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .4rem;
    line-height: 1.6;
}

.auth-head p {
    font-size: .8rem;
    color: var(--app-text-muted);
    margin: 0;
    line-height: 1.9;
}

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

.auth-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
    padding: .25rem;
    background-color: var(--app-panel-bg);
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    margin-bottom: 1.5rem;
}

.auth-switch a,
.auth-switch span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .5rem;
    border-radius: .6rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--app-text-muted);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}

.auth-switch a:hover { color: var(--app-text); text-decoration: none; }

.auth-switch .is-current {
    background-color: var(--app-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .3);
}

.auth-switch .app-icon { flex-shrink: 0; }

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

.auth-field { margin-bottom: 1.05rem; }

.auth-field-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .45rem;
}

.auth-field > label,
.auth-field-top label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--app-text);
    margin-bottom: .45rem;
}

.auth-field-top label { margin-bottom: 0; }

.auth-link-sm {
    font-size: .72rem;
    color: var(--app-accent-hover);
    text-decoration: none;
    transition: color .15s ease;
}

.auth-link-sm:hover { color: #93c5fd; text-decoration: none; }

.auth-control { position: relative; }

.auth-control .app-input,
.auth-field .app-input {
    padding: .75rem .9rem !important;
    font-size: .85rem !important;
    border-radius: .7rem !important;
    background-color: var(--app-panel-bg) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-control .app-input { padding-right: 2.6rem !important; }

.auth-control .app-input::placeholder,
.auth-field .app-input::placeholder { color: #64748b; }

.auth-control .app-input:focus,
.auth-field .app-input:focus {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.auth-control > .auth-control-icon {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
    transition: color .15s ease;
}

.auth-control:focus-within > .auth-control-icon { color: var(--app-accent-hover); }

.auth-control .btn-reveal-pw {
    position: absolute;
    left: .55rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #64748b;
    padding: .3rem;
    line-height: 0;
    cursor: pointer;
    border-radius: .4rem;
    transition: color .15s ease, background-color .15s ease;
}

.auth-control .btn-reveal-pw:hover {
    color: var(--app-text);
    background-color: rgba(148, 163, 184, .1);
}

.auth-control .btn-reveal-pw.is-visible { color: var(--app-accent-hover); }

.auth-control.has-reveal .app-input { padding-left: 2.6rem !important; }

.auth-hint {
    display: block;
    font-size: .68rem;
    color: #64748b;
    margin-top: .35rem;
    line-height: 1.7;
}

/*
 * فیلدهایی که خود WHMCS رندر می‌کنه (Custom Fields، فیلدهای افزوده
 * حساب) با کلاس form-control میان نه app-input، و بعضی‌هاشون select یا
 * textarea ان. اینجا همون ظاهر فیلدهای خودمون رو می‌گیرن تا هر فیلدی
 * که ادمین بعداً توی WHMCS تعریف کنه، خودکار هماهنگ باشه و لازم نباشه
 * قالب دست بخوره.
 */
.auth-field .form-control,
.auth-field select.app-input,
.auth-field textarea,
.auth-field input[type="text"]:not(.app-input),
.auth-field input[type="email"]:not(.app-input),
.auth-field input[type="tel"]:not(.app-input),
.auth-field input[type="number"]:not(.app-input),
.auth-field input[type="password"]:not(.app-input) {
    width: 100%;
    background-color: var(--app-panel-bg) !important;
    border: 1px solid var(--app-border-lifted) !important;
    border-radius: .7rem !important;
    color: var(--app-text) !important;
    font-family: 'Vazirmatn', sans-serif !important;
    font-size: .85rem !important;
    padding: .75rem .9rem !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-field .form-control:focus,
.auth-field select.app-input:focus,
.auth-field textarea:focus,
.auth-field input:not(.app-input):focus {
    outline: none;
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.auth-field textarea { min-height: 5.5rem; resize: vertical; }

/* تیک و رادیوی فیلدهای سفارشی */
.auth-field input[type="checkbox"],
.auth-field input[type="radio"] {
    accent-color: var(--app-accent);
    width: auto;
    margin-left: .4rem;
}

.auth-field .form-check,
.auth-field label.checkbox-inline,
.auth-field label.radio-inline {
    font-size: .78rem;
    color: var(--app-text-muted);
    font-weight: 500;
}

/* ---------- گرید فرم‌های چندفیلدی (ثبت‌نام) ---------- */

.auth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem;
}

@media (min-width: 560px) { .auth-grid { grid-template-columns: 1fr 1fr; } }

.auth-grid-full { grid-column: 1 / -1; }

.auth-section { margin-bottom: 1.5rem; }

.auth-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .9rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--app-border);
}

.auth-section-title .app-icon { color: var(--app-accent-hover); flex-shrink: 0; }

/* ---------- مرا به خاطر بسپار / تیک‌ها ---------- */

.auth-remember {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .78rem;
    color: var(--app-text-muted);
    cursor: pointer;
    margin-bottom: 1.3rem;
    user-select: none;
    line-height: 1.8;
}

.auth-remember input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--app-accent);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: .2rem;
}

.auth-remember a { color: var(--app-accent-hover); text-decoration: none; }
.auth-remember a:hover { color: #93c5fd; }

/* ---------- دکمه‌ها ---------- */

.auth-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1rem;
    border: none;
    border-radius: .7rem;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.auth-submit:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .36);
}

.auth-submit:active:not(:disabled) { transform: translateY(0); }
.auth-submit:disabled { opacity: .65; cursor: not-allowed; box-shadow: none; }

.auth-submit .auth-spinner { display: none; }
.auth-submit.is-busy .auth-submit-label { display: none; }
.auth-submit.is-busy .auth-spinner { display: inline-flex; }

.auth-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-spin .7s linear infinite;
}

@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-alt-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border: 1px solid var(--app-border-lifted);
    border-radius: .7rem;
    background-color: var(--app-panel-bg);
    color: var(--app-text);
    font-family: inherit;
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.auth-alt-btn:hover {
    border-color: var(--app-accent);
    color: #fff;
    background-color: rgba(37, 99, 235, .08);
    text-decoration: none;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.3rem 0;
    color: #64748b;
    font-size: .72rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--app-border-lifted);
}

.auth-captcha {
    display: flex;
    justify-content: center;
    margin-bottom: 1.1rem;
}

/* ---------- نوار اطمینان پایین فرم ---------- */

.auth-assure {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.4rem;
    padding: .7rem .9rem;
    border-radius: .7rem;
    background-color: rgba(16, 185, 129, .07);
    border: 1px solid rgba(16, 185, 129, .22);
    color: #94a3b8;
    font-size: .72rem;
    line-height: 1.8;
}

.auth-assure .app-icon { color: #34d399; flex-shrink: 0; }

.auth-foot {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .72rem;
    color: #64748b;
}

.auth-foot a { color: var(--app-accent-hover); text-decoration: none; }
.auth-foot a:hover { color: #93c5fd; }

/* ---------- پنل زیرساخت ---------- */

.auth-showcase { display: none; }

@media (min-width: 1024px) {
    .auth-showcase {
        position: relative;
        display: block;
        overflow: hidden;
        background-color: #070b14;
        border-right: 1px solid var(--app-border);
    }
}

/* هاله‌های رنگی پس‌زمینه */
.auth-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 70% 10%, rgba(37, 99, 235, .3), transparent 55%),
        radial-gradient(ellipse at 20% 90%, rgba(14, 165, 233, .18), transparent 55%);
    pointer-events: none;
    z-index: 1;
}

/* شبکه ظریف */
.auth-showcase::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 80%);
    pointer-events: none;
    z-index: 1;
}

/* ---------- تصویر SVG زیرساخت ---------- */

.auth-art {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    /* بالای تصویر محو می‌شه تا متن روش خوانا بمونه */
    mask-image: linear-gradient(to bottom, transparent 8%, #000 42%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 42%);
}

.auth-art svg {
    width: 100%;
    height: 78%;
    opacity: .85;
}

/* LEDهای رک - هرکدوم با تأخیر متفاوت */
.auth-led {
    animation: auth-blink 2.4s ease-in-out infinite;
    transform-origin: center;
}
.auth-led-2 { animation-duration: 3.1s; animation-delay: .4s; }
.auth-led-3 { animation-duration: 2.7s; animation-delay: .9s; }
.auth-led-4 { animation-duration: 3.6s; animation-delay: 1.4s; }
.auth-led-5 { animation-duration: 2.2s; animation-delay: 1.9s; }

@keyframes auth-blink {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

/* جریان داده روی خطوط شبکه */
.auth-flow {
    stroke-dasharray: 6 120;
    stroke-linecap: round;
    animation: auth-dash 3.4s linear infinite;
}
.auth-flow-2 { animation-duration: 4.2s; animation-delay: 1.1s; }
.auth-flow-3 { animation-duration: 2.9s; animation-delay: .6s; }

@keyframes auth-dash {
    from { stroke-dashoffset: 126; }
    to   { stroke-dashoffset: 0; }
}

/* تپش گره‌های شبکه */
.auth-node-core {
    animation: auth-pulse 2.8s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
.auth-node-b { animation-delay: .5s; }
.auth-node-c { animation-delay: 1s; }
.auth-node-d { animation-delay: 1.5s; }

@keyframes auth-pulse {
    0%, 100% { opacity: .5; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.35); }
}

.auth-beam {
    animation: auth-beam 4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center bottom;
}

@keyframes auth-beam {
    0%, 100% { opacity: .15; }
    50%      { opacity: .5; }
}

/* ---------- محتوای روی پنل زیرساخت ---------- */

.auth-showcase-inner {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 2.75rem;
}

@media (min-width: 1440px) {
    .auth-showcase-inner { padding: 3rem 4rem; }
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .95rem;
    border-radius: 999px;
    background-color: rgba(15, 23, 42, .75);
    border: 1px solid rgba(56, 189, 248, .3);
    backdrop-filter: blur(8px);
    color: #bae6fd;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.auth-badge-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .65);
    animation: auth-dot 2.2s ease-out infinite;
    flex-shrink: 0;
}

@keyframes auth-dot {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); }
    70%  { box-shadow: 0 0 0 .5rem rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.auth-showcase-copy { padding: 1.5rem 0; max-width: 34rem; }

.auth-showcase-copy h2 {
    font-size: 1.85rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.95;
    margin: 0 0 1rem;
}

@media (min-width: 1440px) {
    .auth-showcase-copy h2 { font-size: 2.2rem; }
}

.auth-showcase-copy h2 strong {
    display: block;
    font-weight: 900;
    background: linear-gradient(90deg, #38bdf8, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-showcase-copy p {
    font-size: .85rem;
    color: #94a3b8;
    line-height: 2.1;
    margin: 0;
}

/* ---------- کارت‌های ویژگی ---------- */

.auth-showcase-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    align-items: end;
}

.auth-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem;
    border-radius: .85rem;
    background-color: rgba(15, 23, 42, .72);
    border: 1px solid rgba(51, 65, 85, .85);
    backdrop-filter: blur(10px);
    transition: transform .2s ease, border-color .2s ease;
}

.auth-card:hover {
    transform: translateY(-3px);
    border-color: rgba(59, 130, 246, .55);
}

/* کارت وسط کمی بالاتر می‌شینه - مثل نمونه مرجع */
.auth-card-lift {
    transform: translateY(-1.1rem);
    border-color: rgba(59, 130, 246, .45);
    background-color: rgba(23, 37, 63, .82);
}

.auth-card-lift:hover { transform: translateY(-1.5rem); }

.auth-card-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .6rem;
    background-color: rgba(37, 99, 235, .18);
    border: 1px solid rgba(59, 130, 246, .3);
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-card-text { min-width: 0; }

.auth-card-text strong {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: .1rem;
}

.auth-card-text > span {
    display: block;
    font-size: .67rem;
    color: #94a3b8;
    line-height: 1.7;
}

/* ---------- پیام‌های وضعیت داخل فرم ---------- */

.auth-note {
    padding: .8rem 1rem;
    border-radius: .7rem;
    font-size: .76rem;
    line-height: 1.9;
    margin-bottom: 1.1rem;
}

.auth-note-error {
    background-color: rgba(244, 63, 94, .1);
    border: 1px solid rgba(244, 63, 94, .3);
    color: #fb7185;
}

.auth-note-success {
    background-color: rgba(16, 185, 129, .1);
    border: 1px solid rgba(16, 185, 129, .3);
    color: #34d399;
}

.auth-note-warning {
    background-color: rgba(245, 158, 11, .1);
    border: 1px solid rgba(245, 158, 11, .3);
    color: #fbbf24;
}

.auth-note a { color: inherit; text-decoration: underline; }

/* ---------- احترام به کاهش انیمیشن ---------- */

@media (prefers-reduced-motion: reduce) {
    .auth-led,
    .auth-flow,
    .auth-node-core,
    .auth-beam,
    .auth-badge-dot { animation: none; }

    .auth-led { opacity: .85; }
    .auth-flow { stroke-dasharray: none; stroke-opacity: .35; }

    .auth-submit,
    .auth-alt-btn,
    .auth-card,
    .auth-control .app-input,
    .auth-switch a,
    .auth-switch span { transition: none; }

    .auth-submit:hover:not(:disabled),
    .auth-card:hover { transform: none; }
    .auth-card-lift:hover { transform: translateY(-1.1rem); }
    .auth-spinner { animation-duration: 2s; }
}


/* ======================================================================
 * سازگاری با صفحات ماژول‌ها (مثلاً ورود با شماره موبایل)
 * ======================================================================
 * بعضی ماژول‌ها صفحه خودشون رو با کلاس‌های نسل قبلِ قالب می‌سازن
 * (app-auth-wrap / app-auth-card / app-auth-submit / btn-app-outline).
 * سورس اون ماژول‌ها دست ما نیست، ولی چون خروجی‌شون داخل همین قالب
 * رندر می‌شه، با بازتعریف همون کلاس‌ها ظاهرشون رو با بقیه صفحات
 * احراز هویت یکدست می‌کنیم - بدون اینکه به فایل ماژول دست بزنیم.
 *
 * این بلوک بعد از dashboard.css لود می‌شه، پس با اولویت برابر برنده‌ست.
 * ---------------------------------------------------------------------- */

.app-shell.is-auth-page .app-auth-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    overflow: hidden;
    background-color: var(--app-bg);
}

/* همون فضای زیرساخت صفحه ورود: هاله‌های رنگی + شبکه ظریف */
.app-shell.is-auth-page .app-auth-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 72% 12%, rgba(37, 99, 235, .22), transparent 55%),
        radial-gradient(ellipse at 22% 88%, rgba(14, 165, 233, .14), transparent 55%);
    pointer-events: none;
}

.app-shell.is-auth-page .app-auth-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 15%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 15%, transparent 72%);
    pointer-events: none;
}

.app-shell.is-auth-page .app-auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 25rem;
    background-color: rgba(19, 23, 34, .9);
    backdrop-filter: blur(12px);
    border: 1px solid var(--app-border-lifted);
    border-radius: 1.1rem;
    padding: 2.25rem 2rem;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.app-shell.is-auth-page .app-auth-brand-centered {
    text-align: center;
    margin-bottom: 1.6rem;
}

.app-shell.is-auth-page .app-auth-brand-centered .app-auth-brand-mark {
    width: 3rem;
    height: 3rem;
    border-radius: var(--app-radius-md);
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .95rem;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .3);
}

.app-shell.is-auth-page .app-auth-brand-centered h1 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .4rem;
    line-height: 1.7;
}

.app-shell.is-auth-page .app-auth-brand-centered p {
    font-size: .78rem;
    color: var(--app-text-muted);
    margin: 0;
    line-height: 1.9;
}

/* فیلدها همون ظاهر صفحه ورود رو بگیرن */
.app-shell.is-auth-page .app-auth-card .app-field > label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--app-text);
    margin-bottom: .45rem;
}

.app-shell.is-auth-page .app-auth-card .app-input {
    padding: .75rem .9rem !important;
    font-size: .85rem !important;
    border-radius: .7rem !important;
    background-color: var(--app-panel-bg) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.app-shell.is-auth-page .app-auth-card .app-input:focus {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

/* دکمه اصلی و دکمه ثانویه */
.app-shell.is-auth-page .app-auth-card .btn-app-primary.app-auth-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1rem !important;
    border: none;
    border-radius: .7rem;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    font-family: inherit;
    font-size: .88rem !important;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.app-shell.is-auth-page .app-auth-card .btn-app-primary.app-auth-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .36);
}

.app-shell.is-auth-page .app-auth-card .btn-app-outline.app-auth-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1rem !important;
    border: 1px solid var(--app-border-lifted);
    border-radius: .7rem;
    background-color: var(--app-panel-bg);
    color: var(--app-text);
    font-size: .83rem !important;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.app-shell.is-auth-page .app-auth-card .btn-app-outline.app-auth-submit:hover {
    border-color: var(--app-accent);
    color: #fff;
    background-color: rgba(37, 99, 235, .08);
    text-decoration: none;
}

.app-shell.is-auth-page .app-auth-card .app-auth-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.3rem 0;
    color: #64748b;
    font-size: .72rem;
}

.app-shell.is-auth-page .app-auth-card .app-auth-divider::before,
.app-shell.is-auth-page .app-auth-card .app-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--app-border-lifted);
}

@media (prefers-reduced-motion: reduce) {
    .app-shell.is-auth-page .app-auth-card .btn-app-primary.app-auth-submit,
    .app-shell.is-auth-page .app-auth-card .btn-app-outline.app-auth-submit,
    .app-shell.is-auth-page .app-auth-card .app-input { transition: none; }
    .app-shell.is-auth-page .app-auth-card .btn-app-primary.app-auth-submit:hover { transform: none; }
}