/* ============================================================
 * 《炮兵指控通信》AI 教学智能体 · 学员端原型
 * 视觉层 —— 陆军迷彩 / 炮兵元素 / 零外部依赖，可完全离线运行
 * ============================================================ */

:root {
  --deep:      #131811;
  --base:      #1B2318;
  --panel:     #232D1E;
  --panel-2:   #2B3625;
  --line:      #3A4830;
  --line-soft: #2F3B27;

  --camo-a:    #3E4E32;
  --camo-b:    #2A3722;
  --camo-c:    #4C5B3B;
  --camo-d:    #1F2A19;

  --txt:       #E6EADF;
  --txt-2:     #A9B69A;
  --txt-3:     #74815F;

  --signal:    #C4D96B;   /* 信号黄绿 · 主强调 */
  --track:     #6FD3C4;   /* 弹道青 · 数据流 */
  --flare:     #E9A83C;   /* 照明弹橙 · 待巩固 */
  --fire:      #D9542B;   /* 火力红 · 薄弱／错误 */
  --steel:     #8FA3B8;   /* 钢蓝 · 教员人工 */

  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--sans);
  background: var(--deep);
  color: var(--txt);
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 陆军数码迷彩底纹：低分辨率画布放大成像素块 ---------- */
.camo-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  opacity: .82;
}
/* 压暗层，保证面板上的文字可读 */
.camo-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(11,15,9,.62), rgba(11,15,9,.88) 78%);
}
/* 军用地图网格 */
.camo-veil::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(196,217,107,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,217,107,.035) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* 炮管剪影水印 */
.howitzer-mark {
  position: fixed; right: -60px; bottom: -40px; width: 520px; height: 380px;
  z-index: 0; opacity: .05; pointer-events: none;
}

/* ============================================================
 * 顶栏
 * ============================================================ */
.topbar {
  position: relative; z-index: 10;
  height: 64px; flex: 0 0 64px;
  display: flex; align-items: center; gap: 22px;
  padding: 0 22px;
  background: linear-gradient(180deg, rgba(35,45,30,.96), rgba(27,35,24,.92));
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 34px; height: 34px; flex: 0 0 34px; }
.brand-txt h1 { font-size: 15px; font-weight: 700; letter-spacing: .5px; }
.brand-txt p  { font-size: 10px; color: var(--txt-3); letter-spacing: 2.4px; font-family: var(--mono); }

.topbar-div { width: 1px; height: 34px; background: var(--line); flex: 0 0 1px; }

/* 四关推进尺：射表刻度样式 */
.stage-ruler { display: flex; align-items: stretch; gap: 0; flex: 1; min-width: 0; height: 42px; }
.stage-cell {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 14px 0 18px;
  border: 1px solid var(--line-soft); border-right: none;
  background: rgba(19,24,17,.5);
  cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.stage-cell:hover { background: rgba(35,45,30,.65); }
.stage-cell.open { border-color: rgba(196,217,107,.45); }
.stage-cell:last-child { border-right: 1px solid var(--line-soft); }
/* 刻度齿 */
.stage-cell::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 11px);
}
.stage-cell .sc-no {
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 9px; color: var(--txt-3);
}
.stage-cell .sc-name { font-size: 12px; font-weight: 600; color: var(--txt-2); line-height: 1.25; }
.stage-cell .sc-meta { font-size: 9.5px; font-family: var(--mono); color: var(--txt-3); }

.stage-cell.passed { background: rgba(196,217,107,.07); }
.stage-cell.passed .sc-name { color: var(--signal); }
.stage-cell.passed .sc-meta { color: rgba(196,217,107,.6); }

.stage-cell.current {
  background: linear-gradient(180deg, rgba(233,168,60,.16), rgba(233,168,60,.05));
  border-color: rgba(233,168,60,.5);
}
.stage-cell.current .sc-name { color: var(--flare); }
.stage-cell.current .sc-meta { color: rgba(233,168,60,.75); }
.stage-cell.current::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--flare);
  animation: pulse-bar 2.2s ease-in-out infinite;
}
@keyframes pulse-bar { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.stage-cell.locked { opacity: .55; }
.stage-cell.locked:hover { opacity: .75; }

.topbar-user { flex: 0 0 auto; text-align: right; }
.topbar-user .tu-name { font-size: 12.5px; font-weight: 600; }
.topbar-user .tu-unit { font-size: 10px; color: var(--txt-3); font-family: var(--mono); }

/* ============================================================
 * 主体三栏
 * ============================================================ */
.shell { position: relative; z-index: 5; display: flex; flex-direction: column; height: 100vh; }
.body-row { flex: 1; display: flex; min-height: 0; }

/* ---------- 左：智能体调度台 ---------- */
.console {
  position: relative;
  flex: 0 0 268px; width: 268px;
  border-right: 1px solid var(--line);
  background: rgba(19,24,17,.72);
  display: flex; flex-direction: column; min-height: 0;
  overflow: hidden;
  transition: flex-basis .28s ease, width .28s ease, opacity .2s ease, border-color .2s;
}
.body-row.console-off .console {
  flex-basis: 0; width: 0; opacity: 0; border-right-color: transparent;
  pointer-events: none;
}
.console-hd {
  flex: 0 0 auto; padding: 11px 10px 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; gap: 6px;
}
.console-hd .ch-copy { flex: 1; min-width: 0; }
.console-hd .ch-t {
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--txt-2);
  display: flex; align-items: center; gap: 7px;
}
.console-hd .ch-s { font-size: 9px; color: var(--txt-3); font-family: var(--mono); margin-top: 2px; }
.console-hide {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border: 1px solid var(--line-soft); background: rgba(27,35,24,.7);
  color: var(--txt-3); font-size: 12px; line-height: 1; cursor: pointer;
  font-family: var(--mono); padding: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.console-hide:hover {
  color: var(--signal); border-color: rgba(196,217,107,.45);
  background: rgba(196,217,107,.08);
}

/* 收起后左侧细轨：点此展开 */
.console-rail {
  flex: 0 0 28px; width: 28px;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 0;
  border: none; border-right: 1px solid var(--line);
  background: rgba(19,24,17,.72); color: var(--txt-3);
  cursor: pointer; font-family: var(--mono);
  transition: background .15s, color .15s;
}
.console-rail:hover { background: rgba(43,54,37,.85); color: var(--signal); }
.body-row.console-off .console-rail { display: flex; }
.console-rail .cr-txt {
  writing-mode: vertical-rl; letter-spacing: 3px;
  font-size: 11px; font-weight: 600;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--track);
  box-shadow: 0 0 7px var(--track); animation: pulse-bar 1.6s ease-in-out infinite;
}

.console-body { flex: 1; overflow-y: auto; padding: 10px; position: relative; }
.console-body::-webkit-scrollbar { width: 5px; }
.console-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* 弹道数据流画布 */
.tracer-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: visible;
}

.tier-label {
  font-size: 9px; font-family: var(--mono); color: var(--txt-3);
  letter-spacing: 1.4px; margin: 4px 2px 6px;
  display: flex; align-items: center; gap: 7px;
}
.tier-label::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.tier-label:not(:first-child) { margin-top: 12px; }

.agent {
  position: relative; margin-bottom: 7px; padding: 8px 10px;
  border: 1px solid var(--line-soft); border-left: 2px solid var(--line);
  background: rgba(35,45,30,.62);
  cursor: pointer; transition: background .18s, border-color .18s, transform .18s;
}
.agent:hover { background: rgba(43,54,37,.9); transform: translateX(2px); }
.agent-hd { display: flex; align-items: center; gap: 7px; }
.agent-lamp {
  width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%;
  background: var(--txt-3); transition: background .25s, box-shadow .25s;
}
.agent-code {
  font-family: var(--mono); font-size: 9px; color: var(--txt-3);
  border: 1px solid var(--line); padding: 0 4px; flex: 0 0 auto; letter-spacing: .5px;
}
.agent-name { font-size: 11.5px; font-weight: 600; color: var(--txt-2); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-task {
  font-size: 10px; color: var(--txt-3); margin-top: 4px; line-height: 1.45;
  min-height: 15px; font-family: var(--mono);
}

.agent.aux { padding: 6px 10px; }
.agent.aux .agent-name { font-size: 11px; }
.agent.sel {
  border-color: rgba(196,217,107,.45);
  background: rgba(196,217,107,.1);
  box-shadow: inset 3px 0 0 var(--signal);
}
.agent.sel .agent-name { color: var(--signal); }

/* 三态：空闲 / 运算中 / 协同交互中 */
.agent.busy { border-left-color: var(--flare); background: rgba(233,168,60,.09); }
.agent.busy .agent-lamp { background: var(--flare); box-shadow: 0 0 8px var(--flare); animation: pulse-bar 1s infinite; }
.agent.busy .agent-name { color: var(--flare); }
.agent.busy .agent-task { color: rgba(233,168,60,.9); }

.agent.sync { border-left-color: var(--signal); background: rgba(196,217,107,.09); }
.agent.sync .agent-lamp { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.agent.sync .agent-name { color: var(--signal); }
.agent.sync .agent-task { color: rgba(196,217,107,.9); }

.console-ft {
  flex: 0 0 auto; padding: 9px 12px; border-top: 1px solid var(--line-soft);
  font-size: 9.5px; font-family: var(--mono); color: var(--txt-3);
  display: flex; justify-content: space-between;
}

/* ---------- 中：主内容 ---------- */
.main { flex: 1; min-width: 0; overflow-y: auto; padding: 10px 18px 48px; }
.main::-webkit-scrollbar { width: 7px; }
.main::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ============================================================
 * 情境条：课次 + 课前/课中/课后 + 课中细轨（sticky）
 * ============================================================ */
.ctx-chrome {
  position: sticky; top: 0; z-index: 35;
  margin: 0 0 12px;
  border: 1px solid var(--line-soft);
  background: rgba(19,26,17,.97);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
.ctx-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 10px; min-height: 40px;
}
.ctx-id { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 200px; }
.ctx-no {
  flex: 0 0 auto; padding: 2px 6px;
  border: 1px solid rgba(233,168,60,.5);
  font-family: var(--mono); font-size: 10px; color: var(--flare); letter-spacing: .6px;
}
.ctx-titles { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ctx-title {
  font-size: 14px; font-weight: 700; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctx-sub {
  font-size: 10px; font-family: var(--mono); color: var(--txt-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 课前/课中/课后：未选统一默色，仅 .on 高亮；宽度略放宽 */
.phase-seg {
  display: inline-flex; flex: 0 0 auto;
  border: 1px solid var(--line);
  background: rgba(15,19,13,.85);
}
.phase-seg-btn {
  min-width: 76px; padding: 6px 22px; border: 0;
  border-right: 1px solid var(--line-soft);
  background: transparent; color: var(--txt-3);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--sans);
  letter-spacing: .5px; text-align: center;
}
.phase-seg-btn:last-child { border-right: 0; }
.phase-seg-btn:hover { color: var(--txt-2); background: rgba(43,54,37,.45); }
.phase-seg-btn.on {
  color: var(--flare);
  background: rgba(233,168,60,.16);
  box-shadow: inset 0 -2px 0 var(--flare);
}

.ctx-away-tag {
  font-family: var(--mono); font-size: 10px; color: var(--flare);
  border: 1px solid rgba(233,168,60,.4); padding: 3px 8px;
}
.ctx-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.ctx-link {
  border: 0; background: transparent; color: var(--txt-3);
  font-family: var(--mono); font-size: 10px; cursor: pointer; padding: 2px 4px;
}
.ctx-link:hover, .ctx-link[aria-expanded="true"] { color: var(--track); }
.ctx-graph {
  padding: 5px 10px;
  border: 1px solid rgba(196,217,107,.4);
  background: rgba(196,217,107,.08);
  color: var(--signal); font-family: var(--mono); font-size: 11px;
  letter-spacing: .6px; cursor: pointer;
}
.ctx-graph:hover {
  border-color: var(--signal); background: rgba(196,217,107,.16);
}
.lt-switch {
  padding: 3px 8px;
  border: 1px solid rgba(111,211,196,.4); background: rgba(111,211,196,.08);
  color: var(--track); font-family: var(--mono); font-size: 10px; letter-spacing: .8px;
  cursor: pointer;
}
.lt-switch em { font-style: normal; color: var(--txt-3); margin-left: 4px; }
.lt-switch:hover, .lt-switch[aria-expanded="true"] {
  border-color: var(--track); background: rgba(111,211,196,.16);
}
.ctx-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 0 10px 7px;
  font-size: 10.5px; font-family: var(--mono); color: var(--txt-3);
  border-top: 1px solid rgba(47,59,39,.55);
}
.ctx-meta span { padding-top: 6px; }
.ctx-meta b { color: var(--txt-2); font-weight: 500; }

/* 课中细进度轨 */
.seg-rail {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 8px;
  border-top: 1px solid var(--line-soft);
  background: rgba(15,19,13,.55);
}
.seg-rail-track {
  flex: 1; min-width: 0;
  display: flex; align-items: stretch; gap: 0;
  position: relative;
}
.seg-rail-track::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: 50%;
  height: 1px; background: var(--line); transform: translateY(-8px); z-index: 0;
}
.seg-dot {
  position: relative; z-index: 1; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 2px 2px 0; border: 0; background: transparent;
  color: var(--txt-3); cursor: pointer; font: inherit;
}
.seg-dot .sd-mark {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(19,24,17,.95);
}
.seg-dot .sd-name {
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.seg-dot .sd-shell {
  font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--flare);
}
.seg-dot:hover .sd-name { color: var(--txt); }
.seg-dot.done .sd-mark { border-color: var(--track); background: var(--track); }
.seg-dot.done .sd-name { color: var(--track); }
.seg-dot.on .sd-mark {
  border-color: var(--flare); background: var(--flare);
  box-shadow: 0 0 0 3px rgba(233,168,60,.18);
}
.seg-dot.on .sd-name { color: var(--flare); font-weight: 700; }
.seg-rail-clock {
  flex: 0 0 auto; text-align: right;
  font-family: var(--mono); font-size: 10px; color: var(--txt-3);
  display: flex; flex-direction: column; gap: 1px; min-width: 88px;
}
.seg-rail-clock b { font-size: 15px; color: var(--flare); letter-spacing: .6px; }

.ctx-chrome .lesson-menu {
  position: absolute; right: 8px; top: calc(100% - 2px); left: auto; z-index: 40;
  width: min(420px, 92vw); max-height: 360px; overflow-y: auto;
  border: 1px solid rgba(111,211,196,.35);
  background: rgba(15,20,13,.98);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  padding: 8px 0 6px;
}
.lesson-menu[hidden] { display: none !important; }
.lm-hd {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 4px 12px 8px; font-size: 10.5px; font-family: var(--mono); color: var(--txt-3);
  border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
}
.lm-chap {
  padding: 8px 12px 4px; font-size: 10px; font-family: var(--mono);
  color: var(--flare); letter-spacing: .8px;
}
.lm-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; padding: 7px 12px; border: 0; border-left: 2px solid transparent;
  background: transparent; color: var(--txt-2); text-align: left; cursor: pointer;
  font-size: 12px;
}
.lm-item:hover { background: rgba(35,45,30,.7); }
.lm-item.on { border-left-color: var(--flare); color: var(--flare); background: rgba(233,168,60,.08); }
.lm-item.done .lm-st { color: var(--track); }
.lm-item.todo .lm-st { color: var(--txt-3); }
.lm-item.locked { opacity: .4; cursor: not-allowed; }
.lm-st { font-family: var(--mono); font-size: 10px; color: var(--txt-3); flex: 0 0 auto; }

.away-banner {
  padding: 14px 16px; margin-bottom: 12px;
  border: 1px solid var(--line); background: rgba(19,24,17,.85);
}
.away-banner.done { border-color: rgba(111,211,196,.35); }
.away-banner.todo { border-color: rgba(233,168,60,.35); }
.away-k { font-family: var(--mono); font-size: 10.5px; color: var(--txt-3); letter-spacing: 1px; }
.away-t { font-size: 16px; font-weight: 700; color: var(--txt); margin: 4px 0; }
.away-s { font-size: 12px; color: var(--txt-2); margin-bottom: 8px; }
.away-note { font-size: 12px; color: var(--txt-2); line-height: 1.55; }

/* 训/践轻切换（嵌在面板标题行） */
.ops-lite {
  display: inline-flex; border: 1px solid var(--line); margin-right: 6px;
}
.ops-lite-btn {
  padding: 3px 9px; border: 0; border-right: 1px solid var(--line-soft);
  background: transparent; color: var(--txt-3);
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: var(--sans);
}
.ops-lite-btn:last-child { border-right: 0; }
.ops-lite-btn:hover { color: var(--txt); }
.ops-lite-btn.on { color: var(--signal); background: rgba(196,217,107,.14); }

/* ============================================================
 * 通用面板
 * ============================================================ */
.panel {
  border: 1px solid var(--line-soft); background: rgba(27,35,24,.68);
  margin-bottom: 14px;
}
.panel-hd {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
  background: rgba(35,45,30,.6);
}
.panel-hd h3 { font-size: 12.5px; font-weight: 700; letter-spacing: .6px; flex: 1; min-width: 120px; }
.panel-bd { padding: 13px; }

/* 产出署名标识 —— 全平台内容必须标注产出智能体 */
.by-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .4px;
  color: var(--track); border: 1px solid rgba(111,211,196,.35);
  background: rgba(111,211,196,.08); padding: 1px 6px; flex: 0 0 auto;
}
.by-tag.human {
  color: var(--steel); border-color: rgba(143,163,184,.4); background: rgba(143,163,184,.1);
}
.by-tag .bt-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.mode-tag {
  font-family: var(--mono); font-size: 9px; color: var(--txt-3);
  border: 1px solid var(--line); padding: 1px 6px;
}

/* 按钮 */
.btn {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  padding: 7px 15px; border: 1px solid var(--line);
  background: rgba(43,54,37,.9); color: var(--txt-2); cursor: pointer;
  transition: all .18s; letter-spacing: .5px;
}
.btn:hover { border-color: var(--signal); color: var(--signal); background: rgba(196,217,107,.1); }
.btn.primary {
  background: linear-gradient(180deg, rgba(196,217,107,.22), rgba(196,217,107,.1));
  border-color: rgba(196,217,107,.55); color: var(--signal);
}
.btn.primary:hover { background: rgba(196,217,107,.3); box-shadow: 0 0 14px rgba(196,217,107,.2); }
.btn.ghost {
  background: transparent; border-color: var(--line-soft); color: var(--txt-3);
  padding: 4px 8px; font-size: 10.5px; font-weight: 500;
}
.btn.ghost:hover { color: var(--signal); border-color: var(--signal); }
.btn.fire { border-color: rgba(217,84,43,.5); color: var(--fire); background: rgba(217,84,43,.1); }
.btn.fire:hover { background: rgba(217,84,43,.2); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; }

/* 路径档位切换 */
.tier-box {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--line-soft); background: rgba(27,35,24,.55);
}
.tier-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-family: var(--mono); font-size: 10px; color: var(--txt-3); margin-bottom: 8px;
}
.tier-switch { display: flex; gap: 0; margin-bottom: 7px; }
.tier-btn {
  flex: 1; padding: 8px 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); background: rgba(19,24,17,.7);
  color: var(--txt-3); cursor: pointer; transition: all .15s;
}
.tier-btn:first-child { border-right: none; }
.tier-btn:hover { color: var(--txt-2); }
.tier-btn.on {
  border-color: rgba(196,217,107,.5); color: var(--signal);
  background: rgba(196,217,107,.12);
}
.tier-desc { font-size: 11.5px; color: var(--txt-2); line-height: 1.55; }

/* 微型随堂评估 */
.micro-quiz {
  margin-top: 14px; padding: 12px;
  border: 1px solid rgba(233,168,60,.35); background: rgba(233,168,60,.06);
}
.mq-hd {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--flare); margin-bottom: 10px;
}
.mq-q { margin-bottom: 12px; }
.mq-qt { font-size: 12.5px; color: var(--txt); margin-bottom: 7px; line-height: 1.5; }
.mq-opts { display: flex; flex-direction: column; gap: 5px; }
.mq-opt {
  text-align: left; padding: 7px 10px; font-size: 12px;
  border: 1px solid var(--line-soft); background: rgba(19,24,17,.65);
  color: var(--txt-2); cursor: pointer; transition: all .15s;
}
.mq-opt:hover:not(:disabled) { border-color: var(--signal); color: var(--signal); }
.mq-opt.pick { border-color: var(--flare); color: var(--flare); }
.mq-opt.ans { border-color: rgba(111,211,196,.55); color: var(--track); }
.mq-opt.wrong { border-color: rgba(217,84,43,.5); color: var(--fire); }
.mq-opt:disabled { cursor: default; opacity: .9; }
.mq-explain {
  margin-top: 6px; font-size: 11.5px; line-height: 1.5; padding: 6px 8px;
  border-left: 2px solid var(--line);
}
.mq-explain.ok { border-left-color: var(--track); color: var(--track); }
.mq-explain.no { border-left-color: var(--fire); color: #F0A090; }

/* 课前：二次备课提示 / 讨论 */
.goal-note {
  margin: 8px 0 4px; padding: 8px 10px;
  font-size: 11.5px; line-height: 1.55; color: var(--flare);
  border: 1px dashed rgba(233,168,60,.35); background: rgba(233,168,60,.06);
}
.discuss-topic {
  font-size: 12.5px; font-weight: 650; color: var(--txt); line-height: 1.5;
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.discuss-post {
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.discuss-post:last-child { border-bottom: 0; }
.dp-who { font-size: 10.5px; font-family: var(--mono); color: var(--signal); letter-spacing: .6px; }
.dp-tx { font-size: 12px; color: var(--txt-2); line-height: 1.5; margin: 3px 0; }
.dp-meta { font-size: 10px; color: var(--txt-3); font-family: var(--mono); }
.export-tip {
  margin-top: 8px; font-size: 11px; color: var(--signal); font-family: var(--mono);
}
.export-fmt { display: flex; gap: 6px; margin: 8px 0; }
.export-preview {
  margin-top: 10px; max-height: 180px; overflow: auto;
  padding: 10px; border: 1px solid var(--line-soft);
  background: rgba(10,14,10,.92); color: var(--track);
  font-family: var(--mono); font-size: 10px; line-height: 1.45; white-space: pre-wrap;
}

/* 资源舱 */
.res-item { cursor: pointer; }
.res-item:hover { background: rgba(196,217,107,.06); }
.res-cabin { display: grid; grid-template-columns: 220px 1fr; gap: 12px; min-height: 280px; }
.res-tree { display: flex; flex-direction: column; gap: 5px; }
.res-tree-item {
  text-align: left; padding: 8px 9px; border: 1px solid var(--line-soft);
  background: rgba(19,24,17,.85); color: var(--txt-2); cursor: pointer;
}
.res-tree-item.on { border-color: var(--signal); background: rgba(196,217,107,.1); color: var(--signal); }
.rt-kind { display: block; font-size: 9px; font-family: var(--mono); color: var(--txt-3); margin-bottom: 2px; }
.rt-title { font-size: 11.5px; line-height: 1.4; }
.res-main { border: 1px solid var(--line-soft); background: rgba(15,19,13,.88); padding: 12px; }
.res-doc-hd { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.res-doc-title { font-size: 13px; font-weight: 700; }
.res-doc-meta { font-size: 10.5px; color: var(--txt-3); margin-top: 3px; font-family: var(--mono); }
.res-doc-body p {
  font-size: 12.5px; color: var(--txt-2); line-height: 1.7; margin-bottom: 8px;
}
.res-doc-body mark {
  background: rgba(233,168,60,.22); color: var(--flare); padding: 0 2px;
}
.res-note { margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.res-note-hd { font-size: 10px; font-family: var(--mono); color: var(--txt-3); letter-spacing: 1px; margin-bottom: 6px; }
.res-note-in {
  width: 100%; min-height: 64px; resize: vertical;
  background: rgba(10,14,10,.9); border: 1px solid var(--line);
  color: var(--txt); font-family: var(--sans); font-size: 12px; padding: 8px; outline: none;
}
.res-note-in:focus { border-color: var(--signal); }
.res-player { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-bottom: 12px; }
.rp-screen {
  border: 1px solid rgba(111,211,196,.35); min-height: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(0deg, rgba(111,211,196,.04), rgba(111,211,196,.04) 2px, transparent 2px, transparent 4px);
}
.rp-play {
  width: 44px; height: 44px; border: 1px solid var(--track); color: var(--track);
  display: grid; place-items: center; font-family: var(--mono);
}
.rp-title { font-size: 11px; color: var(--txt-3); font-family: var(--mono); }
.rp-bar { width: 70%; height: 4px; background: rgba(35,45,30,.9); border: 1px solid var(--line-soft); }
.rp-bar > span { display: block; height: 100%; background: var(--track); }
.rp-chapters { display: flex; flex-direction: column; gap: 5px; }
.rp-ch {
  display: flex; gap: 8px; font-size: 11px; color: var(--txt-2); padding: 5px 6px;
  border: 1px solid var(--line-soft);
}
.rp-ch b { font-family: var(--mono); color: var(--signal); flex: 0 0 42px; }
.marker-card {
  margin-top: 10px; padding: 10px; border: 1px solid var(--line-soft); background: rgba(19,24,17,.7);
}
.mk-t { font-size: 10px; font-family: var(--mono); color: var(--flare); margin-bottom: 4px; }
.mk-q { font-size: 12.5px; color: var(--txt); margin-bottom: 8px; line-height: 1.5; }
.mk-opts { display: flex; flex-direction: column; gap: 6px; }

/* 精准补差 */
.remed-card {
  padding: 10px 12px; border: 1px solid var(--line-soft); margin-bottom: 8px;
  background: rgba(19,24,17,.7);
}
.remed-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.remed-top b { font-size: 12.5px; color: var(--signal); }
.remed-reason { font-size: 11px; color: var(--txt-3); margin-bottom: 6px; }
.remed-li { font-size: 11.5px; color: var(--txt-2); line-height: 1.5; margin-bottom: 2px; }

@media (max-width: 980px) {
  .res-cabin { grid-template-columns: 1fr; }
  .res-player { grid-template-columns: 1fr; }
}

.step-map {
  font-size: 10px; font-family: var(--mono); color: var(--txt-3); letter-spacing: .4px; margin-top: 4px; margin-bottom: 12px;
}

/* 训中现场答疑 */
.ask-sim {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid rgba(111,211,196,.4); background: rgba(19,28,26,.92);
}
.ask-sim-hd {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}

/* 数据条 */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bar-k { flex: 0 0 108px; font-size: 11px; color: var(--txt-2); }
.bar-t { flex: 1; height: 12px; background: rgba(19,24,17,.85); border: 1px solid var(--line-soft); position: relative; overflow: hidden; }
.bar-f { display: block; height: 100%; transition: width .9s cubic-bezier(.2,.8,.3,1); position: relative; }
.bar-f::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(0,0,0,.16) 0 4px, transparent 4px 9px);
}
.bar-f.hi  { background: var(--signal); }
.bar-f.mid { background: var(--flare); }
.bar-f.low { background: var(--fire); }
.bar-v { flex: 0 0 42px; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--txt-2); }

/* 列表项 */
.item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line-soft);
  background: rgba(35,45,30,.45); margin-bottom: 7px;
  transition: border-color .18s, background .18s;
}
.item:hover { border-color: var(--line); background: rgba(43,54,37,.7); }
.item-ico {
  flex: 0 0 18px; height: 18px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; margin-top: 1px;
  border: 1px solid var(--line); color: var(--txt-3);
}
.item-ico.ok { border-color: rgba(196,217,107,.5); color: var(--signal); }
.item-ico.no { border-color: rgba(217,84,43,.5); color: var(--fire); }
.item-bd { flex: 1; min-width: 0; }
.item-t { font-size: 12px; color: var(--txt); line-height: 1.45; }
.item-s { font-size: 10px; color: var(--txt-3); margin-top: 2px; font-family: var(--mono); }
.item-x { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; color: var(--txt-3); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-2 > .panel { margin-bottom: 0; }

/* 战例／思政块 */
.moral-box {
  border-left: 2px solid var(--fire); background: rgba(217,84,43,.08);
  padding: 9px 12px; font-size: 11.5px; color: var(--txt-2); line-height: 1.65;
}
.moral-box .mb-t {
  font-family: var(--mono); font-size: 9px; color: var(--fire);
  letter-spacing: 1.2px; margin-bottom: 3px;
}

/* 教员人工引导 —— 与智能体输出显著区分 */
.teacher-box {
  border: 1px dashed rgba(143,163,184,.5); background: rgba(143,163,184,.08);
  padding: 10px 12px; margin-top: 10px;
}
.teacher-box .tb-hd {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
}
.teacher-box .tb-txt { font-size: 12px; color: var(--txt); line-height: 1.6; }

/* ============================================================
 * 学 训 悟 践 四环节
 * ============================================================ */
.step-tabs { display: flex; gap: 7px; margin-bottom: 14px; }
.step-tab {
  flex: 1; padding: 10px 12px; border: 1px solid var(--line-soft);
  background: rgba(27,35,24,.6); cursor: pointer; transition: all .2s;
  display: flex; align-items: center; gap: 10px;
}
.step-tab:hover { background: rgba(43,54,37,.85); }
.step-tab .st-ch {
  font-size: 17px; font-weight: 700; color: var(--txt-3);
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--line); flex: 0 0 26px;
}
.step-tab .st-full { font-size: 11px; color: var(--txt-3); line-height: 1.3; }
.step-tab.on { border-color: var(--signal); background: rgba(196,217,107,.12); }
.step-tab.on .st-ch { color: var(--signal); border-color: var(--signal); }
.step-tab.on .st-full { color: var(--signal); }
.step-tab.fin .st-ch { color: var(--track); border-color: rgba(111,211,196,.5); }

/* 教案五段时间轴 */
.timeline-bar {
  margin-bottom: 14px; border: 1px solid var(--line);
  background: rgba(15,19,13,.88); padding: 12px 14px;
}
.tl-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.tl-title {
  font-size: 11px; font-family: var(--mono); color: var(--txt-3); letter-spacing: 1.2px; flex: 1;
}
.tl-clock {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); color: var(--flare);
}
.tl-clock-lb { font-size: 10px; color: var(--txt-3); }
.tl-clock b { font-size: 18px; letter-spacing: 1px; }
.tl-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tl-seg {
  text-align: left; padding: 8px 9px; border: 1px solid var(--line-soft);
  background: rgba(19,24,17,.85); color: var(--txt-2); cursor: pointer;
}
.tl-seg:hover { border-color: rgba(196,217,107,.35); }
.tl-seg.on {
  border-color: var(--signal); background: rgba(196,217,107,.12); color: var(--signal);
}
.tl-seg.done { border-color: rgba(111,211,196,.35); }
.tl-seg.done .tl-name { color: var(--track); }
.tl-range { font-size: 9px; font-family: var(--mono); color: var(--txt-3); }
.tl-name { font-size: 13px; font-weight: 700; margin: 2px 0; }
.tl-shell { font-size: 9px; font-family: var(--mono); color: var(--txt-3); }
.tl-min { font-size: 10px; font-family: var(--mono); color: var(--flare); margin-top: 4px; }
.ops-tabs { display: flex; gap: 7px; margin-bottom: 14px; }

/* 导入：热力 + 投票 */
.intro-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.heat-panel, .vote-panel {
  border: 1px solid var(--line-soft); background: rgba(19,24,17,.75); padding: 12px;
}
.heat-hd, .vote-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.heat-title, .vote-title { font-size: 13px; font-weight: 700; color: var(--txt); }
.heat-sub, .vote-prompt { font-size: 11px; color: var(--txt-3); margin-top: 3px; line-height: 1.5; }
.heat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.heat-cell {
  padding: 10px 8px; border: 1px solid var(--line-soft);
  background: rgba(19,24,17,.85);
}
.heat-cell.lv-high {
  border-color: rgba(217,84,43,.45);
  background: rgba(217,84,43,.18);
}
.heat-cell.lv-mid {
  border-color: rgba(233,168,60,.4);
  background: rgba(233,168,60,.12);
}
.heat-cell.lv-low {
  border-color: rgba(111,211,196,.3);
  background: rgba(111,211,196,.08);
}
.hc-zone { font-size: 10px; color: var(--txt-2); }
.hc-level {
  display: flex; align-items: baseline; gap: 6px; margin: 4px 0 2px;
}
.hc-level em {
  font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--txt-3); letter-spacing: .6px;
}
.hc-level b { font-size: 18px; font-weight: 700; line-height: 1; }
.heat-cell.lv-high .hc-level b { color: #F0A090; }
.heat-cell.lv-mid .hc-level b { color: var(--flare); }
.heat-cell.lv-low .hc-level b { color: var(--track); }
.hc-label { font-size: 10px; font-family: var(--mono); color: var(--txt-3); }
.heat-q {
  margin-top: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.55;
  border-left: 2px solid var(--flare); color: var(--txt-2); background: rgba(233,168,60,.06);
}
.vote-opts { display: flex; flex-direction: column; gap: 7px; }
.vote-opt {
  text-align: left; padding: 8px 10px; border: 1px solid var(--line);
  background: rgba(15,19,13,.9); color: var(--txt-2); cursor: pointer;
  width: 100%; font: inherit;
}
.vote-opt.choose:hover { border-color: var(--signal); }
.vote-opt.choose.on {
  border-color: var(--flare); background: rgba(233,168,60,.12); color: var(--flare);
}
.vote-opt.choose em {
  font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--txt-3);
}
.vote-opt.choose.on em { color: var(--flare); }
.vote-opt.result { cursor: default; }
.vote-opt.result.on { border-color: var(--signal); background: rgba(196,217,107,.1); }
.vo-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 8px; }
.vo-top b { font-family: var(--mono); color: var(--signal); }
.vo-bar { height: 6px; background: rgba(35,45,30,.9); border: 1px solid var(--line-soft); overflow: hidden; margin-top: 5px; }
.vo-bar > span { display: block; height: 100%; background: var(--flare); transition: width .5s; }
.vote-opt.result.on .vo-bar > span { background: var(--signal); }
.vo-n { font-size: 10px; font-family: var(--mono); color: var(--txt-3); margin-top: 3px; }
.vote-actions {
  margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.vote-foot { font-size: 10px; font-family: var(--mono); color: var(--txt-3); }

/* 部队视频位 */
.video-slot {
  margin-bottom: 14px; border: 1px solid rgba(111,211,196,.35);
  background: rgba(19,28,26,.9);
}
.vs-screen {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(15,19,13,.2), rgba(19,28,26,.95)),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(111,211,196,.04) 2px, rgba(111,211,196,.04) 3px);
}
.vs-play {
  width: 48px; height: 48px; border: 1px solid var(--track); color: var(--track);
  display: grid; place-items: center; font-family: var(--mono); font-size: 12px; flex: 0 0 auto;
}
.vs-meta { flex: 1; min-width: 0; }
.vs-title { font-size: 13px; font-weight: 700; color: var(--txt); }
.vs-src { font-size: 11px; color: var(--txt-3); margin-top: 3px; font-family: var(--mono); }
.vs-notes { padding: 10px 14px 12px; border-top: 1px solid var(--line-soft); }
.vs-notes-hd { font-size: 10px; font-family: var(--mono); color: var(--track); letter-spacing: 1px; margin-bottom: 6px; }
.vs-li { font-size: 12px; color: var(--txt-2); line-height: 1.55; margin-bottom: 3px; }

/* 知识路径图 */
.path-panel {
  border: 1px solid var(--line); background: rgba(15,19,13,.88); padding: 14px;
}
.path-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.path-title { font-size: 13px; font-weight: 700; }
.path-flow { display: flex; align-items: stretch; gap: 6px; }
.path-node {
  flex: 1; padding: 10px; border: 1px solid var(--line-soft); background: rgba(19,24,17,.85);
}
.path-node.ok { border-color: rgba(111,211,196,.45); }
.path-node.pending { border-color: rgba(217,84,43,.4); }
.pn-stage {
  font-family: var(--mono); font-size: 12px; color: var(--signal); margin-bottom: 4px;
}
.path-node.pending .pn-stage { color: var(--fire); }
.pn-name { font-size: 12.5px; font-weight: 700; color: var(--txt); }
.pn-desc { font-size: 10.5px; color: var(--txt-3); margin-top: 4px; line-height: 1.45; }
.path-arrow {
  display: grid; place-items: center; color: var(--txt-3); font-family: var(--mono); padding: 0 2px;
}
.draw-panel {
  margin-top: 12px; border: 1px solid var(--line-soft); padding: 12px 14px;
  background: rgba(19,24,17,.75);
}
.draw-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.draw-title { font-size: 12.5px; font-weight: 700; }
.draw-sc { font-size: 11.5px; color: var(--txt-2); margin-bottom: 8px; }
.draw-groups { display: flex; gap: 7px; flex-wrap: wrap; }
.draw-g {
  padding: 6px 10px; border: 1px solid var(--line); font-size: 11px; font-family: var(--mono); color: var(--txt-3);
}
.draw-g.picked { border-color: var(--flare); color: var(--flare); background: rgba(233,168,60,.08); }
.draw-note { margin-top: 8px; font-size: 10.5px; color: var(--txt-3); }

/* 策略段：验效 / 翻转 / 对比 / 互评 */
.strat-sec {
  font-size: 10px; font-family: var(--mono); color: var(--txt-3);
  letter-spacing: 1.2px; margin: 16px 0 10px;
}
.drill-card {
  margin-bottom: 12px; padding: 12px 14px;
  border: 1px solid var(--line); background: rgba(15,19,13,.88);
}
.drill-card.vlsm { border-color: rgba(111,211,196,.35); }
.drill-hd { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.drill-title { font-size: 13px; font-weight: 700; color: var(--txt); }
.drill-demand { font-size: 11.5px; color: var(--txt-3); margin-top: 4px; line-height: 1.5; }
.drill-sec { font-size: 10px; font-family: var(--mono); color: var(--txt-3); letter-spacing: 1px; margin: 10px 0 8px; }
.drill-feedback {
  margin-top: 8px; font-size: 11.5px; line-height: 1.5; padding: 7px 9px;
  border-left: 2px solid var(--line);
}
.drill-feedback.ok { border-left-color: var(--track); color: var(--track); }
.drill-feedback.no { border-left-color: var(--fire); color: #F0A090; }
.param-in.ok { border-color: var(--track); color: var(--track); }
.param-in.bad { border-color: var(--fire); color: #F0A090; }
.vlsm-board { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.vlsm-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vlsm-g {
  padding: 7px 9px; border: 1px solid var(--line); background: rgba(19,24,17,.85);
  color: var(--txt-2); cursor: pointer; text-align: left; min-width: 120px;
}
.vlsm-g b { display: block; font-size: 11.5px; }
.vlsm-g span { font-size: 10px; font-family: var(--mono); color: var(--txt-3); }
.vlsm-g.on { border-color: var(--signal); color: var(--signal); }
.vlsm-g.mine { border-color: rgba(233,168,60,.5); }
.vlsm-detail {
  padding: 9px 10px; border: 1px solid var(--line-soft); background: rgba(19,24,17,.7);
}
.vd-name { font-size: 12px; font-weight: 700; color: var(--txt); margin-bottom: 4px; }
.vd-sum { font-size: 12px; color: var(--txt-2); line-height: 1.5; }
.vd-tip { margin-top: 6px; font-size: 10.5px; color: var(--txt-3); font-family: var(--mono); }
.compare-card {
  margin-bottom: 12px; padding: 12px 14px;
  border: 1px solid var(--line-soft); background: rgba(19,24,17,.7);
}
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compare-col { padding: 8px 10px; border: 1px solid var(--line-soft); }
.cc-name { font-size: 13px; font-weight: 700; color: var(--signal); margin-bottom: 6px; }
.cc-li { font-size: 11.5px; color: var(--txt-2); line-height: 1.5; margin-bottom: 3px; }
.cc-li span {
  display: inline-block; width: 18px; font-family: var(--mono); color: var(--flare); margin-right: 4px;
}
.peer-panel {
  margin-top: 12px; border: 1px solid var(--line-soft); padding: 12px 14px;
  background: rgba(19,24,17,.75);
}
.peer-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.peer-k { flex: 1; min-width: 160px; font-size: 12px; color: var(--txt-2); }
.peer-stars { display: flex; gap: 4px; }
.peer-star {
  width: 28px; height: 26px; border: 1px solid var(--line); background: rgba(15,19,13,.9);
  color: var(--txt-3); font-family: var(--mono); font-size: 11px; cursor: pointer;
}
.peer-star.on { border-color: var(--flare); color: var(--flare); background: rgba(233,168,60,.1); }
.peer-star:disabled { cursor: default; }

@media (max-width: 980px) {
  .tl-track { grid-template-columns: 1fr 1fr; }
  .intro-wrap { grid-template-columns: 1fr; }
  .path-flow { flex-direction: column; }
  .path-arrow { transform: rotate(90deg); padding: 4px 0; }
  .compare-grid { grid-template-columns: 1fr; }
}

/* 仿真操作区 */
.sim-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 13px; }
.sim-wrap.sand { grid-template-columns: 1fr 320px; }
.sim-canvas {
  position: relative; height: 380px; border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, rgba(111,211,196,.05), transparent 70%),
    rgba(15,19,13,.92);
  overflow: hidden;
}
.sim-canvas::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(111,211,196,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,211,196,.07) 1px, transparent 1px);
  background-size: 30px 30px;
}
.sim-banner {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  padding: 7px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .5px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid transparent;
}
.sim-banner.init { background: rgba(27,35,24,.9); color: var(--txt-3); border-color: var(--line-soft); }
.sim-banner.running {
  background: rgba(233,168,60,.18); color: var(--flare);
  border-color: rgba(233,168,60,.45);
}
.sim-banner.fault {
  background: rgba(217,84,43,.2); color: #F0A090;
  border-color: rgba(217,84,43,.55);
  animation: fault-flash 1.5s ease-in-out infinite;
}
.sim-banner.fixed {
  background: rgba(196,217,107,.14); color: var(--signal);
  border-color: rgba(196,217,107,.45);
}
@keyframes fault-flash {
  0%,100% { box-shadow: inset 0 0 0 0 rgba(217,84,43,0); }
  50% { box-shadow: inset 0 0 22px 0 rgba(217,84,43,.2); }
}
.sim-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 3;
  width: 104px; cursor: pointer;
}
.sim-node .sn-sym {
  width: 28px; height: 28px; border: 1.5px solid var(--txt-2);
  display: grid; place-items: center; background: rgba(19,24,17,.9);
  font-family: var(--mono); font-size: 9px; color: var(--txt-2);
  transition: all .3s;
}
.sim-node .sn-lb {
  font-size: 9px; color: var(--txt-3); font-family: var(--mono); white-space: nowrap;
}
.sim-node .sn-ip {
  font-size: 9px; font-family: var(--mono); color: var(--txt-3); opacity: .9;
}
.sim-node .sn-meta {
  font-size: 8px; font-family: var(--mono); color: var(--txt-3); opacity: .75;
}
.sim-node.cmd .sn-sym { border-color: var(--signal); color: var(--signal); width: 34px; height: 34px; }
.sim-node.err .sn-sym {
  border-color: var(--fire); color: var(--fire);
  box-shadow: 0 0 14px rgba(217,84,43,.55); animation: pulse-bar .8s infinite;
}
.sim-node.err .sn-lb,
.sim-node.err .sn-ip { color: var(--fire); }
.sim-node.linked .sn-sym { border-color: var(--track); color: var(--track); }
.sim-node.linked .sn-ip { color: var(--track); }
.sim-node.probe .sn-sym { border-color: var(--flare); color: var(--flare); }
.sim-node.sel .sn-sym {
  outline: 1px solid var(--signal);
  outline-offset: 3px;
  box-shadow: 0 0 12px rgba(196,217,107,.35);
}

/* 数据包飞行 */
.sim-pkt {
  position: absolute; z-index: 2; width: 7px; height: 7px; border-radius: 1px;
  left: var(--x1); top: var(--y1); transform: translate(-50%, -50%);
  animation: pkt-fly 1.35s linear infinite;
  pointer-events: none;
}
.sim-pkt.ok { background: var(--track); box-shadow: 0 0 8px rgba(111,211,196,.8); }
.sim-pkt.bad { background: var(--fire); box-shadow: 0 0 8px rgba(217,84,43,.8); animation-duration: 1.8s; }
.sim-pkt.probe { background: var(--flare); box-shadow: 0 0 8px rgba(233,168,60,.85); animation-duration: .75s; }
@keyframes pkt-fly {
  0%   { left: var(--x1); top: var(--y1); opacity: .2; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: var(--x2); top: var(--y2); opacity: .15; }
}

.sim-side-sec {
  font-size: 10px; font-family: var(--mono); color: var(--txt-3);
  letter-spacing: 1.2px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
.sim-type {
  margin-left: auto; font-size: 9px; color: var(--signal); letter-spacing: .4px;
}
.subnet-chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.subnet-chip {
  padding: 7px 9px; border: 1px solid var(--line-soft); background: rgba(19,24,17,.7);
  font-size: 10px; font-family: var(--mono); color: var(--txt-2); line-height: 1.45;
}
.subnet-chip b { display: block; color: var(--txt); font-size: 11px; margin-bottom: 2px; font-family: var(--sans, inherit); }
.subnet-chip.bad { border-color: rgba(217,84,43,.45); color: #F0A090; }
.subnet-chip.ok { border-color: rgba(111,211,196,.4); color: var(--track); }
.node-pick { display: flex; gap: 5px; margin-bottom: 9px; flex-wrap: wrap; }
.np-btn {
  min-width: 36px; height: 26px; padding: 0 7px;
  background: rgba(19,24,17,.85); border: 1px solid var(--line);
  color: var(--txt-2); font-family: var(--mono); font-size: 10px; cursor: pointer;
}
.np-btn.on { border-color: var(--signal); color: var(--signal); background: rgba(196,217,107,.1); }

/* AI 智评 */
.ai-report {
  margin-top: 14px; border: 1px solid var(--line);
  background: rgba(15,19,13,.88); padding: 14px 16px;
}
.ai-report.fail { border-color: rgba(217,84,43,.45); }
.ai-report.pass { border-color: rgba(196,217,107,.4); }
.ai-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.ai-title { font-size: 13px; font-weight: 700; color: var(--txt); }
.ai-verdict { font-size: 11px; color: var(--txt-3); margin-top: 3px; font-family: var(--mono); }
.ai-score {
  font-family: var(--mono); font-size: 28px; font-weight: 700; line-height: 1;
  color: var(--fire);
}
.ai-report.pass .ai-score { color: var(--signal); }
.ai-util { margin-bottom: 12px; }
.ai-util-row { display: flex; align-items: center; gap: 8px; }
.ai-util-k { flex: 0 0 88px; font-size: 11px; color: var(--txt-2); }
.ai-util-bar {
  flex: 1; height: 8px; background: rgba(19,24,17,.9); border: 1px solid var(--line-soft); overflow: hidden;
}
.ai-util-bar > span { display: block; height: 100%; background: var(--flare); }
.ai-report.pass .ai-util-bar > span { background: var(--track); }
.ai-util-v { flex: 0 0 36px; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--txt-2); }
.ai-util-tip { font-size: 10px; color: var(--txt-3); margin: 2px 0 8px 96px; font-family: var(--mono); }
.ai-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ai-sec { font-size: 10px; font-family: var(--mono); color: var(--txt-3); letter-spacing: 1px; margin-bottom: 6px; }
.ai-li { font-size: 11.5px; color: var(--txt-2); line-height: 1.55; margin-bottom: 3px; }

.ip-table {
  margin-top: 10px; border: 1px solid var(--line-soft);
  font-size: 10px; font-family: var(--mono);
}
.ip-table .ip-hd {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 6px;
  padding: 5px 8px; color: var(--txt-3); border-bottom: 1px solid var(--line-soft);
  background: rgba(35,45,30,.5);
}
.ip-table .ip-row {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 6px;
  padding: 5px 8px; border-bottom: 1px solid var(--line-soft); color: var(--txt-2);
}
.ip-table .ip-row:last-child { border-bottom: none; }
.ip-table .ip-row.dup { background: rgba(217,84,43,.12); color: #F0A090; }
.ip-table .ip-row.ok { color: var(--track); }

.param-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.param-k { flex: 0 0 72px; font-size: 11px; color: var(--txt-2); }
.param-in {
  flex: 1; background: rgba(15,19,13,.9); border: 1px solid var(--line);
  color: var(--signal); font-family: var(--mono); font-size: 11px;
  padding: 5px 8px; outline: none; min-width: 0;
}
.param-in:focus { border-color: var(--signal); }
.param-u { flex: 0 0 32px; font-size: 10px; color: var(--txt-3); font-family: var(--mono); }

@media (max-width: 980px) {
  .sim-wrap, .sim-wrap.sand { grid-template-columns: 1fr; }
  .ai-cols { grid-template-columns: 1fr; }
}

/* 教练指引 */
.coach { display: flex; gap: 8px; margin-bottom: 9px; }
.coach-ico {
  flex: 0 0 20px; height: 20px; border: 1px solid rgba(111,211,196,.45);
  color: var(--track); display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px;
}
.coach-tx { font-size: 11.5px; color: var(--txt-2); line-height: 1.6; }

/* 对话 */
.msg { display: flex; gap: 9px; margin-bottom: 11px; }
.msg-av {
  flex: 0 0 28px; height: 28px; border: 1px solid var(--line);
  display: grid; place-items: center; font-family: var(--mono);
  font-size: 9px; color: var(--txt-3);
}
.msg.stu .msg-av { border-color: rgba(196,217,107,.45); color: var(--signal); }
.msg.tutor .msg-av { border-color: rgba(111,211,196,.45); color: var(--track); }
.msg-bd { flex: 1; min-width: 0; }
.msg-tx {
  font-size: 12.5px; line-height: 1.7; color: var(--txt);
  background: rgba(35,45,30,.6); border: 1px solid var(--line-soft);
  padding: 8px 11px;
}
.msg.stu .msg-tx { background: rgba(196,217,107,.07); border-color: rgba(196,217,107,.2); }

/* 想定作业 */
.flow-strip { display: flex; gap: 0; margin-bottom: 12px; }
.flow-cell {
  position: relative; flex: 1; padding: 10px 8px 10px 14px;
  border: 1px solid var(--line-soft); border-right: none;
  background: rgba(27,35,24,.6); text-align: left;
}
.flow-cell:last-child { border-right: 1px solid var(--line-soft); }
.flow-cell::after {
  content: ''; position: absolute; right: -9px; top: 50%; z-index: 3;
  width: 16px; height: 16px; transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  background: rgba(27,35,24,.99);
}
.flow-cell:last-child::after { display: none; }
.flow-n { font-size: 12px; font-weight: 700; color: var(--txt-2); }
.flow-d { font-size: 9px; color: var(--txt-3); font-family: var(--mono); }
.flow-cell.done { background: rgba(196,217,107,.1); border-color: rgba(196,217,107,.3); }
.flow-cell.done::after { background: rgba(40,50,30,.99); border-color: rgba(196,217,107,.3); }
.flow-cell.done .flow-n { color: var(--signal); }
.flow-cell.cur { background: rgba(233,168,60,.16); border-color: rgba(233,168,60,.55); }
.flow-cell.cur::after { background: rgba(58,46,26,.99); border-color: rgba(233,168,60,.55); }
.flow-cell.cur .flow-n { color: var(--flare); }

.situation {
  border-left: 2px solid var(--flare); background: rgba(233,168,60,.07);
  padding: 11px 13px; font-size: 12.5px; line-height: 1.75; color: var(--txt);
}
.situation .si-t {
  font-family: var(--mono); font-size: 9px; color: var(--flare);
  letter-spacing: 1.4px; margin-bottom: 4px;
}

/* ============================================================
 * 课后讲评
 * ============================================================ */
.verdict {
  display: flex; align-items: center; gap: 20px;
  border: 1px solid rgba(196,217,107,.35); background: rgba(196,217,107,.08);
  padding: 15px 18px; margin-bottom: 14px;
}
.verdict-score { font-family: var(--mono); font-size: 42px; font-weight: 700; color: var(--signal); line-height: 1; }
.verdict-bd { flex: 1; }
.verdict-t { font-size: 15px; font-weight: 700; color: var(--signal); }
.verdict-s { font-size: 11px; color: var(--txt-2); margin-top: 3px; }
.verdict-delta { font-family: var(--mono); font-size: 11px; color: var(--track); }

.err-item { display: flex; gap: 11px; padding: 10px 12px; border: 1px solid var(--line-soft);
  background: rgba(35,45,30,.5); margin-bottom: 8px; cursor: pointer; transition: all .18s; }
.err-item:hover { border-color: var(--fire); background: rgba(217,84,43,.08); }
.err-lv { flex: 0 0 3px; }
.err-lv.high { background: var(--fire); }
.err-lv.mid  { background: var(--flare); }
.err-bd { flex: 1; min-width: 0; }
.err-tp { font-family: var(--mono); font-size: 9px; color: var(--fire); letter-spacing: 1px; }
.err-it { font-size: 12.5px; color: var(--txt); margin-top: 2px; }
.err-dt { font-size: 10.5px; color: var(--txt-3); margin-top: 2px; }
.err-go { flex: 0 0 auto; font-size: 10px; color: var(--txt-3); font-family: var(--mono); align-self: center; }

/* 勋章 */
.medal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.medal {
  border: 1px solid var(--line-soft); background: rgba(35,45,30,.5);
  padding: 12px 9px; text-align: center; transition: all .2s;
}
.medal.got { border-color: rgba(233,168,60,.5); background: rgba(233,168,60,.09); }
.medal.got:hover { box-shadow: 0 0 16px rgba(233,168,60,.18); }
.medal-ico { width: 40px; height: 40px; margin: 0 auto 7px; opacity: .3; }
.medal.got .medal-ico { opacity: 1; }
.medal-n { font-size: 11px; font-weight: 600; color: var(--txt-3); }
.medal.got .medal-n { color: var(--flare); }
.medal-c { font-size: 9px; color: var(--txt-3); margin-top: 3px; line-height: 1.4; }

/* 新任务高亮 */
.new-task {
  border: 1px solid rgba(196,217,107,.45); background: rgba(196,217,107,.1);
  animation: task-in .5s ease-out backwards;
}
@keyframes task-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
 * 谱系态势图（四维为核心 · 评估骨架）
 * ============================================================ */
.graph-wrap { display: flex; flex-direction: column; gap: 12px; }

.graph-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 12px; border: 1px solid var(--line); background: rgba(15,19,13,.88);
}
.graph-bar .loop-formula {
  flex: 1 1 280px; border: 0; background: transparent; padding: 0;
}
.graph-lens { display: flex; gap: 6px; flex-shrink: 0; }
.gl-btn {
  font-family: var(--mono); font-size: 10px; letter-spacing: .6px;
  padding: 5px 10px; border: 1px solid var(--line); background: rgba(35,45,30,.75);
  color: var(--txt-3); cursor: pointer;
}
.gl-btn.on { border-color: var(--flare); color: var(--flare); background: rgba(233,168,60,.1); }
.graph-stats { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-left: auto; }
.gs {
  font-family: var(--mono); font-size: 10px; color: var(--txt-3);
  display: inline-flex; align-items: center; gap: 5px;
}
.gs i { width: 7px; height: 7px; display: inline-block; background: var(--line); }
.gs.ok i { background: var(--signal); }
.gs.mid i { background: var(--flare); }
.gs.weak i { background: var(--fire); }
.gs.lock i { background: var(--txt-3); }

/* 四维谱系主条 */
.dim-hero {
  border: 1px solid rgba(233,168,60,.35);
  background:
    linear-gradient(180deg, rgba(233,168,60,.08), transparent 48%),
    rgba(15,19,13,.92);
  padding: 12px 14px 14px;
  box-shadow: 0 0 0 1px rgba(233,168,60,.08) inset;
}
.dim-hero-hd {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.dim-hero-k {
  font-size: 14px; font-weight: 700; letter-spacing: 3px; color: var(--flare);
  font-family: var(--mono);
}
.dim-hero-tip { font-size: 10px; color: var(--txt-3); font-family: var(--mono); }
.dim-hero-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 900px) {
  .dim-hero-grid { grid-template-columns: repeat(2, 1fr); }
}
.dim-hero-card {
  text-align: left; cursor: pointer; font-family: inherit;
  padding: 12px 12px 11px; border: 1px solid var(--line-soft);
  background: rgba(35,45,30,.72); color: var(--txt-2);
  transition: border-color .15s, transform .15s, background .15s;
}
.dim-hero-card:hover { transform: translateY(-1px); }
.dim-hero-card.cap { border-top: 3px solid var(--signal); }
.dim-hero-card.know { border-top: 3px solid var(--track); }
.dim-hero-card.prob { border-top: 3px solid var(--fire); }
.dim-hero-card.mor { border-top: 3px solid var(--flare); }
.dim-hero-card.on {
  background: rgba(52,66,44,.95);
}
.dim-hero-card.cap.on { border-color: var(--signal); box-shadow: 0 0 16px rgba(196,217,107,.18); }
.dim-hero-card.know.on { border-color: var(--track); box-shadow: 0 0 16px rgba(111,211,196,.18); }
.dim-hero-card.prob.on { border-color: var(--fire); box-shadow: 0 0 16px rgba(217,84,43,.18); }
.dim-hero-card.mor.on { border-color: var(--flare); box-shadow: 0 0 16px rgba(233,168,60,.18); }
.dh-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dh-no {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--txt-3);
}
.dim-hero-card.cap .dh-no { color: var(--signal); }
.dim-hero-card.know .dh-no { color: var(--track); }
.dim-hero-card.prob .dh-no { color: var(--fire); }
.dim-hero-card.mor .dh-no { color: var(--flare); }
.dh-n {
  font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--txt-1); line-height: 1;
}
.dh-name { font-size: 13px; font-weight: 700; color: var(--txt-1); margin-bottom: 4px; }
.dh-blurb { font-size: 10px; color: var(--txt-3); line-height: 1.4; }

.graph-canvas {
  position: relative; border: 1px solid var(--line);
  background: rgba(15,19,13,.85); padding: 10px 12px 12px; overflow: auto;
}
.graph-canvas-lite { opacity: .92; }
.graph-canvas::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(196,217,107,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,217,107,.045) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
}
.graph-band-hd {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px;
  color: var(--txt-3); margin-bottom: 8px;
}
.graph-band-tip { font-size: 9px; letter-spacing: .4px; color: var(--txt-3); opacity: .85; }
.graph-flows { position: relative; display: flex; gap: 10px; z-index: 2; }
.gf-col { flex: 1; min-width: 0; }
.gf-hd {
  text-align: center; padding: 5px 4px; margin-bottom: 6px;
  border: 1px solid var(--line); background: rgba(35,45,30,.85);
}
.gf-n { font-size: 11px; font-weight: 700; color: var(--txt-2); letter-spacing: 2px; }
.gf-d { font-size: 9px; color: var(--txt-3); font-family: var(--mono); }
.gf-arrow {
  position: absolute; top: 10px; font-size: 11px; color: var(--line);
  z-index: 3; pointer-events: none;
}

.slice {
  position: relative; padding: 6px 7px; margin-bottom: 6px;
  border: 1px solid var(--line-soft); background: rgba(35,45,30,.7);
  cursor: pointer; transition: all .18s; font-size: 10px; line-height: 1.4;
}
.slice:hover { transform: translateY(-2px); border-color: var(--txt-3); }
.slice-cap { font-size: 9px; color: var(--txt-3); font-family: var(--mono); margin-top: 2px; }
.slice::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
}
.slice.ok::before   { background: var(--signal); }
.slice.mid::before  { background: var(--flare); }
.slice.weak::before { background: var(--fire); }
.slice.lock { opacity: .42; }
.slice.lock::before { background: var(--line); }
.slice.weak { background: rgba(217,84,43,.09); border-color: rgba(217,84,43,.3); }
.slice.cur {
  box-shadow: 0 0 0 1px var(--flare), 0 0 16px rgba(233,168,60,.22);
  border-color: var(--flare);
}
.slice.lesson:not(.sel) { border-color: rgba(111,211,196,.28); }
.slice-top { display: flex; align-items: baseline; gap: 6px; }
.slice-top > span:first-child { flex: 1; }
.slice-score { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--txt-3); }
.slice.ok   .slice-score { color: var(--signal); }
.slice.mid  .slice-score { color: var(--flare); }
.slice.weak .slice-score { color: var(--fire); }
.slice.sel { border-color: var(--txt-2); background: rgba(52,66,44,.85); }

.graph-body {
  display: grid; grid-template-columns: 1fr minmax(260px, 300px); gap: 12px; align-items: start;
}
@media (max-width: 960px) {
  .graph-body { grid-template-columns: 1fr; }
}

.g4-map {
  border: 1px solid rgba(233,168,60,.28); background: rgba(15,19,13,.92); padding: 14px 14px 14px;
}
.g4-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.g4-hd-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.g4-k {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.4px; color: var(--flare);
}
.g4-slice-name { font-size: 15px; font-weight: 700; color: var(--txt-1); }
.g4-badge {
  font-family: var(--mono); font-size: 10px; padding: 3px 9px;
  border: 1px solid var(--line); color: var(--txt-3); align-self: center;
}
.g4-badge.ok { border-color: rgba(196,217,107,.4); color: var(--signal); }
.g4-badge.mid { border-color: rgba(233,168,60,.4); color: var(--flare); }
.g4-badge.weak { border-color: rgba(217,84,43,.45); color: var(--fire); }
.g4-badge.lock { opacity: .7; }

.g4-cross {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
}
.gx.cap { color: var(--signal); font-weight: 700; }
.gx.know { color: var(--track); font-weight: 700; }
.gx.prob { color: var(--fire); font-weight: 700; }
.gx.mor { color: var(--flare); font-weight: 700; }
.gx-x { color: var(--txt-3); opacity: .55; }

.g4-grid { display: flex; flex-direction: column; gap: 10px; }
.g4-mid {
  display: grid; grid-template-columns: 1fr minmax(140px, 180px) 1fr; gap: 10px; align-items: stretch;
}
.g4-pole {
  border: 1px solid var(--line-soft); background: rgba(35,45,30,.55); padding: 10px;
  min-height: 88px; transition: opacity .15s, border-color .15s, box-shadow .15s;
}
.g4-pole.dimmed { opacity: .38; }
.g4-pole.emph { box-shadow: 0 0 0 1px currentColor inset; }
.g4-pole.cap { border-color: rgba(196,217,107,.4); }
.g4-pole.know { border-color: rgba(111,211,196,.4); }
.g4-pole.prob { border-color: rgba(217,84,43,.42); }
.g4-pole.mor { border-color: rgba(233,168,60,.42); }
.g4-pole.cap.emph { box-shadow: 0 0 18px rgba(196,217,107,.2); }
.g4-pole.know.emph { box-shadow: 0 0 18px rgba(111,211,196,.2); }
.g4-pole.prob.emph { box-shadow: 0 0 18px rgba(217,84,43,.2); }
.g4-pole.mor.emph { box-shadow: 0 0 18px rgba(233,168,60,.2); }
.g4-pole-t {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; margin-bottom: 3px;
  font-weight: 700;
}
.g4-pole-t b { margin-right: 4px; opacity: .7; }
.g4-pole.cap .g4-pole-t { color: var(--signal); }
.g4-pole.know .g4-pole-t { color: var(--track); }
.g4-pole.prob .g4-pole-t { color: var(--fire); }
.g4-pole.mor .g4-pole-t { color: var(--flare); }
.g4-pole-s {
  font-size: 9px; color: var(--txt-3); margin-bottom: 8px; font-family: var(--mono);
}
.g4-nodes { display: flex; flex-wrap: wrap; gap: 5px; }
.g4-node {
  font-size: 10.5px; line-height: 1.35; text-align: left;
  padding: 5px 8px; border: 1px solid var(--line-soft);
  background: rgba(15,19,13,.65); color: var(--txt-2); cursor: pointer;
  font-family: inherit;
}
.g4-node:hover { border-color: var(--txt-3); }
.g4-node.on { background: rgba(52,66,44,.9); border-color: var(--txt-2); color: var(--txt-1); }
.g4-node.cap.on { border-color: var(--signal); }
.g4-node.know.on { border-color: var(--track); }
.g4-node.prob.on { border-color: var(--fire); }
.g4-node.mor.on { border-color: var(--flare); }

.g4-hub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 12px 8px;
  border: 1px solid var(--flare); background: rgba(233,168,60,.1);
  box-shadow: 0 0 22px rgba(233,168,60,.14);
}
.g4-hub-k { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--flare); }
.g4-hub-n { font-size: 12px; font-weight: 700; color: var(--txt-1); margin: 6px 0 4px; line-height: 1.35; }
.g4-hub-s { font-size: 9px; color: var(--txt-3); font-family: var(--mono); }

.g4-edges { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.g4-edge-hd {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px; color: var(--txt-3); margin-bottom: 7px;
}
.g4-edge-empty { font-size: 10.5px; color: var(--txt-3); padding: 6px 0; }
.g4-edge {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto auto minmax(0,1fr);
  gap: 4px 6px; align-items: baseline;
  padding: 7px 8px; margin-bottom: 5px;
  border: 1px solid transparent; background: rgba(35,45,30,.4);
  font-size: 10.5px; color: var(--txt-2);
}
.g4-edge.hot { border-color: rgba(233,168,60,.45); background: rgba(233,168,60,.08); }
.ge-dim {
  font-family: var(--mono); font-size: 9px; letter-spacing: .5px; padding: 0 4px;
  border: 1px solid var(--line-soft); color: var(--txt-3);
}
.ge-dim.cap { color: var(--signal); border-color: rgba(196,217,107,.35); }
.ge-dim.know { color: var(--track); border-color: rgba(111,211,196,.35); }
.ge-dim.prob { color: var(--fire); border-color: rgba(217,84,43,.35); }
.ge-dim.mor { color: var(--flare); border-color: rgba(233,168,60,.35); }
.ge-a { line-height: 1.35; }
.ge-a.cap { color: var(--signal); }
.ge-a.know { color: var(--track); }
.ge-a.prob { color: var(--fire); }
.ge-a.mor { color: var(--flare); }
.ge-arrow { color: var(--txt-3); font-size: 11px; text-align: center; }
.ge-why {
  grid-column: 1 / -1; font-size: 10px; color: var(--txt-3); line-height: 1.4;
  padding-left: 2px;
}


.g4-hd-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g4-mode { display: flex; gap: 0; border: 1px solid var(--line); }
.gm-btn {
  font-family: var(--mono); font-size: 10px; letter-spacing: .5px;
  padding: 4px 10px; border: 0; background: rgba(35,45,30,.75);
  color: var(--txt-3); cursor: pointer;
}
.gm-btn + .gm-btn { border-left: 1px solid var(--line); }
.gm-btn.on { background: rgba(233,168,60,.14); color: var(--flare); }

.g4-main { min-height: 120px; }

/* 知识图谱 */
.kg-wrap { border: 1px solid var(--line-soft); background: rgba(10,14,9,.55); }
.kg-legend {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10px; color: var(--txt-3);
}
.kg-legend i {
  display: inline-block; width: 18px; height: 2px; margin-right: 6px;
  vertical-align: middle;
}
.kg-legend i.hub { background: rgba(196,217,107,.45); }
.kg-legend i.cross { background: rgba(233,168,60,.7); height: 2px; box-shadow: 0 0 0 0.5px rgba(233,168,60,.3); }
.kg-stage { padding: 4px 6px 0; overflow: hidden; }
.kg-svg { width: 100%; height: auto; display: block; max-height: 520px; }
.kg-foot {
  padding: 7px 12px 9px; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10px; color: var(--txt-3);
}

.kg-e { fill: none; stroke-width: 1.2; }
.kg-e.hub { stroke: rgba(160,180,140,.28); }
.kg-e.hub.cap { stroke: rgba(196,217,107,.32); }
.kg-e.hub.know { stroke: rgba(111,211,196,.32); }
.kg-e.hub.prob { stroke: rgba(217,84,43,.32); }
.kg-e.hub.mor { stroke: rgba(233,168,60,.32); }
.kg-e.cross {
  stroke: rgba(233,168,60,.55); stroke-width: 1.6;
  stroke-dasharray: 5 4;
}
.kg-e.hot { stroke-width: 2.2; stroke: rgba(233,168,60,.95); stroke-dasharray: none; }
.kg-e.dim { opacity: .22; }

.kg-pole-lab {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  fill: var(--txt-3);
}
.kg-pole-lab.cap { fill: #C4D96B; }
.kg-pole-lab.know { fill: #6FD3C4; }
.kg-pole-lab.prob { fill: #D9542B; }
.kg-pole-lab.mor { fill: #E9A83C; }
.kg-pole-lab.dim { opacity: .35; }

.kg-hub { cursor: pointer; }
.kg-hub-ring { fill: none; stroke: rgba(233,168,60,.55); stroke-width: 1.5; }
.kg-hub-core { fill: rgba(35,45,30,.95); stroke: rgba(233,168,60,.85); stroke-width: 1.5; }
.kg-hub.on .kg-hub-core { fill: rgba(52,66,44,.98); }
.kg-hub-k { fill: #E9A83C; font-size: 9px; letter-spacing: 1px; }
.kg-hub-n { fill: #E8EDE0; font-size: 11px; font-weight: 700; }
.kg-hub-s { fill: #8A9480; font-size: 8px; }

.kg-node { cursor: pointer; }
.kg-node .kg-dot { fill: rgba(15,19,13,.9); stroke-width: 2; }
.kg-node.cap .kg-dot { stroke: #C4D96B; }
.kg-node.know .kg-dot { stroke: #6FD3C4; }
.kg-node.prob .kg-dot { stroke: #D9542B; }
.kg-node.mor .kg-dot { stroke: #E9A83C; }
.kg-node .kg-dot-in { fill: currentColor; opacity: .85; }
.kg-node.cap { color: #C4D96B; }
.kg-node.know { color: #6FD3C4; }
.kg-node.prob { color: #D9542B; }
.kg-node.mor { color: #E9A83C; }
.kg-node .kg-label {
  fill: #C5CDB8; font-size: 10px;
}
.kg-node.on .kg-dot { fill: rgba(52,66,44,.98); stroke-width: 2.5; }
.kg-node.on .kg-label { fill: #E8EDE0; font-weight: 700; }
.kg-node.dim { opacity: .28; }
.kg-node:hover .kg-dot { filter: brightness(1.15); }

.graph-side { margin: 0; }
.g4-node-title { font-size: 13px; font-weight: 700; color: var(--txt-1); margin: 4px 0 6px; }
.g4-side-dim {
  padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 10.5px; line-height: 1.4;
}
.g4-side-dim b { display: block; font-size: 10px; margin-bottom: 2px; font-family: var(--mono); letter-spacing: .5px; }
.g4-side-dim.cap b { color: var(--signal); }
.g4-side-dim.know b { color: var(--track); }
.g4-side-dim.prob b { color: var(--fire); }
.g4-side-dim.mor b { color: var(--flare); }
.g4-side-dim span { color: var(--txt-2); }
.g4-rel-hd {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--txt-3);
  margin: 10px 0 5px;
}
.g4-rel {
  font-size: 11px; color: var(--txt-2); padding: 5px 0; border-bottom: 1px solid var(--line-soft);
  line-height: 1.4;
}
.g4-rel span { display: block; font-size: 10px; color: var(--txt-3); margin-top: 2px; }
.graph-hint { font-size: 10px; color: var(--txt-3); margin-top: 8px; font-family: var(--mono); }
.g-courses { display: flex; flex-wrap: wrap; gap: 5px; }
.g-course {
  font-size: 10px; padding: 3px 7px; border: 1px solid var(--line-soft);
  color: var(--txt-2); background: rgba(35,45,30,.5); line-height: 1.35;
}
.g-trace {
  display: grid; grid-template-columns: auto auto 1fr; gap: 6px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 10.5px;
}
.gt-src { font-family: var(--mono); font-size: 9px; color: var(--track); white-space: nowrap; }
.gt-tag {
  font-family: var(--mono); font-size: 9px; color: var(--flare);
  border: 1px solid rgba(233,168,60,.35); padding: 0 5px; white-space: nowrap;
}
.gt-txt { color: var(--txt-2); line-height: 1.4; }

.push-box {
  margin-top: 4px; padding: 10px; border: 1px solid rgba(111,211,196,.28);
  background: rgba(111,211,196,.06);
}
.push-hd {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.3px; color: var(--track); margin-bottom: 4px;
}
.push-hint { font-size: 10.5px; color: var(--txt-2); line-height: 1.45; }
.push-box .btn:disabled { opacity: .4; cursor: not-allowed; }

.mastery {
  display: flex; gap: 12px; align-items: center; margin-bottom: 13px;
  padding: 9px 11px; border: 1px solid var(--line-soft); background: rgba(35,45,30,.6);
}
.ms-l { text-align: center; min-width: 46px; }
.ms-v { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1; color: var(--txt-3); }
.ms-lb { font-size: 9px; color: var(--txt-3); margin-top: 3px; font-family: var(--mono); }
.ms-r { flex: 1; border-left: 1px solid var(--line-soft); padding-left: 11px; }
.ms-k { font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px; color: var(--txt-3); margin-bottom: 3px; }
.ms-f { font-size: 10.5px; color: var(--txt-2); line-height: 1.5; }
.mastery.ok   { border-color: rgba(196,217,107,.34); }
.mastery.ok   .ms-v { color: var(--signal); }
.mastery.mid  { border-color: rgba(233,168,60,.34); }
.mastery.mid  .ms-v { color: var(--flare); }
.mastery.weak { border-color: rgba(217,84,43,.38); background: rgba(217,84,43,.08); }
.mastery.weak .ms-v { color: var(--fire); }

.dim-block { margin-bottom: 11px; }
.dim-t {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.4px;
  margin-bottom: 5px; display: flex; align-items: center; gap: 6px;
}
.dim-t::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.dim-t.cap  { color: var(--signal); }
.dim-t.know { color: var(--track); }
.dim-t.prob { color: var(--fire); }
.dim-t.mor  { color: var(--flare); }
.dim-li { font-size: 11px; color: var(--txt-2); padding: 3px 0 3px 11px; position: relative; line-height: 1.5; }
.dim-li::before { content: '·'; position: absolute; left: 2px; color: var(--txt-3); }


/* —— 闭环阅读 / 任务切片选择 —— */
.loop-formula {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 10px 12px; border: 1px solid rgba(233,168,60,.35);
  background: rgba(233,168,60,.07);
}
.lf-k { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--flare); margin-right: 6px; }
.lf-step {
  font-size: 11px; font-weight: 700; padding: 3px 8px;
  border: 1px solid var(--line-soft); background: rgba(15,19,13,.65);
}
.lf-step.cap { color: var(--signal); border-color: rgba(196,217,107,.4); }
.lf-step.slice { color: var(--flare); border-color: rgba(233,168,60,.5); }
.lf-step.know { color: var(--track); border-color: rgba(111,211,196,.4); }
.lf-step.prob { color: var(--fire); border-color: rgba(217,84,43,.4); }
.lf-step.mor { color: var(--flare); }
.lf-step.back { color: var(--txt-1); border-color: var(--txt-3); }
.lf-arr { color: var(--txt-3); font-size: 12px; }
.lf-tip { flex: 1 1 100%; font-size: 10px; color: var(--txt-3); font-family: var(--mono); margin-top: 2px; }

.dim-hero-lite { padding: 8px 10px; }
.dim-hero-lite .dim-hero-grid { gap: 8px; }
.dim-hero-lite .dim-hero-card { padding: 8px 10px; }
.dim-hero-lite .dh-n { font-size: 15px; }
.dim-hero-lite .dh-name { font-size: 12px; }

.graph-body-3 {
  grid-template-columns: minmax(200px, 240px) 1fr minmax(240px, 280px);
}
@media (max-width: 1100px) {
  .graph-body-3 { grid-template-columns: 1fr; }
}

.slice-picker { margin: 0; max-height: 720px; overflow: auto; }
.sp-bd { padding-top: 4px; }
.sp-flow { margin-bottom: 10px; }
.sp-flow-n {
  font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px;
  color: var(--txt-3); margin-bottom: 5px;
}
.sp-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 9px; margin-bottom: 6px; font-family: inherit;
  border: 1px solid var(--line-soft); background: rgba(35,45,30,.65); color: var(--txt-2);
}
.sp-item:hover { border-color: var(--txt-3); }
.sp-item.on { border-color: var(--flare); background: rgba(233,168,60,.1); }
.sp-item.weak { border-left: 2px solid var(--fire); }
.sp-item.ok { border-left: 2px solid var(--signal); }
.sp-item.mid { border-left: 2px solid var(--flare); }
.sp-item.lock { opacity: .55; }
.sp-task { font-size: 11px; font-weight: 700; color: var(--txt-1); line-height: 1.35; margin-bottom: 4px; }
.sp-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 9px; font-family: var(--mono); color: var(--txt-3); }
.sp-meta b.ok { color: var(--signal); }
.sp-meta b.mid { color: var(--flare); }
.sp-meta b.weak { color: var(--fire); }
.sp-meta b.lock { color: var(--txt-3); }

.cap-loop { padding: 4px 2px 8px; }
.loop-step {
  border: 1px solid var(--line-soft); background: rgba(35,45,30,.55); padding: 10px 12px;
  transition: opacity .15s, border-color .15s;
}
.loop-step.dimmed { opacity: .4; }
.loop-step.emph { box-shadow: 0 0 0 1px rgba(233,168,60,.35); }
.loop-step.cap { border-color: rgba(196,217,107,.35); }
.loop-step.know { border-color: rgba(111,211,196,.35); }
.loop-step.prob { border-color: rgba(217,84,43,.35); }
.loop-step.mor { border-color: rgba(233,168,60,.35); }
.loop-step.slice { border-color: rgba(233,168,60,.55); background: rgba(233,168,60,.08); }
.loop-step.back { border-color: rgba(196,217,107,.45); background: rgba(196,217,107,.06); }
.ls-hd { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.ls-no {
  font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--flare);
  min-width: 22px;
}
.loop-step.cap .ls-no { color: var(--signal); }
.loop-step.know .ls-no { color: var(--track); }
.loop-step.prob .ls-no { color: var(--fire); }
.ls-t { font-size: 13px; font-weight: 700; color: var(--txt-1); }
.ls-lead { font-size: 10.5px; color: var(--txt-3); margin-top: 2px; line-height: 1.4; }
.ls-nodes { display: flex; flex-direction: column; gap: 6px; }
.ls-nodes .g4-node {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 7px 9px;
}
.ls-nodes .g4-node b { font-size: 11px; color: var(--txt-1); font-weight: 700; }
.ls-nodes .g4-node span { font-size: 10px; color: var(--txt-3); line-height: 1.4; font-weight: 400; }
.ls-nodes .g4-node.static { cursor: default; opacity: 1; border-color: rgba(233,168,60,.4); }
.loop-arrow {
  text-align: center; color: var(--txt-3); font-size: 14px; padding: 2px 0; line-height: 1;
}
.loop-close-line {
  font-size: 11px; color: var(--txt-2); padding: 6px 8px;
  border: 1px dashed var(--line); background: rgba(15,19,13,.5); line-height: 1.45;
}

/* ============================================================
 * 协同浮窗
 * ============================================================ */
.flyout {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 330px;
  border: 1px solid rgba(111,211,196,.4); background: rgba(19,26,17,.97);
  box-shadow: 0 10px 40px rgba(0,0,0,.65);
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s;
}
.flyout.on { transform: translateY(0); opacity: 1; }
.flyout-hd {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid rgba(111,211,196,.22); background: rgba(111,211,196,.07);
}
.flyout-hd .fh-t {
  font-size: 10.5px; font-weight: 700; color: var(--track);
  letter-spacing: 1.2px; flex: 1;
}
.flyout-bd { padding: 10px 12px; max-height: 210px; overflow-y: auto; }
.flyout-bd::-webkit-scrollbar { width: 4px; }
.flyout-bd::-webkit-scrollbar-thumb { background: var(--line); }
.fly-line {
  display: flex; gap: 8px; font-size: 10.5px; line-height: 1.5;
  padding: 4px 0; color: var(--txt-2);
  animation: fly-in .3s ease-out backwards;
}
@keyframes fly-in { from { opacity: 0; transform: translateX(-10px); } }
.fly-t { flex: 0 0 40px; font-family: var(--mono); font-size: 9px; color: var(--txt-3); }
.fly-x { flex: 1; }
.fly-x b { color: var(--track); font-weight: 600; }
.fly-x i { color: var(--flare); font-style: normal; }

/* 旧固定角标入口已废弃（并入情境条），保留选择器避免残留样式干扰 */
.demo-nav[hidden] { display: none !important; }

/* ---------- 关卡课次抽屉 ---------- */
.stage-drawer {
  position: fixed; right: 16px; top: 64px; z-index: 90;
  width: min(380px, calc(100vw - 32px)); max-height: min(78vh, 640px);
  display: flex; flex-direction: column;
  border: 1px solid rgba(233,168,60,.45);
  background: rgba(19,26,17,.98);
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.stage-drawer[hidden] { display: none !important; }
.sd-hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 14px 8px; border-bottom: 1px solid var(--line-soft);
}
.sd-code {
  font-family: var(--mono); font-size: 10px; color: var(--flare); letter-spacing: 1.4px;
}
.sd-name { font-size: 16px; font-weight: 700; color: var(--signal); margin-top: 2px; }
.sd-close {
  width: 26px; height: 26px; border: 1px solid var(--line-soft);
  background: transparent; color: var(--txt-3); cursor: pointer; font-size: 16px; line-height: 1;
}
.sd-close:hover { color: var(--flare); border-color: var(--flare); }
.sd-blurb {
  padding: 8px 14px; font-size: 11.5px; color: var(--txt-2); line-height: 1.55;
  border-bottom: 1px solid var(--line-soft); background: rgba(35,45,30,.45);
}
.sd-prog { padding: 10px 14px 8px; border-bottom: 1px solid var(--line-soft); }
.sd-prog-bar {
  height: 4px; background: rgba(47,59,39,.9); border: 1px solid var(--line-soft); margin-bottom: 6px;
}
.sd-prog-bar span {
  display: block; height: 100%; background: linear-gradient(90deg, var(--flare), var(--signal));
}
.sd-prog-meta { font-size: 10.5px; font-family: var(--mono); color: var(--txt-3); }
.sd-bd { flex: 1; overflow-y: auto; padding: 8px 10px 12px; }
.sd-bd::-webkit-scrollbar { width: 4px; }
.sd-bd::-webkit-scrollbar-thumb { background: var(--line); }
.sd-chap { margin-bottom: 10px; }
.sd-chap-n {
  font-size: 10px; font-family: var(--mono); color: var(--flare);
  letter-spacing: .8px; padding: 6px 6px 5px;
}
.sd-lesson {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 8px 8px; margin-bottom: 4px;
  border: 1px solid var(--line-soft); background: rgba(15,19,13,.88);
  color: var(--txt-2); text-align: left; cursor: pointer;
}
.sd-lesson:hover { border-color: rgba(196,217,107,.4); }
.sd-lesson.on { border-color: var(--flare); background: rgba(233,168,60,.1); }
.sd-lesson.done { border-color: rgba(111,211,196,.25); }
.sd-lesson.locked { opacity: .42; cursor: not-allowed; }
.sdl-sec {
  flex: 0 0 44px; font-family: var(--mono); font-size: 10px; color: var(--txt-3); padding-top: 2px;
}
.sdl-main { flex: 1; min-width: 0; }
.sdl-main b { display: block; font-size: 12.5px; font-weight: 650; color: var(--txt); }
.sdl-main i { display: block; font-style: normal; font-size: 10px; font-family: var(--mono); color: var(--txt-3); margin-top: 2px; }
.sdl-st {
  flex: 0 0 auto; font-family: var(--mono); font-size: 10px; color: var(--txt-3); padding-top: 2px;
}
.sd-lesson.current .sdl-st, .sd-lesson.on .sdl-st { color: var(--flare); }
.sd-lesson.done .sdl-st { color: var(--track); }
.sd-ft {
  padding: 10px 14px; border-top: 1px solid var(--line-soft);
}
.sd-ft .btn { width: 100%; text-align: center; }

/* ---------- 智能体回溯面板 ---------- */
.agent-trace {
  position: fixed; left: 14px; bottom: 18px; z-index: 88;
  width: 340px; max-height: min(62vh, 520px);
  display: flex; flex-direction: column;
  border: 1px solid rgba(196,217,107,.4);
  background: rgba(19,26,17,.97);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.agent-trace[hidden] { display: none !important; }
.body-row:not(.console-off) .agent-trace { left: 282px; }
.at-hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 14px 8px; border-bottom: 1px solid var(--line-soft);
}
.at-code {
  font-family: var(--mono); font-size: 10px; color: var(--flare); letter-spacing: 1.4px;
}
.at-name { font-size: 15px; font-weight: 700; color: var(--signal); margin-top: 2px; }
.at-close {
  width: 26px; height: 26px; border: 1px solid var(--line-soft);
  background: transparent; color: var(--txt-3); cursor: pointer; font-size: 16px; line-height: 1;
}
.at-close:hover { color: var(--signal); border-color: var(--signal); }
.at-duty {
  padding: 8px 14px; font-size: 11.5px; color: var(--txt-2); line-height: 1.55;
  border-bottom: 1px solid var(--line-soft); background: rgba(35,45,30,.45);
}
.at-bd { flex: 1; overflow-y: auto; padding: 10px 14px; }
.at-bd::-webkit-scrollbar { width: 4px; }
.at-bd::-webkit-scrollbar-thumb { background: var(--line); }
.at-sec {
  font-family: var(--mono); font-size: 9px; color: var(--txt-3);
  letter-spacing: 1.2px; margin: 2px 0 7px;
}
.at-row {
  display: flex; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid rgba(47,59,39,.7);
  font-size: 12px; color: var(--txt); line-height: 1.45;
}
.at-row:last-child { border-bottom: none; }
.at-k { flex: 0 0 72px; color: var(--txt-3); font-family: var(--mono); font-size: 10px; }
.at-v { flex: 1; min-width: 0; }
.at-v b { color: var(--signal); font-weight: 600; }
.at-v .warn { color: var(--fire); }
.at-v .ok { color: var(--track); }
.at-note {
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--line-soft); background: rgba(27,35,24,.6);
  font-size: 11.5px; color: var(--txt-2); line-height: 1.55;
}
.at-ft {
  padding: 10px 14px; border-top: 1px solid var(--line-soft);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.at-ft .btn { flex: 1; min-width: 120px; text-align: center; }

/* ---------- 投影模式：字号抬升、对比加强、按钮加大 ---------- */
body.proj {
  font-size: 16px;
  --txt: #F2F5EC;
  --txt-2: #C5D0B4;
  --txt-3: #9AAB82;
  --line: #4A5C3C;
  --line-soft: #3A4A30;
}
body.proj .brand-txt h1 { font-size: 17px; }
body.proj .stage-cell .sc-name { font-size: 13.5px; }
body.proj .stage-cell .sc-meta { font-size: 11px; }
body.proj .ctx-title { font-size: 16px; }
body.proj .phase-seg-btn { font-size: 14px; min-width: 88px; padding: 7px 24px; }
body.proj .seg-dot .sd-name { font-size: 12px; }
body.proj .seg-rail-clock b { font-size: 17px; }
body.proj .lesson-meta { font-size: 12.5px; }
body.proj .phase-name { font-size: 16px; }
body.proj .phase-no,
body.proj .phase-sub { font-size: 11px; }
body.proj .phase { padding: 15px 18px; }
body.proj .btn {
  font-size: 14px; padding: 11px 18px;
}
body.proj .panel-hd h3 { font-size: 14px; }
body.proj .item-t { font-size: 13.5px; }
body.proj .msg-tx { font-size: 14px; }
body.proj .teacher-box .tb-txt { font-size: 14px; }
body.proj .verdict-score { font-size: 52px; }
body.proj .demo-btn { font-size: 12.5px; }
body.proj .agent-name { font-size: 13px; }
body.proj .agent-task { font-size: 11px; }
body.proj .sim-banner { font-size: 13px; padding: 9px 14px; }
body.proj .at-name { font-size: 17px; }
body.proj .at-duty,
body.proj .at-row { font-size: 13px; }

.fade-in { animation: fade-in .32s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }