:root{
  --bg:#070b14; --panel:#0d1424; --panel2:#111a2e; --line:#1c2942;
  --blue:#3b82f6; --cyan:#22d3ee; --green:#34d399; --amber:#f59e0b;
  --text:#e2e8f0; --dim:#8296b3; --dim2:#5c6f8c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.6 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
@media (max-width:1180px){ body{zoom:.82} }

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex; align-items:center; gap:20px;
  padding:12px 22px; border-bottom:1px solid var(--line); background:var(--panel);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#06101f;font-weight:800;font-size:13px;letter-spacing:.5px;
}
.brand h1{margin:0;font-size:17px;letter-spacing:.3px}
.brand p{margin:0;font-size:12px;color:var(--dim)}
.actions{margin-left:auto;display:flex;gap:9px}
.btn{
  padding:9px 16px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font-size:13px;cursor:pointer;
  transition:.15s; font-family:inherit;
}
.btn:hover{border-color:var(--blue);color:#fff}
.btn.primary{background:linear-gradient(135deg,var(--blue),#1d4ed8);border-color:#2563eb;font-weight:600}
.btn.primary:hover{filter:brightness(1.15)}
.btn.ghost{background:transparent;color:var(--dim)}
.btn:disabled{opacity:.45;cursor:default}
.modebadge{
  font-size:11px;letter-spacing:.12em;padding:5px 11px;border-radius:5px;
  border:1px solid var(--line);color:var(--dim2);font-weight:600;
}
.modebadge[data-mode="preset"]{color:var(--amber);border-color:#5c4415;background:rgba(245,158,11,.09)}
.modebadge[data-mode="live"]{color:var(--green);border-color:#1c5544;background:rgba(52,211,153,.09)}

/* ---------- 阶段条 ---------- */
.pipeline{
  display:flex;gap:6px;padding:9px 22px;background:#0a1020;border-bottom:1px solid var(--line);
}
.pipeline span{
  flex:1;position:relative;text-align:center;padding:7px 4px;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--dim2);
  background:#0c1424;border:1px solid transparent;transition:.25s;
}
.pipeline span i{display:block;font-style:normal;font-size:10px;letter-spacing:0;font-weight:400;opacity:.75}
.pipeline span.on{color:#eaf6ff;border-color:var(--cyan);background:rgba(34,211,238,.12);box-shadow:0 0 16px rgba(34,211,238,.18)}
.pipeline span.done{color:var(--green);border-color:#1c5544;background:rgba(52,211,153,.08)}

/* ---------- 主体 ---------- */
main{flex:1;display:grid;grid-template-columns:302px minmax(0,1fr) 336px;gap:14px;padding:14px 22px;min-height:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;min-height:0;display:flex;flex-direction:column}
.panel h2{margin:0 0 10px;font-size:12px;letter-spacing:.16em;color:var(--dim);font-weight:700}

/* 左：摄像头 */
.camwrap{position:relative;aspect-ratio:4/3;background:#05080f;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.camwrap video,.camwrap canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camwrap video{opacity:.85}
.camhint{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:var(--dim2);font-size:12px;padding:16px;line-height:1.9;
}
.readout{margin:12px 0 0;display:grid;gap:7px}
.readout div{display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 9px;background:#0a1120;border:1px solid #16223a;border-radius:6px}
.readout dt{color:var(--dim2);font-size:11px;margin:0}
.readout dd{margin:0;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cyan)}
.readout dd.warn{color:var(--amber)}
.note{margin:10px 0 0;font-size:11px;color:var(--dim2);line-height:1.7}

/* 中：舞台 */
.stage{padding:14px 16px}
.stagehead{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.stagehead h2{margin:0}
.task{font-size:12px;color:var(--dim)}
#svg{flex:1;width:100%;min-height:0}
.svglabel{fill:var(--dim2);font-size:10px;letter-spacing:.14em;font-weight:600}
.svglabel.mid{text-anchor:middle}
.hudtext{fill:var(--dim2);font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.1em}
.hudtext.ok{fill:var(--green)} .hudtext.warn{fill:var(--amber)} .hudtext.act{fill:var(--cyan)}

.timeline{display:flex;align-items:center;gap:12px;margin-top:6px;padding-top:11px;border-top:1px solid var(--line)}
.tlabel{font-size:11px;letter-spacing:.14em;color:var(--dim2);font-weight:700;white-space:nowrap}
.chips{display:flex;gap:6px;flex-wrap:wrap;min-height:24px;align-items:center}
.chip{
  font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;
  padding:5px 9px;border-radius:5px;background:#12203a;color:#9fd6ff;border:1px solid #23375c;
  animation:pop .28s ease-out;
}
.chip.ok{background:rgba(52,211,153,.14);color:#7ff0c8;border-color:#1c5544}
@keyframes pop{from{opacity:0;transform:translateY(5px) scale(.9)}to{opacity:1}}

/* 右：故事 */
.story{gap:5px;overflow-y:auto}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin:0}
.card h3{margin:0 0 5px;font-size:12.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3 span{flex:none;
  font:800 10px/1 ui-monospace,Menlo,monospace;color:#06101f;background:var(--cyan);
  padding:4px 6px;border-radius:4px;
}
.card h3 em{margin-left:auto;font-style:normal;font-size:10px;color:var(--amber);
  border:1px solid #5c4415;padding:2px 6px;border-radius:4px;letter-spacing:.06em}
.card p{margin:0 0 5px;font-size:12px;color:#b8c8de;line-height:1.7}
.card p:last-child{margin-bottom:0}
.card b{color:#fff}
.card .proof{color:var(--cyan);font-size:12px;border-left:2px solid var(--cyan);padding-left:9px;margin-top:8px}
.card.hl{border-color:#2b5b8a;background:linear-gradient(160deg,rgba(59,130,246,.12),var(--panel2))}
.card.hl h3 span{background:var(--blue);color:#fff}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(245,158,11,.5)}100%{box-shadow:0 0 0 16px rgba(245,158,11,0)}}

.roadmap{display:flex;flex-wrap:wrap;gap:5px}
.rm{font-size:10.5px;color:var(--dim2);padding:5px 9px;border-radius:6px;
  background:#0a1120;border:1px solid #16223a;display:flex;gap:6px;align-items:baseline}
.rm b{color:var(--dim);font-size:11px;white-space:nowrap}
.rm.on{border-color:var(--cyan);color:#cfefff;background:rgba(34,211,238,.08)}
.rm.on b{color:var(--cyan)}

/* 底 */
.boundary{padding:9px 22px;border-top:1px solid var(--line);background:var(--panel);
  font-size:11px;color:var(--dim2);letter-spacing:.02em}

/* 教学问题：贴在时间线下方，和机械臂同屏，不跟故事卡抢位置 */
.teachbar{
  display:flex;align-items:baseline;gap:12px;margin-top:8px;padding:9px 12px;
  border-radius:8px;border:1px solid #4a3a12;background:rgba(245,158,11,.07);
}
.teachbar .tlabel{color:var(--amber);display:flex;align-items:center;gap:6px}
.teachbar .tlabel em{font-style:normal;font-size:10px;letter-spacing:.04em;
  border:1px solid #5c4415;padding:1px 5px;border-radius:4px;font-weight:600}
.teachbar p{margin:0;font-size:12.5px;color:#ffdfae;line-height:1.6}
.teachbar.fire{animation:flash .8s ease-out}

/* 故事主张：右栏第一眼看到的一句话 */
.lead{
  margin:0;padding:8px 12px;border-radius:9px;
  background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(34,211,238,.08));
  border:1px solid #2b5b8a;color:#eaf6ff;font-size:13px;font-weight:600;line-height:1.7;
}

/* 价值三条：紧排，不占行高 */
.pts{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.pts li{font-size:12px;line-height:1.6;color:#b8c8de;padding-left:10px;border-left:2px solid #2b5b8a}
.pts b{display:block;color:#eaf6ff;font-size:12px;margin-bottom:1px}