:root{
  --bg:#080b11; --panel:#0d131c; --panel2:#0b1018; --line:#1b2331; --line2:#28334a;
  --ink:#dde6f2; --muted:#7d8ba3; --faint:#55617a;
  --accent:#39c5bb;            /* restrained teal — interactive affordance only */
  --blue:#2f81f7;
  --ok:#3fb950; --warn:#d8a019; --crit:#f15542; --iso:#a371f7; --quality:#58a6ff;
  --mono:"Cascadia Code","JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;
  background-position:center;
  color:var(--ink);font:13px/1.5 var(--sans);
  display:flex;flex-direction:column;min-height:100vh;
}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(1400px 500px at 50% -5%,rgba(23,34,54,.55),transparent 70%);pointer-events:none;z-index:0}
body>*{position:relative;z-index:1}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 16px;border-bottom:1px solid var(--line2);background:#0a0e15}
.brand{display:flex;align-items:center;gap:11px}
.logo-mark{width:30px;height:30px;flex-shrink:0}
.brand-name{font-size:15px;letter-spacing:.2px;font-weight:600}
.brand-name b{color:var(--accent);font-weight:700}
.brand-sub{font-size:10.5px;color:var(--muted);letter-spacing:.2px}
.top-meta{display:flex;align-items:center;gap:8px}
.pill{font:600 10.5px/1 var(--mono);padding:5px 9px;border-radius:4px;border:1px solid var(--line2);letter-spacing:.3px}
.pill.demo{background:#211a07;color:#d8a019;border-color:#423410}
.pill.ai-on{background:#07210f;color:var(--ok);border-color:#113d22}
.pill.ai-off{background:#1c1726;color:#b492e6;border-color:#332348}
.pill.live{background:#07210f;color:var(--ok);border-color:#113d22;display:inline-flex;align-items:center;gap:6px}
.pill.live .blip{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:blip 1.4s infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(63,185,80,.5)}50%{opacity:.5;box-shadow:0 0 0 4px rgba(63,185,80,0)}}
.clock{font:600 13px/1 var(--mono);color:var(--accent);min-width:50px;text-align:right}

/* ---------- view nav ---------- */
.viewnav{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;flex:1}
.nav{background:transparent;color:var(--muted);border:1px solid transparent;border-bottom:2px solid transparent;
  border-radius:0;padding:7px 12px;font:600 12px/1 var(--sans);cursor:pointer;transition:all .12s}
.nav:hover{color:var(--ink)}
.nav.active{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- event ticker ---------- */
.ticker{display:flex;align-items:center;gap:0;height:26px;background:#0a0e15;border-bottom:1px solid var(--line);overflow:hidden;font:12px/1 var(--mono)}
.ticker .tk-label{flex-shrink:0;background:var(--accent);color:#04231f;font-weight:700;padding:0 10px;height:100%;display:flex;align-items:center;letter-spacing:.5px}
.ticker .tk-track{display:flex;gap:28px;white-space:nowrap;padding-left:16px;animation:tkscroll 42s linear infinite}
.ticker .tk-track span{color:var(--muted)}
.ticker .tk-track b{color:var(--ink);font-weight:600}
.ticker .tk-track .t-crit{color:var(--crit)} .ticker .tk-track .t-ok{color:var(--ok)} .ticker .tk-track .t-warn{color:var(--warn)}
@keyframes tkscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- views ---------- */
.view{display:none}
.view.active{display:block}
#view-ops.active{display:flex;flex-direction:column;flex:1;min-height:0}
.view:not(#view-ops){flex:1;overflow:auto}
.viewpad{padding:18px;max-width:1300px;margin:0 auto}
.view-h{font-size:18px;font-weight:700;margin:0 0 3px;letter-spacing:-.2px}
.view-sub{color:var(--muted);font-size:12.5px;margin-bottom:16px;max-width:860px}
.req-tag{display:inline-block;font:700 10px/1 var(--mono);color:var(--accent);border:1px solid var(--line2);
  background:#0a1a19;border-radius:3px;padding:4px 8px;margin-bottom:11px;letter-spacing:.6px}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:1fr 400px;gap:12px;padding:12px;flex:1;min-height:0}
.panel{background:var(--panel);border:1px solid var(--line2);border-radius:6px;display:flex;flex-direction:column;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--line);background:#0a0f17}
.panel-head h2{margin:0;font:700 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.8px;color:#aebdd4}
.hint{font-size:10.5px;color:var(--faint);font-family:var(--mono)}
.map-panel{min-height:0}
.map-wrap{flex:1;min-height:0;padding:4px;background:
  radial-gradient(900px 400px at 30% 20%,rgba(20,30,48,.4),transparent 70%)}
#map{width:100%;height:100%;display:block}
.legend{display:flex;gap:13px;flex-wrap:wrap;padding:7px 12px;border-top:1px solid var(--line);font:11px/1 var(--mono);color:var(--muted)}
.legend i{display:inline-block;margin-right:5px;vertical-align:middle}
.dot{width:9px;height:9px;border-radius:50%}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.crit{background:var(--crit)}.dot.iso{background:var(--iso)}
.sq{width:9px;height:9px;border-radius:1px}.sq.tank{background:var(--quality)}.sq.pump{background:#8ddb4f}

/* ---------- rail ---------- */
.rail{display:flex;flex-direction:column;gap:11px;min-height:0;overflow:auto}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.kpi{background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:9px 10px 6px;position:relative;overflow:hidden}
.kpi-v{font:800 21px/1 var(--mono);color:var(--ink)}
.kpi-l{font-size:9.5px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.4px}
.kpi .spark{position:absolute;bottom:0;left:0;right:0;height:22px;opacity:.75}
.grow{flex:1;min-height:150px}

.triage{padding:11px 12px}
.t-headline{font-size:13.5px;font-weight:700;margin-bottom:6px}
.t-action{background:#0a1620;border:1px solid var(--line2);border-left:2px solid var(--accent);
  border-radius:4px;padding:7px 9px;font-size:12.5px}
.t-why{color:var(--muted);font-size:11.5px;margin-top:6px}
.mini{background:#121a26;color:#9fb3cf;border:1px solid var(--line2);border-radius:4px;padding:3px 8px;font:11px/1 var(--mono);cursor:pointer}
.mini:hover{border-color:var(--accent)}

.feed{list-style:none;margin:0;padding:5px;overflow:auto}
.feed li{padding:7px 9px;border-radius:4px;margin:3px;font-size:12px;border-left:2px solid var(--line2);background:#0a0f18}
.feed li.critical{border-left-color:var(--crit);background:#1a0e0d}
.feed li.high{border-left-color:var(--warn);background:#191505}
.feed li.medium{border-left-color:var(--quality)}
.feed li .sev{font:700 9.5px/1 var(--mono);text-transform:uppercase;margin-right:6px;letter-spacing:.5px}
.feed li.critical .sev{color:var(--crit)} .feed li.high .sev{color:var(--warn)} .feed li.medium .sev{color:var(--quality)}
.feed li .risk{display:block;color:var(--muted);font-size:10.5px;margin-top:2px;font-family:var(--mono)}
.muted{color:var(--muted)}
.count{background:#121a26;color:#9fb3cf;border-radius:3px;padding:1px 8px;font:700 11px/1.4 var(--mono)}

.copilot-log{max-height:180px;overflow:auto;padding:9px 11px;display:flex;flex-direction:column;gap:7px}
.cp-hint{color:var(--muted);font-size:11.5px}
.cp-q{align-self:flex-end;background:#163a63;color:#dcebff;padding:6px 10px;border-radius:7px 7px 1px 7px;font-size:12px;max-width:85%}
.cp-a{align-self:flex-start;background:#0a1620;border:1px solid var(--line2);padding:8px 10px;border-radius:7px 7px 7px 1px;font-size:12px;max-width:92%}
.cp-a ul{margin:5px 0 0;padding-left:15px}.cp-a li{margin:2px 0}
.cp-a .tag{font:700 9px/1 var(--mono);color:var(--accent);letter-spacing:.5px;display:block;margin-bottom:3px}
.copilot-in{display:flex;gap:6px;padding:9px 11px;border-top:1px solid var(--line)}
.copilot-in input{flex:1;background:#070b11;border:1px solid var(--line2);border-radius:4px;color:var(--ink);padding:7px 9px;font-size:12.5px;font-family:var(--sans)}
.copilot-in input:focus{outline:none;border-color:var(--accent)}
.copilot-in button{background:var(--accent);color:#04231f;border:none;border-radius:4px;padding:0 13px;font-weight:700;cursor:pointer;font-size:12px}
.suggest{display:flex;gap:5px;flex-wrap:wrap;padding:0 11px 11px}
.chip{background:#0c141e;color:#8fb4c7;border:1px solid var(--line2);border-radius:4px;padding:4px 9px;font:11px/1 var(--mono);cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--ink)}

/* ---------- control deck ---------- */
.deck{display:flex;gap:18px;align-items:center;padding:9px 14px;border-top:1px solid var(--line2);background:#0a0e15;flex-wrap:wrap}
.deck-group{display:flex;align-items:center;gap:7px}
.deck-group.right{margin-left:auto}
.deck-label{font:600 10px/1 var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.5px;margin-right:3px}
.deck-label em{color:var(--accent);font-style:normal}
.drill{background:#0c141e;color:#b9c6da;border:1px solid var(--line2);border-radius:4px;padding:6px 10px;font-size:11.5px;cursor:pointer}
.drill:hover{border-color:var(--warn);color:#fff}
#scenarioSel{background:#070b11;color:var(--ink);border:1px solid var(--line2);border-radius:4px;padding:6px 9px;font-size:12px}
.primary{background:var(--accent);color:#04231f;border:none;border-radius:4px;padding:7px 13px;font-weight:700;cursor:pointer;font-size:12px}
.primary:hover{filter:brightness(1.1)}
.ghost{background:transparent;color:var(--muted);border:1px solid var(--line2);border-radius:4px;padding:7px 12px;cursor:pointer;font-size:12px}
.ghost:hover{border-color:var(--accent);color:var(--ink)}
.game-stat{font:600 11.5px/1 var(--mono);color:var(--warn)}

/* ---------- modal / popover ---------- */
.modal{position:fixed;inset:0;background:rgba(4,7,12,.8);display:flex;align-items:center;justify-content:center;z-index:50}
.modal.hidden{display:none}
.modal-card{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:22px;max-width:560px;width:92%;position:relative}
.modal-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer}
.score-big{font:900 54px/1 var(--mono);text-align:center}
.grade{text-align:center;font-size:13px;color:var(--muted);margin-bottom:12px}
.score-rows{display:flex;flex-direction:column;gap:5px;margin:12px 0}
.score-rows .r{display:flex;justify-content:space-between;padding:6px 10px;background:#0a0f18;border-radius:4px;font-size:12.5px}
.score-rows .r b{font-family:var(--mono)}
.pos{color:var(--ok)} .neg{color:var(--crit)}
.modal h3{margin:0 0 4px;font-size:16px} .modal .sub{color:var(--muted);font-size:12.5px;margin-bottom:11px}
.riskbadge{display:inline-block;padding:2px 8px;border-radius:3px;font:700 10.5px/1.5 var(--mono)}
.riskbadge.low{background:#07210f;color:var(--ok)} .riskbadge.moderate{background:#191505;color:var(--warn)} .riskbadge.high{background:#1a0e0d;color:var(--crit)}
.modal .act{background:#0a1620;border:1px solid var(--line2);border-left:2px solid var(--accent);border-radius:4px;padding:9px 11px;margin-top:9px;font-size:12.5px}
.modal .btnrow{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}

/* pipe action popover */
.popover{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line2);border-radius:7px;
  padding:11px;width:250px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.popover.hidden{display:none}
.popover h5{margin:0 0 7px;font:700 12px/1.3 var(--mono);color:var(--ink)}
.popover .pv-meta{font:11px/1.5 var(--mono);color:var(--muted);margin-bottom:9px}
.popover button{width:100%;text-align:left;background:#0c141e;color:var(--ink);border:1px solid var(--line2);
  border-radius:4px;padding:7px 9px;margin-top:5px;font-size:12px;cursor:pointer}
.popover button:hover{border-color:var(--accent)}
.popover button.close-v{border-left:2px solid var(--crit)}
.popover button.open-v{border-left:2px solid var(--ok)}
.popover button.trace-v{border-left:2px solid var(--accent)}
.popover button.scen-v{border-left:2px solid var(--warn)}
.popover .pv-result{margin-top:8px;padding:7px 9px;border-radius:4px;font:11.5px/1.4 var(--mono);background:#0a0f18}

.footnote{padding:7px 16px;color:var(--faint);font-size:10.5px;border-top:1px solid var(--line);text-align:center;font-family:var(--mono)}

/* ---------- SVG map ---------- */
.pipe{stroke:#30425f;stroke-width:3.5;cursor:pointer;transition:stroke .25s}
.pipe:hover{stroke:var(--accent)}
.pipe.trunk{stroke-width:5}
.pipe.break{stroke:var(--crit);stroke-width:5}
.pipe.isolated{stroke:var(--iso);stroke-dasharray:5 5;opacity:.6}
.pipe-flow{stroke:var(--accent);stroke-width:2;fill:none;stroke-dasharray:3 9;opacity:.8;pointer-events:none;
  animation:flowmove 1s linear infinite}
.pipe-flow.trunk{stroke-width:3}
.pipe-flow.break{stroke:#ff8a7a;animation-duration:.35s}
.pipe-flow.off{display:none}
@keyframes flowmove{to{stroke-dashoffset:-12}}
.valve{cursor:pointer}
.valve rect{transition:fill .2s}
.node-dot{transition:fill .35s}
.node-label{fill:#8498b5;font:10px var(--mono)}
.node-val{fill:#cfe0f5;font:700 10px var(--mono)}
.trace-hi{stroke:var(--accent)!important;stroke-width:6!important;filter:drop-shadow(0 0 5px var(--accent))}
.pulse-crit{animation:pulsecrit 1s infinite}
@keyframes pulsecrit{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- content cards (other views) ---------- */
.cardgrid{display:grid;gap:11px}
.cardgrid.c3{grid-template-columns:repeat(auto-fill,minmax(225px,1fr))}
.cardgrid.c2{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.card{background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:13px}
.card h4{margin:0 0 4px;font-size:13px}
.card .k{font-size:11px;color:var(--muted)}
.card .v{font-weight:700;font-family:var(--mono)}
.src-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px;font-size:12px}
.src-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:6px;box-shadow:0 0 6px var(--ok)}
.src-feed{color:var(--muted);font-size:11px;margin-top:3px;font-family:var(--mono)}
.badge{font:700 9.5px/1.6 var(--mono);padding:2px 7px;border-radius:3px;background:#07210f;color:var(--ok)}
.bar{height:7px;background:#070b11;border-radius:4px;overflow:hidden;margin-top:4px;border:1px solid var(--line)}
.bar > i{display:block;height:100%;background:var(--ok)}
.bar.hot > i{background:var(--crit)}
.tbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:7px}
.tbl th,.tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--muted);font:600 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.4px}
.tbl td{font-family:var(--mono)}
.tbl td.num{text-align:right}
.pill-sev{font:700 9.5px/1.5 var(--mono);padding:1px 7px;border-radius:3px}
.pill-sev.hot{background:#1a0e0d;color:var(--crit)} .pill-sev.warn{background:#191505;color:var(--warn)} .pill-sev.ok{background:#07210f;color:var(--ok)}
.ctl{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.ctl input[type=range]{width:220px;accent-color:var(--accent)}
.ctl .val{font-weight:800;color:var(--accent);font-family:var(--mono)}
.scorehero{display:flex;gap:16px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.ring{width:104px;height:104px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:900 28px/1 var(--mono);flex-shrink:0}
.ring small{font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}
.collab-log{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.clog{background:var(--panel);border:1px solid var(--line2);border-left:2px solid var(--blue);border-radius:5px;padding:8px 11px}
.clog .meta{font:11px/1.4 var(--mono);color:var(--muted);margin-bottom:3px}
.clog .dept{color:var(--accent);font-weight:700}
.collab-in{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.collab-in select,.collab-in input{background:#070b11;border:1px solid var(--line2);border-radius:4px;color:var(--ink);padding:7px 9px;font-size:12.5px}
.collab-in input{flex:1;min-width:240px}
.cov{display:flex;align-items:flex-start;gap:11px;background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .12s}
.cov:hover{border-color:var(--accent)}
.cov .chk{width:24px;height:24px;border-radius:50%;background:#07210f;color:var(--ok);display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0;font-size:13px}
.cov .n{font-weight:700;font-size:13.5px}
.cov .f{color:var(--muted);font-size:12px;margin-top:2px}
.cov .go{margin-left:auto;align-self:center;font:11px/1 var(--mono);color:var(--accent);white-space:nowrap}

/* ---------- security strip ---------- */
.secstrip{display:flex;gap:14px;align-items:center;padding:7px 12px;background:#0a0f17;border:1px solid var(--line2);border-radius:6px;margin-top:11px;flex-wrap:wrap}
.secstrip .sec-ttl{font:700 10.5px/1 var(--mono);color:var(--accent);letter-spacing:.4px}
.secstrip .sec-item{font:11px/1 var(--mono);color:var(--muted);display:flex;align-items:center;gap:5px}
.secstrip .sec-item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* ---------- guided tour ---------- */
.tour{position:fixed;inset:0;z-index:70;background:rgba(4,7,12,.55);display:flex;align-items:flex-end;justify-content:center;padding-bottom:70px}
.tour.hidden{display:none}
.tour-card{background:var(--panel);border:1px solid var(--accent);border-radius:9px;padding:18px 20px;max-width:560px;width:92%;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.tour-step{font:700 10.5px/1 var(--mono);color:var(--accent);letter-spacing:.5px}
.tour-card h3{margin:7px 0 5px;font-size:17px}
.tour-card p{margin:0 0 14px;color:var(--muted);font-size:13px}
.tour-nav{display:flex;gap:9px;align-items:center}
.tour-dots{display:flex;gap:5px;margin-left:auto}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.tour-dots i.on{background:var(--accent)}

@media (max-width:980px){.layout{grid-template-columns:1fr}.rail{overflow:visible}.viewnav{order:3;width:100%}}