/* ==========================================================================
   sim.css · 业务场景仿真模块样式
   --------------------------------------------------------------------------
   设计原则：
     · 三维视窗是「明亮展厅」，所以 HUD 必须用浅色毛玻璃，
       而不是暗色面板 —— 深色面板压在白色展厅上会像贴了一块膏药。
     · HUD 只做「浮在场景上的导览层」：半透明白 + 细边框 + 柔和投影，
       保证在白色地面、玻璃、木饰面上都读得清，又不遮住建筑。
     · 状态色单一来源（--sim-st-*），与 scene.js 的 STATUS_HEX 逐项一致。
   ========================================================================== */

:root{
  /* 明亮展厅底色：与 scene.js 的 C.sky 同值 */
  --sim-bg:#eef3f8;
  --sim-panel:rgba(255,255,255,.78);
  --sim-line:rgba(120,150,180,.24);
  --sim-ink:#243040;
  --sim-dim:#617385;
  --sim-gold:#a8824d;

  /* 环节状态：与 scene.js 的 STATUS_HEX 完全一致 */
  --sim-st-locked:#94a3b8;
  --sim-st-todo:#0ea5e9;
  --sim-st-doing:#f59e0b;
  --sim-st-review:#8b5cf6;
  --sim-st-passed:#10b981;
  --sim-st-rejected:#ef4444;
}

/* ------------------------------------------------------------------ 骨架 */
.sim-wrap{
  display:flex;flex-direction:column;gap:12px;
  height:calc(100vh - var(--top-h) - 46px);min-height:620px;
}
.sim-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);
  padding:10px 14px;box-shadow:var(--sh1);
}
.sim-head .sh-t{display:flex;flex-direction:column;gap:2px;min-width:180px}
.sim-head .sh-t b{font-size:15px;color:var(--t1);letter-spacing:.2px}
.sim-head .sh-t span{font-size:11.8px;color:var(--t3)}
.sim-head .sp{flex:1}
.sim-head .sel-run{
  height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--t1);font-size:12.6px;padding:0 8px;max-width:280px;
}
.sim-body{display:flex;gap:12px;flex:1;min-height:0}

/* 左侧：三维展厅 */
.sim-stage{
  position:relative;flex:1;min-width:0;border-radius:var(--r2);overflow:hidden;
  background:linear-gradient(180deg,#f4f8fc 0%,#e6eef7 100%);
  border:1px solid #dbe5ef;box-shadow:0 2px 10px rgba(40,70,100,.07);
}
.sim-viewport{position:absolute;inset:0}
/* 让 WebGL 画布自成一个合成层：上层浮层刷新时不会带着整块画布重绘，
   也避免触控板/触屏拖动时与页面滚动抢手势（touch-action:none）。 */
.sim-canvas{display:block;width:100%;height:100%;transform:translateZ(0);touch-action:none}

/* HUD：导览层
   注意：这里刻意不使用 backdrop-filter。面板压在持续重绘的 WebGL 画布上时，
   毛玻璃会让合成器每帧重新采样并模糊背景，在 Windows + 核显上表现为拖动时
   整片界面闪动；改成高不透明度实色 + 内高光，观感几乎一致但零模糊开销。 */
.sim-hud{
  position:absolute;left:14px;top:12px;z-index:3;pointer-events:none;
  max-width:352px;padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.94);
  border:1px solid #e6eef7;
  box-shadow:0 6px 24px rgba(38,66,96,.10),inset 0 1px 0 rgba(255,255,255,.95);
  color:var(--sim-ink);
}
.sim-hud .h-k{font-family:var(--mono);font-size:9.8px;letter-spacing:2.2px;color:var(--sim-gold)}
.sim-hud .h-n{font-size:16.5px;font-weight:600;margin-top:3px;color:#182430;letter-spacing:.2px}
.sim-hud .h-d{font-size:11.5px;color:#5b6d80;margin-top:4px;line-height:1.55}
.sim-hud .h-code{
  display:inline-flex;gap:6px;align-items:center;margin-top:9px;
  font-family:var(--mono);font-size:10.4px;color:#3d5063;
  background:rgba(255,255,255,.85);border:1px solid #e3ebf4;
  border-radius:6px;padding:3px 8px;
}
.sim-hud .h-code i{width:5px;height:5px;border-radius:50%;background:var(--sim-st-todo);box-shadow:0 0 7px var(--sim-st-todo)}
.sim-hud .h-tip{
  display:flex;gap:5px;align-items:center;margin-top:8px;
  font-size:10.4px;color:#8092a4;letter-spacing:.1px;
}
.sim-hud .h-tip b{font-weight:500;color:#6b7f92}

/* 运行时面板 */
.sim-runtime{
  position:absolute;right:14px;top:12px;z-index:3;width:174px;
  background:rgba(255,255,255,.95);
  border:1px solid #e6eef7;border-radius:10px;
  padding:9px 11px;
  box-shadow:0 6px 24px rgba(38,66,96,.10),inset 0 1px 0 rgba(255,255,255,.95);
  font-family:var(--mono);font-size:10.6px;color:#4d6073;
}
.sim-runtime .rt-h{display:flex;justify-content:space-between;align-items:center;color:var(--sim-gold);
  font-size:9.8px;letter-spacing:1.4px;margin-bottom:6px}
.sim-runtime .rt-h b{font-weight:600}
.sim-runtime .rt-h i{width:5px;height:5px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;animation:simPulse 1.6s infinite}
.sim-runtime .rt-r{display:flex;justify-content:space-between;padding:2.5px 0;border-bottom:1px dashed rgba(120,150,180,.16)}
.sim-runtime .rt-r:last-child{border-bottom:none}
.sim-runtime .rt-r span{color:#7c8e9f}
.sim-runtime .rt-r b{color:#22303d;font-weight:600}
.sim-runtime .rt-f{margin-top:6px;padding-top:6px;border-top:1px solid rgba(120,150,180,.18);
  color:#3f8f68;font-size:9.4px;letter-spacing:.2px}

/* 图例 */
.sim-legend{
  position:absolute;left:14px;bottom:74px;z-index:3;display:flex;gap:10px;flex-wrap:wrap;
  background:rgba(255,255,255,.94);
  border:1px solid #e6eef7;border-radius:9px;
  padding:6px 10px;font-size:10.4px;color:#4d6073;max-width:calc(100% - 28px);
  box-shadow:0 3px 14px rgba(38,66,96,.08);
}
.sim-legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:1px}
.sim-legend em{font-style:normal;margin-right:8px}

/* 底部时间轴 */
.sim-timeline{
  position:absolute;left:14px;right:14px;bottom:12px;z-index:3;
  display:flex;align-items:center;gap:0;overflow-x:auto;overflow-y:hidden;
  background:rgba(255,255,255,.95);
  border:1px solid #e6eef7;border-radius:11px;
  padding:8px 11px;
  box-shadow:0 6px 24px rgba(38,66,96,.10);
}
.sim-timeline::-webkit-scrollbar{height:5px}
.sim-timeline::-webkit-scrollbar-thumb{background:#cbd8e6;border-radius:3px}
.sim-tl{
  flex:0 0 auto;display:flex;align-items:center;cursor:pointer;
  padding:2px 2px;border-radius:7px;transition:background .15s;
}
.sim-tl:hover{background:rgba(37,99,235,.06)}
.sim-tl.on{background:rgba(14,165,233,.11)}
.sim-tl .dot{
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9.6px;color:#fff;flex:0 0 auto;
  box-shadow:0 1px 3px rgba(30,50,70,.18);
}
.sim-tl .tx{font-size:10.6px;color:#3d4f61;margin:0 8px 0 6px;white-space:nowrap}
.sim-tl .ar{width:14px;height:1px;background:linear-gradient(90deg,#cfdcea,#aebfd2);flex:0 0 auto}

/* HTML 标注：白色卡片 + 状态色左条，压在浅色场景上也不糊 */
.sim-labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.sim-label{
  position:absolute;left:0;top:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:3px 8px;border-radius:7px;
  background:rgba(255,255,255,.95);
  border:1px solid #e2eaf3;
  border-left:2.5px solid var(--lb,var(--sim-st-todo));
  transform:translate3d(-9999px,-9999px,0);
  transition:opacity .12s,box-shadow .2s;white-space:nowrap;
  box-shadow:0 3px 12px rgba(38,66,96,.16);
}
.sim-label b{font-family:var(--mono);font-size:9.2px;color:var(--lb,var(--sim-st-todo));letter-spacing:.5px;font-weight:600}
.sim-label span{font-size:11px;color:#2a3746;font-weight:500}
.sim-label.on{box-shadow:0 0 0 1.5px var(--lb),0 8px 22px rgba(38,66,96,.22)}

/* 降级提示 */
.sim-fallback{display:flex;align-items:center;justify-content:center;padding:30px}
.sim-fb{max-width:420px;text-align:center;color:#5b6d80}
.sim-fb-t{font-size:15px;font-weight:600;color:#22303d;margin-bottom:8px}
.sim-fb-d{font-size:12.4px;line-height:1.7}

/* 右侧控制台 */
.sim-console{
  width:396px;flex:0 0 396px;display:flex;flex-direction:column;min-height:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:var(--sh1);overflow:hidden;
}
.sim-console .tabs{padding:0 8px;flex:0 0 auto}
.sim-console .tabs button{font-size:12.4px;padding:9px 9px}
.sim-panel{flex:1;overflow-y:auto;padding:12px 13px 18px}
.sim-panel::-webkit-scrollbar{width:7px}
.sim-panel::-webkit-scrollbar-thumb{background:#d5e0ef;border-radius:4px}

/* 环节列表 */
.sim-nodes{display:flex;flex-direction:column;gap:7px}
.sim-node{
  display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel2);cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.sim-node:hover{border-color:#c9d9ee;box-shadow:var(--sh1)}
.sim-node.on{border-color:var(--c-primary);box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.sim-node.dim{opacity:.62}
.sim-node .no{
  width:24px;height:24px;border-radius:7px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;color:#fff;background:var(--t3);
}
.sim-node .nb{flex:1;min-width:0}
.sim-node .nb b{display:block;font-size:12.8px;color:var(--t1);font-weight:600;line-height:1.4}
.sim-node .nb i{display:block;font-size:11px;color:var(--t3);font-style:normal;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-node .nr{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}

/* 环节详情 */
.sim-detail .dt-h{display:flex;align-items:flex-start;gap:8px;margin-bottom:2px}
.sim-detail .dt-h b{font-size:14.4px;color:var(--t1);line-height:1.4}
.sim-detail .dt-code{font-family:var(--mono);font-size:10.4px;color:var(--c-primary);letter-spacing:.6px}
.sim-sec{margin-top:13px}
.sim-sec-t{display:flex;align-items:center;gap:6px;font-size:11.6px;color:var(--t3);
  font-weight:600;letter-spacing:.3px;margin-bottom:7px}
.sim-sec-t::after{content:'';flex:1;height:1px;background:var(--line)}
/* 「草稿已保留」：告诉学生重绘/预检后内容没丢，不用重填 */
.sim-sec-t .dt-draft{
  flex:none;margin-left:2px;padding:1px 6px;border-radius:20px;
  background:#ecfdf5;border:1px solid #bbf7d0;color:#15803d;
  font-size:9.8px;font-weight:600;letter-spacing:.2px;
}
.sim-sec p{font-size:12.4px;color:var(--t2);line-height:1.72;margin:0}
.sim-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.4px;color:var(--t2)}
.sim-flow .fl{
  display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;
  background:#eff5ff;border:1px solid #dbe7fb;color:#2c5fd0;font-size:11px;
}
.sim-flow .fl.ok{background:#e9fbf3;border-color:#c8f0de;color:#0a7c56}
.sim-flow .fl.wait{background:#f3f6fb;border-color:#e5ecf6;color:#6b7f9c}

/* 表单 */
.sim-form{display:flex;flex-direction:column;gap:9px}
.sim-field{display:flex;flex-direction:column;gap:4px}
.sim-field label{font-size:11.6px;color:var(--t2);display:flex;gap:4px;align-items:center}
.sim-field label em{color:var(--c-rose);font-style:normal}
.sim-field .unit{font-size:11px;color:var(--t3);font-weight:400}
.sim-field .inp,.sim-field select,.sim-field textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:7px 9px;font-size:12.6px;color:var(--t1);font-family:var(--font);
}
.sim-field .inp:focus,.sim-field select:focus,.sim-field textarea:focus{
  outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(37,99,235,.10)
}
.sim-field textarea{min-height:58px;resize:vertical;line-height:1.6}
.sim-field .hint{font-size:10.8px;color:var(--t3);line-height:1.5}
.sim-field.ro .inp,.sim-field.ro select,.sim-field.ro textarea{background:#f7f9fd;color:var(--t2)}
.sim-field.err .inp,.sim-field.err select,.sim-field.err textarea{border-color:var(--c-rose);background:#fff7f9}

.sim-err{
  margin-top:8px;border:1px solid #fbd6df;background:#fff5f7;border-radius:8px;
  padding:8px 10px;font-size:11.8px;color:#b3173f;line-height:1.6;
}
.sim-err b{display:block;margin-bottom:3px}
.sim-err ul{margin:4px 0 0 16px;padding:0}
.sim-ok{
  margin-top:8px;border:1px solid #c8f0de;background:#f2fdf8;border-radius:8px;
  padding:8px 10px;font-size:11.8px;color:#0a7c56;line-height:1.6;
}
.sim-rules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.sim-rules li{
  font-size:11.4px;color:var(--t2);line-height:1.55;padding-left:16px;position:relative;
}
.sim-rules li::before{
  content:'';position:absolute;left:2px;top:6px;width:6px;height:6px;border-radius:2px;
  background:#c3d3e8;transform:rotate(45deg);
}

.sim-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.sim-actions .btn{font-size:12.2px}

/* 提示条 */
.sim-note{
  display:flex;gap:8px;padding:9px 11px;border-radius:9px;font-size:11.8px;line-height:1.6;
  border:1px solid #dbe7fb;background:#f4f8ff;color:#2c5fd0;
}
.sim-note.warn{border-color:#fce4ba;background:#fffbf2;color:#9a6106}
.sim-note.ok{border-color:#c8f0de;background:#f3fdf8;color:#0a7c56}
.sim-note .ic{flex:0 0 auto}

/* 岗位卡 */
.sim-seat{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel2);margin-bottom:7px;
}
.sim-seat .cl{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.sim-seat .sb{flex:1;min-width:0}
.sim-seat .sb b{font-size:12.6px;color:var(--t1);display:block}
.sim-seat .sb i{font-size:10.9px;color:var(--t3);font-style:normal;display:block;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 事件流 */
.sim-events{display:flex;flex-direction:column;gap:0;position:relative;padding-left:14px}
.sim-events::before{content:'';position:absolute;left:3px;top:6px;bottom:6px;width:1px;background:var(--line)}
.sim-ev{position:relative;padding:6px 0 8px}
.sim-ev::before{
  content:'';position:absolute;left:-14px;top:11px;width:7px;height:7px;border-radius:50%;
  background:#cbd8ea;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);
}
.sim-ev.reject::before{background:var(--sim-st-rejected)}
.sim-ev.pass::before{background:var(--sim-st-passed)}
.sim-ev.hint::before{background:var(--sim-st-doing)}
.sim-ev.invalid::before{background:#94a3b8}
.sim-ev .ev-t{font-size:10.6px;color:var(--t3);font-family:var(--mono)}
.sim-ev .ev-x{font-size:11.9px;color:var(--t2);line-height:1.6;margin-top:1px}
.sim-ev .ev-x b{color:var(--t1);font-weight:600}

/* 审核队列 */
.sim-review{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:9px;background:var(--panel2)}
.sim-review .rv-h{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.sim-review .rv-h b{font-size:12.8px;color:var(--t1)}
.sim-review .rv-m{font-size:11px;color:var(--t3);margin-bottom:7px}
.sim-kv{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:11.4px;margin-bottom:8px}
.sim-kv div{color:var(--t2);overflow:hidden;text-overflow:ellipsis}
.sim-kv div b{color:var(--t1);font-weight:600}

/* 统计 */
.sim-bar{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:11.6px}
.sim-bar .bn{flex:0 0 96px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-bar .bt{flex:1;height:6px;border-radius:3px;background:#eef3fa;overflow:hidden}
.sim-bar .bt i{display:block;height:100%;border-radius:3px;background:var(--grad)}
.sim-bar .bv{flex:0 0 44px;text-align:right;font-family:var(--mono);font-size:10.8px;color:var(--t2)}

/* 场景库 */
.sim-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:13px}
.sim-card{
  border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);overflow:hidden;
  box-shadow:var(--sh1);transition:transform .18s,box-shadow .18s,border-color .18s;
}
.sim-card:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:#c9d9ee}
.sim-card .sc-top{
  padding:13px 14px 11px;background:linear-gradient(135deg,#f3f7ff 0%,#f7fbfd 100%);
  border-bottom:1px solid var(--line);
}
.sim-card .sc-k{
  font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:var(--c-primary);
}
.sim-card .sc-n{font-size:15px;font-weight:600;color:var(--t1);margin-top:3px}
.sim-card .sc-s{font-size:11.6px;color:var(--t3);margin-top:4px;line-height:1.55}
.sim-card .sc-b{padding:12px 14px 14px}
.sim-card .sc-o{font-size:11.8px;color:var(--t2);line-height:1.7;min-height:58px}
.sim-card .sc-m{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.sim-chip{
  display:inline-flex;align-items:center;gap:4px;font-size:10.8px;padding:2px 7px;
  border-radius:20px;background:#f3f6fb;border:1px solid #e5ecf6;color:#5b708c;
}
.sim-chip.gold{background:#fff8ea;border-color:#fce4ba;color:#9a6106}
.sim-chip.blue{background:#eef4ff;border-color:#d9e5fb;color:#2c5fd0}
.sim-card .sc-f{display:flex;gap:8px;margin-top:11px}

/* 加入码 */
.sim-join{
  display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:var(--r2);
  background:linear-gradient(135deg,#eef5ff,#f4fbfd);border:1px dashed #c6d9f2;
}
.sim-join .ji{flex:0 0 auto;color:var(--c-primary)}
.sim-join .jt{flex:1;min-width:0}
.sim-join .jt b{display:block;font-size:12.8px;color:var(--t1)}
.sim-join .jt span{font-size:11.2px;color:var(--t3)}
.sim-join input{
  width:104px;text-align:center;font-family:var(--mono);font-size:15px;letter-spacing:3px;
  text-transform:uppercase;border:1px solid var(--line);border-radius:8px;padding:7px 6px;
}
.sim-join input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(37,99,235,.10)}

/* 空态/加载 */
.sim-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:44px 20px;text-align:center;color:var(--t3);
}
.sim-empty b{font-size:14px;color:var(--t1)}
.sim-empty span{font-size:12px;line-height:1.7;max-width:340px}

@keyframes simPulse{0%,100%{opacity:1}50%{opacity:.35}}

@media (max-width:1180px){
  .sim-console{width:340px;flex:0 0 340px}
  .sim-runtime{display:none}
}
@media (max-width:900px){
  .sim-body{flex-direction:column}
  .sim-console{width:auto;flex:1 1 auto;min-height:320px}
  .sim-stage{min-height:420px}
  .sim-wrap{height:auto}
}

/* 场景说明弹窗（比默认 w520 宽，容纳环节表） */
.modal.w880{width:880px;max-width:94vw}