/* =========================================================
   集成商页面（需求文档第 9–20 章）
   ========================================================= */

/* ---------- 通用模拟界面原件 ---------- */
.mock-bar {
  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);
}
.mock-bar .dots { display: inline-flex; gap: 5px; }
.mock-bar .dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-line-strong);
}
.mock-bar .dots i:nth-child(1) { background: rgba(217, 75, 75, 0.6); }
.mock-bar .dots i:nth-child(2) { background: rgba(217, 135, 25, 0.6); }
.mock-bar .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); }

/* ---------- 01 Hero（第 10 章） ---------- */
.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: 31px; /* v9.17 [2]：删 pills 后行距 ×1.3（24→31.2 取整） */
  justify-items: center;
}
.hero-actions { margin-top: 8px; } /* v9.17 [2]：6→7.8 取整 */

/* Hero 产品画布 + 悬浮信息卡（10.3） */
.hero-visual {
  position: relative;
  max-width: 1200px; /* v9.11 [2]：舞台向内容区上限放宽（1080→1200，配合 .hero .wrap 24px 内边距） */
  margin: 72px auto 0;
  padding: 34px 54px 40px;
}

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.panel-text { display: grid; gap: 16px; align-content: start; }
.panel-text h3 { font-size: 30px; font-weight: 700; line-height: 1.3; }
.panel-text p { color: var(--color-text-secondary); line-height: 1.8; }
.panel-points { display: grid; gap: 10px; margin-top: 4px; }
.panel-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--color-text-secondary);
}
.panel-points li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: none;
}

/* 迷你画布原件 */
.mini-arrow { color: var(--color-primary); display: grid; place-items: center; }
.raw-list { display: grid; gap: 7px; }
.raw-chip {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11.5px;
  color: var(--color-text-secondary);
  background: var(--color-bg-soft);
  border: 1px dashed var(--color-line-strong);
  border-radius: 5px;
  padding: 6px 10px;
}
.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-line-strong); flex: none; }
.tb-dot.b { background: var(--color-primary); }
.tb-dot.v { background: var(--color-accent); }
.tb-dot.c { background: var(--color-cyan); }

/* ---------- 03 数据连接 sticky story（第 12 章） ---------- */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.story-sticky {
  position: sticky;
  top: calc(var(--header-h) + var(--subnav-h) + 24px); /* v3-P1：避让页头 + 胶囊条 */
  display: grid;
  gap: 20px;
  align-content: start;
  justify-items: start;
}
.story-points { display: grid; gap: 12px; margin-top: 6px; }
.story-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--color-text-secondary);
}
.story-points svg {
  width: 20px; height: 20px;
  flex: none;
  color: var(--color-primary);
  margin-top: 3px;
}
.story-steps { display: grid; gap: 28px; }
.step {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-stage);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 26px 28px 28px;
  display: grid;
  gap: 16px;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.step.is-active {
  border-color: rgba(40, 100, 240, 0.45);
  box-shadow: var(--shadow-float);
}
.step-head { display: flex; align-items: center; gap: 14px; }
.step-no {
  width: 34px; height: 34px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  flex: none;
}
.step-head h3 { font-size: 20px; font-weight: 700; }
.form-mock { display: grid; gap: 10px; }
.form-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.form-row .f-key { color: var(--color-text-tertiary); }
.form-row .f-val {
  border: 1px solid var(--color-line);
  border-radius: 5px;
  background: var(--color-bg-soft);
  padding: 8px 12px;
  color: var(--color-text);
}
.test-line { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.test-btn {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border-radius: 5px;
  padding: 8px 18px;
}
.test-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-success);
}
.data-table { display: grid; gap: 0; border: 1px solid var(--color-line); border-radius: 7px; overflow: hidden; }
.data-table .dt-row {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr 0.7fr;
  gap: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  align-items: center;
  background: #fff;
}
.data-table .dt-row + .dt-row { border-top: 1px solid var(--color-line); }
.data-table .dt-row.head {
  background: var(--color-bg-soft);
  color: var(--color-text-tertiary);
  font-size: 11.5px;
}
.dt-tag { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 11.5px; }
.dt-val { font-weight: 700; }
.map-rows { display: grid; gap: 10px; }
.map-row {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
}
.map-row .m-src {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
  border: 1px dashed var(--color-line-strong);
  background: var(--color-bg-soft);
  border-radius: 5px;
  padding: 7px 10px;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-row .m-dst {
  border: 1px solid rgba(40, 100, 240, 0.35);
  background: rgba(238, 245, 255, 0.8);
  color: var(--color-primary);
  font-weight: 600;
  border-radius: 5px;
  padding: 7px 10px;
}

/* ---------- 04 UNS 建模（第 13 章） ---------- */
.uns-stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) auto minmax(0, 6fr);
  gap: 28px;
  align-items: center;
  margin-top: 64px;
}
.uns-panel {
  border-radius: var(--radius-stage);
  border: 1px solid var(--color-line);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 24px 26px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.uns-panel .up-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}
.uns-panel.raw { background: linear-gradient(180deg, #fff, #fafbfd); }
.uns-panel.raw .raw-chip { font-size: 12.5px; padding: 10px 14px; }
.uns-arrow {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(40, 100, 240, 0.35);
  color: var(--color-primary);
  box-shadow: var(--shadow-card);
}
.uns-tree { font-size: 13.5px; display: grid; gap: 8px; }
.uns-tree .tb-row { min-height: 26px; display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); }
.uns-tree .tb-row.strong { color: var(--color-text); font-weight: 650; }
.uns-tree .unit { font-size: 11px; color: var(--color-text-tertiary); margin-left: auto; }
/* v9.3：.uns-cards 三小卡区块已删（HTML 同步删除） */

/* UNS 进入动画：原始字段逐条出现 */
html.js .uns-panel.raw .raw-chip { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
html.js .uns-stage.is-inview .uns-panel.raw .raw-chip { opacity: 1; transform: none; }
html.js .uns-stage.is-inview .raw-chip:nth-child(2) { transition-delay: .1s; }
html.js .uns-stage.is-inview .raw-chip:nth-child(3) { transition-delay: .2s; }
html.js .uns-stage.is-inview .raw-chip:nth-child(4) { transition-delay: .3s; }
html.js .uns-stage.is-inview .raw-chip:nth-child(5) { transition-delay: .4s; }
html.js .uns-stage.is-inview .raw-chip:nth-child(6) { transition-delay: .5s; }
html.js .uns-tree .tb-row { opacity: 0; transform: translateX(10px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
html.js .uns-stage.is-inview .uns-tree .tb-row { opacity: 1; transform: none; }
html.js .uns-stage.is-inview .uns-tree .tb-row:nth-child(1) { transition-delay: .55s; }
html.js .uns-stage.is-inview .uns-tree .tb-row:nth-child(2) { transition-delay: .65s; }
html.js .uns-stage.is-inview .uns-tree .tb-row:nth-child(3) { transition-delay: .75s; }
html.js .uns-stage.is-inview .uns-tree .tb-row:nth-child(4) { transition-delay: .85s; }
html.js .uns-stage.is-inview .uns-tree .tb-row:nth-child(5) { transition-delay: .95s; }
html.js .uns-stage.is-inview .uns-tree .tb-row:nth-child(6) { transition-delay: 1.05s; }
html.js .uns-stage.is-inview .uns-tree .tb-row:nth-child(7) { transition-delay: 1.15s; }
html.js .uns-stage.is-inview .uns-tree .tb-row:nth-child(8) { transition-delay: 1.25s; }
html.js .uns-stage.is-inview .uns-tree .tb-row:nth-child(9) { transition-delay: 1.35s; }
html.js .uns-stage.is-inview .uns-tree .tb-row:nth-child(n+10) { transition-delay: 1.45s; }

/* ---------- 05 平台工具（第 14 章）：v9.7 页签大单面板（左大动图 + 右要点 stagger） ---------- */
/* 页签条：整站胶囊风格，选中态填充（不用描边）；移动端可横滑 */
.cap-tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 40px auto 0;
  padding: 6px;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-bg-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cap-tabs::-webkit-scrollbar { display: none; }
.cap-tab {
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 15px;
  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);
}
.cap-tab:hover { color: var(--color-text); }
.cap-tab.on {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(31, 95, 224, 0.28);
}
/* 面板：左动图 ≈70% + 右要点 ≈30% */
.cap-panel {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 24px;
  margin-top: 32px;
  align-items: stretch;
}
/* 浅色浏览器框（与 hero P3a 真图框 .fa-shot 同款语言：白底 + 渐变标题栏 + 三点） */
.cap-shot {
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.cap-shot-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-line);
  background: linear-gradient(180deg, #fff, #f8fafd);
}
.cap-shot-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d3dcea; }
.cap-shot-bar i:first-child { background: #c4cddc; }
.cap-shot-name { margin-left: 6px; font-size: 10.5px; color: var(--color-text-secondary); }
.cap-shot-body { position: relative; aspect-ratio: 1120 / 554; background: #f4f7fb; }
/* 动图交叉淡切（opacity 250ms）；非活动帧 visibility 隐藏不播放 */
.cap-anim {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.cap-anim.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}
.cap-shot-body noscript img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 右侧要点面板 */
.cap-side { min-width: 0; }
.cap-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.cap-pane[hidden] { display: none; }
.cap-title { margin: 0 0 6px; font-size: 17px; font-weight: 650; color: var(--color-text); }
.cap-desc { margin: 0; font-size: 13px; line-height: 1.7; color: var(--color-text-secondary); }
.cap-pts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cap-pt {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--color-bg-soft);
  opacity: 0;
  transform: translateY(8px);
}
/* 切换页签时要点 stagger 重播（transform/opacity，--d 间隔 60ms） */
html.js .cap-pane.on .cap-pt {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-spring);
  transition-delay: var(--d, 0ms);
}
.cap-pt-ico {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: rgba(31, 95, 224, 0.09);
}
.cap-pt-ico svg { width: 14px; height: 14px; }
.cap-pt-tx b { display: block; font-size: 13px; font-weight: 650; color: var(--color-text); }
.cap-pt-tx .note { display: block; margin-top: 1px; font-size: 11.5px; color: var(--color-text-tertiary); }
/* 无 JS 回退：三个面板全部直出、页签条隐藏 */
html:not(.js) .cap-pane[hidden] { display: flex; margin-top: 16px; }
html:not(.js) .cap-pt { opacity: 1; transform: none; }
html:not(.js) .cap-tabs { display: none; }
@media (max-width: 1023px) {
  /* 移动端：面板上下布局（动图在上全宽，要点在下） */
  .cap-panel { grid-template-columns: 1fr; }
  .cap-tabs { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-anim, .cap-anim.on { transition: none; }
  .cap-pt, html.js .cap-pane.on .cap-pt { opacity: 1; transform: none; transition: none; }
}

/* ---------- 06 应用生成智能体（第 15 章） ---------- */
/* v9.9 [1] hero eyebrow 改为品牌标识：仅 hero 使用，字号 +18%，保持胶囊样式 */
.eyebrow--hero { font-size: 16.5px; padding: 7px 16px; }
@media (max-width: 767px) {
  .eyebrow--hero { font-size: 15px; padding: 6px 14px; }
}
.agent-section {
  background:
    radial-gradient(circle at 12% 20%, rgba(74, 165, 255, 0.20), transparent 38%),
    radial-gradient(circle at 88% 30%, rgba(61, 90, 128, 0.18), transparent 36%),
    linear-gradient(135deg, var(--color-bg-blue) 0%, var(--color-bg-violet) 100%);
}
.agent-grid {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: 40px;
  margin-top: 56px;
  align-items: stretch;
}
.chat {
  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;
}
.msg {
  max-width: 92%;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.7;
}
.msg.user {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg.agent {
  align-self: flex-start;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
}
.msg.agent b { color: var(--color-primary); }
html.js .chat .msg { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
html.js .agent-grid.is-inview .chat .msg { opacity: 1; transform: none; }
html.js .agent-grid.is-inview .msg:nth-child(1) { transition-delay: .1s; }
html.js .agent-grid.is-inview .msg:nth-child(2) { transition-delay: .7s; }
html.js .agent-grid.is-inview .msg:nth-child(3) { transition-delay: 1.6s; }
html.js .agent-grid.is-inview .msg:nth-child(4) { transition-delay: 2.1s; }

.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;
}
/* v9.9 [2] 生成预览加宽 + 左侧应用导航：真实应用侧栏样式，工单信息高亮 */
.gen-app {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  flex: 1;
}
.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);
}
.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;
}
.gn-item svg { width: 13px; height: 13px; flex: none; }
.gn-item.on {
  background: rgba(31, 95, 224, 0.09);
  color: var(--color-primary);
  font-weight: 650;
}
.gen-body {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
}
.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);
}
.gen-block.wide { grid-column: 1 / -1; }
.gen-block .g-title { font-size: 12px; font-weight: 650; color: var(--color-text-secondary); }
.gen-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gen-metrics .gm {
  border: 1px solid var(--color-line);
  border-radius: 6px;
  padding: 10px;
  background: #fff;
}
.gen-metrics .gm .l { font-size: 10.5px; color: var(--color-text-tertiary); }
.gen-metrics .gm .v { font-size: 17px; font-weight: 700; margin-top: 2px; }
.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;
}
.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;
}
.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 .gen .gen-block, html.js .gen .gen-filter { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
html.js .agent-grid.is-inview .gen .gen-block, html.js .agent-grid.is-inview .gen .gen-filter { opacity: 1; transform: none; }
html.js .agent-grid.is-inview .gen .gen-block:nth-child(1) { transition-delay: .9s; }
html.js .agent-grid.is-inview .gen .gen-block:nth-child(2) { transition-delay: 1.2s; }
html.js .agent-grid.is-inview .gen .gen-block:nth-child(3) { transition-delay: 1.5s; }
html.js .agent-grid.is-inview .gen .gen-block:nth-child(4) { transition-delay: 1.8s; }
html.js .agent-grid.is-inview .gen .gen-filter { transition-delay: 2.5s; }
/* v9.9 [2] 侧栏导航随同一 .is-inview 循环逐项点亮（在内容块之前） */
html.js .gen .gn-item { opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
html.js .agent-grid.is-inview .gen .gn-item { opacity: 1; transform: none; }
html.js .agent-grid.is-inview .gen .gn-item:nth-child(1) { transition-delay: .55s; }
html.js .agent-grid.is-inview .gen .gn-item:nth-child(2) { transition-delay: .65s; }
html.js .agent-grid.is-inview .gen .gn-item:nth-child(3) { transition-delay: .75s; }
html.js .agent-grid.is-inview .gen .gn-item:nth-child(4) { transition-delay: .85s; }
html.js .agent-grid.is-inview .gen .gn-item:nth-child(5) { transition-delay: .95s; }
.agent-pills { margin-top: 40px; }

/* 设备状态小列表 */
.dev-list { display: grid; gap: 8px; }
.dev-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.dev-row .grow { margin-left: auto; font-weight: 600; color: var(--color-text); }
.order-table { display: grid; font-size: 12px; }
.order-table .ot-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-line);
  background: #fff;
  align-items: center;
}
.order-table .ot-row:first-child { border-radius: 6px 6px 0 0; background: var(--color-bg-soft); color: var(--color-text-tertiary); font-size: 11px; }
.order-table .ot-row:last-child { border-radius: 0 0 6px 6px; }
.order-table .ot-row + .ot-row { border-top: 0; }
.order-table .behind { color: var(--color-warning); font-weight: 700; }

/* ---------- 08 项目交付（第 17 章） ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* v9.4：5 步 → 4 步，横排均匀分布 */
  gap: 20px;
  margin-top: 64px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, rgba(40,100,240,0.35), rgba(102,87,232,0.35));
}
/* 进视口：连线从左向右描绘，节点依次点亮 */
html.js .timeline::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1s var(--ease-out-standard) 0.1s;
}
html.js .timeline.is-inview::before { transform: scaleX(1); }
html.js .timeline .tl-no {
  transform: scale(0);
  transition: transform 0.3s var(--ease-spring);
}
html.js .timeline.is-inview .tl-item:nth-child(1) .tl-no { transform: scale(1); transition-delay: 0.25s; }
html.js .timeline.is-inview .tl-item:nth-child(2) .tl-no { transform: scale(1); transition-delay: 0.45s; }
html.js .timeline.is-inview .tl-item:nth-child(3) .tl-no { transform: scale(1); transition-delay: 0.65s; }
html.js .timeline.is-inview .tl-item:nth-child(4) .tl-no { transform: scale(1); transition-delay: 0.85s; }
.tl-item { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; }
.tl-no {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 17px;
  font-weight: 700;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(40, 100, 240, 0.18);
}
.tl-item h3 { font-size: 17px; font-weight: 700; }
.tl-item p { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.7; }

/* v9.18：恢复三列流程（左侧概念输入列无数字，成果物数字/标签保持 v9.16 删除状态） */
.delivery-flow {
  margin-top: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 0.9fr) auto minmax(0, 1.1fr);
  gap: 20px;
  align-items: center;
}
.artifacts { display: grid; gap: 10px; }
.artifact {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-line);
  background: #fff;
  border-radius: 7px;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-card);
}
.artifact svg { width: 16px; height: 16px; color: var(--color-primary); flex: none; }
.flow-arrow { color: var(--color-primary); display: grid; place-items: center; }
.pkg {
  border-radius: var(--radius-card);
  border: 1.5px solid var(--color-primary);
  background: linear-gradient(180deg, #eef5ff, #fff);
  box-shadow: var(--shadow-float);
  padding: 26px 22px;
  text-align: center;
  display: grid;
  gap: 8px;
  justify-items: center;
}
.pkg .pkg-icon {
  width: 52px; height: 52px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  display: grid;
  place-items: center;
}
.pkg .pkg-icon svg { width: 26px; height: 26px; }
.pkg b { font-size: 16px; }
.pkg .pkg-list { font-size: 11px; color: var(--color-text-tertiary); line-height: 1.7; }
.pkg span { font-size: 12px; color: var(--color-text-secondary); }
.host {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line-strong);
  background: #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.host .host-bar {
  background: #2b3245;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.host .host-body { padding: 14px 16px; display: grid; gap: 8px; font-size: 12.5px; color: var(--color-text-secondary); }
.host .host-body .hb { display: flex; align-items: center; gap: 8px; }
/* v9.18 交付时序（恢复 v9.9 链）：输入四行左滑入(90ms stagger) → 箭头依次点亮 → 交付包打包 → 主机逐项打勾 */
html.js .delivery-flow .artifact { opacity: 0; transform: translateX(-16px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
html.js .delivery-flow.is-inview .artifact { opacity: 1; transform: none; }
html.js .delivery-flow.is-inview .artifact:nth-child(1) { transition-delay: .05s; }
html.js .delivery-flow.is-inview .artifact:nth-child(2) { transition-delay: .14s; }
html.js .delivery-flow.is-inview .artifact:nth-child(3) { transition-delay: .23s; }
html.js .delivery-flow.is-inview .artifact:nth-child(4) { transition-delay: .32s; }
html.js .delivery-flow .flow-arrow { opacity: .15; transform: translateX(-6px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
html.js .delivery-flow.is-inview .artifacts + .flow-arrow { opacity: 1; transform: none; transition-delay: .45s; }
html.js .delivery-flow.is-inview .pkg + .flow-arrow { opacity: 1; transform: none; transition-delay: .74s; }
html.js .delivery-flow .pkg { opacity: 0; transform: scale(.92); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
html.js .delivery-flow.is-inview .pkg { opacity: 1; transform: none; transition-delay: .58s; }
html.js .delivery-flow .host-bar { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
html.js .delivery-flow.is-inview .host-bar { opacity: 1; transform: none; transition-delay: .86s; }
html.js .delivery-flow .hb { opacity: 0; transform: translateX(-10px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
html.js .delivery-flow.is-inview .hb { opacity: 1; transform: none; }
html.js .delivery-flow.is-inview .hb:nth-child(1) { transition-delay: 1s; }
html.js .delivery-flow.is-inview .hb:nth-child(2) { transition-delay: 1.09s; }
html.js .delivery-flow.is-inview .hb:nth-child(3) { transition-delay: 1.18s; }
html.js .delivery-flow.is-inview .hb:nth-child(4) { transition-delay: 1.27s; }
html.js .delivery-flow .hb .status-dot { transform: scale(0); transition: transform .3s var(--ease-spring); }
html.js .delivery-flow.is-inview .hb .status-dot { transform: scale(1); }
html.js .delivery-flow.is-inview .hb:nth-child(1) .status-dot { transition-delay: 1.06s; }
html.js .delivery-flow.is-inview .hb:nth-child(2) .status-dot { transition-delay: 1.15s; }
html.js .delivery-flow.is-inview .hb:nth-child(3) .status-dot { transition-delay: 1.24s; }
html.js .delivery-flow.is-inview .hb:nth-child(4) .status-dot { transition-delay: 1.33s; }

/* ---------- 09 行业方案复用：总结行（v4 区块删除后保留；v9.12 deploy 区块已删，不再共用） ---------- */
.reuse-summary {
  margin-top: 48px;
  text-align: center;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.7;
  max-width: var(--text-max);
  margin-inline: auto;
}
.rs-sub {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* ---------- 区块背景轮换 ---------- */
.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 { padding: 24px 8px 96px; }
  .panel-grid { grid-template-columns: 1fr; gap: 36px; }
  .story-grid { grid-template-columns: 1fr; gap: 44px; }
  .story-sticky { position: static; }
  .uns-stage { grid-template-columns: 1fr; }
  .uns-arrow { transform: rotate(90deg); margin-inline: auto; }
  .agent-grid { grid-template-columns: 1fr; }
  /* v9.9 [2] 侧栏导航折叠为顶部横排 */
  .gen-app { grid-template-columns: 1fr; }
  .gen-nav { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--color-line); padding: 10px 14px; scrollbar-width: none; }
  .gen-nav::-webkit-scrollbar { display: none; }
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 12px; } /* v9.4：4 步 */
  .timeline::before { display: none; }
  .delivery-flow { grid-template-columns: 1fr; justify-items: stretch; }
  .delivery-flow .flow-arrow,
  html.js .delivery-flow .flow-arrow,
  html.js .delivery-flow.is-inview .flow-arrow { transform: rotate(90deg); }
  html.js .delivery-flow .flow-arrow { opacity: .15; }
  html.js .delivery-flow.is-inview .flow-arrow { opacity: 1; }
}

@media (max-width: 767px) {
  .hero { padding: 148px 0 96px; }
  .hero-visual { padding: 0 0 8px; margin-top: 64px; } /* v9.11 [1]：移动端 banner 与舞台间距 48→64px */
  .panel-text h3 { font-size: 24px; }
  .timeline { grid-template-columns: 1fr; gap: 28px; }
  .tl-item { justify-items: start; text-align: left; grid-template-columns: 48px 1fr; column-gap: 16px; }
  .tl-item h3 { grid-column: 2; align-self: center; }
  .tl-item p { grid-column: 2; }
  .tl-no { grid-row: 1 / span 2; }
  .gen-body { grid-template-columns: 1fr; }
  .gen-metrics { grid-template-columns: 1fr 1fr; }
  .step { padding: 20px; }
  .data-table .dt-row { grid-template-columns: 1.2fr 0.7fr 0.6fr; }
  .data-table .dt-row span:nth-child(3) { display: none; }
  .map-row { grid-template-columns: 1fr; gap: 6px; }
  .map-row .mini-arrow { transform: rotate(90deg); }
}

/* ---------- 减少动态：直出终态 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-play] *,
  html.js .uns-panel.raw .raw-chip,
  html.js .uns-tree .tb-row,
  html.js .chat .msg,
  html.js .gen .gen-block,
  html.js .gen .gen-filter,
  html.js .delivery-flow .artifact,
  html.js .delivery-flow .pkg,
  html.js .delivery-flow .host {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  /* 时间线：直出终态 */
  html.js .timeline::before { transform: scaleX(1); transition: none; }
  html.js .timeline .tl-no { transform: none; transition: none; }
}

/* ================= P4b mockup patch ================= */
.obj-preview, .uns-preview {
  border: 1px dashed var(--border); border-radius: 6px;
  padding: 10px 12px; margin-top: 10px; background: var(--bg-card);
}
.op-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; margin-bottom: 8px; flex-wrap: wrap; }
.op-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.f-select i { font-style: normal; float: right; color: var(--text-tertiary); font-size: 10px; }
.gm svg { display: block; margin-top: 6px; }
.gm svg path { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tl-art { display: block; font-size: 11px; color: var(--primary); font-weight: 600; margin-top: 4px; }
html.js [data-play].is-inview .mchart .mc-bar { animation: mc-grow .6s both; }
html.js [data-play].is-inview .mchart .mc-bar:nth-child(2) { animation-delay: .05s; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-play].is-inview .mchart .mc-bar { animation: none; }
}

/* =========================================================
   v5-B2 集成商页一屏瘦身 + C 布局骨架统一（桌面 ≥1024px）
   预算：1920×1080（可用一屏 984px）标题 + 核心视觉一屏入镜
   ========================================================= */
@media (min-width: 1024px) {
  /* hero：标题区收紧 + 工作区画布紧凑 + 悬浮卡内嵌画布四角（不越界） */
  .hero { padding: 144px 0 44px; }
  .hero .wrap { padding-inline: 24px; } /* v9.11 [2]：hero 内边距收窄，让出舞台宽度 */
  #hero .h-hero { font-size: 48px; line-height: 1.12; }
  .hero-head { gap: 10px; } /* v9.17 [2]：行距 ×1.3（8→10.4 取整） */
  .hero-head .lead { font-size: 17px; line-height: 1.6; }
  .hero-actions { margin-top: 2.5px; } /* v9.17 [2]：2→2.6 取整 */
  .hero-visual { margin-top: 42px; padding: 14px 28px 16px; } /* v9.11 [1]：banner 与舞台间距 14→42px（+28px） */

  /* connect：sticky 纵向故事 → 顶部横排 intro + 三步横向三列卡 */
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-sticky {
    position: static;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 10px 48px;
    align-items: start;
  }
  .story-sticky .eyebrow, .story-sticky .h2, .story-sticky .body-text { grid-column: 1; }
  .story-sticky .story-points { grid-column: 2; grid-row: 1 / span 3; margin-top: 4px; gap: 8px; }
  .story-points li { font-size: 13.5px; gap: 8px; }
  .story-points svg { width: 16px; height: 16px; margin-top: 1px; }
  .story-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .step { padding: 16px 18px 18px; gap: 12px; }
  .step-head { gap: 10px; }
  .step-no { width: 28px; height: 28px; font-size: 13px; border-radius: 5px; }
  .step-head h3 { font-size: 16px; }
  .form-mock { gap: 8px; }
  .form-row { font-size: 12px; grid-template-columns: 84px 1fr; gap: 8px; }
  .form-row .f-val { padding: 6px 10px; }
  .test-btn { padding: 7px 14px; font-size: 12px; }
  .test-ok { font-size: 11.5px; }
  #connect .mt-row, #connect .mt-head { padding: 5px 10px; }
  .map-rows { gap: 8px; }
  .map-row { gap: 8px; font-size: 11.5px; }
  .map-row .m-src, .map-row .m-dst { padding: 5px 8px; font-size: 10.5px; }
  .map-row .mini-arrow svg { width: 14px; height: 14px; }

  /* uns：对照区限高 + 补充卡紧凑 */
  #uns .section-head .lead { max-width: 1000px; margin-inline: auto; }
  .uns-stage { margin-top: 32px; }
  .uns-panel { padding: 16px 18px; gap: 10px; }
  .uns-panel.raw .raw-chip { font-size: 11px; padding: 6px 10px; }
  .uns-arrow { width: 40px; height: 40px; }
  .uns-tree { gap: 4px; font-size: 12px; }
  .uns-tree .tb-row { min-height: 20px; }

  /* agent：对话与生成区紧凑，趋势图限高 */
  .agent-grid { margin-top: 32px; gap: 24px; max-width: 1080px; margin-inline: auto; }
  .chat { padding: 16px; gap: 10px; }
  .msg { padding: 9px 13px; font-size: 13px; line-height: 1.6; }
  .gen-body { padding: 14px; gap: 10px; }
  .gen-block { padding: 10px 12px; gap: 8px; }
  .gen-metrics { gap: 8px; }
  .gen-metrics .gm { padding: 8px; }
  .gen-metrics .gm .v { font-size: 15px; }
  .gen-metrics .gm svg { width: 44px; height: 14px; }
  .gen-block .mchart svg { max-height: 170px; }
  #agent .mt-row, #agent .mt-head { padding: 5px 10px; }
  .gen-filter { padding: 8px 14px; }
  .agent-pills { margin-top: 20px; }
  .agent-pills .pill { padding: 5px 12px; font-size: 12px; }

  /* delivery：时间线与成果流紧凑；v9.18 恢复三列流程后回到 1080 */
  .timeline { margin-top: 32px; }
  .delivery-flow { margin-top: 28px; max-width: 1080px; margin-inline: auto; }


  /* uns 对照区宽度收敛 */
  .uns-stage { max-width: 1080px; margin-inline: auto; }


}

/* connect 三列步骤卡移动端还原纵向 */
@media (max-width: 1023px) {
  .story-sticky { grid-template-columns: 1fr; }
  .story-sticky .eyebrow, .story-sticky .h2, .story-sticky .body-text,
  .story-sticky .story-points { grid-column: auto; grid-row: auto; }
  .story-steps { grid-template-columns: 1fr; }
}

/* =========================================================
   v5-B2b 达标补丁②（桌面 ≥1024px）
   ========================================================= */
@media (min-width: 1024px) {
  /* uns：树行距与预览卡再收紧 */
  .uns-tree { gap: 3px; }
  .uns-tree .tb-row { min-height: 18px; }
  .uns-preview, #connect .obj-preview { padding: 8px 10px; margin-top: 8px; }
  .op-head { margin-bottom: 4px; }
  .op-fields { gap: 2px 10px; }

  /* agent：生成区深度紧凑 */
  .agent-grid { margin-top: 20px; }
  .gen .mock-bar { padding: 7px 14px; }
  .gen-body { padding: 10px 12px; gap: 8px; }
  .gen-block { padding: 8px 10px; gap: 6px; }
  .gen-metrics .gm { padding: 6px 8px; }
  .gen-metrics .gm .v { font-size: 14px; }
  .gen-metrics .gm svg { width: 40px; height: 12px; margin-top: 3px; }
  .gen-block .mchart svg { display: block; height: 130px; width: auto; margin-inline: auto; }
  #agent .mt-row, #agent .mt-head { padding: 4px 10px; }
  .gen-filter { padding: 7px 14px; }
  .agent-pills { margin-top: 8px; }
}

/* =========================================================
   v5-B2c 达标补丁③（桌面 ≥1024px）
   ========================================================= */
@media (min-width: 1024px) {
  /* uns：树行高与预览卡再压 */
  .uns-tree { font-size: 11.5px; gap: 2px; }
  .uns-tree .tb-row { min-height: 16px; }
  .uns-preview { padding: 6px 10px; margin-top: 6px; }
  .uns-preview .op-head { margin-bottom: 3px; }
  .uns-preview .op-fields { gap: 1px 8px; font-size: 11px; }

  /* agent：生成区极限紧凑 */
  .agent-grid { margin-top: 16px; }
  .gen .mock-bar { padding: 6px 14px; }
  .gen-body { padding: 8px 10px; }
  .gen-block { gap: 4px; }
  .gen-block .mchart { padding: 6px 8px; }
  .gen-block .mchart svg { height: 118px; }
  .gen-metrics .gm { padding: 4px 6px; }
  .gen-metrics .gm svg { height: 10px; margin-top: 2px; }
  #agent .mt-row, #agent .mt-head { padding: 3px 10px; }
  .gen-filter { padding: 6px 14px; }
  .agent-pills { margin-top: 6px; }
  .agent-pills .pill { padding: 4px 10px; }
}

/* =========================================================
   v5-B2d 达标补丁④（桌面 ≥1024px）
   ========================================================= */
@media (min-width: 1024px) {
  /* uns：树行高最终收敛 */
  .uns-tree { font-size: 11px; }
  .uns-tree .tb-row { min-height: 15px; }

  /* agent：趋势图 100px + 表格行 2px padding */
  .gen-block .mchart svg { height: 100px; }
  #agent .mt-row, #agent .mt-head { padding: 2px 10px; }
}

/* ===== v5-B2e agent 收尾微调（预算 984，差 22px） ===== */
@media (min-width: 1024px) {
  .gen-block .mchart svg { height: 92px; }
  .gen-block { padding: 6px 8px; }
  .gen .mock-bar, .gen-filter { padding: 5px 14px; }
  .gen-metrics .gm .v { font-size: 13px; }
  .agent-pills { margin-top: 4px; }
  .agent-grid { margin-top: 12px; }
}

/* =========================================================
   v8 Hero 流程动画（19s 时间轴 + 2s 停留，JS 时钟状态机）
   - .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-stage {
  position: relative;
  height: 560px; /* v9.11 [2]：492→560，舞台面积加大（hero 总高放宽到 ≤1080 首屏口径） */
  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.1：caption 放大 +30%，顶部再多让 12px 防重叠 */
  opacity: 0;
  transition: opacity 0.55s ease; /* v8.6：随 TIME_SCALE 1.25 放慢 */
  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: 26px; 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.1：辅助句 12.5→16px（+30%） */
.fa-cap b { font-size: 19px; font-weight: 650; color: var(--color-text); } /* v9.1：主句 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-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; }
.fa-card-t { font-size: 11px; color: var(--color-text-tertiary); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---- 阶段一：数据连接（v9.0：左二右二 → 中间汇聚，详见文末 v9.0 区块） ---- */
.fa-p1-grid { display: grid; grid-template-columns: 220px 1fr 220px; gap: 12px; align-items: stretch; height: 100%; }
.fa-srcs { display: grid; gap: 8px; }
.fa-src { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: #fff; padding: 5px 9px; display: grid; gap: 4px; }
.fa-src b { font-size: 11px; }
.fa-src div { display: flex; flex-wrap: wrap; gap: 4px; }
.fa-src span { font-size: 9.5px; color: var(--color-text-secondary); background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 4px; padding: 1px 5px; }
.fa-wires { width: 100%; height: 80%; }
/* v9.14 [2] 直线连线：更细一档（1→0.7）、流光更克制（微光 3.2/.12→2.6/.08、行进 1.05s→1.5s、圆点虚线间距加大） */
.fa-wire-glow { fill: none; stroke-width: 2.6; stroke-linecap: round; opacity: .08; }
.fa-wire { fill: none; stroke-width: 0.7; stroke-linecap: round; stroke-dasharray: 0.1 5.2; }
.fa-live .fa-wire.on { animation: faWireMarch 1.5s linear infinite; }
@keyframes faWireMarch { to { stroke-dashoffset: -5.3; } }
/* v9.14 [2] 数据值数字：小等宽字体 + 微光，transform 位移（--dx/--dy 由 JS 按容器实测写入），到 hub 淡出循环；
   z-index 1：滑到中心时被 hub（z-index 2 白卡）盖住 */
.fa-num {
  position: absolute; z-index: 1; translate: -50% -50%;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10px; font-weight: 600; white-space: nowrap;
  color: #1f5fe0;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 6px rgba(74, 165, 255, 0.5), 0 1px 3px rgba(30, 60, 120, 0.12);
  opacity: 0;
}
.fa-live .fa-num.on { animation: faNumGo 2.6s linear infinite; }
.fa-live .fa-num-1.on { animation-delay: -0.65s; }
.fa-live .fa-num-2.on { animation-delay: -1.3s; }
.fa-live .fa-num-3.on { animation-delay: -1.95s; }
@keyframes faNumGo {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  96%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.fa-panel { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: #fff; padding: 10px 12px; box-shadow: var(--shadow-card); }
.fa-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fa-panel-head b { font-size: 12.5px; }
.fa-table { display: grid; gap: 3px; font-size: 10.5px; }
.fa-tr { display: grid; grid-template-columns: 1.3fr 0.7fr 0.6fr 0.6fr; gap: 8px; padding: 5px 8px; border-radius: 4px; align-items: center; }
.fa-tr:not(.fa-th) { background: var(--color-bg-soft); border: 1px solid var(--color-line); }
.fa-th { color: var(--color-text-tertiary); font-size: 10px; }

/* ---- 阶段二：UNS 建模 ---- */
.fa-p2-grid { display: grid; grid-template-columns: 188px 30px 1fr 196px; gap: 8px; align-items: center; }
.fa-fields { display: grid; gap: 6px; }
.fa-field { font-size: 10.5px; background: var(--color-bg-soft); border: 1px dashed var(--color-line-strong); border-radius: 4px; padding: 4px 8px; color: var(--color-text-secondary); }
.fa-big-arr { font-size: 18px; color: var(--color-primary); text-align: center; }
.fa-tree ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 11px; }
.fa-tree li { color: var(--color-text-secondary); }
.fa-tree li.lv1 { color: var(--color-text); font-weight: 650; }
.fa-tree li.lv2 { padding-left: 14px; }
.fa-tree li.lv3 { padding-left: 28px; }
.fa-tree li.lv4 { padding-left: 42px; font-size: 10.5px; }
.fa-tree li.lv5 { padding-left: 56px; font-size: 10.5px; color: var(--color-text-tertiary); }
.fa-tree li.sel {
  background: rgba(31, 95, 224, 0.09); color: var(--color-primary); font-weight: 600;
  border-radius: 4px; padding: 2px 6px 2px 42px; margin-left: -6px;
}
.fa-props .fa-prop { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; padding: 4px 0; border-bottom: 1px dashed var(--color-line); }
.fa-props .fa-prop:last-child { border-bottom: 0; }
.fa-props .fa-prop b { font-weight: 500; color: var(--color-text-tertiary); }
.fa-sems { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fa-sem { font-size: 10px; background: rgba(31, 95, 224, 0.06); color: var(--color-primary); border-radius: 4px; padding: 3px 8px; font-weight: 600; }
.fa-sem i { font-style: normal; color: var(--color-text-tertiary); font-weight: 400; }

/* ---- 阶段三：应用开发分屏 ---- */
.fa-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 100%; }
.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-col-t small { font-size: 10px; color: var(--color-text-tertiary); }
.fa-editor, .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-ed-bar { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-line); padding-bottom: 5px; }
.fa-ed-prev em { font-size: 10px; border-radius: 4px; padding: 2px 8px; background: var(--color-primary); color: #fff; font-weight: 600; }
.fa-ed-prev em.ok { background: var(--color-success); }
.fa-ed-grid { display: grid; grid-template-columns: 84px 1fr 94px; gap: 8px; }
.fa-ed-cat { display: grid; gap: 4px; align-content: start; }
.fa-cat { font-size: 10px; padding: 3px 7px; border-radius: 4px; background: var(--color-bg-soft); border: 1px solid var(--color-line); color: var(--color-text-secondary); }
.fa-cat.on { background: rgba(31, 95, 224, 0.09); color: var(--color-primary); border-color: rgba(31, 95, 224, 0.35); font-weight: 600; }
.fa-ed-canvas { display: grid; gap: 5px; align-content: start; }
.fa-widget { border: 1px solid var(--color-line); border-radius: 6px; background: linear-gradient(180deg, #fff, #fafcff); padding: 5px 8px; display: grid; gap: 2px; font-size: 10px; }
.fa-widget b { font-size: 10px; }
.fa-widget span { color: var(--color-text-secondary); }
.fa-bars { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.fa-bars i { flex: 1; background: linear-gradient(180deg, #6f9bff, var(--color-primary)); border-radius: 2px 2px 1px 1px; min-height: 4px; }
.fa-ed-bind { display: grid; gap: 4px; align-content: start; }
.fa-bind { font-size: 9.5px; border: 1px dashed var(--color-line-strong); border-radius: 4px; padding: 4px 6px; display: grid; gap: 1px; }
.fa-bind b { color: var(--color-primary); font-size: 9px; }
.fa-bind span { color: var(--color-text-secondary); }
.fa-screen { border: 1px solid rgba(31, 157, 102, 0.4); background: rgba(31, 157, 102, 0.06); border-radius: 6px; padding: 5px 8px; font-size: 10px; display: grid; gap: 4px; }
.fa-screen b { color: var(--color-success); font-size: 10px; }
.fa-screen div { display: flex; flex-wrap: wrap; gap: 4px; }
.fa-screen div span { background: #fff; border: 1px solid var(--color-line); border-radius: 4px; padding: 2px 6px; font-size: 9.5px; }
.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; gap: 4px; }
.fa-gencard { font-size: 10px; font-weight: 600; border: 1px solid var(--color-line); border-radius: 5px; background: #fff; padding: 4px 8px; box-shadow: var(--shadow-card); }
.fa-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 9.5px; }
.fa-filters span { border: 1px solid var(--color-line); border-radius: 999px; padding: 2px 8px; background: var(--color-bg-soft); color: var(--color-text-secondary); }
.fa-filters .on-chip { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.fa-filters .fa-over { color: var(--color-danger); border-color: rgba(217, 75, 75, 0.4); background: rgba(217, 75, 75, 0.07); font-weight: 600; }

/* ---- 阶段四：应用市场（v8.9：删除路径分叉卡与引导连线，腾出的空间把市场卡片放大充实） ---- */
.fa-p4-grid { display: grid; grid-template-columns: 1fr 168px; gap: 12px; }
.fa-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } /* v9.0：3→4 列，8 个应用 */
.fa-app { position: relative; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: #fff; padding: 12px 13px; display: grid; gap: 4px; font-size: 11px; align-content: start; }
.fa-app b { font-size: 12.5px; }
.fa-app span { color: var(--color-text-secondary); }
.fa-app small { color: var(--color-text-tertiary); }
.fa-app .fa-install { color: var(--color-primary); font-weight: 600; margin-top: 3px; font-style: normal; }
.fa-app .fa-swap .ok { color: var(--color-success); font-weight: 600; margin-top: 3px; }
.fa-prog { display: block; height: 5px; border-radius: 999px; background: var(--color-bg-soft); overflow: hidden; margin-top: 6px; }
.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 10px; display: grid; gap: 4px; align-content: start; }
.fa-mitem { font-size: 10px; padding: 4px 8px; 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; }

/* ---- 最终总览（v8.9：界面陈列改为自下而上五层架构图，样式见文末 v8.9 区块；v9.1：总结句上移为 .fa-cap 顶部标题，.fa-summary 已移除） ---- */

/* ---- 响应式 ---- */
@media (max-width: 1023px) {
  .fa-stage { height: 600px; }
  .fa-p1-grid { grid-template-columns: 190px 1fr 190px; } /* v9.0：左右两列布局的平板列宽 */
  .fa-wb-body { grid-template-columns: 36% 1fr; } /* v9.0：平板对话区适当放宽，避免换行过高 */
  .fa-p2-grid { grid-template-columns: 160px 24px 1fr 168px; }
  .fa-ed-grid { grid-template-columns: 74px 1fr 84px; }
  .fa-apps { grid-template-columns: repeat(3, 1fr); } /* v9.0：平板 3 列 */
  .fa-p4-grid { grid-template-columns: 1fr 128px; }
}
@media (max-width: 767px) {
  /* 移动端：纵向流程，min-height 760 */
  .fa-stage { height: 760px; }
  .fa-phase { padding: 70px 12px 46px; } /* v9.1：caption 放大，移动端同步多让 14px */
  .fa-p1-grid { grid-template-columns: 1fr; gap: 8px; align-content: start; height: auto; }
  .fa-srcs { grid-template-columns: 1fr; gap: 6px; }
  .fa-src { padding: 6px 8px; }
  .fa-wires { display: none; }
  .fa-num { display: none; } /* v9.14 [2] 移动端 wires/数字同隐，hub 渐变引导线口径不变 */
  .fa-p2-grid { grid-template-columns: 1fr; gap: 8px; align-content: start; }
  .fa-big-arr { transform: rotate(90deg); }
  .fa-split { grid-template-columns: 1fr; gap: 8px; height: auto; }
  .fa-p4-grid { grid-template-columns: 1fr; }
  .fa-apps { grid-template-columns: repeat(2, 1fr); }
  .fa-menu { display: none; }
  .fa-final { gap: 12px; align-content: center; }
  .fa-cap { left: 50%; right: auto; top: 14px; bottom: auto; translate: -50% 0; max-width: 94%; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-phase, .fa-stage [data-w] { transition: none !important; }
  .fa-dot { animation: none !important; }
}

/* ============ v8.1 阶段进度指示条（舞台内右下胶囊，绝对定位零高度增量） ============ */
.fa-steps {
  position: absolute; left: 50%; right: auto; translate: -50% 0; bottom: 24px; z-index: 3; /* v8.6：进度步骤居中于舞台底部；v9.14 [4] 上移 10→24px 让位内容 */
  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;
}
/* v8.9：集成商页取消 hover 暂停，.fa-paused-mark 已移除（工厂页保留） */
@media (max-width: 767px) {
  .fa-steps { left: 10px; right: 10px; translate: none; bottom: 12px; justify-content: center; flex-wrap: wrap; padding: 3px 10px; font-size: 10px; }
}

/* ============ v8.3 集成商版场景化增强：场景设备卡 + 数据包流动 + 压装机示意 + 总览底纹 ============ */
/* P1 场景设备卡：细线 SVG 图标 + 实时数据点 / 单据小行 / 表字段小行 */
.fa-src-head { display: flex; align-items: center; gap: 6px; }
.fa-src-head svg { width: 32px; height: 22px; flex: none; }
.fa-src-head .l, .fa-ports .l, .fa-mc-ill .l { stroke: #b9c6da; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fa-src-head .a, .fa-ports .a, .fa-mc-ill .a { stroke: rgba(31, 95, 224, 0.55); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.fa-src .fa-src-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fa-live-pts { display: grid; gap: 1px; border-top: 1px dashed var(--color-line); padding-top: 3px; margin-top: 1px; }
.fa-src .fa-pt { display: flex; justify-content: space-between; align-items: baseline; background: none; border: 0; border-radius: 0; padding: 0; font-size: 8.5px; }
.fa-pt i { font-style: normal; color: var(--color-text-tertiary); }
.fa-pt b { font-size: 8.5px; font-weight: 650; color: var(--color-primary); }
.fa-pt .fa-swap { display: inline-grid; }
.fa-pt .fa-swap em { font-style: normal; }
.fa-mini-rows { display: grid; gap: 2px; border-top: 1px dashed var(--color-line); padding-top: 3px; margin-top: 1px; }
.fa-src .fa-mini-rows span { background: none; border: 0; border-radius: 0; padding: 0; font-size: 8.5px; color: var(--color-text-tertiary); }
.fa-mini-rows span::before { content: "· "; color: var(--color-primary); }

/* P1 连线数据包：小方块沿三条连线流向连接模块（错峰循环，hover 暂停联动） */
.fa-pkt { fill: var(--color-primary); opacity: 0; }
/* v8.6 循环动画时长随 TIME_SCALE ×1.25 */
.fa-pkt-1.on { animation: faPkt1 2.75s linear infinite; }
.fa-pkt-2.on { animation: faPkt2 2.25s linear infinite; }
.fa-pkt-2b.on { animation: faPkt2 2.25s linear 1.125s infinite; }
.fa-pkt-3.on { animation: faPkt3 3s linear infinite; }
/* v8.9：hover 不再暂停数据包/圆点循环动画（全程连播） */
@keyframes faPkt1 {
  0% { transform: translate(3px, 40px); opacity: 0; }
  12% { opacity: 1; } 50% { transform: translate(70px, 78px); }
  88% { opacity: 1; } 100% { transform: translate(157px, 148px); opacity: 0; }
}
@keyframes faPkt2 {
  0% { transform: translate(3px, 150px); opacity: 0; }
  12% { opacity: 1; } 88% { opacity: 1; }
  100% { transform: translate(157px, 150px); opacity: 0; }
}
@keyframes faPkt3 {
  0% { transform: translate(3px, 260px); opacity: 0; }
  12% { opacity: 1; } 50% { transform: translate(70px, 222px); }
  88% { opacity: 1; } 100% { transform: translate(157px, 152px); opacity: 0; }
}

/* P2 原始字段侧：控制柜端口小衬景 */
.fa-ports { width: 100%; height: 22px; margin-top: 4px; }

/* P2 压装机细线示意（挂 UNS 对象树卡右下角，状态灯与"模型已发布"同步点亮） */
.fa-tree { position: relative; }
.fa-tree ul { position: relative; z-index: 1; }
.fa-mc-ill { position: absolute; right: 8px; bottom: 6px; width: 88px; height: 68px; z-index: 0; opacity: 0.9; }
.fa-mc-lamp-g { fill: #c7d0de; }
.fa-mc-lamp-run { fill: var(--color-success); }

/* v8.9：P4 货架衬线（充当分叉引导连线）与总览帧产线底纹随五层架构图一并移除 */

/* 移动端：隐藏压装机示意与数据包（连线本已隐藏），保留设备卡图标与实时数据点 */
@media (max-width: 767px) {
  .fa-mc-ill, .fa-pkt { display: none; }
  .fa-src-head svg { width: 34px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-pkt { animation: none !important; }
}
/* v8.6：caption 已全局改为顶部居中，删除 P1 贴底修正 */

/* ============ 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 1fr; gap: 6px;
  align-content: center; padding: 9px 10px; min-width: 0;
}
/* 生成占位：虚线框，首个生成项出现时同步隐去（窗口 7.7–9.2） */
.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: #fff; 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; } }
/* 市场卡：名称前线性图标（v8.9 随卡片放大 17→20px） */
.fa-app-head { display: flex; align-items: center; gap: 6px; }
.fa-app-head b { color: var(--color-text); }
.fa-app-ico { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* v9.0：20→28px 图标更大 */
/* v8.9：hover 暂停联动已随集成商页取消 hover 暂停一并移除 */
/* 移动端：分栏改上下堆叠，生成项保持两列 */
@media (max-width: 767px) {
  .fa-ai { grid-template-columns: 1fr; }
  .fa-ai-chat { border-right: none; border-bottom: 1px solid var(--color-line); }
  /* v8.6 实测：P3 编辑器列 + AI 分栏堆叠后超 760 舞台 ~80px，隐藏预览大屏让位（桌面不受影响）；v8.7 阶段类名改为 fa-p3a */
  .fa-p3a .fa-screen { display: none; }
  /* v8.6 实测：P2 UNS 建模移动端超 760 舞台 ~114px，隐藏次要元素让位（桌面保留） */
  .fa-p2 .fa-sems, .fa-p2 .fa-ports, .fa-p2 .fa-big-arr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-spin, .fa-typing i { animation: none !important; }
}

/* ============ v8.7 AI 段拆分独播：P3a 可视化开发 / P3b AI 工作台（SCADA 移植） ============ */
/* 两个子阶段全幅独播（覆盖 v8.5 桌面 flex 居中；grid 1fr 轨道防止 justify-content:center 把内容压成 max-content 居中窄条） */
.fa-p3a, .fa-p3b { display: grid; grid-template: 1fr / 1fr; }
/* P3a：编辑器全幅 */
.fa-p3a .fa-editor { grid-template-rows: auto 1fr; align-content: stretch; }
.fa-p3a .fa-ed-grid { grid-template-columns: 150px 1fr 210px; }
.fa-p3a .fa-widget { padding: 8px 10px; }
.fa-p3a .fa-bars { height: 40px; }

/* 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: 26% 1fr; min-height: 0; } /* v9.0：右侧生成面板加宽约 30%（58%→74%），对话区相应收窄 */
/* 左栏对话：浅灰底 + 边线 */
.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-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-filter { margin-left: auto; font-size: 9.5px; font-weight: 600; }
.fa-av-filter .ok { color: var(--color-primary); }
.fa-av-grid { flex: 1; display: grid; grid-template-columns: 1fr 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-d { margin-left: auto; color: var(--color-text-tertiary); }
.fa-od { font-style: normal; font-size: 8.5px; font-weight: 700; color: var(--color-danger); background: rgba(217, 75, 75, 0.1); border-radius: 4px; padding: 1px 5px; }

/* 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: 210px; }
  /* v8.7 排坑：P3a 全幅列宽规则勿压移动端，恢复 ≤1023 窄列模板，否则画布列被挤成竖排单字 */
  .fa-p3a .fa-ed-grid { grid-template-columns: 74px 1fr 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-skel i::after { animation: none !important; }
}

/* ============ v8.8 内容丰富化：P3a 组件 / 应用框架侧菜单 / 市场搜索栏 ============ */
/* P3a：目录分组标题 + 双指标卡行 + 逐柱生长 + 状态列表 + 合格率条 */
.fa-cat-g { font-size: 9px; font-weight: 700; color: var(--color-text-tertiary); letter-spacing: 0.06em; margin-top: 2px; }
.fa-cv-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.fa-w-kpi .fa-kpi-v { font-size: 13px; font-weight: 700; color: var(--color-text); }
.fa-bar { flex: 1; background: linear-gradient(180deg, #6f9bff, var(--color-primary)); border-radius: 2px 2px 1px 1px; min-height: 4px; transform-origin: bottom center; }
.fa-live .fa-bar[data-w] { transform: scaleY(0.05); transition: transform 0.4s ease, opacity 0.3s ease; }
.fa-live .fa-bar[data-w].on { transform: scaleY(1); }
.fa-st-r { display: flex; align-items: center; justify-content: space-between; font-size: 9.5px; color: var(--color-text-secondary); }
.fa-st-r em { font-style: normal; color: var(--color-text-tertiary); }
.fa-st-r em.ok { color: var(--color-success); font-weight: 600; }
.fa-qual { display: flex; align-items: center; gap: 6px; }
.fa-qual .fa-qual-t { flex: 1; margin-top: 0; height: 8px; }
.fa-qual .fa-qual-t i { background: var(--color-success); }
.fa-qual em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--color-success); }

/* 生成应用框架：主体 = 深色侧菜单 + 内容区（框架先出，内容逐块填入） */
.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; }

/* 市场：搜索框 + 分类标签 + 安装完成提示（v8.9 分叉卡删除后随之放大） */
.fa-mkt-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fa-mkt-search { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 264px; font-size: 11px; color: var(--color-text-tertiary); border: 1px solid var(--color-line); border-radius: 999px; background: #fff; padding: 7px 14px; }
.fa-mkt-search svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #9aa6b8; stroke-width: 2; stroke-linecap: round; }
.fa-mkt-tags { display: inline-flex; gap: 6px; }
.fa-mkt-tag { font-size: 10.5px; border-radius: 999px; padding: 4px 12px; 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; }
  .fa-p3a .fa-cat-g { display: none; }
}

/* ============ v8.9 集成商总览帧：自下而上五层架构图（数据源→数据连接→UNS 模型→应用→价值） ============ */
.fa-arch { display: grid; gap: 5px; width: min(736px, 96%); }
.fa-arch-l { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; }
.fa-arch-tag { font-size: 10px; font-weight: 700; color: var(--color-text-tertiary); text-align: right; letter-spacing: 0.04em; white-space: nowrap; }
.fa-arch-c {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--color-line); background: #fff; border-radius: var(--radius-card);
  padding: 7px 12px; min-height: 46px; box-shadow: var(--shadow-card);
}
.fa-arch-b {
  display: inline-flex; align-items: center; gap: 6px; flex: 1; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: 6px; background: var(--color-bg-soft);
  padding: 6px 10px; white-space: nowrap;
}
.fa-arch-b svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fa-arch-link { width: 2px; height: 11px; margin-left: 42px; background: linear-gradient(180deg, rgba(31, 95, 224, 0.55), rgba(31, 95, 224, 0.2)); border-radius: 1px; justify-self: start; }
.fa-arch-l + .fa-arch-link, .fa-arch-link + .fa-arch-l { margin-top: 0; }
.fa-arch-conn { gap: 10px; font-size: 11.5px; color: var(--color-text-secondary); }
.fa-arch-conn b { font-weight: 650; color: var(--color-primary); }
.fa-arch-conn i { font-style: normal; color: var(--color-text-tertiary); }
.fa-arch-tree { gap: 6px; }
.fa-arch-tn {
  font-size: 10px; font-weight: 600; color: var(--color-text-secondary);
  border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-bg-soft);
  padding: 3px 11px; white-space: nowrap;
}
.fa-arch-tn.root { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.fa-arch-vals { gap: 6px; }
.fa-arch-vals span {
  font-size: 10px; font-weight: 600; color: var(--color-primary);
  background: rgba(31, 95, 224, 0.07); border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.fa-final .fa-arch { margin-top: 10px; } /* v9.1：总结句上移顶部后，架构图略下沉避免与 caption 视觉相挤 */
@media (max-width: 767px) {
  .fa-arch { width: 100%; gap: 4px; }
  .fa-arch-l { grid-template-columns: 58px 1fr; gap: 6px; }
  .fa-arch-tag { font-size: 9px; }
  .fa-arch-c { padding: 6px 8px; gap: 5px; min-height: 0; flex-wrap: wrap; }
  .fa-arch-b { font-size: 9px; padding: 5px 6px; gap: 4px; white-space: nowrap; }
  .fa-arch-b svg { width: 13px; height: 13px; }
  .fa-arch-link { margin-left: 29px; height: 9px; }
  .fa-arch-conn { font-size: 10.5px; gap: 5px; flex-wrap: wrap; }
  .fa-arch-tn { font-size: 9.5px; padding: 2px 8px; }
  .fa-arch-vals span { font-size: 9.5px; padding: 3px 8px; white-space: normal; }
}

/* ============ v9.0 集成商 hero 四段改版（工厂页不动；只动 transform/opacity，窗口不变） ============ */
/* ---- [1] P1 数据连接：四来源左右两列（左二右二），连线向中间汇聚、逐根点亮，中心打出"连接成功" ---- */
.fa-p1-col { display: flex; flex-direction: column; justify-content: space-evenly; gap: 14px; min-width: 0; }
.fa-p1-mid { position: relative; min-width: 0; }
.fa-p1-mid .fa-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.fa-p1-hub {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  display: grid; justify-items: center; gap: 6px; text-align: center;
  background: #fff; border: 1px solid rgba(31, 157, 102, 0.45); border-radius: 12px;
  box-shadow: var(--shadow-card); padding: 12px 18px; white-space: nowrap;
} /* v9.1：中心卡放大（padding 10/16→12/18、圆角 10→12） */
.fa-p1-hub-ok { display: inline-flex; align-items: baseline; gap: 7px; color: var(--color-success); }
.fa-p1-hub-ok b { font-size: 17px; } /* v9.1：13→17px 字号加大 */
.fa-p1-hub-ok em { font-style: normal; font-size: 11px; color: var(--color-text-secondary); font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.fa-p1-hub-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; border-top: 1px dashed var(--color-line); padding-top: 6px; }
.fa-p1-hub-rows span { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--color-text-secondary); }
.fa-hub-ck { font-style: normal; font-weight: 700; color: var(--color-success); }
.fa-live .fa-p1-hub.on { animation: faHubPop 0.45s ease-out; }
@keyframes faHubPop { from { transform: scale(0.7); } to { transform: scale(1); } }
/* v9.14 [2]：SMIL 光点（fa-orb/animateMotion）已删除，改为数据值数字 transform 位移（样式见 .fa-num） */

/* ---- [2] P3a 真实看板：浅色浏览器框衬底 + 交叉淡切 + 轻微 Ken Burns（只动 transform） ---- */
.fa-p3a { place-items: stretch; } /* v9.11 [4]：组装网格铺满相位（原居中单图） */
/* v9.11 [4] 组装叙事：左列图元 stagger → 装配动线 → 右侧大看板（≥60% 宽）
   v9.14 [3] 组件 4→7（+环形/漏斗/视频），网格改自然高垂直居中 + 顶/底端对齐：
   行高由最高项（桌面为看板）决定，左列 stretch 到同高后 space-between 均分间距，左右高度差 ≤4px；
   v9.14 [4] 看板 760→720px，给下移的 caption 与上移的进度胶囊让位 */
.fa-p3a-grid { display: grid; grid-template-columns: 190px 34px minmax(0, 1fr); gap: 12px; align-items: stretch; height: auto; width: 100%; align-self: center; margin-top: 12px; }
.fa-asm { display: grid; gap: 8px; align-content: space-between; }
.fa-asm-flow { align-self: center; }
.fa-asm-c {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-line); border-radius: 8px; background: #fff;
  padding: 8px 10px; box-shadow: var(--shadow-card);
}
.fa-asm-g {
  width: 52px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 6px;
  color: var(--color-primary);
}
.fa-asm-g svg { width: 36px; height: 20px; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fa-asm-g svg .gb { stroke: #c9d4e6; }
.fa-asm-num { font-size: 15px; font-weight: 700; color: var(--color-primary); }
.fa-asm-num em { font-size: 9px; font-style: normal; font-weight: 600; }
.fa-asm-bars { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.fa-asm-bars i { width: 6px; background: linear-gradient(180deg, #6f9bff, var(--color-primary)); border-radius: 1.5px; }
.fa-asm-bars i:nth-child(1) { height: 8px; }
.fa-asm-bars i:nth-child(2) { height: 14px; }
.fa-asm-bars i:nth-child(3) { height: 11px; }
.fa-asm-bars i:nth-child(4) { height: 18px; }
.fa-asm-n { font-size: 10.5px; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }
.fa-asm-flow { display: grid; place-items: center; color: var(--color-primary); }
.fa-asm-flow svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3.5 4.5; }
.fa-live .fa-asm-flow.on svg { animation: faAsmMarch 0.9s linear infinite; }
@keyframes faAsmMarch { to { stroke-dashoffset: -8; } }
.fa-p3a .fa-shot { width: 100%; max-width: 720px; justify-self: center; align-self: center; } /* v9.14 [3][4]：720×9/16+27 ≈ 432px，给 caption/胶囊让位后仍 ≥60% 宽 */
.fa-shot {
  width: min(640px, 94%); /* v9.1：caption 加高后内容区 394px，图框 640→360+27 恰好收进 */
  border: 1px solid var(--color-line); border-radius: 12px; background: #fff;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.fa-shot-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-bottom: 1px solid var(--color-line);
  font-size: 10.5px; color: var(--color-text-secondary);
  background: linear-gradient(180deg, #fff, #f8fafd);
}
.fa-shot-title { font-weight: 650; color: var(--color-text); }
.fa-shot-name { margin-left: auto; font-size: 10px; }
.fa-shot-name em { color: var(--color-text-tertiary); }
.fa-shot-name em.ok { color: var(--color-primary); font-weight: 600; }
.fa-shot-body { position: relative; aspect-ratio: 16 / 9; background: #0b1526; } /* 深色衬底与看板图融合，淡切不露白边 */
.fa-shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fa-live .fa-shot-img.on { animation: faKB 2.6s ease-out forwards; }
@keyframes faKB { from { transform: scale(1.06) translate(5px, 3px); } to { transform: scale(1) translate(0, 0); } }

/* ---- [3] P3b 高保真右侧：导航页签 / KPI 条 / 徽章 / 进度条 / 趋势图（图例 + 坐标刻度） ---- */
.fa-av-tabs { display: inline-flex; gap: 2px; margin-left: 6px; }
.fa-av-tabs em { font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--color-text-tertiary); border-radius: 5px; padding: 3px 8px; white-space: nowrap; }
.fa-av-tabs em.cur { color: var(--color-primary); background: rgba(31, 95, 224, 0.09); }
.fa-av-main { grid-template-rows: auto 1fr; }
.fa-av-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 9px 12px 2px; }
.fa-av-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 8px; padding: 5px 10px; }
.fa-av-kpi i { font-style: normal; font-size: 9.5px; color: var(--color-text-tertiary); }
.fa-av-kpi b { font-size: 12px; font-weight: 700; color: var(--color-text); }
.fa-av-kpi.bad b { color: var(--color-danger); }
.fa-av-kpi.ok b { color: var(--color-success); }
.fa-badge { font-style: normal; font-size: 8.5px; font-weight: 700; border-radius: 4px; padding: 1px 5px; margin-left: auto; flex: none; }
.fa-badge.ok { color: var(--color-success); background: rgba(31, 157, 102, 0.1); }
.fa-badge.warn { color: var(--color-warning); background: rgba(224, 150, 46, 0.12); }
.fa-badge.bad { color: var(--color-danger); background: rgba(217, 75, 75, 0.1); }
.fa-av-task > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-av-task .fa-badge { margin-left: 0; }
.fa-av-dim { font-style: normal; font-size: 8.5px; color: var(--color-text-tertiary); margin-left: 5px; }
.fa-av-prog { flex: none; width: 42px; height: 5px; border-radius: 999px; background: var(--color-bg-soft); border: 1px solid var(--color-line); overflow: hidden; }
.fa-av-prog i { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.fa-av-chart { grid-column: 1 / -1; }
.fa-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; font-weight: 500; color: var(--color-text-tertiary); }
.fa-legend i { width: 10px; height: 2.5px; border-radius: 2px; margin-left: 6px; }
.fa-legend .la { background: var(--color-primary); }
.fa-legend .lb { background: #b9c6da; }
.fa-av-chart svg { display: block; width: 100%; height: 72px; }
.fa-av-chart .ax { font-size: 7.5px; fill: #9aa6b8; font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.fa-av-chart .grid { stroke: var(--color-line); stroke-width: 0.6; }
.fa-av-chart .ln-a { fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fa-av-chart .ln-b { fill: none; stroke: #b9c6da; stroke-width: 1.4; stroke-dasharray: 3 3; }

/* ---- v9.0 移动端：P1 上下分组 + 中间汇聚；P3a 真图等比缩放；P3b 次要模块让位 ---- */
@media (max-width: 767px) {
  .fa-p1-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
  .fa-p1-col.right { order: 3; }
  .fa-p1-mid { order: 2; position: static; display: flex; justify-content: center; }
  .fa-p1-mid .fa-wires { display: none; }
  .fa-p1-hub { position: static; translate: none; padding: 8px 14px; }
  .fa-p1 .fa-live-pts, .fa-p1 .fa-mini-rows { display: none; } /* 移动端瘦身：保留图标 + 名称 + 芯片 */
  /* v9.11 [3] P1 移动端精致化：hub 上下渐变引导线（连线 svg 隐藏口径不变） */
  .fa-p1-mid { flex-direction: column; align-items: center; gap: 5px; }
  .fa-p1-mid::before, .fa-p1-mid::after { content: ""; width: 2px; height: 16px; border-radius: 1px; background: linear-gradient(180deg, rgba(31, 95, 224, 0), rgba(31, 95, 224, 0.5)); }
  .fa-p1-mid::after { background: linear-gradient(180deg, rgba(31, 95, 224, 0.5), rgba(31, 95, 224, 0)); }
  /* v9.11 [4] P3a 移动端：图元改顶部横排小行、装配箭头转下、看板图在下 */
  .fa-p3a-grid { grid-template-columns: 1fr; gap: 8px; align-content: center; height: auto; }
  .fa-asm { display: flex; gap: 8px; }
  .fa-asm-c { flex: 1; flex-direction: column; gap: 5px; padding: 7px 6px; }
  .fa-asm-g { width: 100%; height: 28px; }
  .fa-asm-n { font-size: 9.5px; }
  .fa-asm-flow { rotate: 90deg; margin: -2px auto; }
  .fa-p3a .fa-shot { max-width: 100%; }
  .fa-shot { width: 100%; }
  .fa-av-kpis, .fa-av-chart, .fa-av-tabs { display: none; } /* 预览区让位：保留四张核心卡片 */
}
@media (prefers-reduced-motion: reduce) {
  .fa-p1-hub, .fa-shot-img { animation: none !important; }
  .fa-wire, .fa-num, .fa-asm-flow svg { animation: none !important; } /* v9.14 [2][3] */
}

/* v9.0 排坑：P3b 高保真内容高度精调（KPI/卡片/图表全部收进可视区，趋势图完整显示） */
.fa-p3b .fa-appview { inset: 8px; }
.fa-p3b .fa-av-kpis { padding: 6px 12px 0; }
.fa-p3b .fa-av-kpi { padding: 4px 10px; }
.fa-p3b .fa-av-grid { gap: 6px; padding: 8px 12px; }
.fa-p3b .fa-av-card { padding: 6px 8px; gap: 3px; }
.fa-p3b .fa-av-r { line-height: 1.3; }
.fa-p3b .fa-av-chart svg { height: 60px; }

/* ============ v9.1 四项：总结句上移 / caption +30% / TIME_SCALE 1.63 / P1 细线+大中心卡 ============ */
/* caption 加高后内容区 406→394px，P3b 高保真内容同步精调补偿（趋势图保持完整可视） */
.fa-p3b .fa-av-bar { padding: 6px 12px; }
.fa-p3b .fa-av-kpis { padding: 4px 12px 0; }
.fa-p3b .fa-av-grid { padding: 7px 12px; }
.fa-p3b .fa-av-chart svg { height: 50px; }
/* 移动端 caption：等比略收（17/14px），保证最长主句（P1 数据连接）单行不跨行溢出 */
@media (max-width: 767px) {
  .fa-cap { font-size: 14px; max-width: 98%; } /* v9.1：放宽行宽上限，保证 17px 最长主句单行不跨行 */
  .fa-cap b { font-size: 17px; }
  .fa-final .fa-arch { margin-top: 6px; }
}

/* =========================================================
   v9.3 集成商正文三区块改版（hero 动画与工厂页不动）
   [1] connect：标题（含胶囊标签）居中 + 副标题删除 + 能力清单移至标题下方居中 3×2 网格 + 三卡等高
   [2] uns：底部三小卡整区块删除（HTML 与 .uns-cards 规则已同步清理，间距收拢）
   [3] market：图标真实化——品牌色圆角方块（≈22%）+ 柔和渐变底 + 白色象形 glyph，一套风格
   ========================================================= */
/* [1] connect 标题与清单一并居中（桌面/移动同构） */
#connect .story-sticky { grid-template-columns: 1fr; justify-items: center; text-align: center; }
#connect .story-sticky .eyebrow, #connect .story-sticky .h2 { grid-column: auto; }
#connect .story-sticky .story-points {
  grid-column: auto;
  grid-row: auto;
  margin: 10px auto 0;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 12px 36px;
}
/* [1] 三卡等高：grid 默认拉伸对齐，卡内 flex 纵向均分——内容少的卡行间自然撑开、底部对齐，不留死白 */
#connect .story-steps { align-items: stretch; }
#connect .step { display: flex; flex-direction: column; }
#connect .form-mock, #connect .map-rows { flex: 1; align-content: space-between; }
#connect .mtable-scroll { flex: 1; display: flex; flex-direction: column; }
#connect .mtable-scroll .mtable { flex: 1; align-content: space-between; }
@media (max-width: 1023px) {
  #connect .story-sticky .story-points { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 767px) {
  #connect .story-sticky .story-points { grid-template-columns: auto; justify-items: start; }
}


/* =========================================================
   v9.5 遮挡修复：hero 阶段进度胶囊（.fa-steps）不再压舞台内容
   排查结论：正文 connect①②③ / delivery 1-4 节点+连线 / tools 页签 / uns/deploy/agent 三视口均不压；
   仅 hero 底部胶囊在 P3b（桌面+平板+手机）与 P2（仅手机）相位压内容。
   根因：P3b 相位内 .fa-wb 与 .fa-appview（absolute inset:12px 直抵舞台底）双图层都伸进胶囊区；
   P2 移动端网格内容 682px 超出 760px 舞台可用高度 24px。
   修复：内容让位（胶囊保持原位风格不变），只动 transform，不碰布局与动画时序。
   ========================================================= */
/* P3b 整个相位（fa-wb + fa-appview 双图层 + 内部全部子元素）统一 scale 让出底部胶囊安全通道；
   相位切换是 opacity 过渡、fa-mv 入场是子元素自身 transform，均不与相位级 transform 冲突；
   static 直出帧（reduced-motion）同吃本条 base 规则。 */
.fa-p3b { transform: scale(0.93); transform-origin: center top; }
@media (max-width: 767px) {
  /* 移动端舞台 760px、胶囊 26px：0.93 ≈ 让 53px */
  .fa-p3b { transform: scale(0.93); }
  /* P2 UNS 建模移动端网格溢出 24px：网格 0.94 收回胶囊区上方（682px → 641px，底边 733 < 胶囊顶 750） */
  .fa-p2 .fa-p2-grid { transform: scale(0.94); transform-origin: center top; }
}

/* ================= v9.12 版本对比（#compare）/ v9.15 精简四维度 ================= */
.cmp-scroll { margin-top: 56px; border-radius: var(--radius-card); }
/* v9.47：overflow-x 仅在窄屏启用——桌面不裁切「咨询商业方案」的 hover 二维码浮卡 */
@media (max-width: 899px) {
  .cmp-scroll { overflow-x: auto; }
}
.cmp-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  font-size: 14px;
}
.cmp-table th, .cmp-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--color-line);
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.cmp-table thead th { border-top: none; padding: 18px; vertical-align: top; }
.cmp-h-feat { width: 168px; background: #fafbfe; color: var(--color-text-secondary); font-size: 13px; font-weight: 600; vertical-align: middle; }
.cmp-name { display: block; font-size: 16.5px; font-weight: 700; color: var(--color-text); }
.cmp-tag { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.tag-green { background: rgba(31, 157, 102, 0.12); color: #177a4f; }
.tag-blue { background: rgba(40, 100, 240, 0.12); color: var(--color-primary); }
.tag-violet { background: rgba(122, 90, 248, 0.12); color: #6b4fc4; } /* 特批：全站禁紫口径下仅此表头用浅紫 */
.cmp-desc { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; line-height: 1.6; color: var(--color-text-secondary); }
.cmp-h-os { background: #eaf7f0; box-shadow: inset 0 3px 0 #1f9d66; }
.cmp-h-free { background: #e2ecfd; box-shadow: inset 0 3px 0 var(--color-primary); }
.cmp-h-x { background: #f0ebfc; box-shadow: inset 0 3px 0 #7a5af8; } /* 特批浅紫，仅此表头 */
.cmp-table tbody th[scope="row"] { font-weight: 600; font-size: 13.5px; color: var(--color-text); background: #fafbfe; white-space: nowrap; }
.cmp-table tbody td:nth-child(3) { background: #f6f9ff; } /* supOS-Free 重点列 */
.cmp-table td b { font-weight: 750; color: var(--color-text); }
/* v9.16：底行按钮行——三产品按钮移入表格对应列 */
.cmp-table tfoot td { padding: 14px; text-align: center; vertical-align: middle; }
.cmp-table tfoot td:first-child { background: #fafbfe; }
.cmp-table tfoot td:nth-child(3) { background: #f6f9ff; } /* Free 重点列延伸到底行 */
.cmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 650;
  border: 1px solid;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.cmp-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.cmp-btn-green { color: #177a4f; border-color: rgba(31, 157, 102, 0.4); background: rgba(31, 157, 102, 0.06); }
.cmp-btn-blue { color: #fff; border-color: var(--color-primary); background: var(--color-primary); }
.cmp-btn-violet { color: #6b4fc4; border-color: rgba(122, 90, 248, 0.4); background: rgba(122, 90, 248, 0.06); }
/* v9.15：查看详细对比主按钮（跳转详细对比页，href 先 # 占位） */
.cmp-detail { margin-top: 26px; display: flex; justify-content: center; }
.cmp-detail-btn { padding-inline: 40px; }

/* ================= v9.12 支持资源（#support） ================= */
.sup-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sup-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 30px 24px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  align-content: start;
  color: inherit;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
a.sup-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: rgba(40, 100, 240, 0.3); }
.sup-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px; /* 52px 边长约 23% 圆角，延续 v9.3 真实 app 图标 */
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--si, var(--color-primary)) 66%, #ffffff) 0%, var(--si, var(--color-primary)) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px color-mix(in srgb, var(--si, var(--color-primary)) 32%, transparent);
}
.sup-icon svg { width: 26px; height: 26px; }
.sup-card h3 { font-size: 16.5px; font-weight: 700; }
.sup-card p { font-size: 13px; color: var(--color-text-secondary); line-height: 1.7; }
.sup-link { margin-top: 2px; font-size: 13.5px; font-weight: 650; color: var(--color-primary); }
/* v9.43：社群卡视觉统一优化——真实微信二维码 + 浅蓝渐变底与三张资源卡拉开层次 */
.sup-qr {
  background: linear-gradient(165deg, #f2f7ff 0%, #ffffff 72%);
  border-color: rgba(40, 100, 240, 0.28);
}
.sup-qr .qr-box {
  width: 124px;
  height: 124px;
  padding: 8px;
  border: 1px solid rgba(40, 100, 240, 0.22);
  border-radius: 10px;
  background: #fff;
  margin-top: 4px;
}
.sup-qr .qr-box img { width: 100%; height: 100%; display: block; }
.sup-qr .pending { font-size: 11px; font-weight: 700; color: var(--color-warning); }

@media (max-width: 1023px) {
  .sup-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cmp-scroll { margin-top: 36px; }
  .sup-grid { margin-top: 36px; gap: 14px; }
  .sup-card { padding: 24px 18px; }
}
@media (max-width: 560px) {
  .sup-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   v9.30 [3] 视觉块加宽 → 1240px（文本容器 .wrap 不变）
   - 负 margin 突围：块宽 min(1240px, 100vw-80px)，相对 .wrap 内容盒居中
     （hero .wrap 内边距 24px，内容盒 ≤1232，公式同样成立；1024–1280 自适应收缩）
   - 覆盖块：hero 舞台 / cap 页签动图 / agent-grid / uns-stage / delivery-flow
     / compare 表 / support 网格 / market 模板宫格
   - ≥1600px：.wrap 内边距 48→40（.hero .wrap 24px 规则优先级更高，不受影响）
   ========================================================= */
@media (min-width: 1024px) {
  .hero-visual, .cap-panel, .agent-grid, .uns-stage, .delivery-flow,
  .cmp-scroll, .sup-grid, #market .tpl-grid {
    width: min(1240px, calc(100vw - 80px));
    max-width: none;
    margin-inline: calc((100% - min(1240px, 100vw - 80px)) / 2);
  }
}
@media (min-width: 1600px) {
  .wrap { padding-inline: 40px; }
}