/**
 * auth.css — BAB-Access Authentication UI
 * Animated background · SVG logo · Math CAPTCHA · Dark/Light
 */

/* ── Custom properties ── */
:root {
    --glass-bg:       rgba(255,255,255,0.08);
    --glass-border:   rgba(255,255,255,0.16);
    --glass-shadow:   0 24px 64px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35),
                      inset 0 1px 0 rgba(255,255,255,0.10);
    --glass-blur:     blur(24px);

    --text-primary:   rgba(255,255,255,0.93);
    --text-muted:     rgba(255,255,255,0.50);

    --input-bg:       rgba(0,0,0,0.22);
    --input-border:   rgba(255,255,255,0.14);
    --input-focus:    rgba(99,179,237,0.65);
    --input-text:     rgba(255,255,255,0.92);
    --input-ph:       rgba(255,255,255,0.28);

    --btn-bg:         linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);
    --btn-hover:      linear-gradient(135deg,#60a5fa 0%,#818cf8 100%);

    --error-color:    #f87171;
    --error-bg:       rgba(239,68,68,0.12);
    --error-border:   rgba(248,113,113,0.38);

    --captcha-bg:     rgba(99,179,237,0.06);
    --captcha-border: rgba(99,179,237,0.22);

    --radius-card:    28px;
    --radius-input:   13px;
    --radius-btn:     13px;
}

html:not(.dark) {
    --glass-bg:       rgba(255,255,255,0.72);
    --glass-border:   rgba(148,163,184,0.22);
    --glass-shadow:   0 24px 64px rgba(31,38,135,0.14), 0 4px 16px rgba(0,0,0,0.06),
                      inset 0 1px 0 rgba(255,255,255,0.85);
    --text-primary:   #0f172a;
    --text-muted:     rgba(15,23,42,0.50);
    --input-bg:       rgba(255,255,255,0.88);
    --input-border:   rgba(148,163,184,0.35);
    --input-focus:    rgba(59,130,246,0.50);
    --input-text:     #0f172a;
    --input-ph:       rgba(15,23,42,0.30);
    --captcha-bg:     rgba(59,130,246,0.05);
    --captcha-border: rgba(59,130,246,0.18);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════
   ANIMATED BACKGROUND
═══════════════════════════════════════════════════════ */
.auth-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #07111f 0%, #0f172a 35%, #130f2a 70%, #07111f 100%);
}

html:not(.dark) .auth-bg {
    background: linear-gradient(145deg, #dbeafe 0%, #ede9fe 40%, #e0f2fe 70%, #f0fdf4 100%);
}

/* Floating orbs */
.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.orb-1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle at 40% 40%, rgba(59,130,246,0.55), rgba(59,130,246,0) 70%);
    top: -180px; left: -160px;
    animation: drift1 22s ease-in-out infinite;
    filter: blur(64px);
    opacity: .55;
}
.orb-2 {
    width: 420px; height: 420px;
    background: radial-gradient(circle at 60% 40%, rgba(139,92,246,0.60), rgba(139,92,246,0) 70%);
    bottom: -140px; right: -120px;
    animation: drift2 28s ease-in-out infinite;
    filter: blur(72px);
    opacity: .50;
}
.orb-3 {
    width: 280px; height: 280px;
    background: radial-gradient(circle at 50% 50%, rgba(20,184,166,0.55), rgba(20,184,166,0) 70%);
    top: 50%; right: 8%;
    animation: drift3 18s ease-in-out infinite;
    filter: blur(56px);
    opacity: .40;
}
.orb-4 {
    width: 200px; height: 200px;
    background: radial-gradient(circle at 50% 50%, rgba(244,114,182,0.50), rgba(244,114,182,0) 70%);
    bottom: 20%; left: 6%;
    animation: drift4 24s ease-in-out infinite;
    filter: blur(48px);
    opacity: .35;
}
.orb-5 {
    width: 350px; height: 350px;
    background: radial-gradient(circle at 50% 50%, rgba(99,102,241,0.45), rgba(99,102,241,0) 70%);
    top: 30%; left: 30%;
    animation: drift5 32s ease-in-out infinite;
    filter: blur(80px);
    opacity: .30;
}

html:not(.dark) .orb-1 { opacity:.25; }
html:not(.dark) .orb-2 { opacity:.22; }
html:not(.dark) .orb-3 { opacity:.18; }
html:not(.dark) .orb-4 { opacity:.15; }
html:not(.dark) .orb-5 { opacity:.12; }

@keyframes drift1 {
    0%,100% { transform: translate(0,0) scale(1); }
    25%      { transform: translate(80px,-60px) scale(1.08); }
    50%      { transform: translate(40px,100px) scale(0.94); }
    75%      { transform: translate(-60px,40px) scale(1.05); }
}
@keyframes drift2 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(-90px,70px) scale(1.12); }
    66%      { transform: translate(60px,-80px) scale(0.92); }
}
@keyframes drift3 {
    0%,100% { transform: translate(0,0) scale(1); }
    40%      { transform: translate(50px,80px) scale(1.15); }
    80%      { transform: translate(-70px,-40px) scale(0.90); }
}
@keyframes drift4 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(100px,-60px) scale(1.20); }
}
@keyframes drift5 {
    0%,100% { transform: translate(0,0) scale(1); }
    30%      { transform: translate(-80px,60px) scale(1.08); }
    60%      { transform: translate(70px,-80px) scale(0.96); }
}

/* ═══════════════════════════════════════════════════════
   GLASS CARD
═══════════════════════════════════════════════════════ */
.auth-card {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    box-shadow: var(--glass-shadow);
    padding: 2.75rem 2.25rem;
    width: 100%;
    max-width: 430px;
    position: relative;
    z-index: 10;
    animation: cardUp 0.5s cubic-bezier(0.16,1,0.3,1) both;
    transition: background 300ms ease, border-color 300ms ease;
}

.auth-card.error { animation: shake 0.5s ease-in-out; }

/* ═══════════════════════════════════════════════════════
   LOGO — SVG BADGE
═══════════════════════════════════════════════════════ */
.auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    margin-bottom: 1rem;
    position: relative;
}

/* Animated glow ring */
.auth-logo-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(59,130,246,0.6), rgba(139,92,246,0.6));
    filter: blur(12px);
    opacity: 0.7;
    animation: glowPulse 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes glowPulse {
    0%,100% { opacity:.5; transform:scale(1); }
    50%      { opacity:.9; transform:scale(1.08); }
}

.auth-logo h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg,#93c5fd,#a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: .2rem;
}

html:not(.dark) .auth-logo h1 {
    background: linear-gradient(135deg,#1d4ed8,#7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
}

.auth-logo p {
    font-size: 0.82rem;
    color: var(--text-muted);
    letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════
   FORM
═══════════════════════════════════════════════════════ */
.form-group { margin-bottom: 1.25rem; }

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.form-input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-input);
    color: var(--input-text);
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color 200ms, box-shadow 200ms, background 200ms;
    -webkit-appearance: none;
    appearance: none;
}

.form-input::placeholder { color: var(--input-ph); }

.form-input:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(99,179,237,0.18);
}

.form-input.error {
    border-color: var(--error-color);
    box-shadow: 0 0 0 3px rgba(248,113,113,0.14);
}

/* Password wrapper */
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper .form-input { padding-right: 2.75rem; }

.input-toggle {
    position: absolute; right: 0.75rem;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: .25rem;
    display: flex; align-items: center; justify-content: center;
    transition: color 180ms; line-height: 1;
}
.input-toggle:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════
   CAPTCHA
═══════════════════════════════════════════════════════ */
.captcha-block {
    background: var(--captcha-bg);
    border: 1px solid var(--captcha-border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.captcha-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(139,92,246,0.25));
    border: 1px solid rgba(99,179,237,0.25);
    display: flex; align-items: center; justify-content: center;
}

.captcha-body { flex: 1; }

.captcha-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: .35rem;
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.captcha-question {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .04em;
    white-space: nowrap;
}

.captcha-input {
    width: 72px;
    padding: .45rem .65rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 9px;
    color: var(--input-text);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    outline: none;
    transition: border-color 180ms, box-shadow 180ms;
    -webkit-appearance: none;
    appearance: none;
}

.captcha-input:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px rgba(99,179,237,0.16);
}

.captcha-input.error {
    border-color: var(--error-color);
}

/* ═══════════════════════════════════════════════════════
   BUTTON
═══════════════════════════════════════════════════════ */
.btn-primary {
    width: 100%; padding: .9rem 1.5rem;
    background: var(--btn-bg); border: none;
    border-radius: var(--radius-btn);
    color: #fff; font-size: .9375rem; font-weight: 600;
    font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    transition: background 200ms, transform 100ms, box-shadow 200ms;
    letter-spacing: .015em;
    box-shadow: 0 4px 20px rgba(59,130,246,0.40);
}

.btn-primary:hover:not([disabled]):not([data-loading]) {
    background: var(--btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(99,102,241,0.50);
}

.btn-primary:active { transform: translateY(0); }
.btn-primary[data-loading] { opacity: .75; cursor: not-allowed; }

.btn-spinner {
    display: none; width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.30); border-top-color: #fff;
    border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0;
}
button[data-loading] .btn-spinner { display: inline-block; }
button[data-loading] .btn-text    { display: none; }

/* ═══════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════ */
.alert {
    padding: .75rem 1rem; border-radius: 11px;
    font-size: .875rem; margin-bottom: 1.25rem;
    display: flex; align-items: flex-start; gap: .5rem;
}

.alert-error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-color);
}

.alert-icon { flex-shrink: 0; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════
   PASSWORD HINT
═══════════════════════════════════════════════════════ */
.password-hint {
    font-size: .76rem;
    color: var(--text-muted);
    margin-top: .35rem;
}

/* ═══════════════════════════════════════════════════════
   THEME TOGGLE
═══════════════════════════════════════════════════════ */
.theme-toggle {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; transition: transform 200ms; z-index: 100;
    color: var(--text-primary);
}
.theme-toggle:hover { transform: scale(1.12); }

.icon-moon { display: inline-block; }
.icon-sun  { display: none; }
html:not(.dark) .icon-moon { display: none; }
html:not(.dark) .icon-sun  { display: inline-block; }

/* ═══════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════ */
@keyframes cardUp {
    from { opacity:0; transform: translateY(28px) scale(.97); }
    to   { opacity:1; transform: translateY(0)    scale(1); }
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    12%,36%,60%,84% { transform: translateX(-7px); }
    24%,48%,72%,96% { transform: translateX( 7px); }
}

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

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .auth-card { padding: 2rem 1.25rem; border-radius: 22px; }
    .auth-bg   { padding: 1rem; }
}