:root{--bg:#f4f5f7;--surface:#fff;--text:#1c2430;--muted:#5b6675;--primary:#1d4ed8;--border:#d8dde5;--err:#b42318}
[data-theme=dark]{--bg:#0f141b;--surface:#18202a;--text:#eef2f7;--muted:#9aa6b6;--primary:#6ea0ff;--border:#2c3745;--err:#ff8f85}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:start center;padding:24px 16px;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.card{width:100%;max-width:600px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:24px}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
h1{font-size:1.25rem;margin:0}
.controls button{background:none;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 12px;margin-left:6px;cursor:pointer}
form{display:flex;gap:8px}
input{flex:1;min-width:0;padding:12px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font:inherit}
.primary{background:var(--primary);color:#fff;border:0;border-radius:6px;padding:12px 20px;font:inherit;font-weight:600;cursor:pointer}
[data-theme=dark] .primary{color:#0b1220}
.primary:disabled{opacity:.6;cursor:progress}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
#msg{margin:12px 0 0;color:var(--err)}
dl{margin:20px 0 0;border-top:1px solid var(--border);padding-top:12px}
dt{font-size:.85rem;color:var(--muted);margin-top:12px}
dd{margin:2px 0 0;font-size:1.05rem;overflow-wrap:anywhere}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}