:root { --bg:#f4f3ef; --card:#fff; --ink:#1b1b1a; --muted:#6b6a65; --line:#e3e1db; --accent:#1c5cab; --bad:#d03b3b; }
@media (prefers-color-scheme: dark) { :root { --bg:#121211; --card:#1c1c1b; --ink:#f2f1ec; --muted:#a8a69d; --line:#2f2e2b; --accent:#5598e7; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding:16px; }
.box { width:100%; max-width:360px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; }
.brand { font-weight:700; font-size:20px; } .logo { color:var(--accent); }
.sub { color:var(--muted); margin:4px 0 22px; }
label { display:block; font-size:13px; color:var(--muted); margin-bottom:14px; }
input { display:block; width:100%; margin-top:5px; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:transparent; color:var(--ink); font:inherit; }
input:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { width:100%; padding:11px; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
#err { color:var(--bad); min-height:1.4em; margin:12px 0 0; font-size:14px; }