/* ============================================================
   章节详情页样式 v4 — 响应式网格 + 切换联动 + 完整内容展示
   ============================================================ */

/* ========== 知识点区域背景 ========== */
.kp-section {
  position: relative;
  padding: 48px 32px 72px;
  background: linear-gradient(180deg, #eef4ff 0%, #f4f7fb 30%, #f8fafd 70%, #fff 100%);
}
html[data-theme="dark"] .kp-section {
  background: linear-gradient(180deg, #0b1426 0%, #0d1830 30%, #0f1c38 70%, #0a1326 100%);
}
.kp-section::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(37,99,235,.02) 1px, transparent 1px),
    linear-gradient(0deg, rgba(37,99,235,.02) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 50% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 40%, #000 30%, transparent 80%);
}
.kp-section-head { position: relative; z-index: 1; text-align: center; margin-bottom: 32px; }
.kp-section-head h2 { font-size: clamp(24px, 3vw, 30px); font-weight: var(--fw-bold, 800); letter-spacing: .5px; color: var(--text); }
.kp-section-head p { font-size: var(--fs-body); color: var(--text-3); margin-top: 8px; letter-spacing: .3px; }

/* ========== 内容宽度约束（阅读舒适 · 防止超宽拉伸导致行长失控） ========== */
/* 注：.kp-row 已改为 .kp-layout 直接子元素并按 1/-1 占满整行，故不在此约束 */
.kp-section-head,
.kp-body,
.kp-detail,
.kp-summary {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* ========== 内容区：单栏（左侧大纲已移除，避免与顶部卡片导航重复） ========== */
.kp-body {
  position: relative; z-index: 1;
  margin-top: 8px;
}

/* ========== 横向缩略卡片行（响应式网格 · 占满内容+目录整行并居中） ========== */
.kp-row {
  grid-column: 1 / -1;
  position: relative; z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 8px 4px 20px;
}
/* 进阶路线引导：显式标出「小白 → 工程师」的三段进阶线，与卡片分级呼应 */
.kp-row::before {
  content: '进阶路线 · 入门筑基 → 核心掌握 → 进阶深入';
  flex-basis: 100%;
  text-align: center;
  font-size: var(--fs-2xs, 11px); font-weight: 800; letter-spacing: 1.5px;
  color: var(--text-3);
  margin-bottom: 6px;
}
.kp-row::after {
  content: ''; flex-basis: 100%;          /* 独占一行：避免被末行卡片同行挤到右侧偏位 */
  height: 4px; border-radius: 999px; margin: 12px auto 0;
  background: linear-gradient(90deg, #22c55e 0%, #22c55e 33%, #2563eb 50%, #3b82f6 67%, #3b82f6 100%);
  background-repeat: no-repeat;
  background-size: min(560px, 92%) 100%;  /* 渐变条本身居中、限宽，视觉上落在标题正下方 */
  background-position: center;
  opacity: .35;
}

/* ========== 单张缩略卡片 ========== */
.kp-thumb {
  flex: 0 0 auto;
  width: clamp(164px, 14vw, 210px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 12px;
  border-radius: 18px;
  cursor: pointer; user-select: none;
  text-align: center;
  position: relative;
  overflow: hidden;

  /* 玻璃材质（玻璃模糊仅在选中态启用，避免多卡片常驻 backdrop-filter 造成滚动卡顿） */
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.6);
  outline: 1px solid rgba(37,99,235,.04);

  box-shadow:
    0 4px 16px rgba(37,99,235,.04),
    0 1px 4px rgba(37,99,235,.03),
    inset 0 1px 0 rgba(255,255,255,.6);

  transition: all .35s cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"] .kp-thumb {
  background: var(--surface-2);
  border-color: var(--hairline);
  box-shadow: var(--shadow);
}

/* 选中态 — 上浮 + 边框发光 */
.kp-thumb.active {
  transform: translateY(-6px);
  border-color: rgba(37,99,235,.35);
  outline-color: rgba(37,99,235,.12);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 12px 36px rgba(37,99,235,.12),
    0 4px 12px rgba(37,99,235,.06),
    inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="dark"] .kp-thumb.active {
  background: var(--surface-3);
  border-color: var(--border-glow);
  box-shadow: var(--elev-glow);
}

/* 切换脉冲动画（点击触发） */
.kp-thumb.switching {
  animation: kpSwitchPulse .4s cubic-bezier(.16,1,.3,1);
}
@keyframes kpSwitchPulse {
  0%   { transform: translateY(-6px) scale(1); }
  40%  { transform: translateY(-8px) scale(1.06); box-shadow: 0 16px 48px rgba(37,99,235,.18); }
  100% { transform: translateY(-6px) scale(1); }
}

/* 呼吸发光脉冲 */
.kp-thumb::after {
  content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.05);
}
.kp-thumb.active::after {
  box-shadow: inset 0 0 0 1.5px rgba(37,99,235,.2);
  animation: kpGlowPulseActive 3s ease-in-out infinite;
}
@keyframes kpGlowPulseActive {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; box-shadow: inset 0 0 0 2px rgba(37,99,235,.35); }
}

/* 缩略卡片内部元素 */
.kp-thumb .kp-tn-num {
  font-family: var(--font-mono); font-size: var(--fs-mono-lg); font-weight: 900;
  min-width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.kp-stage-0 .kp-tn-num { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 4px 16px rgba(34,197,94,.3); }
.kp-stage-1 .kp-tn-num { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 4px 16px rgba(37,99,235,.3); }
.kp-stage-2 .kp-tn-num { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 4px 16px rgba(59,130,246,.35); }
.kp-thumb .kp-tn-title {
  font-size: clamp(13px, 1vw, 14.5px); font-weight: 700; color: var(--text); line-height: 1.5;
  display: block; width: 100%;
  text-align: center;
  max-height: 3.1em;          /* 2 行封顶：1.5 × 2 ≈ 3em，留 0.1em 安全余量防亚像素裁切 */
  overflow: hidden;
}
.kp-thumb .kp-tn-stage {
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.kp-stage-0 .kp-tn-stage { color: #16a34a; background: rgba(34,197,94,.1); }
.kp-stage-1 .kp-tn-stage { color: #2563eb; background: rgba(37,99,235,.1); }
.kp-stage-2 .kp-tn-stage { color: #3b82f6; background: rgba(59,130,246,.12); }

/* ========== 展开详情面板 ========== */
.kp-detail {
  position: relative; z-index: 1;
  margin-top: 12px;
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(16px);
  transition: max-height .55s cubic-bezier(.16,1,.3,1),
              opacity .45s ease,
              transform .45s cubic-bezier(.16,1,.3,1),
              margin .4s ease;
}
.kp-detail.open {
  max-height: 50000px; opacity: 1; transform: translateY(0); margin-top: 28px;
}
.kp-detail-inner {
  position: relative;
  border: 1px solid transparent;
  border-radius: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 40px 80px;
  /* 玻璃面板 + 渐变描边：左上品牌色高光、向右下淡出，呈现打磨边缘的高级感 */
  background:
    linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.72)) padding-box,
    linear-gradient(135deg,
      color-mix(in srgb, var(--mod-color, var(--brand)) 32%, transparent) 0%,
      color-mix(in srgb, var(--mod-color, var(--brand)) 9%, transparent) 34%,
      transparent 66%) border-box;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 18px 50px -16px rgba(37,99,235,.20),
    0 6px 20px -10px rgba(20,40,80,.10);
  animation: kpDetailFadeIn .45s cubic-bezier(.16,1,.3,1);
}
/* 模块色左侧强调条：让单栏内容面板"归属"本章领域色 */
.kp-detail-inner::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mod-color, var(--brand)) 78%, #fff),
    color-mix(in srgb, var(--mod-color, var(--brand)) 52%, #fff));
  box-shadow: 0 0 12px color-mix(in srgb, var(--mod-color, var(--brand)) 28%, transparent);
}
@keyframes kpDetailFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="dark"] .kp-detail-inner {
  background:
    linear-gradient(var(--surface-2, #161d2e), var(--surface-2, #161d2e)) padding-box,
    linear-gradient(135deg,
      color-mix(in srgb, var(--mod-color, var(--brand)) 40%, transparent) 0%,
      color-mix(in srgb, var(--mod-color, var(--brand)) 12%, transparent) 34%,
      transparent 68%) border-box;
  border-color: transparent;
  box-shadow: var(--elev-glow), var(--glass-inset);
}

/* 详情面板头部 */
.kp-detail-inner .kp-dt-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
}
.kp-detail-inner .kp-dt-icon {
  font-size: var(--fs-mono-xl); width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.4);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}
html[data-theme="dark"] .kp-detail-inner .kp-dt-icon {
  background: rgba(255,255,255,.06);
}
.kp-detail-inner .kp-dt-num {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 13px; font-family: var(--font-mono); font-size: var(--fs-mono-md);
  font-weight: 900; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.kp-detail-inner .kp-dt-stage {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.kp-detail-inner .kp-dt-title {
  font-size: var(--fs-mono-sm); font-weight: 800; color: var(--text); line-height: 1.35; margin-top: 2px;
}

/* 详情内容通用 */
.kp-detail-inner .kp-dt-intro {
  font-size: var(--fs-md); color: var(--text-2); line-height: 1.78;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(37,99,235,.08);
}
html[data-theme="dark"] .kp-detail-inner .kp-dt-intro { border-bottom-color: rgba(80,140,255,.1); }

.kp-detail-inner .kp-dt-points {
  list-style: none; padding: 0; margin: 0 0 18px;
}
.kp-detail-inner .kp-dt-points li {
  font-size: var(--fs-md); color: var(--text-2); line-height: 1.72;
  padding: 6px 0 6px 22px; position: relative;
}
.kp-detail-inner .kp-dt-points li::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: .7;
}

.kp-detail-inner .kp-dt-highlight {
  padding: 16px 22px; border-radius: 14px;
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.72;
  background: rgba(37,99,235,.05);
  border-left: 3px solid rgba(37,99,235,.4);
}
.kp-detail-inner .kp-dt-highlight::before { content: ''; }
html[data-theme="dark"] .kp-detail-inner .kp-dt-highlight { background: rgba(37,99,235,.08); }

/* 章末总结卡片 */
.kp-summary {
  position: relative; z-index: 1; margin-top: 32px;
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px dashed rgba(37,99,235,.18) !important;
  border-radius: 18px;
  padding: 28px 32px;
  animation: kpDetailFadeIn .5s cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"] .kp-summary { background: var(--surface-2) !important; border: 1px solid var(--hairline); }
.kp-summary .kp-summary-label {
  display: inline-block; margin-bottom: 10px;
  padding: 4px 12px; border-radius: 8px; font-weight: 700; font-size: var(--fs-sm); color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.kp-summary .kp-summary-text {
  font-size: var(--fs-md); color: var(--text-2); line-height: 1.8;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.kp-summary-para { margin: 0; }
.kp-sum-item {
  display: inline-flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(37,99,235,.1);
  line-height: 1.65;
  flex: 1 1 220px; min-width: 180px;
}
.kp-sum-item::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 8px;
  background: var(--mod-color, var(--brand));
}
html[data-theme="dark"] .kp-sum-item {
  background: rgba(255,255,255,.05);
  border-color: var(--hairline);
}

/* ── 流动路径（虚线） ── */
.diag-flow-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-dasharray: 8 6;
  animation: diagFlowMove 1s linear infinite;
}
@keyframes diagFlowMove {
  to { stroke-dashoffset: -28; }
}
.diag-flow-slow {
  animation-duration: 2.5s;
}
.diag-flow-fast {
  animation-duration: .7s;
}

/* ── 静态辅助线 ── */
.diag-line {
  fill: none;
  stroke: rgba(37,99,235,.18);
  stroke-width: 1.5;
}
html[data-theme="dark"] .diag-line {
  stroke: rgba(80,140,255,.15);
}

/* ── 节点脉冲 ── */
.diag-node-pulse {
  animation: diagNodePulse 2.4s ease-in-out infinite;
}
@keyframes diagNodePulse {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}

/* ── 发光核心 ── */
.diag-glow {
  animation: diagGlow 2s ease-in-out infinite;
}
@keyframes diagGlow {
  0%, 100% { filter: drop-shadow(0 0 4px var(--brand)); }
  50% { filter: drop-shadow(0 0 14px var(--brand)); }
}

/* ── 路径描绘入场 ── */
.diag-draw-in {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: diagDrawIn 2s ease-out forwards;
}
@keyframes diagDrawIn {
  to { stroke-dashoffset: 0; }
}

/* ── 数据光点沿路径（配合 SVG animateMotion，纯透明过渡） ── */
.diag-dot {
  opacity: 0;
  animation: diagDotFade 3s ease-in-out infinite;
}
@keyframes diagDotFade {
  0%   { opacity: 0; }
  15%  { opacity: .8; }
  85%  { opacity: .8; }
  100% { opacity: 0; }
}
/* 各光点路径位置不同，通过独立的 transform 动画控制 */
/* 这些在 inline SVG 中定义 */

/* ── 卡片/容器悬停发光 ── */
.diag-box {
  transition: all .35s ease;
}
.diag-box:hover .diag-glow-surface {
  filter: drop-shadow(0 0 20px rgba(37,99,235,.15));
}

/* ── 阶段标签颜色 ── */
.diag-tag-gen1 { fill: #22c55e; }
.diag-tag-gen2 { fill: #2563eb; }
.diag-tag-gen3 { fill: #8b5cf6; }

/* ── 对比面板 ── */
.diag-compare-panel {
  fill: rgba(37,99,235,.03);
  stroke: rgba(37,99,235,.1);
  stroke-width: 1;
  rx: 10;
}
html[data-theme="dark"] .diag-compare-panel {
  fill: rgba(80,140,255,.03);
  stroke: rgba(80,140,255,.08);
}

/* ── 代码/图表块内部间距收紧 ── */
.kb-code pre { padding: 12px 14px; }
.kb-diagram pre { padding: 10px 12px; }
@media (max-width: 680px) {
  .kb-code, .kb-diagram { max-height: 240px; }
}

/* ── 步骤节点 ── */
.diag-step {
  fill: var(--brand);
  rx: 8;
  animation: diagStepPulse 3s ease-in-out infinite;
}
@keyframes diagStepPulse {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; transform: scale(1.05); transform-origin: center; }
}

/* ========== 知识点内容块样式（自适应 content_blocks 渲染） ========== */

/* ── 段落 ── */
.kb-paragraph {
  font-size: clamp(15px, 1.1vw, 17px); color: var(--text-2); line-height: 1.95;
  margin-bottom: 22px; padding: 0;
}

/* ── 站内章节交叉引用链接（[[NN-slug]] 解析） ── */
.wiki-link {
  color: var(--brand); text-decoration: none;
  border-bottom: 1px dashed currentColor; padding: 0 1px;
  border-radius: 2px; transition: background .15s ease, border-color .15s ease;
}
.wiki-link:hover {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-bottom-style: solid;
}
html[data-theme="dark"] .wiki-link {
  color: #60a5fa;
}

/* ── 三级标题 ── */
.kb-h3 {
  font-size: clamp(17px, 1.3vw, 19px); font-weight: 800; color: var(--text);
  margin: 36px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(37,99,235,.08);
  letter-spacing: .3px;
}
html[data-theme="dark"] .kb-h3 {
  border-bottom-color: rgba(80,140,255,.1);
}
/* 场景/大主题连续出现时，上方加分隔线，避免不同场景黏在一起 */
.kb-paragraph + .kb-h3,
.kb-list + .kb-h3,
.kb-table-wrap + .kb-h3,
.kb-blockquote + .kb-h3,
.kb-image + .kb-h3,
.kb-diagram + .kb-h3,
.kb-hr + .kb-h3,
.kb-h4 + .kb-h3 {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline, rgba(37,99,235,.12));
}
html[data-theme="dark"] .kb-paragraph + .kb-h3,
html[data-theme="dark"] .kb-list + .kb-h3,
html[data-theme="dark"] .kb-table-wrap + .kb-h3,
html[data-theme="dark"] .kb-blockquote + .kb-h3,
html[data-theme="dark"] .kb-image + .kb-h3,
html[data-theme="dark"] .kb-diagram + .kb-h3,
html[data-theme="dark"] .kb-hr + .kb-h3,
html[data-theme="dark"] .kb-h4 + .kb-h3 {
  border-top-color: var(--hairline, rgba(80,140,255,.16));
}

/* ── 四级标题 ── */
.kb-h4 {
  font-size: clamp(16px, 1.15vw, 17.5px); font-weight: 700; color: var(--text);
  margin: 26px 0 12px; letter-spacing: .2px;
  padding-left: 11px; position: relative;
}
.kb-h4::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 14px; border-radius: 2px;
  background: var(--mod-color, var(--brand));
}
/* 步骤/子主题连续出现时，加细分隔线并加大上间距，避免 h4+p 黏成一团 */
.kb-paragraph + .kb-h4,
.kb-list + .kb-h4,
.kb-table-wrap + .kb-h4,
.kb-blockquote + .kb-h4,
.kb-image + .kb-h4,
.kb-diagram + .kb-h4,
.kb-hr + .kb-h4 {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline, rgba(37,99,235,.1));
}
html[data-theme="dark"] .kb-paragraph + .kb-h4,
html[data-theme="dark"] .kb-list + .kb-h4,
html[data-theme="dark"] .kb-table-wrap + .kb-h4,
html[data-theme="dark"] .kb-blockquote + .kb-h4,
html[data-theme="dark"] .kb-image + .kb-h4,
html[data-theme="dark"] .kb-diagram + .kb-h4,
html[data-theme="dark"] .kb-hr + .kb-h4 {
  border-top-color: var(--hairline, rgba(80,140,255,.14));
}

/* ── 分隔线 ── */
.kb-hr {
  margin: 30px 0; border: none; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.12), transparent);
}

/* 阅读列宽度：正文 / 列表 / 分隔线 / 章引文统一为整宽 1080px，
   与整宽左对齐的 h3/h4 及满宽图表/代码/表格同宽，形成一致的全宽阅读栏，
   消除“正文提前折行 / 与标题左缘不齐”的错位感。 */
.kb-paragraph,
.kb-list,
.kb-hr,
.kp-dt-intro {
  max-width: 1080px;
  margin-left: 0;
  margin-right: auto;
  text-wrap: pretty;
}
.kb-h3,
.kb-h4 {
  max-width: 1080px;
  margin-left: 0;
  margin-right: auto;
  text-wrap: pretty;
}

/* ── 表格 ── */
.kb-table-wrap {
  position: relative;
  margin: 8px 0 26px; overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(37,99,235,.08);
  background: rgba(255,255,255,.35);
}
/* 对比视图徽标：让多列对比表一眼被识别为「对比」形态 */
.kb-table-badge {
  display: inline-block; margin: 10px 0 4px 14px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .5px; color: var(--brand);
  padding: 3px 10px; border-radius: 999px;
  background: rgba(37,99,235,.1);
}
html[data-theme="dark"] .kb-table-badge { background: rgba(96,165,250,.16); color: #93c5fd; }
html[data-theme="dark"] .kb-table-wrap {
  background: var(--surface-1);
  border-color: var(--hairline);
}
.kb-table {
  width: 100%; border-collapse: collapse;
  font-size: clamp(13.5px, 1vw, 15px); line-height: 1.55;
}
.kb-table th {
  font-weight: 700; background: rgba(37,99,235,.04);
  padding: 12px 16px; text-align: left; white-space: nowrap;
  color: var(--text); border-bottom: 2px solid rgba(37,99,235,.15);
}
html[data-theme="dark"] .kb-table th {
  background: rgba(96,165,250,.1);
  border-bottom-color: rgba(96,165,250,.3);
}
.kb-table td {
  padding: 12px 16px; color: var(--text-2);
  border-bottom: 1px solid rgba(37,99,235,.04);
  line-height: 1.85;
  white-space: pre-line;
  vertical-align: top;
}
html[data-theme="dark"] .kb-table td {
  border-bottom-color: var(--hairline);
}
.kb-table tr:last-child td { border-bottom: none; }
/* 表格单元格内联代码 */
.kb-table code {
  font-family: var(--font-mono, 'Cascadia Code', 'Fira Code', monospace);
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(37,99,235,.09);
  color: var(--text);
}
html[data-theme="dark"] .kb-table code {
  background: rgba(96,165,250,.14);
  color: var(--text);
}
/* 斑马纹 + 行悬停高亮，提升长表格扫读效率 */
.kb-table tbody tr:nth-child(even) td { background: rgba(37,99,235,.025); }
html[data-theme="dark"] .kb-table tbody tr:nth-child(even) td { background: rgba(96,165,250,.045); }
.kb-table tbody tr { transition: background .18s ease; }
.kb-table tbody tr:hover td { background: rgba(37,99,235,.06); }
html[data-theme="dark"] .kb-table tbody tr:hover td { background: rgba(96,165,250,.09); }

/* 对比视图增强（PM 视角）：
   ① 首列固定为「维度列」sticky，横向滚动时始终可见上下文；
   ② 含「推荐/首选」等关键词的列高亮为结论列，读者一眼锁定答案。
   规则置于斑马纹/悬停之后，保证同特异性下以本规则为准。 */
.kb-table th.kb-th-dim,
.kb-table td.kb-th-dim {
  position: sticky; left: 0; z-index: 3;
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 10%, var(--bg-soft));
}
.kb-table thead th.kb-th-dim { background: color-mix(in srgb, var(--mod-color, var(--brand)) 16%, var(--bg-soft)); }
.kb-table tbody tr td.kb-th-dim {
  font-weight: 800; color: var(--text);
  border-left: 3px solid var(--mod-color, var(--brand));
}
html[data-theme="dark"] .kb-table th.kb-th-dim,
html[data-theme="dark"] .kb-table td.kb-th-dim { background: color-mix(in srgb, var(--mod-color, var(--brand)) 18%, var(--surface-2)); }
html[data-theme="dark"] .kb-table thead th.kb-th-dim { background: color-mix(in srgb, var(--mod-color, var(--brand)) 26%, var(--surface-2)); }

.kb-table tbody tr td.kb-td-rec { background: rgba(37,99,235,.07); }
.kb-table thead .kb-th-rec {
  background: rgba(37,99,235,.14); color: var(--brand); position: relative;
}
.kb-table thead .kb-th-rec::after {
  content: '推荐'; display: block; margin-top: 2px;
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .5px; color: var(--brand);
}
html[data-theme="dark"] .kb-table tbody tr td.kb-td-rec { background: rgba(96,165,250,.1); }
html[data-theme="dark"] .kb-table thead .kb-th-rec { background: rgba(96,165,250,.22); color: #93c5fd; }
html[data-theme="dark"] .kb-table thead .kb-th-rec::after { color: #93c5fd; }

/* 热度/优先级列：用可读文字标签替代 emoji */
.kb-table th.kb-th-heat,
.kb-table td.kb-th-heat { text-align: center; white-space: nowrap; }
.kb-prio {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 3px 9px; border-radius: 999px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .3px;
  border: 1px solid transparent;
}
.kb-prio-high { color: #b45309; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); }
.kb-prio-daily { color: #047857; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.32); }
.kb-prio-none { color: var(--text-3); background: rgba(120,140,180,.08); border-color: rgba(120,140,180,.18); }
html[data-theme="dark"] .kb-prio-high { color: #fbbf24; background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.45); }
html[data-theme="dark"] .kb-prio-daily { color: #34d399; background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.4); }
html[data-theme="dark"] .kb-prio-none { color: var(--text-3); background: rgba(120,140,180,.14); border-color: rgba(120,140,180,.28); }

/* ── 代码块 ── */
.kb-code {
  margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(10,22,40,.05);
  border: 1px solid rgba(37,99,235,.08);
  overflow-x: auto;
  overflow-y: auto;
  max-height: 320px;
}
.kb-code.oversized {
  max-height: 480px;
}
html[data-theme="dark"] .kb-code {
  background: var(--surface-3);
  border-color: var(--hairline);
}
.kb-code pre {
  margin: 0; padding: 14px 16px;
  font-family: var(--font-mono, 'Cascadia Code', 'Fira Code', monospace);
  font-size: clamp(13px, 1vw, 14px); line-height: 1.55;
  color: var(--text-2);
  tab-size: 2;
}

/* ── ASCII 图表组件（内容感知：非代码的框线图 → 图表卡片，而非 IDE 编辑器） ── */
.kb-diagram {
  margin: 14px 0 20px;
  border-radius: var(--radius-md, 16px);
  background: var(--card, #ffffff);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.kb-diagram::before {
  content: ''; display: block; height: 3px;
  background: var(--mod-color, var(--brand));
}
html[data-theme="dark"] .kb-diagram {
  background: var(--surface-2);
  border-color: var(--hairline);
  box-shadow: var(--shadow);
}
.kb-diagram pre {
  margin: 0; padding: 18px 20px;
  font-family: var(--font-mono, 'Cascadia Code', 'Fira Code', monospace);
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.75;
  letter-spacing: .2px;
  color: var(--text-2);
  white-space: pre;
  overflow-x: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
/* 框线图字符加粗，提升辨识度 */
.kb-diagram pre code {
  font-weight: 600;
}
/* 示意图图题栏：统一为卡片头部，不再使用半透明渐变补丁 */
.kb-fig-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 6%, var(--card));
  border-bottom: 1px solid var(--card-border);
}
html[data-theme="dark"] .kb-fig-bar {
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 10%, var(--surface-2));
  border-bottom-color: var(--hairline);
}
.kb-fig-ic {
  width: 20px; height: 20px; display: grid; place-items: center;
  color: var(--mod-color, var(--brand));
}
.kb-fig-ic svg { width: 16px; height: 16px; }
.kb-diagram-copy {
  margin-left: auto;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-3);
  background: var(--card);
  border: 1px solid var(--card-border);
  padding: 4px 12px; border-radius: 8px;
  cursor: pointer; transition: .25s;
}
.kb-diagram-copy:hover {
  color: var(--mod-color, var(--brand));
  border-color: color-mix(in srgb, var(--mod-color, var(--brand)) 45%, var(--card-border));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--mod-color, var(--brand)) 12%, transparent);
}
html[data-theme="dark"] .kb-diagram-copy {
  background: var(--surface-3);
  border-color: var(--hairline);
  color: var(--text-3);
}
html[data-theme="dark"] .kb-diagram-copy:hover {
  color: var(--mod-color, var(--brand));
  border-color: var(--border-glow);
  background: var(--surface-2);
}

/* ── 结构化示意图：$19 服务卡片网格 ── */
.kb-diagram-structured { overflow: visible; }
.kb-diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 18px;
}
.kb-diag-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 4%, var(--card));
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 12%, var(--card-border));
  transition: transform .25s ease, box-shadow .25s ease;
}
.kb-diag-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--mod-color, var(--brand)) 10%, transparent);
}
html[data-theme="dark"] .kb-diag-card {
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 8%, var(--surface-3));
  border-color: var(--hairline);
}
.kb-diag-card-head {
  display: flex; align-items: center; justify-content: space-between;
}
.kb-diag-sid {
  font-family: var(--font-mono);
  font-size: var(--fs-sm); font-weight: 800;
  color: var(--mod-color, var(--brand));
}
.kb-diag-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .3px;
  border: 1px solid transparent;
}
.kb-diag-tag-daily { color: #047857; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.32); }
.kb-diag-tag-trouble { color: #b45309; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); }
.kb-diag-tag-all { color: #1d4ed8; background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.3); }
.kb-diag-tag-note { color: var(--text-3); background: rgba(120,140,180,.08); border-color: rgba(120,140,180,.18); }
html[data-theme="dark"] .kb-diag-tag-daily { color: #34d399; background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.4); }
html[data-theme="dark"] .kb-diag-tag-trouble { color: #fbbf24; background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.45); }
html[data-theme="dark"] .kb-diag-tag-all { color: #93c5fd; background: rgba(37,99,235,.22); border-color: rgba(37,99,235,.45); }
html[data-theme="dark"] .kb-diag-tag-note { color: var(--text-3); background: rgba(120,140,180,.14); border-color: rgba(120,140,180,.28); }
.kb-diag-card-title {
  font-size: var(--fs-md); font-weight: 700; color: var(--text);
  line-height: 1.45;
}
.kb-diag-card-q {
  font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55;
}

/* ── 位图可视化：DTC 状态字节 ── */
.kb-bitfield {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 18px 18px 10px;
}
.kb-bit-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--card-border);
  background: var(--card);
  min-width: 0;
}
.kb-bit-cell.on {
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 10%, var(--card));
  border-color: color-mix(in srgb, var(--mod-color, var(--brand)) 35%, var(--card-border));
}
html[data-theme="dark"] .kb-bit-cell { background: var(--surface-3); border-color: var(--hairline); }
html[data-theme="dark"] .kb-bit-cell.on {
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 18%, var(--surface-3));
  border-color: var(--border-glow);
}
.kb-bit-num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); font-weight: 800;
  color: var(--text-3);
}
.kb-bit-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.kb-bit-desc {
  font-size: var(--fs-2xs); color: var(--text-3); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-bitfield-legend {
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px 18px;
  font-size: var(--fs-xs); color: var(--text-3);
}
.kb-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  margin-left: 6px;
}
.kb-legend-dot.on { background: color-mix(in srgb, var(--mod-color, var(--brand)) 45%, var(--card)); border: 1px solid var(--mod-color, var(--brand)); }
.kb-legend-dot.off { background: var(--card); border: 1px solid var(--card-border); }
html[data-theme="dark"] .kb-legend-dot.on { background: color-mix(in srgb, var(--mod-color, var(--brand)) 55%, var(--surface-3)); }
html[data-theme="dark"] .kb-legend-dot.off { background: var(--surface-3); }

@media (max-width: 980px) {
  .kb-diag-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); padding: 14px; }
  .kb-bitfield { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .kb-diag-grid { grid-template-columns: 1fr; }
  .kb-bitfield { grid-template-columns: repeat(2, 1fr); }
}

/* ── 列表 ── */
.kb-list {
  margin: 0 0 24px; padding: 0 0 0 22px; list-style: none;
}
.kb-list li {
  font-size: clamp(14.5px, 1.05vw, 16px); color: var(--text-2); line-height: 1.88;
  padding: 8px 0; position: relative;
}
.kb-list-ul li::before {
  content: ''; position: absolute; left: -16px; top: 15px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand, #2563eb); opacity: .6;
}
.kb-list-ol { list-style: decimal; padding-left: 24px; }

/* ── 引用块（多风格） ── */
.kb-blockquote {
  margin-bottom: 24px; padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid rgba(37,99,235,.1);
  box-shadow: 0 6px 20px rgba(37,99,235,.05);
  font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.9;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.kb-blockquote .kb-bq-label {
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  margin-bottom: 8px; opacity: .9;
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(37,99,235,.1); color: var(--brand);
}
.kb-blockquote .kb-bq-body {
  color: var(--text-2);
  white-space: pre-wrap;
}

/* 面试说 — 金色边框 */
.kb-bq-interview {
  background: rgba(245,158,11,.06);
  border-left: 3px solid rgba(245,158,11,.45);
}
html[data-theme="dark"] .kb-bq-interview {
  background: rgba(245,158,11,.08);
}
.kb-bq-interview .kb-bq-label { color: #d97706; }

/* 承上启下 — 蓝色渐变 */
.kb-bq-承接 {
  background: rgba(37,99,235,.05);
  border-left: 3px solid rgba(37,99,235,.35);
}
html[data-theme="dark"] .kb-bq-承接 {
  background: rgba(37,99,235,.08);
}
.kb-bq-承接 .kb-bq-label { color: #2563eb; }

/* 核心理念 — 紫色 */
.kb-bq-concept {
  background: rgba(139,92,246,.06);
  border-left: 3px solid rgba(139,92,246,.4);
}
html[data-theme="dark"] .kb-bq-concept {
  background: rgba(139,92,246,.08);
}
.kb-bq-concept .kb-bq-label { color: #7c3aed; }

/* 警告 — 红色 */
.kb-bq-warn {
  background: rgba(239,68,68,.06);
  border-left: 3px solid rgba(239,68,68,.4);
}
html[data-theme="dark"] .kb-bq-warn {
  background: rgba(239,68,68,.08);
}
.kb-bq-warn .kb-bq-label { color: #dc2626; }

/* 阶段性回顾 — 绿色 */
.kb-bq-review {
  background: rgba(16,185,129,.06);
  border-left: 3px solid rgba(16,185,129,.35);
  border: 1px dashed rgba(16,185,129,.25);
}
html[data-theme="dark"] .kb-bq-review {
  background: rgba(16,185,129,.06);
}
.kb-bq-review .kb-bq-label { color: #059669; }

/* 默认 — 灰色 */
.kb-bq-default {
  background: rgba(37,99,235,.03);
  border-left: 3px solid rgba(37,99,235,.2);
}

/* 动手实验 — 青绿色，鼓励动手 */
.kb-bq-lab {
  background: rgba(16,185,129,.06);
  border-left: 3px solid rgba(16,185,129,.45);
}
html[data-theme="dark"] .kb-bq-lab {
  background: rgba(16,185,129,.08);
}
.kb-bq-lab .kb-bq-label { color: #059669; }

/* ========== 浮动滚动按钮（回到顶部 / 滚动到底部） ========== */
.chapter-float-actions {
  position: fixed; bottom: 32px; left: 28px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; visibility: hidden;
  transform: translateY(24px);
  transition: all .4s cubic-bezier(.16,1,.3,1);
}
.chapter-float-actions.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.chapter-float-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: none; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(37,99,235,.14);
  outline: 1px solid rgba(37,99,235,.04);
  box-shadow: 0 6px 20px rgba(37,99,235,.1), inset 0 1px 0 rgba(255,255,255,.65);
  color: var(--brand);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease, opacity .3s ease;
}
.chapter-float-btn.visible { display: grid; }
.chapter-float-btn:hover {
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 10px 28px rgba(37,99,235,.18);
}
.chapter-float-btn:active { transform: translateY(0) scale(.98); }
.chapter-float-btn svg { width: 20px; height: 20px; }
html[data-theme="dark"] .chapter-float-btn {
  background: var(--surface-2);
  border-color: var(--hairline-strong);
  box-shadow: var(--elev-glow);
  color: #60a5fa;
}
html[data-theme="dark"] .chapter-float-btn:hover {
  border-color: rgba(96,165,250,.55);
  box-shadow: 0 10px 28px rgba(96,165,250,.22);
}

/* ========== Banner ========== */
.chapter-banner {
  position: relative; height: 340px; overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 50%, #0a1628) 100%);
}
.chapter-banner .banner-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .55; }
.chapter-banner .banner-gradient { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.30) 40%, rgba(0,0,0,.72) 100%); }
.chapter-banner .banner-cover-art { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; opacity: .28; pointer-events: none; }
.chapter-banner .banner-cover-art svg { width: 64%; height: 92%; }
.chapter-banner .banner-inner { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 32px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 56px; }
.chapter-banner .banner-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.chapter-banner .banner-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .3px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.92); background: rgba(255,255,255,.08); }
.chapter-banner .banner-badge.core { background: linear-gradient(135deg, rgba(245,158,11,.5), rgba(239,68,68,.45)); border-color: rgba(245,158,11,.5); }
.chapter-banner .banner-title { font-size: clamp(28px, 4vw, 46px); font-weight: var(--fw-bold, 800); color: #fff; line-height: 1.2; margin-bottom: 14px; text-shadow: 0 2px 16px rgba(0,0,0,.35); letter-spacing: .5px; max-width: 800px; }
.chapter-banner .banner-desc { font-size: var(--fs-h4); color: rgba(255,255,255,.78); max-width: 680px; line-height: 1.75; margin-bottom: 20px; }
.chapter-banner .banner-meta { display: flex; gap: 24px; flex-wrap: wrap; }
.chapter-banner .banner-meta-item { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); color: rgba(255,255,255,.7); font-weight: 600; }
.chapter-banner .banner-meta-item .meta-icon { width: 20px; height: 20px; opacity: .8; }

/* ========== 上下章导航 ========== */
.chapter-nav {
  max-width: 1100px; margin: 0 auto; padding: 0 32px 40px;
  position: relative; z-index: 1;
}
.cnav-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(37,99,235,.1);
  box-shadow: 0 4px 20px rgba(37,99,235,.05);
}
html[data-theme="dark"] .cnav-inner {
  background: var(--surface-2);
  border-color: var(--hairline);
  box-shadow: var(--shadow), var(--glass-inset);
}
.cnav-link {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 26px;
  text-decoration: none; color: var(--text);
  transition: all .3s cubic-bezier(.16,1,.3,1);
  flex: 1; min-width: 0;
}
.cnav-link:hover {
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 6%, transparent);
  transform: translateY(-2px);
}
html[data-theme="dark"] .cnav-link:hover {
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 10%, transparent);
}
.cnav-prev { justify-content: flex-start; }
.cnav-next { justify-content: flex-end; text-align: right; }
.cnav-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cnav-arrow {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: var(--fs-h3); font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--mod-color, var(--brand)), color-mix(in srgb, var(--mod-color, var(--brand)) 60%, #06b6d4));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--mod-color, var(--brand)) 30%, transparent);
}
.cnav-disabled .cnav-arrow { background: var(--text-3); box-shadow: none; }
.cnav-label { font-size: var(--fs-2xs); font-weight: 800; color: var(--text-3); letter-spacing: .8px; text-transform: uppercase; }
.cnav-title { font-size: var(--fs-h4); font-weight: 800; color: var(--text); line-height: 1.35; }
.cnav-disabled { opacity: .45; cursor: default; pointer-events: none; }
.cnav-spacer { flex: 0 0 1px; align-self: stretch; margin: 18px 0; background: var(--card-border); }
html[data-theme="dark"] .cnav-spacer { background: var(--hairline); }
@media (max-width: 680px) {
  .cnav-link { padding: 16px 18px; gap: 12px; }
  .cnav-arrow { width: 34px; height: 34px; font-size: var(--fs-body); }
  .cnav-title { font-size: var(--fs-md); }
}

/* ========== 响应式断点 ========== */
@media (min-width: 1400px) {
  .kp-section { padding: 80px 48px 120px; }
  .kp-row { gap: 20px; }
  .kp-detail-inner { padding: 44px 52px 100px; max-width: 1080px; margin: 0 auto; }
  .chapter-nav, .chapter-banner .banner-inner { max-width: 1300px; padding: 0 48px; }
  .cnav-inner { padding: 24px 32px; }
}
@media (max-width: 820px) {
  .kp-row { gap: 14px; }
}
@media (max-width: 680px) {
  .chapter-banner { height: 300px; }
  .chapter-banner .banner-inner { padding-bottom: 52px; }
  .chapter-banner .banner-title { font-size: var(--fs-mono-lg); }
  .kp-section { padding: 40px 16px 80px; }
  .kp-row { gap: 12px; }
  .kp-thumb { width: clamp(144px, 30vw, 176px); }
  .kp-thumb { padding: 16px 10px; }
  .kp-detail-inner { padding: 24px 22px 64px; }
  .chapter-float-actions { bottom: 20px; left: 16px; gap: 8px; }
  .chapter-float-btn { width: 40px; height: 40px; }
  .chapter-float-btn svg { width: 18px; height: 18px; }
}
@media (max-width: 480px) {
  .kp-row { gap: 10px; }
  .kp-thumb { width: calc(50% - 5px); }
  .kp-thumb { padding: 14px 8px; border-radius: 14px; }
  .kp-thumb .kp-tn-num { min-width: 36px; height: 36px; font-size: var(--fs-mono-sm); }
  .kp-thumb .kp-tn-title { display: block; width: 100%; text-align: center; font-size: clamp(12px, 3.5vw, 13px); line-height: 1.5; max-height: 3.1em; }
  .chapter-nav { padding: 0 12px 24px; }
  .cnav-inner { padding: 14px 12px; gap: 10px; flex-wrap: wrap; }
  .cnav-link { padding: 8px 12px; }
  .cnav-title { font-size: var(--fs-xs); }
  .cnav-spacer { display: none; }
}

/* ============================================================
   增强组件：编辑器风格代码块 (IDE skin) + 图形化流程图
   落地自 UI Design 原型 chapter-detail-flowcode，沿用项目真实 token
   ============================================================ */

/* ---------- 编辑器风格代码块 (IDE skin) ---------- */
.code-editor {
  margin: 12px 0 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: #111827;  /* 中性深色底，取消模块色 tint，避免与蓝/青文字冲突 */
  box-shadow: 0 10px 30px rgba(8, 15, 35, .18);
}
[data-theme="dark"] .code-editor {
  background: #0b1222;  /* 暗色下略沉，保持中性 */
  border-color: var(--hairline);
  box-shadow: var(--shadow);
}
.ce-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ce-dots { display: flex; gap: 7px; }
.ce-dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.ce-dots i:nth-child(1) { background: #ff5f56; }
.ce-dots i:nth-child(2) { background: #ffbd2e; }
.ce-dots i:nth-child(3) { background: #27c93f; }
.ce-tab {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 600; color: #cbd5e1;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  padding: 4px 12px; border-radius: 8px;
}
.ce-lang {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .5px; color: #60a5fa;
  margin-left: 2px; padding: 3px 10px; border-radius: 999px;
  background: rgba(37,99,235,.18); border: 1px solid rgba(80,140,255,.25);
}
.ce-copy {
  margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: #60a5fa;
  background: rgba(80,140,255,.14); border: 1px solid rgba(80,140,255,.3);
  padding: 5px 13px; border-radius: 8px; cursor: pointer; transition: .25s;
  display: flex; align-items: center; gap: 6px;
}
.ce-copy:hover { background: rgba(80,140,255,.26); }
.ce-copy.done { color: #22c55e; border-color: #22c55e; background: rgba(34,197,94,.12); }
.ce-body {
  display: flex; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.65;
  overflow: auto; max-height: 380px;
}
.ce-gutter {
  padding: 14px 0; text-align: right; color: #5b6b8c;
  background: rgba(0,0,0,.22); user-select: none;
  border-right: 1px solid rgba(255,255,255,.05); min-width: 46px;
}
.ce-gutter span { display: block; padding: 0 12px; font-size: var(--fs-xs); }
.ce-gutter span.active { background: rgba(80,140,255,.12); color: #cbd5e1; }
.ce-code { padding: 14px 16px; flex: 1; white-space: pre; color: #cbd5e1; tab-size: 2; }
.ce-code .ln { display: block; padding: 0 2px; border-radius: 4px; transition: background .2s; }
.ce-code .ln:hover { background: rgba(255,255,255,.04); }
/* 语法高亮 token（编辑器暗底，走 --code-* 变量，双主题自适应 · 文档 §一） */
:root{
  --code-key:#d8b4fe; --code-str:#6ee7b7; --code-num:#fcd34d;
  --code-com:#94a3b8; --code-fn:#7dd3fc; --code-punc:#a1a1aa;
}
[data-theme="dark"] {
  --code-key:#e9d5ff; --code-str:#86efac; --code-num:#fde047;
  --code-com:#9ca3af; --code-fn:#93c5fd; --code-punc:#b4b4b4;
}
.tok-key { color: var(--code-key); font-weight: 600; }
.tok-str { color: var(--code-str); }
.tok-num { color: var(--code-num); }
.tok-com { color: var(--code-com); font-style: italic; }
.tok-fn  { color: var(--code-fn); }
.tok-punc{ color: var(--code-punc); }

/* ---------- 图形化流程图 (SVG flow) ---------- */
.flow-wrap {
  margin: 12px 0 18px; border-radius: 16px;
  border: 1px solid rgba(37,99,235,.12);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(37,99,235,.05), transparent 60%),
    rgba(255,255,255,.5);
  padding: 18px; box-shadow: 0 10px 30px rgba(37,99,235,.06); overflow: hidden;
  position: relative;
}
/* 流程图「坐标纸」底纹：营造工程制图语境，且不干扰内容层级 */
.flow-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 120% at 50% 0%, #000 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 40%, transparent 75%);
}
.flow-wrap > * { position: relative; z-index: 1; }
[data-theme="dark"] .flow-wrap {
  border-color: var(--hairline);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(96,165,250,.08), transparent 60%),
    var(--surface-2);
  box-shadow: var(--shadow), var(--glass-inset);
}
.flow-wrap .flow-cap {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); margin-bottom: 10px;
}
.flow-wrap .flow-cap .ic {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-size: var(--fs-xs); color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
/* 流程图图例：解释 yes/no/supply 连线颜色含义（内容模块形态级增强） */
.flow-legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px; }
.fl-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-2); }
.fl-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.fl-dot-base { background: var(--brand); }
.fl-dot-yes { background: #22c55e; }
.fl-dot-no { background: #f59e0b; }
.fl-dot-supply { background: var(--text-3); }
[data-theme="dark"] .fl-dot-base { background: #60a5fa; }
.flow-svg { width: 100%; height: auto; max-width: 760px; display: block; overflow: visible; margin: 0 auto; }
.flow-svg .fn-rect { fill: rgba(255,255,255,.92); stroke: rgba(37,99,235,.14); stroke-width: 1.5; }
.flow-svg .fn-accent .fn-rect {
  stroke: var(--brand); stroke-width: 2.5;
  filter: drop-shadow(0 0 10px rgba(37,99,235,.4));
}
.flow-svg .fn-decision .fn-rect { stroke-dasharray: 5 4; }
.flow-svg .fn-start .fn-rect,
.flow-svg .fn-end .fn-rect {
  fill: rgba(37,99,235,.1); stroke: rgba(37,99,235,.4);
}
.flow-svg .fn-end.warn .fn-rect { fill: rgba(245,158,11,.14); stroke: rgba(245,158,11,.5); }
.flow-svg .fn-title { fill: var(--text); font-weight: 800; font-size: var(--fs-xs); font-family: var(--font-sans); }
.flow-svg .fn-title-with-stage { font-weight: 800; }
.flow-svg .fn-sub { fill: var(--text-2); font-size: var(--fs-2xs); font-family: var(--font-sans); font-weight: 600; }
.flow-svg .fn-icon { font-size: var(--fs-xs); }
.flow-svg .fn-stage-bg { fill: color-mix(in srgb, var(--mod-color, var(--brand)) 18%, var(--card-border)); }
.flow-svg .fn-stage-num { fill: var(--mod-color, var(--brand)); font-size: 9px; font-weight: 900; font-family: var(--font-mono); }
html[data-theme="dark"] .flow-svg .fn-stage-bg { fill: color-mix(in srgb, var(--mod-color, var(--brand)) 25%, var(--surface-3)); }
html[data-theme="dark"] .flow-svg .fn-stage-num { fill: #93c5fd; }
.flow-svg .fn-node {
  opacity: 0; transform: scale(.92); transform-box: fill-box; transform-origin: center;
  animation: nodeIn .5s cubic-bezier(.16,1,.3,1) forwards;
  cursor: pointer; transition: opacity .25s;
}
@keyframes nodeIn { to { opacity: 1; transform: scale(1); } }
/* 连线 */
.flow-svg .fn-edge-base { fill: none; stroke: rgba(37,99,235,.18); stroke-width: 2; }
.flow-svg .fn-edge-flow {
  fill: none; stroke: var(--brand); stroke-width: 2.4;
  stroke-dasharray: 7 11; stroke-linecap: round;
  animation: flowMove 1.1s linear infinite; marker-end: url(#arrowA);
}
.flow-svg .fn-edge.yes .fn-edge-flow { stroke: #22c55e; marker-end: url(#arrowYes); }
.flow-svg .fn-edge.no  .fn-edge-flow { stroke: #f59e0b; marker-end: url(#arrowNo); }
.flow-svg .fn-edge.supply .fn-edge-flow { stroke: var(--text-3); stroke-dasharray: 3 9; animation-duration: 1.6s; marker-end: url(#arrowMute); }
/* 箭头标记（主题自适应，填充色由 CSS 控制） */
#arrowA path { fill: var(--brand); }
#arrowYes path { fill: #22c55e; }
#arrowNo path { fill: #f59e0b; }
#arrowMute path { fill: var(--text-3); }
[data-theme="dark"] .flow-svg .fn-edge-flow { stroke: #60a5fa; }
[data-theme="dark"] #arrowA path { fill: #60a5fa; }
@keyframes flowMove { to { stroke-dashoffset: -36; } }
.flow-svg .fn-edge-label { font-size: var(--fs-3xs); font-weight: 700; fill: var(--text-2); font-family: var(--font-sans); }
.flow-svg .fn-edge-label-bg { fill: rgba(255,255,255,.92); stroke: rgba(37,99,235,.14); }
[data-theme="dark"] .flow-svg .fn-edge-label-bg { fill: var(--surface-3); stroke: var(--hairline); }
[data-theme="dark"] .flow-svg .fn-rect { fill: var(--surface-2); stroke: var(--hairline); }
[data-theme="dark"] .flow-svg .fn-start .fn-rect { fill: rgba(37,99,235,.16); stroke: rgba(96,165,250,.5); }
[data-theme="dark"] .flow-svg .fn-end .fn-rect { fill: rgba(245,158,11,.16); stroke: rgba(245,158,11,.55); }
[data-theme="dark"] .flow-svg .fn-end.warn .fn-rect { fill: rgba(245,158,11,.22); stroke: rgba(245,158,11,.6); }
/* 悬停联动 */
.flow-svg.hovering .fn-node { opacity: .32; }
.flow-svg.hovering .fn-edge-base,
.flow-svg.hovering .fn-edge-flow { opacity: .18; }
.flow-svg.hovering .fn-node.hot { opacity: 1; }
.flow-svg.hovering .fn-edge.hot .fn-edge-base,
.flow-svg.hovering .fn-edge.hot .fn-edge-flow { opacity: 1; }
.flow-svg .fn-edge { transition: opacity .25s; }
/* 节点悬停强调（与 JS 高亮联动互补，纯 CSS 也生效） */
.flow-svg .fn-node { cursor: pointer; }
.flow-svg .fn-node:hover .fn-rect { stroke: var(--brand); stroke-width: 2.6; filter: drop-shadow(0 0 8px rgba(37,99,235,.35)); }
.flow-svg .fn-node:hover .fn-title { fill: var(--brand); }
.flow-svg .fn-node:hover { opacity: 1 !important; }

/* 小屏适配：流程图保持可读（窄屏横向滚动）、代码块字号收敛 */
@media (max-width: 680px) {
  .ce-gutter { min-width: 38px; }
  .ce-body { font-size: var(--fs-xs); }
  .flow-svg { max-width: none; min-width: 460px; width: 460px; }
  .flow-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .flow-wrap .flow-cap { font-size: var(--fs-2xs); }
}

/* ============================================================
   内容感知组件 0：章节知识全景（垂直卡片式总结）
   替代拥挤的 ASCII 框线图：编号节点 + 时间线 + 核心内容 + 延伸结论
   ============================================================ */
.kb-summary {
  margin: 16px 0 24px;
  border: 1px solid var(--card-border, rgba(37,99,235,.14));
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(20,40,80,.07));
  overflow: hidden;
}
.kb-summary-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 18px;
  font-size: var(--fs-sm); font-weight: 800; color: var(--text-2);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--mod-color, var(--brand)) 14%, transparent),
    transparent 70%);
  border-bottom: 1px solid var(--card-border, rgba(37,99,235,.10));
}
.kb-summary-ic svg { width: 19px; height: 19px; color: var(--mod-color, var(--brand)); flex: 0 0 auto; }
.kb-summary-title { letter-spacing: .3px; }
.kb-summary-count {
  margin-left: auto;
  font-size: var(--fs-xs); font-weight: 800; color: var(--mod-color, var(--brand));
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 12%, transparent);
  padding: 3px 11px; border-radius: 999px;
}
.kb-summary-body { display: flex; flex-direction: column; padding: 8px 0; }
.ks-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 18px;
  position: relative;
  opacity: 0; transform: translateX(-8px);
  animation: ksIn .45s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: background .2s ease;
}
@keyframes ksIn { to { opacity: 1; transform: translateX(0); } }
/* 时间线：贯穿所有编号节点 */
.ks-row::before {
  content: "";
  position: absolute; left: 28px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mod-color, var(--brand)) 32%, transparent),
    color-mix(in srgb, var(--mod-color, var(--brand)) 6%, transparent));
  z-index: 0;
}
.ks-row:first-child::before { top: 24px; }
.ks-row:last-child::before { bottom: calc(100% - 24px); }
.ks-num {
  flex: 0 0 auto;
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 800; color: #fff;
  background: linear-gradient(135deg,
    var(--mod-color, var(--brand)),
    color-mix(in srgb, var(--mod-color, var(--brand)) 68%, #0b1220));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--mod-color, var(--brand)) 38%, transparent);
  margin-top: 1px;
  transition: transform .2s ease;
}
.ks-row:hover .ks-num { transform: scale(1.1); }
.ks-main { flex: 1 1 auto; min-width: 0; }
.ks-topic {
  font-size: var(--fs-md); font-weight: 800; color: var(--mod-color, var(--brand));
  line-height: 1.4; margin-bottom: 5px; word-break: break-word;
}
.ks-body { display: flex; flex-direction: column; gap: 4px; }
.ks-core { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.5; }
.ks-note { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; }
.ks-row:hover { background: color-mix(in srgb, var(--mod-color, var(--brand)) 5%, transparent); }
html[data-theme="dark"] .kb-summary {
  background: var(--surface-2, #1b2330);
  border-color: rgba(96,165,250,.20);
}
@media (max-width: 680px) {
  .kb-summary { border-radius: 14px; }
  .kb-summary-head { padding: 12px 14px; }
  .ks-row { gap: 10px; padding: 11px 14px; }
  .ks-row::before { left: 24px; }
  .ks-row:first-child::before { top: 21px; }
  .ks-row:last-child::before { bottom: calc(100% - 21px); }
  .ks-num { width: 20px; height: 20px; font-size: var(--fs-2xs); }
  .ks-topic { font-size: var(--fs-sm); margin-bottom: 4px; }
  .ks-core { font-size: var(--fs-sm); }
  .ks-note { font-size: var(--fs-xs); }
}

/* ============================================================
   内容感知组件 ①：学习进阶 · 横向连接步骤流 (.learn-path)
   由 detectCodeVariant 识别「路线图/进阶」文本后渲染
   编号节点 + 连接箭头串联，明确体现“由浅入深、逐级递进”
   （横向排列，超出则横向滚动，避免多行换行打断递进感）
   ============================================================ */
.learn-path-block { margin: 16px 0 24px; }
.lp-summary {
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-3); margin-bottom: 12px; letter-spacing: .3px;
}
.learn-path {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 8px 4px 18px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.learn-path::-webkit-scrollbar { height: 8px; }
.learn-path::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 32%, transparent);
  border-radius: 8px;
}
.lp-step {
  flex: 0 0 clamp(200px, 30vw, 236px);
  position: relative;
  display: flex;
  flex-direction: column;
  padding-right: 34px;            /* 连接线/箭头留白 */
  scroll-snap-align: start;
  opacity: 0;
  transform: translateY(10px);
  animation: lpIn .5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes lpIn { to { opacity: 1; transform: translateY(0); } }

/* 连接线：本节点右侧 → 下一步节点，体现“递进”方向 */
.lp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;                      /* 与节点圆心对齐（节点 44px） */
  left: 46px;                     /* 节点右缘之后起笔 */
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--mod-color, var(--brand)),
    color-mix(in srgb, var(--mod-color, var(--brand)) 32%, transparent));
  z-index: 0;
}
/* 箭头：指向“下一步” */
.lp-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 21px;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid color-mix(in srgb, var(--mod-color, var(--brand)) 60%, transparent);
  z-index: 1;
}

/* 编号节点：模块色实心圆，立于步骤顶部 */
.lp-node {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-h4); font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg,
    var(--mod-color, var(--brand)),
    color-mix(in srgb, var(--mod-color, var(--brand)) 58%, #000));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--mod-color, var(--brand)) 30%, transparent);
  position: relative; z-index: 1;
}
[data-theme="dark"] .lp-node {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mod-color, var(--brand)) 92%, #000),
    color-mix(in srgb, var(--mod-color, var(--brand)) 48%, #000));
}

/* 内容卡：节点下方，承载标题/子标题/标签 */
.lp-card {
  margin-top: 12px;
  background: rgba(255,255,255,.62);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 16%, var(--card-border));
  border-radius: 14px;
  padding: 12px 14px 14px;
  box-shadow: 0 6px 18px rgba(24,144,255,.05);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.lp-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--mod-color, var(--brand)) 40%, transparent);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--mod-color, var(--brand)) 14%, transparent);
}
[data-theme="dark"] .lp-card {
  background: var(--surface-2);
  border-color: var(--hairline);
  box-shadow: var(--shadow), var(--glass-inset);
}
.lp-title { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 700; color: var(--text); line-height: 1.35; }
.lp-sub { margin-top: 3px; font-size: var(--fs-xs); font-weight: 600; color: var(--mod-color, var(--brand)); }
.lp-meta { margin-top: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-tag {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .3px;
  color: var(--mod-color, var(--brand));
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 30%, transparent);
  padding: 3px 10px; border-radius: 999px;
}
.lp-note { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.55; }

/* ============================================================
   内容感知组件 ②：CAN 差分信号图 (.sig-can-diff)
   由 detectCodeVariant 识别 CAN_H/CAN_L + 电压 + 隐性/显性 后渲染
   SVG 内联于 renderCanDiffHTML；此处定义容器与图形 token
   ============================================================ */
.signal-diagram {
  margin: 14px 0 20px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 14%, var(--card-border));
  background:
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--mod-color, var(--brand)) 6%, transparent) 0%, transparent 60%),
    rgba(255,255,255,.55);
  padding: 16px 16px 10px;
  box-shadow: 0 10px 30px rgba(24,144,255,.06);
  overflow: hidden;
}
[data-theme="dark"] .signal-diagram {
  border-color: var(--hairline);
  background:
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--mod-color, var(--brand)) 10%, transparent) 0%, transparent 60%),
    var(--surface-2);
  box-shadow: var(--shadow), var(--glass-inset);
}
.signal-diagram .sd-title { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--text); margin-bottom: 8px; }
.signal-diagram svg { width: 100%; height: auto; display: block; overflow: visible; }

/* 参考线 + 隐性/显性过渡分隔 (虚线) */
.sig-can-diff .sd-ref { stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 1; stroke-dasharray: 4 5; }
.sig-can-diff .sd-ref-label { fill: var(--text-3); font-size: var(--fs-xs); font-family: var(--font-sans); }
.sig-can-diff .sd-trans { stroke: color-mix(in srgb, var(--text) 16%, transparent); stroke-width: 1; stroke-dasharray: 3 6; }

/* 状态文字标签（隐性/显性） */
.sig-can-diff .sd-state { fill: var(--text); font-size: var(--fs-sm); font-weight: 800; font-family: var(--font-sans); }

/* 波形：绿=CAN_H，蓝=CAN_L；持续流动动效 */
.sig-can-diff .sd-wave {
  fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 9 12;
  animation: flowMove 1.15s linear infinite;
}
.sig-can-diff .sd-h { stroke: #22c55e; }
.sig-can-diff .sd-l { stroke: #3b82f6; }

/* 波形标注文字 */
.sig-can-diff .sd-label { fill: var(--text); font-size: var(--fs-sm); font-weight: 800; font-family: var(--font-sans); }
.sig-can-diff .sd-vlabel { fill: var(--text-3); font-size: var(--fs-2xs); font-family: var(--font-sans); }
.sig-can-diff .sd-sum { fill: var(--text-2); font-size: var(--fs-2xs); font-weight: 600; font-family: var(--font-sans); }

/* 小屏适配：学习进阶保持横向步骤流（收窄步宽，横向滚动），连接线随节点尺寸微调 */
@media (max-width: 680px) {
  .lp-step { flex-basis: 76vw; padding-right: 28px; }
  .lp-node { width: 40px; height: 40px; font-size: var(--fs-body); }
  .lp-step:not(:last-child)::after { top: 19px; left: 42px; }
  .lp-step:not(:last-child)::before { top: 13px; right: 17px; }
  .lp-title { font-size: var(--fs-md); }
  .lp-note { font-size: var(--fs-2xs); }
  .signal-diagram { padding: 14px 10px 8px; }
}

/* ============================================================
   内容感知组件 ②a+：示波器波形诊断 (.oscilloscope-wrap)
   ============================================================ */
.oscilloscope-wrap {
  margin: 14px 0 20px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 14%, var(--card-border));
  background:
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--mod-color, var(--brand)) 6%, transparent) 0%, transparent 60%),
    rgba(255,255,255,.55);
  padding: 14px 14px 18px;
  box-shadow: 0 10px 30px rgba(24,144,255,.06);
  overflow: hidden;
}
[data-theme="dark"] .oscilloscope-wrap {
  border-color: var(--hairline);
  background:
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--mod-color, var(--brand)) 10%, transparent) 0%, transparent 60%),
    var(--surface-2);
  box-shadow: var(--shadow), var(--glass-inset);
}
.osc-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 800;
  color: var(--text); margin-bottom: 12px;
}
.osc-head .ic { font-size: var(--fs-body); }
.osc-screens {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
.osc-screen { display: flex; flex-direction: column; gap: 8px; }
.osc-screen-title {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700; color: var(--text);
}
.osc-screen svg { width: 100%; height: auto; display: block; overflow: visible; }
.osc-bg {
  fill: #0b1220;
  stroke: color-mix(in srgb, var(--mod-color, var(--brand)) 40%, transparent);
  stroke-width: 1.5;
}
.osc-grid { stroke: rgba(255,255,255,.10); stroke-width: 1; }
.osc-axis { stroke: rgba(255,255,255,.22); stroke-width: 1.2; stroke-dasharray: 4 5; }
.osc-trace { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.osc-trace-h { stroke: #4ade80; filter: drop-shadow(0 0 2px rgba(74,222,128,.35)); }
.osc-trace-l { stroke: #60a5fa; filter: drop-shadow(0 0 2px rgba(96,165,250,.35)); }
.osc-trace-label { font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 800; }
.osc-trace-label-h { fill: #4ade80; }
.osc-trace-label-l { fill: #60a5fa; }
.osc-note { fill: var(--text-2); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; }

@media (max-width: 680px) {
  .osc-screens { grid-template-columns: 1fr; }
  .oscilloscope-wrap { padding: 12px 10px 14px; }
}

/* ============================================================
   内容感知组件 ③：三代 E/E 架构演进 (.ee-evolution)
   显式 type:"ee-evolution" 渲染；3 张原子化主卡 + 拓扑可视化 + 3 种微动效
   沿用项目真实 token / 玻璃材质 / cubic-bezier(.16,1,.3,1) 缓动
   ============================================================ */
.ee-evolution {
  margin: 16px 0 22px;
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* ── 主卡：原子化结构（Header / Visual / Highlight / Footer） ── */
.ee-card {
  --accent: #2563eb;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--card-border));
  border-top: 3px solid var(--accent);
  box-shadow: 0 8px 24px rgba(24,144,255,.05), inset 0 1px 0 rgba(255,255,255,.6);
  opacity: 1;                      /* 基态：可见，便于 hover 降透明度生效 */
  transform: translateY(0);
  animation: eeCardIn .6s cubic-bezier(.16,1,.3,1) backwards;   /* 入场 Sequence Stagger（backwards：结束后交还基态，hover 可覆盖） */
  animation-delay: calc(var(--i, 0) * 150ms);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .3s, opacity .3s;
  cursor: pointer;
}
@keyframes eeCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="dark"] .ee-card {
  background: var(--surface-2);
  border-color: var(--hairline);
  box-shadow: var(--shadow), var(--glass-inset);
}

/* 微动效 ③：Hover / 点击 pin —— 微放大 + 发光；其余卡降 20% 透明度 */
.ee-card:hover,
.ee-card.ee-pin {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 22%, transparent),
              0 6px 16px rgba(0,0,0,.06),
              inset 0 1px 0 rgba(255,255,255,.7);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.ee-evolution:hover .ee-card:not(:hover):not(.ee-pin) { opacity: .8; }
.ee-evolution:has(.ee-pin) .ee-card:not(.ee-pin) { opacity: .8; }

/* ── Header：阶段 Badge + 阶段标签 + 架构名 Title ── */
.ee-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ee-badge {
  align-self: flex-start;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .5px;
  padding: 4px 11px; border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.ee-stage { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .5px; align-self: flex-start; padding: 3px 10px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.ee-title { font-size: clamp(17px, 1.4vw, 20px); font-weight: 800; color: var(--text); line-height: 1.3; margin: 0; }

/* ── Visual：按 kind 渲染不同拓扑 ── */
.ee-visual { flex: 1 1 auto; }

/* 第一代 · 分布式 ECU 散点（各自为政） */
.ee-nodes { display: flex; flex-wrap: wrap; gap: 8px; }
.ee-node {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px; border-radius: 11px; text-align: center;
  background: color-mix(in srgb, var(--accent) 8%, rgba(255,255,255,.5));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  opacity: 1; transform: translateY(0) scale(1);
  animation: eeNodeIn .45s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(.15s + var(--j, 0) * 55ms);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ee-node-l { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 800; color: var(--text); }
.ee-node-s { font-size: var(--fs-2xs); color: var(--text-3); }
.ee-node:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 18%, transparent); }
@keyframes eeNodeIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
html[data-theme="dark"] .ee-node { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* 第二代 · 域集中（树状：域控 → 子项） */
.ee-domains { display: flex; flex-direction: column; gap: 9px; }
.ee-domain {
  padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,.45));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-left: 3px solid var(--accent);
  opacity: 1; transform: translateX(0);
  animation: eeDomainIn .45s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(.15s + var(--j, 0) * 80ms);
  transition: background .2s, border-color .2s, transform .2s;
}
.ee-domain:hover { background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.5)); border-color: color-mix(in srgb, var(--accent) 36%, transparent); }
.ee-domain-name { font-size: var(--fs-sm); font-weight: 800; color: var(--text); margin-bottom: 7px; }
.ee-ditems { display: flex; flex-wrap: wrap; gap: 6px; }
.ee-ditem {
  font-size: var(--fs-2xs); font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  padding: 3px 9px; border-radius: 8px;
  transition: transform .2s, background .2s;
}
.ee-domain:hover .ee-ditem { background: color-mix(in srgb, var(--accent) 20%, transparent); }
@keyframes eeDomainIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
html[data-theme="dark"] .ee-domain { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* 第三代 · 中央计算 + Zonal（拓扑：VCC 汇聚 → Zone 展开） */
.ee-zonal { display: flex; flex-direction: column; gap: 14px; }
.ee-vcc {
  padding: 12px; border-radius: 14px; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border: 1.5px solid var(--accent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 20%, transparent);
  opacity: 1; transform: translateY(0) scale(1);
  animation: eeNodeIn .5s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .15s;
  transition: box-shadow .25s, border-color .25s, transform .25s;
}
.ee-vcc-name { font-size: var(--fs-md); font-weight: 800; color: var(--text); margin-bottom: 8px; }
.ee-vcc .ee-ditems { justify-content: center; }
.ee-zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.ee-zone {
  padding: 10px; border-radius: 11px; text-align: center;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
  background: color-mix(in srgb, var(--accent) 7%, rgba(255,255,255,.5));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  opacity: 1; transform: scale(1);
  animation: eeZoneIn .45s cubic-bezier(.16,1,.3,1) both;   /* Zone1~4 展开收拢动效 */
  animation-delay: calc(.35s + var(--j, 0) * 70ms);
  transition: transform .2s, border-color .2s, color .2s, background .2s;
  cursor: pointer;
}
@keyframes eeZoneIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
html[data-theme="dark"] .ee-zone { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* 互动：:has() 双向联动 —— 悬停 VCC 高亮全部 Zone；悬停某 Zone 高亮 VCC 且其余 Zone 降透明度 */
.ee-zonal:has(.ee-zone:hover) .ee-vcc { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 32%, transparent); }
.ee-zonal:has(.ee-vcc:hover) .ee-zone { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.5)); }
.ee-zonal:has(.ee-zone:hover) .ee-zone:not(:hover) { opacity: .45; }
.ee-zone:hover { transform: translateY(-2px) scale(1.03); border-color: var(--accent); color: var(--accent); }

/* ── Highlight Tag：亮点高亮 Badge（绿色收益，浮现） ── */
.ee-highlight {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .3px; color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: 1px solid rgba(34,197,94,.6);
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(34,197,94,.4);
  animation: eeFloat 2.6s ease-in-out infinite;
}
@keyframes eeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* 痛点 / 中性标签 */
.ee-pain {
  align-self: flex-start; margin-top: 10px;
  font-size: var(--fs-xs); font-weight: 700; color: #dc2626;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.35);
  padding: 5px 11px; border-radius: 999px;
}
.ee-chip {
  align-self: flex-start; margin-top: 10px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 5px 11px; border-radius: 999px;
}

/* ── Footer：代表车型 & 时代标签（Meta Info） ── */
.ee-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--accent) 22%, transparent); display: flex; flex-direction: column; gap: 5px; }
.ee-foot-row { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.ee-foot-ic { font-size: var(--fs-md); }
.ee-foot-era { font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: .3px; }

/* ── 连接箭头（演进脉冲 / 线束聚合流动） ── */
.ee-arrow { flex: 0 0 auto; width: 38px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.ee-arrow svg { width: 100%; height: 60px; overflow: visible; }
.ee-arrow-line { stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 7 9; stroke-linecap: round; animation: eeFlow 1.1s linear infinite; }
.ee-arrow-head { fill: var(--brand); }
@keyframes eeFlow { to { stroke-dashoffset: -32; } }
html[data-theme="dark"] .ee-arrow-line { stroke: #60a5fa; }
html[data-theme="dark"] .ee-arrow-head { fill: #60a5fa; }

/* ── 文字版演进速览（动效之后清晰可读，便于快速理解主线） ── */
.ee-summary {
  margin: 18px 0 4px; padding: 16px 18px;
  display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
  border-radius: 16px; border: 1px solid var(--card-border);
  background: var(--bg-soft);
}
.ee-sum-item {
  flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px;
  padding: 4px 6px; position: relative;
}
.ee-sum-item + .ee-sum-item { border-left: 1px dashed color-mix(in srgb, var(--accent, var(--brand)) 24%, transparent); padding-left: 16px; }
.ee-sum-phase { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .5px; color: var(--accent, var(--brand)); }
.ee-sum-title { font-size: var(--fs-body); font-weight: 800; color: var(--text); line-height: 1.3; }
.ee-sum-meta { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.5; }
.ee-sum-arrow { align-self: center; color: var(--text-3); font-size: var(--fs-h4); font-weight: 700; flex: 0 0 auto; }
.ee-summary-legend { width: 100%; flex-basis: 100%; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

/* ── 响应式：窄屏三卡竖排，箭头转为向下 ── */
@media (max-width: 680px) {
  .ee-evolution { flex-direction: column; }
  .ee-arrow { width: 100%; height: 34px; }
  .ee-arrow svg { transform: rotate(90deg); height: 34px; width: 34px; }
  .ee-card { animation-delay: calc(var(--i, 0) * 90ms); }
  .ee-sum-item + .ee-sum-item { border-left: none; padding-left: 6px; border-top: 1px dashed color-mix(in srgb, var(--accent, var(--brand)) 24%, transparent); padding-top: 10px; margin-top: 4px; }
}

/* 尊重「减少动态效果」系统偏好 */
@media (prefers-reduced-motion: reduce) {
  .lp-step { animation: none; opacity: 1; transform: none; }
  .sig-can-diff .sd-wave { animation: none; }
  .ee-card, .ee-node, .ee-domain, .ee-vcc, .ee-zone { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ee-arrow-line, .ee-highlight { animation: none; }
}

/* ============================================================
   内容感知组件 ②b：网络拓扑示意图 (.topo-wrap)
   由 detectCodeVariant 识别 总线型/星型/环形/混合型 + ECU/CAN 后渲染
   2x2 网格卡片，SVG 内联于 renderTopologyHTML
   ============================================================ */
.topo-wrap {
  margin: 14px 0 20px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 14%, var(--card-border));
  background:
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--mod-color, var(--brand)) 6%, transparent) 0%, transparent 60%),
    rgba(255,255,255,.55);
  padding: 16px 18px 20px;
  box-shadow: 0 10px 30px rgba(24,144,255,.06);
  overflow: hidden;
}
html[data-theme="dark"] .topo-wrap {
  border-color: var(--hairline);
  background:
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--mod-color, var(--brand)) 10%, transparent) 0%, transparent 60%),
    var(--surface-2);
  box-shadow: var(--shadow), var(--glass-inset);
}
.topo-head {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-md); font-weight: 800; color: var(--text);
  margin-bottom: 14px;
}
.topo-head .ic {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: var(--fs-md);
}
.topo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.topo-card {
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 12%, var(--card-border));
  background: rgba(255,255,255,.7);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.topo-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--mod-color, var(--brand)) 35%, var(--card-border));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--mod-color, var(--brand)) 12%, transparent);
}
html[data-theme="dark"] .topo-card { background: var(--surface-1); border-color: var(--hairline); }
.topo-title { font-size: var(--fs-sm); font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 6px; }
.topo-title::before {
  content: ''; width: 8px; height: 8px; border-radius: 2px;
  background: var(--mod-color, var(--brand));
}
.topo-card svg { width: 100%; height: auto; max-height: 150px; display: block; }
.topo-notes { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.65; }
.topo-notes li { padding-left: 14px; position: relative; }
.topo-notes li::before { content: '•'; position: absolute; left: 2px; color: var(--mod-color, var(--brand)); font-weight: 700; }

/* SVG tokens */
.topo-line { stroke: var(--mod-color, var(--brand)); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.topo-node { fill: color-mix(in srgb, var(--mod-color, var(--brand)) 8%, rgba(255,255,255,.75)); stroke: var(--mod-color, var(--brand)); stroke-width: 1.5; }
.topo-node-fill { fill: var(--mod-color, var(--brand)); }
.topo-text { fill: var(--text); font-size: var(--fs-3xs); font-weight: 700; font-family: var(--font-sans); text-anchor: middle; }
.topo-text-inverse { fill: #fff; font-size: var(--fs-3xs); font-weight: 700; font-family: var(--font-sans); text-anchor: middle; }
.topo-label { fill: var(--text-2); font-size: var(--fs-3xs); font-family: var(--font-sans); text-anchor: middle; }
.topo-term { fill: var(--text-2); font-size: var(--fs-3xs); font-family: var(--font-sans); }
html[data-theme="dark"] .topo-line { stroke: #60a5fa; }
html[data-theme="dark"] .topo-node { fill: var(--surface-2); stroke: #60a5fa; }
html[data-theme="dark"] .topo-node-fill { fill: #3b82f6; }

/* ============================================================
   内容感知组件 ②c：流程拓扑图 (.topo-flow-wrap)
   显式 type:"topology" kind:"flow" 渲染，如中控 IVI 车控链路
   ============================================================ */
.topo-flow-wrap {
  margin: 14px 0 20px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 14%, var(--card-border));
  background:
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--mod-color, var(--brand)) 6%, transparent) 0%, transparent 60%),
    rgba(255,255,255,.55);
  padding: 16px 18px 20px;
  box-shadow: 0 10px 30px rgba(24,144,255,.06);
  overflow: hidden;
}
html[data-theme="dark"] .topo-flow-wrap {
  border-color: var(--hairline);
  background:
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--mod-color, var(--brand)) 10%, transparent) 0%, transparent 60%),
    var(--surface-2);
  box-shadow: var(--shadow), var(--glass-inset);
}
.topo-flow-head {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-md); font-weight: 800; color: var(--text);
  margin-bottom: 14px;
}
.topo-flow-head .ic {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: var(--fs-md);
}
.topo-flow-svg { width: 100%; height: auto; display: block; min-height: 320px; }
.topo-flow-box {
  fill: color-mix(in srgb, var(--mod-color, var(--brand)) 6%, rgba(255,255,255,.7));
  stroke: var(--mod-color, var(--brand)); stroke-width: 1.4;
}
html[data-theme="dark"] .topo-flow-box { fill: color-mix(in srgb, var(--mod-color, var(--brand)) 10%, var(--surface-1)); }
.topo-flow-layer-head { fill: color-mix(in srgb, var(--mod-color, var(--brand)) 14%, transparent); }
.topo-flow-layer-title { fill: var(--text); font-size: var(--fs-xs); font-weight: 800; font-family: var(--font-sans); }
.topo-flow-item { fill: var(--text-2); font-size: var(--fs-2xs); font-weight: 600; font-family: var(--font-sans); }
.topo-flow-arrow { stroke: var(--mod-color, var(--brand)); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.topo-flow-arrow-head { fill: var(--mod-color, var(--brand)); }
.topo-flow-edge-label { fill: var(--text-2); font-size: var(--fs-3xs); font-weight: 700; font-family: var(--font-sans); }
.topo-flow-feedback-label { fill: var(--text); font-size: var(--fs-xs); font-weight: 800; font-family: var(--font-sans); }
.topo-flow-fb-box {
  fill: color-mix(in srgb, var(--mod-color, var(--brand)) 10%, rgba(255,255,255,.6));
  stroke: color-mix(in srgb, var(--mod-color, var(--brand)) 30%, var(--card-border)); stroke-width: 1.2;
}
html[data-theme="dark"] .topo-flow-fb-box { fill: color-mix(in srgb, var(--mod-color, var(--brand)) 14%, var(--surface-3)); }
.topo-flow-fb-title { fill: var(--text); font-size: var(--fs-2xs); font-weight: 700; font-family: var(--font-sans); }
.topo-flow-fb-sub { fill: var(--text-3); font-size: var(--fs-3xs); font-weight: 600; font-family: var(--font-sans); }

/* 响应式：窄屏 */
@media (max-width: 720px) {
  .topo-grid { grid-template-columns: 1fr; }
  .topo-wrap { padding: 14px 14px 18px; }
  .topo-flow-wrap { padding: 14px 12px 18px; }
  .kb-case { padding: 13px 14px; }
  .kb-case-title { font-size: var(--fs-md); }
  .kb-case-step-text { font-size: var(--fs-sm); }
}

/* ===== P0 交互增强：代码块折叠 / 示意图复制 ===== */
.ce-fold {
  font-size: var(--fs-xs); font-weight: 600; color: #60a5fa;
  background: rgba(80,140,255,.14); border: 1px solid rgba(80,140,255,.3);
  padding: 5px 13px; border-radius: 8px; cursor: pointer; transition: .25s;
}
.ce-fold:hover { background: rgba(80,140,255,.26); }
.code-editor.collapsed .ce-body {
  max-height: 300px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.code-editor.collapsed .ce-body::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42px;
  background: linear-gradient(180deg, transparent, rgba(11,16,32,.92));
  pointer-events: none;
}
/* ── 界面截图 / 示意图（矢量 SVG 仿界面，image 内容块）── */
.kb-image {
  margin: 18px 0 26px;
  border-radius: var(--radius-md, 16px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mod-color, var(--brand)) 5%, transparent), transparent 42%),
    rgba(255,255,255,.55);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 14%, var(--card-border));
  border-left: 3px solid var(--mod-color, var(--brand));
  overflow: hidden;
}
html[data-theme="dark"] .kb-image {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mod-color, var(--brand)) 8%, transparent), transparent 42%),
    var(--surface-2);
  border-color: var(--hairline);
  box-shadow: var(--shadow), var(--glass-inset);
}
.kb-image-img {
  display: block;
  width: 100%;
  height: auto;
  background: #0e1116; /* 工具界面多为深色 UI，提前铺底避免加载时闪烁 */
}
/* 懒加载占位：未加载时预留最小高度，确保屏外图片真正处于视口下方（否则高度塌缩会让所有图都挤进首屏，懒加载失效） */
.kb-image-img.is-lazy {
  min-height: 240px;
}
.kb-image-cap {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
  background: color-mix(in srgb, var(--mod-color, var(--brand)) 7%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 16%, transparent);
}
.kb-image-ic { width: 18px; height: 18px; display: grid; place-items: center; color: var(--mod-color, var(--brand)); }
.kb-image-ic svg { width: 18px; height: 18px; }

/* 较小的界面截图：宽度 70% 并居中，避免大对话框占满整栏 */
.kb-image-img.kb-image-sm {
  width: 70%;
  max-width: 560px;
  margin: 0 auto;
}

/* 图片点击放大预览（lightbox） */
.kb-image-img { cursor: zoom-in; }
.kb-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px; box-sizing: border-box;
  background: rgba(8,11,20,.88);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.kb-lightbox.open { display: flex; animation: kb-lb-fade .16s ease; }
@keyframes kb-lb-fade { from { opacity: 0 } to { opacity: 1 } }
.kb-lightbox-img {
  max-width: 92vw; max-height: 80vh; width: auto; height: auto;
  object-fit: contain; border-radius: 10px;
  background: #0e1116; box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.kb-lightbox-cap {
  max-width: 92vw; color: #d7dde8; font-size: var(--fs-sm); text-align: center;
}
.kb-lightbox-close {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  transition: background .15s;
}
.kb-lightbox-close:hover { background: rgba(255,255,255,.24); }
.kb-lightbox-close svg { width: 20px; height: 20px; }

/* ── 分层数据流图（导航：定位层 → 计算层 → 交互层）── */
.kb-navflow {
  margin: 14px 0 20px;
  border-radius: var(--radius-md, 16px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mod-color, var(--brand)) 5%, transparent), transparent 42%),
    rgba(255,255,255,.55);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 14%, var(--card-border));
  border-left: 3px solid var(--mod-color, var(--brand));
  overflow: hidden;
}
html[data-theme="dark"] .kb-navflow {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mod-color, var(--brand)) 8%, transparent), transparent 42%),
    var(--surface-2);
  border-color: var(--hairline);
}
.kb-navflow .nf-body {
  display: flex; align-items: stretch; gap: 12px;
  padding: 18px 16px 16px;
  position: relative;
}
.nf-layer {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.nf-layer-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.nf-layer-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-2xs); font-weight: 900; color: #fff;
  background: var(--mod-color, var(--brand));
  font-family: var(--font-mono);
}
.nf-layer-title {
  font-size: var(--fs-body); font-weight: 800; color: var(--text);
}
.nf-layer-body {
  display: flex; flex-direction: column; gap: 8px;
}
.nf-item {
  background: rgba(255,255,255,.65);
  border: 1px solid color-mix(in srgb, var(--mod-color, var(--brand)) 16%, var(--card-border));
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(24,144,255,.04);
}
html[data-theme="dark"] .nf-item {
  background: rgba(255,255,255,.06);
  border-color: var(--hairline);
}
.nf-item-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text); line-height: 1.4; }
.nf-item-sub { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.45; }
.nf-arrow {
  flex: none; width: 24px; align-self: center;
  color: color-mix(in srgb, var(--mod-color, var(--brand)) 70%, var(--text-3));
}
.nf-arrow svg { width: 100%; height: auto; display: block; }
.nf-foot {
  padding: 10px 16px 14px; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6;
  border-top: 1px dashed color-mix(in srgb, var(--mod-color, var(--brand)) 16%, var(--card-border));
}
@media (max-width: 720px) {
  .kb-navflow .nf-body { flex-direction: column; }
  .nf-arrow { width: 32px; transform: rotate(90deg); margin: 4px 0; }
}

/* ===== 章节目录（TOC）锚点 ===== */
.kp-layout {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr);  /* 单栏：正文始终占满整行，与顶部导航/底部总结同宽，宽度恒定不抖动 */
  align-items: start;
}
.kp-main { min-width: 0; }
/* TOC 改为浮于右侧的固定侧栏：脱离文档流，目录显隐不再挤动正文列宽 → 消除滚动抖动 */
.kp-toc {
  position: fixed; top: 84px;
  /* 锚定到居中正文块(1440)右缘外侧的留白区：超宽屏完全不遮挡正文 */
  right: max(16px, calc((100vw - 1440px) / 2 - 236px));
  width: 220px;
  max-height: calc(100vh - 110px); overflow-y: auto;
  padding: 14px 12px; border-radius: 14px;
  background: var(--chip, rgba(120,140,180,.08));
  border: 1px solid var(--card-border);
  z-index: 20;
}
/* 滚动协调：顶部“知识点导航”缩略图行可见时隐藏右侧目录（避免重复展示） */
.kp-toc.toc-hidden { display: none; }
.toc-head {
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-2);
  padding: 2px 8px 10px; letter-spacing: .5px;
}
.toc-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--text-2); font-size: var(--fs-sm); font-family: var(--font-sans);
  transition: .2s;
}
.toc-item:hover { background: rgba(80,140,255,.1); color: var(--text); }
/* 点击选中态：目录只保留这一种强选中效果，避免与 visited 态叠加造成"多种选中" */
.toc-item.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.toc-item.active .toc-num { background: rgba(255,255,255,.22); color: #fff; }
.toc-item.active .toc-title { color: #fff; }
.toc-num {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: 800;
  background: rgba(120,140,180,.18); color: var(--text-2);
}
.toc-title { line-height: 1.35; }

/* 窄屏：目录收起，布局回退单栏 */
@media (max-width: 980px) {
  .kp-layout { grid-template-columns: 1fr; }
  .kp-toc { display: none; }
}
/* 中屏（981–1912）：视口不足以把 TOC 放进右侧留白区，TOC 会落入正文块右缘内（重叠区）。
   把右侧避让空间放到 .kp-main / .kp-summary / .chapter-nav 上，而不是 .kp-section，
   这样顶部知识点导航行（.kp-row）和章节头保持居中，正文/总结/底部切换始终恒定不抖动。
   同时补一点左侧内边距，让正文区在"左侧页边 ↔ TOC"之间更趋水平居中，并缩小与 TOC 的间距。
   （≥1913 由 right 公式自动把 TOC 落到正文块右缘外侧，无需预留；≤980 目录已隐藏） */
@media (min-width: 981px) and (max-width: 1912px) {
  /* TOC 固定停靠在视口右侧 16px，占最右 236px（16+220）；预留 240px 确保正文/总结/章末导航始终不被遮挡 */
  .kp-main { padding-right: 240px; padding-left: 24px; }
  .kp-summary { padding-right: 240px; padding-left: 24px; }
  .chapter-nav { padding-right: 240px; padding-left: 24px; }
}

/* ===== 缺陷/案例库：五段式 Bug 卡片（现象→根因→复现→定位→修复）===== */
.kb-case {
  margin: 16px 0; padding: 16px 18px; border-radius: 14px;
  background: var(--chip, rgba(120,140,180,.06));
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--brand);
}
.kb-case.sev-crit { border-left-color: #ef4444; }
.kb-case.sev-warn { border-left-color: #f59e0b; }
.kb-case.sev-low  { border-left-color: #10b981; }
.kb-case-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kb-case-title { font-size: var(--fs-body); font-weight: 800; color: var(--text); }
.kb-case-sev {
  flex: none; font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: rgba(120,140,180,.16); color: var(--text-2);
}
.kb-case.sev-crit .kb-case-sev { background: rgba(239,68,68,.16); color: #f87171; }
.kb-case.sev-warn .kb-case-sev { background: rgba(245,158,11,.16); color: #fbbf24; }
.kb-case.sev-low  .kb-case-sev { background: rgba(16,185,129,.16); color: #34d399; }
.kb-case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.kb-case-tag { font-size: var(--fs-2xs); color: var(--text-3); background: rgba(120,140,180,.12); padding: 2px 8px; border-radius: 6px; }
.kb-case-body { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }
.kb-case-step { display: flex; gap: 12px; align-items: flex-start; }
.kb-case-ic {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 16%, transparent); font-size: var(--fs-md);
}
.kb-case-step-body { min-width: 0; }
.kb-case-step-label { display: block; font-size: var(--fs-xs); font-weight: 800; color: var(--brand); letter-spacing: .3px; }
.kb-case-step-text { margin: 3px 0 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2); white-space: pre-wrap; }

/* 暗黑模式：缺陷案例卡片层次提升（避免与背景糊在一起） */
html[data-theme="dark"] .kb-case {
  background: var(--surface-1);
  border-color: var(--hairline-strong);
}
html[data-theme="dark"] .kb-case-step-ic {
  background: color-mix(in srgb, var(--brand) 26%, transparent);
}

/* ============================================================
   仿真组件（sim 块）— 交互式知识点模拟
   P0 合规：描边 SVG 图标 / 无紫粉渐变 / 无弹跳缓动
   ============================================================ */
.kb-sim {
  margin: 22px 0 8px; padding: 20px 20px 22px; border-radius: 18px;
  background: color-mix(in srgb, var(--mod-color, #2563eb) 6%, var(--surface-1, #fff));
  border: 1px solid color-mix(in srgb, var(--mod-color, #2563eb) 22%, var(--hairline, #e6e8ef));
  position: relative; overflow: hidden;
}
.kb-sim-head { display: flex; align-items: center; gap: 11px; margin-bottom: 5px; }
.kb-sim-head .sim-ic {
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--mod-color, #2563eb) 14%, transparent); color: var(--mod-color, #2563eb);
}
.kb-sim-head .sim-ic .ui-ic { width: 18px; height: 18px; }
.kb-sim-title { font-size: var(--fs-h4); font-weight: 800; color: var(--text-1, #1b2330); letter-spacing: .2px; }
.kb-sim-cap { font-size: var(--fs-sm); color: var(--text-3, #8a93a6); margin: 3px 0 16px; line-height: 1.55; }

.kb-sim-body { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 22px; align-items: start; }
.kb-sim-body > .sim-out { min-width: 0; }
@media (max-width: 760px) { .kb-sim-body { grid-template-columns: 1fr; } }

.sim-ctl, .sim-out { display: flex; flex-direction: column; }
.sim-field { margin-bottom: 14px; }
.sim-field > label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-xs); color: var(--text-3, #8a93a6); margin-bottom: 6px; line-height: 1.4; }
.sim-field > label b { color: var(--mod-color, #2563eb); font-variant-numeric: tabular-nums; font-size: var(--fs-md); font-weight: 700; }
.sim-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--mod-color, #2563eb) 22%, var(--hairline, #e6e8ef)); outline: none; }
.sim-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--mod-color, #2563eb); border: 3px solid var(--surface-1, #fff); box-shadow: 0 1px 5px rgba(20,30,60,.22); cursor: pointer; margin-top: -6px; }
.sim-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--mod-color, #2563eb); border: 3px solid var(--surface-1, #fff); cursor: pointer; }
.sim-select, .sim-num {
  width: 100%; padding: 9px 11px; border-radius: 10px; font-size: var(--fs-md); color: var(--text-1, #1b2330);
  background: var(--surface-2, #f4f6fb); border: 1px solid var(--hairline, #e6e8ef);
}
.sim-toggle { display: flex; gap: 8px; }
.sim-toggle button {
  flex: 1; padding: 9px 8px; border-radius: 10px; font-size: var(--fs-sm); cursor: pointer; font-weight: 700;
  background: var(--surface-2, #f4f6fb); border: 1px solid var(--hairline, #e6e8ef); color: var(--text-2, #5b6577);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sim-toggle button.on { background: color-mix(in srgb, var(--mod-color, #2563eb) 14%, transparent); border-color: var(--mod-color, #2563eb); color: var(--mod-color, #2563eb); }

.sim-readout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 6px; }
.sim-readout .ro { background: var(--surface-2, #f4f6fb); border: 1px solid var(--hairline, #e6e8ef); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; justify-content: center; min-height: 62px; }
.sim-readout .ro span { display: block; font-size: var(--fs-xs); color: var(--text-3, #8a93a6); margin-bottom: 3px; }
.sim-readout .ro b { font-size: var(--fs-h3); color: var(--text-1, #1b2330); font-variant-numeric: tabular-nums; font-weight: 800; }
.sim-readout .ro b small { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; margin-left: 3px; }

/* 位时序条 */
.sim-bitbar { display: flex; height: 56px; border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline, #e6e8ef); }
.sim-bitbar > div { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--fs-xs); color: #fff; font-weight: 700; position: relative; padding: 0 6px; text-align: center; line-height: 1.25; }
.sim-bitbar .bb-sync { background: #64748b; }
.sim-bitbar .bb-t1 { background: var(--mod-color, #2563eb); }
.sim-bitbar .bb-t2 { background: #0ea5e9; }
.sim-bitbar .bb-mark { position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: #f59e0b; }

/* 帧结构 */
.sim-frame { display: flex; height: 72px; border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline, #e6e8ef); margin-bottom: 12px; }
.sim-frame .fr-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 14px; padding: 4px 2px; color: #fff; text-align: center; line-height: 1.25; position: relative; }
.sim-frame .fr-seg-name { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sim-frame .fr-seg-bits { font-size: var(--fs-3xs); opacity: .85; font-weight: 500; }
.sim-frame .fr-seg.narrow .fr-seg-bits { display: none; }
.sim-frame .fr-seg.tiny .fr-seg-name,
.sim-frame .fr-seg.tiny .fr-seg-bits { display: none; }
.fr-seg-0 { background: #475569; }
.fr-seg-1 { background: #2563eb; }
.fr-seg-2 { background: #0ea5e9; }
.fr-seg-3 { background: #059669; }
.fr-seg-4 { background: #b45309; }
.fr-seg-5 { background: #dc2626; }
.fr-seg-6 { background: #0891b2; }
.fr-seg-7 { background: #4f46e5; }
.fr-seg-8 { background: #0d9488; }
.fr-seg-9 { background: #0284c7; }
.fr-c-0 { background: #475569; }
.fr-c-1 { background: #2563eb; }
.fr-c-2 { background: #0ea5e9; }
.fr-c-3 { background: #059669; }
.fr-c-4 { background: #b45309; }
.fr-c-5 { background: #dc2626; }
.fr-c-6 { background: #0891b2; }
.fr-c-7 { background: #4f46e5; }
.fr-c-8 { background: #0d9488; }
.fr-c-9 { background: #0284c7; }
.sim-frame-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 12px; font-size: var(--fs-xs); color: var(--text-2, #5b6577); margin-bottom: 12px; }
.sim-frame-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; flex: none; }
.sim-frame-legend span { display: inline-flex; align-items: center; }

/* 线与/仲裁 */
.sim-lanes { display: grid; gap: 10px; }
.sim-lane { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; }
.sim-lane .ln-label { font-size: var(--fs-xs); color: var(--text-2, #5b6577); font-weight: 700; }
.sim-lane .ln-track { height: 42px; border-radius: 10px; position: relative; overflow: hidden; display: flex; align-items: center; }
.sim-lane .ln-track.dom { background: color-mix(in srgb, var(--mod-color,#2563eb) 14%, var(--surface-2,#f4f6fb)); }
.sim-lane .ln-track.dom::before { content: ''; position: absolute; inset: 5px 0; background: var(--mod-color,#2563eb); border-radius: 8px; }
.sim-lane .ln-track.rec { background: var(--surface-2,#f4f6fb); border: 1px dashed var(--hairline,#d1d5db); }
.sim-lane .ln-track.rec::before { content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 0; border-top: 2px dashed #94a3b8; transform: translateY(-50%); }
.sim-lane .ln-text { position: relative; z-index: 1; padding-left: 14px; font-size: var(--fs-sm); font-weight: 700; color: #fff; white-space: nowrap; }
.sim-lane .ln-track.rec .ln-text { color: #64748b; }
.sim-lane.bus .ln-track.dom::before { background: #0f172a; }
.sim-verdict { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2, #5b6577); background: var(--surface-2, #f4f6fb); border: 1px solid var(--hairline, #e6e8ef); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.sim-verdict b { color: var(--mod-color, #2563eb); }
.sim-arb { margin-top: 14px; }
.sim-arb .sim-field { margin-bottom: 10px; }
.sim-arb-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sim-arb-row .sim-num { width: auto; min-width: 120px; flex: 1; }

/* 仪表（半圆） */
.sim-gauge { width: 100%; max-width: 240px; margin: 0 auto; }
.sim-gauge .g-needle { transition: transform .25s ease; transform-box: view-box; transform-origin: 100px 100px; }
.sim-gauge .g-val { font-size: var(--fs-mono-lg); font-weight: 800; fill: var(--text-1, #1b2330); }

/* CANoe 面板 */
.sim-canoe { display: grid; grid-template-columns: 140px 1fr; gap: 14px; }
@media (max-width: 760px) { .sim-canoe { grid-template-columns: 1fr; } }
.sim-nodes { display: flex; flex-direction: column; gap: 8px; }
.sim-node { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2,#5b6577); background: var(--surface-2,#f4f6fb); border: 1px solid var(--hairline,#e6e8ef); border-radius: 10px; padding: 8px 10px; }
.sim-node .dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; flex: none; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.sim-node.off .dot { background: #94a3b8; box-shadow: none; }
.sim-trace { background: #0f172a; border-radius: 12px; padding: 10px 12px; height: 200px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-2xs); color: #cbd5e1; display: flex; flex-direction: column; gap: 3px; }
.sim-trace .tr { display: grid; grid-template-columns: 58px 70px 34px 1fr; gap: 8px; white-space: nowrap; }
.sim-trace .tr .t-id { color: #7dd3fc; }
.sim-trace .tr .t-d { color: #94a3b8; }
.sim-trace .tr.inj { color: #fbbf24; }
.sim-trace .tr.inj .t-id { color: #fbbf24; }
.sim-canoe-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.sim-canoe-ctl select { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--hairline,#e6e8ef); background: var(--surface-2,#f4f6fb); font-size: var(--fs-sm); color: var(--text-1,#1b2330); }
.sim-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; border: 1px solid var(--mod-color,#2563eb); background: var(--mod-color,#2563eb); color: #fff; transition: filter .15s ease; }
.sim-btn:hover { filter: brightness(1.07); }
.sim-btn.ghost { background: transparent; color: var(--mod-color,#2563eb); }
.sim-btn .ui-ic { width: 15px; height: 15px; }
.sim-canoe-row { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: center; margin-top: 14px; }
@media (max-width: 760px) { .sim-canoe-row { grid-template-columns: 1fr; } }
.sim-signal { background: var(--surface-2,#f4f6fb); border: 1px solid var(--hairline,#e6e8ef); border-radius: 12px; padding: 12px 14px; }
.sim-signal .sig-top { display: flex; justify-content: space-between; align-items: baseline; }
.sim-signal .sig-name { font-size: var(--fs-sm); color: var(--text-3,#8a93a6); }
.sim-signal .sig-val { font-size: var(--fs-mono-md); font-weight: 800; color: var(--text-1,#1b2330); font-variant-numeric: tabular-nums; }
.sim-signal .sig-val small { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; margin-left: 3px; }
.sim-spark { width: 100%; height: 42px; margin-top: 8px; }

/* ══ 故障码 5 位结构交互卡片（DTC 第 1/2/3 位条件关系） ══ */
.kb-dtc {
  margin: var(--space-6, 24px) 0;
  border: 1px solid var(--hairline, #e6e8ef);
  border-radius: 14px;
  background: var(--surface, #fff);
  padding: 18px;
}
[data-theme="dark"] .kb-dtc { background: #11161f; border-color: #2a3140; }
.kb-dtc-title { font-weight: 700; font-size: var(--fs-h4, 18px); color: var(--text-1, #1b2330); margin-bottom: 8px; }
.kb-dtc-hint { font-size: 13px; color: var(--text-3, #8a93a6); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.kb-dtc-hint .ui-ic { width: 15px; height: 15px; color: var(--mod-color, #2563eb); }
.kb-dtc-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 760px) { .kb-dtc-cards { grid-template-columns: repeat(2, 1fr); } }
.dtc-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  text-align: left; cursor: pointer; font-family: inherit; color: var(--text-1, #1b2330);
  background: var(--surface-2, #f4f6fb); border: 1px solid var(--hairline, #e6e8ef);
  border-radius: 12px; padding: 12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
[data-theme="dark"] .dtc-card { background: #161c26; border-color: #2a3140; }
.dtc-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(15,23,42,.12); border-color: var(--mod-color, #2563eb); }
.dtc-card:focus-visible { outline: 2px solid var(--mod-color, #2563eb); outline-offset: 2px; }
.dtc-pos { font-size: 12px; color: var(--text-3, #8a93a6); }
.dtc-val { font-family: var(--font-family-secondary, ui-monospace, monospace); font-size: 26px; font-weight: 800; color: var(--mod-color, #2563eb); line-height: 1.1; font-variant-numeric: tabular-nums; }
.dtc-enc { font-size: 12px; color: var(--text-2, #5b6577); }
.dtc-type { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.dtc-fixed { background: color-mix(in srgb, var(--mod-color, #2563eb) 14%, transparent); color: var(--mod-color, #2563eb); }
.dtc-cond { background: #e7f6ee; color: #0f9d58; }
[data-theme="dark"] .dtc-cond { background: #0f2e1d; color: #34d27f; }
.dtc-warn { background: #fef3e2; color: #b4690a; }
[data-theme="dark"] .dtc-warn { background: #33260f; color: #e0a23a; }
.dtc-desc { font-size: 11.5px; color: var(--text-3, #8a93a6); line-height: 1.35; }
.kb-dtc-detail { margin-top: 14px; }
.dtc-detail-card { border: 1px dashed var(--mod-color, #2563eb); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--mod-color, #2563eb) 6%, transparent); }
.dtc-detail-title { font-weight: 700; margin-bottom: 6px; color: var(--text-1, #1b2330); }
.dtc-detail-body { font-size: 14px; color: var(--text-2, #5b6577); line-height: 1.6; }
.dtc-detail-body p { margin: 0 0 8px; }
.dtc-detail-body b { color: var(--text-1, #1b2330); }
.dtc-sub { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.dtc-sub th, .dtc-sub td { border: 1px solid var(--hairline, #e6e8ef); padding: 5px 8px; text-align: left; }
[data-theme="dark"] .dtc-sub th, [data-theme="dark"] .dtc-sub td { border-color: #2a3140; }
.dtc-sub th { background: var(--surface-2, #f4f6fb); }
[data-theme="dark"] .dtc-sub th { background: #1b212c; }
.sim-hint { font-size: var(--fs-xs); color: var(--text-3,#8a93a6); margin-top: 10px; line-height: 1.65; }

/* ══ 服务子功能详解卡（替代密集文字段落） ══ */
.kb-svc-cards { margin: var(--space-6, 24px) 0; }
.kb-svc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kb-svc-ic { display: flex; color: var(--mod-color, #2563eb); }
.kb-svc-ic .ui-ic { width: 20px; height: 20px; }
.kb-svc-title { font-weight: 700; font-size: var(--fs-h4, 16px); color: var(--text-1, #1b2330); letter-spacing: .2px; }
.kb-svc-count { margin-left: auto; font-size: var(--fs-2xs, 11px); color: var(--text-3, #8a93a6); background: var(--surface-2, #f4f6fb); padding: 3px 10px; border-radius: 999px; }
[data-theme="dark"] .kb-svc-count { background: #161c26; }
.kb-svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .kb-svc-grid { grid-template-columns: 1fr; } }
.svc-card { background: var(--surface, #fff); border: 1px solid var(--hairline, #e6e8ef); border-radius: 14px; padding: 0; overflow: hidden; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05)); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; border-top: 3px solid var(--mod-color, #2563eb); }
[data-theme="dark"] .svc-card { background: #11161f; border-color: #2a3140; }
.svc-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(15,23,42,.12); border-color: var(--mod-color, #2563eb); }
.svc-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--mod-color, #2563eb) 8%, transparent); border-bottom: 1px solid var(--hairline, #e6e8ef); flex-wrap: wrap; }
[data-theme="dark"] .svc-card-head { background: color-mix(in srgb, var(--mod-color, #2563eb) 14%, transparent); }
.svc-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-lg, 18px); font-weight: 800; color: var(--mod-color, #2563eb); line-height: 1; }
.svc-name { font-weight: 700; font-size: var(--fs-base, 16px); color: var(--text-1, #1b2330); flex: 1 1 auto; }
.svc-badge { font-size: var(--fs-2xs, 11px); padding: 3px 9px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.svc-badge-default { background: color-mix(in srgb, var(--mod-color, #2563eb) 14%, transparent); color: var(--mod-color, #2563eb); }
.svc-badge-daily { background: #e7f6ee; color: #0f9d58; }
[data-theme="dark"] .svc-badge-daily { background: #0f2e1d; color: #34d27f; }
.svc-badge-fix { background: #fef3e2; color: #b4690a; }
[data-theme="dark"] .svc-badge-fix { background: #33260f; color: #e0a23a; }
.svc-badge-reg { background: #e8f1fe; color: #1a73e8; }
[data-theme="dark"] .svc-badge-reg { background: #0f2544; color: #5aa3f0; }
.svc-badge-warn { background: #fce8e8; color: #c0302b; }
[data-theme="dark"] .svc-badge-warn { background: #3b1515; color: #f06b6b; }
.svc-badge-snap { background: #f3e8ff; color: #7c3aed; }
[data-theme="dark"] .svc-badge-snap { background: #261040; color: #a78bfa; }
.svc-badge-ext { background: #e0f2fe; color: #0369a1; }
[data-theme="dark"] .svc-badge-ext { background: #082f49; color: #38bdf8; }
.svc-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.svc-row { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm, 13.5px); color: var(--text-2, #5b6577); line-height: 1.5; }
.svc-row-q { align-items: flex-start; }
.svc-label { flex: 0 0 auto; font-size: var(--fs-2xs, 11px); font-weight: 700; color: var(--text-3, #8a93a6); text-transform: uppercase; letter-spacing: .4px; min-width: 34px; }
.svc-row-q .svc-label { color: var(--mod-color, #2563eb); background: color-mix(in srgb, var(--mod-color, #2563eb) 12%, transparent); padding: 2px 6px; border-radius: 6px; text-align: center; }
.svc-q { font-weight: 600; color: var(--text-1, #1b2330); }
.svc-code-snippet { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-xs, 12px); background: var(--surface-2, #f4f6fb); color: var(--text-1, #1b2330); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
[data-theme="dark"] .svc-code-snippet { background: #161c26; }