:root { --bg:#f5f6f8; --card:#fff; --tx:#1c2430; --mut:#5d6b7c; --ac:#0b5cab; --err:#b3261e; --bd:#d8dee6; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12161c; --card:#1b212a; --tx:#e8edf3; --mut:#9aa7b6; --ac:#5aa9f0; --err:#ff8a80; --bd:#2f3946; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--tx); font:16px/1.5 system-ui,sans-serif; }
main { max-width:420px; margin:0 auto; padding:32px 16px; }
h1 { font-size:1.4rem; margin:0 0 16px; }
section { background:var(--card); border:1px solid var(--bd); border-radius:12px; padding:20px; }
label { display:block; font-size:.9rem; color:var(--mut); margin:12px 0 4px; }
input { width:100%; padding:12px; font-size:1.1rem; border:1px solid var(--bd); border-radius:8px; background:var(--bg); color:var(--tx); }
button { margin-top:16px; padding:12px 16px; font-size:1rem; border:0; border-radius:8px; background:var(--ac); color:#fff; cursor:pointer; width:100%; }
button.sec { background:transparent; color:var(--ac); border:1px solid var(--bd); }
ul { list-style:none; padding:0; margin:12px 0; }
li a { display:block; padding:12px; border:1px solid var(--bd); border-radius:8px; margin-bottom:8px; color:var(--tx); text-decoration:none; }
li a:hover { border-color:var(--ac); }
#error { color:var(--err); margin-top:16px; }
label.check { display:flex; gap:10px; align-items:flex-start; margin-top:16px; color:var(--tx); font-size:.9rem; }
label.check input { width:auto; margin-top:4px; }