:root { --bg:#faf7f2; --card:#fff; --text:#2b2520; --muted:#8a8079; --accent:#b5835a; --error:#c0392b; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1c1917; --card:#27231f; --text:#f2ede7; --muted:#a39a92; --accent:#d4a276; }
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "PingFang TC", "Microsoft JhengHei", sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; }
.bar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; }
.bar a { color:var(--muted); text-decoration:none; }
.card { background:var(--card); max-width:480px; margin:24px auto; padding:28px 24px;
  border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.login { margin-top:18vh; text-align:center; }
h1 { margin:0 0 8px; font-size:1.5rem; }
.muted { color:var(--muted); }
form { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
input { font-size:1.1rem; padding:12px 14px; border:1px solid var(--muted); border-radius:10px;
  background:transparent; color:var(--text); }
button { font-size:1.1rem; padding:12px; border:0; border-radius:10px; background:var(--accent);
  color:#fff; cursor:pointer; }
.error { color:var(--error); margin-top:14px; }