:root{
    --bg:#16181c; --panel:#1f2329; --field:#262b33; --ink:#e6e8eb; --ink-soft:#9aa3ad;
    --line:#33383f; --accent:#6ea8dc; --danger:#e07a76; --radius:10px; font-size:15px
  }
  html[data-theme="light"]{
    --bg:#fafbfc; --panel:#fff; --field:#fff; --ink:#2b2f33; --ink-soft:#6b7280;
    --line:#e3e6ea; --accent:#3b6ea5; --danger:#b3433f
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);background:var(--bg);
       min-height:100vh;display:flex;align-items:center;justify-content:center}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
        padding:28px 26px;width:100%;max-width:340px}
  h1{font-size:1.15rem;margin:0 0 4px;letter-spacing:.02em}
  .sub{color:var(--ink-soft);font-size:.8rem;margin-bottom:18px}
  label{display:block;font-size:.75rem;color:var(--ink-soft);margin-bottom:4px}
  input{width:100%;font:inherit;color:inherit;background:var(--field);border:1px solid var(--line);
        border-radius:6px;padding:9px 10px;margin-bottom:14px}
  input:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  button{width:100%;font:inherit;background:var(--accent);color:#16181c;border:1px solid var(--accent);
         border-radius:6px;padding:9px;cursor:pointer;font-weight:600}
  html[data-theme="light"] button{color:#fff}
  button:hover{filter:brightness(1.08)}
  #err{display:none;color:var(--danger);font-size:.85rem;margin:-4px 0 12px}