:root { --bg:#F4F1EA; --ink:#1d1a14; --muted:#5e584a; --rule:#cfc8b6; --accent:#A74D17; --field:#fffdf8; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#16140F; --ink:#ece7da; --muted:#a49d8b; --rule:#3a362b; --accent:#E2803F; --field:#1e1b14; }
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--ink); font-family: system-ui, sans-serif; }
.login { width:100%; max-width:22rem; margin:0 16px; padding:1.5rem 0; }
h1 { font-size:1.4rem; margin:0 0 .25rem; letter-spacing:.02em; }
.sub { margin:0 0 1.5rem; color:var(--muted); }
label { display:block; font-size:.85rem; margin:.9rem 0 .25rem; color:var(--muted); }
input { width:100%; padding:.6rem .7rem; font-size:1rem; color:var(--ink);
  background:var(--field); border:1px solid var(--rule); border-radius:2px; }
input:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button { margin-top:1.25rem; width:100%; padding:.65rem; font-size:1rem; cursor:pointer;
  color:var(--bg); background:var(--accent); border:1px solid var(--accent); border-radius:2px; }
button:disabled { opacity:.6; cursor:default; }
.error { margin:.9rem 0 0; color:var(--accent); font-size:.9rem; }