/* ============================================================
   act3.css — Act 3 高保真重写（loads after acts.css → 可覆盖）
   设计语言：Apple 发布页 · Liquid Glass · tier 色板 · 景深
   注：全幕强调统一走 var(--ch)（= --accent 石板靛），不再用品牌蓝/紫
   ============================================================ */

/* ---- tier 工具：每条路径/chip 用对应分层色 ---- */
.t-cloud  { --t: var(--tier-cloud); }
.t-local  { --t: var(--tier-local); }
.t-value  { --t: var(--tier-value); }
.t-flag   { --t: var(--tier-flag); }

/* 六屏统一：居中、纵向呼吸、不铺白底 */
.rvm, .flywheel, .runner, .nosession, .whyworth, .ask {
  align-items: center; justify-content: flex-start;
  gap: clamp(10px, 1.6vh, 22px);
  /* 头部紧贴 .screen 顶部内边距 —— 与一/二幕各屏标题同一基线，不再额外下推 */
  padding-top: 0;
}
.rvm-head, .fw-head, .rn-head, .ns-head, .ww-head, .ask-head {
  text-align: center; margin-bottom: 0;
}
.rvm-head .h-title, .fw-head .h-title, .rn-head .h-title,
.ns-head .h-title, .ww-head .h-title, .ask-head .h-title { margin-top: 10px; }

/* kicker / core 着色随章节 */
.rvm .kicker, .flywheel .kicker, .runner .kicker,
.nosession .kicker, .whyworth .kicker, .ask .kicker { color: var(--ch); }
.rvm .kicker::before, .flywheel .kicker::before, .runner .kicker::before,
.nosession .kicker::before, .whyworth .kicker::before, .ask .kicker::before { background: var(--ch); }

/* ============================================================
   屏 1 · 智能路由 = 决策图（四维逐条判定 → 逐跳编排链路）
   连线沿用第一/二幕手法：实线 + 光点沿线流动；统一走石板靛 accent
   ============================================================ */
.reng { --ac: var(--accent); }          /* 本屏强调统一走石板靛 */
.reng .kicker { color: var(--ac); }
.reng .kicker::before { background: var(--ac); }

.rvm { gap: clamp(16px, 2.4vh, 30px); }
.rvm-sub {
  margin-top: 8px; font-size: var(--t-lead); color: var(--ink-3); line-height: 1.5;
}
.rvm-sub b { color: var(--ink); font-weight: 600; }

/* —— 决策图舞台：左信号 | 中核心 | 右链路，连线锚到真实节点 —— */
.reng-stage {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; align-content: center; gap: clamp(28px, 7vw, 120px);
  width: 100%; max-width: 1060px; margin: 0 auto;
  /* 用满 head 与 foot 之间的高度并垂直居中（此前挤在顶部、下方大片留白） */
  flex: 1 1 auto; min-height: 0;
}
.reng-col { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px); min-width: 0; z-index: 1; }
.reng-mid { display: flex; align-items: center; justify-content: center; z-index: 1; }

/* 连线层：实线本体 draw-on + 光点沿线流动（同第一/二幕 wire-dot） */
.reng-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.rw-line {
  fill: none; stroke: var(--ac); stroke-width: 2; stroke-linecap: round;
  opacity: 0; stroke-dashoffset: 1; transition: opacity .4s var(--ease);
}
.rw.in .rw-line { opacity: .42; animation: rwDraw .55s var(--ease-draw) forwards; }
@keyframes rwDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* 流光统一为小光点；信号线 source=信号→hub、链路线 source=hub→节点。 */
.rw-dot {
  fill: var(--ac);
  filter: drop-shadow(0 0 4px var(--ac)) drop-shadow(0 0 9px var(--accent-glow));
  opacity: .96;
}

/* —— ① 四维信号 —— 逐条判定：量表填充 + 判定词 —— */
.sig-node {
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px 15px; border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  opacity: 0; transform: translateX(-10px);
  transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--spring), border-color var(--dur-reveal) var(--ease-reveal);
}
.sig-node.in { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--ac) 30%, var(--line)); }
.sig-top { display: flex; align-items: baseline; gap: 8px; }
.sig-top b { font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.sig-verdict {
  font-size: var(--t-micro); font-style: normal; font-weight: 700; color: var(--ink-4);
  margin-left: auto; transition: color .4s var(--ease) .25s;
}
.sig-node.in .sig-verdict { color: var(--ac); }
.sig-note { font-size: var(--t-micro); color: var(--ink-3); }

/* —— 四维量度：每一维一种贴合语义的形式（取代统一进度条）。
   未判定时整体静默（灰），判定后（.sig-node.in）逐格点亮，按 --d 错峰。 —— */
.sm { display: flex; align-items: center; min-height: 18px; }

/* ① 难度 —— 阶梯条（高度递增，越满＝越难） */
.sm-steps { gap: 4px; height: 18px; align-items: flex-end; }
.sm-steps .smg {
  width: 6px; border-radius: 2px; background: var(--surface-2);
  transition: background .35s var(--ease); transition-delay: var(--d, 0s);
}
.sig-node.in .sm-steps .smg.on { background: var(--ac); }

/* ② 隐私 —— 公开 / 内部 / 敏感 分级轨（命中段高亮 + 锁） */
.sm-priv { gap: 5px; }
.sm-priv .smp {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--t-micro); font-weight: 600; color: var(--ink-4);
  background: var(--surface-2); border: 1px solid transparent;
  transition: color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.sm-priv .smp svg { width: 10px; height: 10px; }
.sig-node.in .sm-priv .smp.pass { color: var(--ink-3); }
.sig-node.in .sm-priv .smp.on {
  color: var(--ac); background: var(--accent-050);
  border-color: color-mix(in srgb, var(--ac) 40%, transparent); font-weight: 700;
}

/* ③ 成本 —— 预算档（¥），亮起的档位＝预算上限，越少＝越省（够用即可） */
.sm-cost { gap: 8px; }
.sm-cost .sm-pips { display: inline-flex; gap: 2px; }
.sm-cost .smc {
  font-style: normal; font-size: 13px; font-weight: 700; color: var(--surface-2);
  transition: color .35s var(--ease); transition-delay: var(--d, 0s);
}
.sig-node.in .sm-cost .smc.on { color: var(--ac); }
.sm-cost .sm-cap { font-size: var(--t-micro); color: var(--ink-4); }

/* ④ 质量 —— 星级（中等＝3/5），命中星填充 */
.sm-star { gap: 2px; color: var(--surface-2); }
.sm-star .sms { display: inline-flex; transition: color .35s var(--ease); transition-delay: var(--d, 0s); }
.sm-star .sms svg { width: 13px; height: 13px; }
.sig-node.in .sm-star .sms.on { color: var(--ac); }
.sig-node.in .sm-star .sms.on svg { fill: currentColor; }

/* —— 核心：智能路由（真实 route icon + 判定脉冲） —— */
.reng-hub {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: clamp(124px, 15vw, 152px); padding: 18px 16px;
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.reng-hub.live { border-color: color-mix(in srgb, var(--ac) 34%, var(--line)); }
.reng-hub.decide {
  border-color: color-mix(in srgb, var(--ac) 50%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ac) 18%, transparent);
}
.rh-ring {
  position: absolute; inset: -4px; border-radius: var(--r-lg); pointer-events: none;
  border: 2px solid var(--ac); opacity: 0;
}
.reng-hub.decide .rh-ring { animation: rhPulse 1.7s var(--ease) infinite; }
@keyframes rhPulse { 0% { opacity: .45; transform: scale(.97); } 100% { opacity: 0; transform: scale(1.07); } }
.rh-icon {
  width: 42px; height: 42px; border-radius: var(--r-chip); margin-bottom: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ac); background: var(--accent-050);
}
.rh-icon svg { width: 24px; height: 24px; }
.rh-title { font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.rh-sub { font-size: var(--t-micro); color: var(--ink-3); }

/* —— ② 编排出的链路（纯白卡 · 无色条 · 数字序号 · 逐跳出现） —— */
.chain-node {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  opacity: 0; transform: translateX(14px) scale(.97);
  transition: opacity .45s var(--ease), transform .5s var(--spring);
}
.chain-node.in { opacity: 1; transform: none; }
.cn-n {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-micro); font-weight: 700; color: var(--ac);
  border: 1.5px solid color-mix(in srgb, var(--ac) 34%, transparent);
}
.cn-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-head { font-size: var(--t-caption); font-weight: 600; color: var(--ink); }
.cn-head em {
  font-size: var(--t-micro); font-style: normal; font-weight: 700; color: var(--ink-3);
  margin-right: 8px;
}
.cn-why { font-size: var(--t-micro); color: var(--ink-4); }
.cn-why b { color: var(--ac); font-weight: 700; }

/* —— ② 多个备选 Agent：出现 → 排除（变灰）→ 选中（高亮描边） —— */
.cand-node {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  opacity: 0; transform: translateX(14px) scale(.97);
  transition: opacity .45s var(--ease), transform .5s var(--spring),
              border-color .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease);
}
.cand-node.in { opacity: 1; transform: none; }
.cnd-ic { flex: none; display: flex; }
.cnd-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.cnd-name { font-size: var(--t-caption); font-weight: 700; color: var(--ink); }
.cnd-note { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.4; }
.cnd-flag { flex: none; font-size: var(--t-micro); font-weight: 700; color: var(--ink-4); white-space: nowrap; }
.cnd-x { font-style: normal; color: var(--ink-4); }
/* 被排除：整卡变灰、下沉 */
.cand-node.rej { opacity: .5; filter: grayscale(.7); border-color: var(--line); box-shadow: none; }
/* 被选中：强调描边 + 抬升 + 主色 */
.cand-node.sel {
  border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ac) 18%, transparent);
  transform: translateX(-2px) scale(1.02);
}
.cand-node.sel .cnd-flag { color: var(--ac); }
.cand-node.sel .cnd-note { color: var(--ink-2); }

.reng-foot {
  max-width: 920px; text-align: center; font-size: var(--t-lead); color: var(--ink-2); line-height: 1.55;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--spring);
}
.reng-foot.in { opacity: 1; transform: none; }
.reng-foot b { color: var(--ink); font-weight: 600; }

/* ============================================================
   屏 2 · 评测飞轮
   ============================================================ */
/* 整组（标题 / 主体 / 落版句）垂直居中并加大间距：
   此前 justify-content:flex-start 把内容全顶到上沿、底部留大片空白，
   标题贴顶、落版句又紧挨图表，整体显挤。改为居中 + 更大 gap 后呼吸更舒展。 */
.flywheel {
  gap: clamp(22px, 4vh, 52px);
}
.fw-main {
  /* 上下 auto 外边距：在头部与底部结论之间垂直居中，结论行落到底部 —— 与各屏「中区可视化」一致 */
  flex: 0 1 auto; min-height: 0; margin: auto 0; display: flex; gap: clamp(24px, 3vw, 48px);
  align-items: stretch; justify-content: center; width: 100%; max-width: 1040px; flex-wrap: wrap;
}

/* ---- 左：真实任务流（持续涌入、向下渐隐） ---- */
.fw-stream {
  flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px;
}
.fws-cap { display: flex; align-items: baseline; gap: 10px; padding-left: 2px; }
.fws-cap span { font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.fws-cap em { font-size: var(--t-micro); color: var(--ink-4); font-style: normal; }
.fws-list {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.fws-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
  transform: translateY(10px) scale(.985);
  transition: opacity .5s var(--ease), transform .5s var(--spring), filter .5s var(--ease);
}
.fws-row.in { transform: none; }
.fws-type { font-size: var(--t-small); font-weight: 600; color: var(--ink); flex: none; }
.fws-path {
  flex: 1 1 auto; min-width: 0; font-style: normal; font-size: var(--t-caption); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}
.fws-pass, .fws-fail {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; font-size: var(--t-caption);
}
.fws-pass { color: var(--pos); }
.fws-fail { color: var(--neg); }
.fws-pass::before { content: "✓"; }
.fws-fail::before { content: "✕"; }
.fws-more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--t-caption); color: var(--ink-4); padding: 2px 0 0;
  opacity: 0; transition: opacity .6s var(--ease);
}
.fws-more.on { opacity: 1; }
.fws-more-dots { display: inline-flex; gap: 4px; }
.fws-more-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4);
  animation: fwsBlink 1.4s var(--ease) infinite;
}
.fws-more-dots i:nth-child(2) { animation-delay: .2s; }
.fws-more-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes fwsBlink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---- 右：累积量 × 满意度 曲线图 ---- */
.fw-chart {
  flex: 0 1 440px; min-width: 320px; align-self: stretch;
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px 14px; border-radius: var(--r-lg);
}
.fwc-top { display: flex; align-items: flex-end; justify-content: space-between; }
.fwc-read { display: flex; flex-direction: column; }
.fwc-num { font-size: var(--t-h1); font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1; transition: color .4s var(--ease); }
.fwc-num i { font-size: var(--t-h3); font-weight: 600; color: var(--ink-3); font-style: normal; margin-left: 2px; }
.fwc-cap { font-size: var(--t-caption); color: var(--ink-3); margin-top: 5px; }
.fwc-delta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fwc-delta .mono {
  font-size: var(--t-small); font-weight: 700; color: var(--pos);
  padding: 3px 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--pos) 12%, transparent);
}
.fwc-delta em { font-size: var(--t-micro); color: var(--ink-4); font-style: normal; }

.fwc-svg { width: 100%; height: auto; display: block; overflow: visible; margin-top: 2px; }
.fwc-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.fwc-ylab, .fwc-xlab { font-size: var(--t-caption); fill: var(--ink-4); font-family: var(--mono); }
/* 面积：线画到 ~60% 才淡入（JSX 控 opacity 切换） */
.fwc-area { transition: opacity .7s var(--ease-draw); }
/* 已发生段：实线 draw-on（stroke-dashoffset 生长，--ease-draw 800ms） */
.fwc-line {
  fill: none; stroke: var(--ch); stroke-width: 2.6;
  stroke-linejoin: round; stroke-linecap: round;
  transition: stroke-dashoffset .8s var(--ease-draw);
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--ch) 30%, transparent));
}
/* 预测段：虚线 = 未来语义（实线画完后淡入） */
.fwc-pred {
  stroke-dasharray: 4 5; opacity: 0;
  transition: opacity .5s var(--ease-draw);
  filter: none;
}
.fwc-pt { transition: opacity .45s var(--ease); }
.fwc-dot {
  fill: var(--surface); stroke: var(--ch); stroke-width: 2.4;
  transition: r .4s var(--spring);
}
.fwc-dot.head {
  fill: var(--ch);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ch) 60%, transparent));
}
/* 预测段数据点：空心弱化，呼应虚线语义 */
.fwc-dot.pred { stroke: color-mix(in srgb, var(--ch) 55%, transparent); }
.fwc-foot {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  font-size: var(--t-caption); color: var(--ink-3); text-align: center; margin-top: 2px;
}
.fwc-foot b { color: var(--ch); }
/* 图例：实测（实线）/ 预测（虚线） */
.fwc-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-4); }
.fwc-legend .leg-line {
  width: 16px; height: 0; flex: none; margin-left: 6px;
  border-top: 2px solid var(--ch);
}
.fwc-legend .leg-line:first-child { margin-left: 0; }
.fwc-legend .leg-line.dash { border-top-style: dashed; opacity: .7; }

.fw-line {
  max-width: 880px; text-align: center; font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2);
}
.fw-line b { color: var(--ink); font-weight: 600; }

/* ============================================================
   屏 3 · 闲置 Token，安全接单（Apple Liquid Glass）
   两张等大玻璃卡：左=持续接单流；右=安全沙盒（含可调等级 + 逐项隔离）
   注：强调统一走石板靛 accent —— icon 一律 SVG
   ============================================================ */
.runner { --ch: var(--accent); justify-content: space-between; gap: clamp(8px, 1.2vh, 15px); }
.rn-sub {
  margin: 8px auto 0; max-width: 780px;
  font-size: var(--t-lead); color: var(--ink-3); line-height: 1.5;
}
.rn-sub b { color: var(--ch); font-weight: 600; }

/* 通用线性 icon */
.ricon { display: block; flex: none; }

/* 授权深度徽标 L0–L3：统一圆角矩形外壳 + 阶梯语义色（绿→靛→琥珀→陶土红，低饱和） */
.lvl-badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: var(--t-caption); font-weight: 700; line-height: 1;
  padding: 4px 9px; border-radius: var(--r-chip);
}
.lvl-badge.sm { padding: 3px 7px; font-size: var(--t-micro); }
/* 仅徽标着底色（限定 .lvl-badge，避免泄漏到滑块档位容器） */
.lvl-badge.lvl-r0 { color: var(--pos);    background: color-mix(in srgb, var(--pos) 13%, var(--surface)); }
.lvl-badge.lvl-r1 { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.lvl-badge.lvl-r2 { color: var(--warn);   background: color-mix(in srgb, var(--warn) 15%, var(--surface)); }
.lvl-badge.lvl-r3 { color: var(--neg);    background: color-mix(in srgb, var(--neg) 13%, var(--surface)); }
.lvl-badge.lvl-off { color: var(--ink-4); background: var(--surface-2); }

/* —— 舞台：两张等大卡（尺寸固定，不随接单量增长而变化） —— */
.rn-stage {
  flex: 0 0 auto; width: 100%; max-width: 1000px;
  height: clamp(300px, 44vh, 384px);   /* 紧凑固定高度：左列表只露出部分、内部渐隐 */
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px); align-items: stretch;
}
/* Liquid Glass 卡体（macOS 浮窗化：顶部留出 chrome 行，柔阴影统一 --sh-float） */
.rn-card {
  position: relative; height: 100%;
  display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--r-lg); padding: 0 16px 13px;
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--sh-float);
  overflow: hidden;
}

/* —— macOS 窗口 chrome：三个低饱和中性灰点 + 居中标题 + 发丝边分隔 —— */
.mac-chrome {
  position: relative; flex: none;
  display: flex; align-items: center;
  height: 34px; margin: 0 -16px 11px; padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.mac-dots { display: inline-flex; align-items: center; gap: 8px; }
.mac-dots i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--line-2);
}
.mac-dots i:nth-child(2) { background: var(--ink-4); opacity: .55; }
.mac-dots i:nth-child(3) { background: var(--ink-4); opacity: .38; }
.mac-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: var(--t-caption); font-weight: 600; color: var(--ink-3); letter-spacing: .01em;
  white-space: nowrap;
}

/* —— 左卡 · 持续接单流（无分割线） —— */
.rs-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.rs-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.rs-metric { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.rs-metric b { font-size: var(--t-h3); font-weight: 700; color: var(--pos); letter-spacing: -.02em; }
.rs-metric em { font-size: var(--t-micro); color: var(--ink-3); font-style: normal; }
.rs-metric em i { color: var(--ink); font-weight: 700; font-style: normal; }

/* 内边距 + 等量负外边距：让行的柔阴影有空间，不被 overflow 裁切 */
.rs-list {
  flex: 1 1 auto; min-height: 0;
  position: relative; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  padding: 4px 6px; margin: 0 -6px;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
  mask-image: linear-gradient(180deg, #000 82%, transparent);
}
.rs-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; flex: none;
  padding: 9px 11px; border-radius: var(--r-card); background: rgba(255,255,255,.86);
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  animation: rsIn .5s var(--spring) both;
}
@keyframes rsIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.rsr-type { font-size: var(--t-small); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 本次用到的本机东西（Icon 串） */
.rsr-tools { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); }
.rsr-tools .ricon { color: var(--ink-2); }
.rsr-earn { font-size: var(--t-small); font-weight: 700; color: var(--pos); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-foot { margin-top: 10px; text-align: center; font-size: var(--t-micro); color: var(--ink-4); }

/* —— 右卡 · 沙盒：本地授权范围 + 沙盒内运行（尺寸固定，内容撑满不留白） —— */
.sandbox {
  gap: 14px; position: relative; overflow: hidden;
  padding-top: 16px;   /* 无窗口 chrome，自留呼吸 */
}
/* 极简标头：盾牌 + 名称 + 静态运行态 */
.sb-head { display: flex; align-items: center; gap: 9px; }
.sb-shield {
  width: 24px; height: 24px; border-radius: var(--r-chip); flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--ch), color-mix(in srgb, var(--ch) 60%, var(--surface)));
}
.sb-name { font-size: var(--t-small); font-weight: 700; color: var(--ink); margin-right: auto; }
.sb-state { font-size: var(--t-micro); font-weight: 600; color: var(--ink-3); flex: none; }

/* 接单等级：控制条 + L0–L3 档位（Icon 区分，风险逐级递进） */
.sb-level { display: flex; flex-direction: column; gap: 9px; flex: none; }
.sbl-top { display: flex; align-items: center; justify-content: space-between; }
.sbl-top span { font-size: var(--t-caption); font-weight: 700; color: var(--ink-2); }
.sbl-hint { margin-left: 6px; font-size: 11px; font-weight: 600; font-style: normal; color: var(--ch); }
.sbl-bar {
  position: relative; height: 6px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ch) 11%, var(--surface-2));
}
.sbl-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ch) 60%, var(--surface)), var(--ch));
  transition: width .4s var(--ease);
}
.sbl-thumb {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--surface);
  border: 2px solid var(--ch); box-shadow: var(--sh-1); transition: left .4s var(--ease);
}
.sbl-ticks { display: flex; justify-content: space-between; margin-top: 3px; }
.sbl-tick { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; }
.sbl-tick:first-child { align-items: flex-start; }
.sbl-tick:last-child { align-items: flex-end; }
/* 档位直接是「等级名称」徽标（圆角矩形，无图标）；未接档灰显 */
.sbl-tick .lvl-badge { font-family: var(--mono); }
.sbl-tick.off .lvl-badge { opacity: .8; }
.sbl-note { font-size: var(--t-caption); color: var(--ink-3); line-height: 1.4; }
.sbl-note b { color: var(--ink); font-weight: 700; }

/* 沙盒内运行：虚线边界 = 沙盒围栏；flex:1 撑满卡片余高，不留白 */
.sb-run {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 11px;
  padding: 13px; border-radius: var(--r-lg); background: rgba(255,255,255,.6);
  border: 1.5px dashed color-mix(in srgb, var(--ch) 30%, transparent);
  animation: rsIn .45s var(--spring) both;
}
.sb-now {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-caption); font-weight: 700; letter-spacing: .02em; color: var(--ch);
}
.sb-now::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ch); flex: none;
}
.sbr-task { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; margin-top: auto; }
.sbr-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sbr-meta b { font-size: var(--t-small); font-weight: 600; color: var(--ink); white-space: nowrap; }
.sbr-meta em { font-size: var(--t-micro); color: var(--ink-3); font-style: normal; }
/* 本次调用：已开放维度里，本条任务实际触及的资源高亮，其余淡显 */
.sbr-use { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.use-label { font-size: var(--t-micro); font-weight: 600; color: var(--ink-4); margin-right: 1px; }
.use-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: var(--r-pill);
  font-size: var(--t-caption); font-weight: 600;
  transition: all .3s var(--ease);
}
.use-chip.on {
  color: var(--ch); background: color-mix(in srgb, var(--ch) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ch) 24%, transparent);
}
.use-chip.on .ricon { color: var(--ch); }
.use-chip.off {
  color: var(--ink-4); background: transparent; border: 1px solid var(--line);
}
.use-chip.off .ricon { color: var(--ink-4); opacity: .6; }
/* 确定性进度条：每个任务一拍填满 0 → 100%；钉在底部把余高吃满 */
.sbr-bar {
  position: relative; height: 5px; border-radius: 3px; margin-top: auto;
  background: color-mix(in srgb, var(--ch) 12%, var(--surface)); overflow: hidden;
}
.sbr-bar i {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ch) 55%, var(--surface)), var(--ch));
  animation: sbrFill 1.6s linear both;
}
@keyframes sbrFill { from { width: 0; } to { width: 100%; } }

/* —— 利润率：一行说清，非卡片 —— */
.rn-margin {
  flex: none; max-width: 900px; text-align: center;
  font-size: var(--t-lead); color: var(--ink-2); line-height: 1.55;
}
.rn-margin b { color: var(--ch); font-weight: 700; }

/* ============================================================
   屏 4 · 复杂度聚成一张卡片 → 展开为一个对话框
   设计语言：Apple Liquid Glass · 中性玻璃 + 石板靛 accent
   ============================================================ */
.nosession {
  --acc: var(--accent);           /* 石板靛（本屏强调，与全局一致） */
  --glass: rgba(255,255,255,.6);
  --glass-strong: rgba(255,255,255,.72);
  --glass-line: rgba(255,255,255,.7);
  gap: var(--sp-4);
}
/* kicker / 强调走中性或石板靛 accent */
.nosession .kicker { color: var(--ink-3); }
.nosession .kicker::before { background: var(--ink-4); }
.ns-sub { margin-top: 8px; font-size: var(--t-lead); color: var(--ink-3); }
.ns-sub b { color: var(--acc); font-weight: 600; }

/* ---- 舞台：三拍同台（发现问题 / 凝结范式 / 解决办法），无彩色背景 ---- */
.m2 {
  position: relative; flex: 0 1 auto; margin: auto 0;
  width: 100%; max-width: 1020px;
  height: clamp(480px, 64vh, 600px);
}

/* ============================================================
   BEAT 0 · 发现的问题 —— 仿真控制台：上下文使用率 / 会话 / 模型 / 凭据
   3 列整齐网格，靠「密度 + 真实细节」体现复杂，不靠乱旋转
   ============================================================ */
.m2-pile { position: absolute; inset: 0; }
.m2:not(.ph0) .m2-pile { pointer-events: none; }

/* 散落的一桌杂活：刻意倾斜、层叠、有纵深 —— 不是失败的网格，是「真要自己扛的一堆」 */
.pile-scatter { position: absolute; inset: 0; }

/* 单张配置卡（白卡 · 发丝边 · 各自一个倾斜角，散落在中心四周） */
.pile-card {
  --d: 0s; --x: 0px; --y: 0px; --r: 0deg;
  position: absolute; left: 50%; top: 50%; width: 250px;
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 14px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r));
  transition: opacity .55s var(--ease), transform .7s var(--ease-ui), filter .55s var(--ease);
}
/* BEAT 0→1：所有卡向中心收缩、模糊、淡出 —— 像被 AgentPilot 一口吸进黑盒 */
.m2.ph1 .pile-card, .m2.ph2 .pile-card {
  opacity: 0; filter: blur(5px);
  transform: translate(-50%, -50%) scale(.08) rotate(0deg);
  transition-delay: var(--d);
  transition-timing-function: var(--ease-in, cubic-bezier(.5,0,.85,.3));
}

/* 纵深幽灵卡：堆在中心偏上，暗示「还有十几个，每个都这样」 */
.pile-ghost {
  position: absolute; left: 50%; top: 50%; width: 250px; height: 150px;
  border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: var(--sh-2);
  transition: opacity .5s var(--ease), transform .7s var(--ease-ui), filter .55s var(--ease);
}
.pile-ghost.g1 { transform: translate(-50%, -50%) translate(-30px, -86px) rotate(-7deg); opacity: .5; z-index: 1; }
.pile-ghost.g2 { transform: translate(-50%, -50%) translate(-44px, -104px) rotate(-12deg); opacity: .28; z-index: 0; }
.m2.ph1 .pile-ghost, .m2.ph2 .pile-ghost {
  opacity: 0; filter: blur(5px); transform: translate(-50%, -50%) scale(.08);
}
.pc-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-small); font-weight: 700; color: var(--ink);
}
.pc-req { font-size: var(--t-caption); font-weight: 600; color: var(--neg); padding: 1px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--neg) 10%, transparent); }
.pc-mini { font-size: var(--t-caption); font-weight: 600; color: var(--ink-4); padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); }
.pc-note { font-size: var(--t-caption); color: var(--ink-4); line-height: 1.4; }
.pc-note code { font-family: var(--mono); font-size: 11px; padding: 0 4px; border-radius: 4px; background: var(--surface-2); color: var(--ink-3); }

/* —— 上下文窗口（仿 Claude Code /context：分段使用率 + 自动压缩告警）—— */
.pc-pct { font-size: var(--t-small); font-weight: 800; color: var(--neg); font-variant-numeric: tabular-nums; }
.pc-meter {
  display: flex; gap: 2px; height: 9px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--surface-3); padding: 0;
}
.pc-meter .seg { display: block; height: 100%; }
.pc-meter .seg.sys  { background: var(--ink-4); }
.pc-meter .seg.tool { background: var(--accent); }
.pc-meter .seg.mcp  { background: var(--tier-cloud); }
.pc-meter .seg.mem  { background: var(--warn); }
.pc-meter .seg.msg  { background: var(--ink-2); }
.pc-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pc-legend span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); }
.pc-legend .dot { width: 7px; height: 7px; border-radius: 50%; }
.pc-legend .dot.sys { background: var(--ink-4); }
.pc-legend .dot.tool { background: var(--accent); }
.pc-legend .dot.mcp { background: var(--tier-cloud); }
.pc-legend .dot.mem { background: var(--warn); }
.pc-legend .dot.msg { background: var(--ink-2); }
.pc-warn { font-size: var(--t-caption); font-weight: 600; color: var(--neg); line-height: 1.4; }

/* —— 会话 —— */
.pc-sess { display: flex; flex-wrap: wrap; gap: 5px; }
.pc-sess span {
  font-size: var(--t-caption); padding: 3px 8px; border-radius: var(--r-chip);
  background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line);
}
.pc-sess .add { color: var(--ink-4); border-style: dashed; }
.pc-sess .more { color: var(--ink-4); background: transparent; border: none; }

/* —— 模型配置（下拉 / 字段 / 滑杆）—— */
.pc-select {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-caption); color: var(--ink-3);
  padding: 5px 9px; border-radius: var(--r-chip); background: var(--surface-2); border: 1px solid var(--line);
}
.pc-select b { flex: 1; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ink-2); }
.pc-select em { font-style: normal; color: var(--ink-4); }
.pc-slider { display: flex; align-items: center; gap: 8px; }
.pc-slider > span { flex: none; width: 78px; font-size: var(--t-caption); color: var(--ink-3); }
.pc-slider > i { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); }
.pc-slider > i b { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: var(--sh-1); }
.pc-slider > em { font-style: normal; font-size: var(--t-caption); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pc-pair { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* —— 凭据字段 —— */
.pc-fields { display: flex; flex-direction: column; gap: 6px; }
.pc-field { display: flex; align-items: center; gap: 8px; }
.pc-field > span { flex: none; width: 110px; font-size: var(--t-caption); color: var(--ink-3); }
.pc-field > i { flex: 1; height: 16px; border-radius: var(--r-chip); background: var(--surface-2); border: 1px dashed var(--line-2); }
.pc-field > i.filled {
  border-style: solid; display: flex; align-items: center; padding: 0 8px;
  font-size: 10px; letter-spacing: 1px; color: var(--ink-4);
}
/* —— Token 失效的重新授权横幅（凭据卡内联，仿真实工具）—— */
.pc-reauth {
  display: flex; align-items: center; gap: 7px; margin-top: 1px;
  font-size: var(--t-caption); font-weight: 600; color: var(--neg);
  padding: 6px 9px; border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--neg) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--neg) 26%, transparent);
}
.pc-x { width: 14px; height: 14px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--neg); font-size: 10px; font-weight: 700; }

/* —— OAuth 多步 —— */
.pc-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.pc-steps span {
  font-size: var(--t-caption); padding: 3px 8px; border-radius: var(--r-chip);
  background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line);
}
.pc-steps em { font-size: var(--t-caption); color: var(--ink-4); font-style: normal; }


/* ============================================================
   BEAT 1 · 凝结为范式陈述 —— 居中静态文本
   ============================================================ */
.m2-shift {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .55s var(--ease), transform .6s var(--ease-ui);
}
/* 先让卡片吸入消失（透明约 .9s、变换约 1.05s），再出范式文案 —— 连贯不重叠 */
.m2.ph1 .m2-shift { opacity: 1; transform: none; transition-delay: 1.05s; }
.m2.ph2 .m2-shift { opacity: 0; transform: translateY(-12px); transition-delay: 0s; }
.ms-line {
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2);
  font-weight: 600; color: var(--ink-2);
}
.ms-line b { color: var(--ink); font-weight: 700; }
.ms-sub { font-size: var(--t-lead); color: var(--ink-3); letter-spacing: var(--tr-lead); }

/* ============================================================
   BEAT 2 · 解决办法 —— 一个统一对话框（Liquid Glass · 留白 · 暗色发送）
   ============================================================ */
.m2-solve {
  position: absolute; left: 50%; top: 50%;
  width: min(560px, 94vw);
  transform: translate(-50%, calc(-50% + 14px)); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px; border-radius: var(--r-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  box-shadow: var(--sh-float), var(--glass-edge);
  transition: opacity .55s var(--ease), transform .65s var(--ease-ui);
}
.m2.ph2 .m2-solve { opacity: 1; transform: translate(-50%, -50%); transition-delay: .18s; pointer-events: auto; }

/* 顶部：两类连接 —— 工作软件一键连、聊天入口扫码连（都已收进黑盒，无需配置） */
.sv-conns { display: flex; flex-direction: column; gap: 8px; }
.sv-cgrp {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: var(--r-card);
  background: var(--surface-2); border: 1px solid var(--line);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease-ui);
}
.m2.ph2 .sv-cgrp { opacity: 1; transform: none; }
.m2.ph2 .sv-cgrp:nth-child(1) { transition-delay: .3s; }
.m2.ph2 .sv-cgrp:nth-child(2) { transition-delay: .4s; }
.sv-ctiles { display: inline-flex; flex: none; }
.sv-ctiles > * { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface-2); border-radius: 6px; }
.sv-ctiles > *:first-child { margin-left: 0; }
.sv-ctxt { flex: 1; font-size: var(--t-caption); color: var(--ink-4); line-height: 1.35; }
.sv-ctxt b { display: block; font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
/* 完成徽章统一走 <DoneTick>（.sv-cok 已移除） */
/* 扫码即用：Lucide QrCode 图标置于浅色方片中 */
.sv-qr {
  flex: none; width: 24px; height: 24px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2);
}

/* 中部：一来一回的对话 */
.sv-chat { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.sv-row { display: flex; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease-ui); }
.m2.ph2 .sv-row { opacity: 1; transform: none; }
.m2.ph2 .sv-row.out { transition-delay: .42s; }
.m2.ph2 .sv-row.in  { transition-delay: .6s; }
.sv-row.out { justify-content: flex-end; }
.sv-bubble {
  max-width: 80%; font-size: var(--t-small); line-height: 1.45; padding: 9px 14px;
  border-radius: var(--r-card);
}
.sv-row.out .sv-bubble {
  color: #fff; border-bottom-right-radius: 5px; background: var(--accent);
}
.sv-row.in .sv-bubble {
  color: var(--ink); font-weight: 400; border-bottom-left-radius: 5px;
  background: var(--surface); border: 1px solid var(--line-2);
}

/* 底部：composer 输入框（暗色圆形发送，对齐 ChatGPT / Cursor / Sana） */
.sv-input {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 9px 9px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  opacity: 0; transition: opacity .45s var(--ease) .12s;
}
.m2.ph2 .sv-input { opacity: 1; }
.sv-plus { font-size: var(--t-lead); color: var(--ink-4); line-height: 1; }
.sv-ph { flex: 1; font-size: var(--t-small); color: var(--ink-4); }
.sv-send {
  width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative;
  background: var(--ink);
}
.sv-send::after {
  content: "↑"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--t-body); font-weight: 700;
}

/* ============================================================
   屏 6 · 为什么值得投：好用 × 开放 × 便宜，三选二的空位
   三栏对比表（白卡 · 单色强调），中间「我们」一栏高亮。
   ============================================================ */
.whyworth { gap: clamp(12px, 1.8vh, 22px); }
.ww-sub { font-size: var(--t-sub); color: var(--ink-3); margin-top: 8px; }
.ww-sub b { color: var(--ink); font-weight: 600; }

.ww-grid { width: 100%; max-width: 940px; margin: 0 auto; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.wwg-cols {
  display: grid; grid-template-columns: 1fr 1.08fr 1fr;
  align-items: stretch; gap: clamp(12px, 1.6vw, 20px); width: 100%;
}
.wwg-col {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 16px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--spring), box-shadow .5s var(--ease);
}
.wwg-col.in { opacity: 1; transform: none; }
.wwg-col.us {
  border-color: color-mix(in srgb, var(--ch) 48%, transparent);
  box-shadow: 0 16px 46px color-mix(in srgb, var(--ch) 22%, transparent);
  transform: translateY(14px) scale(1.03);
}
.wwg-col.us.in { transform: scale(1.03); }

.wwg-name {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-small); font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
.wwg-col.us .wwg-name { color: var(--ch); }
.wwg-badge {
  font-size: var(--t-micro); font-weight: 700; color: #fff;
  padding: 2px 9px; border-radius: var(--r-pill); background: var(--ch);
}
.wwg-egs { font-size: var(--t-micro); color: var(--ink-4); margin-top: -6px; }

.wwg-marks {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: 11px; border-top: 1px dashed var(--line-2);
}
.wwg-cell { display: flex; align-items: center; justify-content: space-between; }
.wwg-rk { font-size: var(--t-caption); color: var(--ink-2); }
.wwg-mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-caption); font-weight: 700;
}
.wwg-mark.ok { color: var(--pos); background: color-mix(in srgb, var(--pos) 13%, var(--surface)); }
.wwg-mark.no { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, var(--surface)); }
.wwg-col.us .wwg-mark.ok { color: #fff; background: var(--ch); }

.wwg-tag {
  margin-top: auto; padding-top: 11px;
  font-size: var(--t-caption); font-weight: 600; color: var(--ink-3);
}
.wwg-col.us .wwg-tag { color: var(--ch); }

.ww-foot { flex: none; min-height: 60px; display: flex; align-items: center; justify-content: center; width: 100%; }
.ww-bench { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); text-align: center; max-width: 900px; }
.ww-bench b { color: var(--ch); font-weight: 700; }

/* ============================================================
   屏 7 · The Ask：$5M 怎么分 —— 横向分段比例条
   ============================================================ */
.ask { gap: clamp(16px, 2.6vh, 32px); }

/* 金额标题区 */
.ask-amount {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .6s var(--spring);
}
.ask-amount.on { opacity: 1; transform: none; }
.ask-num { font-size: clamp(46px, 6.4vw, 72px); font-weight: 700; letter-spacing: -.035em; color: var(--ink-3); line-height: 1; }
.ask-num b { color: var(--ink); }
.ask-num i { font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; color: var(--ink-3); font-style: normal; margin-left: 3px; }
.ask-amount-meta { font-size: var(--t-small); color: var(--ink-3); letter-spacing: .01em; }
.ask-amount-meta b { color: var(--ink-2); font-weight: 700; }

/* 舞台：分段条 + 图例 */
.ask-stage {
  display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 30px);
  /* auto 四向外边距：水平居中 + 在头部与底部结论之间垂直居中 */
  width: 100%; max-width: 880px; margin: auto; flex: none;
}

/* 分段比例条：段宽 = 相对权重；从左到右逐段「展开」（clip 揭幕，布局固定故始终与图例对齐） */
.ask-bar { display: flex; gap: 6px; width: 100%; height: clamp(46px, 7vh, 62px); }
.ask-seg {
  --seg: color-mix(in srgb, var(--ch) 40%, var(--surface));
  position: relative; flex-basis: 0; min-width: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: flex-start;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 28%, transparent), transparent 60%),
    var(--seg);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 36%, transparent);
  clip-path: inset(0 100% 0 0 round 12px);   /* 起始：完全收起在最左 */
  transition: clip-path .6s var(--ease-draw);
}
.ask-seg.in { clip-path: inset(0 0 0 0 round 12px); }   /* 揭幕：从左向右铺满 */
.seg-hire   { --seg: color-mix(in srgb, var(--ch) 82%, var(--surface)); }
.seg-cold   { --seg: color-mix(in srgb, var(--ch) 56%, var(--surface)); }
.seg-office { --seg: color-mix(in srgb, var(--ch) 36%, var(--surface)); }
.seg-tools  { --seg: color-mix(in srgb, var(--ch) 22%, var(--surface)); }
.ask-seg.big { border-color: color-mix(in srgb, var(--ch) 32%, transparent); }
.ask-seg-flag {
  margin-left: 14px; font-size: var(--t-micro); font-weight: 700; color: #fff;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, #000 18%, transparent);
  white-space: nowrap;
}

/* 图例：每列 flex 权重 = 对应段 → 与上方分段一一对齐；随该段一起出场 */
.ask-legend { display: flex; gap: 6px; width: 100%; align-items: flex-start; }
.ask-leg {
  flex-basis: 0; min-width: 0; padding: 0 2px;
  display: flex; flex-direction: column; gap: 5px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .5s var(--spring);
}
.ask-leg.in { opacity: 1; transform: none; }
.askl-head { display: flex; align-items: center; gap: 8px; }
.askl-dot { width: 11px; height: 11px; border-radius: 4px; flex: none; background: var(--seg); }
.seg-hire   .askl-dot { --seg: color-mix(in srgb, var(--ch) 82%, var(--surface)); }
.seg-cold   .askl-dot { --seg: color-mix(in srgb, var(--ch) 56%, var(--surface)); }
.seg-office .askl-dot { --seg: color-mix(in srgb, var(--ch) 36%, var(--surface)); }
.seg-tools  .askl-dot { --seg: color-mix(in srgb, var(--ch) 22%, var(--surface)); }
.askl-label { font-size: var(--t-small); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.askl-note { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.45; }

.ask-foot {
  flex: none; width: 100%; max-width: 880px; text-align: center; font-size: var(--t-lead); color: var(--ink-2); line-height: 1.55;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--spring);
}
.ask-foot.in { opacity: 1; transform: none; }
.ask-foot b { color: var(--ink); font-weight: 600; }

/* ============================================================
   响应式收口 · 保证 ~1100px 舞台内不溢出
   ============================================================ */
@media (max-width: 1024px) {
  .fw-main, .rn-stage, .rn-margin, .reng-stage { max-width: 100%; }
  .fw-stream { flex-basis: 100%; }
  .fw-chart { flex-basis: 100%; }
  .m2 { max-width: 100%; height: clamp(440px, 60vh, 540px); }
  /* 散落卡堆是按 ~1020 宽设计的定位，窄屏整体等比缩放避免溢出（仍保留散落形态） */
  .pile-scatter { transform: scale(.88); }
  /* 接单流 + 安全沙盒纵向堆叠：取消桌面固定高度，两卡按内容自然展开 */
  .rn-stage { grid-template-columns: 1fr; height: auto; }
  .rn-card { height: auto; }
  .sb-run { flex: 0 0 auto; }   /* 单列下不再撑满，按内容高度即可 */
  /* 决策图改为纵向堆叠：信号 → 核心 → 链路（窄屏隐藏连线，避免错位） */
  .reng-stage { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .reng-col { width: 100%; max-width: 460px; }
  .reng-wires { display: none; }
  /* The Ask · 分段条与图例均保持横向、按权重对齐（不在平板降级，确保对齐） */
}
@media (max-width: 900px) {
  .pile-scatter { transform: scale(.74); }
}
@media (max-width: 680px) {
  .wwg-cols { grid-template-columns: 1fr; }
  .wwg-col.us, .wwg-col.us.in { transform: none; }
  .pile-scatter { transform: scale(.64); }
}

/* ============================================================
   手机断点 · 375px 基准（兼顾 414/430）—— 仅重排/缩放，保留全部动画
   桌面与平板（680/1024）断点不受影响
   ============================================================ */
@media (max-width: 600px) {
  /* —— 六屏统一：纵向呼吸略收，头部留白收紧 —— */
  .rvm, .flywheel, .runner, .nosession, .whyworth, .ask {
    gap: 14px; padding-top: 6px;
  }

  /* ---- 屏 1 · act3-route（决策图）：已在 1024 单列堆叠、连线隐藏。
         此处收紧间距，保证堆叠的「信号 → 核心 → 链路」节点不挤、不溢出 ---- */
  .rvm { gap: 16px; }
  .rvm-sub { font-size: var(--t-caption); margin-top: 6px; }
  /* 桌面 .reng-stage 是 flex:1 + align-content:center；手机单列「信号→核心→链路」整体高于
     可用高度，居中会向上溢出、把信号栏顶进标题 → flex:none + 顶对齐，顺流滚动 */
  .reng-stage { gap: 12px; flex: none; align-content: start; }
  .reng-col { max-width: 100%; }
  .reng-hub { width: clamp(120px, 44vw, 150px); padding: 14px; }
  .reng-foot { font-size: var(--t-caption); }
  .sig-node, .chain-node, .cand-node { padding: 10px 12px; }

  /* ---- 屏 2 · act3-eval（评测飞轮）：任务流 + 曲线图纵向堆叠 ---- */
  /* 关键：桌面 .fw-main 带 flex-wrap:wrap，column 下会把两层「换列并排」导致重叠；
     必须 nowrap + 子层按内容撑高，才能任务流在上、曲线卡在下纵向堆叠 */
  .fw-main { flex-direction: column; flex-wrap: nowrap; gap: 16px; }
  .fw-stream, .fw-chart { flex: 0 0 auto; min-width: 0; width: 100%; }
  .fw-chart { padding: 14px 14px 12px; }
  /* 大读数缩到 h2，避免与 delta 同行挤压；曲线 SVG 自适应宽度即可 */
  .fwc-num { font-size: var(--t-h2); }
  .fwc-num i { font-size: var(--t-h3); }
  .fw-line { font-size: var(--t-caption); }

  /* ---- 屏 3 · act3-runner（接单 + 沙盒）：两卡已在 1024 单列；收紧内部网格 ---- */
  .rn-sub { font-size: var(--t-caption); }
  .rn-card { padding: 0 13px 12px; }
  .sandbox { padding-top: 14px; }
  .rn-margin { font-size: var(--t-caption); }
  /* 接单流行：路径较长，允许省略号生效，金额不被裁 */
  .rsr-type { font-size: var(--t-caption); }

  /* ---- 屏 4 · act3-nosession（复杂度桌 → 对话框）---- */
  .ns-sub { font-size: var(--t-caption); }
  /* 三拍同台：桌面三层 position:absolute 居中交叉淡入。手机上 BEAT0 单列 5 卡远高于
     舞台高度，绝对居中会向上/下溢出、把卡片顶到上方标题里 → 让 BEAT0(.m2-pile) 改回
     顺流(relative)、顶对齐，由它撑起 .m2 的真实高度；BEAT1/2 仍作居中浮层淡入。 */
  .m2 { height: auto; min-height: clamp(560px, 96vh, 760px); }
  .m2-pile { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  /* 桌面用绝对散落，手机改回顺流单列：复位定位与倾斜，卡片自然堆叠 */
  .m2-pile-cap { position: relative; left: auto; top: auto; transform: none; max-width: 100%; }
  .m2:not(.ph0) .m2-pile-cap { transform: translateY(-10px); }
  .pile-scatter { position: static; transform: none; display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .pile-card {
    position: relative; left: auto; top: auto; width: 100%;
    transform: rotate(var(--r));
  }
  .m2.ph1 .pile-card, .m2.ph2 .pile-card { transform: scale(.85) translateY(-12px); }
  .pile-core, .pile-ghost { display: none; }
  .mpc-stat { font-size: var(--t-caption); }
  /* 模型卡内部字段标签较宽，收一收避免溢出 */
  .pc-field > span { width: 92px; }
  .pc-slider > span { width: 70px; }
  .ms-line { font-size: var(--t-h3); }
  .m2-solve { width: min(94vw, 480px); padding: 18px; }

  /* ---- 屏 6 · act3-whyworth（三选二对照）：已在 680 单列；收紧 ---- */
  .ww-sub { font-size: var(--t-caption); }
  .wwg-col { padding: 14px 14px 13px; }
  .ww-bench { font-size: var(--t-caption); }

  /* ---- 屏 7 · act3-ask（融资 · 分段比例条）---- */
  .ask { gap: 14px; }
  .ask-num { font-size: clamp(36px, 12vw, 54px); }
  /* 手机：分段条与图例都改纵向单列堆叠（仍逐条 clip 揭幕） */
  .ask-bar { flex-direction: column; height: auto; gap: 8px; }
  .ask-seg { min-height: 40px; }
  .ask-legend { flex-direction: column; gap: 14px; }
  .ask-leg { padding: 0; }
  .ask-foot { font-size: var(--t-caption); }
}

/* —— 超窄机（≤380px）微调：金额与三档控件再收一档 —— */
@media (max-width: 380px) {
  .ask-num { font-size: clamp(30px, 13vw, 44px); }
  .reng-hub { width: clamp(112px, 52vw, 140px); }
  .sbl-tick em { display: none; }   /* 超窄机只留 L0–L3 档号 */
}