:root { --bg:#f6f8f8; --surface:#fff; --line:#d3dddf; --fg:#12262b; --muted:#546a70; --accent:#0d5c6b; --bad:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#0d1719; --surface:#132225; --line:#24393d; --fg:#e3eeef; --muted:#93a9ad; --accent:#5fc2d4; --bad:#f2867d; color-scheme: dark; } }
* { box-sizing: border-box }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui, sans-serif; padding:16px }
form { width:100%; max-width:340px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:24px; display:grid; gap:14px }
h1 { margin:0; font-size:20px } p { margin:0; color:var(--muted) }
label { display:grid; gap:4px; font-weight:600; font-size:14px }
input { font:inherit; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg) }
input:focus-visible, button:focus-visible { outline:3px solid var(--accent); outline-offset:2px }
button { font:inherit; font-weight:700; padding:10px; border:0; border-radius:8px; background:var(--accent); color:var(--surface); cursor:pointer }
.msg { color:var(--bad); font-weight:600 }