/* ==============================================
   Auth pages (login + installer): centered card on dark bg.
   ============================================== */

.layout-auth {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at top, rgba(240,180,41,0.06), transparent 40%),
        radial-gradient(ellipse at bottom, rgba(158,113,255,0.04), transparent 40%),
        var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-shell { width: 100%; max-width: 440px; }

.auth-card {
    background: var(--card);
    border: 1px solid var(--line2);
    border-radius: var(--radius);
    padding: 36px 32px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 30px 80px rgba(0,0,0,0.5);
}

.auth-card--wide { max-width: 640px; margin: 0 auto; }

.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-brand .brand-mark { margin: 0 auto 16px; width: 56px; height: 56px; font-size: 28px; }
.brand-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 24px;
    color: var(--t1);
    margin: 0;
}
html[lang="ar"] .brand-title { font-family: var(--font-arabic); }
.brand-sub { color: var(--t2); margin: 6px 0 0; font-size: 13px; }

.auth-form { display: flex; flex-direction: column; gap: 8px; }
.auth-form .input { padding: 12px 14px; font-size: 14px; }

.auth-footer { margin-top: 24px; text-align: center; color: var(--t3); }