:root{--bg:#f4f4f4;--panel:#ffffff;--line:#e0e0e0;--text:#161616;--muted:#6f6f6f;--accent:#0f62fe;--accent-2:#0043ce;--ok:#198038;--warn:#b28600;--bad:#da1e28;--info:#0072c3;--side:#161616;--side-text:#c6c6c6;--side-on:#393939;--font:12.5px}
html[data-theme="dark"]{--bg:#161616;--panel:#262626;--line:#393939;--text:#f4f4f4;--muted:#a8a8a8;--side:#000;--side-text:#c6c6c6;--side-on:#262626}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--bg:#161616;--panel:#262626;--line:#393939;--text:#f4f4f4;--muted:#a8a8a8;--side:#000;--side-text:#c6c6c6;--side-on:#262626}}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:var(--font)/1.5 "IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.shell{display:flex;min-height:100vh}
.side{width:224px;flex:none;background:var(--side);color:var(--side-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:18px 16px 12px;font-weight:600;color:#fff;font-size:14px;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.brand small{margin-left:auto;font-weight:400;color:#8d8d8d;font-size:10px}
.brand .dot{width:10px;height:10px;background:var(--accent);display:inline-block}
.side nav{display:flex;flex-direction:column;overflow:auto}
.side nav a{color:var(--side-text);padding:9px 16px;border-left:3px solid transparent;font-size:12.5px}
.side nav a:hover{background:var(--side-on);text-decoration:none;color:#fff}
.side nav a.on{background:var(--side-on);border-left-color:var(--accent);color:#fff}
.side-foot{margin-top:auto;padding:12px 16px;border-top:1px solid #393939;display:flex;gap:10px;align-items:center;font-size:11px;color:#8d8d8d}
.side-foot a{color:#c6c6c6}.side-foot button{margin-left:auto;background:none;border:1px solid #525252;color:#c6c6c6;cursor:pointer;padding:2px 6px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.top h1{margin:0;font-size:16px;font-weight:600}
.gsearch{margin-left:auto}.gsearch input{width:320px;max-width:40vw}
.content{padding:20px 24px;max-width:1500px}
.flash{padding:10px 14px;border-left:3px solid var(--info);background:var(--panel);margin-bottom:14px}
.flash.ok{border-color:var(--ok)}.flash.err{border-color:var(--bad)}
.card{background:var(--panel);border:1px solid var(--line);padding:16px 18px;margin-bottom:16px}
.card h2{margin:0 0 12px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--line);padding:14px 16px}
.stat b{display:block;font-size:22px;font-weight:600}.stat span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.tbl-wrap{overflow:auto;background:var(--panel);border:1px solid var(--line);margin-bottom:16px}
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{text-align:left;padding:9px 12px;background:var(--bg);border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}.tbl td.empty{color:var(--muted);text-align:center;padding:24px}
.tbl td.wrap{white-space:normal}
.badge{display:inline-block;padding:1px 7px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;border:1px solid}
.badge.ok{color:var(--ok);border-color:var(--ok)}.badge.bad{color:var(--bad);border-color:var(--bad)}.badge.warn{color:var(--warn);border-color:var(--warn)}
.badge.info{color:var(--info);border-color:var(--info)}.badge.muted{color:var(--muted);border-color:var(--muted)}
form.f{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;align-items:end}
form.f .wide{grid-column:1/-1}form.f .actions{grid-column:1/-1;display:flex;gap:8px;align-items:center}
.fld{display:flex;flex-direction:column;gap:4px;font-size:12px}.fld span{color:var(--muted);font-size:11px}
.fld small{color:var(--muted);font-size:10.5px}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg);border:0;border-bottom:1px solid var(--muted);padding:7px 10px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}
textarea{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12px}
.btn{font:inherit;background:var(--accent);color:#fff;border:0;padding:8px 16px;cursor:pointer;display:inline-block;font-weight:500}
.btn:hover{background:var(--accent-2)}.btn.sm{padding:4px 10px;font-size:11.5px}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}.btn.danger{background:var(--bad)}.btn.ghost.danger{background:none;color:var(--bad);border-color:var(--bad)}
.btn.muted{background:var(--muted)}
.inline{display:inline-block;margin-right:4px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:12px}.filters .fld{min-width:140px}
.pager{display:flex;gap:4px;align-items:center;margin:8px 0 16px}.pager a{padding:3px 8px;border:1px solid var(--line)}.pager a.on{background:var(--accent);color:#fff;border-color:var(--accent)}.pager span{margin-left:auto;color:var(--muted)}
code,pre{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11.5px}
pre{background:var(--bg);border:1px solid var(--line);padding:12px;overflow:auto;margin:8px 0}
.kv{display:grid;grid-template-columns:180px 1fr;gap:6px 12px;font-size:12px}.kv dt{color:var(--muted)}.kv dd{margin:0;word-break:break-all}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:1000px){.cols{grid-template-columns:1fr}}
.login{max-width:360px;margin:12vh auto;background:var(--panel);border:1px solid var(--line);padding:28px}
.login h1{font-size:18px;margin:0 0 4px}.login p{color:var(--muted);margin:0 0 18px}
.login .fld{margin-bottom:14px}
.muted{color:var(--muted)}.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.copy{cursor:pointer;border:1px solid var(--line);padding:1px 6px;font-size:10px;margin-left:6px;background:none;color:var(--muted)}
.bar{height:6px;background:var(--line);width:120px;display:inline-block;vertical-align:middle}.bar i{display:block;height:100%;background:var(--accent)}
.bar i.warn{background:var(--warn)}.bar i.bad{background:var(--bad)}
@media(max-width:800px){.shell{flex-direction:column}.side{width:100%;height:auto;position:static}.side nav{flex-direction:row;flex-wrap:wrap}.gsearch input{width:160px}.content{padding:12px}}

/* ---- v1.1 UI: grouped nav, form sections, toggles, help boxes, tabs ---- */
.navgrp{padding:14px 16px 4px;font-size:9.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#6f6f6f}
.navgrp:first-child{padding-top:6px}
.side nav a{display:flex;align-items:center}
.fsec{grid-column:1/-1;border-top:1px solid var(--line);margin:8px 0 -2px;padding-top:14px;display:flex;flex-direction:column;gap:2px}
.fsec:first-child{border-top:0;margin-top:0;padding-top:0}
.fsec b{font-size:12px;font-weight:600}
.fsec span{color:var(--muted);font-size:11px}
.fld.tgl{flex-direction:row;align-items:flex-start;gap:9px;background:var(--bg);padding:9px 11px;border:1px solid var(--line)}
.fld.tgl input{width:16px;height:16px;flex:none;margin-top:1px;accent-color:var(--accent)}
.fld.tgl span{display:flex;flex-direction:column;gap:2px;color:var(--text)}
.fld.tgl b{font-size:12px;font-weight:600}
.fld.tgl small{color:var(--muted);font-size:10.5px;line-height:1.45}
.help{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);padding:12px 16px;margin-bottom:16px}
.help b{display:block;font-size:12.5px;margin-bottom:4px}
.help p{margin:0;color:var(--muted);font-size:12px}
.help ul{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:12px}
.help li{margin:2px 0}
.help code{background:var(--bg);padding:1px 5px;border:1px solid var(--line)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs a{padding:8px 16px;color:var(--muted);border-bottom:2px solid transparent;font-weight:500;font-size:12.5px}
.tabs a:hover{color:var(--text);text-decoration:none;background:var(--panel)}
.tabs a.on{color:var(--text);border-bottom-color:var(--accent);background:var(--panel)}
.tabs a .n{margin-left:7px;color:var(--muted);font-weight:400}
.kind-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:16px}
.kind-card label{background:var(--panel);border:1px solid var(--line);padding:12px 14px;cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.kind-card label.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.kind-card input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--accent)}
.kind-card b{display:block;font-size:12.5px}
.kind-card small{color:var(--muted);font-size:11px;line-height:1.45;display:block;margin-top:2px}
.ccgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:12px;max-height:280px;overflow:auto;padding:10px;background:var(--bg);border:1px solid var(--line)}
.ccgrid .cc{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);padding:7px 9px;cursor:pointer;font-size:12px}
.ccgrid .cc input{width:15px;height:15px;flex:none;accent-color:var(--accent)}
.ccgrid .cc b{font-weight:600}
.ccgrid .cc small{color:var(--muted);font-size:10px;margin-left:auto;text-align:right;line-height:1.3}
.kindbox{border:1px solid var(--line);background:var(--bg);padding:14px 16px}
.kindbox .f{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;align-items:end}
.kindbox .fsec{grid-column:1/-1;border-top:0;margin-top:0;padding-top:0}