:root { --bg:#F5F6F8; --surface:#FFFFFF; --ink:#151A22; --ink-2:#465061; --line:#767F90; --primary:#1D4ED8; --on:#FFFFFF; --err:#B42318; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#0E1117; --surface:#161A22; --ink:#ECEFF4; --ink-2:#B6BECB; --line:#808A9B; --primary:#8DB2FF; --on:#0E1117; --err:#FF968C; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:16px; background:var(--bg); color:var(--ink); font-family:"Segoe UI",system-ui,Arial,sans-serif; font-size:17px; line-height:1.5; }
main { width:100%; max-width:420px; background:var(--surface); border-radius:16px; padding:28px 24px; box-shadow:0 14px 36px rgba(16,24,40,.14); }
.logo { display:block; border-radius:12px; margin-bottom:12px; }
h1 { font-size:24px; margin:0 0 4px; }
p { margin:0 0 16px; color:var(--ink-2); }
label { display:block; font-weight:600; margin:16px 0 6px; }
input { width:100%; min-height:48px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; }
input:focus-visible, button:focus-visible, a:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
small { display:block; color:var(--ink-2); margin-top:4px; font-size:14px; }
.show { display:flex; align-items:center; gap:10px; font-weight:400; margin:12px 0 0; min-height:44px; cursor:pointer; }
.show input { width:22px; min-height:22px; height:22px; margin:0; accent-color:var(--primary); }
button { margin-top:20px; width:100%; min-height:48px; border:0; border-radius:10px; background:var(--primary); color:var(--on); font:inherit; font-weight:700; cursor:pointer; }
.err { margin:16px 0 0; padding:10px 12px; border-radius:10px; border:1px solid var(--err); color:var(--err); }
.foot { margin:20px 0 0; font-size:14px; text-align:center; }
a { color:var(--primary); text-underline-offset:3px; }