:root{--bg:#f6f7f9;--pan:#fff;--fg:#161a20;--dim:#697384;--line:#e3e6eb;--acc:#2f5fbe;--bad:#c62828;--ok:#17803d}
:root[data-mode="dark"]{--bg:#0d1117;--pan:#161b22;--fg:#cdd6e3;--dim:#7d8797;--line:#262d38;--acc:#6f9fe8;--bad:#e5645c;--ok:#63b485}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.box{max-width:380px;margin:12vh auto 0;padding:28px 24px;background:var(--pan);border:1px solid var(--line);border-radius:14px}
.wide{max-width:640px;margin:56px auto 40px}
h1{font-size:20px;margin:0 0 4px;letter-spacing:-.01em}
p.sub{color:var(--dim);margin:0 0 20px;font-size:14px}
label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:14px 0 6px}
input{width:100%;font:inherit;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--fg);outline:none}
input:focus{border-color:var(--acc)}
button{font:inherit;cursor:pointer;border-radius:9px;padding:10px 16px;border:1px solid var(--acc);background:var(--acc);color:#fff;margin-top:18px}
button.ghost{background:transparent;color:var(--fg);border-color:var(--line);margin-top:0;padding:6px 12px;font-size:13px}
button:disabled{opacity:.5;cursor:default}
.full{width:100%}
.err{color:var(--bad);font-size:14px;margin-top:12px;min-height:1em}
.ok{color:var(--ok);font-size:14px;margin-top:12px}
table{width:100%;border-collapse:collapse;margin:8px 0 6px}
td{padding:10px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
td.r{text-align:right}
.muted{color:var(--dim);font-size:13px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.row{grid-template-columns:1fr}.box{margin-top:6vh}}