:root{
  color-scheme:dark;
  --bg:#05080c;
  --panel:#0a1218f2;
  --panel-solid:#0c151c;
  --line:#1e3a44;
  --line-hot:#3de0d088;
  --cyan:#5ef0e0;
  --cyan-dim:#2a9a8e;
  --red:#ff6b6b;
  --amber:#f0c36a;
  --green:#6dffb0;
  --text:#e8f7f4;
  --muted:#7f9aa3;
  --quiet:#4f6a73;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"DIN Alternate","Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;
  --shadow:0 0 0 1px #5ef0e014,0 18px 50px #000c;
  font-family:var(--sans);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden}
body{
  background:
    radial-gradient(800px 360px at 10% -8%,#0d3a3855,transparent 55%),
    radial-gradient(700px 320px at 90% 0%,#3a152055,transparent 50%),
    linear-gradient(180deg,#070b10,#05080c 40%,#081018);
  overflow-x:hidden;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
i.zh, .zh{
  font-style:normal;font-family:var(--sans);font-size:.78em;font-weight:500;
  letter-spacing:0;color:var(--quiet);opacity:.9;margin-left:.35em;
}
h1 .zh, .eyebrow .zh{display:inline;font-size:.55em;letter-spacing:.04em;vertical-align:middle}
.kpi p .zh, .kpi-head .zh{font-size:.85em}

.fx-grid{
  pointer-events:none;position:fixed;inset:0;z-index:0;opacity:.22;
  background-image:
    linear-gradient(#5ef0e012 1px,transparent 1px),
    linear-gradient(90deg,#5ef0e012 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 78%);
}
.fx-scan{
  pointer-events:none;position:fixed;left:0;right:0;top:-20%;height:18%;z-index:1;opacity:.35;
  background:linear-gradient(180deg,transparent,#5ef0e014 50%,transparent);
  animation:scan 11s linear infinite;
}
@keyframes scan{to{transform:translateY(620%)}}
@media(prefers-reduced-motion:reduce){.fx-scan{animation:none}}

.app{
  position:relative;z-index:2;height:100vh;max-height:100vh;display:flex;flex-direction:column;
  padding:10px 12px 6px;gap:8px;overflow:hidden;
}

/* HUD frame corners */
.hud-frame{position:relative;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.hud-frame:before,.hud-frame:after{
  content:"";position:absolute;width:12px;height:12px;border:1px solid var(--cyan);pointer-events:none;opacity:.75;
}
.hud-frame:before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hud-frame:after{top:-1px;right:-1px;border-left:0;border-bottom:0}
.hud-frame > .hud-br:before,.rail.hud-frame:after{/* noop */}
.topbar.hud-frame,.kpi.hud-frame,.rail.hud-frame,.agent-stage.hud-frame,.panel.hud-frame,.campus-view.hud-frame{
  border-radius:2px;
}
.kpi.hud-frame:before,.kpi.hud-frame:after,
.panel.hud-frame:before,.panel.hud-frame:after{width:8px;height:8px}

.topbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;
  background:linear-gradient(180deg,#0d1a22f0,#0a1218f0);
}
.brand{display:flex;align-items:center;gap:9px;min-width:200px}
.brand-mark{
  width:34px;height:34px;display:grid;place-items:center;font-weight:800;font-size:18px;
  border:1px solid var(--cyan);color:var(--cyan);
  box-shadow:inset 0 0 14px #5ef0e033,0 0 18px #5ef0e022;
}
.brand strong{display:block;font-size:13px;letter-spacing:.12em;font-weight:700}
.brand em{font-style:normal;color:var(--cyan);font-weight:500}
.brand small{display:block;margin-top:3px;font-size:9px;letter-spacing:.14em;color:var(--muted);font-family:var(--mono)}

.pipeline{
  list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:0;flex:1;min-width:280px;
}
.pipeline li{
  position:relative;display:flex;align-items:center;gap:5px;padding:6px 10px 6px 8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--quiet);
}
.pipeline li span{color:var(--cyan-dim)}
.pipeline li.on{color:var(--muted)}
.pipeline li.live{color:var(--cyan);text-shadow:0 0 10px #5ef0e066}
.pipeline li:not(:last-child):after{
  content:"";width:18px;height:1px;background:linear-gradient(90deg,var(--line-hot),transparent);margin-left:2px;
}
.pipeline li.live:before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);margin-right:2px;
}

.sync-strip{
  display:flex;align-items:center;gap:8px;padding:6px 10px;min-width:240px;flex:1;
  border:1px solid #1f4048;background:#061016;
}
.sync-dot,.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 3px #6dffb022,0 0 10px var(--green);animation:breath 2s ease-in-out infinite;
}
.sync-dot.paused,.pulse.paused{background:var(--amber);box-shadow:0 0 0 3px #f0c36a22;animation:none}
.sync-dot.ended,.pulse.ended{background:var(--quiet);box-shadow:none;animation:none}
.sync-dot.error{background:var(--red);box-shadow:0 0 0 3px #ff6b6b22;animation:none}
@keyframes breath{50%{box-shadow:0 0 0 6px #6dffb00a,0 0 14px var(--green)}}
.sync-copy strong{display:block;font-size:11px;font-family:var(--mono);letter-spacing:.06em}
.sync-copy small{display:block;margin-top:2px;font-size:10px;color:var(--muted);font-family:var(--mono)}
.sync-copy b{color:var(--cyan);font-weight:600}
.sync-sources{display:flex;gap:5px;margin-left:auto}
.src-pill{
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:3px 6px;
  border:1px solid #2a6a62;color:var(--cyan);background:#0a221f;
}
.src-pill.mes{border-color:#5a3a48;color:#ffb0b0;background:#1a1014}

.view-switch{display:flex;gap:3px;padding:3px;border:1px solid var(--line);background:#061016}
.view-btn{
  border:0;background:transparent;color:var(--quiet);padding:6px 10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
}
.view-btn.active{background:#0f2e2a;color:var(--cyan);box-shadow:inset 0 0 12px #5ef0e022}

.top-meta{display:flex;align-items:center;gap:8px;margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
.demo-badge{border:1px solid #5a4030;background:#1a140e;color:var(--amber);padding:4px 7px;letter-spacing:.1em}

/* KPI */
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kpi{
  padding:8px 10px 6px;overflow:hidden;
  background:linear-gradient(165deg,#0d1c24ee,#081218ee);
  border-top:2px solid var(--kpi,var(--cyan));
}
.kpi[data-kpi=q]{--kpi:#6aa8ff}
.kpi[data-kpi=c]{--kpi:var(--cyan)}
.kpi[data-kpi=d]{--kpi:var(--green)}
.kpi[data-kpi=risk]{--kpi:var(--amber)}
.kpi-head{display:flex;justify-content:space-between;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}
.kpi-head em{font-style:normal;color:var(--quiet);font-size:9px}
.kpi strong{
  display:block;margin:4px 0 2px;font-size:22px;line-height:1;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-shadow:0 0 18px #5ef0e022;
}
.kpi p{margin:0;font-size:11px;color:#c5ddd8}
.kpi small{display:block;margin-top:4px;font-size:10px;color:var(--quiet);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spark{display:block;width:100%;height:16px;margin-top:4px;opacity:.85}
.spark path{fill:none;stroke:var(--kpi,var(--cyan));stroke-width:1.4}

/* Workbench */
.workbench{
  flex:1;min-height:0;display:grid;gap:8px;
  grid-template-columns:minmax(250px,290px) minmax(0,1.15fr) minmax(240px,290px);
  overflow:hidden;align-items:stretch;
}
.rail,.side,.agent-stage{min-height:0;height:100%;max-height:100%;position:relative}
.agent-stage{
  display:flex;flex-direction:column;overflow:hidden;min-height:0;
  padding:10px 12px 8px;z-index:1;
}
.rail{
  display:flex;flex-direction:column;overflow:hidden;z-index:3;
  background:linear-gradient(180deg,#0b151ce8,#081018ee);
  isolation:isolate;
}
.rail-block{padding:8px 10px;border-bottom:1px solid #163038;flex:none}
.rail-block:last-child{border-bottom:0}
.rail-block.grow{flex:1 1 auto;min-height:160px;display:flex;flex-direction:column}
.rail-top .role-hint{margin:4px 0 6px;font-size:10px}
.rail-filters{margin-top:2px}
.stream-rail{padding-top:4px;padding-bottom:4px;min-height:180px}
.signals-compact{max-height:120px;overflow:hidden}
.signals-compact .insights{max-height:72px}
.zone-compact{max-height:150px;overflow:auto}
.zone-compact .zone-breakdown{max-height:40px;overflow:auto;margin-top:4px}
.zone-compact .zone-summary p{display:none}

/* Left vertical flowing event nodes */
.flow-list{
  position:relative;flex:1;min-height:0;overflow:auto;padding:2px 0 2px 2px;
  scrollbar-color:#2a5a62 #061016;
}
.flow-list:before{
  content:"";position:absolute;left:9px;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,transparent,#2a6a62 8%,#2a6a62 92%,transparent);
  box-shadow:0 0 8px #5ef0e033;
}
.flow-node{
  position:relative;display:grid;grid-template-columns:18px 1fr;gap:8px;width:100%;
  border:0;background:transparent;text-align:left;padding:7px 6px 7px 0;color:var(--text);
}
.flow-node:hover .flow-body{border-color:var(--cyan-dim);background:#0c2228;box-shadow:0 0 14px #5ef0e014}
.flow-dot{
  width:11px;height:11px;margin:4px 0 0 4px;border-radius:50%;border:1px solid var(--cyan);
  background:#0a181e;box-shadow:0 0 8px #5ef0e066;z-index:1;
}
.flow-node.mes .flow-dot{border-color:var(--red);box-shadow:0 0 8px #ff6b6b55}
.flow-node.fresh .flow-dot{animation:pulse-dot 1.2s ease-out 1}
@keyframes pulse-dot{0%{transform:scale(1);box-shadow:0 0 0 0 #5ef0e088}70%{transform:scale(1.35);box-shadow:0 0 0 8px #5ef0e000}100%{transform:scale(1)}}
.flow-body{
  border:1px solid #1a3038;background:#08141a;padding:6px 8px;min-width:0;
}
.flow-top{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--muted)}
.flow-top time{color:var(--cyan);font-variant-numeric:tabular-nums}
.flow-top .src{color:var(--quiet)}
.flow-node.mes .flow-top .src{color:#ffb0b0}
.flow-body strong{
  display:block;margin-top:3px;font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.flow-body small{
  display:block;margin-top:2px;font-family:var(--mono);font-size:9px;color:var(--quiet);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.block-label{
  display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--cyan);font-weight:700;
}
.block-label.tight{margin-bottom:4px}
.block-label b,.block-label small{font-weight:500;color:var(--amber);letter-spacing:.04em}
.block-label small{color:var(--muted)}

.role-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.role-tab{
  border:1px solid var(--line);background:#061016;padding:7px 4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);
}
.role-tab.active{border-color:var(--cyan-dim);background:#0d2a26;color:var(--cyan);box-shadow:0 0 12px #5ef0e01a}
.role-hint{margin:8px 0 0;font-size:11px;line-height:1.45;color:var(--muted)}

.insights{display:grid;gap:6px;overflow:auto;min-height:0;flex:1}
.insight{
  display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;
  border:1px solid #234048;background:#08161c;padding:8px;color:var(--text);
}
.insight:hover{border-color:var(--cyan-dim);background:#0c2228;box-shadow:0 0 16px #5ef0e014}
.insight-symbol{
  width:20px;height:20px;flex:none;display:grid;place-items:center;
  border:1px solid #6a4030;background:#1a120e;color:var(--amber);font-family:var(--mono);font-size:11px;
}
.insight-body{flex:1;min-width:0}
.insight-body strong{display:block;font-size:12px;font-weight:650;line-height:1.3}
.insight-body span{display:block;margin-top:3px;font-size:10px;color:var(--muted);font-family:var(--mono);line-height:1.35}
.insight-arrow{color:var(--cyan);font-family:var(--mono);font-size:12px}
.empty{font-size:11px;line-height:1.5;color:var(--muted);font-family:var(--mono)}

.zone-summary{display:flex;justify-content:space-between;gap:8px}
.zone-summary h3{margin:0 0 3px;font-size:13px}
.zone-summary p{margin:0;font-size:10px;color:var(--muted);line-height:1.4;max-width:130px;font-family:var(--mono)}
.zone-amount{text-align:right}
.zone-amount small{display:block;font-size:9px;color:var(--quiet);font-family:var(--mono);letter-spacing:.1em}
.zone-amount strong{display:block;margin-top:3px;font-size:16px;color:var(--cyan)}
.zone-breakdown{display:grid;gap:4px;margin-top:8px}
.zone-breakdown-row{display:flex;justify-content:space-between;gap:6px;font-size:10px;color:var(--muted);font-family:var(--mono)}
.zone-breakdown-row span:last-child{color:#d4f4ee}
.zone-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:10px 0 6px}
.zone-chip{
  border:1px solid var(--line);background:#061016;padding:5px 2px;
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--muted);
}
.zone-chip.active{border-color:var(--cyan-dim);color:var(--cyan);background:#0d2a26}
.ghost-btn{
  width:100%;border:1px solid #2a6a62;background:#0a221f;color:var(--cyan);
  padding:8px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-align:left;
}
.ghost-btn:hover{background:#103832;box-shadow:0 0 16px #5ef0e022}

.status-matrix{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.status-matrix i{
  display:block;aspect-ratio:1;border:1px solid #1a3038;background:#0a141a;
}
.status-matrix i.ok{background:#1a4a3a;border-color:#2a7a62;box-shadow:0 0 6px #6dffb033}
.status-matrix i.warn{background:#4a3820;border-color:#8a6a30;box-shadow:0 0 6px #f0c36a33}
.status-matrix i.bad{background:#4a2020;border-color:#8a3030;box-shadow:0 0 6px #ff6b6b33}

/* Agent */
.agent-stage{
  background:
    radial-gradient(500px 220px at 70% 0%,#12383a44,transparent 60%),
    linear-gradient(180deg,#0d1a22f5,#081218f8);
}
.stage-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:6px;flex:none}
.stage-head.compact h1{font-size:16px;letter-spacing:.08em}
.eyebrow{margin:0 0 3px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--cyan)}
.stage-head h1{
  margin:0;font-size:18px;font-weight:700;letter-spacing:.06em;
  text-shadow:0 0 24px #5ef0e033;
}
.mode-pill{
  flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--cyan);
  border:1px solid #2a6a62;background:#0a221f;padding:5px 9px;
}

.ask-dock{
  flex:none;order:0;margin-bottom:8px;padding:8px;border:1px solid #234848;
  background:linear-gradient(180deg,#0d2428ee,#08161cee);box-shadow:0 0 24px #5ef0e014;
}
.ask-dock .prompt-row{margin-bottom:6px}
.ask-dock .chat-form{margin-top:0}

.graph-panel{
  border:1px solid #1e3a44;background:#061016;
  padding:8px 10px 4px;margin-bottom:8px;flex:none;overflow:hidden;
}
.agent-graph{width:100%;height:150px;display:block}
.agent-graph .agent-zone{
  fill:#5ef0e00d;stroke:#5ef0e055;stroke-width:1;stroke-dasharray:5 4;
}
.agent-graph .agent-zone-label{
  fill:var(--cyan);font-family:var(--mono);font-size:11px;letter-spacing:.14em;font-weight:700;
}
.agent-graph .agent-zone-zh{
  fill:var(--quiet);font-family:var(--sans);font-size:9px;
}
.agent-graph .link-base{stroke:#1c3a42;stroke-width:1.3;fill:none;opacity:.9}
.agent-graph .link-trail{
  fill:none;stroke-width:2.2;stroke-linecap:round;filter:url(#softGlow);
  stroke-opacity:.35;
}
.agent-graph .node-core{
  fill:#0a181e;stroke:var(--cyan);stroke-width:1.4;
}
.agent-graph .node-core.erp{stroke:#6aa8ff}
.agent-graph .node-core.mes{stroke:var(--red)}
.agent-graph .node-core.rule{stroke:var(--amber)}
.agent-graph .node-core.trace,.agent-graph .node-core.bus{stroke:var(--cyan)}
.agent-graph .node-core.ask{
  fill:#0d2a26;stroke:var(--cyan);
  filter:drop-shadow(0 0 8px #5ef0e088);
  animation:ask-breathe 2s ease-in-out infinite;
}
@keyframes ask-breathe{50%{filter:drop-shadow(0 0 14px #5ef0e0cc)}}
.agent-graph .node-label{fill:var(--muted);font-size:10px;font-family:var(--mono);letter-spacing:.1em}
.agent-graph .node-zh{fill:var(--quiet);font-size:8px;font-family:var(--sans)}
.agent-graph .node-halo{fill:url(#nodeGlow);opacity:.4}
.agent-graph .packet{pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .agent-graph .node-core.ask,.agent-graph .packet animate,.agent-graph .link-trail animate{animation:none!important}
}

.prompt-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.prompt{
  border:1px solid #234048;background:#08161c;color:#cfe8e4;padding:5px 9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
}
.prompt:hover{border-color:var(--cyan-dim);color:var(--cyan);box-shadow:0 0 12px #5ef0e01a}

.chat-messages{
  flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;
  padding:2px 0 4px;scrollbar-color:#2a5a62 #061016;
}
.message{
  max-width:min(94%,640px);padding:10px 12px;font-size:12px;line-height:1.5;
  border:1px solid #234048;
}
.message.welcome,.message.agent{align-self:flex-start;background:#08161c;color:#e4f4f0}
.message.user{
  align-self:flex-end;background:#0d2a26;border-color:#2a6a62;color:#e8fff8;font-family:var(--mono);
}
.message strong{display:block;font-size:12px;font-weight:700;margin-bottom:5px;font-family:var(--mono);letter-spacing:.06em;color:var(--cyan)}
.message p{margin:0}
.answer-block{margin-top:8px}
.answer-label{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--cyan);margin-bottom:4px;
}
.agent-metrics{display:flex;flex-wrap:wrap;gap:5px}
.agent-metrics span{
  font-size:11px;font-family:var(--mono);background:#061016;border:1px solid #234048;padding:5px 7px;color:var(--muted);
}
.agent-metrics b{color:var(--text);font-weight:700}
.evidence{display:grid;gap:4px}
.evidence-row{
  display:flex;gap:8px;align-items:flex-start;font-size:11px;color:var(--muted);
  padding:5px 7px;background:#061016;border:1px solid #1e3a44;font-family:var(--mono);
}
.evidence-row code{flex:none;color:var(--cyan);font-size:10px}
.next{
  font-size:11px;color:#d8f0c8;background:#142018;border:1px solid #3a5a40;padding:7px 9px;font-family:var(--mono);
}
.answer-foot{margin-top:7px;font-size:10px;color:var(--quiet);font-family:var(--mono)}

.chat-form{
  display:flex;align-items:center;gap:6px;margin-top:6px;padding:6px 8px;
  border:1px solid #2a6a62;background:#061016;box-shadow:inset 0 0 20px #5ef0e00a;
}
.prompt-prefix{color:var(--cyan);font-family:var(--mono);font-weight:700}
.chat-form input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);
  padding:8px 4px;font-size:13px;font-family:var(--mono);
}
.chat-form input::placeholder{color:#4f6a73}
.chat-form button{
  border:1px solid var(--cyan);background:linear-gradient(180deg,#1a4a44,#0f2e2a);
  color:var(--cyan);font-family:var(--mono);font-weight:700;letter-spacing:.12em;padding:8px 14px;font-size:11px;
}
.chat-form button:hover{box-shadow:0 0 18px #5ef0e044}
.disclaimer{margin:6px 2px 0;font-size:9px;color:var(--quiet);font-family:var(--mono);letter-spacing:.08em}

/* Side */
.side{display:flex;flex-direction:column;gap:8px;background:transparent;border:0;box-shadow:none;overflow:hidden}
.panel{padding:10px 12px;display:flex;flex-direction:column;min-height:0;background:linear-gradient(165deg,#0c1820ee,#081218ee);overflow:hidden}
.chart-panel{flex:1;min-height:0;overflow:auto}
.stream-panel{flex:none}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.panel-kicker{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--cyan)}
.panel-head h2{margin:3px 0 0;font-size:13px;letter-spacing:.08em;font-weight:650}
.panel-head>span{font-size:10px;color:var(--quiet);font-family:var(--mono);white-space:nowrap}

.chart-area{position:relative;height:72px;margin:2px 0 6px}
.chart-grid{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  font-size:9px;color:var(--quiet);font-family:var(--mono);
}
.chart-grid:after{
  content:"";position:absolute;inset:0 0 0 26px;
  background:repeating-linear-gradient(to bottom,#1e3a4455 0 1px,transparent 1px 32px);
}
.chart-area svg{position:absolute;left:28px;top:0;width:calc(100% - 28px);height:100%;overflow:visible}

.wave-row{display:grid;grid-template-columns:1.2fr .8fr;gap:8px;border-top:1px solid #163038;padding-top:8px}
.wave{width:100%;height:56px;display:block;background:#061016;border:1px solid #1e3a44}
.heat-map{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;height:56px;align-content:stretch}
.heat-map i{display:block;min-height:8px;background:#0a181e;border:1px solid #122830}
.heat-map i.l1{background:#0d2a26}
.heat-map i.l2{background:#1a4a42;box-shadow:0 0 4px #5ef0e022}
.heat-map i.l3{background:#2a7a6a;box-shadow:0 0 6px #5ef0e044}
.heat-map i.l4{background:#ff6b6b88;box-shadow:0 0 6px #ff6b6b33}

.mini-charts{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;margin-top:8px}
.material-mini{display:flex;align-items:center;gap:8px}
.matrix-side .status-matrix{grid-template-columns:repeat(8,1fr)}
.side-note{margin:8px 0 0;font-size:10px;line-height:1.45;color:var(--quiet);font-family:var(--mono)}
.side-note .zh{display:block;margin:0 0 4px;margin-left:0}
.donut{
  width:52px;height:52px;flex:none;border-radius:50%;background:conic-gradient(var(--cyan) 0 100%);
  display:grid;place-items:center;box-shadow:0 0 16px #5ef0e022;
}
.donut>div{
  width:34px;height:34px;border-radius:50%;background:#081218;display:grid;align-content:center;text-align:center;
}
.donut small{font-size:8px;color:var(--quiet);font-family:var(--mono)}
.donut strong{font-size:9px;white-space:nowrap;font-family:var(--mono)}
.material-mini-text span{display:block;font-size:9px;color:var(--quiet);font-family:var(--mono);letter-spacing:.1em}
.material-mini-text strong{display:block;margin-top:3px;font-size:11px;line-height:1.3}
.material-bars{display:grid;gap:4px;margin-top:8px;max-height:72px;overflow:auto}
.mat-row{display:grid;grid-template-columns:64px 1fr 40px;gap:5px;align-items:center;font-size:10px;color:var(--muted);font-family:var(--mono)}
.mat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mat-track{height:4px;background:#061016;overflow:hidden}
.mat-fill{height:100%;background:linear-gradient(90deg,var(--cyan),#6aa8ff)}
.mat-val{text-align:right;color:#d4f4ee}

.stream-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.stream-state{display:flex;align-items:center;gap:6px}
.stream-state strong{font-size:10px;font-family:var(--mono);letter-spacing:.08em}
#progress{margin-left:auto;font-size:10px;color:var(--muted);font-family:var(--mono);font-variant-numeric:tabular-nums}
.stream-toolbar select,.stream-toolbar button,.filter-btn{
  border:1px solid #234048;background:#061016;padding:4px 6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:#cfe8e4;
}
.stream-toolbar button:hover,.filter-btn:hover{border-color:var(--cyan-dim);color:var(--cyan)}
.progress-track{height:2px;background:#163038;margin-bottom:6px}
.progress-track div{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 8px #5ef0e066;transition:width .25s}
.stream-filters{display:flex;gap:4px;margin-bottom:6px}
.filter-btn.active{border-color:var(--cyan-dim);background:#0d2a26;color:var(--cyan)}
.event-list{flex:1;min-height:0;overflow:auto;display:grid;gap:4px;scrollbar-color:#2a5a62 #061016}
.event-item{
  display:flex;align-items:center;gap:6px;width:100%;text-align:left;
  border:1px solid #1e3a44;background:#08161c;padding:6px 7px;color:var(--text);
}
.event-item:hover{border-color:var(--cyan-dim);box-shadow:0 0 12px #5ef0e014}
.source-pill{
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--cyan);
  border:1px solid #2a6a62;padding:2px 4px;background:#0a221f;
}
.source-pill.mes{color:#ffb0b0;border-color:#5a3a48;background:#1a1014}
.event-main{min-width:0;flex:1}
.event-main strong{display:block;font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-main small{display:block;margin-top:2px;font-size:9px;color:var(--quiet);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.event-time{font-size:10px;color:var(--muted);font-family:var(--mono)}

/* Inventory view */
.inventory-view{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow:hidden;
}
.inv-head{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--line);background:linear-gradient(180deg,#0d1a22f0,#0a1218f0);
}
.inv-head h1{margin:0;font-size:16px;letter-spacing:.08em;font-weight:700}
.inv-note{margin:5px 0 0;font-size:11px;line-height:1.45;color:var(--muted);max-width:62ch}
.inv-playback{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;color:var(--muted);
}
.inv-playback select,.inv-playback button{
  border:1px solid #234048;background:#061016;padding:5px 7px;
  font-family:var(--mono);font-size:10px;color:#cfe8e4;
}
.inv-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:none}
.inv-kpi-row .kpi[data-kpi=in]{--kpi:var(--cyan)}
.inv-kpi-row .kpi[data-kpi=out]{--kpi:var(--amber)}
.inv-columns{
  flex:1;min-height:0;display:grid;gap:8px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.inv-panel{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  padding:10px;background:linear-gradient(165deg,#0c1820ee,#081218ee);
}
.inv-list{
  flex:1;min-height:0;overflow:auto;display:grid;gap:4px;align-content:start;
  scrollbar-color:#2a5a62 #061016;
}
.inv-row{
  display:grid;grid-template-columns:44px 1fr auto;gap:6px;align-items:center;width:100%;
  text-align:left;border:1px solid #1e3a44;background:#08161c;padding:6px 7px;color:var(--text);
}
.inv-row:hover{border-color:var(--cyan-dim);box-shadow:0 0 12px #5ef0e014}
.inv-row time{font-family:var(--mono);font-size:10px;color:var(--cyan)}
.inv-row strong{display:block;font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-row small{display:block;margin-top:2px;font-family:var(--mono);font-size:9px;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-row .amt{font-family:var(--mono);font-size:10px;color:#d4f4ee;white-space:nowrap}
.inv-stock{flex:1;min-height:0;overflow:auto;display:grid;gap:4px;align-content:start}
.inv-stock-row{
  display:grid;grid-template-columns:1.1fr .7fr .7fr .7fr;gap:6px;align-items:center;
  border:1px solid #1e3a44;background:#08161c;padding:7px 8px;font-size:11px;
}
.inv-stock-row header{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--quiet)}
.inv-stock-row .name{font-weight:650}
.inv-stock-row .name small{display:block;font-weight:500;font-family:var(--mono);font-size:9px;color:var(--quiet);margin-top:2px}
.inv-stock-row .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:#d4f4ee}
.inv-agent{
  position:relative;flex:none;display:flex;flex-direction:column;
  height:240px;min-height:160px;max-height:min(70vh,640px);
  padding:14px 12px 10px;
  background:linear-gradient(180deg,#0d1a22f5,#081218f8);
  overflow:hidden;
}
.inv-resize{
  position:absolute;top:0;left:0;right:0;height:10px;cursor:ns-resize;z-index:5;
  touch-action:none;
}
.inv-resize:before{
  content:"";position:absolute;left:50%;top:3px;transform:translateX(-50%);
  width:44px;height:3px;border-radius:2px;background:#5ef0e066;
  box-shadow:0 0 8px #5ef0e033;
}
.inv-resize:hover:before,.inv-agent.resizing .inv-resize:before{background:var(--cyan);box-shadow:0 0 10px #5ef0e088}
.inv-agent-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:6px;flex:none}
.inv-agent .stage-sub{margin:4px 0 0;font-size:11px;color:var(--muted);font-family:var(--mono)}
.inv-agent .prompt-row{flex:none}
.inv-agent .chat-form{flex:none}
.inv-chat{flex:1;min-height:48px;max-height:none;overflow:auto}
@media(max-width:1100px){
  .inv-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv-columns{grid-template-columns:1fr;max-height:none;overflow:auto}
  .inventory-view{overflow:auto}
}
@media(max-width:820px){
  .inv-kpi-row{grid-template-columns:1fr 1fr}
  .view-switch .zh{display:none}
}

/* Campus */
.campus-view{flex:1;min-height:480px;overflow:hidden;background:#061016}
.campus-stage{position:relative;width:100%;height:min(68vh,720px);min-height:440px}
.campus-image{width:100%;height:100%;object-fit:contain;object-position:center top;display:block;filter:saturate(.85) brightness(.82) contrast(1.08)}
.campus-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,#05080caa 0%,transparent 30%,transparent 68%,#05080ccc 100%),
    repeating-linear-gradient(0deg,transparent 0 3px,#5ef0e008 3px 4px);
}
.map-zones{position:absolute;inset:0}
.zone{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:22px;height:22px;border:0;background:none;padding:0;color:var(--cyan);
}
.zone-pin{
  position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;
  box-shadow:0 0 0 4px #5ef0e022,0 0 16px #5ef0e088;
}
.zone-pin:after{content:"";position:absolute;inset:6px;border-radius:50%;background:#e8fff8;box-shadow:0 0 8px var(--cyan)}
.zone.production{color:var(--amber)}
.zone.active .zone-pin{box-shadow:0 0 0 6px #5ef0e033,0 0 22px #5ef0e0cc}
.zone-card{
  position:absolute;left:28px;top:-12px;min-width:110px;padding:6px 8px;text-align:left;
  border:1px solid #2a6a62;background:#061016dd;font-family:var(--mono);white-space:nowrap;
}
.zone-card b{display:block;font-size:10px;letter-spacing:.08em;color:var(--cyan)}
.zone-card small{display:block;margin-top:2px;font-size:10px;color:#cfe8e4}
.zone[data-zone=east] .zone-card{left:auto;right:28px}
.campus-caption{
  position:absolute;left:14px;bottom:14px;max-width:320px;padding:12px 14px;
  border:1px solid #234048;background:#061016ee;
}
.campus-caption strong{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--cyan);margin-bottom:5px}
.campus-caption p{margin:0 0 8px;font-size:11px;line-height:1.45;color:var(--muted)}

.app-foot{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--quiet);padding:2px 2px 4px}

dialog{
  width:min(560px,calc(100vw - 28px));border:1px solid #2a6a62;background:#0a151c;color:var(--text);
  border-radius:0;padding:0;box-shadow:0 0 0 1px #5ef0e022,0 30px 80px #000c;
}
dialog::backdrop{background:#020508cc}
.dialog-head{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #163038}
.dialog-head h2{font-size:15px;margin:4px 0 0;font-family:var(--mono);letter-spacing:.06em}
.dialog-head button{
  width:28px;height:28px;border:1px solid #234048;background:#061016;color:var(--text);font-size:16px;
}
.detail-body{padding:8px 16px 16px;max-height:65vh;overflow:auto}
.detail-row{
  display:grid;grid-template-columns:130px 1fr;gap:8px;border-bottom:1px solid #163038;padding:7px 0;
  font-size:11px;font-family:var(--mono);
}
.detail-row span{color:var(--muted)}
.detail-row strong{font-weight:500;overflow-wrap:anywhere}

@media(max-width:1320px){
  .workbench{grid-template-columns:230px minmax(0,1fr) 280px}
  .pipeline{min-width:220px}
  .kpi strong{font-size:22px}
}
@media(max-width:1100px){
  .pipeline{display:none}
  .workbench{grid-template-columns:210px minmax(0,1fr)}
  .side{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr .9fr;gap:10px;min-height:0}
  .rail,.agent-stage{min-height:480px}
}
@media(max-width:820px){
  .app{padding:8px}
  .sync-strip{min-width:100%}
  .top-meta #clock{display:none}
  .brand small{display:none}
  .kpi-row{grid-template-columns:1fr 1fr}
  .workbench{grid-template-columns:1fr}
  .rail{order:2;min-height:0}
  .agent-stage{order:1;min-height:400px}
  .side{order:3;grid-template-columns:1fr}
  .stage-head h1{font-size:18px}
  .zone-card{display:none}
  .zone.active .zone-card{display:block}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}