:root{
  --bg:#FAF9F6; --surface:#FFFFFF; --surface2:#F2F1EC;
  --text:#20201E; --muted:#6E6D68;
  --border:#E7E5DE; --border2:#D6D4CB;
  --info:#1F6FB8; --info-bg:#E7F0FA; --info-border:#BBD6EE;
  --success:#27693E; --success-bg:#E7F2EA;
  --warning:#7A4A0B; --warning-bg:#FAEEDA; --warning-border:#EAD3A6;
  --danger:#9A2A2A; --danger-border:#E7C2C2;
  --radius:14px; --radius-md:9px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.app{max-width:980px;margin:0 auto;padding:18px 16px 60px}
.shell{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.mono{font-family:var(--mono);font-size:13px}
.muted{color:var(--muted)}
.lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
a{color:var(--info)}
input,select,textarea{font-family:inherit;background:var(--surface);color:var(--text);border:0.5px solid var(--border2);border-radius:var(--radius-md);padding:7px 10px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--info);box-shadow:0 0 0 3px var(--info-bg)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:0.5px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px}
.brand b{font-weight:600;font-size:16px}
.tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:0.5px solid var(--border);background:var(--surface2);flex-wrap:wrap;overflow-x:auto}
.tab{font-size:14px;padding:6px 12px;border-radius:var(--radius-md);display:inline-flex;align-items:center;gap:6px;color:var(--muted);background:transparent;border:0.5px solid transparent;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{background:var(--surface);color:var(--text);font-weight:500;border-color:var(--border)}
.btn{font-size:13px;padding:7px 12px;border-radius:var(--radius-md);border:0.5px solid var(--border2);background:transparent;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--surface2)}
.btn-primary{border-color:var(--info-border);color:var(--info);font-weight:500}
.btn-primary:hover{background:var(--info-bg)}
.btn-danger{border-color:var(--danger-border);color:var(--danger)}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:999px;font-weight:500;white-space:nowrap}
.p-gray{background:#F1EFE8;color:#5F5E5A}.p-blue{background:#E6F1FB;color:#0C447C}
.p-amber{background:#FAEEDA;color:#633806}.p-teal{background:#E1F5EE;color:#085041}
.p-purple{background:#EEEDFE;color:#3C3489}.p-red{background:#FCEBEB;color:#791F1F}
.p-green{background:#EAF3DE;color:#27500A}.p-info{background:var(--info-bg);color:var(--info)}
.segwrap{display:flex;gap:6px;flex-wrap:wrap}
.seg{font-size:13.5px;padding:7px 13px;border:0.5px solid var(--border2);background:transparent;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-md)}
.seg.active{background:var(--info-bg);color:var(--info);border-color:var(--info-border);font-weight:500}
.sw{width:34px;height:20px;border-radius:999px;background:var(--border2);position:relative;cursor:pointer;flex:none;display:inline-block}
.sw.on{background:#378ADD}
.knob{width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:left .15s}
.sw.on .knob{left:16px}
.card{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.lead{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.leadhead{display:flex;align-items:center;gap:12px}
.title{font-weight:500}
.sub{color:var(--muted);font-size:12px;margin-top:2px}
.divider{margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.divider .line{flex:1;height:0.5px;background:var(--border)}
table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px}
thead tr{background:var(--surface2);color:var(--muted);text-align:left}
th{padding:8px 10px;font-weight:500}
td{padding:8px 10px}
tbody tr{border-top:0.5px solid var(--border)}
.tablewrap{border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.irow{display:flex;align-items:center;gap:11px;padding:11px 14px;border-top:0.5px solid var(--border);cursor:pointer}
.irow:hover{background:var(--surface2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--info);flex:none}
.snip{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric{background:var(--surface2);border-radius:var(--radius-md);padding:12px 14px}
.metric .n{font-size:24px;font-weight:600}
.srow{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:0.5px solid var(--border);font-size:13px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:28px 14px;z-index:50;overflow:auto}
.overlay[hidden]{display:none}
.modal{width:100%;max-width:620px;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.iconbtn{border:none;background:transparent;cursor:pointer;color:var(--muted);font-size:18px;display:inline-flex;align-items:center;justify-content:center;padding:2px}
.agrid{display:grid;grid-template-columns:1.5fr 1fr 1.4fr 1.4fr 30px;gap:6px;align-items:center}
.agrid input,.agrid select{width:100%;min-width:0;font-size:13px;height:34px}
.msg{border-radius:var(--radius-md);padding:10px 12px;font-size:13px;line-height:1.55}
.mhead{font-size:11px;margin-bottom:5px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.note{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--muted)}
.banner{padding:10px 15px;background:var(--success-bg);color:var(--success);font-size:12.5px;display:flex;align-items:center;gap:7px}
.flag{margin-top:8px;padding:7px 10px;background:var(--warning-bg);color:var(--warning);border-radius:var(--radius-md);font-size:12px}
section[hidden]{display:none}
.empty{padding:24px;text-align:center;color:var(--muted)}
@media(max-width:560px){.agrid{grid-template-columns:1fr 1fr}.agrid .lbl:nth-child(n+3){display:none}}