/* ============================================
   SECTIONS — Neon Aurora Fusion
   ============================================ */

/* ── Login page ─────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    position: relative;
}

.login-box { width: 100%; max-width: 400px; padding: var(--space-4); position: relative; z-index: 1; }
.login-box .login-logo { text-align: center; margin-bottom: var(--space-8); }
.login-box .login-logo .logo-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--cyan), var(--purple));
    border-radius: var(--radius-lg);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-4);
    box-shadow: 0 0 30px rgba(0,229,255,0.25);
}
.login-box .login-logo .logo-icon svg { width: 28px; height: 28px; }
.login-box .login-logo h1 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: var(--space-1); }
.login-box .login-logo p { color: var(--text-muted); font-size: 0.85rem; }

.login-form {
    background: var(--surface);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}
.login-form .input-group { margin-bottom: var(--space-5); }
.login-form .btn { margin-top: var(--space-4); }

.login-error {
    background: var(--magenta-dim);
    border: 1px solid rgba(255,45,123,0.15);
    color: var(--magenta);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    margin-bottom: var(--space-4);
    display: none;
}
.login-error.visible { display: block; }

/* TOTP setup */
.totp-setup { text-align: center; }
.totp-setup .qr-container {
    background: #fff; border-radius: var(--radius-lg);
    padding: var(--space-4); display: inline-block;
    margin: var(--space-4) 0;
}
.totp-setup .qr-container svg { width: 200px; height: 200px; }

.backup-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: var(--space-4) 0; }
.backup-codes .code {
    font-family: var(--font-mono); font-size: 0.85rem;
    padding: var(--space-2) var(--space-3);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary); text-align: center;
}

/* ── Security audit score ───────────────────── */
.audit-score {
    font-family: var(--font-mono);
    font-size: 3rem; font-weight: 700;
    background: linear-gradient(135deg, var(--magenta), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}