:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center;
  font-family: system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#0f1219; color:#e5e7eb; }
.card { width:340px; padding:28px; background:#161b25; border:1px solid #232a37;
  border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.4); }
.brand { color:#f97316; font-size:22px; font-weight:700; margin:0 0 2px; text-align:center; }
.sub { color:#9ca3af; font-size:13px; text-align:center; margin:0 0 20px; }
label { display:block; font-size:12px; color:#9ca3af; margin:12px 0 4px; }
input { width:100%; padding:10px 12px; background:#0f1219; border:1px solid #2a3340;
  border-radius:8px; color:#e5e7eb; font-size:14px; }
input:focus { outline:none; border-color:#f97316; }
button { width:100%; margin-top:18px; padding:11px; border:0; border-radius:8px;
  font-size:14px; font-weight:600; cursor:pointer; }
.primary { background:#f97316; color:#1a1205; }
.primary:hover { background:#fb8a3c; }
.google { background:#fff; color:#1f2937; margin-top:10px; }
.google:hover { background:#f3f4f6; }
.toggle { margin-top:16px; text-align:center; font-size:13px; color:#9ca3af; }
.toggle a { color:#f97316; cursor:pointer; text-decoration:none; }
.msg { margin-top:14px; font-size:13px; text-align:center; min-height:18px; }
.msg.err { color:#f87171; }
/* Not green. A confirmation is information, not a reward, and the owner's rule
   is that success green reads as poor UI wherever it appears. Errors keep their
   colour because an error has to interrupt; a confirmation does not. */
.msg.ok { color:#e5e7eb; }
.hidden { display:none; }