:root {
  --bg:#06060b; --card:#111118; --elevated:#0c0c15;
  --border:#1e1e34; --border-dim:#18182a;
  --text:#e0e2ed; --dim:#8288a0; --muted:#4c5070;
  --accent:#6366f1; --aglow:rgba(99,102,241,.14);
  --green:#22c55e; --gbg:rgba(34,197,94,.09);
  --red:#ef4444; --rbg:rgba(239,68,68,.09);
  --yellow:#eab308; --ybg:rgba(234,179,8,.09);
  --cyan:#06b6d4; --cbg:rgba(6,182,212,.09);
  --magenta:#a855f7;
  --radius:12px; --radius-sm:8px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px}
body{
  background:var(--bg);color:var(--text);
  font-family:'JetBrains Mono','SF Mono',monospace;
  line-height:1.5;min-height:100vh;
}
.container{
  max-width:1360px;margin:0 auto;padding:14px 16px;
}

/* ── HEADER ── */
.header{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 18px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:14px;z-index:20;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.hl,.hr{display:flex;align-items:center;gap:14px}
.logo{font-size:1.1rem;font-weight:800;color:var(--accent)}
.badge{
  font-size:.68rem;padding:3px 9px;border-radius:5px;font-weight:500;
  letter-spacing:.2px;
}
.bg-green{background:var(--gbg);color:var(--green)}
.bg-yellow{background:var(--ybg);color:var(--yellow)}
.bg-cyan{background:var(--cbg);color:var(--cyan)}
.bg-accent{background:var(--aglow);color:var(--accent)}
.bg-red{background:var(--rbg);color:var(--red)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;flex-shrink:0}
.d-ok{background:var(--green);box-shadow:0 0 10px rgba(34,197,94,.45)}
.d-err{background:var(--red)}
.btn{
  font-family:inherit;font-size:.68rem;padding:6px 14px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--elevated);color:var(--text);cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.btn:hover{border-color:var(--accent);background:rgba(99,102,241,.08)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{opacity:.9}
.btn-danger:hover{border-color:var(--red);color:var(--red)}

/* ── GRID LAYOUT ── */
.g2{display:grid;grid-template-columns:3fr 1fr;gap:12px;margin-bottom:12px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:12px}
.panel{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;overflow:hidden;
  transition:border-color .15s;
}
.panel:hover{border-color:rgba(99,102,241,.25)}
.panel h2{
  font-size:.68rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.7px;font-weight:600;margin-bottom:12px;
}

/* ── KPI CARDS ── */
.kpi{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;transition:border-color .15s;
}
.kpi:hover{border-color:rgba(99,102,241,.25)}
.kpi-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.kpi-val{font-size:1.7rem;font-weight:800;line-height:1.1;margin-bottom:4px}
.kpi-val .arrow{font-size:1.1rem;margin-left:3px}
.kpi-sub{font-size:.7rem;color:var(--dim)}
.green{color:var(--green)}.yellow{color:var(--yellow)}.cyan{color:var(--cyan)}.magenta{color:var(--magenta)}.red{color:var(--red)}
.cred-bars{display:flex;gap:2px;margin-top:6px;align-items:flex-end}
.cred-bars span{flex:1;min-width:4px;border-radius:2px;height:8px;background:var(--green)}
.cred-bars span.e{background:var(--elevated);border:1px solid var(--border-dim)}

/* ── CHARTS ── */
.chart-box{position:relative}
.chart-box.tall{height:280px}
.chart-box canvas{width:100%!important;height:100%!important}

/* ── WORKER CARDS ── */
.worker{
  background:var(--elevated);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px;
  transition:all .15s;
}
.worker.on{border-color:var(--accent);box-shadow:0 0 20px rgba(99,102,241,.1)}
.worker.err{border-color:var(--red)}
.worker .wh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.worker .wn{font-size:.82rem;font-weight:600}
.worker .ws{font-size:.62rem;padding:2px 7px;border-radius:4px;font-weight:500}
.ws-on{background:var(--aglow);color:var(--accent)}
.ws-w{background:var(--ybg);color:var(--yellow)}
.ws-e{background:var(--rbg);color:var(--red)}
.ws-i{color:var(--muted)}
.worker .wi{font-size:.72rem;color:var(--dim);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.worker .wi b{color:var(--cyan);font-weight:500}
.worker .wc{font-size:.72rem;color:var(--yellow);margin:6px 0}
.worker .wbar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.worker .wbar-f{height:100%;background:linear-gradient(90deg,var(--accent),#a78bfa);border-radius:2px;transition:width .3s}
.worker .we{font-size:.65rem;color:var(--red);margin-top:4px}

/* ── SESSION CARDS ── */
.session{
  padding:9px 0;border-bottom:1px solid rgba(30,30,52,.4);
  display:flex;gap:10px;align-items:flex-start;font-size:.72rem;
}
.session:last-child{border-bottom:none}
.session .si{width:16px;text-align:center;flex-shrink:0;font-size:.8rem;padding-top:1px}
.session .sb{flex:1;min-width:0}
.session .sm{color:var(--dim);margin-top:2px;font-size:.68rem}
.session .sm b{color:var(--cyan);font-weight:500}
.session .se{text-align:right;flex-shrink:0;font-weight:600;font-size:.72rem}
.se-ok{color:var(--green)}.se-pending{color:var(--yellow)}.se-fail{color:var(--red)}

/* ── METRICS ── */
.metric{font-size:.72rem;padding:4px 0;display:flex;justify-content:space-between}
.metric .mv{font-weight:600}

/* ── ADAPT ── */
.adapt-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.adapt-badge{
  font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:5px;
  text-transform:uppercase;letter-spacing:.5px;
}
.ab-CRUISE{color:var(--green);background:var(--gbg)}
.ab-COOL{color:var(--yellow);background:var(--ybg)}
.ab-BOOST{color:var(--cyan);background:var(--cbg)}
.ab-REST{color:var(--red);background:var(--rbg)}
.adapt-stat{font-size:.68rem;color:var(--dim)}
.adapt-stat b{color:var(--cyan);font-weight:600}

/* ── LOGS ── */
.log-box{max-height:220px;overflow-y:auto;font-size:.66rem}
.log-box.collapsed{max-height:90px}
.log-line{padding:1px 0;color:var(--dim);border-bottom:1px solid rgba(30,30,52,.2)}
.log-ln.adapt{color:var(--accent)}.log-ln.debug{color:var(--yellow)}.log-ln.error{color:var(--red)}.log-ln.worker{color:var(--cyan)}
.log-search{display:flex;gap:6px;margin-bottom:6px}
.log-search input{
  flex:1;padding:5px 8px;background:var(--bg);border:1px solid var(--border);
  border-radius:5px;color:var(--text);font:inherit;font-size:.65rem;outline:none;
}
.log-search input:focus{border-color:var(--accent)}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:20px;right:20px;padding:10px 16px;
  background:var(--card);border:1px solid var(--accent);border-radius:var(--radius-sm);
  font-size:.72rem;z-index:100;opacity:0;transform:translateY(10px);
  transition:all .2s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:1100px){
  .g2{grid-template-columns:1fr}.g5{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}
  .header{flex-direction:column;gap:10px}
}