:root { --bg:#f6f7f9; --card:#fff; --text:#16181d; --muted:#5d6470; --line:#d6dae1;
        --accent:#2563eb; --ok:#15803d; --bad:#b91c1c; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1115; --card:#181b21; --text:#e8eaee; --muted:#9aa3b1; --line:#2c313a;
          --accent:#5b8def; --ok:#4ade80; --bad:#f87171; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { max-width:460px; margin:6vh auto; padding:24px; background:var(--card);
       border:1px solid var(--line); border-radius:14px; }
h1 { font-size:22px; margin:0 0 8px; }
label { display:block; margin:16px 0 6px; font-weight:600; }
label.row { display:flex; gap:8px; align-items:center; font-weight:400; margin-top:8px; }
select, input[type=password], input[type=text] { width:100%; padding:12px; font-size:16px;
       color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:10px; }
button { width:100%; margin-top:18px; padding:13px; font-size:16px; font-weight:600;
         color:#fff; background:var(--accent); border:0; border-radius:10px; }
button:disabled { opacity:.6; }
.muted { color:var(--muted); } .small { font-size:13px; }
.ok { color:var(--ok); } .bad { color:var(--bad); }
#result { padding-left:18px; }