:root { color-scheme: light; --bg:#f3f5f9; --card:#fff; --text:#172339; --muted:#546176; --line:#c4ccd8; --field:#fff; --accent:#2859cf; --focus:#9ebcff; --error:#9d2634; --error-bg:#fff0f1; }
:root:has(#dark-theme:checked) { color-scheme:dark; --bg:#101722; --card:#1a2535; --text:#edf2fc; --muted:#b6c1d5; --line:#526077; --field:#111d2b; --accent:#477ded; --focus:#7fa8ff; --error:#ffb5be; --error-bg:#442730; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; display:grid; place-items:center; padding:24px 16px; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.login-card { width:min(100%,440px); padding:32px; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:0 14px 44px #101b3020; }
.theme-switch { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-bottom:24px; color:var(--muted); font-size:14px; cursor:pointer; }
.theme-switch input { width:18px; height:18px; accent-color:var(--accent); }
.eyebrow { color:var(--muted); margin:0 0 8px; font-size:14px; }
h1 { margin:0; font-size:29px; line-height:1.2; letter-spacing:-.5px; }
.intro { margin:14px 0 24px; color:var(--muted); }
form { display:grid; gap:8px; }
form label { font-weight:600; }
form input { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--field); color:var(--text); font:inherit; margin-bottom:12px; }
button { min-height:48px; margin-top:6px; border:0; border-radius:9px; background:var(--accent); color:#fff; font:inherit; font-weight:650; cursor:pointer; }
button:hover { filter:brightness(1.08); }
input:focus-visible,button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.error { padding:12px; color:var(--error); background:var(--error-bg); border-radius:9px; }
.footnote { color:var(--muted); font-size:13px; margin:24px 0 0; }
@media (max-width:380px) { .login-card { padding:24px 20px; } h1 { font-size:26px; } }