:root {
    --auth-bg: #f4f8fc;
    --auth-surface: #ffffff;
    --auth-surface-muted: #f2f9fc;
    --auth-border: #b1d2e7;
    --auth-text: #0f172a;
    --auth-text-soft: #334155;
    --auth-text-muted: #64748b;
    --auth-primary: #0b3c5f;
    --auth-primary-hover: #021d37;
    --auth-accent: #0284c7;
    --auth-accent-hover: #0470ab;
    --auth-info-bg: #ebf5fb;
    --auth-info-border: #b8ddef;
    --auth-info-text: #0b3c5f;
    --auth-shadow: 0 24px 48px -24px rgba(11, 60, 95, 0.28);
    --auth-shadow-soft: 0 10px 24px -18px rgba(11, 60, 95, 0.24);
    --auth-focus-ring: rgba(2, 132, 199, 0.18);
    --auth-brand-start: #0f5b86;
    --auth-brand-mid: #0b3c5f;
    --auth-brand-end: #021d37;
    --auth-brand-orb: rgba(14, 165, 233, 0.22);
    --auth-font-heading: "Alexandria", 'Segoe UI', Tahoma, Arial, sans-serif;
    --auth-font-body: "Tajawal", 'Segoe UI', Tahoma, Arial, sans-serif;
}

body.auth-security-body {
    font-family: var(--auth-font-body);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

.auth-title,
.auth-brand-title,
.auth-subtitle,
.auth-btn,
.auth-link-btn,
.auth-title, .auth-brand-title, .auth-lockout-title,
.auth-btn, .auth-link-btn, .auth-lockout-btn,
.auth-label, .auth-kicker, .auth-lockout-kicker,
.auth-subtitle, .auth-tab {
    font-family: var(--auth-font-heading);
}

.auth-brand-panel {
    background:
        radial-gradient(circle at 80% 10%, rgba(14, 165, 233, 0.22), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(14, 165, 233, 0.18), transparent 40%),
        linear-gradient(160deg, #0f5b86 0%, #0b3c5f 50%, #021d37 100%);
}

body.auth-page-login {
    background:
        radial-gradient(ellipse at 16% 42%, rgba(2, 132, 199, 0.18) 0%, transparent 56%),
        radial-gradient(ellipse at 84% 16%, rgba(14, 165, 233, 0.16) 0%, transparent 42%),
        linear-gradient(135deg, #0b1120 0%, #111827 46%, #0f172a 100%);
}

body.auth-page-lockout-temp {
    background:
        radial-gradient(circle at 82% 16%, rgba(14, 165, 233, 0.16), transparent 28%),
        radial-gradient(circle at 18% 84%, rgba(2, 132, 199, 0.14), transparent 30%),
        linear-gradient(135deg, #0b1120 0%, #111827 46%, #0f172a 100%);
}

body.auth-page-lockout-perm {
    background:
        radial-gradient(circle at 82% 16%, rgba(248, 113, 113, 0.18), transparent 28%),
        radial-gradient(circle at 18% 84%, rgba(239, 68, 68, 0.14), transparent 30%),
        linear-gradient(135deg, #22090a 0%, #111827 40%, #2a0b14 100%);
}

body.auth-page-lockout-perm .auth-brand-panel {
    background:
        radial-gradient(circle at 80% 10%, rgba(248, 113, 113, 0.20), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(190, 24, 93, 0.18), transparent 40%),
        linear-gradient(160deg, #3f0d17 0%, #2a0f1a 52%, #14070b 100%);
}

.auth-login-card input:focus,
.auth-login-card select:focus,
.auth-card input:focus,
.auth-card select:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
}

.auth-btn--accent, .auth-link-btn--accent {
    background: linear-gradient(135deg, #0284c7 0%, #0470ab 100%);
    border-color: #0284c7;
    box-shadow: 0 4px 24px -4px rgba(2, 132, 199, 0.35);
}
.auth-btn--accent:hover:not(:disabled), .auth-link-btn--accent:hover {
    background: linear-gradient(135deg, #0470ab 0%, #035f91 100%);
    box-shadow: 0 6px 28px -4px rgba(2, 132, 199, 0.35);
}

html.dark, html[data-theme="dark"] {
    --auth-bg: #07111f;
    --auth-surface: #0f172a;
    --auth-surface-muted: #0d2b46;
    --auth-border: #1e5d85;
    --auth-text: #e5eef8;
    --auth-text-soft: #c8d6e5;
    --auth-text-muted: #93a8bf;
    --auth-info-bg: #0c2f4d;
    --auth-info-border: #0a4066;
    --auth-info-text: #cfe5fb;
    --auth-shadow: 0 28px 60px -28px rgba(2, 6, 23, 0.78);
    --auth-shadow-soft: 0 18px 40px -22px rgba(2, 6, 23, 0.62);
}

html.dark body.auth-security-body,
html[data-theme="dark"] body.auth-security-body {
    background: radial-gradient(ellipse at 16% 42%, rgba(2, 132, 199, 0.18) 0%, transparent 56%),
        radial-gradient(ellipse at 84% 16%, rgba(14, 165, 233, 0.14) 0%, transparent 42%),
        linear-gradient(135deg, #050a16 0%, #0b1321 46%, #07101c 100%) !important;
    color: var(--auth-text);
}

html.dark .auth-login-card,
html.dark .auth-card,
html.dark .auth-panel,
html[data-theme="dark"] .auth-login-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-panel {
    background: var(--auth-surface);
    color: var(--auth-text);
    border-color: var(--auth-border);
    box-shadow: var(--auth-shadow);
}

html.dark .auth-login-card input,
html.dark .auth-login-card select,
html.dark .auth-login-card textarea,
html.dark .auth-card input,
html.dark .auth-card select,
html.dark .auth-card textarea,
html[data-theme="dark"] .auth-login-card input,
html[data-theme="dark"] .auth-login-card select,
html[data-theme="dark"] .auth-login-card textarea,
html[data-theme="dark"] .auth-card input,
html[data-theme="dark"] .auth-card select,
html[data-theme="dark"] .auth-card textarea {
    background: rgba(15, 23, 42, 0.72);
    color: var(--auth-text);
    border-color: var(--auth-border);
}

html.dark .auth-login-card input::placeholder,
html[data-theme="dark"] .auth-login-card input::placeholder {
    color: var(--auth-text-muted);
}

html.dark .auth-title,
html.dark .auth-subtitle,
html.dark .auth-label,
html.dark .auth-kicker,
html.dark .auth-tab,
html[data-theme="dark"] .auth-title,
html[data-theme="dark"] .auth-subtitle,
html[data-theme="dark"] .auth-label,
html[data-theme="dark"] .auth-kicker,
html[data-theme="dark"] .auth-tab {
    color: var(--auth-text);
}

html.dark .auth-link-btn,
html[data-theme="dark"] .auth-link-btn {
    color: var(--auth-text-soft);
}

html.dark hr,
html[data-theme="dark"] hr {
    border-color: var(--auth-border);
}