/* =========================================================
   工厂页面（需求文档第 21–33 章）
   ========================================================= */

/* ---------- 通用模拟界面原件 ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  flex: none;
}
.chip.ok { background: rgba(31, 157, 102, 0.12); color: var(--color-success); }
.chip.warn { background: rgba(217, 135, 25, 0.12); color: var(--color-warning); }
.chip.info { background: rgba(40, 100, 240, 0.1); color: var(--color-primary); }
.chip.muted { background: var(--color-bg-soft); color: var(--color-text-tertiary); }

.bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4d84f0, var(--color-primary));
}

.dots { display: inline-flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-line-strong); }
.dots i:nth-child(1) { background: rgba(217, 75, 75, 0.6); }
.dots i:nth-child(2) { background: rgba(217, 135, 25, 0.6); }
.dots i:nth-child(3) { background: rgba(31, 157, 102, 0.6); }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-dot.ok { background: var(--color-success); }
.status-dot.warn { background: var(--color-warning); }
.status-dot.info { background: var(--color-primary); }

/* 单据卡片 */
.doc {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.doc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-type { font-size: 12px; font-weight: 650; color: var(--color-text-tertiary); }
.doc-no { font-size: 13px; font-weight: 700; color: var(--color-text); font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.doc-head .chip { margin-left: auto; }
.doc-rows { display: grid; gap: 9px; }
.doc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.doc-row b { color: var(--color-text); font-weight: 650; text-align: right; }
.doc-row span:last-child { text-align: right; }

/* ---------- v9.22 角色页签 + 双端角色视图 ---------- */
.roleTabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.roleTab {
  padding: 9px 22px;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.roleTab:hover { color: var(--color-text); border-color: var(--color-primary); }
.roleTab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.roleTab.on, .roleTab[aria-selected="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(44, 104, 255, 0.28);
}

/* 角色视图：grid 1/1 堆叠，.on 可见；html.js 下 300ms 交叉淡入淡出 + 8px 上浮 */
.roleStack { display: grid; min-width: 0; }
.roleView {
  grid-area: 1 / 1;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}
.roleView.on { opacity: 1; pointer-events: auto; }
html.js .roleView { transform: translateY(8px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
html.js .roleView.on { transform: none; }
.rv-title { font-size: 14px; font-weight: 700; color: var(--color-text); display: flex; align-items: baseline; gap: 8px; }
.rv-sub { font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); }
.mkpi-row.rv-kpis4 { grid-template-columns: repeat(4, 1fr); }
.mkpi-row.rv-kpis3 { grid-template-columns: repeat(3, 1fr); }

/* 设备角色标签：深底白字小胶囊，放在设备框内右上角（.mw 共享壳 overflow:hidden，外挂会被裁） */
.sync-desktop { position: relative; }
.sync-desktop .devTag { top: 45px; right: 14px; }
.sync-phones .devTag { top: 3px; right: 3px; font-size: 8.5px; padding: 2px 7px; }
.devTag {
  position: absolute;
  z-index: 6;
  padding: 3px 10px;
  border-radius: 999px;
  background: #2b3245;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}

/* 手机端角色视图堆叠（phone-screen 为 flex 列，roleStack-m 吃满剩余高度；小机身内容按 ~36px 余量紧凑化） */
.roleStack-m { flex: 1; min-height: 0; display: grid; }
.roleStack-m .roleView { gap: 4px; overflow: hidden; }
.rv-sec { font-size: 9px; font-weight: 700; color: var(--color-text-tertiary); }
.rv-appr, .rv-task {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-line);
  border-radius: 7px;
  background: #fff;
  padding: 4px 6px;
}
.rv-appr-info, .rv-task-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rv-appr-info b, .rv-task-info b { font-size: 9.5px; font-weight: 650; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.rv-appr-info span, .rv-task-info span { font-size: 8.5px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.rv-btn {
  flex: none;
  padding: 3px 7px;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.rv-btn.ok { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.rv-btn.sm { padding: 2px 6px; }
.rv-note {
  border: 1px dashed var(--color-line);
  border-radius: 7px;
  background: #fff;
  padding: 3px 6px;
  font-size: 9px;
  color: var(--color-text-secondary);
  line-height: 1.35;
}
.rv-search {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #fff;
  padding: 3px 8px;
  font-size: 9px;
  color: var(--color-text-tertiary);
}
.rv-search svg { width: 10px; height: 10px; flex: none; }
.rv-cust {
  display: grid;
  gap: 1px;
  border: 1px solid var(--color-line);
  border-radius: 7px;
  background: #fff;
  padding: 4px 6px;
}
.rv-cust b { font-size: 9.5px; font-weight: 650; color: var(--color-text); line-height: 1.3; }
.rv-cust span { font-size: 8.5px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.rv-io { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--color-text-secondary); line-height: 1.3; }
.rv-io .tag { flex: none; padding: 1px 5px; border-radius: 4px; font-size: 8px; font-weight: 700; }
.rv-io .tag.in { background: rgba(31, 157, 102, 0.12); color: var(--color-success); }
.rv-io .tag.out { background: rgba(217, 135, 25, 0.14); color: var(--color-warning); }

/* 信息卡 */
.info-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.info-card h3 { font-size: 19px; font-weight: 700; }
.info-card p { font-size: 14.5px; color: var(--color-text-secondary); line-height: 1.75; }

/* 标签页组件（#apps 应用面板复用 .ftab-panel 切换动画；页胶囊条已由 .app-cards / .roleTabs 取代） */
html.js .ftab-panel[hidden] { display: none; }
html:not(.js) .ftab-panel { margin-bottom: 40px; }
html:not(.js) .app-cards { display: none; }
html:not(.js) .app-panel { margin-bottom: 24px; }
/* 面板切换：旧面板 200ms 先出（ease-in），新面板 280ms 后进（crossfade + 8px 上浮） */
.ftab-panel.is-entering { animation: panel-in var(--dur-state) var(--ease-spring); }
.ftab-panel.is-exiting { animation: panel-out var(--dur-micro) var(--ease-in) forwards; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes panel-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-4px); }
}

/* KPI 与图表 */
.kpi-grid { display: grid; gap: 12px; }
.kpi-grid.four { grid-template-columns: repeat(4, 1fr); }
.kpi-grid.three { grid-template-columns: repeat(3, 1fr); }
.kpi {
  border: 1px solid var(--color-line);
  border-radius: 7px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff, #fafcff);
  display: grid;
  gap: 2px;
}
.kpi .l { font-size: 11px; color: var(--color-text-tertiary); }
.kpi .v { font-size: 20px; font-weight: 700; }
.kpi .v small { font-size: 11px; color: var(--color-text-tertiary); font-weight: 500; }
.kpi .v.warn-text { color: var(--color-warning); }
.chart-card {
  border: 1px solid var(--color-line);
  border-radius: 7px;
  padding: 14px 16px 16px;
  background: #fff;
}
.chart-card .c-title { font-size: 12px; font-weight: 650; margin-bottom: 12px; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
.bars i {
  flex: 1;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #6f9bff, var(--color-primary));
  min-height: 8px;
}
.bars i:nth-child(2n) { background: linear-gradient(180deg, #8fb0e8, #3d5a80); }

/* 手机外框 */
.phone {
  width: 168px;
  flex: none;
  border-radius: 16px;
  border: 1px solid var(--color-line-strong);
  background: #fff;
  box-shadow: var(--shadow-float);
  padding: 8px;
  position: relative;
}
.phone-notch {
  width: 56px; height: 5px;
  border-radius: 999px;
  background: var(--color-line-strong);
  margin: 4px auto 8px;
}
.phone-screen {
  border-radius: 11px;
  background: linear-gradient(180deg, #f8faff, #fff);
  border: 1px solid var(--color-line);
  padding: 14px 12px;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 200px;
}
.phone-title { font-size: 12px; font-weight: 700; }
.phone-no { font-size: 11px; color: var(--color-text-tertiary); font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.phone-status { display: flex; }
.phone-sync { font-size: 10.5px; color: var(--color-text-tertiary); }
.phone-form { display: grid; gap: 7px; }
.pf-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-line);
  border-radius: 5px;
  padding: 6px 9px;
  background: #fff;
}
.pf-row b { color: var(--color-text); font-weight: 650; }
.phone-btn {
  display: block;
  text-align: center;
  font-size: 11.5px;
  font-weight: 650;
  color: #fff;
  background: var(--color-primary);
  border-radius: 5px;
  padding: 7px 0;
}
.phone-toast {
  font-size: 10.5px;
  font-weight: 650;
  color: var(--color-success);
  background: rgba(31, 157, 102, 0.1);
  border: 1px solid rgba(31, 157, 102, 0.3);
  border-radius: 5px;
  padding: 6px 9px;
  text-align: center;
}

/* ---------- 01 Hero（第 22 章） ---------- */
.hero {
  position: relative;
  padding: 180px 0 150px;
  background:
    radial-gradient(circle at 16% 8%, rgba(74, 165, 255, 0.16), transparent 34%),
    radial-gradient(circle at 84% 14%, rgba(61, 90, 128, 0.14), transparent 32%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 78%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(40, 100, 240, 0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 55%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 55%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-head {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: 24px;
  justify-items: center;
}
.hero-actions { margin-top: 6px; }
.hero-pills { margin-top: 4px; }
.hero-download { min-width: 176px; }
.hero-demo { min-width: 164px; }

.hero-visual {
  position: relative;
  max-width: 1120px;
  margin: 72px auto 0;
}

.fs-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-type { font-size: 11.5px; font-weight: 650; color: var(--color-text-tertiary); }
.fs-no { font-size: 12px; font-weight: 700; font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.fs-head .chip { margin-left: auto; }
.fs-progress { display: grid; gap: 8px; }
.fs-progress-top {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--color-text-tertiary);
}
.fs-progress-top .num-swap { font-weight: 700; color: var(--color-text); }



/* ---------- 02 常见问题（第 23 章） ---------- */
/* ---------- v9.19 痛点页签 + 左占位图右描述（散乱单据 mockup 删除） ---------- */
.pain-tabs {
  margin-top: 44px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pain-tab {
  padding: 11px 24px;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.pain-tab:hover { color: var(--color-text); border-color: var(--color-line-strong); }
.pain-tab[aria-selected="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(40, 100, 240, 0.22);
}
.pain-panels { margin-top: 36px; }
html.js .pain-panel[hidden] { display: none; }
.pain-panel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 44px;
  align-items: center;
}
/* 面板切换复用 tabset 通用 crossfade（panel-in/panel-out keyframes 见标签页组件） */
.pain-panel.is-entering { animation: panel-in var(--dur-state) var(--ease-spring); }
.pain-panel.is-exiting { animation: panel-out var(--dur-micro) var(--ease-in) forwards; }
/* v9.20：虚线占位 → 用户供图（图内底部说明卡已预处理裁掉，cover + 顶部对齐保留场景主体） */
.pain-fig {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  background: var(--color-bg-soft);
  overflow: hidden;
}
.pain-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pain-desc { display: grid; gap: 12px; align-content: center; }
.pain-desc h3 { font-size: 24px; font-weight: 700; }
.pain-desc p { font-size: 15px; color: var(--color-text-secondary); line-height: 1.8; }
.pain-desc ul { display: grid; gap: 10px; margin-top: 4px; }
.pain-desc li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.pain-desc li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: none;
}
html:not(.js) .pain-tabs { display: none; }
html:not(.js) .pain-panel { margin-bottom: 40px; }

/* ---------- 应用流程条（v9.28：流程条与应用卡合并，一行 7 列，描线 + 编号圆点 + 卡） ---------- */
.app-strip {
  position: relative;
  margin: 40px 0 0;
}
.app-strip .strip-line {
  position: absolute;
  top: 21px;
  /* 线从第 1 列圆点中心贯到第 7 列圆点中心（列宽 1/7，圆点中心 1/14） */
  left: calc(100% / 14);
  right: calc(100% / 14);
  height: 2px;
  background: var(--color-line);
}
.strip-line i {
  display: block;
  height: 100%;
  /* v9.20：旧 #flow「进度到第 3 步」32% 语义不再适用，7 步流程概览蓝色描线贯通全轨 */
  width: 100%;
  background: linear-gradient(90deg, #4d84f0, var(--color-primary));
  transform-origin: 0 50%;
}
/* 连接线描绘（1.2s，与 7 节点依次点亮的节拍对齐，scaleX 代替 width） */
html.js .strip-line i { transform: scaleX(0); transition: transform 1.2s var(--ease-out-standard) 0.15s; }
html.js .is-inview .strip-line i { transform: scaleX(1); }
/* 圆点依次点亮（150ms 间隔；仅 opacity/transform 带延迟，状态色过渡即时，点击高亮不滞后） */
html.js .app-strip .app-num {
  opacity: 0.3;
  transform: scale(0.85);
  transition: opacity var(--dur-state) var(--ease-out-standard), transform var(--dur-state) var(--ease-spring), background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
html.js .app-strip.is-inview .app-num { opacity: 1; transform: none; }
html.js .app-strip.is-inview .app-card:nth-child(2) .app-num { transition-delay: 0.15s, 0.15s, 0s, 0s, 0s, 0s; }
html.js .app-strip.is-inview .app-card:nth-child(3) .app-num { transition-delay: 0.3s, 0.3s, 0s, 0s, 0s, 0s; }
html.js .app-strip.is-inview .app-card:nth-child(4) .app-num { transition-delay: 0.45s, 0.45s, 0s, 0s, 0s, 0s; }
html.js .app-strip.is-inview .app-card:nth-child(5) .app-num { transition-delay: 0.6s, 0.6s, 0s, 0s, 0s, 0s; }
html.js .app-strip.is-inview .app-card:nth-child(6) .app-num { transition-delay: 0.75s, 0.75s, 0s, 0s, 0s, 0s; }
html.js .app-strip.is-inview .app-card:nth-child(7) .app-num { transition-delay: 0.9s, 0.9s, 0s, 0s, 0s, 0s; }
.app-num {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  border: 2px solid var(--color-line-strong);
  color: var(--color-text-tertiary);
}

/* ---------- 04 现成应用（第 25 章，卡片选择器在上、画布在下） ---------- */
.app-stage {
  margin-top: 24px;
  border-radius: var(--radius-stage);
  border: 1px solid rgba(215, 220, 229, 0.9);
  background: #fff;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  text-align: left;
}
.app-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-line);
  background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
}
.app-top .app-title { font-size: 13px; font-weight: 650; }
.app-top .app-live { margin-left: auto; }
.app-body {
  display: grid;
  grid-template-columns: 190px 1fr;
  min-height: 380px;
}
.app-side {
  border-right: 1px solid var(--color-line);
  background: #fbfcfe;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-side .side-item {
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--color-text-secondary);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.app-side .side-item.on {
  background: rgba(40, 100, 240, 0.09);
  color: var(--color-primary);
  font-weight: 650;
}
.app-main { padding: 20px; display: grid; align-content: start; }
.app-panel .doc { box-shadow: none; }

/* v9.28：卡体样式下放到 .app-card-body，按钮本体为列容器（圆点行 + 卡体行），卡高全列一致 */
.app-cards {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
.app-card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  display: grid;
  grid-template-rows: 42px 1fr;
  align-content: start;
  gap: 12px;
  justify-items: center;
  text-align: center;
  cursor: pointer;
}
.app-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 10px; }
.app-card-body {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 5px;
  align-content: start;
  justify-items: center;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 14px 10px;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.app-card:hover .app-card-body { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.app-card h3 { font-size: 13.5px; font-weight: 600; }
.app-card p { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.6; }
.app-card[aria-selected="true"] .app-card-body {
  border-color: rgba(40, 100, 240, 0.55);
  background: linear-gradient(180deg, #f5f9ff, #ffffff);
  box-shadow: var(--shadow-float);
}
.app-card[aria-selected="true"] h3 { color: var(--color-primary); }
.app-card[aria-selected="true"] .app-num {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(40, 100, 240, 0.35);
}

/* ---------- 电脑手机协同（v4 并入岗位协作区块） ---------- */
.sync-stage {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.sync-desktop {
  border-radius: var(--radius-stage);
  border: 1px solid rgba(215, 220, 229, 0.9);
  background: #fff;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  text-align: left;
}
.sd-body { padding: 18px 20px 20px; display: grid; gap: 16px; }

.sync-phones {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
}
/* v9.20：手机恢复正常 9:19 竖长机身（原内容自然撑高 ~577px 远超正常比例），内部界面按新比例紧凑重排 */
.sync-phones .phone {
  width: 158px;
  aspect-ratio: 9 / 19;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6px;
}
.sync-phones .phone-notch { flex: none; width: 42px; height: 4px; margin: 2px auto 5px; }
.sync-phones .phone-screen { flex: 1; min-height: 0; padding: 6px 7px; gap: 4px; }
.sync-phones .mphone-status { font-size: 9px; }
.sync-phones .mphone-top { padding: 1px 1px 4px; font-size: 11px; border-bottom: 1px solid var(--color-line); }
.sync-phones .mphone-top .mpt-sub { font-size: 9px; }
.sync-phones .mphone-tabs { padding-top: 3px; }
.sync-phones .mphone-tabs span { font-size: 8px; gap: 1px; }
.sync-phones .mphone-tabs span svg { width: 12px; height: 12px; }

.board-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; }
/* ---------- v9.21 [1] 应用面板数据弹卡（7 面板，切换时 0.9/1.2/1.5s 依次浮入） ---------- */
.app-panel { position: relative; min-width: 0; } /* min-width:0 — 390 下不被 mtable max-content 撑宽，弹卡贴在可视右缘 */
.apChips {
  position: absolute;
  right: 14px;
  top: 14px;
  display: grid;
  gap: 10px;
  z-index: 5;
  pointer-events: none;
}
.apChips--br { top: auto; bottom: 14px; } /* BI 面板内容满，弹卡改右下 */
.apChip {
  min-width: 108px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-primary);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 8px 12px;
  display: grid;
  gap: 2px;
}
.apChip .l { font-size: 12px; color: var(--color-text-tertiary); }
.apChip .v { font-size: 15.5px; font-weight: 650; }
.apChip .v.money { color: var(--color-primary); }
html.js .apChip { opacity: 0; transform: translateY(8px); }
html.js .apChips.ap-pop .apChip { animation: ap-chip-in 0.45s var(--ease-out) both; }
html.js .apChips.ap-pop .apChip:nth-child(1) { animation-delay: 0.9s; }
html.js .apChips.ap-pop .apChip:nth-child(2) { animation-delay: 1.2s; }
html.js .apChips.ap-pop .apChip:nth-child(3) { animation-delay: 1.5s; }
@keyframes ap-chip-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- v9.21 [2] 应用舞台侧栏可点击 ---------- */
.app-side .side-item { cursor: pointer; }
.app-side .side-item:hover { background: rgba(40, 100, 240, 0.06); color: var(--color-primary); }
.app-side .side-item.on:hover { background: rgba(40, 100, 240, 0.09); }
.app-side .side-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 5px; }

/* ---------- v9.21 [3] AI 生成应用区（移植集成商 #agent，类名加 fac 前缀；新增提示词 chips / 输入框 / 手机框） ---------- */
.fac-agent-grid {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: 40px;
  margin-top: 56px;
  align-items: stretch;
}
.fac-chat {
  min-width: 0; /* grid item：允许收窄，长输入示例文本由 .fac-input 链 ellipsis */
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-stage);
  box-shadow: var(--shadow-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fac-pchips { display: flex; gap: 8px; flex-wrap: wrap; }
.fac-pchip {
  border: 1px solid rgba(40, 100, 240, 0.4);
  background: #fff;
  color: var(--color-primary);
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
}
.fac-msg {
  max-width: 92%;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.7;
}
.fac-msg.fac-user { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.fac-msg.fac-bot { align-self: flex-start; background: var(--color-bg-soft); border: 1px solid var(--color-line); color: var(--color-text); border-bottom-left-radius: 4px; }
.fac-msg.fac-bot b { color: var(--color-primary); }
.fac-input {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  background: #fff;
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--color-text-tertiary);
}
.fac-input { min-width: 0; }
.fac-input-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fac-caret { flex: none; width: 2px; height: 14px; background: var(--color-primary); animation: fac-caret-blink 1s steps(1) infinite; }
@keyframes fac-caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
/* 对话消息进场（nth-of-type：.fac-pchips 是第 1 个 div，消息为 2–5） */
html.js .fac-chat .fac-msg { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
html.js .fac-agent-grid.is-inview .fac-chat .fac-msg { opacity: 1; transform: none; }
html.js .fac-agent-grid.is-inview .fac-msg:nth-of-type(2) { transition-delay: 0.1s; }
html.js .fac-agent-grid.is-inview .fac-msg:nth-of-type(3) { transition-delay: 0.7s; }
html.js .fac-agent-grid.is-inview .fac-msg:nth-of-type(4) { transition-delay: 1.6s; }
html.js .fac-agent-grid.is-inview .fac-msg:nth-of-type(5) { transition-delay: 2.1s; }

.fac-gen-stage { position: relative; display: flex; flex-direction: column; min-width: 0; }
.fac-gen {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-stage);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fac-gen-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.fac-gen-app { display: grid; grid-template-columns: 132px minmax(0, 1fr); flex: 1; }
.fac-gen-nav {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 14px 10px 14px 14px;
  border-right: 1px solid var(--color-line);
  background: linear-gradient(180deg, #fbfcff, #f5f8ff);
}
.fac-gn-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.fac-gn-item svg { width: 13px; height: 13px; flex: none; }
.fac-gn-item.on { background: rgba(40, 100, 240, 0.09); color: var(--color-primary); font-weight: 650; }
.fac-gen-body { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; }
.fac-gen-block {
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
  background: linear-gradient(180deg, #fff, #fafcff);
}
.fac-gen-block.wide { grid-column: 1 / -1; }
.fac-gen-block .g-title { font-size: 12px; font-weight: 650; color: var(--color-text-secondary); }
.fac-gen-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fac-gen-metrics .gm { border: 1px solid var(--color-line); border-radius: 6px; padding: 10px; background: #fff; }
.fac-gen-metrics .gm .l { font-size: 10.5px; color: var(--color-text-tertiary); }
.fac-gen-metrics .gm .v { font-size: 17px; font-weight: 700; margin-top: 2px; }
.fac-gen-metrics .gm svg { display: block; margin-top: 6px; }
.fac-gen-metrics .gm svg path { fill: none; stroke: var(--color-primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fac-dist { display: grid; gap: 10px; align-content: center; }
.fd-row { display: grid; grid-template-columns: 44px 1fr 18px; align-items: center; gap: 10px; font-size: 12px; }
.fd-row .fd-l { color: var(--color-text-secondary); }
.fd-row b { text-align: right; font-weight: 650; }
.fd-danger .bar-fill { background: linear-gradient(90deg, #e5a13f, var(--color-warning)); }
.fac-gen .mt-row.mt-hot { background: rgba(217, 135, 25, 0.07); }
.fac-gen-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px dashed var(--color-line);
  background: var(--color-bg-soft);
  font-size: 12px;
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}
.fac-gen-filter .gf-chip {
  border: 1px solid rgba(40, 100, 240, 0.4);
  background: #fff;
  color: var(--color-primary);
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
}
.fac-gen-filter .gf-hot {
  border: 1px solid rgba(217, 135, 25, 0.5);
  background: rgba(217, 135, 25, 0.1);
  color: var(--color-warning);
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
}
/* 逐步生成动画 */
html.js .fac-gen .fac-gen-block, html.js .fac-gen .fac-gen-filter { opacity: 0; transform: translateY(12px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gen-block, html.js .fac-agent-grid.is-inview .fac-gen .fac-gen-filter { opacity: 1; transform: none; }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gen-block:nth-child(1) { transition-delay: 0.9s; }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gen-block:nth-child(2) { transition-delay: 1.2s; }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gen-block:nth-child(3) { transition-delay: 1.5s; }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gen-block:nth-child(4) { transition-delay: 1.8s; }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gen-filter { transition-delay: 2.5s; }
html.js .fac-gen .fac-gn-item { opacity: 0; transform: translateX(-8px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gn-item { opacity: 1; transform: none; }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gn-item:nth-child(1) { transition-delay: 0.55s; }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gn-item:nth-child(2) { transition-delay: 0.65s; }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gn-item:nth-child(3) { transition-delay: 0.75s; }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gn-item:nth-child(4) { transition-delay: 0.85s; }
html.js .fac-agent-grid.is-inview .fac-gen .fac-gn-item:nth-child(5) { transition-delay: 0.95s; }

/* v9.21 [4] 生成预览旁的手机框（桌面探出生成区右缘，移动端纵排） */
.fac-phone {
  width: 158px;
  aspect-ratio: 9 / 19;
  background: #fff;
  border: 1px solid var(--color-line-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-float);
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fp-status { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; font-weight: 650; }
.fp-dots { display: inline-flex; gap: 3px; }
.fp-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--color-line-strong); }
.fp-title { font-size: 12px; font-weight: 700; }
.fp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fp-kpi { border: 1px solid var(--color-line); border-radius: 7px; padding: 6px 7px; background: var(--color-bg-soft); }
.fp-kpi .l { display: block; font-size: 8px; color: var(--color-text-tertiary); }
.fp-kpi b { font-size: 13px; }
.fp-list { display: grid; gap: 6px; }
.fp-row { border: 1px solid var(--color-line); border-radius: 7px; padding: 6px 7px; display: grid; gap: 4px; }
.fp-no { font-size: 8.5px; font-weight: 650; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fp-prog { height: 4px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; }
.fp-prog i { display: block; height: 100%; background: linear-gradient(90deg, #4d84f0, var(--color-primary)); }
.fp-st { font-size: 8px; font-weight: 650; }
.fp-st.info { color: var(--color-primary); }
.fp-st.warn { color: var(--color-warning); }
.fp-st.danger { color: var(--color-danger); }
html.js .fac-phone { opacity: 0; transform: translateY(12px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
html.js .fac-agent-grid.is-inview .fac-phone { opacity: 1; transform: none; transition-delay: 2.5s; } /* 与 PC 生成完成同步 */

.deploy-points {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.deploy-note {
  margin-top: 36px;
  text-align: center;
  font-size: 16px;
  color: var(--color-text-secondary);
}

/* ---------- 最终 CTA ---------- */
.cta-section {
  background:
    radial-gradient(circle at 15% 20%, rgba(74, 165, 255, 0.22), transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(61, 90, 128, 0.2), transparent 38%),
    linear-gradient(120deg, var(--color-bg-blue), var(--color-bg-violet));
}
.cta-card {
  border-radius: var(--radius-hero);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-float);
  padding: 64px 60px;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.cta-text { display: grid; gap: 20px; justify-items: start; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-actions .btn { width: auto; }
.cta-note { font-size: 13px; color: var(--color-text-tertiary); }
.cta-note .pending {
  font-weight: 700;
  color: var(--color-warning);
}
.cta-visual { display: grid; gap: 24px; justify-items: center; }
.cta-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.ct-node {
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-line);
  font-size: 13px;
  font-weight: 650;
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-card);
}
.ct-node.done {
  border-color: rgba(31, 157, 102, 0.5);
  background: rgba(31, 157, 102, 0.1);
  color: var(--color-success);
}
.cta-timeline i { color: var(--color-text-tertiary); font-style: normal; }
html.js .cta-timeline .ct-node { opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
/* v9.2 P0 修复：节点间的 → 箭头原先进场期孤立可见（节点尚未淡入时右侧漂浮 5 个无文字箭头）；
   箭头是节点分隔符，按代码意图纳入同一场景 reveal——初始隐藏，随时间线逐段点亮 */
html.js .cta-timeline i { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
html.js .cta-visual.is-inview .cta-timeline i { opacity: 1; transform: none; }
html.js .cta-visual.is-inview .cta-timeline i:nth-child(2) { transition-delay: 0.18s; }
html.js .cta-visual.is-inview .cta-timeline i:nth-child(4) { transition-delay: 0.43s; }
html.js .cta-visual.is-inview .cta-timeline i:nth-child(6) { transition-delay: 0.68s; }
html.js .cta-visual.is-inview .cta-timeline i:nth-child(8) { transition-delay: 0.93s; }
html.js .cta-visual.is-inview .cta-timeline i:nth-child(10) { transition-delay: 1.18s; }
html.js .cta-visual.is-inview .ct-node { opacity: 1; transform: none; }
html.js .cta-visual.is-inview .ct-node:nth-child(1) { transition-delay: 0.1s; }
html.js .cta-visual.is-inview .ct-node:nth-child(3) { transition-delay: 0.35s; }
html.js .cta-visual.is-inview .ct-node:nth-child(5) { transition-delay: 0.6s; }
html.js .cta-visual.is-inview .ct-node:nth-child(7) { transition-delay: 0.85s; }
html.js .cta-visual.is-inview .ct-node:nth-child(9) { transition-delay: 1.1s; }
html.js .cta-visual.is-inview .ct-node:nth-child(11) { transition-delay: 1.35s; }
.cta-phone { width: 240px; }
.phone-notify {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(31, 157, 102, 0.35);
  background: rgba(31, 157, 102, 0.07);
  border-radius: 7px;
  padding: 12px 14px;
}
.phone-notify b { font-size: 12.5px; line-height: 1.5; }
.phone-notify p { font-size: 11px; color: var(--color-text-tertiary); margin-top: 3px; }
.phone-notify .status-dot { margin-top: 5px; }
html.js .cta-phone { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--ease-out) 1.6s, transform 0.55s var(--ease-out) 1.6s; }
html.js .cta-visual.is-inview .cta-phone { opacity: 1; transform: none; }

/* ---------- 区块背景轮换 ---------- */
.bg-soft { background: var(--color-bg-soft); }
.bg-blue { background: linear-gradient(180deg, #fff, var(--color-bg-blue) 30%, #fff); }

/* ---------- 响应式 ---------- */
@media (max-width: 1023px) {
  .hero { padding: 164px 0 120px; }
  .hero-visual { margin-top: 56px; }
  /* v9.19：痛点面板移动端上下堆叠 */
  .pain-panel { grid-template-columns: 1fr; gap: 24px; }
  .app-body { grid-template-columns: 1fr; }
  .app-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--color-line); padding: 10px; }
  .app-side .side-item { white-space: nowrap; }
  .app-cards { grid-template-columns: 1fr 1fr; }
  /* v9.28：合并条 ≤1023 为 2 列卡网格，描线隐藏，圆点缩小放卡内左上角 */
  .app-strip .strip-line { display: none; }
  .app-card { display: block; text-align: left; position: relative; }
  .app-card-body { position: relative; padding: 12px 14px 12px 44px; justify-items: start; }
  .app-num { position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; font-size: 11px; border-width: 1.5px; }
  .sync-stage { grid-template-columns: 1fr; }
  .sync-phones {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  /* v5-B1 并排布局移动端还原为纵向 */
  .roles-split { display: block; }
  .roles-sync .sync-stage { margin-top: 40px; }
  .roles-sync .sync-phones { position: static; margin-top: 18px; }
  .roles-sync .sync-caption { text-align: center; }
  /* v9.21：AI 生成区还原纵排，侧栏导航横向滚动，手机框静态居中 */
  .fac-agent-grid { grid-template-columns: 1fr; }
  .fac-gen-app { grid-template-columns: 1fr; }
  .fac-gen-nav { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--color-line); padding: 10px 14px; scrollbar-width: none; }
  .fac-gen-nav::-webkit-scrollbar { display: none; }
  .fac-phone { margin: 18px auto 0; }
  .apChip { min-width: 96px; padding: 6px 10px; }
  .apChip .l { font-size: 11px; }
  .apChip .v { font-size: 13.5px; }
  .bi-split { grid-template-columns: 1fr !important; }
  .board-grid { grid-template-columns: 1fr; }
  .kpi-grid.four { grid-template-columns: 1fr 1fr; }
  .deploy-points { grid-template-columns: 1fr 1fr; }
  .cta-card { grid-template-columns: 1fr; padding: 48px 36px; gap: 40px; }
}

@media (max-width: 767px) {
  .hero { padding: 148px 0 96px; }
  .pain-tabs { margin-top: 32px; gap: 8px; }
  .pain-tab { padding: 9px 16px; font-size: 13.5px; }
  .pain-panels { margin-top: 24px; }
  .roleTabs { margin-top: 32px; gap: 8px; }
  .roleTab { padding: 8px 16px; font-size: 13px; }
  .rv-kpis4, .mkpi-row.rv-kpis4 { grid-template-columns: 1fr 1fr; }
  /* v9.28：保持 2 列，圆点/卡体再收一档 */
  .app-cards { gap: 10px; }
  .app-card-body { padding: 10px 10px 10px 40px; }
  .app-num { top: 10px; left: 10px; width: 22px; height: 22px; font-size: 10.5px; }
  .app-main { padding: 14px; }
  .kpi-grid.three { grid-template-columns: 1fr 1fr; }
  .deploy-points { grid-template-columns: 1fr; }
  .fac-chat { padding: 16px; }
  .fac-msg { font-size: 13px; }
  .fac-gen-body { grid-template-columns: 1fr; padding: 12px; }
  .apChips { right: 10px; top: 10px; gap: 8px; }
  .apChips--br { top: auto; bottom: 10px; }
  .cta-card { padding: 40px 22px; border-radius: 16px; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { width: 100%; }
  .cta-phone { width: 210px; }
}

/* ---------- 减少动态：直出终态 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .apChip,
  html.js .fac-msg,
  html.js .fac-gn-item,
  html.js .fac-gen .fac-gen-block,
  html.js .fac-gen .fac-gen-filter,
  html.js .fac-phone,
  html.js .cta-timeline .ct-node,
  html.js .cta-timeline i,
  html.js .cta-phone {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .fac-caret { animation: none !important; }
  html.js .strip-line i { transform: scaleX(1) !important; transition: none !important; }
  html.js .app-strip .app-num { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* v9.22：角色视图切换保留可用，但即时完成无过渡 */
  html.js .roleView { transition: none !important; transform: none !important; }
  .ftab-panel, .pain-panel { animation: none; }
}

/* H1 桌面端三行均衡断行，移动端自然换行 */
.br-desktop { display: none; }
@media (min-width: 1024px) { .br-desktop { display: inline; } }

/* ---------- 报表与经营分析 BI 面板（v3-P3） ---------- */
.bi-panel { display: grid; gap: 16px; align-content: start; }
.bi-kpis .kpi { align-content: start; }
.bi-trend { font-size: 11px; font-weight: 650; color: var(--color-text-tertiary); }
.bi-trend.up { color: var(--color-success); }
.bi-charts { grid-template-columns: 1.35fr 1fr; }
.c-legend {
  margin-left: 10px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.c-legend .lg { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-left: 8px; }
.lg-rev { background: var(--color-primary); }
.lg-pro { background: var(--color-accent); }

/* 近 6 个月收入 / 毛利双折线：描边动画（pathLength=100） */
.bi-line { width: 100%; height: auto; display: block; }
.bi-line .gl-grid line { stroke: var(--color-line); stroke-width: 1; }
.bi-line .gl-ylab text,
.bi-line .gl-xlab text { font-size: 10px; fill: var(--color-text-tertiary); }
.bi-line .gl-ylab text { text-anchor: end; }
.bi-line .gl-xlab text { text-anchor: middle; }
.bi-line .ln { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bi-line .ln-rev { stroke: var(--color-primary); }
.bi-line .ln-pro { stroke: var(--color-accent); }
.bi-line .ln-dots circle { fill: #fff; stroke-width: 2; }
.bi-line .ln-dots.rev circle { stroke: var(--color-primary); }
.bi-line .ln-dots.pro circle { stroke: var(--color-accent); }
html.js .bi-line .ln {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.2s var(--ease-out-standard);
}
html.js .bi-line .ln-pro { transition-delay: 0.25s; }
html.js .is-inview .bi-line .ln { stroke-dashoffset: 0; }
html.js .bi-line .ln-dots { opacity: 0; transition: opacity 0.4s var(--ease-out-standard) 0.9s; }
html.js .is-inview .bi-line .ln-dots { opacity: 1; }

/* 成本构成环形图：3 段描边描绘 */
.bi-donut-wrap { display: flex; align-items: center; gap: 16px; }
.bi-donut { width: 108px; height: 108px; flex: none; position: relative; }
.bi-donut svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.bi-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
}
.bd-seg { fill: none; stroke-width: 20; transition: stroke-dasharray 0.9s var(--ease-out-standard); }
.bd-s1 { stroke: var(--color-primary); stroke-dasharray: 58 100; stroke-dashoffset: 0; }
.bd-s2 { stroke: var(--color-accent); stroke-dasharray: 27 100; stroke-dashoffset: -58; transition-delay: 0.15s; }
.bd-s3 { stroke: var(--color-warning); stroke-dasharray: 15 100; stroke-dashoffset: -85; transition-delay: 0.3s; }
html.js .bi-donut .bd-seg { stroke-dasharray: 0 100; }
html.js .is-inview .bi-donut .bd-s1 { stroke-dasharray: 58 100; }
html.js .is-inview .bi-donut .bd-s2 { stroke-dasharray: 27 100; }
html.js .is-inview .bi-donut .bd-s3 { stroke-dasharray: 15 100; }
.bi-legend { display: grid; gap: 8px; font-size: 12px; color: var(--color-text-secondary); }
.bi-legend li { display: flex; align-items: center; gap: 8px; }
.bi-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bi-legend .grow { margin-left: auto; font-weight: 650; color: var(--color-text); }

/* 订单明细 + 客户对账表 */
.bi-tables { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; align-items: start; }
.bi-wide { overflow-x: auto; }
.bi-table { display: grid; min-width: 560px; }
.bi-recon { min-width: 0; }
.bi-row {
  display: grid;
  gap: 10px;
  padding: 7px 4px;
  font-size: 12px;
  border-bottom: 1px solid var(--color-line);
  align-items: center;
}
.bi-row:last-child { border-bottom: 0; }
.bi-orders .bi-row { grid-template-columns: 1.15fr 1.15fr 1.25fr 0.8fr 0.8fr 0.8fr 0.62fr 0.7fr; }
.bi-recon .bi-row { grid-template-columns: 1.2fr 0.9fr 0.9fr 0.9fr; }
.bi-row.head {
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-weight: 600;
  border-bottom: 1px solid var(--color-line-strong);
}
.bi-row.total { font-weight: 700; background: var(--color-bg-soft); border-radius: 5px; }
.bi-recon .warn-text { color: var(--color-warning); font-weight: 650; }

@media (max-width: 1023px) {
  .bi-tables { grid-template-columns: 1fr; }
  .bi-charts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .bi-donut .bd-s1 { stroke-dasharray: 58 100; }
  html.js .bi-donut .bd-s2 { stroke-dasharray: 27 100; }
  html.js .bi-donut .bd-s3 { stroke-dasharray: 15 100; }
  html.js .bi-donut .bd-seg { transition: none; }
  html.js .bi-line .ln { stroke-dashoffset: 0; transition: none; }
  html.js .bi-line .ln-dots { opacity: 1; transition: none; }
}

/* =========================================================
   P4a Mockup Kit 页面补丁（配合 shared/mockup.css）
   ========================================================= */
.fs-ok-text { color: var(--color-success); font-weight: 600; }

/* 手机壳改 flex 列，底部 tab 吸附 */
.phone-screen { display: flex; flex-direction: column; }
.phone-screen .mphone-tabs { margin-top: auto; }

/* KPI 行（角色视图 / doc 面板共用） */
.mkpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

/* 表格内嵌进度条 */
.mt-bar { width: 90px; display: inline-block; vertical-align: middle; }

/* 应用侧栏图标与底部用户区 */
.app-side .side-item { display: flex; align-items: center; gap: 8px; }
.app-side .side-item svg { width: 14px; height: 14px; flex: none; opacity: 0.75; }
.app-side .side-item.on svg { opacity: 1; }
.app-side .msb-user { margin-top: auto; }

/* sync-desktop 复用 .mw 窗口壳 */
.sync-desktop.mw { box-shadow: var(--shadow-float); }

@media (max-width: 767px) {
  .mt-bar { width: 64px; }
  .app-body { grid-template-columns: 1fr; }
  .app-side { display: none; }
}


/* =========================================================
   v4 合并补丁：roles 内电脑手机协同 + CTA 适用清单
   ========================================================= */
.sync-caption {
  margin: 28px auto 0;
  text-align: center;
  font-size: 16px;
  color: var(--color-text-secondary);
}
.sync-caption strong { color: var(--color-text); font-weight: 700; }

.cta-checks {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-line);
}
.cta-checks li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.cta-checks li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(31, 157, 102, 0.12);
  color: var(--color-success);
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
@media (max-width: 767px) {
  .cta-checks { gap: 8px 14px; padding-bottom: 18px; margin-bottom: 24px; }
  .cta-checks li { white-space: normal; font-size: 12.5px; }
  .sync-caption { font-size: 14.5px; }
}

/* =========================================================
   v5-B1 一屏预算：工厂页逐区块瘦身（仅桌面 ≥1024px）
   目标：1920×1080（可用一屏 944px）标题 + 核心视觉一屏入镜
   ========================================================= */
@media (min-width: 1024px) {
  /* Hero：合并后单排画布 + 头部收紧 */
  .hero { padding-bottom: 88px; }
  .hero-head { gap: 14px; }
  .hero-visual { margin-top: 36px; }

  /* roles：v9.22 角色页签 + 双端同步演示单栏居中，手机叠在 PC 右下 */
  .roles-split {
    margin-top: 40px;
    display: block;
  }
  .roles-sync { position: relative; max-width: 760px; margin: 28px auto 0; }
  .roles-sync .sync-stage { margin-top: 0; display: block; }
  /* v9.22：手机右移外探 70px（≤1024 安全边距 84px 内），少遮 PC 图表/表格右列 */
  .roles-sync .sync-phones { position: absolute; right: -70px; bottom: -14px; }
  /* v9.20：9:19 机身下内部内容需 164px 宽才不溢出（高 ≈ 346px，叠 PC 右下构图保持） */
  .roles-sync .sync-phones .phone { width: 164px; }
  .roles-sync .sync-caption { margin-top: 16px; text-align: center; font-size: 14px; }

  /* faq：v9.19 痛点页签 + 面板紧凑化 */
  .pain-tabs { margin-top: 32px; }
  .pain-panels { margin-top: 24px; }
  .pain-desc h3 { font-size: 22px; }

  /* v9.28：合并应用流程条紧凑化（圆点 36px，描线对齐圆点中心） */
  .app-strip { margin-top: 32px; }
  .app-card { grid-template-rows: 36px 1fr; }
  .app-num { width: 36px; height: 36px; font-size: 13px; }
  .app-strip .strip-line { top: 17px; }

  /* apps：卡片选择器 / 侧栏 / 面板紧凑化，BI 两栏并排 */
  .app-cards { gap: 12px; }
  .app-card { gap: 10px; }
  .app-card-body { padding: 12px 10px; gap: 4px; }
  .app-card h3 { font-size: 13.5px; }
  .app-card p { font-size: 11.5px; line-height: 1.55; }
  .app-stage { margin-top: 18px; }
  .app-top { padding: 10px 16px; }
  .app-body { min-height: 0; }
  .app-side { padding: 10px 8px; }
  .app-side .side-item { padding: 7px 10px; font-size: 12.5px; }
  .app-main { padding: 16px; }
  .bi-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .bi-split .bi-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .bi-kpis { gap: 10px; }
  .bi-kpis .kpi { padding: 10px 12px; }

  /* v9.21：AI 生成区紧凑 + 手机框探出生成区右缘 + 能力卡独立横排 */
  .fac-agent-grid { margin-top: 32px; gap: 24px; }
  .fac-chat { padding: 16px; gap: 10px; }
  .fac-msg { padding: 9px 13px; font-size: 13px; line-height: 1.6; }
  .fac-gen-body { padding: 14px; gap: 10px; }
  .fac-gen-block { padding: 10px 12px; gap: 8px; }
  .fac-gen-metrics { gap: 8px; }
  .fac-gen-metrics .gm { padding: 8px; }
  .fac-gen-metrics .gm .v { font-size: 15px; }
  .fac-gen-metrics .gm svg { width: 44px; height: 14px; }
  .fac-gen-block .mchart svg { max-height: 170px; }
  #deploy .mt-row, #deploy .mt-head { padding: 5px 10px; }
  .fac-gen-filter { padding: 8px 14px; }
  .fac-phone { position: absolute; right: -40px; bottom: 24px; }
  .deploy-points { margin-top: 40px; gap: 14px; }
  .deploy-points .info-card { padding: 16px 18px; }
  .deploy-note { margin-top: 28px; }


  /* cta：checklist 与按钮区收紧 */
  .cta-card { padding: 44px 48px; gap: 36px; }
  .cta-checks { padding-bottom: 16px; margin-bottom: 20px; gap: 8px 18px; }
}


/* =========================================================
   v5-B1b 高度达标补丁（桌面 ≥1024px）
   ========================================================= */
@media (min-width: 1024px) {
  /* hero：头部/卡片收紧（v8：配合流程动画画布再压缩） */
  #hero .h-hero { font-size: 46px; line-height: 1.12; }
  .hero { padding: 144px 0 40px; }
  .hero-head { gap: 8px; }
  .hero-head .lead { font-size: 17px; line-height: 1.6; }
  .hero-actions { margin-top: 2px; }
  .hero-pills { margin-top: 0; }
  .hero-visual { margin-top: 10px; }

  /* apps：选择卡与舞台收紧 */
  .app-cards { gap: 10px; }
  .app-card-body { padding: 10px 12px; }
  .app-card p { line-height: 1.5; }
  .app-stage { margin-top: 16px; }
  .app-top { padding: 8px 14px; }
  .app-main { padding: 12px 14px; }
  .app-main .mt-row, .app-main .mt-head { padding: 6px 10px; }
  .app-main .mtl-item { padding-bottom: 7px; }

  /* roles：表格 nowrap 防止单号换行撑高 */
  .roles-split { margin-top: 32px; }
  #roles .mkpi { padding: 10px 12px; }
  #roles .mkpi-v { font-size: 18px; }
  /* roles PC 窗口紧凑化 */
  .roles-sync .mw-main .mt-row, .roles-sync .mw-main .mt-head { padding: 6px 10px; }
}

/* =========================================================
   v5-B1c 高度达标补丁②（桌面 ≥1024px）
   ========================================================= */
@media (min-width: 1024px) {
  /* hero 再收紧 */
  #hero .h-hero { font-size: 46px; }
  .hero-visual { margin-top: 10px; }

  /* apps 微调 */
  .app-cards { margin-top: 16px; }
  .app-stage { margin-top: 12px; }
  .app-main { padding: 10px 12px; }
  .app-main .mt-row, .app-main .mt-head { padding: 5px 10px; }

  /* roles KPI / PC 窗口紧凑（v9.22：KPI 列数由 .rv-kpis3/.rv-kpis4 决定） */
  #roles .mkpi { padding: 8px 10px; gap: 2px; }
  #roles .mkpi-v { font-size: 17px; }
  .roles-split { margin-top: 28px; }
  .roles-sync .sync-caption { margin-top: 12px; max-width: calc(100% - 150px); }
  .roles-sync .mw-main { padding: 10px 12px; gap: 10px; }
}

/* =========================================================
   v5-C 布局骨架统一（桌面 ≥1024px）
   - mockup 视觉容器宽 ≤1080px 居中
   - hero 手机内嵌画布右下角不越界（原 bottom:-30 悬出画布外）
   ========================================================= */
@media (min-width: 1024px) {
  .hero-visual { max-width: 1080px; }
  .app-stage { max-width: 1080px; margin-inline: auto; }
  .roles-split, .fac-agent-grid { max-width: 1080px; margin-inline: auto; }
}

/* =========================================================
   v5-C2 宽帽后的高度补偿（桌面 ≥1024px）
   - 1080 宽帽使 hero +11px / roles +33px，压缩顶部间距回补
   ========================================================= */
@media (min-width: 1024px) {
  .hero-visual { margin-top: 8px; }
  .roles-split { margin-top: 18px; }
  /* caption 给手机 mockup 让出更多宽度避免遮挡 */
  .roles-sync .sync-caption { max-width: calc(100% - 200px); }
}

/* =========================================================
   v9.22 修补：fac-phone 外探 40px 在 1024–1151 流式区间会顶出视口
   （wrap 内边距 36px < 40px），此区间收窄外探为 30px
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1151px) {
  .fac-phone { right: -30px; }
}

/* =========================================================
   v8 Hero 流程动画（22s 时间轴 + 2s 停留，JS 时钟状态机）
   - 一张订单 SO-2026-0721 贯穿：客户→报价→订单→采购生产→入库发货→退货→报表
   - .fa-final 默认可见 = 无 JS / reduced-motion / 失败回退的静态帧
   - .fa-live 由 JS 添加，之后所有 [data-w] 元素由时钟窗口驱动 .on
   - 只动 transform / opacity；绿=完成、橙=待处理、红仅用于退货
   ========================================================= */
.fa {
  border-radius: var(--radius-stage);
  border: 1px solid rgba(215, 220, 229, 0.9);
  background: #fff;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  text-align: left;
}
.fa-head {
  padding: 4px 24px 4px;
  text-align: center;
  border-bottom: 1px solid var(--color-line);
  background: linear-gradient(180deg, #fbfcfe, #f7fafd);
}
.fa-eyebrow { font-size: 10px; font-weight: 650; color: var(--color-primary); letter-spacing: 0.02em; }
.fa-stage {
  position: relative;
  height: 440px; /* v8.5 删除标题/副文/标签后，头部省下的高度让给舞台（hero 总高不变） */
  background: linear-gradient(180deg, #fff, #fbfcfe);
  overflow: hidden;
}
/* v8.5 舞台加高后：阶段内容在更高舞台内垂直居中（caption/场景带为 absolute 不受影响） */
@media (min-width: 1024px) {
  .fa-phase { display: flex; flex-direction: column; justify-content: center; }
}
.fa-phase {
  position: absolute; inset: 0;
  padding: 58px 18px 40px; /* v9.2：caption 放大 +30%，顶部再多让 12px 防重叠 */
  opacity: 0;
  transition: opacity 0.64s ease; /* v8.8：随 TIME_SCALE 1.45 放慢 */
  pointer-events: none;
}
.fa-phase.on { opacity: 1; }
/* 静态终态：非 live 时最终总览始终可见 */
.fa-final {
  opacity: 1; pointer-events: auto;
  display: grid; align-content: center; justify-items: center; gap: 16px;
}
.fa-live .fa-final { opacity: 0; pointer-events: none; }
.fa-live .fa-final.on { opacity: 1; }
/* 时钟窗口驱动的显隐（live 模式才隐藏，保证静态帧完整） */
.fa-live [data-w]:not(.fa-phase) { opacity: 0; transition: opacity 0.35s ease; }
.fa-live [data-w].on:not(.fa-phase) { opacity: 1; }
.fa-live .fa-mv[data-w]:not(.fa-phase) {
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.fa-live .fa-mv[data-w].on:not(.fa-phase) { transform: none; }
/* 安装进度条：scaleX 生长 */
.fa-live .fx-bar[data-w] {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.6s linear, opacity 0.2s ease;
}
.fa-live .fx-bar[data-w].on { transform: scaleX(1); }

/* 共用小块 */
/* v8.6 caption 移到舞台顶部居中并放大（translate 属性独立于 fa-mv 的 transform，居中不丢） */
.fa-cap { position: absolute; left: 50%; top: 10px; bottom: auto; translate: -50% 0; margin: 0; display: grid; gap: 2px; justify-items: center; text-align: center; width: max-content; max-width: 92%; font-size: 16px; line-height: 1.3; color: var(--color-text-secondary); z-index: 5; } /* v9.2：辅助句 12.5→16px（+30%，与集成商页 v9.1 一致） */
.fa-cap b { font-size: 19px; font-weight: 650; color: var(--color-text); } /* v9.2：主句 14.5→19px（+30%） */
.fa-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2px 8px; }
.fa-flag.ok { color: var(--color-success); background: rgba(31, 157, 102, 0.1); }
.fa-flag.warn { color: var(--color-warning); background: rgba(217, 132, 46, 0.1); }
.fa-flag.danger { color: var(--color-danger); background: rgba(217, 75, 75, 0.09); }
.status-dot.danger { background: var(--color-danger); }
.fa-swap { display: grid; }
.fa-swap > * { grid-area: 1 / 1; justify-self: start; align-self: center; white-space: nowrap; }
.fa-swap em { font-style: normal; }
.fa-swap .ok { color: var(--color-success); font-weight: 600; }
.fa-swap .warn { color: var(--color-warning); font-weight: 600; }
.fa-card { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: #fff; padding: 10px 12px; display: grid; gap: 6px; align-content: start; }
.fa-card-t { font-size: 11px; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fa-no { font-size: 11px; font-weight: 700; font-family: ui-monospace, "SF Mono", Consolas, monospace; color: var(--color-text-secondary); }
.fa-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--color-text-secondary); }
.fa-kv b { color: var(--color-text); font-weight: 650; text-align: right; }
.fa-order-card { border-color: rgba(31, 95, 224, 0.45); box-shadow: var(--shadow-card); }
.fa-total { border-top: 1px dashed var(--color-line); padding-top: 5px; }
.fa-act {
  justify-self: start; font-size: 11px; font-weight: 650; color: #fff;
  background: var(--color-primary); border-radius: 6px; padding: 5px 12px; margin-top: 2px;
}
.fa-stock {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--color-warning);
  background: rgba(217, 132, 46, 0.08); border: 1px solid rgba(217, 132, 46, 0.3);
  border-radius: 6px; padding: 5px 9px; margin-top: 2px;
}
.fa-delta { font-size: 10px; font-weight: 600; color: var(--color-text-tertiary); }
.fa-delta.ok { color: var(--color-success); }
.fa-stock-line { gap: 8px; justify-content: flex-start; }
.fa-stock-line > span:first-child { min-width: 62px; }

/* 进度条（生产任务）：多段 scaleX 层叠，由窗口切换 */
.fa-prog { display: grid; gap: 5px; margin-top: 2px; }
.fa-prog-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-tertiary); }
.fa-prog-track { position: relative; height: 6px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; }
.fa-prog-v { position: absolute; inset: 0; border-radius: 999px; background: var(--color-primary); transform-origin: left center; }
.fa-prog-v.ok { background: var(--color-success); }

/* 手机小屏（7–14s 在场） */
.fa-phone {
  border: 1.5px solid #d6dde8; border-radius: 16px; background: #fff;
  box-shadow: var(--shadow-card); padding: 8px 9px; display: grid; gap: 6px;
  align-content: start; font-size: 10px; color: var(--color-text-secondary);
}
.fa-ph-top { font-size: 10.5px; font-weight: 700; color: var(--color-text); border-bottom: 1px solid var(--color-line); padding-bottom: 5px; }
.fa-ph-act { background: rgba(31, 95, 224, 0.08); border: 1px solid rgba(31, 95, 224, 0.3); color: var(--color-primary); font-weight: 600; border-radius: 6px; padding: 5px 7px; }
.fa-ph-note { color: var(--color-text-tertiary); }
.fa-ph-note.ok { color: var(--color-success); font-weight: 600; }
.fa-ph-sync { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--color-text-tertiary); margin-top: 2px; }

/* ---- 阶段一：客户与报价 ---- */
.fa-p1-grid { display: grid; grid-template-columns: 1fr 34px 1.2fr; gap: 10px; align-items: center; align-self: stretch; max-width: 860px; margin-inline: auto; }
.fa-cust b { font-size: 12.5px; }
.fa-big-arr { font-size: 18px; color: var(--color-primary); text-align: center; }

/* ---- 阶段二：订单与任务分派 ---- */
.fa-p2-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; align-items: stretch; height: 100%; max-width: 900px; margin-inline: auto; }
.fa-todos { display: grid; gap: 10px; align-content: start; }

/* ---- 阶段三：采购 / 领料 / 生产 + 手机 ---- */
.fa-p3-grid { display: grid; grid-template-columns: 1.15fr 1fr 128px; gap: 10px; align-items: stretch; align-self: stretch; }

/* ---- 阶段四：入库发货 + 退货分支 + 手机 ---- */
.fa-p4-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; align-items: center; align-content: center; align-self: stretch; }
.fa-p4-main { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; align-items: start; }
.fa-p4-side { display: grid; grid-template-columns: 118px 1fr; gap: 10px; align-items: start; }
.fa-return { border-color: rgba(217, 75, 75, 0.35); background: linear-gradient(180deg, #fff, rgba(217, 75, 75, 0.03)); }

/* ---- 阶段五：报表与对账 ---- */
.fa-p5-grid { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 10px; align-items: center; align-content: center; height: 100%; }
.fa-board { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: #fff; padding: 10px 12px; display: grid; gap: 6px; align-content: start; }
.fa-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fa-kpi { border: 1px solid var(--color-line); border-radius: 6px; background: var(--color-bg-soft); padding: 6px 8px; display: grid; gap: 2px; }
.fa-kpi span { font-size: 9.5px; color: var(--color-text-tertiary); }
.fa-kpi b { font-size: 12.5px; }
/* v9.27：P5 右侧页签/表格视觉权重收拢，与 P1/P3/P4 卡片密度齐平（rtab 10.5→10px、padding 3px10px→2px9px；
   rtabs 下边距 6→5；tr 行 padding 5→4、字重 600→500；字号体系不变，正文仍 11.5px 档） */
.fa-rtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-line); padding-bottom: 5px; margin-bottom: 5px; position: relative; }
.fa-rtab { font-size: 10px; border-radius: 999px; padding: 2px 9px; color: var(--color-text-tertiary); background: var(--color-bg-soft); border: 1px solid var(--color-line); }
.fa-rtab.cur { color: #fff; background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; } /* v9.27b：高亮态 .on→.cur，避开时钟显隐类撞名（v8.9 同款排坑） */
.fa-rtab + .fa-rtab.cur { position: absolute; }
.fa-rtabs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 4px; }
/* v9.27b：off/cur 两枚并同格（全断点）——任意时刻每页签只显示一枚，交叠时 cur（DOM 后）盖 off 淡入，切换视觉不变 */
.fa-rtabs .fa-rtab { grid-row: 1; white-space: nowrap; }
.fa-rtabs .fa-rtab.cur { position: static; }
.fa-rtabs .fa-rtab:nth-child(-n+2) { grid-column: 1; }
.fa-rtabs .fa-rtab:nth-child(n+3):nth-child(-n+4) { grid-column: 2; }
.fa-rtabs .fa-rtab:nth-child(n+5):nth-child(-n+6) { grid-column: 3; }
.fa-rtabs .fa-rtab:nth-child(n+7) { grid-column: 4; }
.fa-rpanels { position: relative; display: grid; }
.fa-rpanel { grid-area: 1 / 1; display: grid; gap: 4px; align-content: start; }
.fa-rtable { display: grid; gap: 3px; font-size: 10px; }
.fa-rpanel .fa-tr:not(.fa-th) { font-size: 10px; } /* v9.27：对账表体行在 .fa-rtable 之外继承舞台 17px（用户所见"表格文字太大"根因），修小对齐其它段 */
.fa-tr { display: grid; grid-template-columns: 1.1fr 1.3fr 0.8fr 0.6fr 0.6fr 0.9fr; gap: 6px; padding: 4px 8px; border-radius: 4px; align-items: center; }
.fa-tr:not(.fa-th) { background: var(--color-bg-soft); border: 1px solid var(--color-line); font-weight: 500; }
.fa-th { color: var(--color-text-tertiary); font-size: 9.5px; font-weight: 400; }

/* ---- 阶段六：AI + 应用市场 ---- */
.fa-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 12px; height: 100%; align-content: center; }
.fa-col { display: grid; grid-template-rows: auto 1fr; gap: 6px; min-height: 0; }
.fa-col-t { font-size: 11px; color: var(--color-text-secondary); display: grid; gap: 1px; }
.fa-col-t b { font-size: 12px; color: var(--color-text); }
.fa-chat {
  border: 1px solid var(--color-line); border-radius: var(--radius-card); background: #fff;
  padding: 8px 10px; display: grid; gap: 6px; align-content: start; min-height: 0; overflow: hidden;
}
.fa-msg { font-size: 10px; line-height: 1.5; border-radius: 8px; padding: 5px 9px; max-width: 94%; }
.fa-msg.user { justify-self: end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 2px; }
.fa-msg.bot { justify-self: start; background: var(--color-bg-soft); border: 1px solid var(--color-line); color: var(--color-text-secondary); border-bottom-left-radius: 2px; }
.fa-gen { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.fa-gencard { font-size: 10px; font-weight: 600; border: 1px solid rgba(31, 95, 224, 0.3); color: var(--color-primary); border-radius: 5px; background: rgba(31, 95, 224, 0.05); padding: 4px 8px; }
.fa-p6-market { display: grid; grid-template-columns: 1fr 96px; gap: 8px; min-height: 0; }
.fa-apps-f { grid-template-columns: repeat(3, 1fr); }
.fa-apps { display: grid; gap: 6px; align-content: start; }
.fa-app { position: relative; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: #fff; padding: 7px 9px; display: grid; gap: 2px; font-size: 9.5px; align-content: start; }
.fa-app b { font-size: 11px; }
.fa-app span { color: var(--color-text-secondary); }
.fa-app .fa-install { color: var(--color-primary); font-weight: 600; margin-top: 2px; font-style: normal; }
.fa-app .fa-swap .ok { color: var(--color-success); font-weight: 600; margin-top: 2px; }
.fa-app .fa-prog { display: block; height: 5px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; margin-top: 5px; }
.fa-app .fa-prog i { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.fa-hot-ring { position: absolute; inset: -1px; border: 1.5px solid var(--color-primary); border-radius: calc(var(--radius-card) + 1px); pointer-events: none; }
.fa-menu { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-bg-soft); padding: 8px 9px; display: grid; gap: 4px; align-content: start; }
.fa-mitem { font-size: 9.5px; padding: 4px 7px; border-radius: 4px; color: var(--color-text-secondary); background: #fff; border: 1px solid var(--color-line); }
.fa-mitem.new { background: rgba(31, 95, 224, 0.09); color: var(--color-primary); border-color: rgba(31, 95, 224, 0.35); font-weight: 600; }

/* ---- 最终总览 ---- */
.fa-flow { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fa-node { font-size: 11px; font-weight: 600; border: 1px solid var(--color-line); background: #fff; border-radius: var(--radius-card); padding: 8px 14px; box-shadow: var(--shadow-card); }
.fa-node.ok { color: var(--color-success); border-color: rgba(31, 157, 102, 0.4); }
.fa-node.dim { color: var(--color-text-tertiary); }
.fa-node.warn-node { color: var(--color-danger); border-color: rgba(217, 75, 75, 0.4); }
.fa-arr { color: var(--color-primary); font-weight: 700; }
.fa-flow-b .fa-arr { color: var(--color-text-tertiary); }
.fa-values { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fa-values li { font-size: 10.5px; color: var(--color-primary); background: rgba(31, 95, 224, 0.07); border-radius: 999px; padding: 4px 12px; font-weight: 600; }
.fa-summary { margin: 0; font-size: 13px; font-weight: 650; }

/* ---- 响应式 ---- */
@media (max-width: 1023px) {
  .fa-stage { height: 620px; }
  /* v8.9：P2 订单卡不再随 align-items:stretch 撑满全高（768–1023 实测订单卡被拉到 526px），改订单卡整行 + 任务卡双列 */
  .fa-p2-grid { grid-template-columns: 1fr; gap: 8px; align-items: start; align-content: center; height: auto; max-width: 640px; }
  .fa-p2 .fa-todos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fa-p3-grid { grid-template-columns: 1fr 1fr 116px; }
  .fa-p4-grid { grid-template-columns: 1fr; align-content: start; }
  .fa-p5-grid { grid-template-columns: 1fr 1.2fr; }
  .fa-apps-f { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .fa-head { padding: 8px 14px 7px; }
  /* 移动端：纵向流程，min-height 760 */
  .fa-stage { height: 760px; }
  .fa-phase { padding: 70px 12px 46px; } /* v9.2：caption 放大，移动端同步多让 14px */
  .fa-p1-grid { grid-template-columns: 1fr; gap: 8px; align-content: start; height: auto; }
  .fa-big-arr { transform: rotate(90deg); }
  /* v8.9：P2 移动端压缩（任务卡减行后间距/字号同步收紧，实测内容 446→≤360px，远低于 660 目标） */
  .fa-p2-grid { grid-template-columns: 1fr; gap: 7px; align-content: start; height: auto; max-width: none; }
  .fa-p2 .fa-todos { grid-template-columns: 1fr; gap: 7px; }
  .fa-p2 .fa-card { padding: 8px 10px; gap: 5px; }
  .fa-p2 .fa-card-t, .fa-p2 .fa-no, .fa-p2 .fa-kv { font-size: 10.5px; }
  .fa-p3-grid { grid-template-columns: 1fr; gap: 8px; align-content: start; height: auto; }
  .fa-p4-main { grid-template-columns: 1fr; }
  .fa-p4-side { grid-template-columns: 1fr; }
  .fa-p5-grid { grid-template-columns: 1fr; gap: 8px; align-content: start; height: auto; }
  .fa-split { grid-template-columns: 1fr; gap: 8px; height: auto; }
  .fa-apps-f { grid-template-columns: repeat(2, 1fr); }
  .fa-p6-market { grid-template-columns: 1fr; }
  .fa-menu { display: none; }
  .fa-final { gap: 12px; align-content: center; }
  .fa-flow { flex-direction: column; gap: 6px; }
  .fa-arr { transform: rotate(90deg); }
  .fa-cap { left: 50%; right: auto; top: 9px; bottom: auto; translate: -50% 0; max-width: 98%; font-size: 13px; } /* v9.2：放宽行宽上限；副句 13px */
  .fa-cap b { font-size: 13px; } /* v9.2：工厂最长主句 26 全角字符（caption5），390px 舞台实测 342.8px、文本每 em 一字符，仅 13px 能单行（14/15px 实测均跨行）；粗体 650 与副句保持层级 */
}
@media (prefers-reduced-motion: reduce) {
  .fa-phase, .fa-stage [data-w] { transition: none !important; }
}

/* ============ v8.1 阶段进度指示条（舞台内右下胶囊，绝对定位零高度增量） ============ */
.fa-steps {
  position: absolute; left: 50%; right: auto; translate: -50% 0; bottom: 10px; z-index: 3; /* v8.6：进度步骤居中于舞台底部 */
  display: flex; align-items: center; gap: 4px 9px;
  padding: 3px 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 10.5px;
  box-shadow: 0 1px 4px rgba(30, 45, 70, 0.06);
}
.fa-step {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-text-secondary); font-weight: 600; white-space: nowrap;
  transition: color 0.3s ease;
}
.fa-step::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: #c4cddc;
  transition: background 0.3s ease;
}
.fa-step.cur { color: var(--color-primary); font-weight: 700; }
.fa-step.cur::before { background: var(--color-primary); }
.fa-step.done { color: #9aa6b8; }
.fa-step.done::before {
  content: "✓"; width: auto; height: auto; border-radius: 0;
  background: none; color: var(--color-success); font-size: 9.5px; line-height: 1;
}
.fa-paused-mark {
  display: none; align-items: center; gap: 5px;
  color: var(--color-warning); font-weight: 650; font-size: 10px; white-space: nowrap;
}
.fa-steps.paused .fa-paused-mark { display: inline-flex; }
.fa-paused-mark i {
  width: 2px; height: 9px;
  border-left: 3px solid var(--color-warning);
  border-right: 3px solid var(--color-warning);
}
@media (max-width: 767px) {
  .fa-steps { left: 10px; right: 10px; translate: none; bottom: 6px; justify-content: center; flex-wrap: wrap; padding: 3px 10px; font-size: 10px; }
}

/* ============ v8.2 工厂版场景化增强：现场场景带 + 单据实体化流动 ============ */
/* P3 阶段层两行布局：界面卡（1fr）+ 产线场景带（auto），舞台不加高；v9.25：P1/P4 底部场景小条并入左侧场景带 */
.fa-p3 { display: grid; grid-template-rows: 1fr auto; row-gap: 6px; }

/* 场景带通用：细线风 SVG 衬景（单蓝 token，绿=运行/完成、橙=待处理、红仅退货） */
.fa-scene {
  position: relative;
  border: 1px dashed rgba(151, 168, 196, 0.4);
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfdff, #f6f9fc);
  overflow: hidden;
}
.fa-scene svg { display: block; width: 100%; height: 100%; }
.fa-scene .l { stroke: #b9c6da; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fa-scene .a { stroke: rgba(31, 95, 224, 0.5); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.fa-scene .b { stroke: #b9c6da; stroke-width: 1.8; fill: #fff; }
.fa-scene-tag { position: absolute; top: 3px; left: 10px; z-index: 1; font-size: 9px; font-weight: 650; color: var(--color-text-tertiary); letter-spacing: 0.02em; }

/* P1 办公室桌面场景条（显示器 + 电话 + 便签 + 桌面线） */
.fa-scene-desk { height: 52px; }

/* P3 车间产线场景：原材料货架 + 三台设备状态灯 + 完成计数 */
.fa-scene-line { height: 74px; display: flex; align-items: center; gap: 10px; padding: 2px 14px 2px 10px; }
.fa-scene-line .fa-shelf { width: 84px; flex: none; height: 56px; }
.fa-scene-line .fa-machines { flex: 1; height: 64px; }
.fa-mc-run { stroke: var(--color-success); stroke-width: 2.2; fill: rgba(31, 157, 102, 0.06); }
.fa-lamp-g { fill: #c7d0de; }
.fa-lamp-wait { fill: var(--color-warning); }
.fa-lamp-run { fill: var(--color-success); }
.fa-counter { flex: none; font-size: 10px; color: var(--color-text-secondary); white-space: nowrap; }
.fa-counter .fa-swap { display: inline-grid; vertical-align: baseline; }
.fa-counter em { font-style: normal; font-weight: 700; color: var(--color-text); }
.fa-counter .ok { color: var(--color-success); }

/* P4 仓库传送线场景：包裹水平移动（仅 transform/opacity，hover 暂停联动） */
.fa-scene-wh { height: 54px; }
.fa-pkg {
  position: absolute; left: 0; bottom: 9px; z-index: 1;
  width: 15px; height: 12px;
  border: 1.5px solid #9fb0ca; border-radius: 2.5px; background: #fff;
}
/* v8.6 循环动画时长随 TIME_SCALE ×1.25 */
.fa-pkg-in.on { animation: faPkgIn 1.885s ease-in-out both; }
.fa-pkg-out1.on { animation: faPkgOut 2.175s linear both; }
.fa-pkg-out2.on { animation: faPkgOut 2.175s linear 1.015s both; }
.fa-pkg-back.on { animation: faPkgBack 0.87s ease-in-out both; border-color: rgba(217, 75, 75, 0.7); background: rgba(217, 75, 75, 0.08); }
.fa:hover .fa-pkg.on, .fa:hover .fa-doc.on { animation-play-state: paused; }
@keyframes faPkgIn {
  0% { transform: translateX(700px); opacity: 0; }
  15% { opacity: 1; } 85% { opacity: 1; }
  100% { transform: translateX(120px); opacity: 0; }
}
@keyframes faPkgOut {
  0% { transform: translateX(120px); opacity: 0; }
  12% { opacity: 1; } 88% { opacity: 1; }
  100% { transform: translateX(920px); opacity: 0; }
}
@keyframes faPkgBack {
  0% { transform: translateX(920px); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateX(740px); opacity: 1; }
}

/* P5 办公室大屏外框衬景（轻量：边框 + 支架脚） */
.fa-screen { position: relative; }
.fa-screen .fa-board { position: relative; z-index: 1; }
.fa-screen-frame { position: absolute; inset: -9px -11px; z-index: 0; border: 2px solid #d3dcea; border-radius: 14px; }
.fa-screen-frame::before { content: ""; position: absolute; left: 50%; bottom: -13px; width: 2px; height: 13px; background: #d3dcea; transform: translateX(-50%); }
.fa-screen-frame::after { content: ""; position: absolute; left: 50%; bottom: -15px; width: 54px; height: 2px; background: #d3dcea; transform: translateX(-50%); }

/* 手机工作台衬景（桌线 + 两条腿） */
.fa-phone { position: relative; }
.fa-phone::after {
  content: ""; position: absolute; left: -10px; right: -10px; bottom: -12px; height: 10px;
  border-top: 2px solid #c9d4e6;
  background: linear-gradient(90deg, transparent 10%, #c9d4e6 10%, #c9d4e6 12%, transparent 12%, transparent 88%, #c9d4e6 88%, #c9d4e6 90%, transparent 90%);
}

/* 单据实体化流动：转场小卡沿短路径移动（transform + 淡入出） */
.fa-doc {
  position: absolute; top: 28%; z-index: 4;
  display: grid; gap: 1px; padding: 5px 10px;
  background: #fff; border: 1px solid var(--color-line); border-left: 3px solid var(--color-primary);
  border-radius: 8px; box-shadow: var(--shadow-card);
  font-size: 9.5px; pointer-events: none;
}
.fa-doc b { font-size: 10px; }
.fa-doc span { color: var(--color-text-tertiary); }
.fa-doc-1 { left: 58%; } .fa-doc-1.on { animation: faDoc1 1.305s ease-in-out both; }
.fa-doc-2 { left: 22%; } .fa-doc-2.on { animation: faDoc2 1.16s ease-in-out both; }
.fa-doc-3 { left: 56%; } .fa-doc-3.on { animation: faDoc3 1.16s ease-in-out both; }
@keyframes faDoc1 { 0% { transform: translate(0, 0); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translate(-400px, 6px); opacity: 0; } }
@keyframes faDoc2 { 0% { transform: translate(0, 0); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translate(340px, 6px); opacity: 0; } }
@keyframes faDoc3 { 0% { transform: translate(0, 0); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translate(-360px, 6px); opacity: 0; } }

/* 移动端：只保留产线核心场景（设备状态灯 + 计数），次要场景隐藏避免拥挤 */
@media (max-width: 767px) {
  .fa-scene-desk, .fa-scene-wh, .fa-doc, .fa-screen-frame { display: none; }
  .fa-scene-line { height: 60px; padding-inline: 8px; }
  .fa-scene-line .fa-shelf { display: none; }
  .fa-counter { font-size: 9px; }
  .fa-phone::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-pkg, .fa-doc { animation: none !important; }
}

/* ============ v8.6 五项优化：AI 左对话右生成 + 生成状态图标 + 市场卡图标 ============ */
/* AI 分栏容器：左对话（浅灰底 + 右边线）右生成 */
.fa-ai {
  display: grid; grid-template-columns: 42% 1fr;
  border: 1px solid var(--color-line); border-radius: var(--radius-card);
  background: #fff; overflow: hidden; min-height: 0;
}
.fa-ai-chat {
  display: grid; gap: 6px; align-content: start;
  padding: 9px 10px; min-width: 0;
  background: var(--color-bg-soft);
  border-right: 1px solid var(--color-line);
}
.fa-ai-gen {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 6px;
  align-content: center; padding: 9px 10px; min-width: 0;
}
/* 生成占位：虚线框，首个生成项出现时同步隐去（窗口 17.6–18.4） */
.fa-gen-empty {
  position: absolute; inset: 8px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed #b9c6da; border-radius: 8px;
  background: var(--color-bg-soft);
  color: var(--color-text-tertiary); font-size: 10.5px;
}
/* 生成项白卡 + 状态图标（spinner → 绿对勾） */
.fa-ai-gen .fa-gencard {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: 6px; background: #fff;
  padding: 5px 8px; box-shadow: var(--shadow-card);
}
.fa-ic { position: relative; width: 14px; height: 14px; flex: none; }
.fa-ic i { position: absolute; inset: 0; border-radius: 50%; }
.fa-spin { border: 2px solid #d3dcea; border-top-color: var(--color-primary); }
.fa-spin.on { animation: faSpin 0.7s linear infinite; }
.fa-check { background: var(--color-success); }
.fa-check::after {
  content: ""; position: absolute; left: 4.5px; top: 2.5px;
  width: 3.5px; height: 6px;
  border-right: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: rotate(45deg);
}
@keyframes faSpin { to { transform: rotate(360deg); } }
/* 三点"正在输入"指示器（仅窗口内动画） */
.fa-typing {
  justify-self: start; display: inline-flex; gap: 3px; align-items: center;
  padding: 6px 9px; border-radius: 8px; border-bottom-left-radius: 2px;
  background: var(--color-bg-soft); border: 1px solid var(--color-line);
}
.fa-typing i { width: 4px; height: 4px; border-radius: 50%; background: #9aa6b8; }
.fa-typing.on i { animation: faTyping 1s ease-in-out infinite; }
.fa-typing.on i:nth-child(2) { animation-delay: 0.15s; }
.fa-typing.on i:nth-child(3) { animation-delay: 0.3s; }
@keyframes faTyping { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
/* 市场卡：名称前 17px 线性图标 */
.fa-app-head { display: flex; align-items: center; gap: 5px; }
.fa-app-head b { color: var(--color-text); }
.fa-app-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* hover 暂停联动 */
.fa:hover .fa-spin.on, .fa:hover .fa-typing.on i { animation-play-state: paused; }
/* 移动端：分栏改上下堆叠，生成项两列 */
@media (max-width: 767px) {
  .fa-ai { grid-template-columns: 1fr; }
  .fa-ai-chat { border-right: none; border-bottom: 1px solid var(--color-line); }
  .fa-ai-gen { grid-template-columns: 1fr 1fr; align-content: start; }
  /* v8.6 实测：fa-final 总览移动端超 760 舞台 ~45px，压缩节点与间距（桌面不变） */
  .fa-final .fa-node { padding: 5px 10px; font-size: 10px; }
  .fa-final .fa-flow { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-spin, .fa-typing i { animation: none !important; }
}

/* ============ v8.7 AI 段拆分独播：P6a AI 工作台（SCADA 移植）/ P6b 应用市场 ============ */
/* 两个子阶段全幅独播（覆盖 v8.5 桌面 flex 居中；grid 1fr 轨道防止 justify-content:center 把内容压成 max-content 居中窄条） */
.fa-p6a, .fa-p6b { display: grid; grid-template: 1fr / 1fr; }

/* AI 工作台窗口外壳：winbar（三点 + 标题 + 在线状态点 + 时间） */
.fa-wb {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--color-line); border-radius: 12px; background: #fff;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.fa-wb-bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-bottom: 1px solid var(--color-line);
  font-size: 11px; color: var(--color-text-secondary);
}
.fa-wb-dots { display: inline-flex; gap: 5px; }
.fa-wb-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d3dcea; }
.fa-wb-dots i:first-child { background: #c4cddc; }
.fa-wb-title { font-weight: 650; color: var(--color-text); }
.fa-wb-online { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--color-success); }
.fa-wb-time { margin-left: auto; font-style: normal; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 10px; color: var(--color-text-tertiary); }
.fa-wb-body { flex: 1; display: grid; grid-template-columns: 42% 1fr; min-height: 0; }
/* 左栏对话：浅灰底 + 边线 */
.fa-wb-chat {
  display: grid; gap: 7px; align-content: start;
  padding: 10px 12px; min-width: 0;
  background: var(--color-bg-soft); border-right: 1px solid var(--color-line);
}
.fa-umsg { display: grid; gap: 2px; justify-items: end; }
.fa-msg-t { font-size: 8.5px; color: var(--color-text-tertiary); padding: 0 4px; }
.fa-aimsg { display: flex; gap: 6px; align-items: flex-start; justify-self: start; max-width: 96%; }
.fa-avatar {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--color-primary); color: #fff;
  font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.fa-aibub {
  background: #fff; border: 1px solid var(--color-line);
  border-radius: 4px 10px 10px 10px; padding: 8px 10px;
  display: grid; gap: 7px; min-width: 0;
}
/* 意图理解区：标题 + 意图 pills 依次弹出 */
.fa-intent-t { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 650; color: var(--color-text); }
.fa-intent-t svg { width: 13px; height: 13px; stroke: var(--color-success); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fa-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.fa-pill {
  font-size: 9.5px; font-weight: 600; color: var(--color-primary);
  background: rgba(31, 95, 224, 0.07); border: 1px solid rgba(31, 95, 224, 0.25);
  border-radius: 999px; padding: 2px 8px;
}
/* 结构化步骤列表：spinner → 绿对勾 + 等宽字体小灰条 */
.fa-steps2 { display: grid; gap: 5px; }
.fa-step2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 10px; color: var(--color-text-secondary); }
.fa-step2-lb { font-weight: 600; color: var(--color-text); }
.fa-step2-mn {
  width: max-content; /* v8.8：改为与步骤标签同行，聊天栏内容收回工作台可视高度内 */
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 9px;
  color: var(--color-text-tertiary); background: var(--color-bg-soft);
  border-radius: 5px; padding: 2px 7px;
}
/* 右栏预览：虚线占位 → 骨架 shimmer → 完整应用 */
.fa-wb-prev { position: relative; min-width: 0; background: #f7f8fc; }
.fa-wb-prev .fa-gen-empty { inset: 12px; }
.fa-skel {
  position: absolute; inset: 12px; z-index: 1;
  display: grid; gap: 10px; align-content: start;
  background: #fff; border: 1px solid var(--color-line); border-radius: 10px; padding: 14px;
}
.fa-skel i { display: block; height: 13px; border-radius: 6px; background: #e8edf5; position: relative; overflow: hidden; }
.fa-skel i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: translateX(-100%); /* 扫光用 transform，符合只动 transform/opacity 纪律 */
}
.fa-skel.on i::after { animation: faShimmer 1.1s linear infinite; }
@keyframes faShimmer { to { transform: translateX(100%); } }
.fa:hover .fa-skel.on i::after { animation-play-state: paused; }
.fa-appview {
  position: absolute; inset: 12px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-line); border-radius: 10px;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.fa-av-bar {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-bottom: 1px solid var(--color-line);
  font-size: 11px; font-weight: 650;
}
.fa-av-ico {
  width: 17px; height: 17px; border-radius: 5px; background: var(--color-primary); color: #fff;
  font-size: 9px; display: flex; align-items: center; justify-content: center;
}
.fa-av-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--color-success); font-weight: 600; }
/* 工厂版生成应用：左字段配置面板 + 右交付风险列表 */
.fa-av-cols { flex: 1; display: grid; grid-template-columns: 190px 1fr; gap: 8px; padding: 10px 12px; align-content: start; min-height: 0; }
.fa-av-card { border: 1px solid var(--color-line); border-radius: 8px; padding: 7px 9px; display: grid; gap: 4px; align-content: start; background: #fff; }
.fa-av-t { font-size: 10px; font-weight: 650; color: var(--color-text); }
.fa-av-r { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--color-text-secondary); }
.fa-av-tag { margin-left: auto; font-size: 8.5px; color: var(--color-primary); background: rgba(31, 95, 224, 0.07); border-radius: 4px; padding: 1px 6px; }
.fa-av-tr { display: grid; grid-template-columns: 1.25fr 0.75fr 0.95fr 0.7fr 0.8fr; gap: 6px; align-items: center; font-size: 9.5px; color: var(--color-text-secondary); }
.fa-av-th { font-size: 8.5px; font-weight: 650; color: var(--color-text-tertiary); }
/* v8.9 风险表：进度列（迷你条 + 百分比）+ 状态徽章列 */
.fa-av-prog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; }
.fa-av-pv { display: block; height: 5px; border-radius: 999px; background: var(--color-bg-soft); border: 1px solid var(--color-line); overflow: hidden; }
.fa-av-pv::after { content: ""; display: block; height: 100%; border-radius: 999px; background: var(--color-primary); transform: scaleX(var(--p, 1)); transform-origin: left center; }
.fa-av-prog em { font-style: normal; font-size: 8.5px; font-weight: 650; color: var(--color-text); }
.fa-badge { font-style: normal; font-size: 8.5px; font-weight: 650; border-radius: 999px; padding: 1px 8px; }
.fa-badge-ok { color: var(--color-success); background: rgba(31, 157, 102, 0.09); }
.fa-badge-bad { color: var(--color-danger); font-weight: 700; background: rgba(217, 75, 75, 0.1); }
/* P6b：市场全幅（应用 3 列 + 菜单加宽） */
.fa-p6b-grid { grid-template-columns: 1fr 190px; height: 100%; align-content: center; }

/* v8.7 reduced-motion 静态帧：完整 AI 生成态（.fa-static 仅 reduced-motion 分支添加） */
.fa-static .fa-phase.fa-final { opacity: 0; pointer-events: none; }
.fa-static .fa-phase { opacity: 1; }

/* 移动端：工作台上下堆叠（对话在上、预览在下）；市场回单列 */
@media (max-width: 767px) {
  .fa-wb-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .fa-wb-chat { border-right: none; border-bottom: 1px solid var(--color-line); }
  .fa-wb-prev { min-height: 200px; }
  .fa-av-cols { grid-template-columns: 1fr; }
  .fa-p6b-grid { grid-template-columns: 1fr; align-content: start; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-skel i::after { animation: none !important; }
}

/* ============ v8.8 内容丰富化：P5 看板组件 / 应用框架侧菜单 / 市场搜索栏 ============ */
/* P5：KPI 趋势箭头 + 近 6 月柱状图（逐柱 scaleY 生长）+ 订单状态分布横条 */
.fa-kpi { position: relative; }
.fa-trd { position: absolute; top: 5px; right: 7px; font-style: normal; font-size: 8.5px; }
.fa-trd-up { color: var(--color-success); }
.fa-trd-down { color: var(--color-danger); }
.fa-trd-flat { color: var(--color-text-tertiary); }
.fa-mchart, .fa-dists { display: grid; gap: 5px; }
.fa-mchart-t { font-size: 9.5px; color: var(--color-text-tertiary); }
.fa-mbars { display: flex; align-items: flex-end; gap: 6px; height: 58px; }
.fa-mbar { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 3px; height: 100%; min-width: 0; }
.fa-mbar span { font-size: 8.5px; color: var(--color-text-tertiary); text-align: center; }
.fa-mbar-v { display: block; align-self: end; width: 100%; background: linear-gradient(180deg, #6f9bff, var(--color-primary)); border-radius: 2px 2px 1px 1px; min-height: 4px; transform-origin: bottom center; }
.fa-live .fa-mbar-v[data-w] { transform: scaleY(0.05); transition: transform 0.4s ease, opacity 0.3s ease; }
.fa-live .fa-mbar-v[data-w].on { transform: scaleY(1); }
.fa-dist { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--color-text-secondary); }
.fa-dist span { flex: none; width: 40px; }
.fa-dist-t { flex: 1; height: 7px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; }
.fa-dist-t i { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.fa-dist em { flex: none; font-style: normal; font-size: 9px; font-weight: 600; color: var(--color-text-tertiary); }

/* 生成应用框架：主体 = 深色侧菜单 + 内容区（框架先出，内容逐块填入） */
.fa-av-body { flex: 1; display: grid; grid-template-columns: 92px 1fr; min-height: 0; }
.fa-av-side { display: grid; gap: 3px; align-content: start; padding: 8px 7px; background: #24334e; }
.fa-av-mi { font-size: 9.5px; color: rgba(255, 255, 255, 0.68); border-radius: 5px; padding: 4px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-av-mi.cur { background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; } /* v8.9：.on→.cur 避免与时钟显隐类撞名 */
.fa-av-main { display: grid; min-height: 0; min-width: 0; }

/* 市场：搜索框 + 分类标签 + 安装完成提示 */
.fa-p6b-col { display: grid; gap: 8px; align-content: center; }
.fa-mkt-bar { display: flex; align-items: center; gap: 8px; }
.fa-mkt-search { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 240px; font-size: 10px; color: var(--color-text-tertiary); border: 1px solid var(--color-line); border-radius: 999px; background: #fff; padding: 5px 12px; }
.fa-mkt-search svg { width: 12px; height: 12px; flex: none; fill: none; stroke: #9aa6b8; stroke-width: 2; stroke-linecap: round; }
.fa-mkt-tags { display: inline-flex; gap: 5px; }
.fa-mkt-tag { font-size: 9.5px; border-radius: 999px; padding: 3px 10px; color: var(--color-text-secondary); background: var(--color-bg-soft); border: 1px solid var(--color-line); }
.fa-mkt-tag.cur { color: #fff; background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; } /* v8.9：.on→.cur 避免与时钟显隐类撞名 */
.fa-mkt-tip { color: var(--color-success) !important; border-color: rgba(31, 157, 102, 0.4) !important; background: rgba(31, 157, 102, 0.08) !important; font-weight: 600; }

@media (max-width: 767px) {
  .fa-av-side { display: none; }
  .fa-av-body { grid-template-columns: 1fr; }
  /* v8.8 实测：P5 看板移动端超 760 舞台 ~111px，隐藏分布横条 + 压缩柱图/KPI 让位（桌面不变） */
  .fa-p5 .fa-dists { display: none; }
  .fa-p5 .fa-mbars { height: 34px; }
  .fa-p5 .fa-board { padding: 8px 10px; gap: 6px; }
  .fa-p5 .fa-kpi { padding: 5px 7px; }
  .fa-p5 .fa-kpi b { font-size: 12px; }
}

/* =========================================================
   v9.23① 现成应用舞台：BI 面板紧凑化 + 桌面 7 面板等高
   - 起因：stage-fit（shared/base.css，≥1024 max-height 640 + overflow hidden）
     把 ~936px 的 BI 面板硬裁，其余 6 面板舞台仅 ~432px，切换忽高忽低
   - 做法：BI 内部压缩（订单明细 7→5 行数据 / KPI / 图表卡 / 环形 / 行高），
     html.js ≥1024 .app-body 固定 560px（舞台恒定 ≈605 ≤640），溢出 .app-main 内滚；
     no-JS 不固定（七面板堆叠回退不被裁）
   ========================================================= */
.bi-panel { gap: 8px; }
.bi-panel .bi-kpis .kpi { padding: 6px 12px; }
.bi-panel .bi-kpis .kpi .v { font-size: 16px; }
.bi-panel .chart-card { padding: 8px 12px 10px; }
.bi-panel .chart-card .c-title { margin-bottom: 6px; }
.bi-panel .bi-donut { width: 88px; height: 88px; }
.bi-panel .bi-donut-wrap { gap: 10px; }
.bi-panel .bi-split, .bi-panel .bi-col { gap: 6px; }
.bi-panel .bi-row { padding: 3px 4px; font-size: 11px; }
/* 8 列订单表明窄列换行撑高：单元格单行省略，行高从 ~50px 收回 ~26px */
.bi-panel .bi-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 状态胶囊高 26px 是行高最后驱动项：收紧到 17px 后行高由文本 19.58px 决定 → ≈26px */
.bi-panel .bi-row .chip { padding: 1px 8px; line-height: 15px; }
@media (min-width: 1024px) {
  html.js .app-body { height: 560px; }
  html.js .app-main { min-height: 0; overflow: auto; }
}

/* =========================================================
   v9.23② roles 双端示意区整体降高 ~30%（桌面 PC 舞台 603 → ~430）
   - PC 窗：工具栏 / KPI / 图表（viewBox 200→140，见 index.html）/ 表格行 / 间距全套紧凑
   - 手机：transform scale(0.8) 等比缩（9:19 自动保持、内容零裁切、
     桌面叠 PC 右下构图不变；≤1023 负边距补偿收回布局占位）
   ========================================================= */
#roles .mw-bar { padding: 6px 12px; }
#roles .mw-main { padding: 6px 10px; gap: 6px; }
#roles .roleView { gap: 6px; }
#roles .rv-title { font-size: 12.5px; }
#roles .mkpi { padding: 4px 8px; gap: 1px; }
#roles .mkpi-l { font-size: 10px; }
#roles .mkpi-v { font-size: 14px; }
#roles .mchart { padding: 7px 12px 8px; }
#roles .mchart-title { margin-bottom: 4px; }
#roles .mchart svg { max-height: 120px; }
#roles .mw-main .mt-head, #roles .mw-main .mt-row { padding: 2px 8px; font-size: 11.5px; }
#roles .msb-item { padding-top: 6px; padding-bottom: 6px; }
/* 表格单元格单行省略：390 下 6–7 列窄表换行使行高 ~33px，收回 ~24px（桌面无换行不受影响） */
#roles .mt-row > span, #roles .mt-head > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.roles-sync .sync-phones .phone { transform: scale(0.8); transform-origin: 100% 100%; }
@media (max-width: 1023px) {
  .roles-sync .sync-phones .phone { transform-origin: 0 100%; margin-bottom: -68px; }
  /* 移动端同步降高（基线 1143 → 目标 760–840）：手机上移与 PC 窗底部重叠 ~48px（同桌面叠放构图）、
     表格状态胶囊收紧（行高由文本决定）、caption 间距减半 */
  .roles-sync .sync-phones { margin-top: -30px; }
  #roles .mw-main .mt-row .chip { padding: 1px 7px; font-size: 10.5px; }
  #roles .sync-caption { margin-top: 14px; }
}

/* =========================================================
   v9.24② hero 标题与副行行距 ×1.3（在现有值基础上）
   - h-hero：1.12 × 1.3 = 1.456（双端同值，桌面 46px/移动 64px→移动端实际由媒体查询控字号）
   - hero lead：桌面现有 1.6 × 1.3 = 2.08；移动基值 1.7 × 1.3 = 2.21
   ========================================================= */
#hero .h-hero { line-height: 1.456; }
.hero-head .lead { line-height: 2.21; }
@media (min-width: 1024px) {
  .hero-head .lead { line-height: 2.08; }
}

/* =========================================================
   v9.26 hero 场景带生成插画化（沿用 v9.25 双屏叙事布局与时序）
   - 六段内联 SVG 人物 → 生成插画（/product/free-assets/assets/hero-scenes/pN.webp，原图 1086×1448 → 640 宽 q80）
   - 带背景 = 该图四角均值取样色（.fa-band--pN），cover 裁切与浮动露边同色隐形
   - 角色·地点胶囊改绝对定位叠图底部（不遮人物主体）；数据流向虚线保留
   - 微动画：SVG 局部微动画删除，改整图轻微浮动 banFloat（translateY ±4px，transform only，
     仅 .fa-live 且本阶段 .on 运行，hover 暂停，reduced 静态）；移动横带缩略图不浮动
   - 834/390：竖图改 52px 圆角方形缩略图（cover + 逐张 object-position 聚焦人物）+ 标签 + 横向数据线
   ========================================================= */
@media (min-width: 1024px) {
  .fa-p1, .fa-p2, .fa-p3, .fa-p4, .fa-p5, .fa-p6a, .fa-p6b {
    display: grid; grid-template-columns: 238px minmax(0, 1fr); column-gap: 14px;
  }
  .fa-p1, .fa-p2, .fa-p4, .fa-p5, .fa-p6a, .fa-p6b { grid-template-rows: 1fr; }
  .fa-band { grid-column: 1; grid-row: 1 / -1; }
  .fa-p1-grid, .fa-p2-grid, .fa-p3-grid, .fa-p4-grid, .fa-p5-grid,
  .fa-p6b-col, .fa-p6a .fa-wb, .fa-p3 .fa-scene-line { grid-column: 2; }
  /* v9.27：P6b 市场区纵向铺满（应用卡/菜单与其余段卡片同高同网格，消除上聚下空）；≤1023 仍用基线居中 */
  .fa-p6b-col { grid-template-rows: auto 1fr; align-content: stretch; }
  .fa-p6b-col .fa-p6-market { grid-template-rows: 1fr; align-content: stretch; }
  .fa-p6b-col .fa-apps-f { grid-auto-rows: 1fr; }
}
.fa-band {
  position: relative; align-self: stretch; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px dashed rgba(151, 168, 196, 0.45); border-radius: 12px;
  background: #f4f7fd;
}
/* 取样背景色（每张图四角 20×20 均值，convert-v46.py）：裁切/露边与图底同色 */
.fa-band--p1 { background: #f5f8fe; }
.fa-band--p2 { background: #f4f6fe; }
.fa-band--p3 { background: #f5f7fc; }
.fa-band--p4 { background: #f3f6fd; }
.fa-band--p5 { background: #f4f7fd; }
.fa-band--p6 { background: #f3f6fc; }
.fa-band-img {
  flex: 1; min-height: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 30%;
}
/* 角色·地点胶囊：绝对定位叠在图底部，不遮人物主体 */
.fa-band-tag {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 1;
  font-size: 10.5px; font-weight: 650; color: var(--color-primary);
  background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(31, 95, 224, 0.3);
  border-radius: 999px; padding: 3px 11px; white-space: nowrap;
}
/* 数据流向线：场景带右缘竖虚线 + 移动小点（现场动作流进系统） */
.fa-band-flow { position: absolute; right: 6px; top: 50%; margin-top: -85px; height: 170px; border-right: 2px dashed rgba(31, 95, 224, 0.3); }
.fa-band-dot { position: absolute; left: -5px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
/* 整图浮动微动画（transform only；仅 live + 当前阶段运行） */
.fa-live .fa-phase.on .fa-band-img { animation: banFloat 4s ease-in-out infinite alternate; }
.fa-live .fa-phase.on .fa-band-dot { animation: banFlow 2.6s linear infinite; }
.fa:hover .fa-band .fa-band-img, .fa:hover .fa-band .fa-band-dot { animation-play-state: paused; }
@keyframes banFloat { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes banFlow { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(162px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fa-band .fa-band-img, .fa-band .fa-band-dot { animation: none !important; }
}
/* 834/390：场景带改横带（界面区上方，高约 64px；52px 方形缩略图 + 标签 + 横向数据线） */
@media (max-width: 1023px) {
  .fa-p1, .fa-p2, .fa-p3, .fa-p4, .fa-p5, .fa-p6a, .fa-p6b {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 8px; align-content: start;
  }
  .fa-band {
    grid-column: 1; grid-row: auto; align-self: auto;
    flex-direction: row; justify-content: flex-start; align-items: center;
    height: 64px; padding: 5px 12px; gap: 10px;
  }
  .fa-band-img {
    order: 1; flex: none; width: 52px; height: 52px; min-height: 0;
    border-radius: 10px; object-position: 50% 25%;
  }
  /* 方形缩略图逐张聚焦人物（按构图微调 object-position） */
  .fa-band--p3 .fa-band-img { object-position: 40% 28%; }
  .fa-band--p4 .fa-band-img { object-position: 45% 25%; }
  .fa-band--p6 .fa-band-img { object-position: 40% 30%; }
  .fa-band-tag { order: 2; position: static; transform: none; }
  /* 横带缩略图不浮动（56–64px 矮带内 ±4px 位移占比过大） */
  .fa-live .fa-phase.on .fa-band-img { animation: none; }
  .fa-band-flow {
    order: 3; position: relative; right: auto; top: auto; margin-top: 0;
    height: 0; width: 96px; flex: none;
    border-right: none; border-top: 2px dashed rgba(31, 95, 224, 0.3);
  }
  .fa-band-dot { left: 0; top: -5px; }
  .fa-live .fa-phase.on .fa-band-dot { animation: banFlowX 2.6s linear infinite; }
  /* 产线场景带（设备灯+计数）由场景横带接替，移动端不再重复渲染 */
  .fa-p3 .fa-scene-line { display: none; }
  /* P5 页签并格 + nowrap 已由 v9.27b 提升为全断点基线（见 .fa-rtabs 基线块），本档无需重复 */
}
@keyframes banFlowX { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(90px); opacity: 0; } }
/* 390 实测 P5 内容超 760 舞台 61px：横带 64→56（缩略图 52→48）+ P5 KPI 2×2 改单行 4 列（−48）+ 看板再紧 5px */
@media (max-width: 767px) {
  .fa-band { height: 56px; }
  .fa-band-img { width: 48px; height: 48px; }
  .fa-p5 .fa-kpis { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .fa-p5 .fa-board { padding: 7px 9px; gap: 5px; }
  /* v9.26b：390 实测报表页签 8 列（每页签 off/on 两枚各占一列）挤压逐字竖排——
     同页签两枚并同格（任意时刻仅一枚可见）+ nowrap 横排 + 正常按钮高度 ≈29px */
  .fa-p5 .fa-rtabs { grid-template-columns: repeat(4, auto); gap: 6px; }
  .fa-p5 .fa-rtabs .fa-rtab { grid-row: 1; white-space: nowrap; padding: 7px 12px; font-size: 11px; line-height: 1.2; }
  .fa-p5 .fa-rtabs .fa-rtab:nth-child(-n+2) { grid-column: 1; }
  .fa-p5 .fa-rtabs .fa-rtab:nth-child(n+3):nth-child(-n+4) { grid-column: 2; }
  .fa-p5 .fa-rtabs .fa-rtab:nth-child(n+5):nth-child(-n+6) { grid-column: 3; }
  .fa-p5 .fa-rtabs .fa-rtab:nth-child(n+7) { grid-column: 4; }
  /* v9.26b：390 同类问题——P6b 市场分类胶囊被搜索框挤压逐字竖排，搜索框独占一行 + 胶囊 nowrap 横排（高 ≈28px） */
  .fa-mkt-bar { flex-wrap: wrap; row-gap: 6px; }
  .fa-mkt-search { flex: 1 1 100%; }
  .fa-mkt-tags { flex-wrap: nowrap; }
  .fa-mkt-tag { white-space: nowrap; padding: 6px 12px; font-size: 10px; line-height: 1.2; }
}


/* =========================================================
   v9.30 [3] 视觉块加宽 → 1240px（文本容器 .wrap 不变）
   - 负 margin 突围：块宽 min(1240px, 100vw-80px)，相对 .wrap 内容盒居中
     （.wrap 内容盒 ≤1184，1240 两侧各借 28px，视口内不溢出；1024–1280 自适应收缩）
   - #apps 整组（合并条 .app-strip + 舞台 .app-stage）随 .tabset 一起放宽，保持 7 列与面板对齐
   - ≥1600px：.wrap 内边距 48→40
   ========================================================= */
@media (min-width: 1024px) {
  .hero-visual, .roles-split, .fac-agent-grid, #market .tpl-grid, #apps .tabset {
    width: min(1240px, calc(100vw - 80px));
    max-width: none;
    margin-inline: calc((100% - min(1240px, 100vw - 80px)) / 2);
  }
  #apps .app-stage { max-width: none; }
}
@media (min-width: 1600px) {
  .wrap { padding-inline: 40px; }
}