/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Stage 2：旧变量全部转发到 tokens.css 的 --cc-* token，跟随主题自动切换。
   保留旧变量名是为了不批量改 600+ 处 var(--bg-primary) 引用。 */
:root {
  --bg-primary:    var(--cc-bg-primary);
  --bg-secondary:  var(--cc-bg-secondary);
  --bg-card:       var(--cc-bg-elevated);
  --bg-hover:      var(--cc-bg-hover);
  --accent-cyan:   var(--cc-accent-primary);
  --accent-purple: var(--cc-accent-secondary);
  --accent-red:    var(--cc-color-red);
  --accent-teal:   var(--cc-color-teal);
  --accent-gold:   var(--cc-color-gold);
  --accent-green:  var(--cc-color-green);
  --accent-pink:   var(--cc-color-pink);
  --accent-blue:   var(--cc-color-blue);
  --text-primary:  var(--cc-text-primary);
  --text-secondary:var(--cc-text-secondary);
  --text-muted:    var(--cc-text-muted);
  --border:        var(--cc-border-default);
  --font-mono:     var(--cc-font-mono);
  --font-sans:     var(--cc-font-sans);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

/* ===== VIEWS ===== */
.view {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}
.view.active { display: flex; }

/* ===== TOP NAV ===== */
/* welcome 动画播放时沉浸式 —— 但保留右上角 lang/theme 切换器
   2026-04-26 修复：原本整个 topnav 隐藏导致老外打开看不懂全是中文 + 找不到语言切换
   现在做法：透明 topnav，藏掉 nav-left（主菜单）和 nav-center（breadcrumb），
   只露 nav-right（语言/主题/元喻），让用户随时能切英文 */
#welcome.active ~ #topnav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
  pointer-events: none;  /* nav-right 子元素自己 pointer-events:auto 抢回 */
}
#welcome.active ~ #topnav .nav-left,
#welcome.active ~ #topnav .nav-center {
  display: none !important;
}
#welcome.active ~ #topnav .nav-right {
  pointer-events: auto;
  margin-left: auto;
}

#topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: rgba(var(--cc-bg-primary-rgb), 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
}
.nav-left, .nav-right { display: flex; align-items: center; gap: 8px; }
.nav-center { flex: 1; text-align: center; }
#breadcrumb { color: var(--text-secondary); font-size: 13px; font-family: var(--font-mono); }

.nav-btn {
  background: none; border: 1px solid transparent; color: var(--text-secondary);
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 13px; display: flex; align-items: center; gap: 6px;
  transition: all 0.2s;
}
.nav-btn:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border); }
.nav-btn.active { color: var(--accent-cyan); border-color: var(--accent-cyan); background: rgba(0,212,255,0.08); }
.nav-btn svg { flex-shrink: 0; }

.version-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-cyan);
  border: 1px solid rgba(0,212,255,0.3);
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0,212,255,0.05);
}

/* Shortcuts button */
.shortcuts-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 14px;
  transition: all 0.2s;
}
.shortcuts-btn:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }

/* Shortcuts modal */
.shortcuts-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.shortcuts-modal.hidden { display: none; }
.shortcuts-content {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px 32px; position: relative; min-width: 280px;
}
.shortcuts-content h3 { margin-bottom: 16px; color: var(--accent-cyan); font-size: 16px; }
.shortcut-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; color: var(--text-secondary); }
.shortcut-row kbd {
  display: inline-block; padding: 2px 8px; background: var(--bg-primary);
  border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-mono);
  font-size: 12px; color: var(--text-primary); min-width: 28px; text-align: center;
}
.shortcuts-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  color: var(--text-muted); font-size: 20px; cursor: pointer;
}
.shortcuts-close:hover { color: var(--text-primary); }

/* ===== LANDING VIEW ===== */
#landing {
  padding-top: 48px;
  overflow-y: auto;
  background: var(--bg-primary);
  scroll-behavior: smooth;
}

.landing-header {
  text-align: center;
  padding: 30px 20px 10px;
}
.title-glow {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-shadow: 0 0 30px rgba(0,212,255,0.3);
  letter-spacing: 2px;
}
.subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin-top: 6px;
  font-weight: 300;
}
/* 具体内容 lede —— 给首次访问者明确答复"这是关于什么的" */
.landing-lede {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 14px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  font-family: var(--cc-font-mono, 'SF Mono', 'Fira Code', monospace);
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  animation: pulse-opacity 3s ease-in-out infinite;
}

@keyframes pulse-opacity {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ===== ENGINE SVG ===== */
#engine-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
#engine-svg {
  width: 100%;
  height: auto;
  min-height: 500px;
}
#engine-svg text {
  font-family: var(--font-sans);
  user-select: none;
  pointer-events: none;
}

/* ===== ENGINE SVG: 浅色 / 暖色主题适配 =====
   Engine SVG 原本为深色主题设计，节点 fill=#0d1520 + muted 文本颜色在浅/暖背景上
   "方块糊作一团、次级文字看不清"。通过 CSS 属性选择器覆盖 presentation attr 来适配。 */

[data-theme="light"] #engine-svg rect[fill="#0d1520"],
[data-theme="warm"] #engine-svg rect[fill="#0d1520"],
[data-theme="light"] #engine-svg circle[fill="#0d1520"],
[data-theme="warm"] #engine-svg circle[fill="#0d1520"] {
  fill: #ffffff;
}
[data-theme="warm"] #engine-svg rect[fill="#0d1520"],
[data-theme="warm"] #engine-svg circle[fill="#0d1520"] {
  fill: #fdf9f0; /* 暖色主题用奶油色而非纯白，更融合 */
}

/* Grid 从深蓝改为浅灰 */
[data-theme="light"] #engine-svg path[stroke="#1a2332"],
[data-theme="warm"] #engine-svg path[stroke="#1a2332"] { stroke: #d8dde5; }
[data-theme="warm"] #engine-svg path[stroke="#1a2332"] { stroke: #e9e1cf; }
[data-theme="light"] #engine-svg path[stroke="#1e2d42"],
[data-theme="warm"] #engine-svg path[stroke="#1e2d42"] { stroke: #c0c7d2; }
[data-theme="warm"] #engine-svg path[stroke="#1e2d42"] { stroke: #d8cfbc; }

/* 外环虚线 */
[data-theme="light"] #engine-svg ellipse[stroke="#2d3748"],
[data-theme="warm"] #engine-svg ellipse[stroke="#2d3748"] { stroke: #a0aec0; }
[data-theme="warm"] #engine-svg ellipse[stroke="#2d3748"] { stroke: #b8a88a; }

/* 所有 muted / detail / stats 文本（dark-blue 系列），浅色下需加深以保证可读性 */
[data-theme="light"] #engine-svg text[fill="#4a5568"],
[data-theme="light"] #engine-svg text[fill="#5a8a9e"],
[data-theme="light"] #engine-svg text[fill="#3d5a6e"],
[data-theme="light"] #engine-svg text[fill="#3a6a80"],
[data-theme="light"] #engine-svg text[fill="#4a8ab0"],
[data-theme="light"] #engine-svg text[fill="#9a6db5"],
[data-theme="light"] #engine-svg text[fill="#5c4d8a"],
[data-theme="light"] #engine-svg text[fill="#5a4070"],
[data-theme="light"] #engine-svg text[fill="#9e8a3d"],
[data-theme="light"] #engine-svg text[fill="#6e6030"],
[data-theme="light"] #engine-svg text[fill="#3a8a84"],
[data-theme="light"] #engine-svg text[fill="#2a6560"],
[data-theme="light"] #engine-svg text[fill="#9e4a4a"],
[data-theme="light"] #engine-svg text[fill="#6e3535"],
[data-theme="light"] #engine-svg text[fill="#3a8a58"],
[data-theme="light"] #engine-svg text[fill="#2a6540"],
[data-theme="light"] #engine-svg text[fill="#718096"] { fill: #4a5568; }

[data-theme="warm"] #engine-svg text[fill="#4a5568"],
[data-theme="warm"] #engine-svg text[fill="#5a8a9e"],
[data-theme="warm"] #engine-svg text[fill="#3d5a6e"],
[data-theme="warm"] #engine-svg text[fill="#3a6a80"],
[data-theme="warm"] #engine-svg text[fill="#4a8ab0"],
[data-theme="warm"] #engine-svg text[fill="#9a6db5"],
[data-theme="warm"] #engine-svg text[fill="#5c4d8a"],
[data-theme="warm"] #engine-svg text[fill="#5a4070"],
[data-theme="warm"] #engine-svg text[fill="#9e8a3d"],
[data-theme="warm"] #engine-svg text[fill="#6e6030"],
[data-theme="warm"] #engine-svg text[fill="#3a8a84"],
[data-theme="warm"] #engine-svg text[fill="#2a6560"],
[data-theme="warm"] #engine-svg text[fill="#9e4a4a"],
[data-theme="warm"] #engine-svg text[fill="#6e3535"],
[data-theme="warm"] #engine-svg text[fill="#3a8a58"],
[data-theme="warm"] #engine-svg text[fill="#2a6540"],
[data-theme="warm"] #engine-svg text[fill="#718096"] { fill: #6b5d4a; }

/* 主标题色（cyan/purple/green/gold/red）在浅色下对比度低 → 加深 */
[data-theme="light"] #engine-svg text[fill="#00d4ff"] { fill: #0088b0; }
[data-theme="light"] #engine-svg text[fill="#7b61ff"] { fill: #5a3fcc; }
[data-theme="light"] #engine-svg text[fill="#48bb78"] { fill: #2f7d4f; }
[data-theme="light"] #engine-svg text[fill="#ffd93d"] { fill: #b08500; }
[data-theme="light"] #engine-svg text[fill="#ff6b6b"] { fill: #c83030; }
[data-theme="light"] #engine-svg text[fill="#4ecdc4"] { fill: #2a8a84; }
[data-theme="light"] #engine-svg text[fill="#e88dff"] { fill: #a03fcc; }
[data-theme="light"] #engine-svg text[fill="#63b3ed"] { fill: #2563b0; }
[data-theme="light"] #engine-svg text[fill="#a0aec0"] { fill: #4a5568; }

[data-theme="warm"] #engine-svg text[fill="#00d4ff"] { fill: #0a7ea8; }
[data-theme="warm"] #engine-svg text[fill="#7b61ff"] { fill: #5a3fcc; }
[data-theme="warm"] #engine-svg text[fill="#48bb78"] { fill: #2f7d4f; }
[data-theme="warm"] #engine-svg text[fill="#ffd93d"] { fill: #a87a00; }
[data-theme="warm"] #engine-svg text[fill="#ff6b6b"] { fill: #b82828; }
[data-theme="warm"] #engine-svg text[fill="#4ecdc4"] { fill: #2a7a78; }
[data-theme="warm"] #engine-svg text[fill="#e88dff"] { fill: #9030b8; }
[data-theme="warm"] #engine-svg text[fill="#63b3ed"] { fill: #1f5fa0; }
[data-theme="warm"] #engine-svg text[fill="#a0aec0"] { fill: #6b5d4a; }

/* 节点边框 stroke 在浅色下保持饱和度（无需改），但心跳圆圈的 #00d4ff stroke 需要稍深 */
[data-theme="light"] #engine-svg circle[stroke="#00d4ff"],
[data-theme="warm"] #engine-svg circle[stroke="#00d4ff"] { stroke: #00a4d4; }

/* Glow filter 在浅背景下会造成模糊光晕 → 弱化 */
[data-theme="light"] #engine-svg g.node-heart circle { filter: none; }
[data-theme="warm"] #engine-svg g.node-heart circle { filter: none; }

/* ===== 外部 /images/*.svg 流程图：内联注入 + 主题感知 =====
   旧方案用 filter: invert+hue-rotate 整图反转，在浅/暖主题下产生灰蒙感（#0d1117
   不是纯黑 + contrast<1 → 反转后整体偏灰）。新方案：
   1. <img> 改为 <div class="embedded-diagram-host" data-src="xxx.svg">
   2. JS 运行时 fetch SVG 并 inline 到 DOM
   3. CSS 直接穿透到 SVG 内部 <rect>/<text>/class，按 data-theme 切换颜色
   所有颜色替换用属性选择器 + !important 覆盖 SVG 内嵌 <style> 块。 */

.embedded-diagram-host {
  display: block;
  width: 100%;
  line-height: 0;
}
.embedded-diagram-host svg {
  width: 100%;
  height: auto;
  display: block;
}

/* —— 浅色 / 暖色：整体背景（所有深色变体都收敛到白/奶油）—— */
[data-theme="light"] .embedded-diagram-host svg rect[fill="#0d1117"],
[data-theme="light"] .embedded-diagram-host svg rect[fill="#12121a"],
[data-theme="light"] .embedded-diagram-host svg rect[fill="#0d1520"],
[data-theme="light"] .embedded-diagram-host svg rect[fill="#1a1a2e"],
[data-theme="light"] .embedded-diagram-host svg rect[fill="#0a2a3a"] {
  fill: #ffffff !important;
}
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#0d1117"],
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#12121a"],
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#0d1520"],
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#1a1a2e"],
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#0a2a3a"] {
  fill: #fdf9f0 !important;
}

/* —— 浅色 / 暖色：次级面板底色 —— */
[data-theme="light"] .embedded-diagram-host svg rect[fill="#161b22"],
[data-theme="light"] .embedded-diagram-host svg rect[fill="#1a2332"],
[data-theme="light"] .embedded-diagram-host svg rect[fill="#30363d"],
[data-theme="light"] .embedded-diagram-host svg rect[fill="#222"],
[data-theme="light"] .embedded-diagram-host svg rect[fill="#333"] {
  fill: #f3f5f9 !important;
}
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#161b22"],
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#1a2332"],
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#30363d"],
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#222"],
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#333"] {
  fill: #efeae1 !important;
}

/* —— 浅色 / 暖色：白色文字（.title / fill="#ffffff"）—— */
[data-theme="light"] .embedded-diagram-host svg text[fill="#ffffff"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#fff"],
[data-theme="light"] .embedded-diagram-host svg .title,
[data-theme="light"] .embedded-diagram-host svg .layer-name,
[data-theme="light"] .embedded-diagram-host svg text.label-white {
  fill: #1a2035 !important;
}
[data-theme="warm"] .embedded-diagram-host svg text[fill="#ffffff"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#fff"],
[data-theme="warm"] .embedded-diagram-host svg .title,
[data-theme="warm"] .embedded-diagram-host svg .layer-name,
[data-theme="warm"] .embedded-diagram-host svg text.label-white {
  fill: #2b2a27 !important;
}

/* —— 浅色 / 暖色：灰色副文字（.subtitle / #888 / #8b949e / #999 / #e0e0e0）—— */
[data-theme="light"] .embedded-diagram-host svg text[fill="#888"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#999"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#666"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#555"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#8b949e"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#e6edf3"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#e0e0e0"],
[data-theme="light"] .embedded-diagram-host svg .subtitle,
[data-theme="light"] .embedded-diagram-host svg .layer-detail,
[data-theme="light"] .embedded-diagram-host svg .layer-tokens {
  fill: #4a5878 !important;
}
[data-theme="warm"] .embedded-diagram-host svg text[fill="#888"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#999"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#666"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#555"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#8b949e"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#e6edf3"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#e0e0e0"],
[data-theme="warm"] .embedded-diagram-host svg .subtitle,
[data-theme="warm"] .embedded-diagram-host svg .layer-detail,
[data-theme="warm"] .embedded-diagram-host svg .layer-tokens {
  fill: #6b5d4a !important;
}

/* rgba(255,255,255,*) 文字（半透明白）处理较难，走通用 <style> 内部覆盖 */
[data-theme="light"] .embedded-diagram-host svg { color: #1a2035; }
[data-theme="warm"] .embedded-diagram-host svg { color: #2b2a27; }

/* —— 彩色节点 fill 饱和度降低（避免反差过强）—— */
[data-theme="light"] .embedded-diagram-host svg rect[fill="#58a6ff"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#58a6ff"] { fill: #3d82d0 !important; }
[data-theme="light"] .embedded-diagram-host svg rect[fill="#3fb950"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#3fb950"] { fill: #2f8a3b !important; }
[data-theme="light"] .embedded-diagram-host svg rect[fill="#bc8cff"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#bc8cff"] { fill: #8a5cd0 !important; }
[data-theme="light"] .embedded-diagram-host svg rect[fill="#d29922"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#d29922"] { fill: #a67500 !important; }
[data-theme="light"] .embedded-diagram-host svg rect[fill="#f85149"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#f85149"] { fill: #c83030 !important; }

[data-theme="warm"] .embedded-diagram-host svg rect[fill="#58a6ff"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#58a6ff"] { fill: #4a6b8a !important; }
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#3fb950"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#3fb950"] { fill: #4a7c50 !important; }
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#bc8cff"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#bc8cff"] { fill: #7a5ca0 !important; }
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#d29922"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#d29922"] { fill: #c77d2e !important; }
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#f85149"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#f85149"] { fill: #b84a3a !important; }

/* —— 上下文压缩管线 等 用了 linearGradient 的流程图：<stop> 颜色在浅色下降饱和
   用户反馈"字太小 + 配色晃眼" —— 字号已在 SVG 文件内升级到 11-16px，
   亮黄/亮红/亮青此处做 stop-color 降饱和处理 —— */
[data-theme="light"] .embedded-diagram-host svg stop[stop-color="#ff6b6b"] { stop-color: #e0574a !important; }
[data-theme="light"] .embedded-diagram-host svg stop[stop-color="#ff9f43"] { stop-color: #d88a38 !important; }
[data-theme="light"] .embedded-diagram-host svg stop[stop-color="#ffd93d"] { stop-color: #d4a82b !important; }
[data-theme="light"] .embedded-diagram-host svg stop[stop-color="#48bb78"] { stop-color: #2f8a5a !important; }
[data-theme="light"] .embedded-diagram-host svg stop[stop-color="#00d4ff"] { stop-color: #0099c4 !important; }

[data-theme="warm"] .embedded-diagram-host svg stop[stop-color="#ff6b6b"] { stop-color: #c85540 !important; }
[data-theme="warm"] .embedded-diagram-host svg stop[stop-color="#ff9f43"] { stop-color: #c77d2e !important; }
[data-theme="warm"] .embedded-diagram-host svg stop[stop-color="#ffd93d"] { stop-color: #b8902e !important; }
[data-theme="warm"] .embedded-diagram-host svg stop[stop-color="#48bb78"] { stop-color: #4a7c50 !important; }
[data-theme="warm"] .embedded-diagram-host svg stop[stop-color="#00d4ff"] { stop-color: #0a7ea8 !important; }

/* 亮黄 rect/path/text 在浅色下降饱和（用户晃眼反馈） */
[data-theme="light"] .embedded-diagram-host svg rect[fill="#ffd93d"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#ffd93d"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#ffd93d"] { fill: #b08500 !important; }
[data-theme="light"] .embedded-diagram-host svg rect[fill="#ff6b6b"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#ff6b6b"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#ff6b6b"] { fill: #c83030 !important; }
[data-theme="light"] .embedded-diagram-host svg rect[fill="#00d4ff"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#00d4ff"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#00d4ff"] { fill: #0088b0 !important; }
[data-theme="light"] .embedded-diagram-host svg rect[fill="#48bb78"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#48bb78"],
[data-theme="light"] .embedded-diagram-host svg text[fill="#48bb78"] { fill: #2f7d4f !important; }

[data-theme="warm"] .embedded-diagram-host svg rect[fill="#ffd93d"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#ffd93d"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#ffd93d"] { fill: #a87a00 !important; }
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#ff6b6b"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#ff6b6b"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#ff6b6b"] { fill: #b84a3a !important; }
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#00d4ff"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#00d4ff"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#00d4ff"] { fill: #0a7ea8 !important; }
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#48bb78"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#48bb78"],
[data-theme="warm"] .embedded-diagram-host svg text[fill="#48bb78"] { fill: #4a7c50 !important; }

/* Node interactions */
.node { cursor: pointer; transition: transform 0.3s ease; }
.node:hover rect, .node:hover circle:not([fill^="url"]) {
  filter: url(#glow-cyan);
  stroke-width: 3;
}
.node:hover { transform: scale(1.03); }
.node:focus { outline: none; }
.node:focus rect, .node:focus circle:not([fill^="url"]) { stroke-width: 3.5; }

/* Data flow animation */
.flow-path {
  stroke-dasharray: 8, 6;
  animation: flow-dash 2s linear infinite;
}
.flow-cyan { stroke: var(--accent-cyan); }
.flow-purple { stroke: var(--accent-purple); }
.flow-red { stroke: var(--accent-red); }
.flow-gold { stroke: var(--accent-gold); }
.flow-teal { stroke: var(--accent-teal); }
.flow-green { stroke: var(--accent-green); }

@keyframes flow-dash {
  to { stroke-dashoffset: -28; }
}

/* Particle animation */
.particle {
  fill: var(--accent-cyan);
  opacity: 0;
  animation: particle-move 3s ease-in-out infinite;
}
@keyframes particle-move {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== STATS STRIP ===== */
.stats-strip {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 20px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  flex-wrap: wrap;
}
.stat {
  text-align: center; position: relative; cursor: help;
}
.stat[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 12px; color: var(--text-secondary);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s;
  z-index: 10;
}
.stat[data-tip]:hover::after { opacity: 1; }
.stat-num {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-cyan);
  font-family: var(--font-mono);
}
.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== DETAIL PANEL ===== */
#detail-panel {
  position: fixed;
  top: 48px; right: 0; bottom: 0;
  width: 480px;
  max-width: 90vw;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  z-index: 50;
  overflow-y: auto;
  padding: 24px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#detail-panel.visible { transform: translateX(0); }
#detail-panel.hidden { pointer-events: none; }

.panel-close-btn {
  position: absolute;
  top: 12px; right: 16px;
  background: none; border: none; color: var(--text-muted);
  font-size: 24px; cursor: pointer;
  transition: color 0.2s;
}
.panel-close-btn:hover { color: var(--text-primary); }

/* Panel content styles */
.panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.panel-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.panel-title { font-size: 20px; font-weight: 700; }
.panel-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

.panel-section { margin-bottom: 20px; }
.panel-section h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.panel-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.panel-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.panel-stat-card .val {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.panel-stat-card .lbl {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.panel-stat-card .stat-explain {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

/* Why matters */
.panel-why-matters {
  background: rgba(0,212,255,0.06);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.panel-why-matters strong { color: var(--accent-cyan); }

/* Concept with explanation */
.concept-name { font-size: 13px; color: var(--text-primary); margin-bottom: 2px; }
.concept-explain { font-size: 12px; color: var(--text-muted); line-height: 1.5; padding-bottom: 4px; }

.panel-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.panel-description strong { color: var(--text-primary); }

.panel-links { display: flex; flex-direction: column; gap: 6px; }
.panel-link {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}
.panel-link:hover {
  border-color: var(--accent-cyan);
  background: rgba(0,212,255,0.05);
}
.panel-link .arrow { margin-left: auto; color: var(--text-muted); }

/* Key concepts list */
.concept-list { list-style: none; }
.concept-list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(30,45,66,0.5);
  font-size: 13px;
  color: var(--text-secondary);
}
.concept-list li:last-child { border-bottom: none; }
.concept-list code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-cyan);
}

/* OS analogy badge */
.os-analogy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--accent-cyan);
  margin-bottom: 16px;
}

/* ===== READER VIEW ===== */
#reader { padding-top: 48px; flex-direction: row; }

#sidebar {
  width: 260px;
  min-width: 220px;
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  overflow-y: auto;
  padding: 12px;
  flex-shrink: 0;
}
.sidebar-header { margin-bottom: 16px; }
.sidebar-header h2 { font-size: 16px; color: var(--text-primary); margin-top: 10px; }
#toc-search {
  width: 100%; margin-top: 10px; padding: 8px 10px;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-primary); font-size: 13px;
  outline: none; transition: border-color 0.2s;
}
#toc-search:focus { border-color: var(--accent-cyan); }
#toc-search::placeholder { color: var(--text-muted); }
.toc-chapter.hidden-by-search { display: none; }
.toc-part.hidden-by-search { display: none; }

/* Search results */
.search-results { padding: 0; }
.search-results.hidden { display: none; }
.search-results-header {
  font-size: 12px; color: var(--text-muted); padding: 8px 4px 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.search-result-item {
  padding: 10px 8px; border-radius: 6px; cursor: pointer;
  transition: background 0.15s; border-bottom: 1px solid var(--border);
}
.search-result-item:hover { background: rgba(0,212,255,0.08); }
.search-result-item:last-child { border-bottom: none; }
.search-result-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 3px; line-height: 1.4;
}
.search-result-section {
  font-size: 11px; color: var(--accent-cyan); margin-bottom: 4px;
  font-weight: 500;
}
.search-result-snippet {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
  word-break: break-word;
}
mark.search-highlight {
  background: rgba(255,214,0,0.3); color: var(--text-primary);
  padding: 1px 2px; border-radius: 2px;
}

.btn-back {
  background: none; border: 1px solid var(--border);
  color: var(--text-secondary); padding: 6px 12px; border-radius: 6px;
  cursor: pointer; font-size: 12px; transition: all 0.2s;
}
.btn-back:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }

/* TOC styles */
.toc-part {
  margin-bottom: 16px;
}
/* 一级目录（Part 标题）— 强视觉权重，像纵向面包屑 */
.toc-part-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  margin-bottom: 4px;
  padding: 8px 8px 6px;
  border-bottom: none;
  border-left: 3px solid var(--accent-cyan);
  cursor: pointer;
  margin-top: 14px;
  line-height: 1.3;
}
.toc-part:first-child .toc-part-title { margin-top: 0; }
.toc-part-title:hover { color: var(--accent-cyan); }
.toc-subgroup {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 8px 4px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}
.toc-subgroup:first-child { border-top: none; margin-top: 0; }

[data-theme="warm"] .toc-part-title {
  color: #2b2a27;
  border-left-color: #c77d2e;
}
[data-theme="warm"] .toc-part-title:hover {
  color: #c77d2e;
}

[data-theme="warm"] .toc-subgroup {
  color: #9a8b76;
  border-top-color: #d8cfbc;
}

/* 难度筛选器 */
.toc-filter-bar {
  display: flex;
  gap: 4px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}
.toc-filter {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.toc-filter:hover { border-color: var(--text-muted); }
.toc-filter.active {
  /* 默认 active 色（当按钮无 --fc 时，用 cyan 而非 --text-primary 以避免 dark 模式白底白字） */
  background: var(--fc, var(--accent-cyan, #00d4ff));
  color: #fff;
  border-color: var(--fc, var(--accent-cyan, #00d4ff));
}
[data-theme="dark"] .toc-filter.active[data-level="all"],
[data-theme="dark"] .toc-filter.active:not([data-level="easy"]):not([data-level="medium"]):not([data-level="hard"]):not([data-level="expert"]) {
  background: var(--fc, #2a4a6a);
  color: #fff;
  border-color: var(--fc, #2a4a6a);
}
[data-theme="warm"] .toc-filter { border-color: #d8cfbc; color: #6b5d4a; }
[data-theme="warm"] .toc-filter.active { color: #fff; }
[data-theme="warm"] .toc-filter.active[data-level="all"] {
  background: #c77d2e;
  border-color: #c77d2e;
}

/* Q 问答 badge */
.toc-q-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: var(--accent-cyan);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 5px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  vertical-align: middle;
  line-height: 1.4;
}
[data-theme="warm"] .toc-q-badge {
  background: #c77d2e;
}

.toc-chapter {
  display: block;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  border-left: 2px solid transparent;
}
.toc-chapter:hover { background: var(--bg-hover); color: var(--text-primary); }
.toc-chapter.active {
  background: rgba(0,212,255,0.08);
  color: var(--accent-cyan);
  border-left-color: var(--accent-cyan);
}
.toc-chapters { display: none; }
.toc-part.expanded .toc-chapters { display: block; }

/* ===== 章节内 H2/H3 锚点导航 ===== */
#chapter-section-nav {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.chapter-section-nav-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding: 0 4px;
  font-weight: 600;
}
.chapter-section-item {
  display: block;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.4;
  margin-bottom: 1px;
  transition: background 0.12s, color 0.12s;
  border-left: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chapter-section-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.chapter-section-item.section-h3 {
  padding-left: 18px;
  font-size: 11px;
  color: var(--text-muted);
}
.chapter-section-item.section-active {
  color: var(--accent-cyan);
  border-left-color: var(--accent-cyan);
  background: rgba(0,212,255,0.05);
}

/* Chapter content */
#chapter-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
  min-width: 0;
}

/* Reading progress bar — 2026-04-17 用户反馈"什么鬼！"，隐藏；保留 DOM 以便 app.js 继续无错运行 */
.reading-progress {
  display: none !important;
  position: sticky; top: 0; left: 0; width: 0%;
  height: 3px; background: var(--accent-cyan);
  z-index: 5; transition: width 0.1s;
  border-radius: 0 2px 2px 0;
}

/* Chapter navigation */
.chapter-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; margin-bottom: 20px; border-bottom: 1px solid var(--border);
}
#chapter-nav-bottom { border-bottom: none; border-top: 1px solid var(--border); margin-top: 40px; margin-bottom: 0; padding-top: 20px; }
.chapter-nav-btn {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
  padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.2s;
}
.chapter-nav-btn:hover:not(:disabled) { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.chapter-nav-btn:disabled { opacity: 0.3; cursor: default; }
#chapter-position, #chapter-position-bottom { font-size: 12px; color: var(--text-muted); }

#chapter-body {
  font-size: 15px;
  line-height: 1.70;
  color: var(--text-primary);
}
#chapter-body h1 {
  font-size: 28px;
  margin-bottom: 24px;
  color: var(--accent-cyan);
  border-bottom: 2px solid var(--border);
  padding-bottom: 12px;
}
#chapter-body h2 {
  font-size: 22px;
  margin-top: 36px;
  margin-bottom: 16px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
#chapter-body h3 {
  font-size: 18px;
  margin-top: 28px;
  margin-bottom: 12px;
  color: var(--text-secondary);
}
#chapter-body p { margin-bottom: 14px; }
#chapter-body strong { color: var(--accent-cyan); }
#chapter-body em { color: var(--text-secondary); font-style: italic; }

#chapter-body code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-cyan);
}
#chapter-body pre {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  margin: 16px 0;
}
#chapter-body pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
}

#chapter-body blockquote {
  border-left: 3px solid var(--accent-cyan);
  padding: 12px 20px;
  margin: 16px 0;
  background: rgba(0,212,255,0.04);
  border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
}

/* Classified blockquote styles */
#chapter-body blockquote.bq-industry {
  border-left-color: #d29922;
  background: rgba(210,153,34,0.05);
}
#chapter-body blockquote.bq-course {
  border-left-color: #bc8cff;
  background: rgba(188,140,255,0.05);
}
#chapter-body blockquote.bq-layperson {
  border-left-color: #f59e0b;
  background: rgba(245,158,11,0.06);
}
#chapter-body blockquote.bq-os {
  border-left-color: #58a6ff;
  background: rgba(88,166,255,0.05);
}
#chapter-body blockquote.bq-warning {
  border-left-color: #f85149;
  background: rgba(248,81,73,0.05);
}

#chapter-body .table-wrapper {
  overflow-x: auto;
  margin: 16px 0;
  /* 右边缘渐变阴影 —— 暗示"可横向滚动"
     技巧：两个 background 叠加：左侧纯色遮住"起点"标识，右侧从透明到主背景渐变
     background-attachment: local + scroll 实现"滚动时左侧阴影跟着走" */
  background:
    linear-gradient(to right, var(--bg-elevated), var(--bg-elevated)) left center / 20px 100% no-repeat local,
    linear-gradient(to right, rgba(0,0,0,0), var(--bg-elevated)) right center / 20px 100% no-repeat local,
    radial-gradient(ellipse farthest-side at 0% 50%, rgba(0,0,0,0.15), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(ellipse farthest-side at 100% 50%, rgba(0,0,0,0.15), transparent) right center / 14px 100% no-repeat scroll;
  background-attachment: local, local, scroll, scroll;
}
[data-theme="light"] #chapter-body .table-wrapper {
  background:
    linear-gradient(to right, #ffffff, #ffffff) left center / 20px 100% no-repeat local,
    linear-gradient(to right, rgba(255,255,255,0), #ffffff) right center / 20px 100% no-repeat local,
    radial-gradient(ellipse farthest-side at 0% 50%, rgba(0,0,0,0.08), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(ellipse farthest-side at 100% 50%, rgba(0,0,0,0.08), transparent) right center / 14px 100% no-repeat scroll;
  background-attachment: local, local, scroll, scroll;
}
/* 上下文压缩等 SVG 的 .stage-desc / .stage-title 等类内文字在浅/暖主题下需要反色 */
[data-theme="light"] .embedded-diagram-host svg .stage-desc { fill: #4a5878 !important; }
[data-theme="warm"] .embedded-diagram-host svg .stage-desc { fill: #6b5d4a !important; }

/* ===== System Prompt Sandwich 等 SVG 的 "灰蒙" 修复 =====
   原因：rect opacity="0.85/0.9" 在暗底上是"柔和融入"效果，在白/奶油底上被底色
   稀释成淡蒙色（红变粉、黄变米、紫变丁香）。浅/暖主题下拉回近 1.0。 */
[data-theme="light"] .embedded-diagram-host svg rect[opacity="0.85"],
[data-theme="light"] .embedded-diagram-host svg rect[opacity="0.9"],
[data-theme="light"] .embedded-diagram-host svg rect[opacity="0.8"] {
  opacity: 1 !important;
}
[data-theme="warm"] .embedded-diagram-host svg rect[opacity="0.85"],
[data-theme="warm"] .embedded-diagram-host svg rect[opacity="0.9"],
[data-theme="warm"] .embedded-diagram-host svg rect[opacity="0.8"] {
  opacity: 0.95 !important;  /* warm 底色本身有温度，稍留一点透度与奶油底融合 */
}
/* path 和 g 元素同样可能有 opacity 稀释问题 */
[data-theme="light"] .embedded-diagram-host svg path[opacity="0.85"],
[data-theme="light"] .embedded-diagram-host svg path[opacity="0.9"],
[data-theme="light"] .embedded-diagram-host svg path[opacity="0.8"] {
  opacity: 1 !important;
}
[data-theme="warm"] .embedded-diagram-host svg path[opacity="0.85"],
[data-theme="warm"] .embedded-diagram-host svg path[opacity="0.9"],
[data-theme="warm"] .embedded-diagram-host svg path[opacity="0.8"] {
  opacity: 0.95 !important;
}

/* system-prompt layer-detail 用了 inline style: fill:rgba(0,0,0,0.6)，
   inline style 优先级比外部 CSS 高，需要 style 属性选择器 + !important */
[data-theme="light"] .embedded-diagram-host svg text[style*="rgba(0,0,0"] {
  fill: #1a2035 !important;
}
[data-theme="warm"] .embedded-diagram-host svg text[style*="rgba(0,0,0"] {
  fill: #2b2a27 !important;
}

/* Layer 4/5 的 rect/circle 颜色（原来漏了）在浅/暖主题下降饱和 */
[data-theme="light"] .embedded-diagram-host svg rect[fill="#7b61ff"],
[data-theme="light"] .embedded-diagram-host svg circle[fill="#7b61ff"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#7b61ff"] { fill: #5a3fcc !important; }
[data-theme="light"] .embedded-diagram-host svg rect[fill="#e88dff"],
[data-theme="light"] .embedded-diagram-host svg circle[fill="#e88dff"],
[data-theme="light"] .embedded-diagram-host svg path[fill="#e88dff"] { fill: #9030b8 !important; }
[data-theme="light"] .embedded-diagram-host svg rect[stroke="#ff8a8a"],
[data-theme="light"] .embedded-diagram-host svg circle[stroke="#ff8a8a"] { stroke: #c83030 !important; }
[data-theme="light"] .embedded-diagram-host svg rect[stroke="#ffe066"],
[data-theme="light"] .embedded-diagram-host svg circle[stroke="#ffe066"] { stroke: #b08500 !important; }
[data-theme="light"] .embedded-diagram-host svg rect[stroke="#68d98e"],
[data-theme="light"] .embedded-diagram-host svg circle[stroke="#68d98e"] { stroke: #2f7d4f !important; }
[data-theme="light"] .embedded-diagram-host svg rect[stroke="#9580ff"],
[data-theme="light"] .embedded-diagram-host svg circle[stroke="#9580ff"] { stroke: #5a3fcc !important; }
[data-theme="light"] .embedded-diagram-host svg rect[stroke="#f0aaff"],
[data-theme="light"] .embedded-diagram-host svg circle[stroke="#f0aaff"] { stroke: #9030b8 !important; }
[data-theme="light"] .embedded-diagram-host svg rect[stroke="#33ddff"],
[data-theme="light"] .embedded-diagram-host svg circle[stroke="#33ddff"] { stroke: #0088b0 !important; }

[data-theme="warm"] .embedded-diagram-host svg rect[fill="#7b61ff"],
[data-theme="warm"] .embedded-diagram-host svg circle[fill="#7b61ff"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#7b61ff"] { fill: #6c5b8a !important; }
[data-theme="warm"] .embedded-diagram-host svg rect[fill="#e88dff"],
[data-theme="warm"] .embedded-diagram-host svg circle[fill="#e88dff"],
[data-theme="warm"] .embedded-diagram-host svg path[fill="#e88dff"] { fill: #a05c7a !important; }

/* ===== System Prompt Sandwich 全白文字（用户指令：浅/暖下字全改白）=====
   用户明确要求 light + warm 下此图所有文字都白色，方便在饱和色底上阅读。
   data-src$ 属性选择器锁定到只这一张图，避免影响其他 SVG。 */
[data-theme="light"] .embedded-diagram-host[data-src$="system-prompt-sandwich.svg"] svg text,
[data-theme="warm"] .embedded-diagram-host[data-src$="system-prompt-sandwich.svg"] svg text {
  fill: #ffffff !important;
  font-weight: 500;
}
/* 浅 SVG 底色（非 layer rect 的底板）在 light/warm 下原本是白，文字白底白看不见 →
   但整个 SVG 视觉是 6 彩色 layer 占满主要区域，底板只在上下 padding 区可见，
   那里的文字（title / subtitle / bottom note）需要重新上深色而非白色 */
[data-theme="light"] .embedded-diagram-host[data-src$="system-prompt-sandwich.svg"] svg .title,
[data-theme="light"] .embedded-diagram-host[data-src$="system-prompt-sandwich.svg"] svg .subtitle,
[data-theme="light"] .embedded-diagram-host[data-src$="system-prompt-sandwich.svg"] svg text[fill="#666"],
[data-theme="light"] .embedded-diagram-host[data-src$="system-prompt-sandwich.svg"] svg text[fill="#555"] {
  fill: #1a2035 !important;
}
[data-theme="warm"] .embedded-diagram-host[data-src$="system-prompt-sandwich.svg"] svg .title,
[data-theme="warm"] .embedded-diagram-host[data-src$="system-prompt-sandwich.svg"] svg .subtitle,
[data-theme="warm"] .embedded-diagram-host[data-src$="system-prompt-sandwich.svg"] svg text[fill="#666"],
[data-theme="warm"] .embedded-diagram-host[data-src$="system-prompt-sandwich.svg"] svg text[fill="#555"] {
  fill: #2b2a27 !important;
}
/* DYNAMIC_BOUNDARY 标签 fill="#ff6b6b" 不变色（它在 #12121a 深色盒里，我的其他
   规则会把红色改成 #c83030 深红，在那上面原白色继承规则也适用） */

[data-theme="warm"] #chapter-body .table-wrapper {
  background:
    linear-gradient(to right, #fbf9f4, #fbf9f4) left center / 20px 100% no-repeat local,
    linear-gradient(to right, rgba(251,249,244,0), #fbf9f4) right center / 20px 100% no-repeat local,
    radial-gradient(ellipse farthest-side at 0% 50%, rgba(61,48,40,0.10), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(ellipse farthest-side at 100% 50%, rgba(61,48,40,0.10), transparent) right center / 14px 100% no-repeat scroll;
  background-attachment: local, local, scroll, scroll;
}
#chapter-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 400px;
}
#chapter-body th {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
  color: var(--accent-cyan);
  font-weight: 600;
}
#chapter-body td {
  border: 1px solid var(--border);
  padding: 8px 14px;
  color: var(--text-secondary);
}
#chapter-body tr:hover td { background: rgba(0,212,255,0.03); }

#chapter-body ul, #chapter-body ol {
  margin: 12px 0 12px 24px;
}
#chapter-body li {
  margin-bottom: 6px;
  color: var(--text-secondary);
}

#chapter-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}
.empty-state h2 { font-size: 20px; margin-bottom: 10px; color: var(--text-secondary); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===== WELCOME VIEW ===== */
#welcome {
  /* 沉浸式：welcome.active 时 topnav 隐藏（见前文 sibling 选择器），
     welcome 本身 padding-top 也归零；非 active（如 hero 已播完但用户手动回 welcome）
     则保留 48px 为 topnav 留位 */
  padding-top: 0;
  /* 关键：显式 overflow-x: hidden。CSS 规则：一侧设 auto 时另一侧 visible 会被
     强制计算为 auto → 产生不必要的横向滚动条（用户反馈"底部白边/进度条"）。
     沉浸开屏动画不允许底部 scrollbar 入侵视觉。 */
  overflow: hidden auto;
  background: var(--bg-primary);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(0,212,255,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(123,97,255,0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 60%, rgba(0,212,255,0.03) 0%, transparent 40%);
}
.welcome-container {
  /* Bug 2 修复（2026-04-26）：宽屏下从 860px 死板限制 → 弹性 1100px 上限 + 92vw 留白
     2400px 屏在原方案下两侧 ~770px 黑边，改后两侧约 96px 留白。 */
  max-width: min(1100px, 92vw);
  margin: 0 auto;
  padding: 48px 24px 60px;
  animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- 1. Cover Hero --- */
.welcome-hero {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
}
.cover-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--accent-cyan);
  border: 1px solid rgba(0,212,255,0.3);
  padding: 5px 16px;
  border-radius: 20px;
  background: rgba(0,212,255,0.06);
  margin-bottom: 24px;
  animation: fadeInUp 0.6s ease-out 0.1s both;
}
.welcome-title {
  font-size: 52px;
  font-weight: 800;
  color: var(--accent-cyan);
  text-shadow: 0 0 40px rgba(0,212,255,0.3);
  letter-spacing: 2px;
  line-height: 1.15;
  margin-bottom: 16px;
  animation: fadeInUp 0.7s ease-out 0.2s both;
}
.title-sub {
  display: block;
  font-size: 36px;
  font-weight: 600;
  color: var(--text-primary);
  text-shadow: none;
  letter-spacing: 1px;
  margin-top: 4px;
}
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 40px rgba(0,212,255,0.3); }
  50% { text-shadow: 0 0 60px rgba(0,212,255,0.5), 0 0 120px rgba(0,212,255,0.1); }
}
.welcome-subtitle-line {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 300;
  letter-spacing: 1px;
  margin-bottom: 20px;
  animation: fadeInUp 0.7s ease-out 0.3s both;
}
.cover-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  animation: fadeInUp 0.7s ease-out 0.4s both;
}
.meta-val {
  color: var(--accent-cyan);
  font-weight: 600;
}
.meta-sep {
  color: var(--text-muted);
  opacity: 0.4;
}

/* --- 2. Highlight Cards --- */
.cover-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
  animation: fadeInUp 0.8s ease-out 0.5s both;
}
.highlight-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 20px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.highlight-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  opacity: 0;
  transition: opacity 0.25s;
}
.highlight-card:hover {
  border-color: rgba(0,212,255,0.3);
  transform: translateY(-3px);
}
.highlight-card:hover::before { opacity: 1; }
.highlight-num {
  font-size: 42px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  line-height: 1;
}
.highlight-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 2px;
  margin-bottom: 10px;
}
.highlight-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- 3. Cover Story (compact) --- */
.cover-story {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}
.story-before, .story-after {
  flex: 1;
}
.story-label {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.story-before p, .story-after p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
.story-after p strong { color: var(--accent-cyan); }
.story-arrow-icon {
  flex-shrink: 0;
  color: var(--accent-cyan);
  opacity: 0.6;
}

/* --- 4. Cover Actions --- */
.cover-actions {
  text-align: center;
  animation: fadeInUp 0.8s ease-out 0.7s both;
}
.cover-actions-main {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 28px;
}

/* Primary button */
.btn-enter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  padding: 15px 36px;
}
.btn-primary-large {
  background: var(--accent-cyan);
  color: var(--bg-primary);
  box-shadow: 0 0 24px rgba(0,212,255,0.15);
}
.btn-primary-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 28px rgba(0,212,255,0.35);
}
.btn-primary-large svg { stroke: var(--bg-primary); }

/* Secondary button */
.btn-secondary-large {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border) !important;
}
.btn-secondary-large:hover {
  transform: translateY(-2px);
  border-color: var(--accent-cyan) !important;
  background: rgba(0,212,255,0.05);
  box-shadow: 0 4px 20px rgba(0,212,255,0.1);
}
.btn-secondary-large svg { stroke: var(--text-secondary); }

/* Metaphor switch (de-emphasized) */
.cover-metaphor-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.metaphor-switch-label {
  font-size: 12px;
  color: var(--text-muted);
}
.metaphor-choice-inline {
  display: flex;
  gap: 6px;
}
.metaphor-btn-inline {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.metaphor-btn-inline:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
  background: rgba(0,212,255,0.04);
}
.metaphor-btn-inline.selected {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0,212,255,0.08);
}
.metaphor-switch-note {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
}

/* Metaphor toggle in nav */
.metaphor-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}
.metaphor-toggle:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* ===== LANDING SECTIONS ===== */
.landing-section {
  max-width: 1000px; margin: 80px auto; padding: 40px 24px;
  position: relative;
}
.landing-section + .landing-section::before {
  content: '';
  position: absolute; top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  opacity: 0.3;
}
.section-title {
  font-size: 24px; color: var(--accent-cyan); text-align: center;
  margin-bottom: 8px; font-weight: 700;
  letter-spacing: 1px;
}
.section-subtitle {
  text-align: center; color: var(--text-muted); font-size: 14px; margin-bottom: 32px;
  line-height: 1.6;
}

/* Fade-in on scroll */
.fade-in-section {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-section.visible { opacity: 1; transform: translateY(0); }

/* ===== AGENT LOOP VISUALIZATION (ccunpacked-inspired) ===== */

/* Section header */
.loop-section-header { text-align: center; margin-bottom: 32px; }
.loop-section-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--accent-cyan); letter-spacing: 2px;
  display: inline-block; margin-bottom: 4px;
  background: rgba(0,212,255,0.08); padding: 2px 12px; border-radius: 4px;
}
.loop-title {
  font-size: 28px; font-weight: 700; color: var(--text-primary);
  margin: 8px 0 6px;
}
.loop-subtitle {
  font-size: 14px; color: var(--text-muted); font-style: italic;
}

/* Diagram images */
.loop-diagram-img, .df-diagram-img {
  margin-bottom: 24px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: var(--cc-bg-primary);
}
.loop-diagram-img img, .df-diagram-img img {
  width: 100%; height: auto; display: block;
}

/* Timeline track */
.loop-timeline { margin-bottom: 28px; }
.loop-track {
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; padding: 0 4px;
}
.loop-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; position: relative; z-index: 2; transition: all 0.3s;
  flex: 1; padding: 4px 0;
}
.step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--text-muted); transition: all 0.3s;
}
.loop-step.active .step-num {
  background: var(--accent-cyan); border-color: var(--accent-cyan);
  color: var(--cc-text-primary); box-shadow: 0 0 16px rgba(0,212,255,0.5);
}
.loop-step.visited .step-num {
  background: rgba(0,212,255,0.2); border-color: var(--accent-cyan); color: var(--accent-cyan);
}
.step-label {
  font-size: 10px; color: var(--text-muted); text-align: center;
  white-space: nowrap; transition: color 0.3s; font-weight: 500;
}
.loop-step.active .step-label { color: var(--accent-cyan); font-weight: 700; }
.loop-step:hover .step-label { color: var(--text-secondary); }
.loop-step:hover .step-num { border-color: var(--text-muted); }
/* Bug 修复 2026-04-27：原 progress-bar 用 margin-top:-28px 把横线拉到圆圈正中央，
   视觉上像横线穿心，丑。删掉。11 个数字编号已经够清楚显示进度。 */
.loop-progress-bar {
  display: none;
}
.loop-progress-fill {
  display: none;
}

/* Loop card container */
.loop-card {
  min-height: 280px;
}

/* Detail panels */
.loop-detail {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px 28px;
  animation: loopCardIn 0.4s ease;
}
.loop-detail.hidden { display: none; }
@keyframes loopCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.loop-detail-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.loop-step-badge {
  display: flex; align-items: center; gap: 8px; font-size: 16px;
  color: var(--text-primary);
}
.badge-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-cyan); color: var(--cc-text-primary);
  font-family: var(--font-mono); font-size: 12px; font-weight: 800;
}
.loop-src-link {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent-purple);
  background: rgba(123,97,255,0.08); padding: 4px 10px; border-radius: 6px;
  cursor: pointer; transition: background 0.2s; text-decoration: none;
  border: 1px solid rgba(123,97,255,0.15);
}
.loop-src-link:hover {
  background: rgba(123,97,255,0.18);
}

.loop-desc {
  font-size: 14px; color: var(--text-secondary); line-height: 1.7;
  margin-bottom: 16px;
}
.loop-desc code {
  background: rgba(0,212,255,0.08); padding: 1px 6px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 12px; color: var(--accent-cyan);
}

.loop-viz {
  margin-bottom: 16px;
}

.loop-note {
  font-size: 13px; color: var(--text-muted); line-height: 1.6;
  padding: 10px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.02); border-left: 3px solid var(--accent-gold);
}
.loop-note code {
  background: rgba(0,212,255,0.08); padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px; color: var(--accent-cyan);
}

/* ---- Terminal Mock ---- */
.term-mock {
  background: var(--cc-bg-elevated); border: 1px solid var(--cc-border-default); border-radius: 10px;
  overflow: hidden; font-family: var(--font-mono); font-size: 13px;
}
.term-header {
  background: var(--cc-bg-secondary); padding: 8px 12px;
  display: flex; gap: 6px; align-items: center;
}
.term-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.term-dot.red { background: #ff5f57; }
.term-dot.yellow { background: #febc2e; }
.term-dot.green { background: #28c840; }
.term-body { padding: 14px 16px; }
.term-line { line-height: 1.8; }
.term-green { color: #48bb78; font-weight: 600; }
.term-white { color: var(--cc-text-primary); }
.term-cursor { color: var(--cc-text-primary); }
.term-center { color: var(--text-muted); text-align: center; margin-top: 8px; font-size: 12px; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.blink { animation: blink 1s step-end infinite; color: var(--accent-cyan); }

/* ---- Code Mock ---- */
.code-mock {
  background: var(--cc-bg-elevated); border: 1px solid var(--cc-border-default); border-radius: 10px;
  padding: 16px 18px; font-family: var(--font-mono); font-size: 12.5px;
  line-height: 1.7; overflow-x: auto;
}
.code-line { white-space: pre; color: var(--cc-text-primary); }
.c-kw { color: #c792ea; font-weight: 600; }
.c-fn { color: #82aaff; }
.c-str { color: #c3e88d; }
.c-comment { color: var(--cc-text-muted); font-style: italic; }
.c-green { color: #48bb78; }
.tool-use-block {
  background: rgba(0,212,255,0.06); border-left: 3px solid var(--accent-cyan);
  padding-left: 10px; margin-left: -3px;
}

/* ---- History Mock ---- */
.history-mock {
  background: var(--cc-bg-elevated); border: 1px solid var(--cc-border-default); border-radius: 10px;
  padding: 14px 16px; font-family: var(--font-mono); font-size: 12.5px;
}
.hist-item {
  padding: 6px 10px; border-radius: 6px; margin-bottom: 4px;
  color: var(--text-secondary); line-height: 1.5;
  border-left: 3px solid transparent; transition: all 0.3s;
}
.hist-item.active {
  background: rgba(0,212,255,0.06); border-left-color: var(--accent-cyan);
}
.hist-role {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 11px; font-weight: 700; margin-right: 6px;
}
.hist-role.user { background: rgba(72,187,120,0.15); color: #48bb78; }
.hist-role.asst { background: rgba(130,170,255,0.15); color: #82aaff; }
.hist-new {
  display: inline-block; background: var(--accent-cyan); color: var(--cc-text-primary);
  font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 3px;
  margin-left: 6px; letter-spacing: 0.5px;
}

/* ---- Sandwich (System Prompt) Mock ---- */
.sandwich-mock {
  display: flex; flex-direction: column; gap: 4px;
}
.sw-layer {
  padding: 10px 16px; border-radius: 8px; font-size: 13px;
  background: rgba(255,255,255,0.03);
  border-left: 4px solid var(--c, var(--border));
  display: flex; justify-content: space-between; align-items: center;
  transition: transform 0.2s, background 0.2s;
}
.sw-layer:hover {
  transform: translateX(4px); background: rgba(255,255,255,0.06);
}
.sw-size {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  white-space: nowrap;
}

/* ---- API Stream Mock ---- */
.api-mock {
  background: var(--cc-bg-elevated); border: 1px solid var(--cc-border-default); border-radius: 10px;
  padding: 16px 18px; overflow: hidden;
}
.api-flow {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 16px;
}
.api-box {
  padding: 8px 18px; border-radius: 8px; font-family: var(--font-mono);
  font-size: 12px; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary);
}
.api-box.api-active {
  border-color: var(--accent-cyan); color: var(--accent-cyan);
  box-shadow: 0 0 12px rgba(0,212,255,0.2);
}
.api-arrow {
  font-family: var(--font-mono); color: var(--accent-gold); font-size: 12px;
  font-weight: 700; letter-spacing: 1px;
}
.sse-stream {
  background: var(--cc-bg-primary); border-radius: 6px; padding: 10px 12px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  max-height: 120px; overflow-y: auto;
}
.sse-line {
  color: var(--cc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sse-line:nth-child(odd) { color: var(--cc-text-muted); }

/* SSE streaming animation */
.sse-stream .sse-line {
  opacity: 0; animation: sseAppear 0.3s ease forwards;
}
.sse-stream .sse-line:nth-child(1) { animation-delay: 0.1s; }
.sse-stream .sse-line:nth-child(2) { animation-delay: 0.3s; }
.sse-stream .sse-line:nth-child(3) { animation-delay: 0.5s; }
.sse-stream .sse-line:nth-child(4) { animation-delay: 0.7s; }
.sse-stream .sse-line:nth-child(5) { animation-delay: 0.9s; }
@keyframes sseAppear {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Token Bar Chart ---- */
.token-mock {
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 0;
}
.token-row {
  display: flex; align-items: center; gap: 12px;
}
.token-label {
  width: 90px; font-family: var(--font-mono); font-size: 12px;
  color: var(--text-secondary); text-align: right; flex-shrink: 0;
}
.token-bar {
  height: 22px; border-radius: 4px; transition: width 0.8s ease;
  min-width: 4px;
}
.token-val {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
}

/* ---- Decision Tree Mock ---- */
.decision-mock {
  background: var(--cc-bg-elevated); border: 1px solid var(--cc-border-default); border-radius: 10px;
  padding: 20px; text-align: center;
}
.dec-q {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 16px; padding: 8px 16px;
  background: rgba(255,255,255,0.04); border-radius: 8px;
  display: inline-block;
}
.dec-branches {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
}
.dec-yes, .dec-no {
  flex: 1; min-width: 180px; max-width: 260px;
  padding: 14px 16px; border-radius: 10px;
  font-size: 14px; line-height: 1.6; text-align: left;
}
.dec-yes {
  background: rgba(72,187,120,0.08); border: 1px solid rgba(72,187,120,0.25);
  color: #48bb78;
}
.dec-no {
  background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.25);
  color: #ff6b6b;
}
.dec-sub {
  display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px;
}
.dec-loop-arrow {
  margin-top: 16px; font-family: var(--font-mono); font-size: 13px;
  color: var(--accent-gold); font-weight: 600;
}

/* ---- Loop controls ---- */
.loop-controls {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; margin-top: 24px; flex-wrap: wrap;
}
.loop-btn {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
  padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 14px;
  transition: all 0.2s; font-weight: 600;
}
.loop-btn:hover:not(:disabled) { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.loop-btn:disabled { opacity: 0.3; cursor: default; }
.loop-btn-primary {
  background: rgba(0,212,255,0.1); border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.loop-counter {
  font-family: var(--font-mono); font-size: 13px; color: var(--text-muted);
  margin: 0 4px;
}
.loop-speed {
  display: flex; gap: 4px; margin-left: 8px;
}
.speed-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; transition: all 0.2s;
}
.speed-btn:hover { color: var(--text-secondary); border-color: var(--text-secondary); }
.speed-btn.active {
  background: rgba(0,212,255,0.1); border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* ===== ARCHITECTURE EXPLORER ===== */
.arch-header { text-align: center; margin-bottom: 24px; }

.arch-breadcrumb {
  display: flex; align-items: center; gap: 4px; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 13px; flex-wrap: wrap;
}
.arch-crumb {
  color: var(--text-muted); cursor: pointer; padding: 2px 8px;
  border-radius: 4px; transition: all 0.2s;
}
.arch-crumb:hover { color: var(--accent-cyan); background: rgba(0,212,255,0.08); }
.arch-crumb::after { content: ' /'; color: var(--border); margin-left: 4px; }
.arch-crumb:last-child::after { content: ''; }
.arch-crumb:last-child { color: var(--text-primary); font-weight: 600; cursor: default; }
.arch-crumb:last-child:hover { background: none; color: var(--text-primary); }

.arch-treemap {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 320px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 6px; align-content: flex-start;
}

.arch-block {
  border-radius: 8px; padding: 10px 12px; cursor: pointer;
  position: relative; overflow: hidden; transition: all 0.25s;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 60px; border: 1px solid transparent;
}
.arch-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.15);
  z-index: 2;
}
.arch-block-name {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--cc-text-on-accent); text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  line-height: 1.3; word-break: break-all;
}
.arch-block-stats {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.75); margin-top: 4px;
}
.arch-block-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,0.3); border-radius: 0 0 8px 8px;
}

.arch-info {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding: 10px 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; min-height: 42px;
}
.arch-info-name { color: var(--text-primary); font-weight: 600; }
.arch-info-stats { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.arch-legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px;
  justify-content: center;
}
.arch-legend-item {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: var(--text-muted);
}
.arch-legend-dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}

/* Zoom transition */
.arch-treemap.zooming .arch-block {
  animation: archZoomIn 0.3s ease;
}
@keyframes archZoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== DATA FLOW VISUALIZATIONS ===== */

/* Tabs */
.df-tabs {
  display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap;
  justify-content: center;
}
.df-tab {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted);
  padding: 8px 18px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 500; transition: all 0.2s;
}
.df-tab:hover { color: var(--text-secondary); border-color: var(--text-muted); }
.df-tab.active {
  background: rgba(0,212,255,0.1); border-color: var(--accent-cyan);
  color: var(--accent-cyan); font-weight: 700;
}

/* Panels */
.df-panel { display: none; animation: loopCardIn 0.4s ease; }
.df-panel.active { display: block; }

/* Flow diagram (horizontal) */
.df-flow {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; padding: 16px 0; flex-wrap: wrap; justify-content: center;
}
.df-node {
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 12px 16px; border-radius: 10px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  min-width: 120px; transition: all 0.2s;
}
.df-node:hover { border-color: var(--accent-cyan); transform: translateY(-2px); }
.df-node-sub {
  display: block; font-size: 11px; font-weight: 400; color: var(--text-muted);
  margin-top: 4px;
}
.df-node-start { border-color: #48bb78; }
.df-node-api { border-color: var(--accent-purple); }
.df-node-end { border-color: var(--accent-cyan); }
.df-arrow {
  color: var(--accent-gold); font-family: var(--font-mono); font-weight: 700;
  font-size: 16px; flex-shrink: 0;
}

/* Detail grid */
.df-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-top: 16px;
}
.df-detail-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px;
}
.df-detail-title {
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 12px;
}

/* Bar chart in detail cards */
.df-bars { display: flex; flex-direction: column; gap: 8px; }
.df-bar-row { display: flex; align-items: center; gap: 8px; }
.df-bar-label {
  width: 80px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); text-align: right; flex-shrink: 0;
}
.df-bar-track {
  flex: 1; height: 18px; background: rgba(255,255,255,0.04); border-radius: 4px;
  overflow: hidden;
}
.df-bar-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }
.df-bar-val {
  width: 55px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); flex-shrink: 0;
}

/* List items */
.df-list { display: flex; flex-direction: column; gap: 8px; }
.df-list-item {
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.df-tag {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  margin-right: 4px;
}
.df-tag.green { background: rgba(72,187,120,0.15); color: #48bb78; }
.df-tag.gold { background: rgba(255,217,61,0.15); color: #ffd93d; }
.df-tag.cyan { background: rgba(0,212,255,0.15); color: #00d4ff; }
.df-tag.red { background: rgba(255,107,107,0.15); color: #ff6b6b; }

.df-src-list {
  font-size: 12px; color: var(--text-secondary); line-height: 1.8;
}
.df-src-list code {
  background: rgba(0,212,255,0.08); padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px; color: var(--accent-cyan);
}

/* State Machine (Permission) */
.df-state-machine { padding: 8px 0; }
.df-sm-row {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  margin-bottom: 20px; flex-wrap: wrap;
}
.df-sm-state {
  background: var(--bg-card); border: 2px solid var(--border);
  padding: 14px 20px; border-radius: 12px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.df-sm-sub {
  display: block; font-size: 11px; font-weight: 400; color: var(--text-muted);
  margin-top: 4px;
}
.df-sm-start { border-color: var(--accent-cyan); }
.df-sm-check { border-color: var(--accent-gold); }
.df-sm-arrow { font-size: 20px; color: var(--accent-gold); font-weight: 700; }
.df-sm-branches {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.df-sm-branch {
  border-radius: 10px; padding: 14px; border: 1px solid var(--border);
}
.df-sm-allow { background: rgba(72,187,120,0.05); border-color: rgba(72,187,120,0.3); }
.df-sm-deny { background: rgba(255,107,107,0.05); border-color: rgba(255,107,107,0.3); }
.df-sm-ask { background: rgba(255,217,61,0.05); border-color: rgba(255,217,61,0.3); }
.df-sm-label { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.df-sm-allow .df-sm-label { color: #48bb78; }
.df-sm-deny .df-sm-label { color: #ff6b6b; }
.df-sm-ask .df-sm-label { color: #ffd93d; }
.df-sm-conditions { display: flex; flex-direction: column; gap: 4px; }
.df-sm-cond {
  font-size: 12px; color: var(--text-secondary); padding-left: 12px;
  position: relative;
}
.df-sm-cond::before { content: '•'; position: absolute; left: 0; }

/* Stack layers */
.df-stack { display: flex; flex-direction: column; gap: 4px; }
.df-stack-layer {
  padding: 8px 14px; border-radius: 6px; font-size: 12px;
  color: var(--text-secondary); background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--sc, var(--border));
}

/* Pipeline (Compact) */
.df-pipeline { display: flex; flex-direction: column; gap: 0; }
.df-pipe-stage {
  display: flex; gap: 14px; padding: 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px;
}
.df-pipe-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-cyan); color: var(--cc-text-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.df-pipe-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.df-pipe-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.df-pipe-desc code {
  background: rgba(0,212,255,0.08); padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px; color: var(--accent-cyan);
}
.df-pipe-threshold { margin-top: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.8; }
.df-pipe-note {
  margin-top: 6px; font-size: 11px; color: var(--text-muted);
  font-style: italic;
}
.df-pipe-connector {
  text-align: center; color: var(--accent-gold); font-size: 18px;
  font-weight: 700; padding: 4px 0;
}

/* Assembly (System Prompt) */
.df-assembly { padding: 8px 0; }
.df-asm-title { font-size: 16px; font-weight: 700; color: var(--text-primary); text-align: center; }
.df-asm-subtitle {
  font-size: 13px; color: var(--text-muted); text-align: center;
  margin-bottom: 16px;
}
.df-asm-layers { display: flex; flex-direction: column; gap: 6px; }
.df-asm-layer {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 4px solid var(--lc, var(--border));
  border-radius: 8px; padding: 12px 16px;
  transition: transform 0.2s, background 0.2s;
}
.df-asm-layer:hover { transform: translateX(4px); background: rgba(255,255,255,0.04); }
.df-asm-layer-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.df-asm-layer-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.df-asm-layer-size {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.df-asm-layer-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
.df-asm-layer-src { font-size: 11px; }
.df-asm-layer-src code {
  background: rgba(0,212,255,0.08); padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 10px; color: var(--accent-cyan);
}
.df-asm-cache-line {
  text-align: center; font-family: var(--font-mono); font-size: 11px;
  color: var(--accent-gold); padding: 6px 0; font-weight: 600;
  letter-spacing: 0.5px;
}
.df-asm-total {
  text-align: center; margin-top: 16px; padding: 10px 16px;
  background: rgba(255,255,255,0.02); border-radius: 8px;
  font-size: 13px; color: var(--text-secondary);
}
.df-asm-total strong { color: var(--accent-cyan); }

/* ===== TOOL GRID ===== */
#tool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.tool-category {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; transition: border-color 0.2s;
}
.tool-category:hover { border-color: var(--text-muted); }
.tool-category-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.tool-category-name { font-size: 14px; font-weight: 600; }
.tool-category-count {
  font-size: 11px; font-family: var(--font-mono); padding: 2px 6px;
  border-radius: 4px; background: rgba(255,255,255,0.05);
}
.tool-item {
  display: inline-block; padding: 4px 8px; margin: 2px;
  font-size: 12px; font-family: var(--font-mono);
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-secondary);
  cursor: default; transition: all 0.15s;
}
.tool-item:hover {
  border-color: var(--text-muted); color: var(--text-primary);
  transform: translateY(-1px);
}
.tool-item.gated { opacity: 0.5; border-style: dashed; }
.tool-item.gated::after { content: ' 🔒'; font-size: 10px; }

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 8px 0;
  animation: bounce-down 2s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(6px); opacity: 0.8; }
}

/* ===== BOTTOM CTA ===== */
.landing-cta { text-align: center; padding-bottom: 60px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; margin-top: 24px; }
.btn-cta {
  padding: 12px 28px; border-radius: 8px; font-size: 15px;
  font-weight: 600; cursor: pointer; border: none; transition: all 0.2s;
}
.btn-cta-primary {
  background: var(--accent-cyan); color: var(--bg-primary);
}
.btn-cta-primary:hover { background: #33ddff; transform: translateY(-1px); }
.btn-cta-secondary {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-cta-secondary:hover { border-color: var(--text-muted); color: var(--text-primary); }

/* ===== FLOATING SECTION NAV ===== */
.section-nav {
  position: fixed; right: 20px; top: 50%;
  transform: translateY(-50%);
  display: none; flex-direction: column; gap: 12px;
  z-index: 50;
}
.section-nav-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); border: 1px solid var(--text-muted);
  transition: all 0.25s; cursor: pointer; text-decoration: none;
}
.section-nav-dot:hover { background: var(--accent-cyan); transform: scale(1.3); }
.section-nav-dot.active { background: var(--accent-cyan); border-color: var(--accent-cyan); }

/* ===== COMMAND CATALOG ===== */
#command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 0 24px;
}
.cmd-category {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  transition: border-color 0.2s;
}
.cmd-category:hover { border-color: var(--text-muted); }
.cmd-category-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.cmd-category-name { font-size: 14px; font-weight: 600; }
.cmd-category-count {
  font-size: 20px; font-weight: 700; font-family: var(--font-mono);
}
.cmd-items { display: flex; flex-direction: column; gap: 4px; }
.cmd-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 4px 6px; border-radius: 4px; transition: background 0.15s;
}
.cmd-item:hover { background: var(--bg-hover); }
.cmd-name {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent-cyan);
  white-space: nowrap; flex-shrink: 0;
}
.cmd-desc {
  font-size: 11px; color: var(--text-muted); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmd-filter-bar {
  padding: 0 24px; margin-bottom: 16px;
}
.cmd-search {
  width: 100%; max-width: 400px; padding: 8px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-primary); font-size: 13px; font-family: var(--font-sans);
  outline: none; transition: border-color 0.2s;
}
.cmd-search:focus { border-color: var(--accent-cyan); }
.internal-commands-toggle { padding: 16px 24px; text-align: center; }
.toggle-internal-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 20px; color: var(--text-muted); font-size: 13px;
  cursor: pointer; transition: all 0.2s;
}
.toggle-internal-btn:hover { border-color: var(--accent-red); color: var(--accent-red); }
.internal-title {
  color: var(--accent-red); font-size: 13px; margin-bottom: 12px;
  padding-left: 24px; opacity: 0.8;
}
#internal-commands {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px;
}
.cmd-internal-item {
  display: inline-block; padding: 3px 8px; font-size: 11px;
  font-family: var(--font-mono); background: rgba(255,107,107,0.08);
  border: 1px solid rgba(255,107,107,0.2); border-radius: 4px;
  color: var(--accent-red); opacity: 0.7; cursor: default;
}
.cmd-internal-item:hover { opacity: 1; }

/* ===== HIDDEN FEATURES ===== */
#hidden-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 0 24px;
}
.hidden-feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.hidden-feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  opacity: 0; transition: opacity 0.25s;
}
.hidden-feature-card:hover {
  border-color: var(--text-muted);
  transform: translateY(-2px);
}
.hidden-feature-card:hover::before { opacity: 1; }
.hf-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.hf-icon { font-size: 28px; }
.hf-title-block { display: flex; flex-direction: column; }
.hf-name { font-size: 16px; font-weight: 700; }
.hf-flag {
  font-size: 11px; color: var(--text-muted); font-family: var(--font-mono);
  margin-top: 2px;
}
.hf-desc {
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
  margin-bottom: 10px;
}
.hf-meta {
  display: flex; gap: 12px; font-size: 11px; color: var(--text-muted);
}
.hf-source {
  font-family: var(--font-mono); opacity: 0.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hf-detail {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
  margin-top: 0;
}
.hidden-feature-card.expanded .hf-detail {
  max-height: 200px; opacity: 1; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border);
}

/* Color accents for each hidden feature card on hover */
.hidden-feature-card:nth-child(1)::before { background: #ffd93d; }
.hidden-feature-card:nth-child(2)::before { background: #e88dff; }
.hidden-feature-card:nth-child(3)::before { background: #7b61ff; }
.hidden-feature-card:nth-child(4)::before { background: var(--cc-color-teal); }
.hidden-feature-card:nth-child(5)::before { background: #ff6b6b; }
.hidden-feature-card:nth-child(6)::before { background: #63b3ed; }
.hidden-feature-card:nth-child(7)::before { background: #9b7cb8; }
.hidden-feature-card:nth-child(8)::before { background: var(--cc-color-orange); }
.hidden-feature-card:nth-child(9)::before { background: #fc8181; }
.hidden-feature-card:nth-child(10)::before { background: #68d391; }
.hidden-feature-card:nth-child(11)::before { background: #b794f4; }
.hidden-feature-card:nth-child(12)::before { background: #76e4f7; }

/* Section code styling */
#hidden-features-section code {
  background: rgba(0,212,255,0.1);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-cyan);
}

/* ===== CHART EMBEDDING SYSTEM ===== */
.chart-embed-container {
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color 0.3s;
}
.chart-embed-container:hover {
  border-color: var(--accent-cyan);
}
.chart-embed-container.expanded {
  border-color: var(--accent-cyan);
}

/* Header / toggle bar */
.chart-embed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
.chart-embed-header:hover {
  background: var(--bg-hover);
}
.chart-embed-header-disabled {
  cursor: default;
  opacity: 0.6;
}
.chart-embed-header-disabled:hover {
  background: transparent;
}
.chart-embed-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.chart-embed-title {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.chart-embed-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-purple);
  background: rgba(123, 97, 255, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.chart-embed-arrow {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.3s;
  flex-shrink: 0;
}

/* Body (collapsible) */
.chart-embed-body {
  border-top: 1px solid var(--border);
}

/* Toolbar */
.chart-embed-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.15);
}
.chart-embed-fullscreen {
  font-size: 12px;
  color: var(--accent-cyan);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  transition: background 0.2s, border-color 0.2s;
}
.chart-embed-fullscreen:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.4);
}

/* Iframe wrapper */
.chart-embed-iframe-wrap {
  position: relative;
  min-height: 120px;
  background: var(--cc-bg-primary);
}
.chart-embed-iframe {
  display: none; /* shown after load */
  width: 100%;
  border: none;
  background: var(--cc-bg-elevated);
}

/* Loading spinner */
.chart-embed-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
}
.chart-embed-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: chartSpinnerRotate 0.8s linear infinite;
}
@keyframes chartSpinnerRotate {
  to { transform: rotate(360deg); }
}

/* Fallback (404 / error) */
.chart-embed-fallback {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
}
.chart-embed-fallback-icon {
  font-size: 20px;
}

/* Resize handle */
.chart-embed-resize-handle {
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  color: var(--text-muted);
  font-size: 16px;
  letter-spacing: 3px;
  background: rgba(0, 0, 0, 0.2);
  user-select: none;
  transition: background 0.2s, color 0.2s;
}
.chart-embed-resize-handle:hover {
  background: rgba(0, 212, 255, 0.1);
  color: var(--accent-cyan);
}

/* Unmatched (no chart available yet) */
.chart-embed-unmatched {
  opacity: 0.5;
  border-style: dashed;
}
.chart-embed-unmatched:hover {
  border-color: var(--border);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  #sidebar { width: 240px; min-width: 200px; }
  #chapter-content { padding: 24px; }
  .title-glow { font-size: 24px; }
  .stats-strip { gap: 16px; }
  #detail-panel { width: 100%; }
  #command-grid { grid-template-columns: 1fr; }
  #hidden-features-grid { grid-template-columns: 1fr; }
  .section-nav { display: none !important; }
  .cover-highlights { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .highlight-num { font-size: 34px; }
  .highlight-card { padding: 20px 14px 18px; }
  .cover-story { flex-direction: column; gap: 12px; text-align: center; }
  .story-arrow-icon { transform: rotate(90deg); }
  .cover-actions-main { flex-direction: column; align-items: center; }
  .btn-enter { width: 280px; justify-content: center; }
  .cover-metaphor-switch { flex-direction: column; gap: 8px; }
  .loop-track { flex-wrap: wrap; gap: 8px; }
  .loop-step .step-label { font-size: 10px; }

  /* Chart embed: smaller padding */
  .chart-embed-header { padding: 12px 14px; gap: 8px; }
  .chart-embed-title { font-size: 13px; }
  .chart-embed-badge { font-size: 10px; }

  /* Nav bar: hide text labels, keep icons */
  #topnav { padding: 0 12px; }
  .nav-btn { padding: 6px 8px; font-size: 12px; }
  .nav-center { display: none; }
  .version-badge { display: none; }
  .shortcuts-btn { display: none; }
}
/* ===== Mobile TOC drawer ===== */
/* 默认桌面端隐藏 hamburger */
.mobile-only { display: none !important; }

/* Backdrop 默认不存在，JS 按需创建 */
.mobile-toc-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.mobile-toc-backdrop.visible { opacity: 1; }

@media (max-width: 600px) {
  #sidebar { display: none; }
  /* hamburger 只在 reader 视图激活时才显示，避免 landing 页面出现无用按钮 */
  #reader.active ~ #topnav .mobile-only,
  body:has(#reader.active) #topnav .mobile-only,
  #topnav .mobile-only { display: inline-flex !important; }
  /* hamburger 增强可见性（MiniMax usertest 反馈对比度不足） */
  #mobile-toc-toggle {
    background: rgba(199, 125, 46, 0.12);  /* warm amber tint 12% */
    border: 1px solid rgba(199, 125, 46, 0.35);
    border-radius: 8px;
    color: var(--text-primary, #2b2a27);
  }
  #mobile-toc-toggle:active, #mobile-toc-toggle[aria-expanded="true"] {
    background: rgba(199, 125, 46, 0.28);
    border-color: rgba(199, 125, 46, 0.65);
    box-shadow: 0 0 0 2px rgba(199, 125, 46, 0.18);
  }
  [data-theme="dark"] #mobile-toc-toggle {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fff;
  }
  [data-theme="dark"] #mobile-toc-toggle:active,
  [data-theme="dark"] #mobile-toc-toggle[aria-expanded="true"] {
    background: rgba(251, 191, 36, 0.26);
    border-color: rgba(251, 191, 36, 0.6);
  }
  /* slide-in drawer */
  #sidebar.mobile-open {
    display: block !important;
    position: fixed;
    top: 44px;
    left: 0;
    width: 85vw;
    max-width: 340px;
    height: calc(100vh - 44px);
    z-index: 999;
    background: var(--bg-primary, #1c1917);
    box-shadow: 6px 0 24px rgba(0,0,0,0.4);
    overflow-y: auto;
    padding: 16px;
    transform: translateX(0);
    animation: sidebar-slide-in 0.25s ease;
  }
  @keyframes sidebar-slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
  #chapter-content { padding: 16px; }
  .stats-strip .stat { min-width: 70px; }
  .stat-num { font-size: 18px; }
  #command-grid { grid-template-columns: 1fr; padding: 0 12px; }
  #hidden-features-grid { grid-template-columns: 1fr; padding: 0 12px; }

  /* Nav bar: icon-only mode */
  #topnav { padding: 0 8px; height: 44px; }
  .nav-left, .nav-right { gap: 4px; flex-wrap: nowrap; }
  .nav-btn { padding: 6px; gap: 0; min-width: 44px; min-height: 44px; /* HIG tap target */ }
  .nav-btn svg { width: 22px; height: 22px; }
  /* Hide text labels inside nav buttons — show icon only */
  .nav-btn { font-size: 0; }
  .nav-btn svg { font-size: initial; }
  /* 收窄 metaphor-toggle 和 cc-theme/lang 切换，保证 nav 不挤出 viewport */
  .metaphor-toggle { padding: 4px 6px; font-size: 10px; gap: 4px; max-width: 90px; }
  .metaphor-toggle #metaphor-label { display: none; }  /* mobile 下只剩 emoji icon */
  .cc-lang-switcher { gap: 0; }
  .cc-lang-btn, .cc-theme-btn { min-width: 36px; min-height: 36px; padding: 6px; }
  .metaphor-toggle { padding: 4px 6px; font-size: 12px; }
  #metaphor-label { display: none; }

  /* Welcome page mobile */
  .welcome-title { font-size: 32px; }
  .title-sub { font-size: 22px; }
  .welcome-subtitle-line { font-size: 15px; }
  .welcome-container { padding: 24px 16px 40px; }
  .welcome-hero { margin-bottom: 32px; }
  .cover-badge { font-size: 10px; letter-spacing: 2px; padding: 4px 12px; }
  .cover-highlights { grid-template-columns: 1fr; gap: 10px; }
  .highlight-card { padding: 18px 16px; display: flex; align-items: center; gap: 14px; text-align: left; }
  .highlight-card::before { display: none; }
  .highlight-num { font-size: 32px; flex-shrink: 0; }
  .highlight-unit { display: inline; margin: 0 0 0 4px; font-size: 13px; }
  .highlight-desc { font-size: 12px; }
  .cover-story { padding: 16px; gap: 10px; }
  .story-before p, .story-after p { font-size: 13px; }
  .cover-actions-main { flex-direction: column; align-items: stretch; }
  .btn-enter { width: 100%; justify-content: center; padding: 14px 24px; font-size: 15px; }
  .cover-metaphor-switch { flex-direction: column; gap: 6px; }
  .metaphor-btn-inline { padding: 6px 16px; }
  .cover-meta { font-size: 11px; gap: 4px; }

  /* Landing page mobile */
  .landing-header { padding: 20px 16px; }
  .landing-lede { font-size: 13px; margin-top: 10px; padding: 0 8px; line-height: 1.6; }
  .title-glow { font-size: 20px; }
  .subtitle { font-size: 14px; }
  .stats-strip { flex-wrap: wrap; justify-content: center; gap: 12px; }

  /* Reader view mobile */
  .chapter-top-nav, .chapter-bottom-nav { padding: 8px 12px; }
  .chapter-nav-btn { font-size: 12px; padding: 6px 10px; }

  /* ===== ENHANCED MOBILE ADAPTATIONS (600px) ===== */

  /* --- Global: prevent horizontal overflow --- */
  html, body { overflow-x: hidden; }
  .view { overflow-x: hidden; }

  /* --- Global: font size reductions --- */
  #chapter-body { font-size: 14px; line-height: 1.75; }
  #chapter-body h1 { font-size: 22px; margin-bottom: 18px; padding-bottom: 10px; }
  #chapter-body h2 { font-size: 18px; margin-top: 28px; margin-bottom: 12px; }
  #chapter-body h3 { font-size: 16px; margin-top: 22px; margin-bottom: 10px; }
  #chapter-body code { font-size: 12px; }
  #chapter-body pre code { font-size: 12px; }
  .section-title { font-size: 20px; }
  .section-subtitle { font-size: 13px; margin-bottom: 24px; }

  /* --- Global: blockquote mobile padding --- */
  #chapter-body blockquote { padding: 8px 12px; margin: 12px 0; }

  /* --- Reader: full-width content area --- */
  #chapter-content { padding: 12px; max-width: 100%; }

  /* --- Reader: code blocks horizontal scroll, no overflow --- */
  #chapter-body pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 24px);
    padding: 12px;
    font-size: 12px;
  }

  /* --- Reader: tables horizontal scroll（mobile 滚动条常驻可见，提示可横滑） --- */
  #chapter-body .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 24px);
    /* 强制显示细滚动条（Firefox + Chromium） */
    scrollbar-width: thin;
    scrollbar-color: var(--cc-border-strong, rgba(255,255,255,0.25)) transparent;
  }
  #chapter-body .table-wrapper::-webkit-scrollbar { height: 6px; }
  #chapter-body .table-wrapper::-webkit-scrollbar-thumb {
    background: var(--cc-border-strong, rgba(255,255,255,0.25));
    border-radius: 3px;
  }
  #chapter-body .table-wrapper::-webkit-scrollbar-track {
    background: transparent;
  }
  /* 裸 <table> 也自动获得横向滚动（markdown 渲染的 table 没有 wrapper） */
  /* min-width: 0 必须显式覆盖桌面端 `#chapter-body table { min-width: 400px }` */
  #chapter-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 24px);
    min-width: 0;
    width: max-content;
    font-size: 12px;
  }
  #chapter-body th, #chapter-body td { padding: 6px 8px; white-space: nowrap; }

  /* --- Reader: images responsive --- */
  #chapter-body img { max-width: 100%; height: auto; }

  /* --- Welcome: cover story compact --- */
  .cover-story { padding: 16px; gap: 10px; }
  .story-before p, .story-after p { font-size: 13px; }
  .story-label { font-size: 10px; }

  /* --- Welcome: actions full-width --- */
  .cover-actions-main { flex-direction: column; align-items: stretch; }
  .btn-enter { width: 100%; justify-content: center; padding: 14px 24px; font-size: 15px; }
  .cover-metaphor-switch { flex-direction: column; gap: 6px; }

  /* --- Welcome: highlight cards vertical --- */
  .cover-highlights { grid-template-columns: 1fr; gap: 10px; }
  .highlight-card { padding: 16px; display: flex; align-items: center; gap: 12px; text-align: left; }
  .highlight-card::before { display: none; }
  .highlight-num { font-size: 28px; flex-shrink: 0; }
  .highlight-unit { display: inline; margin: 0 0 0 4px; font-size: 12px; }
  .highlight-desc { font-size: 12px; }

  /* --- Landing: stats strip wrap and center --- */
  .stats-strip {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
  }
  .stat { min-width: 60px; }
  .stat-num { font-size: 16px; }
  .stat-label { font-size: 10px; }

  /* --- Landing: Agent Loop track horizontal scroll or wrap --- */
  .loop-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
    gap: 2px;
    justify-content: flex-start;
  }
  .loop-step {
    min-width: 56px;
    flex: 0 0 auto;
    padding: 4px 2px;
  }
  .step-label { font-size: 9px; white-space: nowrap; }
  .step-num { width: 24px; height: 24px; font-size: 10px; }
  .loop-progress-bar { margin-left: 12px; margin-right: 12px; }
  .loop-detail { padding: 16px; border-radius: 10px; }
  .loop-card { min-height: 200px; }
  .loop-desc { font-size: 13px; }
  .loop-note { font-size: 12px; padding: 8px 10px; }
  .loop-step-badge { font-size: 14px; }
  .loop-controls { gap: 6px; }
  .loop-btn {
    padding: 10px 14px;
    font-size: 15px;
    min-width: 44px;
    min-height: 44px;  /* HIG tap target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .speed-btn { min-height: 36px; padding: 8px 12px; font-size: 13px; }
  .loop-title { font-size: 22px; }
  .loop-subtitle { font-size: 14px; }

  /* --- Landing: section / inspiration 容器不超 viewport --- */
  .landing-section, #inspiration-container {
    max-width: 100vw;
    overflow-x: hidden;
    padding-left: 12px;
    padding-right: 12px;
  }
  .insp-tabs, .insp-filter-bar, .insp-title-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .insp-filter { min-height: 36px; padding: 8px 12px; }
  .insp-tab { min-height: 44px; }

  /* --- Chart embed: 按钮增大以符合 HIG --- */
  .chart-embed-collapse-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    font-size: 16px;
  }
  .chart-embed-fullscreen {
    min-width: 88px;
    min-height: 40px;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* --- Reader filter 按钮行高度 --- */
  .toc-filter { min-height: 36px; padding: 8px 14px; font-size: 13px; }

  /* --- Chapter nav 按钮放大 --- */
  .chapter-nav-btn { min-height: 40px; padding: 10px 14px; font-size: 13px; }

  /* --- 正文辅助说明字 ≥14px --- */
  .hf-desc, .hint, .section-subtitle, .highlight-desc { font-size: 14px !important; line-height: 1.55; }
  .story-before p, .story-after p { font-size: 14px !important; }

  /* --- Landing: tool grid single column --- */
  #tool-grid { grid-template-columns: 1fr; gap: 12px; }
  .tool-category { padding: 12px; }
  .tool-category-name { font-size: 13px; }
  .tool-item { font-size: 11px; padding: 3px 6px; }

  /* --- Landing: command grid single column (confirm) --- */
  #command-grid { grid-template-columns: 1fr; padding: 0 12px; gap: 12px; }
  .cmd-category { padding: 12px; }
  .cmd-category-name { font-size: 13px; }
  .cmd-name { font-size: 11px; }
  .cmd-desc { font-size: 10px; }
  .cmd-search { font-size: 12px; }
  .cmd-filter-bar { padding: 0 12px; }

  /* --- Landing: hidden features grid single column --- */
  #hidden-features-grid { grid-template-columns: 1fr; padding: 0 12px; gap: 12px; }
  .hidden-feature-card { padding: 14px; }
  .hf-name { font-size: 14px; }
  .hf-desc { font-size: 12px; }
  .hf-icon { font-size: 24px; }
  .hf-meta { font-size: 10px; }

  /* --- Landing: sections padding --- */
  /* flex-shrink: 0 是关键 —— #landing 是 flex column 且 height=viewport，
     子 section 默认 flex-shrink:1 会被压缩到 min-height=0（因为 overflow-x: hidden），
     导致 section 只剩 padding 的 48px 高而内容被裁切。必须禁止收缩，让 #landing 整体滚动。 */
  .landing-section { margin: 40px auto; padding: 24px 12px; flex-shrink: 0; }

  /* --- Landing: detail panel full width --- */
  #detail-panel { width: 100%; max-width: 100vw; padding: 16px; }
  .panel-title { font-size: 18px; }
  .panel-subtitle { font-size: 12px; }
  .panel-description { font-size: 13px; }
  .panel-stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .panel-stat-card { padding: 10px; }
  .panel-stat-card .val { font-size: 18px; }

  /* --- Landing: data flow visualizations --- */
  .df-tabs { gap: 4px; }
  .df-tab { padding: 6px 12px; font-size: 12px; }
  .df-flow { flex-wrap: wrap; gap: 6px; }
  .df-node { min-width: 100px; padding: 10px 12px; font-size: 12px; }
  .df-detail-grid { grid-template-columns: 1fr; }
  .df-bar-label { width: 60px; font-size: 10px; }
  .df-bar-val { width: 45px; font-size: 10px; }
  .df-sm-row { gap: 8px; }
  .df-sm-state { padding: 10px 14px; font-size: 13px; }
  .df-sm-branches { grid-template-columns: 1fr; }

  /* --- Landing: architecture explorer --- */
  .arch-treemap { min-height: 220px; padding: 4px; }
  .arch-block-name { font-size: 11px; }
  .arch-block-stats { font-size: 9px; }
  .arch-info { font-size: 12px; padding: 8px 12px; flex-wrap: wrap; gap: 4px; }

  /* --- Landing: CTA buttons --- */
  .cta-buttons { flex-direction: column; gap: 10px; align-items: stretch; }
  .btn-cta { width: 100%; text-align: center; }

  /* --- Landing: terminal / code mocks --- */
  .term-mock { font-size: 12px; }
  .term-body { padding: 10px 12px; }
  .code-mock { font-size: 11px; padding: 12px 14px; }
  .api-flow { flex-wrap: wrap; gap: 8px; }
  .api-box { padding: 6px 12px; font-size: 11px; }
  .decision-mock { padding: 14px; }
  .dec-q { font-size: 13px; padding: 6px 12px; }
  .dec-branches { flex-direction: column; gap: 12px; }
  .dec-yes, .dec-no { max-width: 100%; min-width: unset; }

  /* --- Token chart mobile --- */
  .token-label { width: 70px; font-size: 11px; }

  /* --- Sandwich / Stack mocks --- */
  .sw-layer { font-size: 12px; padding: 8px 12px; }
  .sw-size { font-size: 10px; }

  /* --- Pipeline stages --- */
  .df-pipe-stage { padding: 12px; gap: 10px; }
  .df-pipe-title { font-size: 13px; }
  .df-pipe-desc { font-size: 11px; }

  /* --- Shortcuts modal mobile --- */
  .shortcuts-content { padding: 20px 16px; min-width: unset; max-width: calc(100vw - 32px); }
  .shortcut-row { font-size: 13px; }

  /* --- Engine SVG mobile --- */
  #engine-svg { min-height: 300px; }
  #engine-container { padding: 0 8px; }

  /* --- Chart embed mobile --- */
  .chart-embed-container { margin: 14px 0; border-radius: 8px; }
  .chart-embed-header { padding: 10px 12px; gap: 6px; }
  .chart-embed-title { font-size: 12px; }
  .chart-embed-badge { font-size: 9px; padding: 2px 6px; }
  .chart-embed-arrow { font-size: 10px; }
  .chart-embed-toolbar { padding: 6px 10px; }
  .chart-embed-fullscreen { font-size: 11px; padding: 3px 8px; }
  .chart-embed-loader { padding: 30px 16px; font-size: 12px; }
}

/* ===== REVIEW MODE ===== */
.review-mode-btn {
  display: flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid var(--cc-border-default); border-radius: 6px;
  color: var(--cc-text-secondary); padding: 4px 10px; cursor: pointer; font-size: 12px;
  transition: all 0.2s;
}
.review-mode-btn:hover { border-color: var(--cc-color-orange); color: var(--cc-color-orange); }
.review-mode-btn.active { background: var(--cc-color-orange); color: var(--cc-text-primary); border-color: var(--cc-color-orange); font-weight: 600; }
.review-icon { font-size: 14px; }

/* Review panel on inline charts */
.review-panel {
  display: none;
  border-top: 1px solid var(--cc-border-default);
  padding: 12px 16px;
  background: var(--cc-bg-secondary);
}
.review-mode-active .review-panel { display: block; }
.review-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.review-chart-id {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  color: var(--cc-color-orange); background: rgba(246,173,85,0.1); padding: 2px 8px; border-radius: 4px;
}
.review-chart-name { color: var(--cc-text-secondary); font-size: 12px; }
.review-versions { font-size: 11px; color: var(--cc-text-muted); width: 100%; margin-top: 4px; }
.version-tag {
  display: inline-block; background: var(--cc-bg-elevated); padding: 1px 6px; border-radius: 3px;
  font-size: 10px; color: var(--cc-color-teal); margin-right: 4px;
}
.review-comments-list {
  max-height: 150px; overflow-y: auto; margin-bottom: 8px;
}
.review-comment-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--cc-border-default); font-size: 12px;
}
.comment-time { color: var(--cc-text-muted); font-size: 10px; white-space: nowrap; min-width: 90px; }
.comment-text { color: var(--cc-text-primary); flex: 1; }
.comment-delete {
  background: none; border: none; color: #ff6b6b; cursor: pointer;
  font-size: 14px; padding: 0 4px; opacity: 0.5;
}
.comment-delete:hover { opacity: 1; }
.no-comments { color: var(--cc-border-default); font-size: 11px; font-style: italic; }
.review-comment-form {
  display: flex; gap: 8px; align-items: flex-end;
}
.review-comment-form textarea {
  flex: 1; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border-default); border-radius: 6px;
  color: var(--cc-text-primary); padding: 8px; font-size: 12px; resize: vertical;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.review-comment-form textarea:focus { border-color: var(--cc-color-orange); outline: none; }
.review-submit-btn {
  background: var(--cc-color-orange); color: var(--cc-text-primary); border: none; border-radius: 6px;
  padding: 8px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.review-submit-btn:hover { background: var(--cc-color-orange); }
.review-export { margin-top: 6px; }
.review-export-btn {
  background: none; border: 1px solid var(--cc-border-default); color: var(--cc-text-muted); padding: 4px 10px;
  border-radius: 4px; font-size: 11px; cursor: pointer;
}
.review-export-btn:hover { border-color: var(--cc-color-teal); color: var(--cc-color-teal); }

/* ===== GALLERY VIEW ===== */
#review-gallery { display: none; padding: 80px 20px 40px; overflow-y: auto; height: 100vh; }
#review-gallery.active { display: block; }
.gallery-header {
  max-width: 1400px; margin: 0 auto 20px; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.gallery-header h2 { color: var(--cc-text-primary); font-size: 20px; }
.gallery-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gallery-controls select {
  background: var(--cc-bg-elevated); color: var(--cc-text-primary); border: 1px solid var(--cc-border-default);
  border-radius: 6px; padding: 6px 10px; font-size: 12px;
}
#gallery-stats { color: var(--cc-text-muted); font-size: 12px; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px; max-width: 1400px; margin: 0 auto;
}
.gallery-card {
  background: var(--cc-bg-elevated); border: 1px solid var(--cc-border-default); border-radius: 10px;
  overflow: hidden; transition: border-color 0.2s;
}
.gallery-card:hover { border-color: var(--cc-border-strong); }
.gallery-card.has-comment { border-color: var(--cc-color-orange); }
.gallery-card-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--cc-bg-secondary); border-bottom: 1px solid var(--cc-border-default);
}
.gallery-chart-id {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  color: var(--cc-color-orange);
}
.gallery-score {
  font-size: 11px; color: var(--cc-color-teal); background: rgba(78,205,196,0.1);
  padding: 1px 6px; border-radius: 3px; margin-left: auto;
}
.gallery-comment-badge {
  background: var(--cc-color-orange); color: var(--cc-text-primary); font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
}
.gallery-chart-name {
  padding: 6px 14px; color: var(--cc-text-secondary); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-chart-preview {
  height: 280px; background: var(--cc-bg-primary); display: flex; align-items: center; justify-content: center;
}
.gallery-load-btn {
  background: var(--cc-bg-elevated); border: 1px solid var(--cc-border-default); color: var(--cc-text-muted);
  padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.gallery-load-btn:hover { border-color: #00d4ff; color: #00d4ff; }
.gallery-iframe { width: 100%; height: 100%; border: none; }
.gallery-review-area { padding: 10px 14px; }
.gallery-comment-input {
  width: 100%; background: var(--cc-bg-elevated); border: 1px solid var(--cc-border-default); border-radius: 6px;
  color: var(--cc-text-primary); padding: 8px; font-size: 12px; resize: vertical; margin-bottom: 8px;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.gallery-comment-input:focus { border-color: var(--cc-color-orange); outline: none; }
.gallery-actions { display: flex; gap: 8px; align-items: center; }
.gallery-submit {
  background: var(--cc-color-orange); color: var(--cc-text-primary); border: none; border-radius: 6px;
  padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.gallery-submit:hover { background: var(--cc-color-orange); }
.gallery-view-comments {
  background: none; border: 1px solid var(--cc-border-default); color: var(--cc-text-muted);
  padding: 5px 12px; border-radius: 6px; font-size: 11px; cursor: pointer;
}
.gallery-view-comments:hover { border-color: var(--cc-color-teal); color: var(--cc-color-teal); }
.gallery-comments-display { padding: 8px 0; }
.gallery-comment-entry {
  padding: 4px 0; border-bottom: 1px solid var(--cc-border-default); font-size: 12px; color: var(--cc-text-primary);
}
.gc-time { color: var(--cc-text-muted); font-size: 10px; margin-right: 8px; }

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-header { flex-direction: column; align-items: flex-start; }
  .gallery-chart-preview { height: 220px; }
  .review-comment-form { flex-direction: column; }
  .review-comment-form textarea { width: 100%; }
}

/* ===== GLOSSARY TOOLTIP SYSTEM ===== */

.glossary-term {
  border-bottom: 1px dashed var(--accent-cyan);
  cursor: help;
  transition: background 0.15s;
}
.glossary-term:hover {
  background: rgba(0, 212, 255, 0.1);
}

.glossary-tooltip {
  position: absolute;
  z-index: 10000;
  max-width: 380px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--accent-cyan);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  font-size: 13px;
  line-height: 1.6;
  pointer-events: none;
  animation: tooltip-fade-in 0.15s ease;
}

@keyframes tooltip-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.glossary-tooltip-title {
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 4px;
  font-size: 14px;
}
.glossary-tooltip-def {
  color: var(--text-primary);
  margin-bottom: 6px;
}
.glossary-tooltip-analogy {
  color: var(--accent-gold);
  font-size: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* ===== DIFFICULTY BADGE ===== */

.difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font-size: 13px;
  font-weight: 400;
  vertical-align: middle;
}
.difficulty-stars {
  color: var(--accent-gold);
  letter-spacing: 1px;
  cursor: help;
}
.difficulty-label {
  color: var(--text-secondary);
  font-size: 11px;
  background: var(--bg-hover);
  padding: 2px 8px;
  border-radius: 10px;
}

/* ===== Q&A PANEL ===== */

.qa-panel {
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.qa-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--bg-card);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.qa-panel-header:hover {
  background: var(--bg-hover);
}
.qa-panel-icon { font-size: 18px; }
.qa-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.qa-panel-toggle {
  color: var(--text-secondary);
  font-size: 12px;
  transition: transform 0.2s;
}
.qa-expanded .qa-panel-toggle {
  transform: rotate(90deg);
}

.qa-panel-body {
  padding: 8px 0;
}

.qa-item {
  border-bottom: 1px solid var(--border);
}
.qa-item:last-child { border-bottom: none; }

.qa-question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.qa-question:hover {
  background: rgba(0, 212, 255, 0.03);
}

.qa-level-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.qa-item[data-level="concept"] .qa-level-badge {
  background: rgba(72, 187, 120, 0.15);
  color: var(--accent-green);
}
.qa-item[data-level="extend"] .qa-level-badge {
  background: rgba(99, 179, 237, 0.15);
  color: var(--accent-blue);
}
.qa-item[data-level="critical"] .qa-level-badge {
  background: rgba(255, 107, 107, 0.15);
  color: var(--accent-red);
}

.qa-difficulty {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.qa-question-text {
  flex: 1;
  min-width: 200px;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}

.qa-expand-icon {
  color: var(--text-muted);
  font-size: 11px;
  transition: transform 0.2s;
}
.qa-item-expanded .qa-expand-icon {
  transform: rotate(90deg);
}

.qa-answer {
  padding: 0 20px 16px 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  border-left: 3px solid var(--accent-cyan);
  margin: 0 20px 12px 20px;
  padding-left: 16px;
  animation: qa-answer-in 0.2s ease;
}

@keyframes qa-answer-in {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 1000px; }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .glossary-tooltip { max-width: 280px; font-size: 12px; }
  .difficulty-badge { margin-left: 0; display: flex; margin-top: 6px; }
  .qa-question { padding: 10px 14px; }
  .qa-answer { margin: 0 14px 10px 14px; padding-left: 12px; }
}

/* ===== CHART GALLERY & REVIEW SYSTEM ===== */

#gallery {
  overflow-y: auto;
  padding: 0;
}

.gallery-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* Top Bar */
.gallery-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-card);
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.gallery-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.gallery-stat {
  font-size: 13px;
  color: var(--text-secondary);
}
.gallery-stat-flag { color: var(--accent-red); font-weight: 600; }
.gallery-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.gallery-filter {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.gallery-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s;
}
.gallery-btn-submit {
  background: var(--accent-cyan);
  color: #000;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gallery-btn-submit:hover { filter: brightness(1.1); }
.gallery-btn-count {
  background: rgba(0,0,0,0.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}

/* Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Card */
.gallery-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s;
}
.gallery-card:hover { border-color: var(--accent-cyan); }
.gallery-card-flagged { border-color: var(--accent-red); }
.gallery-card-expanded {
  grid-column: 1 / -1;
  border-color: var(--accent-cyan);
}

.gallery-card-preview {
  padding: 14px 16px;
  cursor: pointer;
}
.gallery-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.gallery-card-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-cyan);
  background: rgba(0, 212, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}
.gallery-card-name {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 6px;
}
.gallery-card-score {
  font-size: 11px;
  color: var(--accent-gold);
  margin-left: auto;
}
.gallery-card-mini-stars {
  font-size: 14px;
  letter-spacing: 2px;
}

/* Badges */
.gallery-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.gallery-badge-flag { background: rgba(255, 107, 107, 0.15); color: var(--accent-red); }
.gallery-badge-rated { background: rgba(0, 212, 255, 0.1); color: var(--accent-cyan); }
.gallery-badge-revised { background: rgba(78, 205, 196, 0.15); color: var(--accent-teal); }

/* Stars */
.gallery-star {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  transition: color 0.1s;
}
.gallery-star:hover { color: var(--accent-gold); }
.gallery-star-active { color: var(--accent-gold); }
.gallery-stars-large .gallery-star { font-size: 24px; }

/* Expanded Content */
.gallery-expanded-content {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0;
  border-top: 1px solid var(--border);
}

.gallery-iframe-wrap {
  position: relative;
  height: 500px;
  border-right: 1px solid var(--border);
}
.gallery-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--cc-bg-elevated);
}
.gallery-fullscreen-link {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--cc-text-on-accent);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  text-decoration: none;
  z-index: 2;
}
.gallery-fullscreen-link:hover { background: rgba(0, 0, 0, 0.9); }

/* Review Panel (right side of expanded card) */
.gallery-review-panel {
  padding: 16px;
  overflow-y: auto;
  max-height: 500px;
}
.gallery-review-section {
  margin-bottom: 16px;
}
.gallery-review-section label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.gallery-flag-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.gallery-flag-active {
  background: rgba(255, 107, 107, 0.15);
  border-color: var(--accent-red);
  color: var(--accent-red);
}
.gallery-comment-input {
  width: 100%;
  min-height: 80px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  resize: vertical;
}
.gallery-comment-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
}
.gallery-comment-save {
  margin-top: 6px;
  padding: 6px 14px;
  background: var(--accent-cyan);
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.gallery-version-list {
  font-size: 12px;
  color: var(--text-secondary);
}
.gallery-version-item {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.gallery-old-feedback {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 8px 10px;
  border-radius: 6px;
  white-space: pre-wrap;
  max-height: 120px;
  overflow-y: auto;
}

/* Submit Modal */
.gallery-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: tooltip-fade-in 0.15s ease;
}
.gallery-modal {
  background: var(--bg-card);
  border: 1px solid var(--accent-cyan);
  border-radius: 12px;
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
}
.gallery-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.gallery-modal-header h3 { font-size: 16px; color: var(--text-primary); }
.gallery-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
}
.gallery-modal-body { padding: 20px; }
.gallery-modal-summary {
  margin-bottom: 16px;
}
.gallery-modal-summary p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.gallery-modal-json {
  width: 100%;
  height: 200px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent-teal);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 12px;
  resize: vertical;
  margin-bottom: 12px;
}
.gallery-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gallery-modal-actions .gallery-btn {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.gallery-modal-actions .gallery-btn-confirm {
  background: var(--accent-cyan);
  color: #000;
  border: none;
}
.gallery-modal-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Mobile */
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-expanded-content { grid-template-columns: 1fr; }
  .gallery-iframe-wrap { height: 300px; }
  .gallery-review-panel { max-height: none; }
  .gallery-top-bar { flex-direction: column; align-items: stretch; }
  .gallery-actions { justify-content: space-between; }
  .gallery-modal { width: 95%; }
}

/* ===== INSPIRATION LAB ===== */
#inspiration { overflow-y: auto; padding-top: 48px; }
#inspiration-container { max-width: min(1600px, 94vw); margin: 0 auto; padding: 2rem 1.5rem; }
.insp-header { margin-bottom: 2rem; }
.insp-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.insp-title { font-size: 1.8rem; color: var(--accent-gold); font-weight: 700; }
.insp-stats { display: flex; gap: 1.5rem; }
.insp-stat { color: var(--text-secondary); font-size: .9rem; }
.insp-stat-num { color: var(--text-primary); font-weight: 700; font-size: 1.1rem; }
.insp-desc { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; margin-bottom: 1rem; }
.insp-tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.insp-tab { background: none; border: none; color: var(--text-secondary); padding: .6rem 1.2rem; cursor: pointer; font-size: .95rem; border-bottom: 2px solid transparent; transition: all .2s; }
.insp-tab:hover { color: var(--text-primary); }
.insp-tab.active { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
.insp-source-bar { display: flex; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.insp-src-chip { color: var(--text-secondary); font-size: .8rem; }
.insp-src-chip b { color: var(--text-primary); margin-left: .2rem; }
.insp-search-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.insp-search { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: .5rem .8rem; border-radius: .5rem; font-size: .9rem; flex: 1; max-width: 400px; outline: none; transition: border-color .2s; }
.insp-search:focus { border-color: var(--accent-cyan); }
.insp-search::placeholder { color: var(--text-muted); }
.insp-result-count { color: var(--text-muted); font-size: .8rem; }
.insp-empty { color: var(--text-muted); text-align: center; padding: 3rem; grid-column: 1/-1; }
.insp-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.insp-filter { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); padding: .35rem .8rem; border-radius: 1rem; cursor: pointer; font-size: .8rem; transition: all .2s; }
.insp-filter:hover { border-color: var(--accent-cyan); color: var(--text-primary); }
.insp-filter.active { background: var(--accent-cyan); color: var(--cc-text-primary); border-color: var(--accent-cyan); }
.insp-filter-count { opacity: .6; margin-left: .3rem; }

/* Spark Cards */
.insp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.spark-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem 1.2rem; transition: all .2s; }
.spark-card:hover { border-color: var(--accent-cyan); }
.spark-card.expanded { border-color: var(--accent-gold); }
.spark-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.spark-id { color: var(--text-muted); font-size: .75rem; font-family: monospace; }
.spark-cat { color: #000; font-size: .7rem; padding: .15rem .5rem; border-radius: .75rem; font-weight: 600; }
.spark-conf { font-size: .7rem; padding: .15rem .5rem; border-radius: .75rem; }
.spark-src { font-size: .8rem; margin-left: auto; cursor: help; }
.conf-validated { background: rgba(72,187,120,.2); color: var(--accent-green); }
.conf-signal { background: rgba(255,217,61,.2); color: var(--accent-gold); }
.conf-guess { background: rgba(138,155,181,.15); color: var(--text-secondary); }
.spark-text { color: var(--text-primary); font-size: .95rem; line-height: 1.5; font-weight: 500; }
.spark-detail { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.spark-detail > div { margin-bottom: .8rem; }
.spark-detail strong { color: var(--accent-cyan); font-size: .8rem; display: block; margin-bottom: .25rem; }
.spark-detail p { color: var(--text-secondary); font-size: .85rem; line-height: 1.5; }
.spark-detail a { color: var(--accent-cyan); text-decoration: none; }
.spark-detail a:hover { text-decoration: underline; }
.spark-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.spark-tag { background: var(--bg-hover); color: var(--text-muted); font-size: .7rem; padding: .1rem .5rem; border-radius: .5rem; }
.spark-plain { background: rgba(255,217,61,.08); border-left: 3px solid var(--accent-gold); padding: .6rem .8rem; border-radius: 0 .5rem .5rem 0; }
.spark-plain strong { color: var(--accent-gold) !important; }
.spark-nextstep { background: rgba(72,187,120,.08); border-left: 3px solid var(--accent-green); padding: .6rem .8rem; border-radius: 0 .5rem .5rem 0; }
.spark-nextstep strong { color: var(--accent-green) !important; }
.spark-feedback { background: rgba(123,97,255,.06); border-radius: .5rem; padding: .6rem .8rem; }
.spark-feedback strong { color: var(--accent-purple) !important; }
.spark-fb-item { margin-top: .5rem; padding: .5rem .6rem; background: var(--bg-secondary); border-radius: .4rem; }
.spark-fb-item .spark-fb-persona { color: var(--accent-cyan); font-size: .75rem; font-weight: 600; display: block; margin-bottom: .2rem; }
.spark-fb-item p { color: var(--text-secondary); font-size: .82rem; line-height: 1.45; margin: 0; }
.spark-expand, .bp-expand { background: none; border: none; color: var(--accent-cyan); cursor: pointer; font-size: .8rem; padding: .3rem 0; margin-top: .5rem; }
.spark-expand:hover, .bp-expand:hover { text-decoration: underline; }

/* Blueprint Cards */
.insp-blueprints { display: flex; flex-direction: column; gap: 1rem; }
.blueprint-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem; padding: 1.2rem 1.5rem; border-left: 3px solid var(--accent-gold); transition: all .2s; }
.blueprint-card:hover { border-color: var(--accent-gold); }
.blueprint-card.expanded { border-color: var(--accent-gold); background: var(--bg-hover); }
.bp-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.bp-id { color: var(--text-muted); font-family: monospace; font-size: .8rem; }
.bp-status { font-size: .7rem; padding: .15rem .6rem; border-radius: .75rem; }
.bp-status-proposed { background: rgba(255,217,61,.15); color: var(--accent-gold); }
.bp-status-prototyping { background: rgba(0,212,255,.15); color: var(--accent-cyan); }
.bp-status-validated { background: rgba(72,187,120,.15); color: var(--accent-green); }
.bp-title { color: var(--text-primary); font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.bp-desc { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }
.bp-meta { display: flex; gap: 2rem; margin-top: .75rem; }
.bp-meta-item { color: var(--text-secondary); font-size: .85rem; }
.bp-meta-item strong { color: var(--text-muted); margin-right: .3rem; }
.bp-detail { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.bp-detail > div { margin-bottom: .8rem; }
.bp-detail strong { color: var(--accent-cyan); font-size: .85rem; display: block; margin-bottom: .3rem; }
.bp-detail p, .bp-detail li { color: var(--text-secondary); font-size: .85rem; line-height: 1.5; }
.bp-detail ul { padding-left: 1.2rem; }
.bp-sparks { color: var(--text-muted); }

@media (max-width: 768px) {
  .insp-grid { grid-template-columns: 1fr; }
  .insp-title-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .insp-filters { gap: .3rem; }
  /* 覆盖 line 3283 的 `#inspiration-container { max-width: 1200px }` ——
     必须在该规则之后才能生效（CSS 后者胜），line 2439 的 600px 媒体查询因位置更前而被覆盖。 */
  #inspiration-container {
    max-width: 100%;
    width: 100%;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
  }
  .spark-card, .blueprint-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  .spark-top { flex-wrap: wrap; gap: 4px; }
  .insp-header { max-width: 100%; }
  .insp-title { font-size: 20px; word-break: break-word; }
  .insp-search-row { flex-wrap: wrap; }
  .insp-search { max-width: 100%; min-width: 0; }
}

/* ===== REVIEW MODE ===== */
.review-mode-btn {
  display: flex; align-items: center; gap: .4rem;
  background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.25);
  color: var(--accent-red); border-radius: .5rem; padding: .35rem .75rem;
  cursor: pointer; font-size: .8rem; font-weight: 500; transition: all .2s;
}
.review-mode-btn:hover { background: rgba(255,107,107,.2); border-color: var(--accent-red); }
.review-mode-btn.active { background: var(--accent-red); color: var(--cc-text-on-accent); border-color: var(--accent-red); }
.review-icon { font-size: 1rem; }

/* Review Panel (inline on chart embeds) */
.review-panel {
  border-top: 1px solid var(--border); padding: .8rem 1rem;
  background: rgba(255,107,107,.04);
}
.review-header {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.review-chart-id {
  font-family: var(--font-mono); font-size: .75rem; color: var(--accent-cyan);
  background: rgba(0,212,255,.1); padding: .15rem .5rem; border-radius: .3rem;
}
.review-chart-name { font-size: .8rem; color: var(--text-secondary); }
.review-versions { font-size: .75rem; color: var(--text-muted); margin-left: auto; }
.version-tag {
  display: inline-block; font-family: var(--font-mono); font-size: .7rem;
  background: rgba(123,97,255,.12); color: var(--accent-purple);
  padding: .1rem .4rem; border-radius: .25rem; margin-left: .3rem;
}
.review-comments-list { margin-bottom: .5rem; max-height: 200px; overflow-y: auto; }
.review-comment-item {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .4rem .5rem; background: var(--bg-secondary); border-radius: .4rem;
  margin-bottom: .3rem; font-size: .82rem;
}
.comment-time { font-size: .7rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.comment-text { color: var(--text-secondary); flex: 1; line-height: 1.4; }
.comment-delete {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: .9rem; line-height: 1; padding: 0 .2rem; flex-shrink: 0;
}
.comment-delete:hover { color: var(--accent-red); }
.no-comments { color: var(--text-muted); font-size: .8rem; font-style: italic; }
.review-comment-form {
  display: flex; gap: .4rem; align-items: flex-end;
}
.review-comment-form textarea {
  flex: 1; background: var(--bg-primary); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: .4rem; padding: .5rem .6rem;
  font-family: var(--font-sans); font-size: .82rem; resize: vertical;
}
.review-comment-form textarea:focus { border-color: var(--accent-cyan); outline: none; }
.review-submit-btn {
  background: var(--accent-cyan); color: var(--bg-primary); border: none;
  border-radius: .4rem; padding: .45rem .8rem; cursor: pointer;
  font-size: .78rem; font-weight: 600; white-space: nowrap; transition: opacity .2s;
}
.review-submit-btn:hover { opacity: .85; }
.review-export { margin-top: .4rem; }
.review-export-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: .3rem; padding: .3rem .6rem; cursor: pointer; font-size: .75rem;
}
.review-export-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* Gallery View */
#review-gallery {
  padding-top: 56px; overflow-y: auto; height: 100%;
}
.gallery-header {
  padding: 1.2rem 1.5rem .8rem; border-bottom: 1px solid var(--border);
}
.gallery-header h2 { font-size: 1.3rem; color: var(--text-primary); margin-bottom: .6rem; }
.gallery-controls {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.gallery-controls select {
  background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: .4rem; padding: .4rem .6rem; font-size: .82rem; cursor: pointer;
}
#gallery-stats { font-size: .8rem; color: var(--text-muted); margin-left: auto; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem; padding: 1rem 1.5rem;
}
.gallery-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem;
  overflow: hidden; transition: border-color .2s;
}
.gallery-card:hover { border-color: var(--accent-cyan); }
.gallery-card.has-comment { border-left: 3px solid var(--accent-gold); }
.gallery-card-header {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem;
  background: rgba(0,0,0,.15); border-bottom: 1px solid var(--border);
}
.gallery-chart-id {
  font-family: var(--font-mono); font-size: .75rem; color: var(--accent-cyan);
}
.gallery-score {
  font-family: var(--font-mono); font-size: .7rem; color: var(--accent-green);
  background: rgba(72,187,120,.12); padding: .1rem .4rem; border-radius: .25rem;
  margin-left: auto;
}
.gallery-comment-badge {
  font-size: .7rem; color: var(--accent-gold); background: rgba(255,217,61,.15);
  padding: .1rem .4rem; border-radius: .75rem; font-weight: 600;
}
.gallery-chart-name {
  padding: .3rem .8rem; font-size: .8rem; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-chart-preview {
  height: 200px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-primary);
}
.gallery-load-btn {
  background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.3);
  color: var(--accent-cyan); border-radius: .4rem; padding: .5rem 1rem;
  cursor: pointer; font-size: .82rem; transition: all .2s;
}
.gallery-load-btn:hover { background: rgba(0,212,255,.2); }
.gallery-iframe { width: 100%; height: 100%; border: none; }
.gallery-review-area { padding: .6rem .8rem; }
.gallery-comment-input {
  width: 100%; background: var(--bg-primary); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: .4rem; padding: .4rem .6rem;
  font-family: var(--font-sans); font-size: .8rem; resize: vertical;
  margin-bottom: .4rem;
}
.gallery-comment-input:focus { border-color: var(--accent-cyan); outline: none; }
.gallery-actions { display: flex; gap: .4rem; }
.gallery-submit {
  background: var(--accent-cyan); color: var(--bg-primary); border: none;
  border-radius: .3rem; padding: .35rem .7rem; cursor: pointer;
  font-size: .75rem; font-weight: 600;
}
.gallery-submit:hover { opacity: .85; }
.gallery-view-comments {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: .3rem; padding: .35rem .6rem; cursor: pointer; font-size: .75rem;
}
.gallery-view-comments:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.gallery-comments-display {
  margin-top: .5rem; max-height: 150px; overflow-y: auto;
}
.gallery-comment-entry {
  padding: .3rem .5rem; background: var(--bg-secondary); border-radius: .3rem;
  margin-bottom: .25rem; font-size: .78rem; color: var(--text-secondary);
}
.gc-time { color: var(--text-muted); font-size: .7rem; margin-right: .4rem; }

/* === Blueprint Enhanced Fields === */
.bp-badges { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.bp-meta-chip {
  font-size: .7rem; padding: .15rem .55rem; border-radius: .75rem;
  background: rgba(255,255,255,.08); color: var(--text-secondary, #a5b0c2); border: 1px solid var(--border);
  font-weight: 500;
}

/* ==== R2-7 · Chip 对比度增强（dark/warm/light 全适配） ==== */

/* Dark 模式：chip 需要足够对比度 */
[data-theme="dark"] .bp-meta-chip {
  background: rgba(255, 255, 255, 0.1);
  color: #c8d1e0;
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .spark-conf.conf-validated {
  background: rgba(72, 187, 120, 0.25);
  color: #7ee8a8;
}
[data-theme="dark"] .spark-conf.conf-signal {
  background: rgba(255, 217, 61, 0.22);
  color: #ffeb7a;
}
[data-theme="dark"] .spark-conf.conf-guess {
  background: rgba(180, 195, 220, 0.15);
  color: #c8d1e0;
}

/* Warm 模式下 chip */
[data-theme="warm"] .bp-meta-chip {
  background: rgba(199, 125, 46, 0.08);
  color: #6b5d4a;
  border-color: #d8cfbc;
}

/* auto 模式 + 系统暗色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .bp-meta-chip,
  :root[data-theme="auto"] .bp-meta-chip {
    background: rgba(255, 255, 255, 0.1);
    color: #c8d1e0;
    border-color: rgba(255, 255, 255, 0.15);
  }
}
.bp-plain {
  font-size: .88rem; line-height: 1.65; color: var(--text-secondary);
  margin: .6rem 0; padding: .6rem .8rem; background: rgba(0,212,255,.04);
  border-left: 3px solid var(--accent-cyan); border-radius: 0 .5rem .5rem 0;
}
.bp-why { margin-bottom: 1rem; }
.bp-why > p { font-size: .85rem; line-height: 1.6; color: var(--text-secondary); }
.bp-step { margin-bottom: 1rem; }
.bp-step-content {
  font-size: .85rem; line-height: 1.6; color: var(--text-secondary);
  padding: .6rem; background: rgba(72,187,120,.04); border-radius: .5rem;
  border: 1px solid rgba(72,187,120,.15);
}
.bp-step-content strong { color: var(--accent-green); }
.bp-feedback { margin-bottom: 1rem; }
.bp-fb-item {
  padding: .5rem .7rem; margin-top: .4rem;
  background: rgba(255,255,255,.03); border-radius: .5rem;
  border: 1px solid var(--border);
}
.bp-fb-persona {
  font-size: .75rem; font-weight: 700; color: var(--accent-gold);
  background: rgba(255,217,61,.1); padding: .1rem .5rem; border-radius: .75rem;
  display: inline-block; margin-bottom: .3rem;
}
.bp-fb-item > p { font-size: .82rem; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.bp-anchor { margin-bottom: .6rem; }
.bp-anchor > p { font-size: .8rem; color: var(--text-muted); font-family: var(--font-mono); }

/* Spark next_step three-part format */
.spark-nextstep-content {
  font-size: .85rem; line-height: 1.6; color: var(--text-secondary);
  padding: .6rem; background: rgba(72,187,120,.04); border-radius: .5rem;
  border: 1px solid rgba(72,187,120,.15); margin-top: .4rem;
}
.spark-nextstep-content strong { color: var(--accent-green); }

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr; padding: .8rem; }
  .gallery-controls { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   Warm 主题全局覆盖层（V4 editorial 基底）
   ============================================================
   解决 style.css 中硬编码的冷色调（青色渐变、深蓝背景等）
   在 warm 主题下不跟随 token 的问题。
   这段放在文件最末尾确保最高优先级。
   2026-04-13
   ============================================================ */

/* -- 核心背景和文字 -- */
[data-theme="warm"] html,
[data-theme="warm"] body {
  background: #f5f2ed;
  color: #2b2a27;
}

[data-theme="warm"] #welcome {
  background: #f5f2ed;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(199,125,46,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(160,92,122,0.03) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 60%, rgba(199,125,46,0.02) 0%, transparent 40%);
}

/* -- 导航栏 -- */
[data-theme="warm"] #topnav {
  background: rgba(245, 242, 237, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: #d8cfbc;
}

/* -- accent 色：从青色→琥珀色 -- */
[data-theme="warm"] .nav-btn.active,
[data-theme="warm"] .nav-btn:hover {
  color: #c77d2e;
  border-color: #c77d2e;
}

[data-theme="warm"] .nav-btn.active {
  background: rgba(199,125,46,0.08);
}

[data-theme="warm"] .section-title {
  color: #c77d2e;
}

/* -- 卡片和面板 -- */
[data-theme="warm"] .highlight-card,
[data-theme="warm"] .shortcuts-content,
[data-theme="warm"] .loop-step,
[data-theme="warm"] .tool-card,
[data-theme="warm"] .df-tab-content,
[data-theme="warm"] .cmd-item,
[data-theme="warm"] .hidden-feature-card,
[data-theme="warm"] .dd-card {
  background: #fbf9f4;
  border-color: #d8cfbc;
}

[data-theme="warm"] .highlight-card:hover,
[data-theme="warm"] .tool-card:hover,
[data-theme="warm"] .dd-card:hover {
  border-color: #c77d2e;
}

/* -- 统计条 -- */
[data-theme="warm"] .stats-strip {
  background: rgba(239,234,225,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: #d8cfbc;
}

[data-theme="warm"] .stat-label {
  color: #6b5d4a;
}

/* -- 高亮数字 -- */
[data-theme="warm"] .highlight-num {
  color: #c77d2e;
}

/* -- 链接和按钮 -- */
[data-theme="warm"] a {
  color: #c77d2e;
}

[data-theme="warm"] a:hover {
  color: #a66520;
}

[data-theme="warm"] .btn-cta-primary {
  background: #c77d2e;
  color: #fbf9f4;
}

[data-theme="warm"] .btn-cta-primary:hover {
  background: #a66520;
}

[data-theme="warm"] .btn-cta-secondary {
  border-color: #3d3028;
  color: #3d3028;
}

[data-theme="warm"] .btn-cta-secondary:hover {
  background: #3d3028;
  color: #fbf9f4;
}

/* -- 分隔线和装饰 -- */
[data-theme="warm"] .landing-section + .landing-section::before {
  background: linear-gradient(90deg, transparent, #c77d2e, transparent);
}

/* -- terminal / code mock 组件 -- */
[data-theme="warm"] .term-mock,
[data-theme="warm"] .code-mock,
[data-theme="warm"] .history-mock,
[data-theme="warm"] .api-mock,
[data-theme="warm"] .decision-mock {
  background: #efeae1;
  border-color: #d8cfbc;
}

[data-theme="warm"] .term-header {
  background: #e8e1d2;
}

[data-theme="warm"] .term-white,
[data-theme="warm"] .term-cursor,
[data-theme="warm"] .code-line {
  color: #2b2a27;
}

/* -- 搜索框 -- */
[data-theme="warm"] .search-box input,
[data-theme="warm"] .cmd-search input {
  background: #fbf9f4;
  border-color: #d8cfbc;
  color: #2b2a27;
}

[data-theme="warm"] .search-box input:focus,
[data-theme="warm"] .cmd-search input:focus {
  border-color: #c77d2e;
  box-shadow: 0 0 0 3px rgba(199,125,46,0.15);
}

/* -- tab 系统 -- */
[data-theme="warm"] .df-tab,
[data-theme="warm"] .loop-tab {
  color: #6b5d4a;
}

[data-theme="warm"] .df-tab.active,
[data-theme="warm"] .loop-tab.active {
  color: #c77d2e;
  border-color: #c77d2e;
}

/* -- 滚动条 -- */
[data-theme="warm"] ::-webkit-scrollbar-track {
  background: #efeae1;
}

[data-theme="warm"] ::-webkit-scrollbar-thumb {
  background: #b8ab94;
}

[data-theme="warm"] ::-webkit-scrollbar-thumb:hover {
  background: #9a8b76;
}

/* -- 进度条/高亮条 -- */
[data-theme="warm"] .loop-progress-fill,
[data-theme="warm"] .stat-num.counter {
  color: #c77d2e;
}

/* -- 快捷键弹窗 -- */
[data-theme="warm"] .shortcuts-content h3 {
  color: #c77d2e;
}

[data-theme="warm"] .shortcut-key {
  background: #efeae1;
  border-color: #d8cfbc;
  color: #2b2a27;
}

/* -- 面包屑 -- */
[data-theme="warm"] #breadcrumb {
  color: #6b5d4a;
}

/* -- SVG 引擎图 -- */
[data-theme="warm"] .flow-cyan { stroke: #c77d2e; }
[data-theme="warm"] .node-active circle { fill: #c77d2e; }
[data-theme="warm"] .label-active text { fill: #c77d2e; }

/* -- 封面元素 -- */
[data-theme="warm"] .cover-badge {
  color: #c77d2e;
  border-color: rgba(199,125,46,0.3);
  background: rgba(199,125,46,0.08);
}

[data-theme="warm"] .cover-meta .meta-val {
  color: #c77d2e;
}

/* -- 全局 selection 高亮 -- */
[data-theme="warm"] ::selection {
  background: rgba(199,125,46,0.2);
  color: #2b2a27;
}

/* -- 侧边浮动导航 -- */
[data-theme="warm"] .side-float-nav a.active::before {
  background: #c77d2e;
}

/* ============================================================
   Warm 主题 — 穷尽式补全覆盖（V5）
   覆盖 style.css 中每一个 var(--accent-cyan) / var(--accent-purple) /
   var(--accent-blue) / rgba(0,212,255,...) / rgba(123,97,255,...) /
   #00d4ff / #7b61ff / #00b8e0 的选择器
   2026-04-12
   ============================================================ */

/* ---- 顶部导航栏 ---- */
[data-theme="warm"] .nav-btn.active {
  color: #c77d2e;
  border-color: #c77d2e;
  background: rgba(199,125,46,0.08);
}
[data-theme="warm"] .version-badge {
  color: #c77d2e;
  border-color: rgba(199,125,46,0.3);
  background: rgba(199,125,46,0.05);
}
[data-theme="warm"] .shortcuts-btn:hover {
  color: #c77d2e;
  border-color: #c77d2e;
}

/* ---- Landing Header ---- */
[data-theme="warm"] .title-glow {
  color: #c77d2e;
  text-shadow: 0 0 30px rgba(199,125,46,0.3);
}
[data-theme="warm"] .stat-num {
  color: #c77d2e;
}

/* ---- Detail Panel ---- */
[data-theme="warm"] .panel-why-matters {
  background: rgba(199,125,46,0.06);
  border-color: rgba(199,125,46,0.15);
}
[data-theme="warm"] .panel-why-matters strong {
  color: #c77d2e;
}
[data-theme="warm"] .panel-link:hover {
  border-color: #c77d2e;
  background: rgba(199,125,46,0.05);
}
[data-theme="warm"] .concept-list code {
  color: #c77d2e;
}
[data-theme="warm"] .os-analogy {
  background: rgba(199,125,46,0.08);
  border-color: rgba(199,125,46,0.2);
  color: #c77d2e;
}

/* ---- SVG 引擎 ---- */
[data-theme="warm"] .flow-purple {
  stroke: #a05c7a;
}
[data-theme="warm"] .particle {
  fill: #c77d2e;
}

/* ---- Reader 侧栏 TOC（用户重点反馈） ---- */
[data-theme="warm"] #toc-search:focus {
  border-color: #c77d2e;
}
[data-theme="warm"] .toc-chapter.active {
  background: rgba(199,125,46,0.08);
  color: #c77d2e;
  border-left-color: #c77d2e;
}
[data-theme="warm"] .search-result-item:hover {
  background: rgba(199,125,46,0.08);
}
[data-theme="warm"] .search-result-section {
  color: #c77d2e;
}
[data-theme="warm"] .btn-back:hover {
  color: #c77d2e;
  border-color: #c77d2e;
}

/* ---- 章节内锚点导航 ---- */
[data-theme="warm"] .chapter-section-item.section-active {
  color: #c77d2e;
  border-left-color: #c77d2e;
  background: rgba(199,125,46,0.05);
}

/* ---- Reading progress bar ---- */
[data-theme="warm"] .reading-progress {
  background: #c77d2e;
}

/* ---- Chapter navigation ---- */
[data-theme="warm"] .chapter-nav-btn:hover:not(:disabled) {
  color: #c77d2e;
  border-color: #c77d2e;
}

/* ---- Chapter body content ---- */
[data-theme="warm"] #chapter-body h1 {
  color: #c77d2e;
}
[data-theme="warm"] #chapter-body strong {
  color: #c77d2e;
}
[data-theme="warm"] #chapter-body code {
  color: #c77d2e;
}
[data-theme="warm"] #chapter-body blockquote {
  border-left-color: #c77d2e;
  background: rgba(199,125,46,0.04);
}
[data-theme="warm"] #chapter-body th {
  color: #c77d2e;
}
[data-theme="warm"] #chapter-body tr:hover td {
  background: rgba(199,125,46,0.03);
}

/* ---- Welcome view ---- */
[data-theme="warm"] .welcome-title {
  color: #c77d2e;
  text-shadow: 0 0 40px rgba(199,125,46,0.3);
}
[data-theme="warm"] .meta-val {
  color: #c77d2e;
}

/* ---- Welcome: glowPulse animation override ---- */
@keyframes glowPulseWarm {
  0%, 100% { text-shadow: 0 0 40px rgba(199,125,46,0.3); }
  50% { text-shadow: 0 0 60px rgba(199,125,46,0.5), 0 0 120px rgba(199,125,46,0.1); }
}
[data-theme="warm"] .welcome-title {
  animation-name: glowPulseWarm;
}

/* ---- Highlight cards ---- */
[data-theme="warm"] .highlight-card::before {
  background: linear-gradient(90deg, #c77d2e, #a05c7a);
}
[data-theme="warm"] .highlight-card:hover {
  border-color: rgba(199,125,46,0.3);
}
[data-theme="warm"] .highlight-num {
  color: #c77d2e;
}

/* ---- Cover Story ---- */
[data-theme="warm"] .story-after p strong {
  color: #c77d2e;
}
[data-theme="warm"] .story-arrow-icon {
  color: #c77d2e;
}

/* ---- Cover Actions: primary button ---- */
[data-theme="warm"] .btn-primary-large {
  background: #c77d2e;
  box-shadow: 0 0 24px rgba(199,125,46,0.15);
}
[data-theme="warm"] .btn-primary-large:hover {
  box-shadow: 0 4px 28px rgba(199,125,46,0.35);
}

/* ---- Cover Actions: secondary button ---- */
[data-theme="warm"] .btn-secondary-large:hover {
  border-color: #c77d2e !important;
  background: rgba(199,125,46,0.05);
  box-shadow: 0 4px 20px rgba(199,125,46,0.1);
}

/* ---- Metaphor switch ---- */
[data-theme="warm"] .metaphor-btn-inline:hover {
  border-color: #c77d2e;
  background: rgba(199,125,46,0.04);
}
[data-theme="warm"] .metaphor-btn-inline.selected {
  border-color: #c77d2e;
  color: #c77d2e;
  background: rgba(199,125,46,0.08);
}
[data-theme="warm"] .metaphor-toggle:hover {
  border-color: #c77d2e;
  color: #c77d2e;
}

/* ---- Landing sections ---- */
[data-theme="warm"] .section-title {
  color: #c77d2e;
}

/* ---- Agent Loop ---- */
[data-theme="warm"] .loop-section-num {
  color: #c77d2e;
  background: rgba(199,125,46,0.08);
}
[data-theme="warm"] .loop-step.active .step-num {
  background: #c77d2e;
  border-color: #c77d2e;
  box-shadow: 0 0 16px rgba(199,125,46,0.5);
}
[data-theme="warm"] .loop-step.visited .step-num {
  background: rgba(199,125,46,0.2);
  border-color: #c77d2e;
  color: #c77d2e;
}
[data-theme="warm"] .loop-step.active .step-label {
  color: #c77d2e;
}
[data-theme="warm"] .loop-progress-fill {
  background: linear-gradient(90deg, #c77d2e, #a05c7a);
}

/* ---- Loop detail ---- */
[data-theme="warm"] .badge-num {
  background: #c77d2e;
}
[data-theme="warm"] .loop-src-link {
  color: #a05c7a;
  background: rgba(160,92,122,0.08);
  border-color: rgba(160,92,122,0.15);
}
[data-theme="warm"] .loop-src-link:hover {
  background: rgba(160,92,122,0.18);
}
[data-theme="warm"] .loop-desc code {
  background: rgba(199,125,46,0.08);
  color: #c77d2e;
}
[data-theme="warm"] .loop-note code {
  background: rgba(199,125,46,0.08);
  color: #c77d2e;
}

/* ---- Terminal / Code Mocks ---- */
[data-theme="warm"] .blink {
  color: #c77d2e;
}
[data-theme="warm"] .tool-use-block {
  background: rgba(199,125,46,0.06);
  border-left-color: #c77d2e;
}

/* ---- History Mock ---- */
[data-theme="warm"] .hist-item.active {
  background: rgba(199,125,46,0.06);
  border-left-color: #c77d2e;
}
[data-theme="warm"] .hist-new {
  background: #c77d2e;
}

/* ---- API Stream Mock ---- */
[data-theme="warm"] .api-box.api-active {
  border-color: #c77d2e;
  color: #c77d2e;
  box-shadow: 0 0 12px rgba(199,125,46,0.2);
}

/* ---- Loop controls ---- */
[data-theme="warm"] .loop-btn:hover:not(:disabled) {
  color: #c77d2e;
  border-color: #c77d2e;
}
[data-theme="warm"] .loop-btn-primary {
  background: rgba(199,125,46,0.1);
  border-color: #c77d2e;
  color: #c77d2e;
}
[data-theme="warm"] .speed-btn.active {
  background: rgba(199,125,46,0.1);
  border-color: #c77d2e;
  color: #c77d2e;
}

/* ---- Architecture Explorer ---- */
[data-theme="warm"] .arch-crumb:hover {
  color: #c77d2e;
  background: rgba(199,125,46,0.08);
}

/* ---- Data Flow Tabs ---- */
[data-theme="warm"] .df-tab.active {
  background: rgba(199,125,46,0.1);
  border-color: #c77d2e;
  color: #c77d2e;
}

/* ---- Data Flow Nodes ---- */
[data-theme="warm"] .df-node:hover {
  border-color: #c77d2e;
}
[data-theme="warm"] .df-node-api {
  border-color: #a05c7a;
}
[data-theme="warm"] .df-node-end {
  border-color: #c77d2e;
}

/* ---- Data Flow Tags ---- */
[data-theme="warm"] .df-tag.cyan {
  background: rgba(199,125,46,0.15);
  color: #c77d2e;
}

/* ---- Data Flow Source List ---- */
[data-theme="warm"] .df-src-list code {
  background: rgba(199,125,46,0.08);
  color: #c77d2e;
}

/* ---- Data Flow State Machine ---- */
[data-theme="warm"] .df-sm-start {
  border-color: #c77d2e;
}

/* ---- Data Flow Pipeline ---- */
[data-theme="warm"] .df-pipe-num {
  background: #c77d2e;
}
[data-theme="warm"] .df-pipe-desc code {
  background: rgba(199,125,46,0.08);
  color: #c77d2e;
}

/* ---- Data Flow Assembly ---- */
[data-theme="warm"] .df-asm-layer-src code {
  background: rgba(199,125,46,0.08);
  color: #c77d2e;
}
[data-theme="warm"] .df-asm-total strong {
  color: #c77d2e;
}

/* ---- CTA Buttons ---- */
[data-theme="warm"] .btn-cta-primary {
  background: #c77d2e;
}
[data-theme="warm"] .btn-cta-primary:hover {
  background: #a66520;
}

/* ---- Floating Section Nav ---- */
[data-theme="warm"] .section-nav-dot:hover {
  background: #c77d2e;
}
[data-theme="warm"] .section-nav-dot.active {
  background: #c77d2e;
  border-color: #c77d2e;
}

/* ---- Command Catalog ---- */
[data-theme="warm"] .cmd-name {
  color: #c77d2e;
}
[data-theme="warm"] .cmd-search:focus {
  border-color: #c77d2e;
}

/* ---- Hidden Features ---- */
[data-theme="warm"] .hidden-feature-card:nth-child(3)::before {
  background: #a05c7a;
}
[data-theme="warm"] #hidden-features-section code {
  background: rgba(199,125,46,0.1);
  color: #c77d2e;
}

/* ---- Chart Embedding System ---- */
/* ISS-07：暖色包裹 — 让深色图表像"贴在书页上的照片"而不是突兀的黑块 */
[data-theme="warm"] .chart-embed-container {
  border: 1px solid #d8cfbc;
  background: #faf6ec;
  box-shadow: 0 2px 6px rgba(61, 48, 40, 0.04);
  border-radius: 10px;
}
[data-theme="warm"] .chart-embed-header {
  background: #fbf9f4;
}
[data-theme="warm"] .chart-embed-header:hover {
  background: #f5f0e4;
}
[data-theme="warm"] .chart-embed-body {
  border-top-color: #e5ddc9;
}
[data-theme="warm"] .chart-embed-iframe-wrap {
  padding: 14px;
  background: linear-gradient(to bottom, #f5f0e4, #efeae1);
}
[data-theme="warm"] .chart-embed-iframe {
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(61, 48, 40, 0.10), 0 1px 3px rgba(61, 48, 40, 0.06);
}
[data-theme="warm"] .chart-embed-toolbar {
  background: rgba(199, 125, 46, 0.04);
  border-bottom: 1px solid #e5ddc9;
}
[data-theme="warm"] .chart-embed-resize-handle {
  background: #f5f0e4;
  border-top: 1px solid #e5ddc9;
}
[data-theme="warm"] .chart-embed-container:hover {
  border-color: #c77d2e;
  box-shadow: 0 4px 12px rgba(199, 125, 46, 0.10);
}
[data-theme="warm"] .chart-embed-container.expanded {
  border-color: #c77d2e;
}
[data-theme="warm"] .chart-embed-badge {
  color: #a05c7a;
  background: rgba(160,92,122,0.1);
}
[data-theme="warm"] .chart-embed-fullscreen {
  color: #c77d2e;
  border-color: rgba(199,125,46,0.2);
}
[data-theme="warm"] .chart-embed-fullscreen:hover {
  background: rgba(199,125,46,0.1);
  border-color: rgba(199,125,46,0.4);
}
[data-theme="warm"] .chart-embed-spinner {
  border-top-color: #c77d2e;
}
[data-theme="warm"] .chart-embed-resize-handle:hover {
  background: rgba(199,125,46,0.1);
  color: #c77d2e;
}

/* ---- Glossary Tooltip System ---- */
[data-theme="warm"] .glossary-term {
  border-bottom-color: #c77d2e;
}
[data-theme="warm"] .glossary-term:hover {
  background: rgba(199,125,46,0.1);
}
[data-theme="warm"] .glossary-tooltip {
  border-color: #c77d2e;
}
[data-theme="warm"] .glossary-tooltip-title {
  color: #c77d2e;
}

/* ---- Q&A Panel ---- */
[data-theme="warm"] .qa-question:hover {
  background: rgba(199,125,46,0.03);
}
[data-theme="warm"] .qa-item[data-level="extend"] .qa-level-badge {
  color: #4a6b8a;
}
[data-theme="warm"] .qa-answer {
  border-left-color: #c77d2e;
}

/* ---- Gallery: gallery-load-btn (原版 #00d4ff 硬编码) ---- */
[data-theme="warm"] .gallery-load-btn {
  background: rgba(199,125,46,0.1);
  border-color: rgba(199,125,46,0.3);
  color: #c77d2e;
}
[data-theme="warm"] .gallery-load-btn:hover {
  border-color: #c77d2e;
  color: #c77d2e;
  background: rgba(199,125,46,0.2);
}

/* ---- Gallery Cards ---- */
[data-theme="warm"] .gallery-card:hover {
  border-color: #c77d2e;
}
[data-theme="warm"] .gallery-card-expanded {
  border-color: #c77d2e;
}
[data-theme="warm"] .gallery-card-id {
  color: #c77d2e;
  background: rgba(199,125,46,0.1);
}
[data-theme="warm"] .gallery-badge-rated {
  background: rgba(199,125,46,0.1);
  color: #c77d2e;
}
[data-theme="warm"] .gallery-comment-input:focus {
  border-color: #c77d2e;
}
[data-theme="warm"] .gallery-comment-save {
  background: #c77d2e;
}
[data-theme="warm"] .gallery-modal {
  border-color: #c77d2e;
}
[data-theme="warm"] .gallery-modal-actions .gallery-btn-confirm {
  background: #c77d2e;
}
[data-theme="warm"] .gallery-btn-submit {
  background: #c77d2e;
}
[data-theme="warm"] .gallery-chart-id {
  color: #c77d2e;
}
[data-theme="warm"] .gallery-submit {
  background: #c77d2e;
}

/* ---- Inspiration Lab ---- */
[data-theme="warm"] .insp-search:focus {
  border-color: #c77d2e;
}
[data-theme="warm"] .insp-filter:hover {
  border-color: #c77d2e;
}
[data-theme="warm"] .insp-filter.active {
  background: #c77d2e;
  border-color: #c77d2e;
}

/* ---- Spark Cards ---- */
[data-theme="warm"] .spark-card:hover {
  border-color: #c77d2e;
}
[data-theme="warm"] .spark-detail strong {
  color: #c77d2e;
}
[data-theme="warm"] .spark-detail a {
  color: #c77d2e;
}
[data-theme="warm"] .spark-feedback {
  background: rgba(160,92,122,0.06);
}
[data-theme="warm"] .spark-feedback strong {
  color: #a05c7a !important;
}
[data-theme="warm"] .spark-fb-item .spark-fb-persona {
  color: #c77d2e;
}
[data-theme="warm"] .spark-expand,
[data-theme="warm"] .bp-expand {
  color: #c77d2e;
}

/* ---- Blueprint Cards ---- */
[data-theme="warm"] .bp-status-prototyping {
  background: rgba(199,125,46,0.15);
  color: #c77d2e;
}
[data-theme="warm"] .bp-detail strong {
  color: #c77d2e;
}

/* ---- Review Mode ---- */
[data-theme="warm"] .review-chart-id {
  color: #c77d2e;
  background: rgba(199,125,46,0.1);
}
[data-theme="warm"] .version-tag {
  background: rgba(160,92,122,0.12);
  color: #a05c7a;
}
[data-theme="warm"] .review-comment-form textarea:focus {
  border-color: #c77d2e;
}
[data-theme="warm"] .review-submit-btn {
  background: #c77d2e;
}
[data-theme="warm"] .review-export-btn:hover {
  border-color: #c77d2e;
  color: #c77d2e;
}

/* ---- Blueprint plain ---- */
[data-theme="warm"] .bp-plain {
  background: rgba(199,125,46,0.04);
  border-left-color: #c77d2e;
}

/* ---- Q&A answer accent-blue override ---- */
[data-theme="warm"] .qa-item[data-level="extend"] .qa-level-badge {
  color: #4a6b8a;
}

/* ---- Gallery comment input (second definition) ---- */
[data-theme="warm"] .gallery-comment-input:focus {
  border-color: #c77d2e;
}

/* === 阅读页 editorial 排版 === */

/* 1. 章节正文 — Bug 2 修复（2026-04-26 v3）：完全自适应
   - clamp(800px, 92vw, 1800px)：800px 下限 + 92vw 弹性 + 1800px 上限
   - 在 2000px 屏幕能撑到 1800px，2400px 屏也能到 1800px（保持可读性）
   - 在 900px 屏自动缩到 ~830px 留 70px padding */
[data-theme="warm"] #chapter-body {
  font-family: Georgia, "Noto Serif SC", "Source Han Serif SC", "PingFang SC", serif;
  font-size: 16px;
  line-height: 1.7;
  color: #2b2a27;
  letter-spacing: 0.01em;
  max-width: clamp(800px, 92vw, 1800px);
  margin: 0 auto;
  padding: 32px 32px;
}

/* 2. 标题层级 */
[data-theme="warm"] #chapter-body h1 { font-family: Georgia, "Noto Serif SC", serif; font-size: 28px; font-weight: 600; color: #2b2a27; margin: 36px 0 16px; line-height: 1.3; }
[data-theme="warm"] #chapter-body h2 { font-family: Georgia, "Noto Serif SC", serif; font-size: 22px; font-weight: 600; color: #2b2a27; margin: 48px 0 14px; line-height: 1.35; border-top: 1px solid #d8cfbc; padding-top: 24px; }
[data-theme="warm"] #chapter-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
[data-theme="warm"] #chapter-body h3 { font-family: Georgia, "Noto Serif SC", serif; font-size: 18px; font-weight: 600; color: #3d3028; margin: 44px 0 14px; padding-top: 20px; border-top: 1px dashed #e5ddc9; }
[data-theme="warm"] #chapter-body h3:first-child { border-top: none; padding-top: 0; margin-top: 0; }
[data-theme="warm"] #chapter-body h4 { font-family: "PingFang SC", "Noto Sans SC", sans-serif; font-size: 16px; font-weight: 500; color: #6b5d4a; margin: 20px 0 6px; }

/* 3. 段落和间距 */
[data-theme="warm"] #chapter-body p { margin-bottom: 1em; }
[data-theme="warm"] #chapter-body p + p { text-indent: 0; }

/* 4. 通俗理解区块 (blockquote) */
[data-theme="warm"] #chapter-body blockquote {
  background: #efeae1;
  border-left: 4px solid #c77d2e;
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 24px 0;
  font-size: 17px;
  line-height: 1.8;
  color: #3d3028;
}

/* 5. 代码块 */
[data-theme="warm"] #chapter-body pre,
[data-theme="warm"] #chapter-body code {
  font-family: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
}

[data-theme="warm"] #chapter-body pre {
  background: #fbf9f4;
  border: 1px solid #d8cfbc;
  border-radius: 6px;
  padding: 16px 24px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}

[data-theme="warm"] #chapter-body :not(pre) > code {
  background: rgba(199, 125, 46, 0.08);
  color: #a66520;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* 6. 表格 */
[data-theme="warm"] #chapter-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}

[data-theme="warm"] #chapter-body th {
  background: #efeae1;
  color: #3d3028;
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid #c77d2e;
}

[data-theme="warm"] #chapter-body td {
  padding: 10px 14px;
  border-bottom: 1px solid #d8cfbc;
  color: #2b2a27;
}

[data-theme="warm"] #chapter-body tr:hover td {
  background: rgba(199, 125, 46, 0.04);
}

/* 7. 链接 */
[data-theme="warm"] #chapter-body a {
  color: #c77d2e;
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 125, 46, 0.3);
  transition: border-color 0.2s;
}

[data-theme="warm"] #chapter-body a:hover {
  border-bottom-color: #c77d2e;
}

/* 8. 列表 */
[data-theme="warm"] #chapter-body ul,
[data-theme="warm"] #chapter-body ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

[data-theme="warm"] #chapter-body li {
  margin-bottom: 0.5em;
  line-height: 1.8;
}

[data-theme="warm"] #chapter-body li::marker {
  color: #c77d2e;
}

/* 9. 章节分隔线 */
[data-theme="warm"] #chapter-body hr {
  border: none;
  text-align: center;
  margin: 48px 0;
  color: #b8ab94;
}

[data-theme="warm"] #chapter-body hr::after {
  content: "· · ·";
  letter-spacing: 0.5em;
}

/* 10. 图片/图表容器 */
[data-theme="warm"] #chapter-body img {
  max-width: 100%;
  border-radius: 8px;
  margin: 24px 0;
}

[data-theme="warm"] .chart-embed-iframe-wrap {
  background: #fbf9f4;
  border: 1px solid #d8cfbc;
  border-radius: 8px;
  padding: 16px;
  margin: 24px 0;
}

/* 11. 脚注 */
[data-theme="warm"] #chapter-body .footnote,
[data-theme="warm"] #chapter-body sup {
  font-size: 14px;
  color: #6b5d4a;
}

/* 12. 强调文字 */
[data-theme="warm"] #chapter-body strong { color: #2b2a27; font-weight: 700; }
[data-theme="warm"] #chapter-body em { font-style: italic; color: #3d3028; }

/* ================================================================
   V4 HERO — Cinematic Narrative (V3 variant integrated into welcome)
   从 hero-variant-3-cinematic-narrative.html 移植
   所有类名加 .v4h- 前缀避免与现有 CSS 冲突
   ================================================================ */

.v4h-stage {
  /* 修复（2026-04-27 v3）：之前用 100vw + 负 margin 突破 .welcome-container 限宽
     导致右下白边（welcome-container padding-bottom:60px + scrollbar 15px 一并算进 stage 内）。
     新方案：position:fixed inset:0，stage 直接锚到 viewport 四角，
     彻底脱离 .welcome-container 的几何影响。 */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  z-index: 50;  /* 在 topnav (z-index 100) 下、其他内容上 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000000;
  transition: background 1.6s ease;
  margin-bottom: 48px;
  /* 覆盖 .welcome-container 的 fadeInUp 动画，hero 有自己的入场序列 */
  animation: none;
}

.v4h-stage.v4h-phase-final {
  background: #f5f2ed;
}

/* -- Skip button -- */
.v4h-skip-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 50;
  padding: 8px 14px;
  font-family: var(--font-mono, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.4s ease;
}
/* Global skip 按钮挂在 #welcome 层，z-index 更高，对浅/暖主题也要有对比度 */
.v4h-skip-btn--global {
  position: fixed;  /* 固定在视口 */
  top: 16px;
  right: 16px;
  z-index: 200;
  opacity: 1;  /* 立即可见，不受父容器 fadeInUp 影响 */
}
[data-theme="light"] .v4h-skip-btn--global,
[data-theme="warm"] .v4h-skip-btn--global {
  color: rgba(26, 32, 53, 0.7);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(26, 32, 53, 0.2);
}
[data-theme="light"] .v4h-skip-btn--global:hover,
[data-theme="warm"] .v4h-skip-btn--global:hover {
  color: rgba(26, 32, 53, 0.95);
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(26, 32, 53, 0.4);
}
.v4h-skip-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}
.v4h-skip-btn.v4h-hidden {
  opacity: 0;
  pointer-events: none;
}

/* -- Terminal scene -- */
.v4h-scene-terminal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 1.5s ease;
  pointer-events: none;
}
.v4h-scene-terminal.v4h-fading {
  opacity: 0;
}

.v4h-terminal-core {
  position: relative;
  font-family: SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: #f5f0e8;
  white-space: nowrap;
  z-index: 10;
  text-shadow: 0 0 20px rgba(199, 125, 46, 0.18);
}

.v4h-prompt-sign {
  color: #7a7a7a;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.v4h-prompt-sign.v4h-visible {
  opacity: 1;
}

.v4h-typed-cmd {
  color: #f5f0e8;
}

.v4h-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: #f5f0e8;
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: v4h-blink 1s steps(2, start) infinite;
}

@keyframes v4h-blink {
  to { visibility: hidden; }
}

/* -- Pillars SVG -- */
.v4h-pillars-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.v4h-pillar-line {
  stroke: rgba(199, 125, 46, 0.3);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.v4h-pillar-line.v4h-active {
  opacity: 1;
}

.v4h-pillar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 0.9, 0.32, 1), opacity 0.8s ease;
  z-index: 8;
  pointer-events: none;
}
.v4h-pillar.v4h-active {
  opacity: 1;
}

.v4h-pillar-label {
  font-family: SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 14px;
  font-weight: 500;
  color: #c77d2e;
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px rgba(199, 125, 46, 0.35);
  margin-bottom: 4px;
}

.v4h-pillar-cn {
  font-family: var(--font-zh, "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: 11px;
  color: rgba(245, 240, 232, 0.65);
  letter-spacing: 0.15em;
}

/* -- Final scene -- */
.v4h-scene-final {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.2s ease 0.3s, transform 1.2s ease 0.3s;
  z-index: 20;
  max-width: 960px;
}
.v4h-scene-final.v4h-active {
  opacity: 1;
  transform: translateY(0);
}

.v4h-version-tag {
  display: inline-block;
  font-family: SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #6b5d4a;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  border: 1px solid rgba(61, 48, 40, 0.15);
  border-radius: 100px;
  margin-bottom: 28px;
  background: rgba(61, 48, 40, 0.04);
}
.v4h-version-tag .v4h-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #c77d2e;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  animation: v4h-pulse 2.4s ease-in-out infinite;
}

@keyframes v4h-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.v4h-title-line1 {
  white-space: nowrap;
}
.v4h-hero-title {
  font-family: Georgia, "Noto Serif SC", "Source Han Serif SC", "PingFang SC", serif;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 600;
  color: #2b2a27;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 20px;
}
.v4h-hero-title .v4h-accent {
  color: #c77d2e;
  font-size: 0.62em;
  letter-spacing: 0.06em;
  vertical-align: baseline;
}

.v4h-hero-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(15px, 1.7vw, 20px);
  color: #6b5d4a;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 36px;
  line-height: 1.5;
}

.v4h-kpi-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--font-zh, "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: clamp(13px, 1.5vw, 17px);
  color: #2b2a27;
  margin-bottom: 44px;
  letter-spacing: 0.03em;
}

.v4h-kpi-item {
  padding: 0 18px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.v4h-kpi-item + .v4h-kpi-item {
  border-left: 1px solid rgba(61, 48, 40, 0.2);
}

.v4h-kpi-num {
  font-family: SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  color: #c77d2e;
  font-weight: 600;
  font-size: 1.15em;
}

.v4h-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.v4h-btn {
  font-family: var(--font-zh, "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.v4h-btn-primary {
  background: #c77d2e;
  color: #fbf9f4;
  box-shadow: 0 8px 24px rgba(199, 125, 46, 0.22);
}
.v4h-btn-primary:hover {
  background: #a66520;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(199, 125, 46, 0.3);
}
.v4h-btn-ghost {
  background: transparent;
  color: #2b2a27;
  border-color: rgba(61, 48, 40, 0.3);
}
.v4h-btn-ghost:hover {
  border-color: rgba(61, 48, 40, 0.6);
  background: rgba(61, 48, 40, 0.04);
  transform: translateY(-2px);
}

/* -- Live indicator -- */
.v4h-live-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 11px;
  color: #9a8b76;
  letter-spacing: 0.15em;
  opacity: 0;
  transition: opacity 1s ease 1.5s;
}
.v4h-scene-final.v4h-active ~ .v4h-live-indicator {
  opacity: 1;
}
.v4h-live-indicator .v4h-blink {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c77d2e;
  margin-right: 8px;
  vertical-align: middle;
  animation: v4h-liveBlink 2s ease-in-out infinite;
}

@keyframes v4h-liveBlink {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(199, 125, 46, 0.6); }
}

/* -- V4 Hero Responsive -- */
@media (max-width: 1024px) {
  .v4h-terminal-core { font-size: 24px; }
  .v4h-pillar-label { font-size: 13px; }
}

@media (max-width: 768px) {
  .v4h-stage {
    /* .welcome-container 在移动端 padding 变为 24px 16px 40px */
    margin-top: -24px;
    /* 突破容器 max-width，对齐 viewport */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
  }
  .v4h-terminal-core { font-size: 20px; }
  .v4h-kpi-row {
    flex-direction: column;
    gap: 8px;
  }
  .v4h-kpi-item + .v4h-kpi-item {
    border-left: none;
    border-top: 1px solid rgba(61, 48, 40, 0.15);
    padding-top: 8px;
  }
  .v4h-cta-row {
    flex-direction: column;
    width: 100%;
  }
  .v4h-btn {
    width: 100%;
    max-width: 280px;
  }
  .v4h-pillars-svg {
    display: none;
  }
  .v4h-pillar-label { font-size: 12px; }
  .v4h-pillar-cn { font-size: 10px; }
  .v4h-skip-btn {
    top: 16px;
    right: 16px;
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v4h-scene-terminal { display: none; }
  .v4h-scene-final {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .v4h-stage { background: #f5f2ed; }
}

/* -- Dark / Light theme overrides for V4 Hero -- */
[data-theme="dark"] .v4h-stage { background: #000; }
[data-theme="dark"] .v4h-stage.v4h-phase-final { background: #0d1117; }
[data-theme="dark"] .v4h-hero-title { color: #e6e1d8; }
[data-theme="dark"] .v4h-hero-title .v4h-accent { color: #e0a050; }
[data-theme="dark"] .v4h-hero-subtitle { color: #a0987a; }
[data-theme="dark"] .v4h-kpi-row { color: #e6e1d8; }
[data-theme="dark"] .v4h-version-tag { color: #a0987a; border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .v4h-btn-ghost { color: #e6e1d8; border-color: rgba(255,255,255,0.2); }
[data-theme="dark"] .v4h-btn-ghost:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); }
[data-theme="dark"] .v4h-live-indicator { color: #8a8070; }

[data-theme="light"] .v4h-stage { background: #1a1a1a; }
[data-theme="light"] .v4h-stage.v4h-phase-final { background: #fafaf8; }
[data-theme="light"] .v4h-hero-title { color: #1a1a1a; }
[data-theme="light"] .v4h-hero-subtitle { color: #555; }
[data-theme="light"] .v4h-kpi-row { color: #1a1a1a; }
[data-theme="light"] .v4h-btn-ghost { color: #1a1a1a; }


/* ============================================================
   暖色图表容器 — "技术屏幕" 嵌入样式
   ============================================================
   122 张现有图表保持深色底不动（重画成本太高），
   用暖色外框包裹形成"暖色书页里的深色技术屏幕"。
   类似编程书里的代码块——书页是奶白色，代码是深色。
   2026-04-13
   ============================================================ */

/* -- 图表卡片容器 -- */
[data-theme="warm"] .chart-embed-container {
  background: #fbf9f4;
  border: 1px solid #d8cfbc;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(61, 48, 40, 0.06);
  margin: 28px 0;
}

[data-theme="warm"] .chart-embed-container:hover {
  border-color: #c77d2e;
  box-shadow: 0 4px 16px rgba(199, 125, 46, 0.10);
}

[data-theme="warm"] .chart-embed-container.expanded {
  border-color: #c77d2e;
}

/* -- 图表标题栏（暖色编辑感） -- */
[data-theme="warm"] .chart-embed-header {
  background: #fbf9f4;
  padding: 16px 20px;
}

[data-theme="warm"] .chart-embed-header:hover {
  background: #f5f2ed;
}

[data-theme="warm"] .chart-embed-title {
  color: #2b2a27;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 15px;
  font-weight: 600;
}

[data-theme="warm"] .chart-embed-badge {
  color: #c77d2e;
  background: rgba(199, 125, 46, 0.10);
  border: 1px solid rgba(199, 125, 46, 0.2);
}

[data-theme="warm"] .chart-embed-arrow {
  color: #9a8b76;
}

/* -- 图表边框分隔线 -- */
[data-theme="warm"] .chart-embed-body {
  border-top: 1px solid #d8cfbc;
}

/* -- 工具栏（图表和标题之间的过渡带） -- */
[data-theme="warm"] .chart-embed-toolbar {
  background: #efeae1;
  border-top: 1px solid #d8cfbc;
}

[data-theme="warm"] .chart-embed-fullscreen {
  color: #c77d2e;
  border-color: rgba(199, 125, 46, 0.25);
}

[data-theme="warm"] .chart-embed-fullscreen:hover {
  background: rgba(199, 125, 46, 0.08);
  border-color: rgba(199, 125, 46, 0.5);
}

/* -- iframe 包裹层（深色图表的"技术屏幕"） -- */
[data-theme="warm"] .chart-embed-iframe-wrap {
  background: #1a1a2e;
  border-radius: 0 0 11px 11px;
  padding: 4px;
}

[data-theme="warm"] .chart-embed-iframe {
  border-radius: 8px;
  border: none;
}

/* -- 加载状态 -- */
[data-theme="warm"] .chart-embed-loader {
  background: #efeae1;
  color: #6b5d4a;
}

[data-theme="warm"] .chart-embed-spinner {
  border-color: #d8cfbc;
  border-top-color: #c77d2e;
}

/* -- 图表回退提示 -- */
[data-theme="warm"] .chart-embed-fallback {
  background: #fbf9f4;
  color: #6b5d4a;
  border: 1px dashed #d8cfbc;
}


/* ============================================================
   ISS-02 + ISS-04：右侧章节目录栏（三栏布局）
   左侧总目录 | 中间正文 | 右侧章节内目录
   2026-04-13
   ============================================================ */

.chapter-toc-panel {
  width: 260px;
  min-width: 220px;
  flex-shrink: 0;
  flex-grow: 0;
  border-left: 1px solid var(--border);
  background: var(--bg-secondary);
  overflow-y: auto;
  padding: 16px 14px 16px 14px;
  display: none;
  margin-right: 0;
}

/* 有内容时才显示 */
.chapter-toc-panel:not(:empty) {
  display: block;
}

/* 章节目录在右侧栏里的样式覆盖 */
.chapter-toc-panel #chapter-section-nav {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  position: sticky;
  top: 16px;
}

.chapter-toc-panel .chapter-section-nav-title {
  font-size: 11px;
  margin-bottom: 10px;
}

.chapter-toc-panel .chapter-section-item {
  white-space: normal;
  font-size: 13px;
  padding: 7px 10px;
  line-height: 1.5;
  word-break: break-all;
}

.chapter-toc-panel .chapter-section-item.section-h3 {
  padding-left: 22px;
  font-size: 12px;
}

/* 正文区放宽 */
#chapter-content {
  min-width: 0;
}

/* warm 主题下右侧栏样式 */
[data-theme="warm"] .chapter-toc-panel {
  background: #fbf9f4;
  border-left-color: #d8cfbc;
}

[data-theme="warm"] .chapter-toc-panel .chapter-section-item.section-active {
  color: #c77d2e;
  border-left-color: #c77d2e;
  background: rgba(199, 125, 46, 0.06);
}

/* 响应式：平板以下隐藏右侧栏 */
@media (max-width: 1024px) {
  .chapter-toc-panel {
    display: none !important;
  }
}

/* 正文 max-width 放宽（Bug 2 修复 2026-04-26 v3：clamp 完全弹性 800-1800px） */
[data-theme="warm"] #chapter-body {
  max-width: clamp(800px, 92vw, 1800px);
}

/* 内联 warm 图表 — 无框无边直接融入正文流 */
.chart-inline-warm {
  margin: 32px 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.chart-inline-warm figure {
  margin: 0;
  padding: 0;
}

.chart-inline-warm svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart-inline-warm .mermaid-chart {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
}

.chart-inline-warm .mermaid-chart svg {
  min-width: 700px;
  height: auto;
  display: block;
}

/* 禁用 Mermaid 的 hover 抖动 */
.chart-inline-warm .mermaid-chart .node:hover,
.chart-inline-warm .mermaid-chart .edgePath:hover,
.chart-inline-warm .mermaid-chart .label:hover {
  transform: none !important;
  filter: none !important;
}
.chart-inline-warm .mermaid-chart .node { cursor: default !important; }
.chart-inline-warm .mermaid-chart .edgeLabel { pointer-events: none; }

.chart-inline-warm figcaption {
  text-align: center;
  font-size: 14px;
  color: #6b5d4a;
  margin-bottom: 12px;
  font-style: italic;
}

.chart-inline-warm .chart-note {
  text-align: center;
  font-size: 13px;
  color: #9a8b76;
  margin-top: 8px;
  line-height: 1.5;
}

/* 内联图表加载占位 */
.chart-inline-placeholder {
  margin: 32px 0;
  padding: 40px;
  text-align: center;
  color: #9a8b76;
  font-size: 14px;
}
.chart-inline-placeholder::after {
  content: '图表加载中...';
}

/* ===== DIFFICULTY MAP 难度地图 ===== */
.difficulty-map {
  margin: 40px auto 32px;
  padding: 28px 24px 24px;
  max-width: 1100px;
  background: var(--cc-bg-elevated, #fbf9f4);
  border: 1px solid var(--cc-border-default, #d8cfbc);
  border-radius: 12px;
}

.difficulty-map-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--cc-text-primary, #3d3427);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.dm-total-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--cc-text-muted, #9a8b76);
  background: rgba(0,0,0,0.04);
  padding: 2px 10px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Grid: 4 columns (one per difficulty band) */
.difficulty-map-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}

/* Column */
.dm-column {
  min-width: 0;
}

.dm-column-header {
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 3px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.dm-header-emoji {
  font-size: 22px;
  line-height: 1;
}

.dm-header-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--cc-text-primary, #3d3427);
}

.dm-header-range {
  font-size: 12px;
  color: var(--cc-text-muted, #9a8b76);
  font-family: var(--cc-font-mono, monospace);
}

.dm-header-count {
  font-size: 12px;
  color: var(--cc-text-secondary, #6b5d4a);
  margin-top: 2px;
}

/* Card list */
.dm-card-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Scrollbar styling */
.dm-card-list::-webkit-scrollbar {
  width: 4px;
}
.dm-card-list::-webkit-scrollbar-track {
  background: transparent;
}
.dm-card-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 2px;
}

/* Individual card */
.dm-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px;
  border-left: 3px solid #ccc;
  background: rgba(255,255,255,0.5);
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  user-select: none;
}

.dm-card:hover {
  background: rgba(255,255,255,0.85);
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.dm-card:focus-visible {
  outline: 2px solid var(--cc-accent-primary, #4a6b8a);
  outline-offset: 1px;
}

.dm-card-title {
  font-size: 13px;
  color: var(--cc-text-primary, #3d3427);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-card-score {
  font-size: 11px;
  font-family: var(--cc-font-mono, monospace);
  color: var(--cc-text-muted, #9a8b76);
  flex-shrink: 0;
  min-width: 26px;
  text-align: right;
}

/* ===== DIFFICULTY MAP responsive ===== */

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .difficulty-map-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dm-card-list {
    max-height: 280px;
  }
}

/* Phone: 1 column */
@media (max-width: 540px) {
  .difficulty-map {
    margin: 24px 12px 20px;
    padding: 20px 14px 16px;
  }
  .difficulty-map-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dm-card-list {
    max-height: 200px;
  }
  .difficulty-map-title {
    font-size: 17px;
  }
}

/* ===== DIFFICULTY MAP warm theme overrides ===== */
[data-theme="warm"] .difficulty-map {
  background: #fbf9f4;
  border-color: #d8cfbc;
}

[data-theme="warm"] .dm-card {
  background: rgba(255,255,255,0.5);
}

[data-theme="warm"] .dm-card:hover {
  background: rgba(255,255,255,0.85);
}

/* Dark theme overrides */
[data-theme="dark"] .difficulty-map {
  background: var(--cc-bg-elevated);
  border-color: var(--cc-border-default);
}

[data-theme="dark"] .dm-card {
  background: rgba(255,255,255,0.04);
}

[data-theme="dark"] .dm-card:hover {
  background: rgba(255,255,255,0.08);
}

[data-theme="dark"] .dm-total-badge {
  background: rgba(255,255,255,0.08);
}

/* ============================================================
   灵感实验室 · 弹窗（替代竖向展开）
   ============================================================ */
.insp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.2s;
}
.insp-modal-overlay.visible { opacity: 1; }

.insp-modal {
  /* 用 token 系统的 --cc-bg-elevated，自动适配 dark/light/warm */
  background: var(--cc-bg-elevated, var(--bg-elevated, #fff));
  color: var(--cc-text-primary, #1a2035);
  border: 1px solid var(--cc-border-default, transparent);
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px 32px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

[data-theme="warm"] .insp-modal {
  background: #fbf9f4;
  border: 1px solid #d8cfbc;
  box-shadow: 0 20px 60px rgba(61, 48, 40, 0.18);
}

[data-theme="dark"] .insp-modal {
  background: #1a2035;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e0e6ed;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* auto 模式 + 系统暗色偏好 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .insp-modal,
  :root[data-theme="auto"] .insp-modal {
    background: #1a2035;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e0e6ed;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  }
}

/* 弹窗内正文文字色 */
[data-theme="dark"] .insp-modal .spark-detail,
[data-theme="dark"] .insp-modal .bp-detail,
[data-theme="dark"] .insp-modal p,
[data-theme="dark"] .insp-modal .spark-detail strong,
[data-theme="dark"] .insp-modal .bp-detail strong {
  color: var(--cc-text-primary, #e0e6ed);
}
[data-theme="dark"] .insp-modal .insp-sub {
  color: var(--cc-text-secondary, #8a94a6);
}
[data-theme="dark"] .insp-modal-close {
  color: var(--cc-text-secondary, #8a94a6);
}
[data-theme="dark"] .insp-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.insp-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.insp-modal-close:hover { background: var(--bg-hover); }

.insp-modal .spark-detail,
.insp-modal .bp-detail {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}

.insp-modal .spark-detail strong,
.insp-modal .bp-detail strong {
  color: var(--text-primary);
  display: block;
  margin-top: 12px;
  margin-bottom: 4px;
}

@media (max-width: 640px) {
  .insp-modal { padding: 20px 16px; margin: 16px; max-height: 90vh; }
}

/* 灵感卡片箭头 → 右下角 */
.spark-arrow, .bp-arrow {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 18px;
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.spark-card:hover .spark-arrow,
.blueprint-card:hover .bp-arrow {
  opacity: 1;
  transform: translateX(3px);
}
.spark-card, .blueprint-card { position: relative; }

/* 灵感弹窗内的小标题（替代冒号前缀） */
.insp-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 16px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.insp-sub:first-child { margin-top: 0; }

/* 弹窗内排版优化 */
.insp-modal p {
  margin: 6px 0 12px;
  line-height: 1.75;
  font-size: 14px;
  color: var(--text-secondary);
}

[data-theme="warm"] .insp-sub {
  color: #2b2a27;
  border-bottom-color: #d8cfbc;
}
[data-theme="warm"] .insp-modal p {
  color: #3d3028;
}

/* 弹窗滚动条圆角 */
.insp-modal::-webkit-scrollbar { width: 6px; }
.insp-modal::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.insp-modal::-webkit-scrollbar-thumb { background: #c4b9a8; border-radius: 3px; }
.insp-modal::-webkit-scrollbar-thumb:hover { background: #a89880; }

/* 弹窗内容区间距优化 */
.insp-modal .spark-detail > div,
.insp-modal .bp-detail > div {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e5e5e5);
}
.insp-modal .spark-detail > div:last-child,
.insp-modal .bp-detail > div:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

[data-theme="warm"] .insp-modal .spark-detail > div,
[data-theme="warm"] .insp-modal .bp-detail > div {
  border-bottom-color: #e5ddc9;
}

/* 灵感卡片鼠标指针 */
.spark-card, .blueprint-card { cursor: pointer; }
.insp-tab, .insp-filter { cursor: pointer; }

/* ============================================================
   ISS-06：灵感卡片交互增强（hover 明显反馈）
   ============================================================ */

.spark-card, .blueprint-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.spark-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.blueprint-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* 箭头始终微可见，hover 时更突出 —— 告诉用户"这里可点击" */
.spark-arrow, .bp-arrow {
  opacity: 0.7;
}
.spark-card:hover .spark-arrow,
.blueprint-card:hover .bp-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* warm 模式下卡片 hover 增强：背景淡黄 + 暖色阴影 */
[data-theme="warm"] .spark-card:hover {
  background: #fefcf7;
  border-color: #c77d2e;
  box-shadow: 0 8px 20px rgba(61, 48, 40, 0.08), 0 2px 4px rgba(199, 125, 46, 0.08);
}
[data-theme="warm"] .blueprint-card:hover {
  background: #fefcf7;
  border-color: #c77d2e;
  box-shadow: 0 8px 20px rgba(61, 48, 40, 0.08), 0 2px 4px rgba(199, 125, 46, 0.08);
}

/* 卡片正文 3 行省略，保持高度统一且提示"还有内容" */
.spark-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   ISS 修复包 2026-04-14
   ISS-02/04：三栏布局在宽屏下平衡 + 右栏略宽
   ISS-03：正文呼吸感（段落/标题/引用间距 + 首行留白）
   ISS-05：左侧目录 Part 标题下加分隔符
   ============================================================ */

/* ---------- ISS-02/04：宽屏居中 + 正文 max-width 响应式放大 ---------- */

/* Bug 2 修复（2026-04-26）：超宽屏下 reader 不再死板 cap 1760px。
   2400px viewport 上原方案两侧约 320px 黑边，改 min(1920px, 96vw) 后两侧
   ~48px 留白，更接近现代信息密度阅读站点（Stripe / Linear / Vercel）。 */
@media (min-width: 1600px) {
  #reader {
    max-width: min(1920px, 96vw);
    margin: 0 auto;
  }
}

/* warm 模式下正文随屏宽微扩 —— 保持阅读舒适不伤眼 */
@media (min-width: 1500px) {
  [data-theme="warm"] #chapter-body {
    max-width: 860px;
  }
}
@media (min-width: 1800px) {
  [data-theme="warm"] #chapter-body {
    max-width: 900px;
  }
}

/* 右栏略宽一点，应对较长的目录文字 */
.chapter-toc-panel {
  width: 280px;
  min-width: 240px;
}

/* ---------- ISS-03：正文呼吸感（仅 warm 模式） ---------- */

/* 段落之间更松一些（从 1em 提到 1.35em） */
[data-theme="warm"] #chapter-body p {
  margin-bottom: 1.35em;
  line-height: 1.85;
}

/* 首个段落顶部留白，避免紧贴标题 */
[data-theme="warm"] #chapter-body h1 + p,
[data-theme="warm"] #chapter-body h2 + p,
[data-theme="warm"] #chapter-body h3 + p {
  margin-top: 0.4em;
}

/* h2/h3 上下间距更大，制造章节停顿感 */
[data-theme="warm"] #chapter-body h2 {
  margin-top: 64px;
  margin-bottom: 20px;
  padding-top: 32px;
}
[data-theme="warm"] #chapter-body h3 {
  margin-top: 52px;
  margin-bottom: 18px;
  padding-top: 24px;
}

/* blockquote 前后加呼吸 */
[data-theme="warm"] #chapter-body blockquote {
  margin: 32px 0;
}

/* 列表项间距 */
[data-theme="warm"] #chapter-body li {
  margin-bottom: 0.5em;
  line-height: 1.8;
}

/* 代码块前后呼吸 */
[data-theme="warm"] #chapter-body pre {
  margin: 28px 0;
}

/* hr 分隔线上下空间 */
[data-theme="warm"] #chapter-body hr {
  margin: 56px 0;
}

/* ---------- ISS-05：左侧目录 Part 标题下加分隔符 ---------- */

/* Part 标题和第一个章节之间加视觉分割 —— 浅色细线 */
.toc-part-title {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

/* Part 下第一个章节顶部留空 */
.toc-part.expanded .toc-chapters > :first-child {
  margin-top: 6px;
}

/* warm 模式下分隔线用暖色边框 */
[data-theme="warm"] .toc-part-title {
  border-bottom-color: #d8cfbc;
}

/* subgroup 内部的章节之间也留呼吸 */
[data-theme="warm"] .toc-subgroup {
  padding-top: 14px;
}

/* ===== 语言切换防闪屏（2026-04-22） =====
   切换语言时给 body 加 .cc-lang-switching，主要内容轻度淡出 + 阻断点击
   防止：连续点击导致中间态 DOM 闪烁、用户看到一半中文一半英文 */
body.cc-lang-switching #landing,
body.cc-lang-switching #reader,
body.cc-lang-switching #gallery,
body.cc-lang-switching #inspiration,
body.cc-lang-switching #welcome {
  opacity: 0.55;
  transition: opacity 180ms ease-out;
  pointer-events: none;
}
body.cc-lang-switching .cc-lang-switcher {
  /* 切换器本身保持可点（不被禁用），但视觉提示"工作中" */
  opacity: 0.7;
  cursor: progress;
}
/* 切换中按钮变灰，告诉用户"在切换" */
body.cc-lang-switching .cc-lang-btn {
  pointer-events: none;
}

/* ===== Concept list 字号对齐（2026-04-22） =====
   修复架构全景侧边栏点开节点后 concept 字体大小不一致的问题
   原因：早期数据混合用 string 和 {name, explain} 两种 concept 格式，
        渲染出的 li 高度不同；现在 renderPanelHTML 统一升格为 name+explain
        结构，CSS 这里把单 .concept-name (无 explain) 时的留白也补齐 */
.concept-list li {
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.55;
}
.concept-list .concept-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.concept-list .concept-explain {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}
/* 单行 concept（无 explain）也保持等高，避免视觉抖动 */
.concept-list li:has(.concept-name:only-child) {
  padding: 10px 0;
}