:root { --bg:#f5f7fb; --fg:#1b2533; --card:#fff; --line:#d8dee9; --brand:#1e4078; --danger:#a12b2b; --muted:#5b6778; }
@media (prefers-color-scheme: dark) { :root { --bg:#12161d; --fg:#e6ebf2; --card:#1b2129; --line:#2c3440; --brand:#6d9be0; --danger:#e07070; --muted:#9aa6b6; } }
* { box-sizing: border-box; }
body { margin:0; padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--fg); }
header, section { max-width: 760px; margin: 12px auto; }
section { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
h1 { font-size:1.3rem; margin:8px 0 2px; } h2 { font-size:1.05rem; margin:0 0 8px; }
.note, .state { color:var(--muted); font-size:.9rem; }
label { display:block; margin:10px 0 4px; font-weight:600; font-size:.9rem; }
textarea, select { width:100%; font: 13px/1.35 ui-monospace, Menlo, Consolas, monospace; padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
.buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
button { font: inherit; padding:9px 14px; border-radius:8px; border:1px solid var(--brand); background:var(--brand); color:#fff; }
button.secondary { background:transparent; color:var(--brand); }
button.danger { background:transparent; color:var(--danger); border-color:var(--danger); }
dl { display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; margin:0; font-size:.9rem; }
dt { color:var(--muted); } dd { margin:0; word-break:break-all; }
.scroll { overflow-x:auto; margin-top:8px; }
table { border-collapse:collapse; width:100%; font-size:.85rem; }
th, td { border-bottom:1px solid var(--line); padding:4px 6px; text-align:left; white-space:nowrap; }
.ok { color:#2e7d32; } .ko { color:var(--danger); }