:root { color-scheme:dark; --bg:#071019; --panel:#101d29; --line:#213445; --muted:#8da1b3; --text:#edf5fb; --cyan:#57d6d0; --red:#ff7c85; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 85% 0,#123047 0,transparent 34%),var(--bg); color:var(--text); font:14px/1.5 system-ui,sans-serif; }
main { width:min(400px,100%); padding:28px; background:#101d29f2; border:1px solid var(--line); border-radius:14px; }
h1 { margin:0 0 22px; font-size:32px; }
form,label { display:grid; gap:7px; }
form { gap:16px; }
label { color:var(--muted); }
input,button { width:100%; border:1px solid var(--line); border-radius:8px; background:#0a1621; color:var(--text); padding:11px 12px; font:inherit; }
input:focus,button:focus { outline:2px solid var(--cyan); outline-offset:2px; }
button { margin-top:4px; cursor:pointer; color:var(--text); }
button:hover { border-color:var(--cyan); }
.error { color:var(--red); margin:-10px 0 16px; }