
:root{--surface:#0b0f14;--panel:#121820;--rule:#1e293b;--text:#f1f5f9;--muted:#94a3b8;--accent:#22d3ee;
--ok:#10b981;--warn:#f59e0b;--err:#f43f5e;--violet:#8b5cf6;--mono:'JetBrains Mono',ui-monospace,monospace;
--sans:Geist,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--text);font:14px/1.5 var(--sans)}
a{color:var(--accent)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--panel);padding:8px;z-index:9}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
header.top{display:flex;gap:12px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
header.top .brand{font-weight:600;color:var(--accent);font-size:16px}
.chip{font:12px var(--mono);border:1px solid var(--rule);background:var(--panel);padding:2px 8px;border-radius:4px;display:inline-block}
.chip.ok{color:var(--ok);border-color:var(--ok)}.chip.warn{color:var(--warn);border-color:var(--warn)}
.chip.err{color:var(--err);border-color:var(--err)}.chip.off{color:var(--muted)}
.layout{display:flex;min-height:calc(100vh - 50px)}
nav.side{width:240px;border-right:1px solid var(--rule);padding:12px}
nav.side a{display:block;padding:8px 10px;color:var(--text);text-decoration:none;border-left:3px solid transparent}
nav.side a[aria-current=page]{background:var(--panel);border-left-color:var(--accent);color:var(--accent)}
nav.side .group{color:var(--muted);font:11px var(--mono);text-transform:uppercase;margin:12px 10px 4px}
main{flex:1;padding:16px 24px;max-width:1200px}
h1{font-size:22px;margin:0 0 4px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
p.lead{color:var(--muted);margin:0 0 16px}
table{width:100%;border-collapse:collapse;border:1px solid var(--rule);background:var(--panel)}
th{font:11px var(--mono);text-transform:uppercase;color:var(--muted);text-align:left;padding:10px;border-bottom:1px solid var(--rule)}
td{padding:10px;border-bottom:1px solid var(--rule)}
td.id,.mono{font-family:var(--mono)}
.bar{display:flex;gap:8px;align-items:center;border:1px solid var(--rule);background:var(--panel);padding:8px;margin-bottom:12px;flex-wrap:wrap}
input,select,textarea{background:var(--surface);color:var(--text);border:1px solid var(--rule);border-radius:4px;padding:6px 8px;font:13px var(--mono)}
label{display:block;margin:12px 0 4px;color:var(--muted);font:12px var(--mono)}
textarea{width:100%;min-height:80px}
button,a.btn{font:13px var(--mono);border:1px solid var(--accent);background:var(--accent);color:#04202a;border-radius:4px;padding:7px 14px;cursor:pointer;text-decoration:none;display:inline-block}
button.danger{background:transparent;color:var(--err);border-color:var(--err)}
button.quiet,a.btn.quiet{background:transparent;color:var(--accent)}
button:disabled{opacity:.5;cursor:not-allowed}
.banner{border:1px solid var(--rule);padding:10px 14px;margin:0 0 16px;background:var(--panel)}
.banner.err{border-color:var(--err)}.banner.warn{border-color:var(--warn)}.banner.ok{border-color:var(--ok)}
.secret{font:16px var(--mono);border:1px dashed var(--warn);padding:12px;background:var(--panel);word-break:break-all}
dl.kv{display:grid;grid-template-columns:200px 1fr;gap:6px 16px}dl.kv dt{color:var(--muted);font:12px var(--mono)}
dl.kv dd{margin:0;font-family:var(--mono)}
.empty{border:1px dashed var(--rule);padding:24px;text-align:center;color:var(--muted)}
@media (max-width:800px){.layout{flex-direction:column}nav.side{width:auto;border-right:0;border-bottom:1px solid var(--rule)}}
