/* ============================================================================
 * 05-动态演示版 · styles.css —— 深色大屏演示中枢
 * 设计 token 取自 CONTRACT §10 / §6；金额单位=分（展示用 YY.fmt.money）
 * ==========================================================================*/
:root{
  --bg:#0B1020; --bg-2:#111731; --bg-3:#161E3D; --line:#243057; --line-2:#2E3B66;
  --txt:#EAF0FF; --txt-2:#A9B6D6; --txt-3:#6C7AA3;
  --pri:#4D94FF; --pri-d:#1F6FEB; --pri-w:rgba(77,148,255,.14);
  --ok:#3DD68C; --warn:#FFB020; --err:#FF5A5F; --gold:#FFCC66;
  --s-pending:#FAAD14; --s-confirmed:#4D94FF; --s-arrived:#2CD4D4; --s-verified:#3DD68C;
  --s-partial:#FA8C16; --s-cancel:#8C8C8C; --s-noshow:#FF5A5F; --s-resched:#A66BFF; --s-expired:#7A839B;
  --radius:14px; --radius-sm:9px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  background:radial-gradient(1200px 700px at 20% -10%,#16204a 0%,transparent 55%),
             radial-gradient(1000px 600px at 100% 110%,#241633 0%,transparent 50%),
             var(--bg);
  color:var(--txt); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer}
code{font-family:ui-monospace,Menlo,Consolas,monospace}
.mini{font-size:11px;color:var(--txt-3)}
.hint{font-size:11.5px;color:var(--txt-3);margin-top:8px;line-height:1.5}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2b3762;border-radius:9px}

/* ---------- 外壳 ---------- */
.hub{height:100vh;display:flex;flex-direction:column}
.hub-top{
  height:62px;flex:0 0 62px;display:flex;align-items:center;gap:18px;padding:0 20px;
  background:linear-gradient(180deg,rgba(20,27,58,.96),rgba(15,21,46,.9));
  border-bottom:1px solid var(--line); backdrop-filter:blur(6px); z-index:20;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FF3B5C,#FF6B3D);color:#fff;font-weight:800;font-size:19px;
  box-shadow:0 6px 18px rgba(255,59,92,.35)}
.bt{font-size:16px;font-weight:700;letter-spacing:.2px}
.bs{font-size:11.5px;color:var(--txt-3)}
.step-indicator{
  flex:1;text-align:center;font-size:15px;font-weight:600;color:var(--gold);
  letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.top-right{display:flex;align-items:center;gap:10px}
.rev-chip{font-size:12px;color:var(--pri);background:var(--pri-w);padding:5px 12px;border-radius:999px;
  font-family:ui-monospace,monospace;border:1px solid rgba(77,148,255,.3)}

/* ---------- 主体三栏 ---------- */
.hub-main{flex:1;display:flex;gap:14px;padding:14px;min-height:0}
.hub-left{width:262px;flex:0 0 262px;display:flex;flex-direction:column;gap:12px;min-height:0}
.hub-right{width:330px;flex:0 0 330px;display:flex;flex-direction:column;gap:12px;min-height:0}
.hub-stage{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}

.panel{background:linear-gradient(180deg,rgba(22,30,61,.9),rgba(17,23,49,.9));border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.panel.grow{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.panel-t{font-size:12.5px;font-weight:700;color:var(--txt-2);letter-spacing:.5px;margin-bottom:10px;
  text-transform:uppercase;display:flex;align-items:center;gap:8px}
.panel-t .mini{margin-left:auto;text-transform:none;letter-spacing:0}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--txt);
  border-radius:var(--radius-sm);font-size:13px;transition:.18s}
.btn:hover{border-color:var(--pri);color:#fff;background:var(--pri-w)}
.btn.primary{background:linear-gradient(135deg,#1F6FEB,#4D94FF);border-color:transparent;color:#fff;font-weight:600}
.btn.primary:hover{box-shadow:0 8px 22px rgba(31,111,235,.45)}
.btn.danger{border-color:rgba(255,90,95,.5);color:#FF8A8E}
.btn.danger:hover{background:rgba(255,90,95,.14);border-color:var(--err);color:#fff}
.btn.ghost{background:transparent;border-color:var(--line-2)}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.ctl-group{display:flex;flex-direction:column;gap:8px}
.ctl-row{display:flex;gap:8px}
.ctl-row .btn{flex:1}

/* ---------- 模式切换 ---------- */
.mode-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.mode-lb{font-size:12px;color:var(--txt-2)}
.seg{display:flex;background:rgba(0,0,0,.28);border-radius:999px;padding:3px}
.seg button{border:none;background:transparent;color:var(--txt-2);font-size:11.5px;padding:5px 11px;border-radius:999px}
.seg button.on{background:var(--pri);color:#fff;font-weight:600}

/* ---------- 步骤列表 ---------- */
.steps{list-style:none;overflow-y:auto;flex:1;margin:-4px}
.steps li{padding:9px 10px;border-radius:var(--radius-sm);font-size:13px;color:var(--txt-2);cursor:pointer;
  display:flex;gap:9px;align-items:flex-start;transition:.15s;border:1px solid transparent}
.steps li:hover{background:rgba(255,255,255,.04)}
.steps li .n{width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px}
.steps li.active{background:var(--pri-w);color:#fff;border-color:rgba(77,148,255,.4)}
.steps li.active .n{background:var(--pri);color:#fff}
.steps li.done .n{background:var(--ok);color:#06251a}
.steps li.done{color:var(--txt-3)}
.steps li .st-t{font-weight:600;color:inherit;flex:1;min-width:0}
.steps li .ni{flex:0 0 auto;font-size:9.5px;line-height:1.6;padding:0 5px;border-radius:999px;font-weight:700;
  border:1px solid transparent;white-space:nowrap}
.steps li .ni.new{color:#8FD6A9;border-color:rgba(63,214,140,.45);background:rgba(63,214,140,.14)}
.steps li .ni.tune{color:#FFD98A;border-color:rgba(255,204,102,.45);background:rgba(255,204,102,.14)}
.steps li .ni.off{color:#FF9A9E;border-color:rgba(255,90,95,.45);background:rgba(255,90,95,.14)}

.rev-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px}
.rev-row b{font-family:ui-monospace,monospace;color:var(--gold)}

/* ---------- 四宫格 ---------- */
.panes{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.pane{background:linear-gradient(180deg,rgba(22,30,61,.92),rgba(15,20,44,.92));border:1px solid var(--line);
  border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s, box-shadow .35s, border-color .35s}
.pane-h{height:34px;flex:0 0 34px;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:12.5px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.pane-h .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.pane-h .pr{margin-left:auto;font-size:11px;color:var(--txt-3)}
.pane-b{flex:1;position:relative;background:#fff;min-height:0}
.pane-b iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pane.dim{opacity:.42;transform:scale(.965);filter:saturate(.7)}
.pane.spot{opacity:1;transform:scale(1.012);border-color:var(--pri);
  box-shadow:0 0 0 2px rgba(77,148,255,.5),0 0 40px rgba(77,148,255,.35)}
.pane.spot .pane-h{background:var(--pri-w)}
.pane.spot .dot{animation:pulse-dot 1s infinite}
@keyframes pulse-dot{50%{transform:scale(1.5);opacity:.5}}

/* 纯动画模式：隐藏 iframe，显示示意界面 */
.hub.anim .pane-b iframe{display:none}
.schematic{display:none;position:absolute;inset:0;padding:10px;overflow:hidden;
  background:linear-gradient(160deg,#141C3E,#0E1430)}
.hub.anim .schematic{display:block}

/* ---------- 监视条 ---------- */
.monitor{flex:0 0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
  background:linear-gradient(180deg,rgba(20,27,58,.95),rgba(14,19,42,.95));border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow)}
.mon-cell{text-align:center;padding:3px 2px;border-radius:var(--radius-sm);min-width:0}
.mon-cell .ml{display:block;font-size:10.5px;color:var(--txt-3);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-cell b{font-size:18px;font-weight:800;font-family:ui-monospace,monospace;letter-spacing:-.5px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-cell b.sm{font-size:13px;letter-spacing:0}
.mon-cell.hi b{color:var(--gold)}
/* v1.2 新增指标：左侧色条 + 角标，一眼区分本次新增口径 */
.mon-cell.new{position:relative;background:rgba(77,148,255,.07);border:1px solid rgba(77,148,255,.28)}
.mon-cell.new .ml{color:#9DC0FF}
.mon-cell.bump b{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.35);color:var(--ok)}}

/* ---------- 旁白「这次改了什么」标签 ---------- */
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:10px}
.narr-notes{display:none;flex-wrap:wrap;gap:5px;margin:0 0 9px}
.nx{font-size:10.5px;line-height:1.5;padding:2px 8px;border-radius:999px;border:1px solid transparent;font-weight:600;white-space:nowrap}
.nx.new{color:#8FD6A9;border-color:rgba(63,214,140,.45);background:rgba(63,214,140,.12)}
.nx.tune{color:#FFD98A;border-color:rgba(255,204,102,.45);background:rgba(255,204,102,.12)}
.nx.off{color:#FF9A9E;border-color:rgba(255,90,95,.45);background:rgba(255,90,95,.12)}

/* ---------- 旁白扩展区（权限矩阵 / 下钻明细） ---------- */
.narr-extra{display:none;margin:10px 0;max-height:176px;overflow:auto;
  background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 10px}
.ex-t{font-size:11px;color:var(--txt-3);margin-bottom:6px}
.perm-card{border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:7px 8px;margin-bottom:7px;background:rgba(255,255,255,.02)}
.perm-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.perm-h b{font-size:12.5px;color:#fff}
.perm-desc{font-size:11px;color:var(--txt-3);margin:2px 0 5px}
.perm-p{padding:4px 0;border-top:1px dashed rgba(255,255,255,.07)}
.perm-p:first-of-type{border-top:none}
.perm-p b{font-size:11.5px;color:#9DC0FF;margin-right:6px}
.perm-p .mini{font-family:ui-monospace,monospace}
.perm-pd{font-size:11px;color:var(--txt-2);margin-top:1px}
.perm-p.muted{color:var(--txt-3);font-size:11.5px}
.drill-wrap{overflow:auto}
table.drill{width:100%;border-collapse:collapse;font-size:11.5px}
table.drill th{text-align:left;color:var(--txt-3);font-weight:600;padding:3px 5px;border-bottom:1px solid var(--line-2);white-space:nowrap}
table.drill td{padding:3px 5px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--txt-2);font-family:ui-monospace,monospace}
table.drill tr:hover td{background:rgba(77,148,255,.08);color:#fff}

/* ---------- 旁白面板 ---------- */
.narr{position:relative;flex:0 1 auto;max-height:66%;overflow-y:auto}
.narr-title{font-size:17px;font-weight:800;margin:2px 0 8px;color:#fff}
.narr-text{font-size:13.5px;color:var(--txt-2);line-height:1.7;min-height:60px}
.look{display:flex;gap:8px;align-items:flex-start;background:rgba(255,204,102,.1);border:1px solid rgba(255,204,102,.3);
  border-radius:var(--radius-sm);padding:9px 11px;margin:12px 0;font-size:12.5px;color:#FFE0A3}
.look-ic{flex:0 0 auto}
.tech{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px}
.tech-t{font-size:11px;color:var(--txt-3);margin-bottom:4px}
.tech code{font-size:11.5px;color:#8FD6A9;word-break:break-all;line-height:1.6}
.progress{height:5px;background:rgba(0,0,0,.35);border-radius:5px;margin-top:12px;overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#1F6FEB,#4D94FF,#8FD6A9);transition:width .25s linear}

/* ---------- 架构 SVG ---------- */
.arch{width:100%;flex:1;min-height:0}
.arch .node rect{fill:rgba(255,255,255,.04);stroke:var(--line-2)}
.arch .node text{fill:var(--txt-2);font-size:11px;text-anchor:middle;font-weight:600}
.arch .node.hot rect{fill:var(--pri-w);stroke:var(--pri)}
.arch .node.hot text{fill:#fff}
.arch .core-t{fill:#fff;font-size:11px;font-weight:800;text-anchor:middle}
.arch .core-s{fill:#9DC0FF;font-size:8px;text-anchor:middle}
.pulse{fill:#8FD6A9;filter:drop-shadow(0 0 6px #8FD6A9)}

/* ---------- 状态色点（联动用） ---------- */
.st-PENDING_CONFIRM{color:var(--s-pending)}.st-CONFIRMED{color:var(--s-confirmed)}
.st-ARRIVED{color:var(--s-arrived)}.st-VERIFIED{color:var(--s-verified)}.st-FULFILLED{color:var(--s-verified)}
.st-NO_SHOW{color:var(--s-noshow)}.st-EXPIRED{color:var(--s-expired)}.st-PARTIALLY_FULFILLED{color:var(--s-partial)}

/* ---------- 日志浮层 ---------- */
.logbar{flex:0 0 auto;max-height:26px;overflow:hidden}

/* ---------- 窄屏堆叠 ---------- */
@media(max-width:1500px){.hub-right{width:300px;flex:0 0 300px}}
@media(max-width:1240px){
  body{overflow:auto}
  .hub{height:auto;min-height:100vh}
  .hub-main{flex-direction:column}
  .hub-left,.hub-right{width:auto;flex:none}
  .panes{min-height:820px}
  .monitor{grid-template-columns:repeat(3,1fr)}
}