:root{
  --surface:#fcfcfb; --page:#f2f3f2; --ink:#0b0b0b; --ink-2:#52514e; --ink-muted:#898781;
  --grid:#e1e0d9; --border:#dcded9; --card:#ffffff; --card-shadow:0 1px 2px rgba(11,11,11,0.06), 0 1px 8px rgba(11,11,11,0.04);
  --s1:#2a78d6; --s2:#1baf7a; --s3:#eda100; --s4:#008300; --s5:#4a3aa7; --s6:#e34948; --s7:#e87ba4; --s8:#eb6834;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
  --seq-100:#cde2fb; --seq-250:#86b6ef; --seq-400:#3987e5; --seq-550:#1c5cab; --seq-700:#0d366b;
  --accent:#2a78d6;
}
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])){
    --surface:#1c1d1b; --page:#101110; --ink:#f5f5f3; --ink-2:#c3c2b7; --ink-muted:#8f8d85;
    --grid:#2c2c2a; --border:#33352f; --card:#212320; --card-shadow:0 1px 2px rgba(0,0,0,0.3), 0 1px 10px rgba(0,0,0,0.25);
    --s1:#3987e5; --s2:#199e70; --s3:#c98500; --s4:#1fae1f; --s5:#9085e9; --s6:#e66767; --s7:#d55181; --s8:#d95926;
    --accent:#3987e5;
  }
}
:root[data-theme="dark"]{
  --surface:#1c1d1b; --page:#101110; --ink:#f5f5f3; --ink-2:#c3c2b7; --ink-muted:#8f8d85;
  --grid:#2c2c2a; --border:#33352f; --card:#212320; --card-shadow:0 1px 2px rgba(0,0,0,0.3), 0 1px 10px rgba(0,0,0,0.25);
  --s1:#3987e5; --s2:#199e70; --s3:#c98500; --s4:#1fae1f; --s5:#9085e9; --s6:#e66767; --s7:#d55181; --s8:#d95926;
  --accent:#3987e5;
}
:root[data-theme="light"]{
  --surface:#fcfcfb; --page:#f2f3f2; --ink:#0b0b0b; --ink-2:#52514e; --ink-muted:#898781;
  --grid:#e1e0d9; --border:#dcded9; --card:#ffffff; --card-shadow:0 1px 2px rgba(11,11,11,0.06), 0 1px 8px rgba(11,11,11,0.04);
  --s1:#2a78d6; --s2:#1baf7a; --s3:#eda100; --s4:#008300; --s5:#4a3aa7; --s6:#e34948; --s7:#e87ba4; --s8:#eb6834;
  --accent:#2a78d6;
}
*{box-sizing:border-box;}
body{margin:0;}
.bi{font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--page); color:var(--ink); min-height:100vh;}
.bi *{box-sizing:border-box;}

/* ---- top chrome ---- */
.bi-top{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:0 1px 4px rgba(0,0,0,0.04);}
.bi-titlebar{display:flex; align-items:center; justify-content:space-between; padding:10px 18px; gap:16px; flex-wrap:wrap;}
.bi-title{font-size:15px; font-weight:700; letter-spacing:-0.01em; display:flex; align-items:center; gap:8px;}
.bi-title .dot{width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent);}
.bi-title small{font-weight:500; color:var(--ink-muted); font-size:11px;}

.filterbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.fctrl{display:flex; flex-direction:column; gap:2px;}
.fctrl label{font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); font-weight:700;}
.fctrl select, .fctrl input[type="date"]{
  font-family:inherit; font-size:12px; padding:5px 8px; border-radius:6px; border:1px solid var(--border);
  background:var(--card); color:var(--ink); min-width:90px; cursor:pointer;
}
.fctrl input[type="date"]{cursor:text; font-variant-numeric:tabular-nums;}
.chip-select{display:flex; gap:4px; flex-wrap:wrap; max-width:320px;}
.chip{font-size:11px; padding:4px 9px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--ink-2); cursor:pointer; user-select:none; white-space:nowrap; transition:background .1s,border-color .1s;}
.chip.on{background:color-mix(in srgb, var(--accent) 16%, var(--card)); border-color:var(--accent); color:var(--ink); font-weight:600;}
.btn-reset{font-size:11px; font-weight:600; padding:6px 12px; border-radius:6px; border:1px solid var(--border); background:var(--card); color:var(--ink-2); cursor:pointer;}
.btn-reset:hover{color:var(--ink); border-color:var(--ink-muted);}

.bi-pages{display:flex; gap:2px; padding:0 18px; overflow-x:auto;}
.bi-page-tab{padding:9px 14px; font-size:12.5px; font-weight:600; color:var(--ink-muted); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap;}
.bi-page-tab.active{color:var(--accent); border-bottom-color:var(--accent);}
.bi-page-tab:hover{color:var(--ink);}

.bi-body{padding:16px 18px 60px; max-width:1440px; margin:0 auto;}
.page{display:none;}
.page.active{display:block;}

.kpirow{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:12px;}
.kpi{background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px 14px; box-shadow:var(--card-shadow);}
.kpi .lbl{font-size:10.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:0.03em; font-weight:700;}
.kpi .val{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; margin:3px 0 1px; letter-spacing:-0.01em;}
.kpi .delta{font-size:11px; font-weight:600;}
.kpi .delta.up{color:var(--good);} .kpi .delta.down{color:var(--crit);}
.kpi svg{margin-top:4px; display:block;}

.grid{display:grid; gap:10px;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:1fr 1fr 1fr;}
.g12{grid-template-columns:1fr 2fr;}
.g21{grid-template-columns:2fr 1fr;}
@media (max-width:900px){.g2,.g3,.g12,.g21{grid-template-columns:1fr;}}

.card{background:var(--card); border:1px solid var(--border); border-radius:8px; padding:14px 16px; box-shadow:var(--card-shadow); margin-bottom:10px; position:relative;}
.card h3{font-size:12.5px; font-weight:700; margin:0 0 8px; display:flex; align-items:center; gap:6px;}
.card h3 .tag{font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:1px 6px; border-radius:3px;}
.tag.live{background:color-mix(in srgb, var(--good) 18%, transparent); color:var(--good);}
.tag.sample{background:color-mix(in srgb, var(--ink-muted) 22%, transparent); color:var(--ink-2);}
.info{width:14px; height:14px; border-radius:50%; background:var(--grid); color:var(--ink-muted); font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; cursor:help; margin-left:auto; flex-shrink:0;}
.info:hover{background:var(--accent); color:#fff;}
.infotip{position:absolute; top:26px; right:14px; width:240px; background:var(--ink); color:var(--surface); font-size:11px; line-height:1.5; padding:8px 10px; border-radius:6px; z-index:10; display:none; box-shadow:0 4px 16px rgba(0,0,0,0.3);}
.info:hover + .infotip, .infotip:hover{display:block;}

table{width:100%; border-collapse:collapse; font-size:12px;}
th{text-align:left; color:var(--ink-muted); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:0.02em; padding:5px 8px; border-bottom:1px solid var(--grid);}
td{padding:6px 8px; border-bottom:1px solid var(--grid); color:var(--ink-2); vertical-align:middle;}
td b{color:var(--ink); font-weight:600;}
tr:last-child td{border-bottom:none;}

.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:10.5px; color:var(--ink-2); margin-bottom:6px;}
.legend span{display:inline-flex; align-items:center; gap:4px;}
.legend i{width:8px; height:8px; border-radius:2px; display:inline-block;}

.funnel{display:flex; flex-direction:column; gap:0;}
.fstage{display:flex; align-items:center; gap:10px; padding:5px 0;}
.fbar{height:26px; border-radius:4px; display:flex; align-items:center; padding:0 9px; color:#fff; font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; min-width:50px; transition:width .25s ease;}
.fname{width:118px; font-size:11.5px; font-weight:600; text-align:right; flex-shrink:0;}
.fmeta{font-size:10.5px; color:var(--ink-muted); width:120px; flex-shrink:0;}
.fdrop{font-size:10.5px; color:var(--crit); padding-left:128px; margin:-1px 0 1px;}

.tooltip{position:fixed; background:var(--ink); color:var(--surface); font-size:11px; padding:5px 8px; border-radius:5px; pointer-events:none; opacity:0; transition:opacity .1s; white-space:nowrap; z-index:50; font-variant-numeric:tabular-nums;}
.chartwrap{position:relative;}
.chartwrap.dim{opacity:0.35;}

.catbars{display:flex; flex-direction:column; gap:8px;}
.catrow{display:grid; grid-template-columns:92px 1fr 78px; gap:8px; align-items:center; font-size:11.5px; transition:opacity .15s;}
.catrow.off{opacity:0.25;}
.catrow .track{height:14px; background:var(--grid); border-radius:3px; overflow:hidden; position:relative;}
.catrow .fill{height:100%; border-radius:3px;}

.quad{position:relative; width:100%; aspect-ratio:16/9; border:1px solid var(--grid); border-radius:4px;}
.quad .axisline{position:absolute; background:var(--grid);}
.quad .dot{position:absolute; width:10px; height:10px; border-radius:50%; transform:translate(-50%,50%); cursor:pointer;}
.quad .qlabel{position:absolute; font-size:9px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em;}

.hcell{aspect-ratio:1; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; font-variant-numeric:tabular-nums; color:#fff;}
.hrowlabel{font-size:9.5px; color:var(--ink-muted); display:flex; align-items:center; padding-right:5px;}

.donut{width:100px; height:100px; border-radius:50%; position:relative; flex-shrink:0;}
.donut::after{content:"";position:absolute; inset:17px; background:var(--card); border-radius:50%;}
.donutctr{position:absolute; inset:17px; display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:1;}
.donutctr b{font-size:15px;} .donutctr span{font-size:9px; color:var(--ink-muted);}

.stat-big{display:flex; gap:20px; align-items:baseline; flex-wrap:wrap;}
.stat-big .n{font-size:28px; font-weight:700; font-variant-numeric:tabular-nums;}
.stat-big .l{font-size:10px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em; font-weight:700;}

.foot{font-size:10.5px; color:var(--ink-muted); padding:10px 4px 0; line-height:1.6;}