:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 0%, #e8f3ff 0, transparent 42%), linear-gradient(150deg, #f7f9fc 0%, #edf3fa 100%); color: #111d32; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
.login-card { width: min(100%, 420px); padding: 34px 30px 28px; border: 1px solid rgba(139,159,187,.22); border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: 0 24px 65px rgba(26,50,82,.13); backdrop-filter: blur(18px); }
.brand-mark { width: 76px; height: 76px; display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center; gap: 6px; padding: 13px 10px; border-radius: 23px; background: linear-gradient(145deg, #0b1221, #183452); color: white; box-shadow: 0 12px 28px rgba(11,18,33,.22); }
.brand-mark span { text-align: center; font-weight: 850; font-size: 15px; }
.brand-mark i { width: 2px; height: 28px; background: linear-gradient(#61c4ff, #4be0ae); border-radius: 3px; }
.eyebrow { margin: 25px 0 5px; color: #607089; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(32px, 9vw, 42px); line-height: 1.05; letter-spacing: -.04em; }
.intro { margin: 14px 0 25px; color: #657187; font-size: 14px; line-height: 1.55; }
form { display: grid; gap: 10px; }
label { color: #354258; font-size: 12px; font-weight: 780; }
input { width: 100%; padding: 15px 16px; border: 1px solid #d6deea; border-radius: 14px; background: #fbfcfe; color: #121d30; font: inherit; font-size: 16px; }
input:focus { outline: 3px solid rgba(48,132,255,.16); border-color: #3084ff; }
button { margin-top: 5px; padding: 15px 18px; border: 0; border-radius: 15px; background: linear-gradient(135deg, #1479ed, #245ad5); color: white; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(36,90,213,.22); }
button:active { transform: translateY(1px); }
.login-error { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #f3b6c0; border-radius: 13px; background: #fff1f3; color: #9d2440; font-size: 12px; line-height: 1.45; }
.privacy-note { margin: 24px 0 0; color: #78859a; font-size: 10px; text-align: center; }
.privacy-note span { color: #20b681; margin-right: 4px; }
@media (max-width: 420px) { .login-card { padding: 28px 22px 24px; border-radius: 23px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } button:active { transform: none; } }