:root { --bg:#0f1115; --card:#1a1d24; --text:#e8eaf0; --muted:#8a90a0; --accent:#6c8cff; --error:#ff7a7a; --ok:#6fd49a; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:16px; font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); }
form { width:100%; max-width:360px; display:flex; flex-direction:column; gap:12px; background:var(--card); border:1px solid #262a33; border-radius:14px; padding:28px; }
h1 { margin:0 0 4px; font-size:22px; }
label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted); }
input { padding:10px 12px; border-radius:8px; border:1px solid #333845; background:var(--bg); color:var(--text); font-size:15px; }
button { margin-top:4px; padding:11px; border:0; border-radius:8px; background:var(--accent); color:#fff; font-weight:600; font-size:15px; cursor:pointer; }
p { margin:0; font-size:14px; color:var(--muted); }
a { color:var(--accent); }
#error { color:var(--error); }
#error:empty, #notice:empty { display:none; }
#notice { color:var(--ok); }
[hidden] { display:none !important; }