:root { --bg:#f5f7fb; --card:#fff; --text:#18243b; --muted:#5e6b64; --line:#d5e0d3; --accent:#2563eb; --on-accent:#fff; --err:#a3361a; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f172a; --card:#18243b; --text:#e9f3e8; --muted:#a3b5a6; --line:#25402b; --accent:#60a5fa; --on-accent:#08150a; --err:#ff9b84; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--bg); color:var(--text); font:16px/1.5 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.login { width:min(400px,100%); background:var(--card); border:1px solid var(--line); border-radius:16px; padding:36px 32px 32px; box-shadow:0 20px 50px -30px rgba(16,46,10,.35); }
.logo { display:block; height:23px; width:auto; margin-bottom:28px; }
.logo-dark { display:none; }
@media (prefers-color-scheme: dark) { .logo-light { display:none; } .logo-dark { display:block; } }
h1 { font-size:24px; line-height:1.2; margin:0 0 6px; letter-spacing:-.02em; }
.lead { color:var(--muted); margin:0 0 24px; font-size:15px; }
label { display:grid; gap:6px; font-size:13px; font-weight:600; margin-bottom:16px; }
input { font:inherit; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--text); }
input:focus-visible, button:focus-visible { outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:2px; border-color:var(--accent); }
button { width:100%; font:inherit; font-weight:600; padding:12px; border:0; border-radius:10px; background:var(--accent); color:var(--on-accent); cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
#error { color:var(--err); font-size:14px; margin:0 0 14px; }