:root{
  --bg:#07111f;--panel:#0d1b2b;--panel2:#10243b;--line:#243a55;--text:#f8fafc;
  --muted:#8fa4ba;--accent:#38bdf8;--ok:#34d399;--warn:#f59e0b;--danger:#f87171;
  --shadow:0 18px 48px rgba(0,0,0,.24)
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at 10% 0%,rgba(56,189,248,.12),transparent 34rem),#07111f
}
button,input,select{font:inherit}
button{cursor:pointer;border:1px solid #31506f;background:#112842;color:white;border-radius:11px;padding:10px 13px;font-weight:800}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:linear-gradient(180deg,#0ea5e9,#0284c7);border-color:#38bdf8}
button.danger{background:#7f1d1d;border-color:#ef4444}
.hidden{display:none!important}
.dashboard-shell{width:min(1500px,96vw);margin:0 auto;padding:20px 0 40px}
.topbar,.panelhead,.actionsrow,.top-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar{margin-bottom:16px}.topbar h1{margin:2px 0 0}
.top-actions{justify-content:flex-end}
.eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.13em;color:#7dd3fc}
.muted{color:var(--muted)}
.pill{border:1px solid #31506f;border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:800;background:#10233a}
.panel{
  border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(16,36,59,.95),rgba(9,24,39,.95));
  padding:17px;box-shadow:var(--shadow)
}
.hero{max-width:780px;margin:10vh auto 0;padding:24px}.hero h2{font-size:1.7rem;margin:5px 0}
.formrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
label{display:grid;gap:7px;color:#cbd5e1;font-size:.82rem;font-weight:800}
select{background:#071523;color:white;border:1px solid #31506f;border-radius:11px;padding:11px}
.joinpanel{display:grid;grid-template-columns:1.1fr 240px 1fr;gap:22px;align-items:center}
.joincode{font-size:3.6rem;font-weight:950;letter-spacing:.12em;margin:5px 0 8px}
.joincopy a{color:#7dd3fc;text-decoration:none;word-break:break-all}
.actionsrow{justify-content:flex-start;margin-top:13px}
.qr{width:224px;height:224px;padding:2px;background:white;border-radius:12px;display:grid;place-items:center}
.qr img,.qr canvas{max-width:220px!important;max-height:220px!important}
.statusbox{display:grid;gap:9px;align-content:center}.statusbox strong{font-size:1.55rem}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0}
.metric{border:1px solid var(--line);border-radius:16px;background:#0b1c2e;padding:14px;text-align:center}
.metric span{display:block;font-size:2rem;font-weight:950}.metric small{color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panelhead h2{font-size:1rem;margin:0}
.stack{display:grid;gap:9px;margin-top:12px}
.row{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid var(--line);
  border-radius:13px;padding:11px;background:rgba(7,21,35,.72)
}
.row strong{display:block}.row small{display:block;color:var(--muted);margin-top:3px}
.badge{border:1px solid #31506f;border-radius:999px;padding:5px 8px;font-size:.73rem;font-weight:850;background:#10233a}
.badge.ok{border-color:#166534;color:#86efac}.badge.warn{border-color:#92400e;color:#fcd34d}
.empty{padding:22px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:13px}
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:5000;
  width:min(92vw,620px);padding:12px 14px;border-radius:12px;background:#020617;border:1px solid #334155;
  box-shadow:var(--shadow);text-align:center
}
@media(max-width:960px){
  .joinpanel{grid-template-columns:1fr 220px}.statusbox{grid-column:1/-1}
  .grid{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .dashboard-shell{width:calc(100% - 20px)}
  .joinpanel{grid-template-columns:1fr}.qr{margin:auto}.joincode{font-size:2.5rem}
  .formrow,.metrics{grid-template-columns:1fr}
  .topbar{align-items:flex-start}
}

.autostart{
  padding:10px 12px;border:1px solid #31506f;border-radius:12px;background:#081827;
  color:#dbeafe;font-weight:850;text-align:center
}
.autostart.waiting{border-color:#92400e;color:#fde68a}
.presence-offline{color:#fca5a5}.presence-online{color:#86efac}.lead-offline{color:#fde68a}.team-mode{font-weight:850;color:#7dd3fc}

.button{display:inline-block;text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:inherit;background:transparent;font-weight:800}

/* Phase 2: health, correlation groups, ticket tags, event severity, end-of-shift summary */
.badge.bad{border-color:#991b1b;color:#fca5a5;background:#2a1215}
.row.health-offline{border-color:#7f1d1d}.row.health-degraded{border-color:#78350f}
.corr-head{
  display:flex;gap:10px;align-items:flex-start;margin-top:4px;padding:8px 11px;border-radius:12px;
  border:1px solid var(--corr,#38bdf8);background:rgba(7,21,35,.5);border-left-width:5px
}
.corr-head strong{display:block;font-size:.88rem}.corr-head small{display:block;color:var(--muted);margin-top:2px}
.corr-dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--corr,#38bdf8)}
.corr-head.strong strong{color:#fde68a}.corr-head.restored strong{color:#86efac}.corr-head.change strong{color:#fca5a5}
.row.correlated{border-left:5px solid var(--corr,#38bdf8);margin-left:10px}
.row.closed{opacity:.72}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{border:1px solid #31506f;border-radius:999px;padding:2px 8px;font-size:.7rem;font-weight:800;color:#cbd5e1}
.tag.change{border-color:#9a3412;color:#fdba74}.tag.root{border-color:#166534;color:#86efac}.tag.bad{border-color:#991b1b;color:#fca5a5}
.row.sev-warning{border-left:4px solid var(--warn)}.row.sev-warning strong{color:#fde68a}
.row.sev-critical{border-left:4px solid var(--danger)}.row.sev-critical strong{color:#fca5a5}
.summary{max-width:880px}
.summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 12px}
.summary-stats .metric span{font-size:1.7rem}
.metric.ok span{color:#86efac}.metric.warn span{color:#fcd34d}.metric.bad span{color:#fca5a5}
.summary-root{display:grid;gap:4px;border:1px solid var(--line);border-radius:13px;padding:12px;margin-bottom:16px;background:rgba(7,21,35,.72)}
.summary-root span{color:#cbd5e1}.summary-root span.ok{color:#86efac}
@media(max-width:640px){.summary-stats{grid-template-columns:1fr 1fr}}

/* 0.9.14 pressure pass */
.tag.prio-p1{border-color:#dc2626;color:#fecaca;background:rgba(127,29,29,.45)}.tag.prio-p2{border-color:#d97706;color:#fde68a}
.tag.prio-triage{border-color:#7c3aed;color:#ddd6fe;background:rgba(124,58,237,.25)}
.tag.prio-p3{border-color:#3b82f6;color:#bfdbfe}.tag.prio-p4{border-color:#64748b;color:#cbd5e1}
.row small.ctx{display:block;color:#cbd5e1;font-style:italic}
.badge.sla-live{font-variant-numeric:tabular-nums;font-weight:800}
.badge.sla-live.ok{color:#86efac}.badge.sla-live.warn{color:#fcd34d;border-color:#b45309}.badge.sla-live.bad{color:#fca5a5;border-color:#991b1b}
body.soc-alarm .metric.bad{animation:socAlarm 1.4s ease-in-out infinite}
@keyframes socAlarm{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}50%{box-shadow:0 0 0 6px rgba(248,113,113,.35)}}
@media(prefers-reduced-motion:reduce){body.soc-alarm .metric.bad{animation:none}}