/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║                      AI³ 提示词辞典 · 样式表                                ║
   ╚═══════════════════════════════════════════════════════════════════════════╝

   全局设计决策（见 README.md 设计章节）：
   ───────────────────────────────────────────────────────────────────────────
   1. 单卡片 "app-like" 布局：工具栏 + 主体 合为一张带阴影的浮动卡片
   2. 三层背景分层：
        外层 card    = --surface   （白 / 深灰）
        导航/内容层  = --surface-muted   （略 inset 的面板色）
        聚焦文档     = --surface   （卡片再悬浮在 inset 上，视觉焦点）
   3. 主题系统由 body[data-theme="..."] 驱动，所有颜色 / 阴影 / 渐变都走 CSS 变量；
      当前 2 套：classic-blue（浅色默认）、graphite（深色）
   4. 所有图标统一 Lucide outline（via iconify-icon），brand logo 用 inline SVG
   5. 4 领域色 --section-01~04 只用于小 icon（避免喧宾夺主）
   6. 字段层级严格两级：
        .doc-section-label  (INPUT / AI 指令区)  —— 大字 + 底部分隔线
        .ai-field-label     (ROLE / TASK / ...)  —— 小字淡色
*/

/* ═══════════════════════════════════════════════════════════════════════════════
   第一部分：Design Tokens（设计变量 / 设计令牌）
   ───────────────────────────────────────────────────────────────────────────────
   使用 CSS 变量定义设计系统，确保一致性和易于维护。
   变量分为：颜色、圆角、间距、阴影、字体、动效、焦点环
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* 语义色：跨主题恒定 */
  --success: #16a34a;
  --warning: #d97706;
  --error: #dc2626;
  --info: #2563eb;

  /* ─────────────────────────────────────────────────────────────────────────
     圆角（Border Radius）
     从小到大定义不同元素的圆角程度
  ───────────────────────────────────────────────────────────────────────── */
  --radius-xs: 6px;     /* 极小：如图标、小标签 */
  --radius-sm: 10px;   /* 小：如按钮、输入框 */
  --radius-md: 14px;    /* 中：如卡片、面板 */
  --radius-lg: 20px;    /* 大：如模态框、主容器 */
  --radius-pill: 999px; /* 药丸：如标签、徽章 */

  /* ─────────────────────────────────────────────────────────────────────────
     间距（Spacing）
     基于 4px 网格系统的间距变量
  ───────────────────────────────────────────────────────────────────────── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;

  /* ─────────────────────────────────────────────────────────────────────────
     阴影（Box Shadow）
     定义不同悬浮状态的阴影效果
  ───────────────────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);                    /* 极淡阴影 */
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, .05),                     /* 小阴影：卡片默认 */
                0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 8px 20px -8px rgba(15, 23, 42, .1),                 /* 中阴影：下拉菜单 */
                0 2px 6px rgba(15, 23, 42, .04);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, .15),            /* 大阴影：模态框 */
                0 4px 12px rgba(15, 23, 42, .05);
  /* ─────────────────────────────────────────────────────────────────────────
     字体（Typography）
     定义字体栈和等宽字体
  ───────────────────────────────────────────────────────────────────────── */
  /* 无衬线字体栈：优先使用系统字体以获得最佳可读性 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  /* 等宽字体栈：用于代码、ID 等需要等宽显示的内容 */
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ─────────────────────────────────────────────────────────────────────────
     动效（Animation）
     定义过渡时间和缓动函数
  ───────────────────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);  /* 标准缓动函数 */
  --t-fast: 140ms;   /* 快速过渡：hover、focus 等 */
  --t-base: 200ms;   /* 基本过渡：展开、淡入等 */

  --focus-ring: 0 0 0 3px var(--accent-ring);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第二部分：主题系统（Themes）
   ───────────────────────────────────────────────────────────────────────────────
   4 套调色板，通过 body[data-theme="xxx"] 切换。
   每套声明核心变量（由用户给定）+ 派生变量（surface-elev / section-01~04 / mesh 等）
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 01 浅色经典蓝（Classic Blue） ─── */
body[data-theme="classic-blue"] {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --text: #1e293b;
  --text-muted: #64748b;
  --accent: #3b82f6;
  --icon-default: #475569;
  --icon-hover: #0f172a;
  --border: #e2e8f0;
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.04);
  --accent-soft: rgba(59, 130, 246, 0.05);
  --logo-color: #1e2a3a;
  --logo-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));

  --surface-elev: #ffffff;
  --surface-muted: #f0f4f9;
  --border-strong: #cbd5e1;
  --text-subtle: #94a3b8;
  --code-bg: #f1f5f9;
  --code-text: #1e293b;
  --accent-hover: #2563eb;
  --accent-ring: rgba(59, 130, 246, .22);

  /* 4 领域色：同蓝灰家族轻微分化，不与 accent 抢戏 */
  --section-01: #475569;  /* slate 600 */
  --section-02: #64748b;  /* slate 500 */
  --section-03: #0ea5e9;  /* sky 500 */
  --section-04: #6366f1;  /* indigo 500 */

  --mesh-1: rgba(59, 130, 246, .05);
  --mesh-2: rgba(99, 102, 241, .04);
  --mesh-3: rgba(14, 165, 233, .03);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);
  --shadow-md: 0 8px 20px -8px rgba(15, 23, 42, .1);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, .15);
}

/* ─── 03 石墨暗夜（Graphite Night） ─── */
body[data-theme="graphite"] {
  --bg: #0a0e1a;
  --surface: #1a1f2c;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #3b82f6;
  --icon-default: #94a3b8;
  --icon-hover: #e2e8f0;
  --border: #2d3a4a;
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.6);
  --accent-soft: rgba(59, 130, 246, 0.06);
  --logo-color: #eef2f8;
  --logo-shadow: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));

  --surface-elev: #232938;
  --surface-muted: #1e2332;
  --border-strong: #3d4a5c;
  --text-subtle: #64748b;
  --code-bg: #141825;
  --code-text: #e2e8f0;
  --accent-hover: #60a5fa;
  --accent-ring: rgba(59, 130, 246, .28);

  /* 4 领域色：同蓝灰家族分化，低饱和不抢 accent */
  --section-01: #94a3b8;
  --section-02: #64748b;
  --section-03: #60a5fa;
  --section-04: #818cf8;

  --mesh-1: rgba(59, 130, 246, .08);
  --mesh-2: rgba(129, 140, 248, .06);
  --mesh-3: rgba(100, 116, 139, .04);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 8px 20px -8px rgba(0, 0, 0, .5);
  --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .6);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第三部分：Reset & Base（重置与基础样式）
   ───────────────────────────────────────────────────────────────────────────────
   标准化浏览器默认样式，建立一致的初始状态
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 盒模型重置：所有元素使用 border-box */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
  根字号：所有 rem 单位的基准
  通过媒体查询调整根字号，实现"一行改动，全站字号等比缩放"的响应式策略
  - 桌面（>= 768px）：16px
  - 平板（641 - 768px）：15.5px（~3% 缩小）
  - 手机（<= 640px）：15px（~6% 缩小）
*/
html {
  font-size: 16px;
  scroll-behavior: smooth;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(1000px 600px at 12% -10%, var(--mesh-1), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, var(--mesh-2), transparent 60%),
    radial-gradient(600px 400px at 85% 10%, var(--mesh-3), transparent 55%);
  background-attachment: fixed;
  line-height: 1.6;
  /* 100dvh = dynamic viewport height，避免 iOS Safari 地址栏缩回时 100vh 超出可视区的问题 */
  height: 100dvh;
  min-height: 100vh;           /* 不支持 dvh 的老浏览器兜底 */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: var(--sp-5) var(--sp-5);
}

button {
  font-family: inherit;   /* 继承字体 */
  font-size: inherit;     /* 继承字号 */
  cursor: pointer;        /* 手型光标 */
  background: none;       /* 无背景 */
  border: none;          /* 无边框 */
  color: inherit;        /* 继承文字色 */
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;  /* 无下划线 */
}

code, pre {
  font-family: var(--font-mono);  /* 等宽字体用于代码 */
}

ul {
  list-style: none;  /* 无列表样式 */
}

/*
  统一 iconify-icon 的垂直对齐
  - vertical-align: middle：图标中线对齐文字中线（而非基线）
  - line-height: 1：避免继承 body 1.6 行高造成的垂直留白
  - 这两条解决了 "align-items:center + 图标 + 文字" 仍看起来偏上/偏下的 bug
*/
iconify-icon {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* CDN 双挂时的占位：防止图标区域塌缩、保持布局稳定 */
iconify-icon:not(:defined) {
  width: 1em;
  height: 1em;
  background: currentColor;
  opacity: .3;
  border-radius: 2px;
}

/* 隐藏类：用于 JS 控制元素显示/隐藏 */
.hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第四部分：编辑器容器（Editor Container）
   ───────────────────────────────────────────────────────────────────────────────
   定义页面主布局结构：wrapper > toolbar + card
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
  编辑器容器 wrapper
  • 限制最大宽度 1400px 并水平居中
  • 高度 100vh 全屏显示
  • 使用 flex 纵向排列：顶部工具栏 + 主内容卡片
*/
.editor-wrapper {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  min-height: 0;                /* 允许 flex 子项收缩，配合 body dvh */
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第五部分：顶部工具栏（Toolbar）
   ───────────────────────────────────────────────────────────────────────────────
   包含 Logo、标语、AI直达下拉菜单、复制按钮
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
  顶部工具栏
  • flex 布局，水平排列
  • 背景为 surface 色，底部有边框分隔
  • overflow: visible 允许下拉菜单超出工具栏
*/
.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  background: transparent;          /* 合并进卡片后去掉独立背景 */
  border-bottom: 1px solid var(--border);
  overflow: visible;
  flex-shrink: 0;
}

/* 工具栏左侧：Logo */
.toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
}

/* Logo SVG：单色 + drop-shadow，跟随主题 */
.toolbar-left .logo-svg {
  height: 40px;
  width: auto;
  cursor: pointer;
  outline: none;
  border-radius: var(--radius-xs);
  transition: opacity var(--t-fast);
  filter: var(--logo-shadow);
}
.toolbar-left .logo-svg text {
  fill: var(--logo-color);
  /* 关键：关闭字体 hinting，用几何精度渲染 → 小像素尺寸下字形位置不再被吸附到像素格 */
  text-rendering: geometricPrecision;
  /* 禁止 SVG 文字被用户选中（logo 不是正文） */
  user-select: none;
}
.toolbar-left .logo-svg:hover { opacity: .82; }
.toolbar-left .logo-svg:focus-visible { box-shadow: var(--focus-ring); }

/* 工具栏居中：slogan */
.toolbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Slogan 文字样式 */
.toolbar-slogan {
  font-size: 1.125rem;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* 工具栏右侧：主题切换 + GitHub */
.toolbar-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-1);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第六部分：图标按钮（Icon Button）
   ───────────────────────────────────────────────────────────────────────────────
   纯图标样式：无背景无边框，仅保留图标
   用于 AI直达、复制等操作按钮
   ═══════════════════════════════════════════════════════════════════════════════ */

.btn-icon {
  padding: 8px 10px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.btn-icon:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.btn-icon:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-icon:active {
  transform: scale(.94);
}

/* 成功态：复制完成后短暂反馈 */
.btn-icon.btn-success {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.btn-icon .btn-label {
  display: none;
}

.btn-icon iconify-icon {
  font-size: 1.125rem;    /* 18px 细线图标 */
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第七部分：下拉菜单（Dropdown Menu）
   ───────────────────────────────────────────────────────────────────────────────
   AI直达下拉菜单的样式
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Kimi K 在深色主题下改白色（浅色主题保持 SVG 原色 #191A21） */
body[data-theme="graphite"] .platform-btn[data-platform="kimi"] svg path:last-child {
  fill: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第九部分：主内容卡片（Editor Card）
   ───────────────────────────────────────────────────────────────────────────────
   网格布局：左侧分类面板(固定宽度) + 右侧内容面板(自适应)
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
  主内容卡片
  • display: grid 网格布局
  • 左侧分类面板 200px，右侧内容面板自适应
  • 背景、表面色、边框、圆角、阴影
*/
.editor-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);      /* 加深阴影，强化漂浮感 */
  flex: 1;
  min-height: 0;
  overflow: hidden;                  /* 让内部滚动，卡片自身不溢出 */
}

/*
  卡片主体：分类面板 + 内容面板
  网格布局在此层，而非 editor-card 上（因为卡片现在还要装 toolbar）
*/
.editor-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3);
  flex: 1;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第十部分：左侧分类面板（Category Panel）
   ───────────────────────────────────────────────────────────────────────────────
   包含：搜索框、分类树形列表、底部状态栏
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
  分类面板
  • flex 纵向布局
  • overflow: hidden 防止面板内容溢出
  • 但允许内部 .category-list 独立滚动
*/
/*
  分类面板：拆为"搜索子面板 + 分类子面板"两个圆角块，
  之间露出外层 card 的 --surface 底色做视觉间距
*/
.category-panel {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
}

/*
  搜索框
  • flex 布局：图标 + 输入框
  • 背景为 muted 色，带边框，搜索建议浮层以此为定位锚点
*/
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
}

.search-icon {
  color: var(--text-muted);  /* 搜索图标颜色 */
  font-size: .875rem;        /* 14px */
}

.search-box input {
  flex: 1;                   /* 占据剩余空间 */
  background: none;          /* 无背景 */
  border: none;              /* 无边框 */
  outline: none;             /* 无焦点框 */
  font-size: .875rem;        /* 14px */
}
/* 聚焦即隐藏占位符（iOS/macOS 风格），不用等用户开始打字 */
.search-box input:focus::placeholder {
  color: transparent;
}


/*
  搜索建议下拉列表
  • position: absolute 相对于搜索框定位
  • 最大高度 400px，超出滚动
*/
.search-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-width: 100vw;               /* 窄屏（<320px）的保险，避免浮层横向超出视口 */
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;             /* 建议项若超宽，靠 ellipsis 截断而非横滚 */
  z-index: 100;
  padding: 4px;
}

.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--text);
  transition: background var(--t-fast);
}
.search-suggestion-item:hover,
.search-suggestion-item.hover {
  background: var(--surface-muted);
}
.search-suggestion-item iconify-icon {
  font-size: 1rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.suggestion-content {
  flex: 1;
  min-width: 0;
}
.suggestion-name {
  font-size: .875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-name mark {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0 2px;
  border-radius: 3px;
}
.suggestion-meta {
  font-size: .6875rem;
  color: var(--text-subtle);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-meta mark {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0 2px;
  border-radius: 3px;
}
.suggestion-hit-label {
  display: inline-block;
  vertical-align: middle;      /* 与同行 meta 文字中线对齐，不靠基线 */
  padding: 0 5px;
  margin-right: 4px;
  font-size: .625rem;
  border-radius: 3px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text-muted);
  letter-spacing: .04em;
}
.suggestion-empty {
  padding: 14px;
  text-align: center;
  color: var(--text-subtle);
  font-size: .8125rem;
}

/* 分类列表区域 */
.category-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2);
  min-height: 0;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
}

/* 隐藏分类列表滚动条 */
.category-list::-webkit-scrollbar {
  display: none;
}

.category-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第十一部分：分类树形导航（Category Tree）
   ───────────────────────────────────────────────────────────────────────────────
   4 大领域分组，每组下有分类项，分类项下有提示词列表
   使用 +/- 图标展开/收起
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 领域分组容器 */
.category-tree-group {
  margin-bottom: var(--sp-1);  /* 底部间距 4px */
}

/*
  领域分组头部
  • flex 布局：图标 + 文字
  • cursor: pointer 手型光标
*/
.category-tree-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  font-size: .8125rem;    /* 13px（原 12px 反层级，现与二级分类持平，靠 font-weight 700 区分） */
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background var(--t-fast);
  position: relative;
}

/* 4 个板块图标统一用文字色（黑白），避免彩色图标干扰阅读 */
.category-tree-group .section-icon { color: var(--text-muted); }

.category-tree-header:hover {
  background: var(--surface-muted);
}

/*
  领域分组展开/收起图标（+/-）
  • font-size: .625rem 小尺寸
  • color: var(--text-muted) 灰色，非蓝色
*/
.category-tree-header .chev {
  font-size: .875rem;
  color: var(--text-subtle);
  transition: transform var(--t-fast);
}

.category-tree-header iconify-icon.section-icon {
  font-size: 1rem;            /* 16px */
}

/*
  分类项头部
  • 与领域分组头部类似，但字号和颜色略有不同
*/
.category-tree-item-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-size: .8125rem;        /* 13px */
  font-weight: 500;           /* 中等字重 */
  color: var(--text-muted);   /* 灰色文字 */
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background var(--t-fast), color var(--t-fast);
}

.category-tree-item-header:hover {
  background: var(--surface-muted);
  color: var(--text);         /* hover 时变深 */
}

/*
  分类项展开/收起图标（+/-）
*/
.category-tree-item-header .chev {
  font-size: .875rem;
  color: var(--text-subtle);
  transition: transform var(--t-fast);
}

/* 分类项下的提示词数量 */
.category-tree-item-count {
  margin-left: auto;
  font-size: .75rem;          /* 12px（原 11px 上调，数字更易读） */
  color: var(--text-subtle);
}

/*
  分类项下的提示词列表
  • 使用 max-height 动画实现展开/收起效果
  • overflow: hidden 隐藏超出内容
*/
.category-tree-items,
.category-tree-prompt-items {
  padding-left: var(--sp-6);
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-base) var(--ease);
}
.category-tree-prompt-items {
  padding-left: var(--sp-5);
}

/* 领域展开 → 显示下属分类 */
.category-tree-group.expanded > .category-tree-items {
  max-height: 2000px;
}

/* 分类展开 → 显示提示词列表 */
.category-tree-item.expanded > .category-tree-prompt-items {
  max-height: 5000px;
}

/* chevron 图标：展开时旋转 90° */
.category-tree-header .chev,
.category-tree-item-header .chev {
  transition: transform var(--t-fast) var(--ease);
}
.category-tree-group.expanded > .category-tree-header .chev,
.category-tree-item.expanded > .category-tree-item-header .chev {
  transform: rotate(90deg);
}

/*
  提示词项
  • flex 布局：图标 + 名称
  • 名称过长时省略号截断
*/
.category-tree-prompt-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-size: .8125rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: background var(--t-fast), color var(--t-fast);
}

.category-tree-prompt-item:hover,
.category-tree-prompt-item:focus-visible {
  background: var(--surface-muted);
  color: var(--text);
  outline: none;
}

/* 当前选中的提示词项：左侧竖条 + 强调色 */
.category-tree-prompt-item.active {
  color: var(--accent);
  font-weight: 500;
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

.category-tree-prompt-item iconify-icon {
  font-size: .875rem;
}

/* 提示词名称：单行省略号截断 */
.category-tree-prompt-name {
  white-space: nowrap;        /* 不换行 */
  overflow: hidden;           /* 隐藏超出 */
  text-overflow: ellipsis;    /* 显示省略号 */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第十二部分：右侧内容面板（Content Panel）
   ───────────────────────────────────────────────────────────────────────────────
   显示提示词详情和编辑器内容
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
  内容面板
  • flex 纵向布局
  • overflow 内部滚动（通过 .editor-content 实现）
  • 背景为 bg 色，与卡片区分
*/
.content-panel {
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/*
  提示词详情视图
  • flex 纵向布局撑满内容面板
*/
.prompt-detail-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第十三部分：详情头部（Detail Header）
   ───────────────────────────────────────────────────────────────────────────────
   显示提示词名称和元信息标签
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 详情头部：两行布局 */
.detail-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* 第 1 行：标题 + 分类 + 版本
   align-items: baseline —— 按文字基线对齐，避免 "h2 20px + chip 12px" 字号差太大时
   flex center 在缩放下产生的半像素舍入抖动 */
.detail-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.detail-title-row h2 {
  font-size: 1.25rem;      /* 20px */
  font-weight: 700;        /* 与 slogan 700 同重，因尺寸更大视觉权重自然更高 */
  margin: 0;
}
/* 原标题前的色点已移除，领域标识由右侧分类 chip 的圆点承担，避免视觉冗余 */

/* 元信息标签容器 */
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

/* 第 2 行：7 平台 + 复制 */
.detail-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* 内容区底部 */
.detail-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/*
  元信息标签
  • inline-flex 横向排列
  • pill 形状
  • 默认为弱化灰色；meta-chip-primary 为主分类色；meta-chip-soft 为次要信息
*/
.meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: .75rem;          /* 12px（原 11px，关键元信息不应过小） */
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  line-height: 1.6;
}

/* 主分类：强调色淡底（默认用 accent，具体领域由 data-section 覆盖） */
.meta-chip-primary {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
  font-weight: 500;
}
/* 分类 chip 前原有 6px 圆点已移除，由 chip 背景色本身承担领域辨识职责 */

/* 按领域切换 chip 色：用 color-mix 跟随主题 --section-XX */
.prompt-detail-view[data-section="01"] .meta-chip-primary { color: var(--section-01); background: color-mix(in srgb, var(--section-01) 14%, transparent); }
.prompt-detail-view[data-section="02"] .meta-chip-primary { color: var(--section-02); background: color-mix(in srgb, var(--section-02) 14%, transparent); }
.prompt-detail-view[data-section="03"] .meta-chip-primary { color: var(--section-03); background: color-mix(in srgb, var(--section-03) 14%, transparent); }
.prompt-detail-view[data-section="04"] .meta-chip-primary { color: var(--section-04); background: color-mix(in srgb, var(--section-04) 14%, transparent); }

/* 次级信息：无底色纯灰字 */
.meta-chip-soft {
  background: transparent;
  border-color: transparent;
  color: var(--text-subtle);
  padding-left: 0;
}

/* 等宽字体的标签（如 ID） */
.meta-chip-mono {
  font-family: var(--font-mono); /* 等宽字体 */
}

/* 已修改状态标签 */
.meta-chip-modified {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border-color: var(--warning);
  color: var(--warning);
}

/* 新增状态标签 */
.meta-chip-new {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: var(--success);
  color: var(--success);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第十四部分：编辑器内容区（Editor Content）
   ───────────────────────────────────────────────────────────────────────────────
   分为三个部分：用户输入区 + 分隔线 + AI指令区
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
  编辑器内容区
  • flex 纵向布局
  • 占据剩余空间，内部滚动
*/
.editor-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-items: stretch;
}

.editor-content > .prompt-document {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Prompt Document（统一文档容器）
   ─────────────────────────────────────────────────────────────────────────────
   输入段 + AI 指令段共用一个外框，视觉上是"同一份文档的两节"
   节与节之间靠 doc-divider 分隔，不再用独立边框
   ═══════════════════════════════════════════════════════════════════════════════ */

.prompt-document {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-shrink: 0;              /* 不被 flex 容器压缩，内容自然延展 → editor-content 整体滚动 */
}

.doc-section {
  padding: var(--sp-4) var(--sp-5);
}

/* Input / AI 两节背景继承 content-panel（即 --surface），无需独立着色 */

/* Section 级别标题（INPUT / AI 指令）：醒目、比字段标题高一层 */
.doc-section-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.doc-section-label iconify-icon {
  font-size: 1rem;
  color: var(--accent);
}
.doc-section-label .label-en {
  font-size: 1rem;         /* 16px（比 .9375 上调，与正文 15px 拉开一档） */
  color: var(--text);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.doc-section-label .doc-section-title,
.doc-section-label .label-zh {
  font-size: 1rem;         /* 16px */
  color: var(--text);
  font-weight: 700;        /* 与 label-en 同重，强化"章节标题"身份 */
  letter-spacing: .02em;
}

/* 内分隔线：替代原 editor-divider */
.doc-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* 隐藏编辑器内容区的滚动条 */
.editor-content::-webkit-scrollbar {
  display: none;
}

.editor-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/*
  用户输入区
  • contenteditable 可编辑
  • 虚线边框表示可编辑状态
  • 最小高度 120px
*/
.editor-input {
  min-height: 100px;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text);
  outline: none;
  background: var(--surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  transition: background var(--t-fast), border-color var(--t-fast);
}

/*
  输入区空内容时的占位符
  • 使用 data-placeholder 属性
  • 灰色淡化文字
  • 上下居中
  • 点击后不再显示（通过 data-placeholder-shown 属性控制）
*/
.editor-input:empty::before {
  content: attr(data-placeholder);
  color: var(--text-subtle);
  font-style: italic;
  opacity: .75;
  pointer-events: none;
  display: block;
}

.editor-input:focus:empty::before,
.editor-input[data-placeholder-shown="false"]:empty::before {
  display: none;
}

.editor-input:focus {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第十五部分：分隔线（Divider）
   ───────────────────────────────────────────────────────────────────────────────
   输入区与指令区之间的分隔线：单根细线，非箭头+渐变
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   第十六部分：AI 指令区（AI Instructions）
   ───────────────────────────────────────────────────────────────────────────────
   显示完整的 AI 提示词指令（只读）
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
  AI 指令区
  • 左边框 3px 强调色，表示 AI 生成的内容
  • user-select: text 允许选中文本
  • white-space: pre-wrap 保留换行和空格
  • flex-shrink: 0 防止被压缩
*/
.editor-ai {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text);
  user-select: text;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AI 指令字段（AI Fields）
   ─────────────────────────────────────────────────────────────────────────────
   每个字段：英文 key（装饰层）+ 中文 label + 值（或 bullet 列表）
   ═══════════════════════════════════════════════════════════════════════════════ */

.ai-field {
  margin-bottom: var(--sp-4);
}
.ai-field:last-child {
  margin-bottom: 0;
}

/* 字段级别标题（ROLE / TASK...）：低一级，不与 Section 标题竞争
   align-items 改为 center（从 baseline）：小字 EN + 稍大 ZH 按中线对齐，
   避免 baseline 对齐让小字看起来"挂"在大字底部的视觉偏差
   margin-bottom 从 4px(sp-1) 提到 8px(sp-2)：与字段间 16px 的 1:2 节奏匹配，
   避免单行字段"上紧下松"的不对称感 */
.ai-field-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.ai-field-label .label-en {
  font-size: .6875rem;     /* 11px（原 10px 偏极限，上调 1px 改善可读） */
  color: var(--text-subtle);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}
.ai-field-label .label-zh {
  font-size: .8125rem;     /* 13px（原 12px 上调 1px） */
  color: var(--text-muted);
  font-weight: 500;
}

.ai-field-value {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
}

.ai-field-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-field-list li {
  position: relative;
  padding: 2px 0 2px var(--sp-4);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--text);
}
.ai-field-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.85em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AI 平台直达条（Platforms Bar）
   ─────────────────────────────────────────────────────────────────────────────
   位于 detail-header 第 2 行，7 个官方 logo 横向平铺，点击即复制 + 跳转
   每个按钮：32×32 圆角方块，品牌色背景，白色图标/字
   ═══════════════════════════════════════════════════════════════════════════════ */

.ai-platforms-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.platform-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  padding: 0;
}

.platform-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

.platform-btn:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.platform-btn:focus-visible {
  /* 用 outline 而非 accent-soft 的 box-shadow：colored bg（DeepSeek 蓝、Gemini 多色）
     上 accent-soft 对比度不足；outline 在任意底色上都有足够分离度 */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

.platform-btn:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第十七部分：骨架屏（Skeleton Screen）
   ───────────────────────────────────────────────────────────────────────────────
   数据加载前显示的占位符动画
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 骨架屏列表容器 */
.skeleton-list {
  padding: var(--sp-2);
}

/*
  骨架屏项
  • 使用渐变背景动画模拟加载效果
  • 高度 32px 与分类树项相近
*/
.skeleton-item {
  height: 32px;
  background: linear-gradient(
    90deg,
    var(--surface-muted) 25%,
    var(--border) 50%,
    var(--surface-muted) 75%
  );
  background-size: 200% 100%;  /* 两倍宽度用于动画 */
  animation: skeleton-shimmer 1.5s infinite; /* 闪烁动画 */
  border-radius: var(--radius-xs);
  margin-bottom: var(--sp-2);  /* 底部间距 */
}

/* 骨架屏闪烁动画 */
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }   /* 起始位置 */
  100% { background-position: -200% 0; } /* 结束位置（向左移动） */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第十八部分：Toast 提示（Toast Notification）
   ───────────────────────────────────────────────────────────────────────────────
   操作反馈的临时提示信息
   ═══════════════════════════════════════════════════════════════════════════════ */

/*
  Toast 提示框
  • position: fixed 固定定位
  • 底部居中显示
  • 包含图标和文字
*/
.toast {
  position: fixed;
  bottom: 24px;                /* 距底部 24px */
  left: 50%;                   /* 水平居中 */
  transform: translateX(-50%) translateY(20px); /* 初始偏移 */
  background: var(--surface-elev);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: var(--radius-pill); /* 药丸形 */
  font-size: .875rem;          /* 14px */
  box-shadow: var(--shadow-lg); /* 大阴影 */
  z-index: 9999;               /* 最高层级 */
  opacity: 0;                  /* 默认隐藏 */
  pointer-events: none;        /* 禁止点击 */
  transition: all var(--t-base) var(--ease); /* 过渡动画 */
  display: flex;
  align-items: center;
  gap: var(--sp-2);           /* 图标与文字间距 */
}

/* Toast 显示状态 */
.toast.show {
  opacity: 1;                  /* 完全显示 */
  transform: translateX(-50%) translateY(0); /* 回到原位 */
}

/* 不同类型的 Toast */
.toast-success { background: var(--success); } /* 成功：绿色 */
.toast-error { background: var(--error); }     /* 错误：红色 */
.toast-warning { background: var(--warning); } /* 警告：橙色 */
.toast-info { background: var(--info); }        /* 信息：蓝色 */

/* 手动复制兜底弹框（微信 / 支付宝 WebView 场景） */
.manual-copy-dialog {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  z-index: 10000;
  align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.manual-copy-dialog.show { display: flex; }
.manual-copy-inner {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
}
.manual-copy-tip {
  margin: 0;
  color: var(--text);
  font-size: .9375rem;
  line-height: 1.5;
  padding-right: var(--sp-6);
}
.manual-copy-text {
  flex: 1;
  min-height: 200px;
  padding: var(--sp-3);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  outline: none;
}
.manual-copy-text:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.manual-copy-close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}
.manual-copy-close:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════════
   第十九部分：数据加载失败态（Load Error）
   ═══════════════════════════════════════════════════════════════════════════════ */

.load-error {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
}
.load-error p {
  margin: var(--sp-3) 0;
  font-size: .9375rem;        /* 15px（错误状态需要足够醒目） */
}
.btn-retry {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  color: var(--text);
  background: var(--surface-muted);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-retry:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第二十部分：抽屉（移动端分类导航）
   ───────────────────────────────────────────────────────────────────────────────
   桌面：侧栏固定可见；移动端（≤640px）：侧栏默认隐藏，汉堡按钮唤出
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 汉堡按钮默认隐藏，仅在移动端显示 */
.drawer-toggle { display: none; }

/* 抽屉遮罩默认隐藏 */
#drawerBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 40;
  animation: fadeIn var(--t-base) var(--ease);
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   第二十一部分：响应式布局
   断点：
   • ≤1024px：侧栏收窄到 220px
   • ≤768px：侧栏收窄到 180px
   • ≤640px：侧栏变为抽屉，内容区占满
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .editor-body {
    grid-template-columns: 220px 1fr;
    gap: var(--sp-3);
  }
}

@media (max-width: 768px) {
  html { font-size: 15.5px; }  /* 根字号 → 所有 rem 等比缩小 ~3% */

  .editor-toolbar {
    padding: var(--sp-3) var(--sp-4);
  }
  .toolbar-left .logo-svg {
    height: 28px;
  }
  .editor-body {
    grid-template-columns: 180px 1fr;
    padding: var(--sp-3);
  }
}

/* ≤640px：抽屉模式 —— 遵循 README "不切换为上下排列" 的决策，
   采用抽屉浮层，内容区不被压缩 */
@media (max-width: 640px) {
  html { font-size: 15px; }    /* 根字号 → 所有 rem 等比缩小 ~6% */

  body {
    padding: var(--sp-2);
  }
  .drawer-toggle { display: inline-flex; }
  .toolbar-center { display: none; }  /* 抽屉模式：让位给汉堡按钮 */

  /* 触摸目标：mobile 统一到 iOS HIG / WCAG 2.2 AAA 推荐的 44×44 */
  .editor-toolbar .btn-icon {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
  /* AI 平台直达按钮：mobile 40→44。7 个按钮 + 间距会 wrap 到 2 行（合理让步换取可点击度）*/
  .platform-btn {
    width: 44px;
    height: 44px;
  }
  .platform-btn svg {
    width: 24px;
    height: 24px;
  }
  /* 复制按钮跟工具栏 btn-icon 一致 */
  #copyFullPrompt {
    min-width: 44px;
    min-height: 44px;
  }

  .editor-toolbar {
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }
  .toolbar-left { gap: var(--sp-2); }
  .toolbar-slogan { font-size: .9375rem; letter-spacing: .03em; }  /* 窄屏：缩字号避免挤压 */

  .editor-body {
    grid-template-columns: 1fr;   /* 单列：内容区占满 */
    padding: var(--sp-2);
  }

  .category-panel {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(300px, 82vw);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease);
    border-radius: 0;
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    background: var(--surface);
  }
  body.drawer-open .category-panel {
    transform: translateX(0);
  }
  body.drawer-open #drawerBackdrop {
    display: block;
  }

  /* 详情头部：保持行布局但缩小 */
  .detail-header {
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-2);
  }
  /* 字号交给根字号缩放（html { font-size: 15px }）统一处理，不再单独覆盖 */
  .editor-content {
    padding: var(--sp-3);
  }
  .doc-section {
    padding: var(--sp-3) var(--sp-4);
  }
  .detail-footer {
    padding: var(--sp-2) var(--sp-4);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   静态 SEO 页面样式（/p/{id}/ 和 /c/{code}/）
   ───────────────────────────────────────────────────────────────────────────────
   这些页面不是 SPA，由 scripts/build_static.py 生成。需要和 SPA 共享主题变量
   但用更简单的排版，优先阅读和爬虫可读。
   ═══════════════════════════════════════════════════════════════════════════════ */

body.static-prompt-body,
body.static-category-body,
body.static-index-body {
  height: auto;
  min-height: 100vh;
  overflow: auto;
  padding: 0;
  background: var(--bg);
}

body.static-prompt-body main,
body.static-category-body main,
body.static-index-body main {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-12);
}

.static-index-cta {
  margin: var(--sp-6) 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: .9375rem;
}
.static-index-cta a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.static-index-cta a:hover { text-decoration: underline; }

/* 跳过链接（可访问性） */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: var(--sp-2) var(--sp-3);
  z-index: 10000;
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

/* 面包屑 */
.breadcrumb {
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--border); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .crumb-sep { margin: 0 var(--sp-1); color: var(--text-subtle); }
.breadcrumb span:last-child { color: var(--text); font-weight: 500; }

/* Prompt 文章 */
.prompt-article { margin-top: var(--sp-2); }
.prompt-article h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--sp-2);
  line-height: 1.25;
}
.prompt-meta {
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.prompt-meta .sep { margin: 0 var(--sp-2); color: var(--text-subtle); }
.prompt-meta a { color: var(--accent); text-decoration: none; }
.prompt-meta a:hover { text-decoration: underline; }
.prompt-lead {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
}

.prompt-section { margin-top: var(--sp-8); }
.prompt-section h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

/* 字段 dl 样式 */
.prompt-fields { margin: 0; }
.prompt-field-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: var(--sp-3);
}
.prompt-field-label code {
  font-size: .75rem;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
  letter-spacing: .1em;
}
.prompt-field-value {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--text);
  margin: var(--sp-2) 0 0;
  padding-left: 0;
}
.prompt-field-value ul { margin: 0; padding-left: var(--sp-5); list-style: disc; }
.prompt-field-value li { margin-bottom: 4px; }

/* 静态页主复制按钮 */
.static-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  margin: var(--sp-3) 0;
  transition: background var(--t-fast), transform var(--t-fast);
  font-family: inherit;
}
.static-copy-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.static-copy-btn:active { transform: translateY(0); }

/* CTA 平台列表 */
.prompt-cta { background: var(--surface-muted); padding: var(--sp-5); border-radius: var(--radius-md); }
.static-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0;
}
.static-platforms li a {
  display: inline-block;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: .875rem;
}
.static-platforms li a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.prompt-cta-tip { margin-top: var(--sp-3); font-size: .875rem; color: var(--text-muted); }
.prompt-cta-tip .btn-primary {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

/* 相关提示词 */
.related-prompts h2 { font-size: 1.125rem; border-bottom: 1px solid var(--border); padding-bottom: var(--sp-2); }
.related-prompts ul { list-style: none; padding: 0; }
.related-prompts li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.related-prompts a { color: var(--accent); text-decoration: none; }
.related-prompts a:hover { text-decoration: underline; }
.related-prompts .related-desc { color: var(--text-subtle); font-size: .8125rem; margin-left: var(--sp-2); }

/* 分类聚合页 & 全部列表 */
.prompt-list { list-style: none; padding: 0; }
.prompt-list-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.prompt-list-item h3 { font-size: 1rem; margin: 0 0 4px; }
.prompt-list-item h3 a { color: var(--text); text-decoration: none; }
.prompt-list-item h3 a:hover { color: var(--accent); }
.prompt-list-meta { font-size: .8125rem; color: var(--text-subtle); }

.category-subtitle { color: var(--text-muted); font-size: .9375rem; }
.category-desc { color: var(--text-muted); margin: var(--sp-3) 0 var(--sp-5); line-height: 1.7; }

.section-block { margin-bottom: var(--sp-8); }
.section-block h2 {
  font-size: 1.25rem;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--accent);
}
.section-block h2 a { color: var(--text); text-decoration: none; }
.section-block h3 { font-size: 1rem; margin: var(--sp-4) 0 var(--sp-2); }
.section-block h3 a { color: var(--text); text-decoration: none; }
.section-block h3 small { color: var(--text-subtle); font-weight: normal; }

.inline-prompt-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.inline-prompt-list li a {
  display: inline-block;
  padding: 3px 10px;
  background: var(--surface-muted);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  text-decoration: none;
  font-size: .8125rem;
}
.inline-prompt-list li a:hover { background: var(--accent-soft); color: var(--accent); }

.category-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); }
.category-grid li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
}
.category-grid li a:hover { background: var(--accent-soft); color: var(--accent); }
.category-grid .count { font-size: .75rem; color: var(--text-subtle); }

.all-subtitle { color: var(--text-muted); }

.static-footer {
  margin-top: var(--sp-12);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: .875rem;
  color: var(--text-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.static-footer .footer-nav { font-size: .9375rem; }
.static-footer .footer-legal,
.static-footer .footer-links { font-size: .8125rem; color: var(--text-subtle); }
.static-footer .footer-links { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
.static-footer a { color: var(--text-muted); text-decoration: none; }
.static-footer a:hover { color: var(--accent); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SPA 首屏骨架（boot splash · 加载完成后淡出）
   ───────────────────────────────────────────────────────────────────────────────
   用户打开 / 时立即看到内容入口（10 条推荐 + 浏览入口），不用等 JSON 拉完
   body.spa-ready 被 init() 末尾加上时，本块淡出
   ═══════════════════════════════════════════════════════════════════════════════ */
.spa-boot {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  background-image:
    radial-gradient(1000px 600px at 12% -10%, var(--mesh-1), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, var(--mesh-2), transparent 60%),
    radial-gradient(600px 400px at 85% 10%, var(--mesh-3), transparent 55%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
body.spa-ready .spa-boot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.spa-boot-inner {
  max-width: 640px;
  width: 100%;
  text-align: center;
}
.spa-boot-logo {
  width: 96px;
  height: auto;
  color: var(--logo-color);
  filter: var(--logo-shadow);
  margin-bottom: var(--sp-4);
}
.spa-boot-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-2);
  letter-spacing: .02em;
}
.spa-boot-subtitle {
  font-size: .9375rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}
.spa-boot-featured {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.spa-boot-featured a {
  padding: 6px 14px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  text-decoration: none;
  font-size: .875rem;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.spa-boot-featured a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.spa-boot-nav {
  font-size: .9375rem;
  margin-bottom: var(--sp-5);
}
.spa-boot-nav a {
  color: var(--accent);
  text-decoration: none;
  margin: 0 var(--sp-2);
}
.spa-boot-nav a:hover { text-decoration: underline; }
.spa-boot-nav .sep { color: var(--text-subtle); }
.spa-boot-tip {
  color: var(--text-subtle);
  font-size: .8125rem;
}

@media (max-width: 640px) {
  .spa-boot-title { font-size: 1.375rem; }
  .spa-boot-subtitle { font-size: .875rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   App Footer（SPA · 备案 + 法务）
   设计意图：弱化视觉存在感通过小字号 + 低对比度色，但 opacity 保持 1
   以满足 MIIT ICP 备案"清晰可见"的合规要求。
   ═══════════════════════════════════════════════════════════════════════════════ */
.app-footer {
  flex-shrink: 0;
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-4);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: .6875rem;             /* 11px，低于常规正文 */
  font-weight: 400;
  color: var(--text-subtle);
}
.app-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}
.app-footer a:hover { color: var(--text); text-decoration: underline; }
.app-footer .footer-sep {
  margin: 0 var(--sp-1);
  opacity: .5;
}

@media (max-width: 640px) {
  .app-footer {
    padding: var(--sp-1) var(--sp-3);
    font-size: .625rem;
  }
}