/* Vehero v5.0 – auth screens (login, register, password reset).
   Standalone pages (no base.html), so tokens are declared here too. */
:root {
    --a-bg: #070a11; --a-surface: #0f1624; --a-line: rgba(255, 255, 255, .09);
    --a-text: #eef2f8; --a-muted: #8f9bb0; --a-accent: #38bdf8;
    --a-cta: linear-gradient(180deg, #0369a1, #075985);
}
html body {
    background:
        radial-gradient(900px 480px at 50% -120px, rgba(56, 189, 248, .16), transparent 70%),
        radial-gradient(600px 400px at 100% 100%, rgba(99, 102, 241, .08), transparent 70%),
        var(--a-bg);
    color: var(--a-text);
}
html body .auth-container {
    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: 24px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
html body .promo-section {
    background:
        radial-gradient(120% 90% at 0 0, rgba(14, 165, 233, .32), transparent 60%),
        linear-gradient(180deg, #0e1c31, #0a1220);
    border-right: 1px solid var(--a-line);
}
html body .promo-section::before { display: none; }
html body .promo-title { font-size: clamp(32px, 4vw, 46px); font-weight: 800; letter-spacing: -.035em; text-shadow: none; animation: none; }
html body .promo-subtitle { color: #c3d0e4; opacity: 1; animation: none; }
html body .promo-features, html body .promo-feature { animation: none; }
html body .promo-feature { color: #dbe5f3; }
html body .promo-feature:hover { transform: none; background: rgba(255, 255, 255, .05); }
html body .promo-feature-icon { background: rgba(217, 183, 110, .14); border: 1px solid rgba(217, 183, 110, .35); color: #e6c987; }
html body .form-section { background: transparent; }
html body .form-title { color: var(--a-text); letter-spacing: -.02em; }
html body .form-subtitle, html body .form-footer { color: var(--a-muted); }
html body .form-field label { color: #b4c0d4; font-size: 13px; letter-spacing: .02em; }
html body .form-field input,
html body .form-field select {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    color: var(--a-text);
}
html body .form-field input::placeholder { color: #5e6b82; }
html body .form-field input:focus,
html body .form-field select:focus {
    border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(56, 189, 248, .22); transform: none;
}
html body .btn-primary {
    background: var(--a-cta); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 12px 24px -12px rgba(2, 132, 199, .9);
    color: #fff; font-weight: 700;
}
html body .btn-primary:hover { background: linear-gradient(180deg, #0476b8, #036096); transform: none; }
html body .btn-social { background: rgba(255, 255, 255, .04); border: 1px solid var(--a-line); color: var(--a-text); border-radius: 12px; }
html body .btn-social:hover { background: rgba(255, 255, 255, .09); transform: none; }
html body .social-divider { color: var(--a-muted); }
html body .form-footer a, html body .form-field a { color: var(--a-accent); }
html body .home-link, html body .theme-toggle {
    background: rgba(255, 255, 255, .05); border: 1px solid var(--a-line); color: var(--a-text);
    border-radius: 12px; box-shadow: none; backdrop-filter: blur(10px);
}
html body .error-message { color: #fca5a5; }
@media (max-width: 900px) {
    html body .auth-container { grid-template-columns: 1fr; }
    html body .promo-section { padding: 32px 24px; border-right: 0; border-bottom: 1px solid var(--a-line); }
}
@media (max-width: 480px) { html body { padding: 12px; } html body .form-section { padding: 28px 20px; } }
html body .theme-toggle { display: none !important; }
html body .promo-section::after { display: none; }