:root { --bg:#f4f6fb; --card:#fff; --text:#14213d; --muted:#5b6478; --accent:#2f5aa8; --accent-text:#fff; --border:#d5dbe8; --danger:#b42318; --ok:#067647; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1729; --card:#17213a; --text:#f1f4fb; --muted:#b4bdd0; --accent:#6d9bf0; --accent-text:#0b1220; --border:#2d3a5c; --danger:#ff8a80; --ok:#7ee2a8; }
}
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); font-size:16px; line-height:1.4; }
main { max-width:720px; margin:0 auto; padding:20px 16px 48px; }
h1 { font-size:1.6rem; margin:8px 0 16px; }
h2 { font-size:1.2rem; margin:24px 0 8px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px; }
label { display:block; font-weight:600; margin:12px 0 4px; }
input, select, textarea { width:100%; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; }
textarea { min-height:90px; resize:vertical; }
button { font:inherit; font-weight:600; background:var(--accent); color:var(--accent-text); border:0; border-radius:8px; padding:12px 16px; margin-top:14px; cursor:pointer; min-height:44px; }
button.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
button.small { padding:8px 12px; min-height:36px; margin-top:0; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.msg { margin-top:12px; font-weight:600; }
.msg.err { color:var(--danger); }
.msg.ok { color:var(--ok); }
.code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.5rem; letter-spacing:2px; background:var(--bg); border:1px dashed var(--accent); border-radius:8px; padding:12px; text-align:center; margin:8px 0; color:var(--text); }
.muted { color:var(--muted); font-size:.92rem; }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th, td { text-align:left; border-bottom:1px solid var(--border); padding:8px 6px; vertical-align:top; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tabs button { flex:1; margin-top:0; background:transparent; color:var(--accent); border:1px solid var(--accent); }
.tabs button.active { background:var(--accent); color:var(--accent-text); }
.hidden { display:none; }
header.top { display:flex; justify-content:space-between; align-items:center; gap:8px; }