:root{
  --bg:#F7F8FA;--surface:#fff;--surface-2:#EFF1F5;--ink:#171A21;--ink-2:#3D4553;--muted:#6B7484;
  --rule:#DEE3EA;--rule-soft:#E9EDF2;--accent:#0E7C86;--accent-ink:#0A5C64;
  --good:#2F6B4F;--good-bg:#E8F3ED;--warn:#A2571B;--warn-bg:#FDF3E8;--bad:#A33A3A;--bad-bg:#FBEDED;
  --code:#F2F4F8;
  --vs:#0973F3;--roo:#E05500;--md:#A9853F;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#12151C;--surface:#181C25;--surface-2:#1F242F;--ink:#E7EAF0;--ink-2:#B4BCCA;--muted:#7F8899;
  --rule:#2A303C;--rule-soft:#232833;--accent:#3FB6C0;--accent-ink:#7FD4DB;
  --good:#7FC3A1;--good-bg:#15251D;--warn:#E0A567;--warn-bg:#241C12;--bad:#E08A8A;--bad-bg:#2A1717;
  --code:#1C212B;--vs:#3E92F7;--roo:#FF7A2E;--md:#C6A25B;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink-2);font:15px/1.6 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
a{color:var(--accent-ink)}
header.top{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
.topin{max-width:1240px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:26px;height:56px}
.brandmark{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.02em;text-decoration:none}
nav.main{display:flex;gap:20px;flex:1;flex-wrap:wrap}
nav.main a{color:var(--ink-2);text-decoration:none;font-size:14px;padding:4px 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
main{max-width:1240px;margin:0 auto;padding:28px 22px 80px}
h1{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:700;font-size:30px;letter-spacing:-.02em;color:var(--ink);margin:0 0 4px}
h2{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:600;font-size:19px;color:var(--ink);margin:30px 0 10px}
.sub{color:var(--muted);font-size:14px;margin:0 0 22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--bc,var(--rule));border-radius:3px;padding:15px 17px}
.card h3{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:700;font-size:17px;color:var(--ink);margin:0 0 2px}
.card .off{font-size:12px;color:var(--warn)}
.kv{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px;margin-top:10px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink)}
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:3px;background:var(--surface);margin:12px 0}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:620px}
th{text-align:left;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
td.mono,.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:2px;border:1px solid var(--rule);color:var(--muted);background:var(--surface-2)}
.tag.vs{border-color:var(--vs);color:var(--vs)}.tag.rooomy{border-color:var(--roo);color:var(--roo)}.tag.mdaai{border-color:var(--md);color:var(--md)}
.tag.ok{border-color:var(--good);color:var(--good);background:var(--good-bg)}
.tag.bad{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}
.tag.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
form.inline{display:inline}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  font:14px/1.5 "IBM Plex Sans",sans-serif;padding:7px 10px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
button,.btn{font:600 14px/1 "IBM Plex Sans",sans-serif;padding:9px 14px;border-radius:3px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
button.ghost,.btn.ghost{background:transparent;color:var(--accent-ink)}
button.danger{background:var(--bad);border-color:var(--bad)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}
.pager{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:13px;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:16px 18px;margin:12px 0}
.note{background:var(--warn-bg);border:1px solid var(--warn);border-left-width:3px;border-radius:3px;padding:12px 15px;margin:14px 0;font-size:14px;color:var(--ink-2)}
.note.ok{background:var(--good-bg);border-color:var(--good)}
pre{background:var(--code);border:1px solid var(--rule);border-radius:3px;padding:14px;overflow-x:auto;font:12.5px/1.55 "IBM Plex Mono",monospace;color:var(--ink)}
iframe.preview{width:100%;height:760px;border:1px solid var(--rule);border-radius:3px;background:#fff}
.empty{color:var(--muted);font-size:14px;padding:22px;text-align:center}
.login{max-width:340px;margin:14vh auto;background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:26px}
.login h1{font-size:22px;margin-bottom:16px}
.login label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
.login input{width:100%}
.login button{width:100%;margin-top:16px}