@charset "UTF-8";
/* ============================================================================
   前台样式基座 site.css
   待办 292（需求-20261019-前台PHP化改造 · 第 1 批）
   引用方式：admin/app/view/web/layout/base.html → /assets/site.css
             Nginx 将 /assets/ alias 到 admin/public/static/web/
   段落结构（便于定位，后续页面按段追加）：
     §1 main.css 原样复制（设计 token / 重置 / 通用容器 / 卡片 / 按钮 / 响应式）
     §2 顶部导航（迁移自 AppNavBar.vue，选择器统一加 .site-nav 前缀）
     §3 页脚（迁移自 AppFooter.vue，选择器统一加 .site-footer 前缀）
     §4 公共补充（#main 顶距 / 移动端抽屉与遮罩 / 汉堡按钮 / .toast / 收口）
   说明：main.css 已是聚合式全局样式（已含 .p-card / .tag-chip / .btn 系列 / .cat-grid），
        故待办 292 步骤 1 的第 4~6 段内容无需重复搬运，避免同一选择器两处维护。
   ============================================================================ */

/* ============================================================================
   §1 main.css 原样复制（来源：web/src/styles/main.css）
   ============================================================================ */

/* ============ Design Tokens（严格对应产品方案色彩系统） ============ */
:root {
  --primary: #0A1F44;
  --tech: #1E40AF;
  --cyan: #06B6D4;
  --purple: #8B5CF6;
  --green: #10B981;
  --orange: #F59E0B;
  --red: #EF4444;
  --bg: #0F172A;
  --card: #1E293B;
  --line: #334155;
  --text: #F1F5F9;
  --text-2: #94A3B8;
  --text-3: #8195AC; /* 原 #64748B 对比度 4.41:1 < 4.5:1，调亮至对 --card/--bg 均 ≥ 4.5:1 */
  --glass: rgba(30, 41, 59, 0.55);
  --glass-strong: rgba(21, 32, 54, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --hairline: rgba(255, 255, 255, 0.10);
  --radius: 16px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============ 基础重置与正文 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1400px 900px at 82% -8%, rgba(30, 64, 175, .42), transparent 62%),
    radial-gradient(1000px 760px at 6% 4%, rgba(139, 92, 246, .20), transparent 58%),
    radial-gradient(1200px 900px at 50% 108%, rgba(6, 182, 212, .12), transparent 60%),
    linear-gradient(180deg, #0B1430 0%, #0F172A 38%, #0B1226 72%, #0A1020 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .1px;
  min-height: 100vh;
}

/* ---------- 页脚吸底（sticky footer）----------
   body 改竖向 flex 容器、#main 吃掉剩余高度：内容不足一屏时（如搜索无结果、分类页短内容），
   页脚仍被压到浏览器底部，不再跟着正文一起上浮。
   必须这么做的原因：页脚里有 3D 陆地/星球背景与友情链接板块，一旦被正文"拉上来"，
   页面下半截会突然出现一整块陆地，明显不对。
   注：.vignette、.site-nav、.back-top 都是 fixed，不参与 flex 布局；页脚 margin-top 90px
   仍在盒模型内，不会额外撑出滚动条。 */
body { display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(6, 182, 212, .35); }

/* ============ 星空背景层（画布由 /assets/starfield.js 动态创建后挂到 body，见其文件头说明） ============ */
.sky-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(5, 10, 25, .45) 100%);
}

/* ============ 通用容器与玻璃拟态 ============ */
.container {
  width: 1240px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-top-color: var(--hairline);
}

/* ============ 标题与版块头 ============ */
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--cyan); font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), transparent); }
.section-title { font-size: 30px; font-weight: 800; letter-spacing: .5px; margin-top: 12px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }
.more-link { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; font-weight: 500; transition: color .25s var(--ease); }
.more-link:hover { color: var(--cyan); }
.more-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.grad-text { background: linear-gradient(96deg, #67E8F9 0%, #06B6D4 38%, #8B5CF6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============ 标签 Chip ============ */
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 12.5px; color: var(--text-2);
  background: rgba(148, 163, 184, .08); border: 1px solid rgba(148, 163, 184, .16);
  cursor: default;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

/* ============ 按钮 ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 26px; border-radius: 12px; font-size: 15.5px; font-weight: 600; cursor: pointer; border: none; white-space: nowrap; transition: all .25s var(--ease); }
.btn-primary {
  color: #06222E;
  background: linear-gradient(135deg, #67E8F9 0%, #06B6D4 45%, #2563EB 120%);
  box-shadow: 0 10px 28px -8px rgba(6, 182, 212, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(6, 182, 212, .65), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-ghost { color: var(--text); background: rgba(30, 41, 59, .5); border: 1px solid var(--hairline); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: rgba(6, 182, 212, .5); background: rgba(6, 182, 212, .08); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ============ 通用版块 ============ */
.section { padding: 38px 0; }

/* ============ 分类入口 ============ */
.cat-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }
.cat-card {
  position: relative; overflow: hidden; padding: 18px 8px 16px; border-radius: 14px; text-align: center;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-top-color: var(--hairline);
  transition: all .3s var(--ease); cursor: pointer;
}
.cat-card:hover { transform: translateY(-4px); border-color: rgba(6, 182, 212, .4); box-shadow: 0 18px 38px -20px rgba(2, 6, 23, .8), 0 0 22px -8px rgba(6, 182, 212, .3); }
.cat-card .glow-dot { position: absolute; right: -18px; top: -18px; width: 58px; height: 58px; border-radius: 50%; filter: blur(22px); opacity: .45; }
.cat-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin: 0 auto; font-size: 20px; }
.cat-ico svg { width: 22px; height: 22px; }
.cat-card h4 { margin-top: 11px; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.cat-card .cnt { margin-top: 4px; font-size: 11px; color: var(--text-3); }
.t-purple .cat-ico { background: rgba(139, 92, 246, .16); color: #A78BFA; } .t-purple .glow-dot { background: rgba(139, 92, 246, .5); }
.t-cyan .cat-ico { background: rgba(6, 182, 212, .15); color: #22D3EE; } .t-cyan .glow-dot { background: rgba(6, 182, 212, .5); }
.t-green .cat-ico { background: rgba(16, 185, 129, .15); color: #34D399; } .t-green .glow-dot { background: rgba(16, 185, 129, .5); }
.t-orange .cat-ico { background: rgba(245, 158, 11, .15); color: #FBBF24; } .t-orange .glow-dot { background: rgba(245, 158, 11, .5); }
.t-blue .cat-ico { background: rgba(59, 130, 246, .17); color: #60A5FA; } .t-blue .glow-dot { background: rgba(59, 130, 246, .5); }
.t-pink .cat-ico { background: rgba(244, 114, 182, .15); color: #F472B6; } .t-pink .glow-dot { background: rgba(244, 114, 182, .5); }

/* ============ 提示词卡片 ============ */
.p-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.p-card { border-radius: 18px; padding: 22px 27px 20px; min-height: 246px; display: flex; flex-direction: column; position: relative; cursor: pointer;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-top-color: var(--hairline); transition: all .3s var(--ease); }
.p-card:hover { transform: translateY(-4px); border-color: rgba(6, 182, 212, .42); box-shadow: 0 24px 48px -22px rgba(2, 6, 23, .85), 0 0 24px -10px rgba(6, 182, 212, .28); }
.p-card .card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.p-tags .tag-badge { position: relative; z-index: 2; }
.pc-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.p-catbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.p-catbadge i { width: 6px; height: 6px; border-radius: 50%; }
.cb-purple { color: #C4B5FD; background: rgba(139, 92, 246, .13); border: 1px solid rgba(139, 92, 246, .3); } .cb-purple i { background: #A78BFA; }
.cb-cyan { color: #A5F0FC; background: rgba(6, 182, 212, .12); border: 1px solid rgba(6, 182, 212, .3); } .cb-cyan i { background: #22D3EE; }
.cb-green { color: #A7F3D0; background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .3); } .cb-green i { background: #34D399; }
.cb-orange { color: #FDE3B0; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .3); } .cb-orange i { background: #FBBF24; }
.cb-blue { color: #BFDBFE; background: rgba(59, 130, 246, .13); border: 1px solid rgba(59, 130, 246, .32); } .cb-blue i { background: #60A5FA; }
.cb-pink { color: #FBCFE8; background: rgba(244, 114, 182, .13); border: 1px solid rgba(244, 114, 182, .32); } .cb-pink i { background: #F472B6; }
.p-status { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; letter-spacing: .5px; }
.st-hot { color: #FCA5A5; background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .3); }
.st-new { color: #67E8F9; background: rgba(6, 182, 212, .12); border: 1px solid rgba(6, 182, 212, .3); }
.p-card h4 { font-size: 16px; font-weight: 700; line-height: 1.55; margin-top: 2px; }
.p-card .p-desc { margin-top: 11px; font-size: 13px; line-height: 1.75; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 44px; }
.p-tags { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.p-tags .tag-chip { height: 24px; font-size: 11.5px; padding: 0 9px; }
.p-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(148, 163, 184, .12); display: flex; align-items: center; justify-content: space-between; }
.p-meta { display: flex; align-items: center; gap: 4.5px; font-size: 12px; color: var(--text-3); }
.p-meta svg { width: 13px; height: 13px; }
/* 三个装饰点：cb-* 徽章类会误加背景与边框，这里显式重置（2026-10-20 用户要求） */
.p-deco { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; border-radius: 0; }
.p-deco i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; opacity: .22; transition: opacity .25s var(--ease); }
.p-deco i:nth-child(1) { opacity: 1; }
.p-deco i:nth-child(2) { opacity: .9; }
.p-deco i:nth-child(3) { opacity: .8; }
.p-card:hover .p-deco i { opacity: 1; }
.p-deco-label { font-size: 11.5px; color: var(--text-3); }
/* purple：紫+青+橙 */
.p-deco.cb-purple i:nth-child(1), .p-deco.t-purple i:nth-child(1) { background: #A78BFA; }
.p-deco.cb-purple i:nth-child(2), .p-deco.t-purple i:nth-child(2) { background: #22D3EE; }
.p-deco.cb-purple i:nth-child(3), .p-deco.t-purple i:nth-child(3) { background: #FB923C; }
/* cyan：青+粉+黄绿 */
.p-deco.cb-cyan i:nth-child(1), .p-deco.t-cyan i:nth-child(1) { background: #22D3EE; }
.p-deco.cb-cyan i:nth-child(2), .p-deco.t-cyan i:nth-child(2) { background: #F472B6; }
.p-deco.cb-cyan i:nth-child(3), .p-deco.t-cyan i:nth-child(3) { background: #A3E635; }
/* green：绿+紫+橙 */
.p-deco.cb-green i:nth-child(1), .p-deco.t-green i:nth-child(1) { background: #34D399; }
.p-deco.cb-green i:nth-child(2), .p-deco.t-green i:nth-child(2) { background: #A78BFA; }
.p-deco.cb-green i:nth-child(3), .p-deco.t-green i:nth-child(3) { background: #FB923C; }
/* orange：橙+蓝+粉 */
.p-deco.cb-orange i:nth-child(1), .p-deco.t-orange i:nth-child(1) { background: #FB923C; }
.p-deco.cb-orange i:nth-child(2), .p-deco.t-orange i:nth-child(2) { background: #60A5FA; }
.p-deco.cb-orange i:nth-child(3), .p-deco.t-orange i:nth-child(3) { background: #F472B6; }
/* blue：蓝+橙+绿 */
.p-deco.cb-blue i:nth-child(1), .p-deco.t-blue i:nth-child(1) { background: #60A5FA; }
.p-deco.cb-blue i:nth-child(2), .p-deco.t-blue i:nth-child(2) { background: #FBBF24; }
.p-deco.cb-blue i:nth-child(3), .p-deco.t-blue i:nth-child(3) { background: #34D399; }
/* pink：粉+青+黄 */
.p-deco.cb-pink i:nth-child(1), .p-deco.t-pink i:nth-child(1) { background: #F472B6; }
.p-deco.cb-pink i:nth-child(2), .p-deco.t-pink i:nth-child(2) { background: #22D3EE; }
.p-deco.cb-pink i:nth-child(3), .p-deco.t-pink i:nth-child(3) { background: #FDE047; }
/* 箭头（2026-10-20 用户要求）：变小、默认无边框无底色，hover 才出现青色填充 */
.p-copy { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; cursor: pointer;
  color: var(--text-2); background: transparent; border: none; transition: all .25s var(--ease); }
.p-copy svg { width: 15px; height: 15px; }
.p-copy:hover { color: #06222E; background: linear-gradient(135deg, #67E8F9, #06B6D4); box-shadow: 0 4px 12px -5px rgba(6, 182, 212, .6); }

/* ============ 响应式 ============ */
@media (max-width: 1200px) {
  .container { width: 100%; }
  .cat-grid { grid-template-columns: repeat(5, 1fr); }
  .p-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .p-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ 淡入上移动效 ============ */
.reveal { opacity: 1; transform: translateY(0); }

/* ============ FOUC 防护 ============ */
/* 页面级 scoped CSS 由 JS 异步加载，加载前 SVG 无尺寸约束会以默认 300x150 闪现。
   此处全局先约束关键容器内 SVG 尺寸，scoped CSS 加载后以更高优先级覆盖。 */
.cat-ico svg { width: 28px; height: 28px; }
.cc-foot svg { width: 14px; height: 14px; }
.cc-hot svg { width: 11px; height: 11px; }

/* ============ 提高对比度偏好（prefers-contrast: more） ============ */
/* 系统开启"提高对比度"后：弱化文字提亮、边框/分隔线加浓，保证 WCAG AA 级可读性 */
@media (prefers-contrast: more) {
  :root {
    --text-2: #C4D2E4;
    --text-3: #AEBFD4;
    --line: #64748B;
    --hairline: rgba(255, 255, 255, 0.35);
    --glass-border: rgba(255, 255, 255, 0.30);
  }
}

/* ============ 广告位容器（待办 281） ============ */
/* 容器随内容自适应；未启用 / 未配置时容器为空 → 直接不占位（前端与 PHP 静态页共用此规则）。
   创意由站点根 ad-loader.js 按 ad-config.json 运行时注入，此文件只负责版式位置。 */
.ad-slot { margin-top: 28px; }
.ad-slot:empty { display: none; }
@media (max-width: 768px) {
  .ad-slot { margin-top: 20px; }
}

/* ============================================================================
   §2 顶部导航（迁移自 web/src/components/AppNavBar.vue 的 <style scoped>）
   去 scoped 后统一加 .site-nav 前缀，避免污染：
   · 根元素 <header class="nav-wrap site-nav">
   · 容器 .nav / 品牌 .logo / 菜单 .menu / 搜索 .search 全部限定在 .site-nav 内
   新增（292 补）：一级分类大面板（291 的 navCategories 输出）、汉堡按钮、hover 桥
   ============================================================================ */

.site-nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
}
.site-nav .nav {
  /* position: relative 使 .nav 成为绝对定位后代的参照；
     同时 .nav 的 backdrop-filter 也使其成为 abspos/fixed 后代的包含块（大面板据此与胶囊同宽） */
  position: relative;
  width: 1240px; max-width: calc(100% - 48px); height: 64px;
  display: flex; align-items: center; gap: 28px; padding: 0 18px 0 20px;
  border-radius: 18px;
  background: rgba(15, 25, 48, .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-border); border-top-color: var(--hairline);
  box-shadow: 0 18px 50px -18px rgba(2, 6, 20, .75);
}
.site-nav .logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.site-nav .logo-text { display: flex; flex-direction: column; }
.site-nav .logo-mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1E40AF 0%, #0891B2 52%, #8B5CF6 100%);
  box-shadow: 0 6px 20px -4px rgba(139, 92, 246, .45), 0 4px 12px -2px rgba(6, 182, 212, .4), inset 0 1px 0 rgba(255, 255, 255, .4);
  animation: logoGlow 3.5s ease-in-out infinite;
}
.site-nav .logo-mark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .38), transparent 55%);
}
.site-nav .logo-mark svg { width: 21px; height: 21px; position: relative; z-index: 1; }
.site-nav .logo-mark .star-sm { transform-origin: 19px 6px; animation: starTwinkle 2.4s ease-in-out infinite; }
@keyframes logoGlow {
  0%, 100% { box-shadow: 0 6px 20px -4px rgba(139, 92, 246, .45), 0 4px 12px -2px rgba(6, 182, 212, .4), inset 0 1px 0 rgba(255, 255, 255, .4); }
  50% { box-shadow: 0 8px 26px -2px rgba(139, 92, 246, .65), 0 4px 16px -2px rgba(6, 182, 212, .55), inset 0 1px 0 rgba(255, 255, 255, .5); }
}
@keyframes starTwinkle {
  0%, 100% { opacity: .4; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .logo-mark { animation: none; }
  .site-nav .logo-mark .star-sm { animation: none; opacity: .8; }
}
.site-nav .logo-name { font-size: 18.5px; font-weight: 800; letter-spacing: .3px; line-height: 1; }
.site-nav .logo-name span { background: linear-gradient(90deg, #67E8F9, #8B5CF6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.site-nav .logo-sub { font-size: 10.5px; color: var(--text-3); letter-spacing: 1.5px; margin-top: 3px; }
.site-nav .menu { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.site-nav .menu-link { padding: 8px 14px; border-radius: 9px; font-size: 14.5px; color: var(--text-2); font-weight: 500; transition: all .2s var(--ease); }
.site-nav .menu-link:hover { color: var(--text); background: rgba(148, 163, 184, .08); }
.site-nav .menu-link.active { color: #A5F0FC; background: rgba(6, 182, 212, .12); box-shadow: inset 0 0 0 1px rgba(6, 182, 212, .28); }
.site-nav .search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  height: 38px; width: 200px; padding: 0 12px; border-radius: 10px;
  background: rgba(8, 15, 32, .45); border: 1px solid rgba(148, 163, 184, .14);
  color: var(--text-3); transition: all .25s var(--ease);
}
.site-nav .search:hover, .site-nav .search:focus-within { border-color: rgba(6, 182, 212, .5); box-shadow: 0 0 0 3px rgba(6, 182, 212, .12); }
.site-nav .search svg { width: 16px; height: 16px; flex-shrink: 0; }
.site-nav .search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-size: 13.5px; font-family: inherit; }
.site-nav .search input::placeholder { color: var(--text-3); }

/* --- 292 新增：一级分类（291 的 navCategories）收为「全部分类」大面板 ---
   20 个一级分类若平铺为 .menu-link 会撑爆 64px 胶囊（实测 4 基础项 + 20 分类 ≈ 2100px > 1240px），
   故包成一个 .menu-item-cats 下拉；一级与子分类链接全部保留在源码中（DOM 完整，利于抓取）。 */
.site-nav .menu-item { display: inline-flex; }
/* 触发链接自身需 position:relative，使 hover 桥（::after）锚定到链接；
   而 .menu-item-cats 保持 static，让 .sub-menu 的包含块落到 .nav（position:relative）上 → 面板与胶囊同宽 */
.site-nav .menu-item-cats > .menu-link { position: relative; display: inline-flex; align-items: center; gap: 5px; }
.site-nav .menu-item-cats > .menu-link::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .6; margin-top: 2px; }
/* hover 桥：触发链接底边（视口 ~65px）到面板顶边（胶囊底边 ~80px）之间有 ~15px 死区，无桥会导致鼠标下移时 hover 丢失、面板关闭。
   桥是触发链接的 ::after（锚定到链接，横向只外扩 20px，不遮挡其他菜单项/搜索框），纵向 26px 覆盖死区并与面板顶边重叠。 */
.site-nav .menu-item-cats > .menu-link::after { content: ""; position: absolute; top: 100%; left: -20px; right: -20px; height: 26px; }
.site-nav .sub-menu {
  /* 与胶囊同宽：.menu-item-cats 为 static，故包含块是 .nav（position:relative 优先于 backdrop-filter），
     left/right/top 均相对胶囊内框；top:100% = 胶囊底边，面板紧随导航条正下方 */
  position: absolute; top: 100%; left: 0; right: 0;
  display: none; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 18px;
  max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 24px 24px; border-radius: 0 0 18px 18px;
  background: rgba(11, 18, 38, .97);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--glass-border); border-top: none;
  box-shadow: 0 30px 60px -24px rgba(2, 6, 23, .92);
  z-index: 6;
}
.site-nav .menu-item-cats:hover .sub-menu,
.site-nav .menu-item-cats:focus-within .sub-menu { display: grid; }
.site-nav .sub-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-bottom: 8px; }
.site-nav .sub-menu-link { display: block; padding: 6px 10px; border-radius: 9px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .2s var(--ease); }
.site-nav .sub-menu-link:hover { color: #A5F0FC; background: rgba(6, 182, 212, .12); }
/* 一级分类（每栏的栏头）：只做"轻提示"，不加边框不加底色——
   靠字号（14px）＋加粗＋更亮的近白偏青文字＋极淡的青色光晕和子分类拉开层次，hover 仅文字转青。
   栏头下方再加一条左浓右淡的分割线（伪元素，不占高度、不影响 hover 背景），把"标题"和下面的子分类切开。 */
.site-nav .sub-menu-link-top {
  position: relative;
  font-size: 14px; font-weight: 700; letter-spacing: .2px;
  color: #EAF7FF;
  padding: 6px 10px 7px;
  margin-bottom: 7px;
  text-shadow: 0 0 14px rgba(34, 211, 238, .30);
}
.site-nav .sub-menu-link-top::after {
  content: ""; position: absolute; left: 10px; right: 8px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(34, 211, 238, .45) 0%, rgba(148, 163, 184, .20) 42%, rgba(148, 163, 184, 0) 100%);
}
.site-nav .sub-menu-link-top:hover { color: #67E8F9; background: transparent; text-shadow: 0 0 16px rgba(34, 211, 238, .55); }
.site-nav .sm-ico { display: inline-block; width: 16px; margin-right: 5px; text-align: center; font-size: 12.5px; line-height: 1; }
.site-nav .sub-menu-link-top .sm-ico { width: 17px; font-size: 14px; }

/* --- 下拉面板 / 移动抽屉的滚动条美化（292 补）---
   分类大面板 max-height: min(72vh, 560px) + overflow-y: auto，分类较多时右侧会冒出原生滚动条；
   移动端抽屉（body.nav-open .menu）同理。原生样式与圆角玻璃面板观感不搭，
   故统一压到 8px、透明轨道 + 半透明圆角拇指，悬停转青色。
   Firefox 认 scrollbar-width / scrollbar-color，Chrome / Edge / Safari 走 ::-webkit-scrollbar。 */
.site-nav .sub-menu,
body.nav-open .site-nav .menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .28) transparent;
}
.site-nav .sub-menu::-webkit-scrollbar,
body.nav-open .site-nav .menu::-webkit-scrollbar { width: 8px; height: 8px; }
/* 轨道上下留 10px：拇指不顶到面板底部圆角（0 0 18px 18px） */
.site-nav .sub-menu::-webkit-scrollbar-track,
body.nav-open .site-nav .menu::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
/* border + background-clip 让拇指在 8px 轨道内实显 4px 宽 */
.site-nav .sub-menu::-webkit-scrollbar-thumb,
body.nav-open .site-nav .menu::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .42);
  border: 2px solid transparent; background-clip: content-box; border-radius: 999px;
}
.site-nav .sub-menu::-webkit-scrollbar-thumb:hover,
body.nav-open .site-nav .menu::-webkit-scrollbar-thumb:hover { background: rgba(6, 182, 212, .55); background-clip: content-box; }

/* ============================================================================
   §3 页脚（迁移自 web/src/components/AppFooter.vue 的 <style>，其原本已是非 scoped 全局样式）
   统一加 .site-footer 前缀（根元素 <footer class="footer-planet site-footer">）；
   .back-top 独立于 <footer> 之外（fixed 定位），类名项目专属、保持不加前缀。
   注：footer HTML 同时被 BuildRenderService 渲染的静态页复用，故此处与那套保持同一份样式来源。
   ============================================================================ */

.site-footer { position: relative; margin-top: 90px; padding: 52px 0 0; overflow: hidden; z-index: 1; }
.site-footer .foot-inner { position: relative; z-index: 10; padding-bottom: 32px; }

.site-footer .friend-links { padding: 30px 0 26px; border-bottom: 1px solid rgba(148, 163, 184, .12); }
.site-footer .fl-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 2px; color: rgba(203, 213, 225, .55); text-transform: uppercase; margin-bottom: 20px; }
.site-footer .fl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.site-footer .fl-list { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.site-footer .fl-item { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 12px;
  background: rgba(10, 18, 38, .38); border: 1px solid rgba(148, 163, 184, .14); color: var(--text-2);
  font-size: 13px; font-weight: 500; text-decoration: none; transition: all .22s var(--ease); }
.site-footer .fl-item:hover { transform: translateY(-2px); border-color: rgba(6, 182, 212, .35); color: #fff; background: rgba(10, 18, 38, .55); }
.site-footer .fl-logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; transition: transform .25s var(--ease); }
.site-footer .fl-logo svg { width: 16px; height: 16px; }
.site-footer .fl-logo img { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.site-footer .fl-letter { font-size: 13px; font-weight: 700; line-height: 1; }
.site-footer .fl-item:hover .fl-logo { transform: scale(1.08) rotate(-4deg); }
.site-footer .fl-cyan { background: rgba(6, 182, 212, .14); color: #67E8F9; border: 1px solid rgba(6, 182, 212, .28); }
.site-footer .fl-green { background: rgba(34, 197, 94, .14); color: #4ADE80; border: 1px solid rgba(34, 197, 94, .28); }
.site-footer .fl-slate { background: rgba(148, 163, 184, .16); color: #CBD5E1; border: 1px solid rgba(148, 163, 184, .28); }
.site-footer .fl-blue { background: rgba(59, 130, 246, .14); color: #60A5FA; border: 1px solid rgba(59, 130, 246, .28); }
.site-footer .fl-purple { background: rgba(139, 92, 246, .14); color: #A78BFA; border: 1px solid rgba(139, 92, 246, .28); }

.site-footer .legal-strip { margin-top: 24px; padding: 14px 22px 14px 14px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  background: rgba(10, 18, 38, .45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, .12); }
.site-footer .legal-left { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.site-footer .legal-brand { font-weight: 800; letter-spacing: .3px; color: var(--text); }
.site-footer .legal-brand span { background: linear-gradient(90deg, #67E8F9, #8B5CF6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.site-footer .legal-right { display: flex; align-items: center; gap: 0; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.site-footer .legal-right a { color: var(--text-3); text-decoration: none; padding: 0 8px; transition: color .2s; }
.site-footer .legal-right a:first-child { padding-left: 0; }
.site-footer .legal-right a:hover { color: #67E8F9; }
.site-footer .legal-right .sep { color: rgba(148, 163, 184, .35); }

/* 页脚 3D 地形（迁移自前端 Footer3D.vue；实体由 /assets/footer3d.js 用 Three.js 渲染）
   容器层级与旧实现一致：#footer-3d 铺满页脚，.planet-surface 贴底 380px 并按斜切多边形裁剪；
   未注入 canvas 时为空透明块，不产生可见占位。 */
#footer-3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#footer-3d:empty { display: none; }
.planet-surface { position: absolute; left: 0; right: 0; bottom: 0; height: 380px; z-index: 0; overflow: hidden; pointer-events: none;
  clip-path: polygon(0 160px, 100% 20px, 100% 100%, 0 100%); }
@media (max-width: 1200px) { .planet-surface { height: 340px; clip-path: polygon(0 140px, 100% 20px, 100% 100%, 0 100%); } }
@media (max-width: 900px) { .planet-surface { height: 280px; clip-path: polygon(0 120px, 100% 20px, 100% 100%, 0 100%); } }
@media (max-width: 560px) { .planet-surface { height: 220px; clip-path: polygon(0 90px, 100% 15px, 100% 100%, 0 100%); } }

/* ============================================================================
   §4 公共补充（#main 顶距 / 回到顶部 / 移动端抽屉 / 汉堡 / 轻提示 / 收口）
   ============================================================================ */

/* 固定顶部导航（top:16px + 64px）需为主内容留出统一顶距；页面可自行覆盖 #main 的 padding-top */
#main { padding-top: 96px; }

.back-top { position: fixed; right: 30px; bottom: 30px; z-index: 90; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(15, 25, 48, .75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--hairline); color: var(--text-2); cursor: pointer;
  box-shadow: 0 16px 36px -14px rgba(2, 6, 23, .9); transition: all .25s var(--ease); }
.back-top:hover { color: #06222E; background: linear-gradient(135deg, #67E8F9, #06B6D4); border-color: transparent; }
.back-top svg { width: 18px; height: 18px; }
/* 未滚动时隐藏（site.js 切 body 上的 .is-scrolled） */
.back-top { opacity: 0; visibility: hidden; }
body.is-scrolled .back-top { opacity: 1; visibility: visible; }

/* 汉堡按钮（桌面隐藏） */
.site-nav .nav-burger { display: none; width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
  background: rgba(8, 15, 32, .45); border: 1px solid rgba(148, 163, 184, .18); color: var(--text-2);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: all .22s var(--ease); }
.site-nav .nav-burger span { display: block; width: 17px; height: 1.8px; border-radius: 2px; background: currentColor; transition: all .22s var(--ease); }
body.nav-open .site-nav .nav-burger { color: #A5F0FC; border-color: rgba(6, 182, 212, .45); }
body.nav-open .site-nav .nav-burger span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
body.nav-open .site-nav .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .site-nav .nav-burger span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* 抽屉遮罩：用 body::before（在 .site-nav 的 z-index 100 之下，只遮页面内容不遮导航） */
body::before { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: rgba(2, 6, 23, .62); opacity: 0; transition: opacity .25s var(--ease); }
body.nav-open::before { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }

/* 轻提示 toast（site.js 的 toast() 使用） */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px); z-index: 200;
  padding: 11px 20px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #E2F4FE;
  background: rgba(11, 18, 38, .96); border: 1px solid rgba(6, 182, 212, .38);
  box-shadow: 0 18px 40px -18px rgba(2, 6, 23, .95); opacity: 0; transition: all .25s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 移动端（≤900px）---------- */
@media (max-width: 900px) {
  .site-nav { top: 10px; }
  /* 去掉 backdrop-filter：① 移动端玻璃质感改用实色底；② 同时解除 fixed 后代的包含块约束，
     使 menu 抽屉能相对视口定位（若保留 backdrop-filter，抽屉会被约束在 64px 胶囊内） */
  .site-nav .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 21, 42, .96); height: 58px; gap: 12px; padding: 0 12px; }
  .site-nav .menu { display: none; }
  .site-nav .nav-burger { display: inline-flex; }
  /* 搜索框在窄屏改为弹性宽度：logo + 搜索 + 汉堡 三者在 375px 下不溢出（汉堡不再吃 auto 外边距） */
  .site-nav .search { flex: 1 1 auto; width: auto; min-width: 0; height: 36px; }

  /* 抽屉：复用同一份 .menu（含 291 输出的一级 + 子分类），不复制 DOM */
  body.nav-open .site-nav .menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 88vw);
    margin-left: 0; padding: 76px 16px 28px; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(9, 16, 33, .98); border-left: 1px solid var(--glass-border);
    box-shadow: -24px 0 60px -30px rgba(2, 6, 23, .95); z-index: 130;
  }
  body.nav-open .site-nav .menu-link { display: block; font-size: 15px; padding: 10px 12px; }
  body.nav-open .site-nav .menu-item { display: block; }
  body.nav-open .site-nav .menu-item-cats > .menu-link::after { display: none; }
  /* 抽屉内不需要卡片折叠箭头 */
  body.nav-open .site-nav .menu-item-cats > .menu-link::before { display: none; }
  body.nav-open .site-nav .sub-menu {
    display: grid; position: static; grid-template-columns: 1fr; gap: 0;
    max-height: none; overflow: visible; padding: 2px 0 8px 8px; border: none; border-radius: 0; box-shadow: none; background: transparent;
  }
  body.nav-open .site-nav .sub-menu-link { white-space: normal; }
  body.nav-open .site-nav .sub-menu-link-top { margin-top: 8px; }

  .container { max-width: calc(100% - 32px); }
  #main { padding-top: 84px; }

  .back-top { right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 12px; }

  .site-footer { margin-top: 64px; padding-top: 40px; }
  .site-footer .foot-inner { padding: 0 0 28px; }
  .site-footer .fl-list { gap: 8px 12px; }
  .site-footer .fl-item { padding: 7px 12px 7px 7px; font-size: 12px; }
  .site-footer .fl-logo { width: 26px; height: 26px; }
  .site-footer .fl-logo svg, .site-footer .fl-logo img { width: 14px; height: 14px; }
  .site-footer .fl-letter { font-size: 12px; }
  .site-footer .legal-strip { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; }
}

/* ---------- 极窄屏（≤560px）---------- */
@media (max-width: 560px) {
  :root { --radius: 14px; }
  .container { max-width: calc(100% - 24px); }
  .site-nav .nav { max-width: calc(100% - 20px); }
  .site-nav .search { height: 34px; }
  .site-nav .logo-sub { display: none; }

  .btn { height: 44px; padding: 0 20px; font-size: 14.5px; }
  .section-title { font-size: 24px; }
  .section { padding: 26px 0; }

  .grid, .p-grid, .cat-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }

  .site-footer { margin-top: 48px; padding-top: 32px; }
  .site-footer .fl-list { gap: 6px 8px; }
  .site-footer .fl-item { padding: 6px 10px 6px 6px; font-size: 11.5px; }
  .site-footer .fl-logo { width: 24px; height: 24px; border-radius: 6px; }
  .site-footer .fl-logo svg, .site-footer .fl-logo img { width: 13px; height: 13px; }
  .site-footer .fl-letter { font-size: 11px; }
  .site-footer .legal-right { font-size: 11px; }
  .site-footer .legal-right a { padding: 0 5px; }

  .toast { left: 12px; right: 12px; bottom: 76px; transform: translate(0, 12px); }
  .toast.show { transform: translate(0, 0); }
}

/* ============ 横向收口（含超长单词/URL 的正文防溢出） ============ */
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }

/* ============================================================================
   §5 内容页（待办 293 直出 / 294 增强）
   迁移自 web/src/pages/PromptDetailPage.vue 的 <style scoped>。
   顶距说明：§4 已给 #main 统一 96px 顶距，故 .detail-body 不再叠加顶部内边距。
   ============================================================================ */

/* ---------- 双列布局 ---------- */
/* 详情页正文底部留白：收窄到 32px（用户要求「页面离下面的友情链接近一些」），
   配合本页对 .site-footer 的 margin-top 覆盖（见 prompt.html 的 head 块），
   正文卡到页脚视觉顶边的间距由 150px 收到 80px。 */
.detail-body { padding: 0 0 32px; }
/* 两列布局：左列 1fr（正文），右列固定 340px（右侧栏），列间距 36px。
   桌面双列（>1200px）下本页是「整页滚动 + 导航条吸顶 + 右栏 sticky」：正文卡在普通流里按内容
   自然撑高（不再被固定高度的框裁切），导航条吸顶、标题随之滚走，右栏 sticky 钉在视口里。
   相关声明只对本页生效，见 admin/app/view/web/prompt.html 的 head 块。 */
.detail-layout { display: grid; grid-template-columns: 1fr 340px; column-gap: 36px; row-gap: 0; align-items: flex-start; }

/* ---------- 详情页顶部：导航栏 → 标题 → 内容卡 → 右侧栏 ----------
   导航栏（.detail-navbar）与文章头（.detail-head）都是 .detail-body 的直接子元素（见 prompt.html 的 content 块）：
   桌面双列下只有导航条 position:sticky 吸顶，标题随页面滚走；≤1200px 时两者都随页面滚动
   （导航在本页一直是内联形态，不是固定胶囊）。
   左内边距 20px = 导航胶囊（.site-nav .nav）的水平内边距，使标题左边缘与导航内的 logo 对齐。
   右内边距 376px = 右栏宽 340px + 列间距 36px：标题虽通栏，但文案收在正文列内，
   使标题与描述的右边缘与下方正文卡（.detail-card）的右边缘对齐。
   （桌面双列下 .detail-head 另由 prompt.html 覆盖为与容器同宽并水平居中。） */
.detail-head { position: relative; grid-column: 1 / -1; min-width: 0; padding: 24px 376px 22px 20px; }
.detail-head h1 { font-size: 30px; font-weight: 800; line-height: 1.35; letter-spacing: .3px; }
.detail-head .dh-sub { margin-top: 12px; font-size: 14.5px; line-height: 1.8; color: var(--text-2); }

/* 内联导航：桌面双列下 position:sticky 吸顶（胶囊自身留在文档流里），
   ≤1200px 下作为内容区第一行随页面滚动；两种形态都去掉了固定定位并撑满内容宽度。
   min-width: 0 必需：导航内容的最小内容宽度大于移动端内容列宽，否则 grid 的 1fr 会被撑大导致横向溢出 */
.detail-navbar { grid-column: 1 / -1; min-width: 0; margin-bottom: 48px; }
.detail-navbar .site-nav { position: static; display: block; }
.detail-navbar .site-nav .nav { width: 100%; max-width: 100%; }

/* 分类下拉面板的层叠：本页导航是流内元素（.site-nav 被改为 static）。
   桌面双列下 .detail-navbar 自身 sticky 且 z-index:40（见 prompt.html），压在正文卡与右栏（z-index 30）之上，
   故下拉面板不会被内容卡或右栏盖住；≤1200px 时导航行在正文之前，
   靠 .detail-navbar 抬到 z-index:20（>900px）压过后续卡片。
   注意 ≤900px 不加：此时导航舱体已去掉 backdrop-filter，若给本行建层叠上下文，
   会把抽屉（.menu z-index:130）困在其中，反被遮罩（body::before z-index:90）盖住。 */
@media (min-width: 901px) {
  .detail-navbar { position: relative; z-index: 20; }
}

/* ---------- 面包屑 ----------
   详情页放在 .detail-main 内（占正文列宽，非 grid 子项，故无跨列规则）；
   分类页 / 搜索页放在 .container 内，同样按普通流排版。 */
.crumb { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-3); margin-bottom: 22px; flex-wrap: wrap; }
.crumb a { color: var(--text-2); transition: color .2s var(--ease); }
.crumb a:hover { color: var(--cyan); }
.crumb .sep { color: var(--text-3); }
.crumb .cur { color: #E2F4FE; font-weight: 600; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 主内容卡 ---------- */
/* 正文列是普通 grid 子项：卡片按内容自然撑高，页面整体滚动看全文（不再有高度限制或内部滚动）。
   曾为 sticky 方案加过的「跑道」留白、以及 app-shell 方案的内部滚动声明均已废弃。 */
.detail-main { min-width: 0; }
/* 卡片上内边距收到 24px（用户要求：面包屑这一行的上间距小一些），
   左右与底部保持 38 / 36px，正文卡的呼吸感不变 */
.detail-card { border-radius: 20px; padding: 24px 38px 36px;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-top-color: var(--hairline);
  box-shadow: 0 24px 60px -28px rgba(2, 6, 23, .85); }
.dc-meta-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
/* 详情页卡片首行：面包屑在左、更新于在右（.dc-date 自带 margin-left:auto 推向右侧）；
   面包屑复用全站 .crumb 样式，此处抵消其下外边距并允许收缩，避免撑破首行 */
.dc-meta-top .crumb { margin-bottom: 0; min-width: 0; }
.dc-meta-top .dc-date { font-size: 12.5px; color: var(--text-3); margin-left: auto; }
/* 返回入口：正文末尾的弱化文字链，右对齐 */
.dc-foot { margin-top: 26px; display: flex; justify-content: flex-end; }
.dc-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); transition: color .2s var(--ease); }
.dc-back:hover { color: var(--cyan); }
.dc-back svg { width: 14px; height: 14px; }

/* ---------- 适用场景（content.applicable_scene 换行分隔） ---------- */
.dc-scene { margin: 36px 0 0; }
/* 标题 15px / 列表 13px（用户要求：标题加大、下方内容减小），强化标题层级对比 */
.dc-scene-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: #06B6D4; letter-spacing: .5px; margin-bottom: 8px; }
.dc-scene-title::before { content: ""; width: 3px; height: 15px; background: #06B6D4; border-radius: 2px; }
.dc-scene-list { margin: 0; padding-left: 18px; color: #cbd5e1; font-size: 13px; line-height: 1.9; }
.dc-scene-list li { margin: 0; }

/* ---------- 提示词代码块 ---------- */
.prompt-block { margin-top: 28px; border-radius: 14px; overflow: hidden;
  background: rgba(7, 13, 28, .78); border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.pb-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px;
  background: rgba(148, 163, 184, .06); border-bottom: 1px solid rgba(148, 163, 184, .12); }
.pb-head .pb-l { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--text-2); }
.pb-head .pb-dots { display: flex; align-items: center; gap: 6px; }
.pb-head .pb-dots i { width: 9px; height: 9px; border-radius: 50%; }
.pb-head .pb-dots .r { background: #FF5F57; } .pb-head .pb-dots .y { background: #FEBC2E; } .pb-head .pb-dots .g { background: #28C840; }
.pb-copy-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: #06222E; border: none; font-family: inherit;
  background: linear-gradient(135deg, #67E8F9, #06B6D4);
  box-shadow: 0 6px 14px -6px rgba(6, 182, 212, .6); transition: all .25s var(--ease); }
.pb-copy-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 18px -6px rgba(6, 182, 212, .7); }
.pb-body { padding: 20px 22px; margin: 0; font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
  font-size: 14.5px; line-height: 1.95; color: #C4D0E2; white-space: pre-wrap; word-break: break-word; }

/* ---------- 标签区 ---------- */
.dc-tags { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(148, 163, 184, .14); }
.dc-tags-title { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.dc-tags-list { display: flex; flex-wrap: wrap; gap: 9px; }
.dc-tags-list .tag-chip { height: 30px; font-size: 13px; padding: 0 13px; }

/* ---------- 右侧栏（待办 294：相关推荐 + 热门，均服务端直出） ----------
   迁移自 components/sidebar/RelatedSidebar.vue、HotSidebar.vue 的 <style scoped>。
   桌面双列（>1200px）下本页是「整页滚动 + 导航条吸顶 + 右栏 sticky」：
   右栏用 position:sticky（top:92px，避让吸顶导航）先随正文一起上移、再钉住不动，
   声明见 admin/app/view/web/prompt.html 的 head 块；
   此处只保留单列（≤1200px，右栏回到正文下方）时的普通流形态。 */
.dc-side { min-width: 0; }
/* 视口高度分档收紧留白：本页右栏 sticky 能钉住多久，取决于「吸附行程 = 网格行底 − 吸附点 − 右栏高」
   是否够覆盖整段滚动（本页实测：行程耗尽点 = 1222 − 右栏高，文档最大滚动量 = 1612 − H）。
   右栏越高行程越短，滚到后段就会被正文顶上去、钻进吸顶导航下面，故逐档收紧卡片与条目的留白，
   把右栏压在「不被裁切」且「不被顶走」的安全高度内：
     · 不被裁切：右栏高 ≤ H − 116（上方吸附点 92 + 下方留白 24）
     · 不被顶走：右栏高 ≤ H − 390（由上一行不等式解出）
   实测各档高度：自然 768 → 一档 592 → 二档 480 → 三档 412；
   置档阈值 = 该档内容高 + 390：1158 / 982 / 870px。
   更低视口由右栏内部滚动兜底（滚动条已隐藏），末尾允许几十像素的自然上移。
   只在桌面双列（>1200px）生效：单列时右栏是普通流元素，随页面整体滚动，不需要压缩留白。 */
@media (min-width: 1201px) and (max-height: 1158px) {
  .dc-side .side-card { padding: 15px; }
  .dc-side .rel-item { padding: 6px 0; }
  .dc-side .sc-title { margin-bottom: 12px; }
}
@media (min-width: 1201px) and (max-height: 982px) {
  .dc-side .side-card { padding: 10px; }
  .dc-side .rel-item { padding: 3px 0; }
  .dc-side .sc-title { margin-bottom: 8px; }
}
@media (min-width: 1201px) and (max-height: 870px) {
  .dc-side .side-card { padding: 8px; }
  .dc-side .rel-item { padding: 1px 0; }
  .dc-side .sc-title { margin-bottom: 6px; }
}
.side-card { border-radius: 16px; padding: 22px;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-top-color: var(--hairline); }
.side-card + .side-card { margin-top: 16px; }
.sc-title { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-2); text-transform: uppercase;
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
/* 板块标题图标：放大一档（热门提示词 / 相关推荐共用） */
.sc-title svg { width: 19px; height: 19px; color: var(--cyan); }
.rel-list { display: flex; flex-direction: column; }
.rel-item { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(148, 163, 184, .1); }
.rel-item:last-child { border-bottom: none; }
.rel-item:hover .rel-t { color: var(--cyan); }
/* 条目左侧语义图标：去掉底色方块与边框，直接用图标本色 */
.rel-ico { width: 15px; height: 15px; display: grid; place-items: center; flex-shrink: 0; color: var(--cyan); }
.rel-ico svg { width: 15px; height: 15px; }
/* 热门提示词：仅前三名做火热度标记（1 红 / 2 橙 / 3 黄），第 4 条起统一灰色 */
.dc-hot .rel-item:nth-child(1) .rel-ico { color: #FF3B30; }
.dc-hot .rel-item:nth-child(2) .rel-ico { color: #F97316; }
.dc-hot .rel-item:nth-child(3) .rel-ico { color: #FACC15; }
.dc-hot .rel-item:nth-child(n+4) .rel-ico { color: var(--text-3); }
/* 相关推荐：条目图标比热门更小、统一灰色，弱化视觉权重 */
.dc-related .rel-ico { width: 12px; height: 12px; color: var(--text-3); }
.dc-related .rel-ico svg { width: 12px; height: 12px; }
.rel-t { font-size: 13.5px; color: var(--text); line-height: 1.45; flex: 1; transition: color .2s var(--ease);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 右侧栏底部广告容器：与上方卡片保持 16px 间距（覆盖 §4 的 28px） */
.dc-side .ad-slot { margin-top: 16px; }

/* ---------- 内容页响应式 ---------- */
@media (max-width: 1200px) {
  /* 单列：右侧栏回到正文下方。本宽度下不启用桌面双列版式（顶部块不吸附、右栏是普通流元素），
     视口固定与限高声明只写在 prompt.html 的桌面双列块里，这里无需复位 */
  .detail-layout { grid-template-columns: 1fr; }
  /* 标题区恢复通栏（不再为右栏占位收窄内容盒） */
  .detail-head { padding-right: 0; }
}
@media (max-width: 900px) {
  /* 与导航胶囊同步收窄：≤900px 时 .site-nav .nav 的水平内边距由 20px 变 12px，
     标题左内边距跟随，保持「标题与导航内 logo 对齐」 */
  .detail-head { padding-left: 12px; }
}
@media (max-width: 768px) {
  .detail-body { padding-bottom: 40px; }
  .detail-card { padding: 24px 20px; }
  .detail-head { padding: 22px 0 16px 12px; }
  .detail-head h1 { font-size: 24px; }
}

/* ============================================================================
   §6 列表页（待办 295 筛选与卡片 / 296 排序与分页）
   迁移自 web/src/pages/ListPage.vue 的 <style scoped>，去 scoped 后类名保持原样。
   顶距说明：§4 已给 #main 统一 96px 顶距，故 .list-hero 不再叠加 128px 顶内边距，
   改为较小的上内边距，避免首屏空白过大。
   ============================================================================ */

/* ---------- Hero ---------- */
/* 顶距/左距（2026-10-20 用户要求）：hero 与固定导航的间距加大（28→56），内容整体左缩进 32px 与下方卡片错开 */
.list-hero { padding: 56px 0 32px; position: relative; }
.list-hero .container { padding-left: 32px; }
.list-hero .eyebrow { margin-bottom: 14px; }
.list-hero h1 { font-size: 42px; font-weight: 800; letter-spacing: .5px; line-height: 1.2; }
.list-hero .lead { margin-top: 16px; font-size: 15.5px; line-height: 1.85; color: var(--text-2); max-width: 620px; }
.list-hero .lh-stats { display: flex; align-items: center; gap: 26px; margin-top: 24px; }
.list-hero .lh-stats .ls { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.list-hero .lh-stats .ls b { font-size: 18px; font-weight: 800; color: #E2F4FE; font-family: Consolas, monospace; }
.list-hero .lh-stats .div { width: 1px; height: 18px; background: rgba(148,163,184,.25); }

/* ---------- 主体布局（左栏筛选 + 右栏列表） ---------- */
.list-body { padding: 18px 0 60px; }
.list-layout { display: grid; grid-template-columns: 248px 1fr; gap: 32px; align-items: flex-start; }

/* ---------- 左侧筛选栏 ---------- */
/* 侧栏不吸顶（2026-10-20）：一级分类全量展示后侧栏高于视口，sticky 会把场景细分卡死在视口外 */
.filter-side { position: static; min-width: 0; }
.filter-card { border-radius: 16px; padding: 20px 18px;
  background: rgba(15, 25, 48, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-top-color: var(--hairline); }
.filter-card + .filter-card { margin-top: 16px; }
.fc-title { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-2); display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; text-transform: uppercase; }
.fc-title .fc-clear { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cyan); padding: 3px 8px; border-radius: 7px; border: 1px solid rgba(6,182,212,.35); background: rgba(6,182,212,.08); transition: all .2s var(--ease); }
.fc-title .fc-clear:hover { background: rgba(6,182,212,.18); color: #A5F0FC; }
.fc-list { display: flex; flex-direction: column; gap: 2px; }
.fc-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; color: var(--text-2); transition: all .2s var(--ease); }
.fc-item:hover { color: var(--text); background: rgba(148,163,184,.08); }
.fc-item.active { color: #A5F0FC; background: rgba(6,182,212,.12); box-shadow: inset 0 0 0 1px rgba(6,182,212,.28); font-weight: 600; }
.fc-item .ic { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fc-item .fc-ico { flex-shrink: 0; width: 17px; text-align: center; font-size: 14px; line-height: 1; }
.fc-item .cnt { font-size: 11.5px; color: var(--text-3); font-family: Consolas, monospace; flex-shrink: 0; }
.fc-item.active .cnt { color: #67E8F9; }
/* 场景细分区块（2026-10-20）：默认页免选一级分类即列出全部二级分类（单个平铺列表，不分组）。
   一级分类卡不限高（20 个默认全显示、无滚动条）；场景细分卡条目多，卡片内滚动，避免把页面撑长 */
.fc-scroll { max-height: calc(100vh - 560px); min-height: 200px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.fc-scroll::-webkit-scrollbar { width: 6px; }
.fc-scroll::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(148, 163, 184, .28); }
.fc-scroll::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .45); }
.fc-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.fc-tags .tag-chip { height: 24px; font-size: 11.5px; padding: 0 9px; }
.fc-tags .tag-chip.active { color: #A5F0FC; border-color: rgba(6,182,212,.55); background: rgba(6,182,212,.14); }

/* ---------- 右侧工具栏 / 空态 ---------- */
.list-main { min-width: 0; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; padding: 14px 18px; border-radius: 14px;
  background: rgba(15,25,48,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border); border-top-color: var(--hairline); }
.lt-left { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--text-2); }
.lt-left b { color: #E2F4FE; font-family: Consolas, monospace; font-size: 15px; }
.empty-state { padding: 80px 0; text-align: center; }
.empty-state h3 { font-size: 20px; margin-bottom: 10px; color: var(--text); }
.empty-state p { color: var(--text-2); margin-bottom: 24px; }

/* ---------- 排序条（296） ---------- */
.sort-group { display: flex; background: rgba(8,15,32,.55); border: 1px solid rgba(148,163,184,.18); border-radius: 11px; padding: 4px; }
.sort-group .sort-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 13px; font-weight: 500; padding: 6px 15px; border-radius: 8px; transition: all .2s var(--ease); }
.sort-group .sort-btn.on { color: #06222E; font-weight: 700; background: linear-gradient(135deg, #67E8F9, #06B6D4); }
.sort-group .sort-btn:hover:not(.on) { color: var(--text); }

/* ---------- 分页条（296，复用列表页分页范式） ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 36px; flex-wrap: wrap; }
.pager-btn { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap;
  background: rgba(15,25,48,.55); border: 1px solid rgba(148,163,184,.18); transition: all .25s var(--ease); }
.pager-btn:hover:not(.disabled):not(.on) { color: var(--text); border-color: rgba(6,182,212,.45); background: rgba(6,182,212,.08); }
.pager-btn.on { color: #06222E; background: linear-gradient(135deg, #67E8F9, #06B6D4); border-color: transparent; box-shadow: 0 8px 18px -8px rgba(6,182,212,.6); }
.pager-btn.disabled { opacity: .4; cursor: not-allowed; }
.pager > .pager-btn:first-child, .pager > .pager-btn:last-child { min-width: 80px; }
.pager-gap { color: var(--text-3); font-size: 14px; padding: 0 4px; }

/* ---------- 列表页响应式 ---------- */
@media (max-width: 1200px) {
  .list-layout { grid-template-columns: 220px 1fr; gap: 24px; }
}
@media (max-width: 1024px) {
  .list-layout { grid-template-columns: 200px 1fr; gap: 24px; }
}
@media (max-width: 768px) {
  .list-hero { padding: 20px 0 16px; }
  .list-hero .container { padding-left: 0; }
  .list-hero h1 { font-size: 30px; }
  .list-layout { grid-template-columns: 1fr; gap: 20px; }
  .filter-side { position: static; order: -1; }
  /* 移动端侧栏不再吸顶，场景细分列表取消限高，跟随页面整体滚动 */
  .fc-scroll { max-height: none; overflow: visible; padding-right: 0; }
}

/* ============================================================================
   §7 首页（待办 297：Hero + 地球动效 + 分类入口 + 热门提示词 + 标签云）
   迁移自 web/src/pages/IndexPage.vue 的 <style scoped>；
   地球容器样式来自 GlobeHero.vue（scoped 去 :deep 后落到 .globe-wrap）。
   全局可复用部分不重复搬运：.section / .section-head / .eyebrow / .section-title /
   .more-link / .cat-grid / .cat-card / .t-* / .p-grid / .p-card / .tag-chip / .btn /
   .grad-text / .pc-card-top / .p-catbadge / .cb-* 均已在 §1 定义。
   ============================================================================ */

.index-page { padding-bottom: 40px; }

/* ---------- Hero ---------- */
.hero { padding: 30px 0 84px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.hero-left .badge {
  display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: #C7ECF7;
  background: rgba(6, 182, 212, .08); border: 1px solid rgba(6, 182, 212, .28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-left .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(6, 182, 212, .6); animation: heroPulse 2.2s infinite; }
@keyframes heroPulse {
  0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, .55); }
  70% { box-shadow: 0 0 0 8px rgba(6, 182, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
}
.hero-left h1 { margin-top: 24px; font-size: 53px; font-weight: 800; letter-spacing: .5px; line-height: 1.2; }
.hero-left .lead { margin-top: 22px; font-size: 17px; line-height: 1.85; color: var(--text-2); max-width: 540px; }
.hero-actions { display: flex; gap: 14px; margin-top: 36px; }

/* ---------- Hero 右侧地球容器（canvas 由 visual.js 绘制） ---------- */
.hero-visual { position: relative; height: 520px; }
.hero-glow {
  position: absolute; width: 380px; height: 380px; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(6, 182, 212, .22), rgba(139, 92, 246, .14) 45%, transparent 68%);
  filter: blur(26px);
}
.globe-wrap {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 340px; height: 340px; display: grid; place-items: center;
  touch-action: none; cursor: grab;
}
.globe-wrap:active { cursor: grabbing; }
.globe-wrap canvas { width: 100%; height: 100%; display: block; }

/* ---------- 标签云（6 维度分组） ---------- */
.tag-cloud-group { margin-bottom: 20px; }
.tcg-head { margin-bottom: 11px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-3); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 9px; }
.tag-cloud .tag-chip { gap: 6px; }
.tag-cloud .tc-cnt {
  min-width: 18px; height: 17px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #A5F0FC;
  background: rgba(6, 182, 212, .16); border: 1px solid rgba(6, 182, 212, .28);
}

/* ---------- 首页响应式 ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 24px 0 40px; }
  .hero-left h1 { font-size: 42px; }
  .hero-visual { height: 400px; }
  .globe-wrap { width: 300px; height: 300px; }
}
@media (max-width: 768px) {
  .hero-left h1 { font-size: 32px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-visual { height: 330px; }
  .globe-wrap { width: 260px; height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-left .badge .dot { animation: none; opacity: .8; }
}

/* ============================================================
   §8 标签页 /tag/<slug>（待办 298）
   来源 web/src/pages/TagPage.vue 的 scoped 样式段（去 :deep；
   面包屑 .crumb 已在 §5 定义，内容卡 .p-card / .p-grid / .pager / .empty-state / .btn 已在 §1、§6 定义，此处只补标签页专属）
   ============================================================ */
.tag-page { padding-bottom: 40px; }
.tag-hero { padding: 8px 0 24px; position: relative; }
.tag-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tag-title-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tag-title-wrap h1 { font-size: 36px; font-weight: 800; letter-spacing: .5px; color: #F0FDFA; }
.tag-dim-badge {
  display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; background: rgba(71, 85, 105, .4); color: #94A3B8;
}
.tag-dim-badge.tg-purple { background: rgba(168, 85, 247, .18); color: #D8B4FE; }
.tag-dim-badge.tg-cyan   { background: rgba(6, 182, 212, .18); color: #67E8F9; }
.tag-dim-badge.tg-blue   { background: rgba(59, 130, 246, .18); color: #93C5FD; }
.tag-dim-badge.tg-green  { background: rgba(16, 185, 129, .18); color: #6EE7B7; }
.tag-dim-badge.tg-orange { background: rgba(249, 115, 22, .18); color: #FDBA74; }
.tag-dim-badge.tg-pink   { background: rgba(236, 72, 153, .18); color: #F9A8D4; }

.tag-stat { text-align: right; }
.tag-stat b { font-size: 32px; font-weight: 800; color: #F0FDFA; font-family: Consolas, monospace; }
.tag-stat span { font-size: 12px; color: var(--text-3); margin-left: 4px; }

.tag-desc { margin-top: 16px; font-size: 14px; color: var(--text-2); line-height: 1.7; max-width: 700px; }

.tag-body { padding-bottom: 24px; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.list-head h2 { font-size: 20px; font-weight: 700; color: #E2F4FE; }
.list-note { font-size: 13px; color: var(--text-3); }

.related-block { padding-bottom: 60px; }
.related-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.related-tags .tc-cnt {
  min-width: 18px; height: 17px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: #A5F0FC;
  background: rgba(6, 182, 212, .16); border: 1px solid rgba(6, 182, 212, .28);
}

/* ---------- 标签页响应式 ---------- */
@media (max-width: 768px) {
  .tag-title-wrap h1 { font-size: 26px; }
  .tag-head-top { flex-direction: column; gap: 12px; }
  .tag-stat { text-align: left; }
}

/* ============================================================
   §9 分类索引页 /categories（待办 299）
   来源 web/src/pages/CategoryIndexPage.vue 的 scoped 样式段（去 :deep；
   .crumb 已在 §5、.eyebrow / .grad-text / .section / .section-head / .section-title 已在 §1 定义，
   此处只补本页专属：分组卡、子分类网格、数量徽章）
   ============================================================ */
.cat-page { padding-bottom: 40px; }
.cat-page .cat-hero { padding: 56px 0 32px; }
/* 左缩进只作用于页头，让下方「按场景浏览全部分类」这一块标题与页头左缘对齐；
   卡片区仍走 .container 原位（用户 2026-10-20 明确：不要整页一起缩进） */
.cat-page .cat-hero .container { padding-left: 32px; }
.cat-page .section-head { padding-left: 32px; }
.cat-page .cat-hero .eyebrow { margin-bottom: 14px; }
.cat-page .cat-title { font-size: 42px; font-weight: 800; letter-spacing: .5px; line-height: 1.2; }
.cat-page .cat-sub { margin-top: 16px; font-size: 15.5px; line-height: 1.85; color: var(--text-2); max-width: 640px; }
.cat-page .ch-stats { display: flex; align-items: center; gap: 28px; margin-top: 24px; flex-wrap: wrap; }
.cat-page .ch-stats .cs { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-2); }
.cat-page .ch-stats .cs b { font-size: 19px; font-weight: 800; color: #E2F4FE; font-family: Consolas, monospace; }
.cat-page .ch-stats .div { width: 1px; height: 18px; background: rgba(148, 163, 184, .25); }

/* ---------- 分组列表 ---------- */
.cat-index { display: flex; flex-direction: column; gap: 18px; }
.cat-group { border-radius: 16px; padding: 22px 24px;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-top-color: var(--hairline); }
.cat-group-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cat-item-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0;
  background: rgba(148, 163, 184, .12); }
.cg-name { font-size: 19px; font-weight: 700; }
.cg-name a { color: #E2F4FE; transition: color .2s var(--ease); }
.cg-name a:hover { color: var(--cyan); }
.cat-count { font-size: 12px; color: var(--text-3); font-family: Consolas, monospace; }
.cat-group-head .cat-count { padding: 3px 10px; border-radius: 999px; font-weight: 600;
  color: #A5F0FC; background: rgba(6, 182, 212, .12); border: 1px solid rgba(6, 182, 212, .28); }
.cat-group-desc { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--text-3); }

.cat-item-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
.cat-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 10px; font-size: 13.5px; color: var(--text-2);
  background: rgba(30, 41, 59, .42); border: 1px solid var(--hairline); transition: all .2s var(--ease); }
.cat-item:hover { color: var(--cyan); border-color: rgba(6, 182, 212, .4); background: rgba(6, 182, 212, .08); transform: translateY(-1px); }
.cat-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.cat-item-ico { flex-shrink: 0; width: 18px; text-align: center; font-size: 14px; line-height: 1; }

/* ---------- 主题色（沿用 §1 的 t-* 命名，作用于分组图标底色） ---------- */
.cat-group.t-purple .cat-item-icon { background: rgba(139, 92, 246, .16); }
.cat-group.t-cyan   .cat-item-icon { background: rgba(6, 182, 212, .15); }
.cat-group.t-green  .cat-item-icon { background: rgba(16, 185, 129, .15); }
.cat-group.t-orange .cat-item-icon { background: rgba(245, 158, 11, .15); }
.cat-group.t-blue   .cat-item-icon { background: rgba(59, 130, 246, .17); }
.cat-group.t-pink   .cat-item-icon { background: rgba(244, 114, 182, .15); }

/* ---------- 分类索引页响应式 ---------- */
@media (max-width: 768px) {
  .cat-page .cat-hero { padding: 20px 0 16px; }
  .cat-page .cat-hero .container { padding-left: 0; }
  .cat-page .section-head { padding-left: 0; }
  .cat-page .cat-title { font-size: 30px; }
  .cat-group { padding: 18px 16px; }
  .cg-name { font-size: 17px; }
  .cat-item-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   §10 标签索引页 /tags（待办 300）
   来源 web/src/pages/TagsIndexPage.vue 的 scoped 样式段（去 :deep）；
   .crumb 已在 §5、.eyebrow / .grad-text / .section / .section-head / .section-title 已在 §1 定义，
   此处只补本页专属：维度分组、标签云、数量角标
   ============================================================ */
.tags-page { padding-bottom: 40px; }
.tags-page .tags-hero { padding: 28px 0 24px; }
.tags-page .tags-hero .eyebrow { margin-bottom: 14px; }
.tags-page .tags-title { font-size: 44px; font-weight: 800; letter-spacing: .5px; line-height: 1.2; }
.tags-page .tags-sub { margin-top: 16px; font-size: 15.5px; line-height: 1.85; color: var(--text-2); max-width: 640px; }
.tags-page .lh-stats { display: flex; align-items: center; gap: 26px; margin-top: 24px; flex-wrap: wrap; }
.tags-page .lh-stats .ls { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.tags-page .lh-stats .ls b { font-size: 18px; font-weight: 800; color: #E2F4FE; font-family: Consolas, monospace; }
.tags-page .lh-stats .div { width: 1px; height: 18px; background: rgba(148, 163, 184, .25); }
.tags-page .section-note { font-size: 13px; color: var(--text-3); }

/* ---------- 维度分组 + 标签云 ---------- */
.tag-index { display: flex; flex-direction: column; gap: 16px; }
.tag-group { padding: 20px 24px; border-radius: 14px;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-left: 3px solid #0EA5E9; }
.tag-group-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tag-group-title { font-size: 18px; font-weight: 700; color: #E2F4FE; }
.tag-group-count { font-size: 12.5px; color: var(--text-3); }
.tag-item-list { display: flex; flex-wrap: wrap; gap: 9px; }
.tag-item { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 13.5px; color: var(--text-2); background: rgba(148, 163, 184, .08); border: 1px solid rgba(148, 163, 184, .16);
  transition: all .25s var(--ease); }
.tag-item:hover { color: #E2F4FE; border-color: rgba(6, 182, 212, .45); background: rgba(6, 182, 212, .10); transform: translateY(-1px); }
.tag-item .ti-count { min-width: 18px; height: 17px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; font-family: Consolas, monospace; color: #A5F0FC;
  background: rgba(6, 182, 212, .16); border: 1px solid rgba(6, 182, 212, .28); }

/* ---------- 维度主题色（沿用 §8 的 tg-* 命名，作用于分组左边框） ---------- */
.tag-group.tg-purple { border-left-color: #A855F7; }
.tag-group.tg-cyan   { border-left-color: #06B6D4; }
.tag-group.tg-blue   { border-left-color: #3B82F6; }
.tag-group.tg-green  { border-left-color: #10B981; }
.tag-group.tg-orange { border-left-color: #F97316; }
.tag-group.tg-pink   { border-left-color: #EC4899; }

/* ---------- 标签索引页响应式 ---------- */
@media (max-width: 768px) {
  .tags-page .tags-title { font-size: 32px; }
  .tag-group { padding: 16px; }
}

/* ============================================================
   §11 搜索页 /search（待办 301）
   来源 web/src/pages/SearchPage.vue 的 scoped 样式段（去 :deep）；
   .crumb 已在 §5、.eyebrow / .grad-text / .btn / .p-grid / .p-card / .tag-chip 已在 §1、
   .pager / .pager-btn / .pager-gap 已在 §6 定义，此处只补搜索页专属：
   顶部搜索框、结果统计、空态引导
   ============================================================ */
.search-page { padding-bottom: 40px; }

/* ---------- 顶部搜索框 ---------- */
.search-hero { padding: 24px 0 26px; text-align: center; }
.search-hero .eyebrow { justify-content: center; margin-bottom: 14px; }
.search-title { font-size: 42px; font-weight: 800; letter-spacing: .5px; line-height: 1.2; }
.search-lead { margin: 16px auto 0; max-width: 560px; font-size: 15.5px; line-height: 1.85; color: var(--text-2); }

.search-form { position: relative; display: flex; align-items: center; gap: 12px;
  margin: 30px auto 0; max-width: 680px; height: 62px; padding: 0 8px 0 20px; border-radius: 18px;
  background: rgba(15,25,48,.7); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-border); border-top-color: var(--hairline);
  box-shadow: 0 24px 60px -24px rgba(2,6,23,.85); transition: all .25s var(--ease); }
.search-form:focus-within { border-color: rgba(6,182,212,.5); box-shadow: 0 24px 60px -24px rgba(2,6,23,.85), 0 0 0 4px rgba(6,182,212,.12); }
.search-form .sf-ic { width: 22px; height: 22px; color: var(--cyan); flex-shrink: 0; }
.search-form .sf-input { flex: 1; min-width: 0; height: 100%; background: none; border: none; outline: none;
  color: var(--text); font-size: 17px; font-family: inherit; }
.search-form .sf-input::placeholder { color: var(--text-3); }
.search-form .sf-btn { height: 46px; padding: 0 26px; border-radius: 13px; border: none; cursor: pointer; font-family: inherit;
  font-size: 15.5px; font-weight: 700; color: #06222E; flex-shrink: 0;
  background: linear-gradient(135deg,#67E8F9,#06B6D4); box-shadow: 0 8px 22px -8px rgba(6,182,212,.6); transition: all .25s var(--ease); }
.search-form .sf-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(6,182,212,.7); }

/* ---------- 结果统计 ---------- */
.search-page .result-bar { padding: 16px 0 20px; }
.search-page .result-stat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--text-2); }
.search-page .result-stat b { color: #E2F4FE; font-size: 18px; font-family: Consolas, monospace; font-weight: 800; }
.search-page .result-stat .kw { color: var(--cyan); font-weight: 600; background: rgba(6,182,212,.1);
  border: 1px solid rgba(6,182,212,.28); padding: 3px 10px; border-radius: 8px; }

/* ---------- 空态 / 引导态 ---------- */
.search-empty { padding: 72px 20px; text-align: center; }
.search-empty h3 { font-size: 21px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.search-empty p { font-size: 14.5px; color: var(--text-2); line-height: 1.8; max-width: 480px; margin: 0 auto 24px; }

/* ---------- 搜索页响应式 ---------- */
@media (max-width: 768px) {
  .search-title { font-size: 30px; }
  .search-form { height: 56px; padding: 0 6px 0 16px; gap: 8px; }
  .search-form .sf-input { font-size: 15px; }
  .search-form .sf-btn { height: 42px; padding: 0 18px; font-size: 14.5px; }
}

/* ============================================================
   §12 单页 /about、/feedback（待办 302）
   来源 AboutPage.vue / FeedbackPage.vue 的 scoped 样式段（去 :deep、去 Vue 专属验证码/Honeypot）；
   .eyebrow / .grad-text 已在 §1 定义；#main 顶距已在 §4 统一，故 .article-hero 不再叠加 148px。
   ============================================================ */
.article-page .article-hero { position: relative; padding: 22px 0 36px; text-align: center; overflow: hidden; }
.article-page .article-hero .eyebrow { justify-content: center; }
.article-page .article-title { margin-top: 18px; font-size: 46px; line-height: 1.2; font-weight: 800; letter-spacing: .5px; }
.article-page .article-desc { margin: 18px auto 0; font-size: 16.5px; line-height: 1.85; color: var(--text-2); max-width: 680px; }
.article-page .article-body { padding: 30px 0 60px; }

.article-page .article-content { padding: 48px 56px; border-radius: 20px;
  background: rgba(21,32,54,.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-border); border-top-color: var(--hairline);
  box-shadow: 0 40px 90px -30px rgba(2,6,23,.9), 0 0 60px -20px rgba(6,182,212,.15), 0 0 50px -20px rgba(139,92,246,.12); }
.article-page .article-content h2 { position: relative; padding-left: 18px; font-size: 24px; font-weight: 800; line-height: 1.4; margin: 38px 0 18px; }
.article-page .article-content h2::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: linear-gradient(180deg,#67E8F9,#8B5CF6); }
.article-page .article-content h2:nth-of-type(1)::before { background: linear-gradient(180deg,#06B6D4,#67E8F9); }
.article-page .article-content h2:nth-of-type(2)::before { background: linear-gradient(180deg,#8B5CF6,#C4B5FD); }
.article-page .article-content h2:nth-of-type(3)::before { background: linear-gradient(180deg,#10B981,#6EE7B7); }
.article-page .article-content h2:nth-of-type(4)::before { background: linear-gradient(180deg,#F59E0B,#FCD34D); }
.article-page .article-content h2:first-child { margin-top: 0; }
.article-page .article-content h3 { font-size: 18px; font-weight: 700; line-height: 1.5; margin: 26px 0 12px; color: #E2F4FE; }
.article-page .article-content p { font-size: 15px; line-height: 1.92; color: #C4D0E2; margin: 14px 0; }
.article-page .article-content ul, .article-page .article-content ol { margin: 14px 0; padding-left: 24px; }
.article-page .article-content li { font-size: 15px; line-height: 1.92; color: #C4D0E2; margin: 8px 0; }
.article-page .article-content ul li::marker { color: var(--cyan); }
.article-page .article-content .list-source li::marker { color: #6EE7B7; }
.article-page .article-content .list-contact li::marker { color: #FCD34D; }
.article-page .article-content blockquote { margin: 20px 0; padding: 14px 18px; border-left: 3px solid #8B5CF6; border-radius: 0 10px 10px 0; background: rgba(139,92,246,.07); color: #B9C6DC; }
.article-page .article-content blockquote p { margin: 6px 0; color: #B9C6DC; }
.article-page .article-content a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(6,182,212,.4); }
.article-page .article-content a:hover { color: #67E8F9; }
.article-page .article-content code { font-family: "JetBrains Mono", Consolas, "Courier New", monospace; font-size: 13px; padding: 2px 7px; border-radius: 5px; background: rgba(6,182,212,.10); color: #67E8F9; }
.article-page .article-content hr { margin: 30px 0; border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(148,163,184,.3), transparent); }
.article-page .article-content .ending-text { text-align: center; font-size: 13px;
  background: linear-gradient(90deg, #67E8F9, #8B5CF6, #6EE7B7);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- 关于页：特色卡片 ---------- */
.article-page .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0; }
.article-page .feature-card { position: relative; overflow: hidden; padding: 18px 20px; border-radius: 12px;
  background: rgba(7,13,28,.45); border: 1px solid rgba(148,163,184,.14); transition: all .25s var(--ease); }
.article-page .feature-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: .7; }
.article-page .feature-card:hover { transform: translateY(-2px); }
.article-page .feature-card .fc-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 11px; transition: transform .3s ease, box-shadow .3s ease; }
.article-page .feature-card .fc-ico svg { width: 19px; height: 19px; }
.article-page .feature-card:hover .fc-ico { transform: translateY(-2px); }
.article-page .feature-card h4 { font-size: 15px; font-weight: 700; color: #E2F4FE; margin-bottom: 6px; }
.article-page .feature-card p { font-size: 13px; line-height: 1.7; color: var(--text-2); margin: 0; }
.fc-cyan::before { background: linear-gradient(90deg,#06B6D4,#67E8F9); }
.fc-cyan .fc-ico { background: rgba(6,182,212,.13); color: #67E8F9; }
.fc-cyan:hover { border-color: rgba(6,182,212,.4); }
.fc-cyan:hover .fc-ico { box-shadow: 0 4px 16px rgba(6,182,212,.3); }
.fc-green::before { background: linear-gradient(90deg,#10B981,#6EE7B7); }
.fc-green .fc-ico { background: rgba(16,185,129,.13); color: #6EE7B7; }
.fc-green:hover { border-color: rgba(16,185,129,.4); }
.fc-green:hover .fc-ico { box-shadow: 0 4px 16px rgba(16,185,129,.3); }
.fc-amber::before { background: linear-gradient(90deg,#F59E0B,#FCD34D); }
.fc-amber .fc-ico { background: rgba(245,158,11,.13); color: #FCD34D; }
.fc-amber:hover { border-color: rgba(245,158,11,.4); }
.fc-amber:hover .fc-ico { box-shadow: 0 4px 16px rgba(245,158,11,.3); }
.fc-purple::before { background: linear-gradient(90deg,#8B5CF6,#C4B5FD); }
.fc-purple .fc-ico { background: rgba(139,92,246,.13); color: #C4B5FD; }
.fc-purple:hover { border-color: rgba(139,92,246,.4); }
.fc-purple:hover .fc-ico { box-shadow: 0 4px 16px rgba(139,92,246,.3); }

.article-page .info-box { margin: 20px 0; padding: 16px 20px; border-radius: 12px; background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.28); display: flex; gap: 13px; align-items: flex-start; }
.article-page .info-box svg { width: 20px; height: 20px; color: #FCD34D; flex-shrink: 0; margin-top: 2px; }
.article-page .info-box p { margin: 0; font-size: 14px; color: #C4D0E2; line-height: 1.7; }

/* ---------- 反馈页：表单 ---------- */
.article-page .feedback-form { margin-top: 22px; padding: 26px 28px; border-radius: 14px; background: rgba(7,13,28,.55); border: 1px solid rgba(148,163,184,.16); }
.article-page .form-row { margin-bottom: 18px; }
.article-page .form-row label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.article-page .form-row label .req { color: #F87171; margin-left: 3px; }
.article-page .form-row input, .article-page .form-row textarea, .article-page .form-row select { width: 100%; padding: 12px 14px; font-size: 14.5px; color: var(--text); font-family: inherit; background: rgba(15,25,48,.6); border: 1px solid rgba(148,163,184,.18); border-radius: 10px; outline: none; transition: all .25s var(--ease); }
.article-page .form-row input:focus, .article-page .form-row textarea:focus, .article-page .form-row select:focus { border-color: rgba(6,182,212,.5); box-shadow: 0 0 0 3px rgba(6,182,212,.12); }
.article-page .form-row textarea { resize: vertical; min-height: 160px; line-height: 1.7; }
.article-page .form-row select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.article-page .form-row select option { background: #0F172A; color: var(--text); }
.article-page .form-row input::placeholder, .article-page .form-row textarea::placeholder { color: var(--text-3); }
.article-page .form-error { display: none; margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.6; color: #FCA5A5; background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.25); }

/* ---------- 反馈页：验证码（输入框 + 可点击的题目） ---------- */
.article-page .captcha-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.article-page .captcha-row > div:first-child { min-width: 0; }
.article-page .captcha-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 47px; padding: 0 14px; border-radius: 10px; cursor: pointer; user-select: none;
  background: rgba(6,182,212,.08); border: 1px dashed rgba(6,182,212,.4); transition: all .25s var(--ease); }
.article-page .captcha-box:hover { background: rgba(6,182,212,.14); border-color: rgba(6,182,212,.7); }
.article-page .captcha-box:focus-visible { outline: none; border-color: rgba(6,182,212,.8); box-shadow: 0 0 0 3px rgba(6,182,212,.15); }
.article-page .captcha-box.loading { opacity: .55; cursor: default; }
.article-page .captcha-prompt { font-family: "JetBrains Mono", Consolas, monospace; font-size: 17px; font-weight: 700; color: #67E8F9; letter-spacing: 1px; white-space: nowrap; }
.article-page .captcha-refresh { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.article-page .captcha-refresh svg { width: 14px; height: 14px; }
.article-page .captcha-box.loading .captcha-refresh svg { animation: fb-spin .8s linear infinite; }
@keyframes fb-spin { to { transform: rotate(360deg); } }

/* 蜜罐字段：正常用户看不见，机器人会填 */
.article-page .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.article-page .form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.article-page .form-hint { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.article-page .form-hint svg { width: 14px; height: 14px; color: var(--cyan); }
.article-page .form-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 26px; border-radius: 11px; border: none; cursor: pointer; font-size: 15px; font-weight: 700; color: #06222E; font-family: inherit;
  background: linear-gradient(135deg,#67E8F9 0%,#06B6D4 45%,#2563EB 120%); box-shadow: 0 10px 28px -8px rgba(6,182,212,.55), inset 0 1px 0 rgba(255,255,255,.45); transition: all .25s var(--ease); }
.article-page .form-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(6,182,212,.65), inset 0 1px 0 rgba(255,255,255,.45); }
.article-page .form-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.article-page .form-submit svg { width: 16px; height: 16px; }

/* ---------- 反馈页：承诺 / 成功 / 分类卡片 ---------- */
.article-page .promise-card { margin: 22px 0; padding: 18px 22px; border-radius: 12px; background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(6,182,212,.06)); border: 1px solid rgba(16,185,129,.28); display: flex; align-items: center; gap: 16px; }
.article-page .promise-card svg { width: 30px; height: 30px; color: #34D399; flex-shrink: 0; }
.article-page .promise-card .pc-title { font-size: 15px; font-weight: 700; color: #A7F3D0; margin-bottom: 5px; }
.article-page .promise-card .pc-desc { font-size: 13px; line-height: 1.75; color: var(--text-2); margin: 0; }

.article-page .ok-box { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 22px; padding: 26px; border-radius: 14px; background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(6,182,212,.06)); border: 1px solid rgba(16,185,129,.3); }
.article-page .ok-box svg { width: 34px; height: 34px; color: #34D399; flex-shrink: 0; }
.article-page .ok-title { font-size: 17px; font-weight: 800; color: #A7F3D0; margin-bottom: 6px; }
.article-page .ok-desc { font-size: 13.5px; line-height: 1.75; color: var(--text-2); margin: 0; }

.article-page .fb-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0; }
.article-page .fb-cat-card { padding: 18px 20px; border-radius: 12px; background: rgba(7,13,28,.45); border: 1px solid rgba(148,163,184,.14); transition: all .25s var(--ease); }
.article-page .fb-cat-card:hover { border-color: rgba(6,182,212,.35); transform: translateY(-2px); }
.article-page .fb-cat-card .fcc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.article-page .fb-cat-card .fcc-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.article-page .fb-cat-card .fcc-ico svg { width: 16px; height: 16px; }
.article-page .fb-cat-card h4 { font-size: 15px; font-weight: 700; color: #E2F4FE; }
.article-page .fb-cat-card p { font-size: 13px; line-height: 1.7; color: var(--text-2); margin: 0; }
.t-bug .fcc-ico { background: rgba(239,68,68,.13); color: #FCA5A5; }
.t-suggest .fcc-ico { background: rgba(245,158,11,.13); color: #FBBF24; }
.t-question .fcc-ico { background: rgba(6,182,212,.13); color: #67E8F9; }
.t-coop .fcc-ico { background: rgba(139,92,246,.13); color: #C4B5FD; }
.t-content .fcc-ico { background: rgba(16,185,129,.13); color: #34D399; }
.t-report .fcc-ico { background: rgba(244,114,182,.13); color: #F472B6; }

/* ---------- 单页响应式 ---------- */
@media (max-width: 768px) {
  .article-page .article-title { font-size: 32px; }
  .article-page .article-content { padding: 32px 22px; }
  .article-page .feature-grid { grid-template-columns: 1fr; }
  .article-page .fb-cat-grid { grid-template-columns: 1fr; }
  .article-page .form-actions { flex-direction: column; align-items: stretch; }
  .article-page .form-submit { width: 100%; }
  .article-page .captcha-row { grid-template-columns: 1fr; gap: 10px; }
}

/* ============================================================
   §13 错误页 404 / 500（待办 303）
   来源 NotFoundPage.vue / MaintenancePage.vue 的 scoped 样式段；
   两页均套 layout/base（#main 已在 §4 给出 96px 顶距），故不再叠加 120px 顶内边距。
   ============================================================ */

/* ---------- 404 ---------- */
.nf-page { padding: 60px 0 110px; text-align: center; }
.nf-num { font-family: "JetBrains Mono", Consolas, "Courier New", monospace; font-size: 128px; font-weight: 800; line-height: 1; letter-spacing: -2px;
  background: linear-gradient(96deg,#67E8F9 0%,#06B6D4 45%,#8B5CF6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(6,182,212,.22); }
.nf-title { margin-top: 18px; font-size: 34px; font-weight: 800; letter-spacing: .5px; color: var(--text); }
.nf-desc { margin: 16px auto 0; max-width: 540px; font-size: 15.5px; line-height: 1.85; color: var(--text-2); }
.nf-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.nf-tip { margin-top: 30px; font-size: 13px; color: var(--text-3); }
.nf-tip a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.nf-tip a:hover { color: #67E8F9; }

/* ---------- 500 / 维护页 ---------- */
.status-page { display: flex; align-items: center; justify-content: center; padding: 40px 24px 90px; }
.status-card { width: 680px; max-width: 100%; text-align: center; padding: 56px 48px 50px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(36,51,82,.55), rgba(18,28,50,.62));
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--hairline);
  box-shadow: 0 40px 90px -34px rgba(2,6,23,.9), 0 0 60px -24px rgba(245,158,11,.18), inset 0 1px 0 rgba(255,255,255,.1);
  position: relative; overflow: hidden; }
.status-card::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,158,11,.55), rgba(239,68,68,.5), transparent); }
.status-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.status-glow.g1 { width: 280px; height: 280px; left: -80px; top: -80px; background: rgba(245,158,11,.30); }
.status-glow.g2 { width: 280px; height: 280px; right: -80px; bottom: -80px; background: rgba(239,68,68,.24); }

.status-eyebrow { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #FDE3B0; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); margin-bottom: 28px; }
.status-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(245,158,11,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); } 70% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }

.big-num { font-family: "JetBrains Mono", Consolas, "Courier New", monospace; font-size: 180px; font-weight: 800; line-height: 1; letter-spacing: -2px;
  background: linear-gradient(96deg,#FDE3B0 0%,#F59E0B 45%,#EF4444 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(245,158,11,.22); position: relative; display: inline-block; }
.big-num::after { content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); width: 80px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #FBBF24, #EF4444, transparent); }

.status-title { margin-top: 30px; font-size: 34px; font-weight: 800; letter-spacing: .5px; line-height: 1.3; color: var(--text); }
.status-sub { margin: 16px auto 0; font-size: 15.5px; line-height: 1.85; color: var(--text-2); max-width: 480px; }

.recover-box { margin-top: 26px; display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px; border-radius: 14px; background: rgba(8,15,32,.55); border: 1px solid rgba(148,163,184,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.recover-box .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: rgba(245,158,11,.16); color: #FBBF24; }
.recover-box .ic svg { width: 17px; height: 17px; }
.recover-box .rb-txt { text-align: left; }
.recover-box .rb-lbl { font-size: 11px; letter-spacing: 1.4px; color: var(--text-3); text-transform: uppercase; }
.recover-box .rb-val { margin-top: 4px; font-family: "JetBrains Mono", Consolas, monospace; font-size: 15.5px; font-weight: 700; color: #FDE3B0; }

.status-actions { display: flex; gap: 14px; justify-content: center; margin-top: 34px; }
.status-actions .btn svg { width: 16px; height: 16px; }
.contact-tip { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(148,163,184,.14); font-size: 14px; color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.contact-tip a { display: inline-flex; align-items: center; gap: 5px; color: #67E8F9; font-weight: 600; border-bottom: 1px dashed rgba(6,182,212,.4); transition: all .25s var(--ease); }
.contact-tip a:hover { color: #A5F0FC; border-color: rgba(6,182,212,.7); }
.contact-tip svg { width: 14px; height: 14px; color: var(--cyan); }

/* ---------- 错误页响应式 ---------- */
@media (max-width: 768px) {
  .nf-num { font-size: 88px; }
  .nf-title { font-size: 26px; }
  .status-page { padding: 24px 16px 60px; }
  .status-card { padding: 40px 24px 36px; }
  .big-num { font-size: 120px; }
  .status-title { font-size: 26px; }
}