/* ═══════════════════════════════════════════════════════════════════════
 * xiayu-editorial.css — 夏语 · 东方编辑感设计系统（唯一权威设计层）
 * 2026-09-27
 *
 * ── 为什么要有这一层 ────────────────────────────────────────────────
 * 此前站点并排加载了 6 个 CSS，其中 4 个各自宣称「全站视觉权威」：
 *   common.css        1183 选择器 / 314 处硬编码 rgba(59,130,246) Bootstrap 蓝
 *   xiayu-design.css  青蓝渐变（--accent #22d3ee / #3b82f6），还 !important 压 header
 *   theme.css         黑金，靠「最后加载 + !important」抢夺
 *   premium.css       黑金 222 选择器，试图覆盖前面 1183 个 —— 盖不住
 * 结果是半金半蓝的缝合怪：导航条是金，激活 tab、统计卡图标、平台标签仍是蓝。
 * 本层是「合并」而非「再叠一层」：先夺回令牌，再把骨架与组件一次性定版。
 *
 * ── 设计语言（移植自 xiayu-prototype，东方编辑感）────────────────────
 *   墨黑 60%  |  宣纸暖白 30%  |  鎏金 10%  |  朱砂 <5%（只给印章）
 *   三个不可让步的手法：
 *     1. 中文标题用宋体 —— 这是英文站永远拿不走的差异化
 *     2. 金色只用于「可交互」；层级靠描边与明度，不靠阴影与发光
 *     3. 直角。圆角是「卡片 App」的语法，不是印刷物的语法
 *   版式手法：金线分隔（左端亮点）· 稿纸网格 48px · 竖排 · 活字块 · 印章
 *
 * ⚠️ 改本文件前先读 _archive/editorial_before_2026-09-27/
 * ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 0. 令牌夺回（必须最先执行）═══════════════
 * common.css 有两处 :root 蓝色令牌（:8 与 :5787），xiayu-design.css 又有一处
 * 青蓝令牌 —— 三处都会压过 design-tokens 的金桥。本层最后加载，一次性清算。 */
:root {
  /* ── 墨池：夏夜的水体，取代原来的墨黑。
   * 每一档都掺了一点点绿 —— 那是荷叶的倒影，不是「把黑色调成绿色」。
   * 掺得极轻：#070c0a 与 #08080a 的彩度差只有 5/255，肉眼仍是墨，
   * 但压在它上面的暖金会相应退冷，整站因此从「白日的宣纸」变成「一夜的塘」。 */
  /* 定标依据（实测，不是感觉）：截图采样 rgb(6,16,13) 的彩度差只有 10、
   * 色相 162°（青绿）—— 方向对，但按冷色判据那条经验「彩度差 ≥12 才看得出偏色」，
   * 这等于调了一个看不见的绿，屏幕上仍是一块黑。
   * 所以整体提一档亮度：池底提到 rgb(11,26,21)，彩度差 15、亮度也够，
   * 「塘」才真的在屏幕上成立。再亮就发灰，别过。 */
  --x-ink-950: #061210;
  --x-ink-900: #0b1a15;   /* 池底 */
  --x-ink-850: #0d1f1a;
  --x-ink-800: #102520;
  --x-ink-700: #142b25;   /* 卡片底。彩度差 17 */
  --x-ink-600: #1b352d;
  --x-ink-500: #254238;

  /* ── 月白：夜里从水面升起的冷白，取代原来的宣纸暖白 ── */
  --x-paper:       #e8efea;
  --x-paper-soft:  #ccd8d2;
  --x-paper-dim:   #9daba4;
  /* 全站最弱的一档文字。取值受 tools/_contrast.cjs 门禁约束：
   * 它不止压在 --x-ink-900 上，更大面积落在卡片底 --x-ink-700 上。
   * 卡底两次换色（墨黑 → 墨绿 → 提亮后的墨绿）都随之重算：
   * #86958d 在新卡底 #142b25 上只剩 4.77:1 —— 过线但没余量；
   * 提到 #8d9c94 后 5.22:1。改这个值之前先跑门禁，别凭感觉。 */
  --x-paper-faint: #8d9c94;

  /* ── 荷青：夏的标识符。只给可交互与层级，不铺面 ── */
  --x-lotus:      #7fa886;
  --x-lotus-soft: #a6c7ab;
  /* deep 档压墨底只有 3.25:1，**不能当文字用**，只做描边与底纹。
   * 文字一律用 --x-lotus（6.5:1）或 --x-lotus-soft（9.4:1）。 */
  --x-lotus-deep: #4f7359;
  --x-lotus-rgb:  127, 168, 134;

  /* ── 月晕金：压冷一档的鎏金。
   * 原来的 #d9b45a 在墨底上偏暖发橙，是「白日的招牌」；
   * 换成 #d3bd78 之后更像月光落在水面的碎光，与墨池同处一夜。 */
  --x-gold:      #d3bd78;
  --x-gold-soft: #e5d5a2;
  /* 定标前先算过：这一档最常落到 .x-avatar 的宋体单字上（底色约 #1b1e1e）。
   * #9c8134 算出来是 4.49:1 —— 差 0.01 不达 AA，刚好卡在门槛外。
   * 提到 #a58a38 后 5.03:1，多留一点余量，改之前照样先跑 _contrast.cjs。 */
  --x-gold-deep: #a58a38;

  /* ── 朱砂：只给印章与「正在发生」的标记（品牌识别，不动） ── */
  --x-cinnabar:      #c1443a;
  --x-cinnabar-soft: #d4574d;   /* 当文字用这档：压墨绿底约 5.0:1 */
  --x-seal-bg:       #bd3f35;   /* 印章底色，白字压上去约 4.7:1 */

  /* ── 描边：层级的主力表达。白改月白，金改月晕金 ── */
  --x-line:           rgba(232, 239, 234, .10);
  --x-line-soft:      rgba(232, 239, 234, .07);
  --x-line-strong:    rgba(232, 239, 234, .18);
  --x-line-gold:      rgba(211, 189, 120, .42);
  --x-line-gold-soft: rgba(211, 189, 120, .22);

  /* ── 新增：荷与水的一层薄色，供氛围层取用 ── */
  --x-lotus-line:      rgba(127, 168, 134, .26);
  --x-lotus-line-soft: rgba(127, 168, 134, .12);
  --x-moon:            #e8efea;
  /* 月白的 RGB 分量。氛围层要用一堆半透明月白，写 rgba(var(--x-moon-rgb), .05)
   * 比在各处重复同一串数字可靠 —— 将来若要把月色改成更冷或更暖，只改这一行。 */
  --x-moon-rgb:        232, 239, 234;

  /* ── 字体：四种字声，各司其职 ──
   * 宋体（Noto Serif SC Variable 自托管，200-900 可变）→ 标题：东方编辑感的灵魂。
   *   Windows 上不再跌落 SimSun（小字号发虚、衬线糊成一团）。
   * 黑体（系统栈）→ 正文：雅黑/苹方足够好，不值得为正文整段下载数 MB。
   * 楷体（霞鹜文楷屏显 GB 子集自托管）→ 「注」性质的点缀文字：竖排侧标、页脚标语、空态。
   * 等宽（系统栈）→ 代码与英文技术词。 */
  --x-serif: "Noto Serif SC Variable", "Songti SC", "SimSun", "STSong", "Noto Serif CJK SC",
             "Source Han Serif SC", "Georgia", serif;
  --x-kai:   "LXGW WenKai Screen", "KaiTi", "STKaiti", "楷体",
             "Noto Serif SC Variable", "Songti SC", serif;
  --x-sans:  "PingFang SC", "MiSans", "HarmonyOS Sans SC", "Microsoft YaHei",
             "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif;
  --x-mono:  "JetBrains Mono", "Cascadia Code", "Fira Code", "Consolas",
             "Menlo", "Courier New", monospace;

  /* ── 版心与节奏 ── */
  --x-shell: 1320px;
  --x-gutter: clamp(20px, 5vw, 64px);
  --x-section: 88px;

  /* ── 动效 ── */
  --x-ease: cubic-bezier(.22, .61, .36, 1);

  /* ── 字距：中文方块字必须正字距 ── */
  --x-track-2: .08em;
  --x-track-3: .18em;
  --x-track-4: .32em;
}

/* ═══════════════ 0b. 老变量桥接层 ═══════════════
 * common.css / xiayu-design.css / theme.css / premium.css 里有数百处
 * var(--cp) / var(--text) / var(--card) 之类的引用。此处把历史变量名
 * 全部重定向到东方编辑感令牌 —— 这样那 157KB 既有规则的「用变量的部分」
 * 无需改动即可跟随新设计。硬编码色值另由脚本机械化处理。 */
:root {
  --cp:              var(--x-gold);
  --cp-dark:         var(--x-gold-deep);
  --cp-deep:         var(--x-gold-deep);
  --cp-light:        var(--x-gold-soft);
  --gold:            var(--x-gold);
  --gold-light:      var(--x-gold-soft);
  --gold-dark:       var(--x-gold-deep);
  --primary:         var(--x-gold);

  /* 旧青蓝命名一律归金（会立刻消掉一大批「蓝字/蓝icon」） */
  --cyan:  var(--x-gold-deep);
  --teal:  var(--x-gold-deep);
  --accent:          var(--x-gold);
  --accent-2:        var(--x-gold-soft);
  --accent-3:        var(--x-gold-deep);
  --accent-soft:     linear-gradient(135deg, rgba(217,180,90,.16), rgba(168,132,47,.10));
  --accent-grad:     linear-gradient(135deg, var(--x-gold-soft), var(--x-gold), var(--x-gold-deep));
  --c-accent:        var(--x-gold);
  --c-accent-2:      var(--x-gold-soft);
  --c-accent-3:      var(--x-gold-deep);
  --c-gold:          var(--x-gold);
  --c-gold-hi:       var(--x-gold-soft);
  --c-gold-deep:     var(--x-gold-deep);
  --c-grad:          linear-gradient(135deg, var(--x-gold-soft), var(--x-gold), var(--x-gold-deep));

  /* 背景层级：冷黑 → 墨黑 */
  --bg:            var(--x-ink-900);
  --bg-2:          var(--x-ink-950);
  --bg-secondary:  var(--x-ink-800);
  --bg-tertiary:   var(--x-ink-700);
  --bg-0:          var(--x-ink-950);
  --bg-1:          var(--x-ink-900);
  --bg-2-c:        var(--x-ink-800);
  --card:          var(--x-ink-700);
  --card-bg:       rgba(22, 22, 26, .72);
  --card-solid:    var(--x-ink-700);
  --c-card-bg:     rgba(22, 22, 26, .72);
  --c-card-solid:  var(--x-ink-700);
  --c-bg-0:        var(--x-ink-950);
  --c-bg-1:        var(--x-ink-900);
  --c-bg-2:        var(--x-ink-800);

  /* 文字：冷白 → 宣纸暖白 */
  --text:          var(--x-paper-dim);
  --text-primary:  var(--x-paper);
  --text-secondary:var(--x-paper-dim);
  --text-muted:    var(--x-paper-faint);
  --text-dim:      var(--x-paper-faint);
  --ink:           var(--x-paper);
  --gray:          var(--x-paper-dim);
  --muted:         var(--x-paper-faint);
  --c-text:        var(--x-paper-dim);
  --c-text-hi:     var(--x-paper);
  --c-text-mid:    var(--x-paper-dim);
  --c-text-dim:    var(--x-paper-faint);

  /* 描边：蓝描边 → 暖白/金描边 */
  --border:           var(--x-line);
  --border-light:     var(--x-line-soft);
  --border-medium:    var(--x-line-strong);
  --border-color:     var(--x-line);
  --border-glow:      var(--x-line-gold-soft);
  --line:             var(--x-line);
  --line-strong:      var(--x-line-strong);
  --c-line:           var(--x-line);
  --c-line-strong:    var(--x-line-gold);
  --c-line-accent:    var(--x-line-gold);

  /* 语义色：收敛饱和度，不与金打架 */
  --green:  #6ee7b7;
  --red:    #f87171;
  --c-green:#6ee7b7;
  --c-red:  #f87171;
  --c-orange:#fbbf24;
  --c-purple:#c4b5fd;

  /* 发光：旧版满屏蓝色 text-shadow / box-shadow → 一律归零
   * （东方编辑感的层级由描边承担，发光是「科技风」语法） */
  --glow:              none;
  --glow-blue:         none;
  --glow-blue-strong:  none;
  --shadow:            none;
  --shadow-lg:         none;
  --sh-card:           none;
  --sh-pop:            0 24px 60px rgba(0, 0, 0, .68);

  /* 文字阴影：旧版大量 text-shadow 蓝光，整站禁用 */
  --text-shadow: none;

  /* 圆角归零：直角是本设计语言的立场 */
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0;
  --p-r-xs: 0; --p-r-sm: 0; --p-r-md: 0; --p-r-lg: 0;
}

/* ═══════════════ 0c. 荷塘氛围层（月 · 水 · 岸 · 露）═══════════════
 * 上一步换的是骨（令牌），这一步加的是气。四件都不占文档流：
 *   月轮  右上角常驻的一团冷光，另有一轮更亮的小月压在光心
 *   水纹  4px 一格的极淡横纹，让光看起来是落在水上而不是浮在纸面
 *   岸线  hero 下缘一道荷叶轮廓 —— 全站唯一的一处曲线
 *   露光  条目 hover 时那道金线提亮一档，像叶面上的露转了下身
 * 全部 pointer-events:none，不改任何元素的几何：
 * verify_site / _verify_editorial 的条目断言与截图尺寸都不受影响。
 * 亮色主题（body.light）在文件末尾一并关闭它们，见「12. 主题切换兼容」。 */

body::before, body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
/* 月：先立住一轮有轮廓的月盘，再让它的光撒开。
 * 只有光晕没有盘，屏幕上就只是一块亮斑 ——「月色」得先有个月亮。
 * position:fixed 让月随视口静止：滚动时它不跟着走，才像挂在天上。 */
body::before {
  background:
    radial-gradient(circle 84px at 84% 116px,
      rgba(var(--x-moon-rgb), .22) 0%,
      rgba(var(--x-moon-rgb), .15) 56%,
      rgba(var(--x-moon-rgb), .05) 82%,
      rgba(var(--x-moon-rgb), 0) 100%),
    radial-gradient(820px 580px at 84% -10%,
      rgba(var(--x-moon-rgb), .06), rgba(var(--x-moon-rgb), 0) 66%);
}
/* 水：把月光揉碎的横纹。透明度压到 .02 ——
 * 远看只是一层薄雾，近看才见纹，绝不抢内容的对比度 */
body::after {
  background-image: repeating-linear-gradient(0deg,
    rgba(var(--x-moon-rgb), .026) 0 1px,
    rgba(var(--x-moon-rgb), 0) 1px 4px);
}
/* 岸：hero 下缘的一道荷叶轮廓。全站唯一的曲线，落在首屏与正文之间。
 * 用 inline SVG 而不是图片文件 —— 不过 nginx 缓存，也不需要新增资源。
 * 波形是二次贝塞尔的相对命令 q/t Repeat，改 q 的控制点即可换形状。 */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 40px;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V12q40-13 80 0t80 0 80 0 80 0 80 0 80 0 80 0 80 0 80 0 80 0 80 0 80 0 80 0 80 0 80 0' fill='%23e8efea'/%3E%3C/svg%3E");
  opacity: .07;
}
/* 窄屏：桌面那轮月会压到 header 右侧的搜索/菜单区，改成更小更靠上的一轮。
 * 310px 处正好落在 logo 与按钮之间的空白带。 */
@media (max-width: 768px) {
  body::before {
    background:
      radial-gradient(circle 46px at 86% 34px,
        rgba(var(--x-moon-rgb), .18) 0%,
        rgba(var(--x-moon-rgb), .05) 78%,
        rgba(var(--x-moon-rgb), 0) 100%),
      radial-gradient(440px 330px at 88% -8%,
        rgba(var(--x-moon-rgb), .05), rgba(var(--x-moon-rgb), 0) 68%);
  }
}

/* ═══════════════ 1. 排版基线 ═══════════════ */
html {
  font-family: var(--x-sans);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--x-sans);
  background: var(--x-ink-900);
  color: var(--x-paper-dim);
  line-height: 1.7;
  letter-spacing: .2px;          /* 中文方块字正字距 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: rgba(232, 239, 234, .26);
  color: var(--x-paper);
}

:focus-visible {
  outline: 2px solid var(--x-gold);
  outline-offset: 2px;
}

/* 标题系统：宋体 + 大字号 + 松字距
 * 中文标题绝不用 500 以下的细体（笔画会散），最低 600 */
h1, h2, h3 {
  font-family: var(--x-serif);
  font-weight: 600;
  color: var(--x-paper);
  line-height: 1.28;
  letter-spacing: var(--x-track-2);
}
h4, h5, h6 {
  font-family: var(--x-sans);
  font-weight: 700;
  color: var(--x-paper);
  line-height: 1.4;
  letter-spacing: .3px;
}

p { color: var(--x-paper-dim); }

a { color: var(--x-paper-dim); text-decoration: none; transition: color .18s var(--x-ease); }
/* 全站链接悬停 = 荷青。这是荷青最大的一个落点，也是「夏」最容易被看见的地方。
 * 分工不重叠：金说「你现在在哪」，青说「你把手指放在了哪」。 */
a:hover { color: var(--x-lotus-soft); }

/* 代码：中文注释与西文混排的行高补偿 */
pre, code, kbd, samp, .code-preview, code-preview {
  font-family: var(--x-mono);
  line-height: 1.85;
}

/* 整站禁用旧版发光文字（common.css 里满屏 text-shadow 蓝光） */
header, header nav a, header nav a:hover, .logo, .section-title,
.search-box button:hover, .card, .btn, h1, h2, h3, .list-item {
  text-shadow: none !important;
}

/* 滚动条：压细、降到 18% 纸白，保留「还能往右看」的提示而不是贴一条亮灰胶带 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(232, 239, 234, .14); }
::-webkit-scrollbar-thumb:hover { background: rgba(232, 239, 234, .26); }
* { scrollbar-width: thin; scrollbar-color: rgba(232, 239, 234,.16) transparent; }

/* ═══════════════ 2. 东方手法：可复用的版式元件 ═══════════════ */

/* 2.1 版心 */
.x-shell {
  width: 100%;
  max-width: var(--x-shell);
  margin: 0 auto;
  padding-inline: var(--x-gutter);
}

/* 2.2 金线：编辑感的分割线，左端浓、右端消隐 */
.x-rule,
.gold-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    rgba(232, 239, 234, .65) 0%,
    rgba(232, 239, 234, .14) 45%,
    transparent 100%);
}

/* 2.3 印章：整站唯一的朱砂，只出现在字标旁边 */
.x-seal,
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--x-serif);
  color: var(--x-paper);
  background: var(--x-seal-bg);
  border-radius: 3px;
  line-height: 1;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(189, 63, 53, .55), 0 2px 10px rgba(189, 63, 53, .22);
}

/* 2.4 竖排：东方版式的 signature 手法 */
.x-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: var(--x-track-3);
}

/* 2.5 稿纸细网格：编辑感的底衬 */
.x-grid-bg {
  background-image:
    linear-gradient(rgba(232, 239, 234, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 239, 234, .028) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* 2.6 活字块：本设计的难忘元素
 * 凸起 = 顶部内高光 + 底部实阴影；hover 压印 = 阴影内翻 + 整体下沉。
 * 入场用 CSS keyframes（配 animation-delay 做阶梯），不用 JS 动画 —— 
 * JS 会在行内写死 transform，把 hover 的下沉顶掉。 */
@keyframes xTypeRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.x-type-block {
  position: relative;
  animation: xTypeRise .52s var(--x-ease) backwards;
  background: linear-gradient(180deg, #16211c 0%, #0f1a16 100%);
  border: 1px solid rgba(232, 239, 234, .08);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(232, 239, 234, .07),
    0 3px 0 rgba(0, 0, 0, .55),
    0 6px 14px rgba(0, 0, 0, .45);
  transition:
    transform .22s var(--x-ease),
    box-shadow .22s var(--x-ease),
    border-color .22s ease,
    color .22s ease;
}
.x-type-block:hover {
  transform: translateY(3px);
  /* 活字块悬停浮起时描边转荷青 —— 像一片叶子被水托起来 */
  border-color: rgba(var(--x-lotus-rgb), .5);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(232, 239, 234, .18);
}

/* 2.7 卡片入场 */
@keyframes xSoftRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.x-rise { animation: xSoftRise .42s var(--x-ease) backwards; }

/* ═══════════════ 3. 全站骨架：页头 ═══════════════ */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  /* 2026-10-01：整体居中（此前继承 common 的 space-between，logo/菜单贴左、
     搜索/登录贴右，宽屏下中间一大片空白）。移动端 768px 断点恢复 space-between。 */
  justify-content: center;
  gap: 20px;
  height: 72px;
  padding: 0 var(--x-gutter);
  background: rgba(5, 5, 6, .82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--x-line-soft);
  box-shadow: none !important;
}

/* 旧版在 header 上挂了 ::after 扫光，删掉 */
header::after { display: none !important; }

/* 字标：崇羲篆體「夏語」内联 SVG，即 logo 本体（无印章、无拉丁名）。
   fill=currentColor —— 悬停时随 .logo 一起转金；尺寸固定不受字号影响。 */
.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--x-paper);
  flex: 0 0 auto;
  transition: color .2s var(--x-ease);
}
.logo:hover { color: var(--x-gold); }
.logo .logo-seal-script { height: 34px; width: auto; display: block; }
/* 2026-09-28：页脚「言」印已应要求移除（footer-title 不再含 .footer-seal） */
/* 旧版字标里那个蓝色渐变方块图标 —— 归零 */
.logo .icon, .logo > i {
  display: none !important;
}

/* 主导航：激活态是一条从左长出来的金线，不是色块 */
#mainNav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}
header nav a {
  position: relative;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--x-paper-dim);
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color .18s var(--x-ease);
}
header nav a:hover {
  color: var(--x-paper);
  background: none !important;
}
header nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 1px;
  background: var(--x-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--x-ease);
}
header nav a:hover::after { transform: scaleX(1); }
header nav a.active {
  color: var(--x-gold) !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
header nav a.active::after { transform: scaleX(1); }

/* 搜索框 */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  /* 2026-10-01：跟随整体居中布局（原 margin-left:auto 会把搜索框推到最右） */
  margin-left: 0;
  background: rgba(22, 22, 26, .72) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color .2s var(--x-ease);
}
.search-box:focus-within {
  border-color: var(--x-line-gold) !important;
  box-shadow: none !important;
}
.search-box input {
  width: 190px;
  height: 100%;
  background: none;
  border: 0;
  outline: 0;
  color: var(--x-paper);
  font-family: var(--x-sans);
  font-size: 13px;
}
.search-box input::placeholder { color: var(--x-paper-faint); }
.search-box button {
  /* 2026-10-01：common.css 多主题区（L4013/L5118）给按钮带 !important 的
     height:32px/padding:0 18px/border-radius:9999px/box-shadow，普通声明压不住，
     按钮被撑成大圆角块凸出胶囊。此处同权重全量压平为「胶囊内的圆形放大镜」。 */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 3px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--x-paper-faint);
  cursor: pointer;
  font-size: 14px;
  transition: color .18s var(--x-ease);
}
.search-box button:hover {
  color: var(--x-gold);
  background: rgba(232, 207, 148, .12) !important;
  transform: none !important;
}

header .right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* 汉堡：三条等宽细线，CSS 绘制，不用 emoji */
.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--x-line-strong);
  border-radius: 0;
  color: var(--x-paper-dim);
  cursor: pointer;
  transition: color .2s var(--x-ease), border-color .2s var(--x-ease);
}
.mobile-menu-btn:hover { color: var(--x-gold); border-color: var(--x-line-gold); }
.mobile-menu-btn::before {
  content: "";
  width: 18px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 -5.5px 0 currentColor, 0 5.5px 0 currentColor;
}

/* ═══════════════ 4. 全站骨架：页脚 ═══════════════ */
.site-footer {
  margin-top: 96px;
  padding: 64px 0 0;
  background: var(--x-ink-950) !important;
  border-top: 1px solid var(--x-line-soft) !important;
}
.footer-content {
  max-width: var(--x-shell);
  margin: 0 auto;
  padding: 0 var(--x-gutter) 48px;
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-title {
  font-family: var(--x-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--x-paper);
  letter-spacing: var(--x-track-2);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--x-line-gold-soft);
}
/* 第一栏的站名用大一号的宋体 */
.footer-col:first-child .footer-title {
  font-size: 22px;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 4px;
}
/* 站名下的一行定位小字：等宽 + 深金，呼应东方编辑感的「注」 */
.footer-sub {
  font-family: var(--x-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--x-gold-deep);
  margin-bottom: 2px;
}
.footer-col a {
  color: var(--x-paper-dim);
  font-size: 14px;
  cursor: pointer;
  transition: color .18s var(--x-ease), padding-left .18s var(--x-ease);
}
.footer-col a:hover { color: var(--x-gold); padding-left: 4px; }
.footer-desc {
  color: var(--x-paper-faint);
  font-size: 13.5px;
  line-height: 1.9;
  margin: 0;
}
.footer-bottom {
  max-width: var(--x-shell);
  margin: 0 auto;
  padding: 20px var(--x-gutter) 28px;
  border-top: 1px solid var(--x-line-soft) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--x-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--x-paper-faint);
}
/* 右侧中文标语用楷体 —— 「注」性质的一句话，左边的 © 版权行保持等宽 */
.footer-bottom span:last-child {
  font-family: var(--x-kai);
  font-size: 13px;
}

/* ═══════════════ 5. 容器与分节 ═══════════════ */
.container {
  max-width: var(--x-shell);
  margin: 0 auto;
  padding: 0 var(--x-gutter);
  min-height: 60vh;
}

/* 分节标题：宋体 + 左端竖金条，替代旧版的 emoji 前缀 */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--x-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--x-paper);
  letter-spacing: var(--x-track-2);
  margin: 64px 0 24px;
  padding: 0;
  border: 0;
}
/* 分节标记：宋体单字 + 一道荷青下线，与 .x-entry-icon 是同一套「活字」语言。
 * 它取代原来直接写在标题文本里的 emoji（文 / 语 / 码 / 辉 那几个字形）——
 * emoji 不受 CSS 控制、渲染成彩色，在这片墨池月白里就是四块杂色斑点；
 * 而道具探针只扫 CSS 颜色，抓不到它们，是最容易「断言全绿但看着没变」的一类残留。 */
.x-sec-mark {
  font-family: var(--x-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--x-lotus);           /* 池底 6.7:1 */
  padding-bottom: 3px;
  border-bottom: 1px solid var(--x-lotus-line);
}
.section-title::before {
  content: "";
  width: 3px;
  height: 22px;
  background: var(--x-gold);
  flex: 0 0 auto;
}
/* 旧版分节标题自带 emoji 图标，统一隐掉换金条 */
.section-title > i, .section-title > em { display: none; }

/* 首页的「—— 」长横收尾装饰（若模板带 <span> 尾部） */
.section-title .x-tail {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--x-line-gold-soft), transparent);
  margin-left: 8px;
}

/* ═══════════════ 6. 通用组件 ═══════════════ */

/* 6.1 按钮：直角、无阴影、金只用于可交互 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  font-family: var(--x-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  border: 1px solid transparent;
  border-radius: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--x-ease), color .2s var(--x-ease),
              border-color .2s var(--x-ease);
}
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 15px; }

/* 主按钮：实心金 + 墨字。hover 提亮，不位移（位移是「卡片 App」语法） */
.btn-primary {
  background: var(--x-gold) !important;
  color: var(--x-ink-950) !important;
  border-color: var(--x-gold) !important;
  font-family: var(--x-serif);
  font-weight: 600;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: var(--x-gold-soft) !important;
  border-color: var(--x-gold-soft) !important;
  transform: none !important;
  filter: none !important;
}
.btn-primary:disabled, .btn-primary.disabled {
  background: var(--x-ink-600) !important;
  color: var(--x-paper-faint) !important;
  border-color: transparent !important;
  cursor: not-allowed;
}

/* 描边按钮：纸白描边，hover 转金 */
.btn-outline {
  background: none !important;
  color: var(--x-paper-dim) !important;
  border-color: var(--x-line-strong) !important;
  box-shadow: none !important;
}
.btn-outline:hover {
  color: var(--x-gold) !important;
  border-color: var(--x-line-gold) !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 幽灵按钮 */
.btn-ghost {
  background: none !important;
  color: var(--x-paper-dim) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.btn-ghost:hover {
  color: var(--x-gold) !important;
  background: rgba(232, 239, 234, .07) !important;
  transform: none !important;
}

.btn-danger { background: var(--x-cinnabar) !important; color: var(--x-paper) !important; border-color: var(--x-cinnabar) !important; }
.btn-danger:hover { background: var(--x-cinnabar-soft) !important; }

/* 6.2 卡片：直角 + 1px 描边，靠描边不靠投影 */
.card {
  position: relative;
  background: rgba(22, 22, 26, .62) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  padding: 20px;
  box-shadow: none !important;
  transition: border-color .22s var(--x-ease), background .22s var(--x-ease);
}
.card:hover {
  border-color: var(--x-line-gold-soft) !important;
  background: rgba(28, 28, 33, .72) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* 旧版卡片右上角的装饰折角，删掉 */
.card-corner { display: none !important; }

.card .title { color: var(--x-paper); font-size: 15px; font-weight: 500; line-height: 1.5; }
.card .meta, .list-item .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-family: var(--x-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--x-paper-faint);
}

/* 6.3 列表项：编辑感的条目，左侧一条 hover 才亮的金线 */
.list-item {
  position: relative;
  padding: 16px 4px 16px 16px;
  border-bottom: 1px solid var(--x-line-soft);
  cursor: pointer;
  transition: padding-left .22s var(--x-ease), background .22s var(--x-ease);
}
.list-item::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 2px;
  background: var(--x-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .24s var(--x-ease);
}
.list-item:hover { padding-left: 22px; background: rgba(232, 239, 234, .03); }
.list-item:hover::before { transform: scaleY(1); }
.list-item .title {
  font-family: var(--x-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--x-paper);
  line-height: 1.55;
  transition: color .18s var(--x-ease);
}
.list-item:hover .title { color: var(--x-gold); }

/* 6.4 标签 */
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: .04em;
  background: none;
  border: 1px solid var(--x-line-strong);
  border-radius: 0;
  color: var(--x-paper-dim);
}
.tag-blue, .tag-green, .tag-purple, .tag-orange, .tag-red {
  border-color: var(--x-line-gold-soft);
  color: var(--x-gold);
  background: none;
}

/* 6.5 筛选条 / 排序按钮：激活态金实心，其余描边 */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  margin: 0;
  background: none !important;
  border: 0;
  border-bottom: 1px solid var(--x-line-soft) !important;
  border-radius: 0 !important;
}
.sort-btn, .tab {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  color: var(--x-paper-dim);
  background: none !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: color .18s var(--x-ease), border-color .18s var(--x-ease), background .18s var(--x-ease);
}
.sort-btn:hover, .tab:hover { color: var(--x-paper); border-color: var(--x-line-strong) !important; }
.sort-btn.active, .sort-btn.on, .tab.active, .tab.on {
  color: var(--x-ink-950) !important;
  background: var(--x-gold) !important;
  border-color: var(--x-gold) !important;
  font-weight: 600;
}

/* 6.6 统计卡：数字用宋体大号，去掉旧版彩色图标底块 */
.ancient-stats, .stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--x-line-soft);
  border: 1px solid var(--x-line-soft);
  margin: 56px 0;
}
.ancient-stat-card, .stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 22px;
  background: var(--x-ink-900) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ancient-stat-card:hover { transform: none !important; border-color: transparent !important; }
.ancient-stat-num, .stat-card .num {
  font-family: var(--x-serif);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  color: var(--x-gold);
  letter-spacing: 0;
}
.ancient-stat-label, .stat-card .label {
  font-size: 13px;
  color: var(--x-paper-dim);
  margin-top: 6px;
  letter-spacing: .06em;
}

/* 6.7 空态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 72px 24px;
  text-align: center;
  border: 1px dashed var(--x-line-strong);
  background: none;
}
.empty-state .es-icon { font-size: 30px; opacity: .5; }
.empty-state .es-title {
  font-family: var(--x-serif);
  font-size: 17px;
  color: var(--x-paper-soft);
  letter-spacing: var(--x-track-2);
}
.empty-state .es-desc { font-size: 13.5px; color: var(--x-paper-faint); font-family: var(--x-kai); }
.empty-state .es-action {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--x-gold);
  border-bottom: 1px solid var(--x-line-gold);
  padding-bottom: 2px;
  cursor: pointer;
}
.empty-state .es-action:hover { color: var(--x-gold-soft); }

/* 6.8 表单控件 */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], textarea, select, .input {
  background: rgba(8, 8, 10, .8) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  color: var(--x-paper) !important;
  font-family: var(--x-sans);
  font-size: 14px;
  padding: 10px 12px;
  outline: 0;
  box-shadow: none !important;
  transition: border-color .2s var(--x-ease);
}
input:focus, textarea:focus, select:focus, .input:focus {
  border-color: var(--x-line-gold) !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: var(--x-paper-faint); }

/* 6.9 分页 */
.pagination { display: flex; gap: 6px; justify-content: center; margin: 40px 0; }
.pg-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  background: none !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  color: var(--x-paper-dim);
  font-family: var(--x-mono);
  font-size: 13px;
  cursor: pointer;
  box-shadow: none !important;
  transition: color .18s var(--x-ease), border-color .18s var(--x-ease);
}
.pg-btn:hover { color: var(--x-paper); border-color: var(--x-line-strong) !important; }
.pg-btn.active, .pg-btn.on {
  color: var(--x-ink-950) !important;
  background: var(--x-gold) !important;
  border-color: var(--x-gold) !important;
}

/* 6.10 弹窗 */
.modal {
  background: rgba(4, 4, 6, .72) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-box, .modal-content {
  background: var(--x-ink-800) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .68) !important;
  padding: 28px;
}
.modal-box h3 {
  font-family: var(--x-serif);
  font-size: 21px;
  color: var(--x-paper);
  margin-bottom: 20px;
  letter-spacing: var(--x-track-2);
}
.modal-box input { width: 100%; margin-bottom: 12px; }
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--x-paper-faint);
  font-size: 12px;
}
.oauth-divider::before, .oauth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--x-line-soft);
}
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 40px;
  background: none; border: 1px solid var(--x-line);
  border-radius: 0; color: var(--x-paper-dim);
  font-size: 13.5px; cursor: pointer;
  transition: border-color .2s var(--x-ease), color .2s var(--x-ease);
}
.oauth-btn:hover { border-color: var(--x-line-gold); color: var(--x-gold); }

/* 验证码：纸白字压在墨底上，等宽字体 */
.captcha-box {
  display: flex; gap: 10px; align-items: center;
  margin: 4px 0 14px;
}
.captcha-code {
  font-family: var(--x-mono);
  font-size: 19px;
  letter-spacing: var(--x-track-3);
  color: var(--x-gold);
  background: rgba(232, 239, 234, .07);
  border: 1px solid var(--x-line-gold-soft);
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* 6.11 头像 */
.avatar {
  border-radius: 0 !important;
  border: 1px solid var(--x-line);
  background: var(--x-ink-700);
  color: var(--x-paper-soft);
  font-family: var(--x-serif);
}

/* 6.12 提示条 */
.toast {
  background: var(--x-ink-700) !important;
  border: 1px solid var(--x-line) !important;
  border-left: 2px solid var(--x-gold) !important;
  border-radius: 0 !important;
  color: var(--x-paper) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6) !important;
  font-size: 13.5px;
}

/* 6.13 悬浮操作件 */
.back-to-top, .theme-toggle {
  width: 40px; height: 40px;
  background: var(--x-ink-700) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  color: var(--x-paper-dim) !important;
  box-shadow: none !important;
  transition: color .2s var(--x-ease), border-color .2s var(--x-ease);
}
.back-to-top:hover, .theme-toggle:hover {
  color: var(--x-gold) !important;
  border-color: var(--x-line-gold) !important;
  transform: none !important;
}

/* 6.14 浮动面板 */
/* 开关按钮 = 活字方块：宋体单字（快），与快捷入口的 文/星/讯/榜 同一语汇。
   2026-09-28：原先写死的「录」来历不明（早期残留），换成「快」。 */
.floating-panel .floating-toggle {
  font-family: var(--x-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--x-gold);
}
.floating-panel .floating-toggle:hover {
  color: var(--x-gold-soft, var(--x-gold));
  transform: none;
}
.floating-panel .floating-toggle,
.floating-card {
  background: var(--x-ink-800) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.floating-card-title {
  font-family: var(--x-serif);
  font-size: 13.5px;
  color: var(--x-paper-soft);
  letter-spacing: var(--x-track-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--x-line-soft);
  margin-bottom: 10px;
}
.checkin-num { font-family: var(--x-serif); color: var(--x-gold); }
.quick-links a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 4px;
  font-size: 13.5px;
  color: var(--x-paper-dim);
  border-bottom: 1px solid var(--x-line-soft);
  cursor: pointer;
  transition: color .18s var(--x-ease), padding-left .18s var(--x-ease);
}
.quick-links a:hover { color: var(--x-gold); padding-left: 8px; }

/* 6.15 公告跑马灯 */
.announcement-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0 0;
  padding: 14px 20px;
  background: rgba(232, 239, 234, .05) !important;
  border: 1px solid var(--x-line-gold-soft) !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.announcement-icon { color: var(--x-gold); font-size: 15px; flex: 0 0 auto; }
.announcement-track { flex: 1; overflow: hidden; }
.announcement-content {
  display: inline-flex;
  gap: 48px;
  white-space: nowrap;
  animation: xMarquee 30s linear infinite;
  font-size: 13.5px;
  font-family: var(--x-kai);
  color: var(--x-paper-dim);
}
.announcement-content:hover { animation-play-state: paused; }
@keyframes xMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ann-item { display: inline-flex; align-items: center; gap: 6px; }
.ann-dot { color: var(--x-gold); font-size: 9px; }
.ann-type-important .ann-dot { color: var(--x-cinnabar-soft); }

/* ═══════════════ 7. 首页 ═══════════════ */

/* 7.1 首屏：稿纸网格 + 左上不对称晕光 + 竖排侧标 + 活字盘 */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 6fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
  padding: 88px 0 96px;
  border-bottom: 1px solid var(--x-line-soft);
  background-image:
    linear-gradient(rgba(232, 239, 234, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 239, 234, .028) 1px, transparent 1px);
  background-size: 48px 48px;
  overflow: hidden;
}

/* 竖排侧标：东方版式的 signature 手法，桌面专属 */
.hero-vertical {
  align-self: center;
  justify-self: center;
}
.hero-vertical span {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: var(--x-track-3);
  font-family: var(--x-kai);
  font-size: 13.5px;
  line-height: 1;
  color: rgba(211, 189, 120, .68);   /* 竖排侧标是「光」不是「字」，归月晕金 */
  user-select: none;
}
.hero-vertical::after {
  content: "";
  display: block;
  width: 1px;
  height: 44px;
  margin: 14px auto 0;
  background: linear-gradient(180deg, rgba(211, 189, 120, .5), transparent);
}
/* 金色晕光：只在左上，制造不对称氛围 —— 不做对称渐变 */
.hero::before {
  content: "";
  position: absolute;
  left: -10%;
  top: -30%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  /* 荷塘月色：这一块原本是暖金的「日间光斑」，现改为月白。
   * 它和下面新增的月轮是同一道光，header 因此成为整页最先看见「月」的地方。 */
  background: radial-gradient(circle, var(--x-paper) 0%, transparent 68%);
  opacity: .12;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero-content { max-width: 620px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  font-family: var(--x-mono);
  font-size: 11.5px;
  letter-spacing: var(--x-track-3);
  color: var(--x-paper-faint);
  text-transform: none;
}
.hero-eyebrow .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--x-gold);
  animation: xPulse 2.4s var(--x-ease) infinite;
}
@keyframes xPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .32; }
}

/* 两级标题：起手灰 + 主张纸白。东方编辑感的核心手法 */
.hero h1 {
  font-family: var(--x-serif);
  font-size: clamp(38px, 5.2vw, 82px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--x-paper);
  margin: 0 0 28px;
}
/* 第一行（起手）弱化成 paper-faint，第二行（主张）保持纸白 */
.hero h1 .l1 { display: block; font-size: clamp(20px, 2.6vw, 34px); font-weight: 400; color: var(--x-paper-faint); margin-bottom: 8px; }
.hero h1 .l2 { display: block; }

.hero .x-rule, .hero .gold-rule { margin: 30px 0; max-width: 520px; }

.hero-desc {
  max-width: 540px;
  font-size: 15.5px;
  line-height: 2;
  color: var(--x-paper-dim);
  margin: 0 0 34px;
}
.hero-desc b { color: var(--x-gold); font-weight: 600; }

.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.hero-btns .btn { height: 48px; padding: 0 30px; font-size: 15px; }

/* 常用关键字：直接做成活字块，替代旧版的小 kbd 药丸 */
.hero-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--x-line-soft);
}
.hero-keys > span:first-child {
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: var(--x-track-3);
  color: var(--x-paper-faint);
  margin-right: 6px;
}
.hero-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--x-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--x-paper-soft) !important;
  background: linear-gradient(180deg, #16211c 0%, #0f1a16 100%) !important;
  border: 1px solid rgba(232, 239, 234, .08) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 239, 234, .07),
    0 3px 0 rgba(0, 0, 0, .55),
    0 6px 14px rgba(0, 0, 0, .45) !important;
  transition: transform .22s var(--x-ease), box-shadow .22s var(--x-ease),
              border-color .22s var(--x-ease), color .22s var(--x-ease);
  animation: xTypeRise .52s var(--x-ease) backwards;
}
.hero-keys kbd:hover {
  transform: translateY(3px);
  color: var(--x-gold) !important;
  border-color: rgba(211, 189, 120, .55) !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(232, 239, 234, .18) !important;
}
/* 阶梯入场：8 个字依次落位 */
.hero-keys kbd:nth-child(2)  { animation-delay: .30s; }
.hero-keys kbd:nth-child(3)  { animation-delay: .35s; }
.hero-keys kbd:nth-child(4)  { animation-delay: .40s; }
.hero-keys kbd:nth-child(5)  { animation-delay: .45s; }
.hero-keys kbd:nth-child(6)  { animation-delay: .50s; }
.hero-keys kbd:nth-child(7)  { animation-delay: .55s; }
.hero-keys kbd:nth-child(8)  { animation-delay: .60s; }
.hero-keys kbd:nth-child(9)  { animation-delay: .65s; }
.hero-keys kbd:nth-child(10) { animation-delay: .70s; }

/* ── 7.1b 抗旧层裁决 ────────────────────────────────────────────────
 * common.css 内部对 .hero 有 11 处互相覆盖的定义，其中 4 处带 !important：
 *   background: linear-gradient(135deg,#0c1929,#1e3a5f 30%,#3b82f6) !important
 *   border-radius: 18/20/24px !important  ·  .hero h1 蓝色渐变文字
 *   .hero::before 蓝色 radial + heroGlow 动画，.hero::after 白色巨圆
 * 此前由 theme.css / premium.css 靠「更晚加载 + !important」压住；那两层归档后
 * 旧定义重新胜出（截图上那块蓝渐变圆角大横幅）。本块接手最终裁决权。 */
.hero {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 6fr) minmax(0, 5fr) !important;
  gap: 56px !important;
  align-items: center !important;
  padding: 88px 0 96px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--x-line-soft) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(232, 239, 234, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 239, 234, .028) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  box-shadow: none !important;
  text-align: left !important;
  color: var(--x-paper-dim) !important;
  overflow: hidden !important;
}
/* 旧的星点/蓝光晕伪元素一律作废，只留左上金色不对称晕光 */
.hero::before {
  top: -30% !important;
  left: -10% !important;
  right: auto !important;
  bottom: auto !important;
  width: 620px !important;
  height: 620px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--x-paper) 0%, transparent 68%) !important;
  opacity: .12 !important;
  filter: blur(110px) !important;
  animation: none !important;
}
.hero::after { display: none !important; }

/* h1 被旧层设成「透明文字 + 蓝色渐变裁切」，必须显式夺回填充色 */
.hero h1 {
  font-family: var(--x-serif) !important;
  font-size: clamp(38px, 5.2vw, 82px) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: .01em !important;
  margin: 0 0 28px !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
.hero h1 .l1 {
  display: block !important;
  font-size: clamp(20px, 2.6vw, 34px) !important;
  font-weight: 400 !important;
  color: var(--x-paper-faint) !important;
  margin-bottom: 8px !important;
  -webkit-text-fill-color: currentColor !important;
}
.hero h1 .l2 {
  display: block !important;
  color: var(--x-paper) !important;
  -webkit-text-fill-color: currentColor !important;
}
/* 旧层给 .hero p 设了 opacity/.9 与左右 auto 居中 */
.hero .hero-desc {
  max-width: 540px !important;
  margin: 0 0 34px !important;
  opacity: 1 !important;
  font-size: 15.5px !important;
  line-height: 2 !important;
  color: var(--x-paper-dim) !important;
  text-align: left !important;
}
.hero .hero-eyebrow { text-align: left !important; }
.hero .hero-btns { flex-direction: row !important; justify-content: flex-start !important; }
.hero .hero-keys { justify-content: flex-start !important; }

/* 7.2 Hero 代码卡：终端窗改成「稿纸上的代码块」 */
.hero-visual {
  background: var(--x-ink-800) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: rgba(5, 5, 6, .6) !important;
  border-bottom: 1px solid var(--x-line-soft) !important;
}
.term-bar .t-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  opacity: .55;
}
.term-bar .t-title {
  margin-left: auto;
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--x-paper-faint);
}
.code-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--x-line-soft);
}
.code-tabs button, .code-tabs .tab {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 16px;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  color: var(--x-paper-faint) !important;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: none !important;
  transition: color .18s var(--x-ease), border-color .18s var(--x-ease);
}
.code-tabs button:hover { color: var(--x-paper-dim) !important; }
.code-tabs button.on {
  color: var(--x-gold) !important;
  border-bottom-color: var(--x-gold) !important;
  background: none !important;
}
.hero-visual pre {
  margin: 0;
  padding: 20px 18px;
  background: none !important;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--x-paper-soft);
  overflow-x: auto;
}
.code-out {
  padding: 14px 18px;
  border-top: 1px solid var(--x-line-soft);
  background: rgba(5, 5, 6, .5);
  font-family: var(--x-mono);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--x-paper-dim);
}
.code-out .ok { color: var(--x-gold); margin-right: 4px; }

/* 7.3 旧版 token 高亮别名（highlight-cp.js 输出的类） */
.code-kw  { color: var(--x-gold); }
.code-str { color: #9ccfa0; }
.code-num { color: #c4b5fd; }
.code-fn  { color: #8fc7e8; }
.code-cm  { color: var(--x-paper-faint); font-style: italic; }

/* 7.4 核心特性卡 */
.feat-card {
  position: relative;
  padding: 26px 22px;
  background: rgba(22, 22, 26, .55) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color .22s var(--x-ease), background .22s var(--x-ease);
}
.feat-card:hover {
  border-color: var(--x-line-gold-soft) !important;
  transform: none !important;
  box-shadow: none !important;
}
.feat-card .f-icon {
  font-family: var(--x-mono) !important;
  font-size: 11px !important;
  letter-spacing: var(--x-track-3);
  color: var(--x-gold) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 16px !important;
  opacity: .8;
}
.feat-card h3 {
  font-family: var(--x-serif);
  font-size: 17px;
  color: var(--x-paper);
  margin: 0 0 10px;
  letter-spacing: var(--x-track-2);
}
.feat-card p { font-size: 13.5px; line-height: 1.85; color: var(--x-paper-dim); margin: 0; }

/* 7.5 网格 */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* 7.6 代码预览块 */
.code-preview {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(5, 5, 6, .6);
  border: 1px solid var(--x-line-soft);
  border-radius: 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--x-paper-faint);
  max-height: 92px;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 7.7 入场动效（.pv 由 index.html 的 IntersectionObserver 加 .in） */
.pv { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--x-ease), transform .55s var(--x-ease); }
.pv.in { opacity: 1; transform: none; }

/* ═══════════════ 8. 内页：文档 / 详情 / Markdown ═══════════════ */
.docs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding: 48px 0;
}
.docs-sidebar {
  position: sticky;
  top: 96px;
  border-right: 1px solid var(--x-line-soft);
  padding-right: 20px;
}
.docs-sidebar .sidebar-title {
  font-family: var(--x-serif);
  font-size: 15px;
  color: var(--x-paper);
  letter-spacing: var(--x-track-2);
  margin-bottom: 16px;
}

/* 文档侧栏 / 搜索框
 * docs.js 自己在 innerHTML 里塞了 <style>，文档顺序上晚于本层，
 * 因此这里对颜色与描边的修正一律带 !important */
.docs-sidebar-title {
  font-family: var(--x-serif) !important;
  font-size: 18px !important;
  color: var(--x-paper) !important;
  letter-spacing: var(--x-track-2);
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--x-line-gold-soft);
}
.docs-search-box input {
  width: 100%;
  padding: 9px 0 !important;
  font-size: 13.5px;
  color: var(--x-paper);
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color .2s var(--x-ease);
}
.docs-search-box input::placeholder { color: var(--x-paper-faint); }
.docs-search-box input:focus { outline: none; border-bottom-color: var(--x-gold) !important; }

/* 文档欢迎卡：改直角 + 墨底 + 金线，hover 用「压印」不用蓝色发光 */
.doc-welcome .doc-welcome-card,
.doc-welcome .doc-welcome-card:hover {
  background: rgba(22, 22, 26, .45) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .22s var(--x-ease), background .22s var(--x-ease);
}
.doc-welcome .doc-welcome-card:hover {
  border-color: var(--x-line-gold-soft) !important;
  background: rgba(232, 239, 234, .04) !important;
}
.doc-welcome .doc-welcome-card h3 {
  color: var(--x-paper) !important;
  letter-spacing: var(--x-track-2);
}
.doc-welcome .doc-welcome-card p { color: var(--x-paper-dim) !important; }
/* 活字图标：宋体单字，替代原来的 emoji */
.card-icon-sigil {
  font-family: var(--x-serif);
  font-size: 22px !important;
  line-height: 1;
  color: var(--x-gold);
  margin-bottom: 12px;
}
.doc-welcome-hero h1 {
  font-family: var(--x-serif) !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  color: var(--x-paper) !important;
  letter-spacing: var(--x-track-2);
}
.doc-welcome-hero p { color: var(--x-paper-dim) !important; }
.docs-breadcrumb .breadcrumb-item { color: var(--x-paper-dim); cursor: pointer; }
.docs-breadcrumb .breadcrumb-item:hover { color: var(--x-gold); }
.docs-breadcrumb .breadcrumb-current { color: var(--x-paper); }
/* 侧栏头与选中文档项：旧层给的是 rgba(59,130,246,.08/.15) 蓝微底 */
.docs-sidebar-header { background: none !important; background-image: none !important; border-bottom-color: var(--x-line-soft) !important; }
.doc-item.active, .docs-sidebar .active {
  background: rgba(232, 239, 234, .06) !important;
  background-image: none !important;
  border-left: 2px solid var(--x-gold) !important;
  color: var(--x-paper) !important;
}

/* Markdown 正文：编辑感的关键 —— 正文限宽、行高 2.0、标题宋体 */
.markdown-content, .page-content, .detail-content {
  font-size: 15.5px;
  line-height: 2.05;
  color: var(--x-paper-dim);
  max-width: 72ch;
}
.markdown-content h1, .page-content h1, .detail-content h1,
.markdown-content h2, .page-content h2, .detail-content h2 {
  font-family: var(--x-serif);
  font-size: 26px;
  color: var(--x-paper);
  margin: 40px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--x-line-gold-soft);
  letter-spacing: var(--x-track-2);
}
.markdown-content h3, .page-content h3, .detail-content h3 {
  font-family: var(--x-serif);
  font-size: 20px;
  color: var(--x-paper-soft);
  margin: 32px 0 12px;
  letter-spacing: var(--x-track-2);
}
.markdown-content p, .page-content p, .detail-content p { margin: 0 0 18px; }
.markdown-content a, .page-content a, .detail-content a {
  color: var(--x-gold);
  border-bottom: 1px solid var(--x-line-gold-soft);
}
.markdown-content a:hover, .page-content a:hover { border-bottom-color: var(--x-gold); }
.markdown-content blockquote, .page-content blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--x-gold);
  color: var(--x-paper-soft);
  background: none;
}
.markdown-content ul, .markdown-content ol { padding-left: 26px; margin: 0 0 18px; }
.markdown-content li { margin-bottom: 8px; }
.markdown-content code {
  padding: 2px 6px;
  background: rgba(232, 239, 234, .09);
  border: 1px solid var(--x-line-gold-soft);
  border-radius: 0;
  font-size: 13.5px;
  color: var(--x-gold-soft);
}
.markdown-content pre {
  margin: 24px 0;
  padding: 20px;
  background: var(--x-ink-950) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.9;
}
.markdown-content pre code { background: none; border: 0; padding: 0; color: var(--x-paper-soft); }
.markdown-content table, .tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
.markdown-content th, .tbl th {
  text-align: left;
  padding: 11px 14px;
  background: rgba(232, 239, 234, .06);
  border-bottom: 1px solid var(--x-line-gold-soft);
  color: var(--x-paper);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .04em;
}
.markdown-content td, .tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--x-line-soft);
  color: var(--x-paper-dim);
}
.markdown-content tr:hover td, .tbl tr:hover td { background: rgba(232, 239, 234, .02); }

/* 页头 hero（站点页 / 列表页通用的小页头） */
.page-hero, .hero.small {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--x-line-soft);
}
.page-hero h1, .hero.small h1 {
  font-family: var(--x-serif);
  font-size: clamp(26px, 3.2vw, 40px);
  color: var(--x-paper);
  letter-spacing: var(--x-track-2);
}
.page-hero p, .hero.small p { color: var(--x-paper-dim); font-size: 14.5px; margin-top: 10px; }

/* ═══════════════ 9. 论坛 / 代码广场 ═══════════════ */
.forum-board, .board-item {
  background: rgba(22, 22, 26, .55) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color .22s var(--x-ease);
}
.forum-board:hover, .board-item:hover { border-color: var(--x-line-gold-soft) !important; }
.board-title, .forum-board .name {
  font-family: var(--x-serif);
  font-size: 16px;
  color: var(--x-paper);
  letter-spacing: var(--x-track-2);
}
.forum-board .desc, .board-desc { font-size: 13px; color: var(--x-paper-faint); }

/* 帖子/主题条目 */
.topic-item, .thread-item {
  padding: 18px 4px 18px 16px;
  border-bottom: 1px solid var(--x-line-soft);
  cursor: pointer;
  position: relative;
  transition: padding-left .22s var(--x-ease), background .22s var(--x-ease);
}
.topic-item::before, .thread-item::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 2px; background: var(--x-gold);
  transform: scaleY(0); transform-origin: top;
  transition: transform .24s var(--x-ease);
}
.topic-item:hover, .thread-item:hover { padding-left: 22px; background: rgba(232, 239, 234, .03); }
.topic-item:hover::before, .thread-item:hover::before { transform: scaleY(1); }

/* 活跃用户 / 排行榜 */
.rank-item, .active-user-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--x-line-soft);
}
.rank-num {
  font-family: var(--x-serif);
  font-size: 16px;
  color: var(--x-gold);
  min-width: 24px;
}

/* ═══════════════ 10. 内页骨架 ═══════════════
 * 文档 / 博客 / 论坛 / 代码广场 / 下载 六类内页此前各自重复同一套 Bootstrap 骨架：
 *   <div class="section-title">语 讨论论坛</div>
 *   <div class="filter-bar"><button class="sort-btn active">星 星标</button></div>
 *   <div class="grid3">…卡片墙…</div>
 * 六个页面因此长得像同一个模子，且**语义全靠 emoji 承担**。
 * 这里给出唯一的编辑感骨架，六类页面统一改用（改结构，不是改颜色）。 */

/* 10.1 内页头：小标签 + 宋体大标题 + 右侧动作 + 金线，取代旧实色横幅 */
.x-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 28px;
  padding: 54px 0 26px;
  border-bottom: 1px solid var(--x-line-soft);
}
.x-page-eyebrow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--x-gold-deep);
}
.x-page-eyebrow .bar { width: 24px; height: 1px; background: var(--x-gold); flex: none; }
.x-page-title {
  grid-column: 1;
  font-family: var(--x-serif);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.25;
  letter-spacing: var(--x-track-2);
  color: var(--x-paper);
}
.x-page-actions {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}
/* 引导语：标题下方一行，不用色块 */
.x-page-lede {
  grid-column: 1 / -1;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--x-paper-dim);
}

/* 10.1b 分节标题：宋体 + 左侧金线，取代 `<h3><span class="title-icon">火</span>` */
.x-section { margin-top: 64px; }
.x-section:first-of-type { margin-top: 44px; }
.x-section-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--x-line-soft);
}
.x-section-title::before {
  content: "";
  width: 3px;
  height: 18px;
  background: var(--x-gold);
  flex: none;
  align-self: center;
}
.x-section-title h3, .x-section-title .h {
  font-family: var(--x-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: var(--x-track-2);
  color: var(--x-paper);
}
.x-section-title .x-tail {
  margin-left: auto;
  font-family: var(--x-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--x-paper-faint);
  text-decoration: none;
}
.x-section-title .x-tail:hover { color: var(--x-lotus-soft); }

/* 10.2 筛选 / 排序：文字链，激活态是金线，不是实心色块 */
.x-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  padding: 18px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--x-line-soft);
}
.x-filter-label {
  font-family: var(--x-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--x-paper-faint);
}
.x-filter button {
  padding: 2px 0;
  font-size: 13.5px;
  color: var(--x-paper-dim);
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color .18s var(--x-ease), border-color .18s var(--x-ease);
}
/* 筛选条：悬停是荷青、选中是月晕金。
 * 一道横线是这套版式的签名，所以「选中」只能有一个金 —— 青色不许争。 */
.x-filter button:hover { color: var(--x-lotus-soft); }
.x-filter button.active {
  color: var(--x-gold) !important;
  border-bottom-color: var(--x-gold) !important;
}

/* 10.3 条目列表：左侧竖序号 + hover 亮起的金线，取代卡片墙 */
.x-entry-list { display: flex; flex-direction: column; }
.x-entry {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--x-line-soft);
  cursor: pointer;
  transition: padding-left .22s var(--x-ease), background .22s var(--x-ease);
}
.x-entry::before {
  content: ""; position: absolute; left: 0; top: 20px; bottom: 20px;
  width: 2px; background: var(--x-gold);
  transform: scaleY(0); transform-origin: top;
  transition: transform .24s var(--x-ease);
}
.x-entry:hover { padding-left: 20px; background: rgba(232, 239, 234, .03); }
.x-entry:hover::before {
  transform: scaleY(1);
  /* 露光：提一档明度，不是加辉光。设计原则仍是「层级靠描边与明度」 */
  background: var(--x-gold-soft);
}
.x-entry-num {
  font-family: var(--x-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--x-paper-faint);
  transition: color .22s var(--x-ease);
}
.x-entry:hover .x-entry-num { color: var(--x-gold-deep); }
.x-entry-body { min-width: 0; }
/* 条目左侧的「活字」单字标记（论坛版块用，替代原 emoji 图标） */
/* 活字标记：荷塘月色里它就是「荷叶」。
 * 两重理由换成荷青 ——
 *   意象上：条目列表出现频率最高的一枚单字，让它承担「夏」的颜色，
 *           绿色才真正铺得开；金继续留给分隔线与可交互。
 *   原则上：金只给可交互，而它不是。 */
.x-entry-icon {
  font-family: var(--x-serif);
  font-size: 22px;
  line-height: 1;
  text-align: center;
  color: var(--x-lotus);          /* 卡底 6.5:1，22px 非粗体按正文级要求 */
  transition: color .22s var(--x-ease);
}
.x-entry:hover .x-entry-icon { color: var(--x-lotus-soft); }
.x-entry-title {
  font-family: var(--x-serif);
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: var(--x-track-2);
  color: var(--x-paper);
  transition: color .22s var(--x-ease);
}
.x-entry-title a { color: inherit; text-decoration: none; }
.x-entry:hover .x-entry-title { color: var(--x-gold); }
.x-entry-sub {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--x-paper-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x-entry-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--x-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--x-paper-faint);
  white-space: nowrap;
}
.x-entry-meta .dot { width: 3px; height: 3px; background: var(--x-line-strong); flex: none; }

/* 带封面图的条目：仍是同一套骨架，只在序号与正文之间插一格缩略图。
 * 博客广场放弃「卡片墙」是有意为之 —— 卡片墙六个页面长一个样，
 * 但封面是博客的信息密度来源，不能全丢。 */
.x-entry.x-entry-media { grid-template-columns: 52px 132px minmax(0, 1fr) auto; }
.x-entry-thumb {
  width: 132px;
  height: 86px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--x-line);
  filter: grayscale(.15) contrast(1.02);
  transition: border-color .22s var(--x-ease), filter .22s var(--x-ease);
}
.x-entry:hover .x-entry-thumb { border-color: var(--x-line-gold-soft); filter: grayscale(0) contrast(1.04); }
/* 无配图时的占位：墨底 + 宋体分类名，不用旧的彩色 emoji 渐变图 */
.x-entry-thumb.x-entry-thumb-fallback {
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  background: linear-gradient(160deg, #16211c 0%, #0f1a16 100%);
}
.x-entry-thumb.x-entry-thumb-fallback span {
  font-family: var(--x-serif);
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--x-gold-deep);
}

/* 置顶标记：不用钉子符号，改用一枚小印章 */
.x-pin {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px 2px;
  font-family: var(--x-serif);
  font-size: 11.5px;
  letter-spacing: .06em;
  /* 朱砂底 + 白字用 --x-seal-bg 而不是 --x-cinnabar：
   * #c1443a 上白字只有 4.45:1，差一点点不达 AA；#bd3f35 上白字 4.71:1。
   * 视觉几乎无差别，但一个是「能看见」一个是「合规」。 */
  color: var(--x-paper);
  background: var(--x-seal-bg);
  border-radius: 2px;
  vertical-align: 1px;
}
/* 等级徽章：common.css 的 `.level` 是「白字压彩色底」，可 lv1 灰 / lv2 绿 / lv4 金
 * 三档只有 1.74–2.23:1 —— 不是不好看，是根本看不清。
 * 这批底色全是**亮底**，一律改墨字（各档在 --x-ink-900 上都 ≥5:1）。 */
.level.lv1, .level.lv2, .level.lv3, .level.lv4, .level.lv5, .level.lv6 {
  color: var(--x-ink-900) !important;
  border-radius: 2px !important;
}
/* 面包屑分隔符：docs.js 注入的样式用 var(--border)，其值在墨底上接近纯黑，
 * 压在深色页头上对比度只有 1.22:1。分隔符也是内容，得起码看得见。 */
.breadcrumb-sep { color: var(--x-paper-faint) !important; }

/* 语义色标签：common.css 用 `!important` 把 .tag-green/#007a4d、.tag-red/#991b1b
 * 这类**浅底专用深字**压上来，可底色是 6%~12% 的半透明渐变，压到墨底上还是近黑 ——
 * 深绿配近黑只有 3.5:1。底色不改（那点绿晕是想要的意思），只把文字换成墨底可用的亮档。 */
.tag-blue, .tag-green, .tag-red, .tag-orange, .tag-purple {
  color: var(--x-paper-soft) !important;
}
.tag-blue   { color: var(--x-gold-soft) !important; }
.tag-green  { color: #5fd39a !important; }   /* 亮玉色：墨底上 10:1 */
.tag-red    { color: #f08b84 !important; }
.tag-orange, .tag-purple { color: var(--x-gold-soft) !important; }

/* 头像兜底：金三档渐变底 + 白字只有 1.74:1，改墨字（金底上 9.6:1） */
.avatar-fallback { color: var(--x-ink-900) !important; }

/* 条目右侧的「继续阅读」：平时隐形，hover 才淡入——编辑型版式的常规手法 */
.x-entry-cta {
  color: var(--x-gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s var(--x-ease), transform .22s var(--x-ease);
}
.x-entry:hover .x-entry-cta { opacity: 1; transform: translateX(0); }

/* 10.4 论坛遗留彩色块收编
 * 这些定义在 bbs.js 注入的 <style> 里，文档顺序晚于本层，故一律带 !important。
 * 收编目标：不再有「蓝色发光 / 橙金渐变徽章 / 彩色圆头像」这三类与编辑感无关的元素。 */
.forum-stat-card {
  background: rgba(22, 22, 26, .45) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.forum-stat-card:hover { border-color: var(--x-line-gold-soft) !important; }
.forum-stat-card::before { display: none !important; }
.forum-stat-icon {
  width: 46px !important;
  height: 46px !important;
  font-family: var(--x-serif) !important;
  font-size: 20px !important;
  color: var(--x-gold) !important;
  background: none !important;
  border: 1px solid var(--x-line-gold-soft) !important;
  border-radius: 0 !important;
  filter: none !important;
}
.forum-stat-num {
  font-family: var(--x-serif) !important;
  color: var(--x-paper) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.essence-card {
  background: rgba(22, 22, 26, .45) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.essence-card:hover { border-color: var(--x-line-gold-soft) !important; }
.essence-card::before { display: none !important; }
/* 「精华」徽章：与 .x-pin 同源，用朱砂小印章，不用橙金渐变块 */
.essence-badge {
  padding: 1px 7px 2px !important;
  font-family: var(--x-serif) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: var(--x-paper) !important;
  background: var(--x-seal-bg) !important;   /* 同 .x-pin：#c1443a 白字仅 4.45:1 */
  border-radius: 2px !important;
}
.essence-title { color: var(--x-paper) !important; letter-spacing: var(--x-track-2); }
.essence-card:hover .essence-title { color: var(--x-gold) !important; }
.essence-excerpt, .ann-desc { color: var(--x-paper-dim) !important; }
.essence-excerpt { background: none !important; }
.essence-tag {
  background: none !important;
  border: 1px solid var(--x-line-gold-soft) !important;
  border-radius: 0 !important;
  color: var(--x-gold-deep) !important;
}
/* 公告图标位：原本是 5 个 emoji 轮播，现在是一枚金色短竖线 */
.ann-icon {
  width: 2px !important;
  height: 15px !important;
  margin-top: 6px !important;
  background: var(--x-gold) !important;
  flex: none;
}
.announcement-item:hover .ann-title { color: var(--x-gold) !important; }
.ann-title { color: var(--x-paper) !important; }
/* 头像：去掉蓝青渐变，改墨底金框 + 宋体单字 */
.x-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--x-serif);
  font-size: 15px;
  color: var(--x-gold-deep);
  background: rgba(232, 239, 234, .06);
  border: 1px solid var(--x-line-gold-soft);
  border-radius: 0;
}
.active-user-item:hover .x-avatar { color: var(--x-gold); border-color: var(--x-gold); }
.user-rank { font-family: var(--x-serif) !important; color: var(--x-paper-faint) !important; }
.user-rank.top1 { color: var(--x-gold) !important; }
.user-rank.top2 { color: var(--x-paper-soft) !important; }
.user-rank.top3 { color: var(--x-gold-deep) !important; }
.active-user-item:hover .active-user-name { color: var(--x-gold) !important; }
.active-user-name { color: var(--x-paper) !important; }
.hot-topic-author .avatar { background: none !important; border: 1px solid var(--x-line) !important; border-radius: 0 !important; }
/* 面板与骨架屏：旧层用 rgba(30,41,59)/rgba(59,130,246) 的蓝灰渐变与蓝微光。
 * 这类「深蓝」用饱和度的旧探针判不出来（b=59 根本没超过阈值），
 * 是靠彩度判定才揪出来的 —— 所以修完必须用 tools/_probe_blue.cjs 复验。 */
.announcement-panel, .active-users-panel, .hot-topic-card, .forum-board, .topic-item {
  background: rgba(22, 22, 26, .45) !important;
  background-image: none !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.skeleton, .stat-skeleton, .card-skeleton, .line-skeleton {
  background: rgba(232, 239, 234, .045) !important;
  background-image: none !important;
  border-radius: 0 !important;
}
.announcement-item, .active-user-item { border-bottom-color: var(--x-line-soft) !important; }
.announcement-item:hover, .active-user-item:hover { background: rgba(232, 239, 234, .03) !important; }
/* 排名徽章底色：bbs.js 注入的 .user-rank.top1/.top3 是金/橙渐变（#fbbf24→#f59e0b），
 * 金字压金底只有 1.18:1 —— 上一条只改文字色是治标，底色不去掉照样糊。
 * 改成描边徽章：没有实心底，金银两档文字压回墨底各 9:1 以上。 */
.user-rank.top1, .user-rank.top2, .user-rank.top3, .user-rank.normal {
  background: none !important;
  background-image: none !important;
  border: 1px solid var(--x-line-gold-soft) !important;
  border-radius: 0 !important;
}
/* 代码高亮里的注释下划线：旧蓝灰 → 宣纸第四档 */
/* 用 border-color 简写：只写 top/right 会在 bottom/left 上漏（探针就是这么抓出来的） */
.code-comment, .md-code-comment { border-color: var(--x-paper-faint) !important; }
/* 文档正文分隔线：旧蓝灰 #cbd5e1 写在 docs.js 注入样式里。
 * 用 border-color 简写一次覆盖四边 —— 逐边修会漏（先漏 right，再漏 bottom），
 * 探针每轮只报一条边，等于把同一件事做四遍。 */
.doc-detail-body { border-color: var(--x-line-soft) !important; }

/* ═══════════════ 11. IDE ═══════════════ */
.ide-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(5, 5, 6, .6) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.editor, .output {
  background: var(--x-ink-950) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: 0 !important;
  font-family: var(--x-mono);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--x-paper-soft);
}
.output-header {
  background: rgba(5, 5, 6, .6) !important;
  border-bottom: 1px solid var(--x-line-soft) !important;
  font-family: var(--x-mono);
  font-size: 11.5px;
  letter-spacing: var(--x-track-2);
  color: var(--x-paper-faint);
}

/* ═══════════════ 12. 主题切换兼容 ═══════════════
 * 站点有「月 切换主题」。
 * 亮色模式不是暗色的反相，而是**同一片荷塘的日间版**：月白纸、墨绿字、
 * 荷青当强调 —— 与夜里的墨池月白是同一处景的两个时辰。
 * 同时关掉氛围层：月轮与水纹只属于夜里，白天见了就成了脏。 */
body.light, body.theme-light, html.light body {
  background: #eef3ee !important;   /* 日间的纸，比夜里的月白再亮一档 */
  color: #1b2b22 !important;        /* 墨绿墨，不是纯黑 —— 日间的字也带塘的气 */
}
body.light::before, body.light::after,
body.theme-light::before, body.theme-light::after,
html.light::before, html.light::after { display: none !important; }
body.light .hero::after, body.theme-light .hero::after,
html.light .hero::after { display: none !important; }

body.light header, body.theme-light header, html.light header {
  background: rgba(238, 243, 238, .9) !important;
  border-bottom-color: rgba(27, 43, 34, .14) !important;
}
body.light .logo, body.light h1, body.light h2, body.light h3,
body.theme-light .logo, body.theme-light h1, body.theme-light h2, body.theme-light h3 {
  color: #16241c !important;
}
body.light .card, body.light .feat-card,
body.theme-light .card, body.theme-light .feat-card {
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(27, 43, 34, .14) !important;
}
body.light .site-footer, body.theme-light .site-footer {
  background: #e7eee9 !important;
  border-top-color: rgba(27, 43, 34, .14) !important;
}
/* 亮色主题下页脚文字改墨色系（此前沿用暗色的浅灰字，压浅绿底对比度不足） */
body.light .site-footer .footer-title, body.theme-light .site-footer .footer-title {
  color: #1c2a22;
  border-bottom-color: rgba(27, 43, 34, .18);
}
body.light .site-footer .footer-desc, body.theme-light .site-footer .footer-desc,
body.light .site-footer .footer-col a, body.theme-light .site-footer .footer-col a,
body.light .site-footer .footer-bottom, body.theme-light .site-footer .footer-bottom {
  color: #46564d;
}
body.light .site-footer .footer-sub, body.theme-light .site-footer .footer-sub {
  color: #6d5a1e;
}

/* ═══════════════ 13. 响应式 ═══════════════ */
@media (max-width: 1080px) {
  /* 裁决块用了 !important 固定桌面三栏，断点必须同样加 !important 才能翻回单栏 */
  .hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 44px !important;
    padding: 60px 0 68px !important;
  }
  .hero-vertical { display: none !important; }
  .docs-layout { grid-template-columns: 1fr; gap: 32px; }
  .docs-sidebar { position: static; border-right: 0; border-bottom: 1px solid var(--x-line-soft); padding: 0 0 20px; }
}

@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; gap: 40px; }
  .grid3 { grid-template-columns: repeat(2, 1fr); }
  .ancient-stats, .stats-row { grid-template-columns: repeat(2, 1fr); }
  .footer-content { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 768px) {
  /* 移动端恢复两端布局：logo 靠左、汉堡靠右（导航/搜索框隐藏） */
  header { height: 62px; gap: 12px; justify-content: space-between; }
  .logo { font-size: 19px; }
  .logo .latin { display: none; }
  #mainNav { display: none; }
  .mobile-menu-btn { display: flex; }
  .search-box { display: none; }

  .hero { padding: 40px 0 52px !important; gap: 32px !important; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px) !important; }
  .hero h1 .l1 { font-size: clamp(18px, 5vw, 24px) !important; }
  .hero-btns { flex-direction: column !important; }
  .hero-btns .btn { width: 100% !important; }
  .hero-keys kbd { min-width: 42px; height: 36px; font-size: 14px; padding: 0 10px; }
  .section-title { font-size: 19px; margin: 48px 0 18px; }
  .grid3 { grid-template-columns: 1fr; }
  .ancient-stats, .stats-row { grid-template-columns: 1fr 1fr; margin: 40px 0; }
  .ancient-stat-card, .stat-card { padding: 18px 16px; }
  .ancient-stat-num, .stat-card .num { font-size: 30px; }
  .markdown-content, .page-content, .detail-content { font-size: 15px; line-height: 1.95; }
  .footer-content { grid-template-columns: 1fr; gap: 26px; padding: 0 var(--x-gutter) 36px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .site-footer { margin-top: 64px; padding-top: 44px; }

  /* 内页骨架在窄屏折成单栏：序号上移、元信息换行 */
  .x-page-head { grid-template-columns: 1fr; gap: 14px; padding: 36px 0 20px; }
  .x-page-actions { grid-column: 1; padding-bottom: 0; flex-wrap: wrap; }
  .x-entry { grid-template-columns: 1fr; gap: 8px; padding: 19px 0; }
  /* media 变体收成杂志式：封面通栏在上，第二行左序号右标题，元信息通栏收底。
   * 🔴 DOM 有 4 个子元素（num/thumb/body/meta），只定义两列会让后两个
   * 自动流到第二行、占进 52px 那列 —— 标题就逐字竖排了（390 宽实测踩过）。
   * 必须显式给每个子元素指定格位。 */
  .x-entry.x-entry-media { grid-template-columns: 52px minmax(0, 1fr); row-gap: 10px; }
  .x-entry.x-entry-media > .x-entry-thumb { grid-column: 1 / -1; grid-row: 1; width: 100%; height: 150px; }
  .x-entry.x-entry-media > .x-entry-num   { grid-column: 1; grid-row: 2; align-self: start; }
  .x-entry.x-entry-media > .x-entry-body  { grid-column: 2; grid-row: 2; }
  .x-entry.x-entry-media > .x-entry-meta  { grid-column: 1 / -1; grid-row: 3; }
  .x-entry-thumb { width: 100%; height: 140px; }
  .x-entry-meta { padding-top: 2px; }
}

/* 移动端抽屉导航（由 toggleMobileNav 控制 #mainNav 的 .open） */
@media (max-width: 768px) {
  #mainNav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    left: 0; right: 0; top: 100%;
    gap: 0;
    margin: 0;
    padding: 8px var(--x-gutter) 16px;
    background: var(--x-ink-950);
    border-bottom: 1px solid var(--x-line);
    box-shadow: 0 0 0 100vmax rgba(4, 4, 6, .6), 0 20px 44px rgba(0, 0, 0, .55);
  }
  #mainNav.open a {
    padding: 15px 0;
    border-bottom: 1px solid var(--x-line-soft);
    font-size: 15px;
  }
  #mainNav.open a::after { display: none; }
  #mainNav.open a.active { color: var(--x-gold) !important; }
}

/* ── 无障碍：尊重「减少动态效果」 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .pv { opacity: 1; transform: none; }
  .announcement-content { animation: none; }
}

/* ═══ 第 21 节 IDE 运行输出弹窗 ═══ */
/* 2026-09-26：编译/运行结果改由模态弹窗承载。
   此前 .output 排在编辑器下方，程序一长（或输出多）页面就被撑长，
   用户要滚到页尾才能看到结果。配色沿用 IDE 编辑器那套（炭黑 #16161e / 金 #f7e3a1 /
   输出绿 #9ece6a），与第 18 节的编辑区同源，视觉上是一套东西。 */
.ide-run-modal {
  position: fixed;
  inset: 0;
  z-index: 10050; /* 高于 .toast 的 9999，保证「已复制」提示仍浮在弹窗之上 */
  display: none;  /* 打开态由 ide.js 的 showRunOutput() 置 flex */
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 5, 9, 0.74);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ide-run-modal-box {
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(78vh, 760px);
  background: #101018;
  border: 1px solid rgba(217, 180, 90, 0.42);
  border-radius: 14px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.ide-run-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 16px;
  background: #16161e;
  border-bottom: 1px solid rgba(217, 180, 90, 0.22);
}
.ide-run-modal-title {
  font-size: 14px;
  font-weight: 650;
  color: #f7e3a1;
  letter-spacing: 0.3px;
}
.ide-run-modal-meta {
  margin-left: auto;
  font-size: 12px;
  color: #7b849c;
}
.ide-run-modal-x {
  padding: 2px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #9aa3bb;
  background: transparent;
  border: 1px solid rgba(217, 180, 90, 0.22);
  border-radius: 6px;
  cursor: pointer;
  transition: none;
}
.ide-run-modal-x:hover {
  color: #f7e3a1;
  border-color: rgba(217, 180, 90, 0.55);
}
/* 输出体：id 沿用 ideOutput，既有的赋值代码一行不改 */
/* 2026-09-28：底色从输出绿改中性浅灰蓝 —— 绿色只留给「编译成功」等引擎状态行，
   程序自己的打印不再和状态行撞色。 */
.ide-run-modal-body {
  flex: 1;
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  background: #0c0d14;
  color: #c3cbdd;
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}
.ide-run-modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #16161e;
  border-top: 1px solid rgba(217, 180, 90, 0.22);
}
.ide-run-modal-tip {
  margin-right: auto;
  font-size: 11px;
  color: #5b6480;
}
.ide-run-modal-btn {
  padding: 5px 12px;
  font-size: 12px;
  color: #d9b45a;
  background: transparent;
  border: 1px solid rgba(217, 180, 90, 0.34);
  border-radius: 6px;
  cursor: pointer;
  transition: none;
}
.ide-run-modal-btn:hover {
  color: #0f1014;
  background: #d9b45a;
}
/* 画面体：图形容器（含 canvas）由 ide.js 的 mountRunStage() 搬进来，
   与文本体（pre#ideOutput）互斥切换。画面模式下弹窗不被 max-height 拉扁，
   按钮条收窄居中，整体像一块「运行时窗口」。 */
.ide-run-modal-stage {
  display: none;  /* 打开态由 setRunStage(true) 置 flex */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px;
  background: #0c0d14;
  overflow: auto;
}
.ide-run-modal-box.is-graphics {
  width: min(660px, 100%);
  max-height: 90vh;
}
.ide-run-modal-box.is-graphics .ide-run-modal-stage canvas {
  max-width: 100% !important;
}
@media (max-width: 768px) {
  .ide-run-modal { padding: 12px; }
  .ide-run-modal-box { max-height: 88vh; }
}

/* ═══ 第 23 节 论坛版块卡片 + 代码广场卡片 ═══ */
/* 2026-09-28：版块从条目行升级为卡片网格；代码广场从条目行改为带代码预览的卡片。
   语汇与其余编辑感组件同源：方角、细线、宋体活字、金 hover，无 emoji。 */

/* ── 论坛版块卡片 ── */
.forum-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.forum-board-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 12px;
  background: rgba(22, 22, 26, .62);
  border: 1px solid var(--x-line);
  cursor: pointer;
  transition: border-color .22s var(--x-ease), background .22s var(--x-ease);
}
.forum-board-card:hover {
  border-color: var(--x-line-gold);
  background: rgba(28, 28, 33, .75);
}
.fbc-head { display: flex; align-items: center; gap: 12px; }
.fbc-sigil {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--x-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--x-gold);
  background: rgba(211, 189, 120, .07);
  border: 1px solid var(--x-line-gold-soft);
}
.fbc-name {
  flex: 1;
  min-width: 0;
  font-family: var(--x-serif);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--x-paper);
  letter-spacing: var(--x-track-2);
}
.fbc-count { font-family: var(--x-mono); font-size: 15px; color: var(--x-gold); white-space: nowrap; }
.fbc-count i { font-style: normal; font-size: 11px; color: var(--x-paper-faint); margin-left: 4px; }
.fbc-desc {
  font-size: 13px;
  line-height: 1.75;
  color: var(--x-paper-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 46px;
}
.fbc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--x-line-soft);
  font-size: 12px;
}
.fbc-go { color: var(--x-paper-faint); letter-spacing: var(--x-track-2); transition: color .18s var(--x-ease); }
.fbc-arrow { color: var(--x-gold-deep); transition: transform .18s var(--x-ease); }
.forum-board-card:hover .fbc-go { color: var(--x-gold); }
.forum-board-card:hover .fbc-arrow { transform: translateX(3px); }

/* ── 代码广场卡片 ── */
.snip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.snip-card {
  display: flex;
  flex-direction: column;
  background: rgba(22, 22, 26, .62);
  border: 1px solid var(--x-line);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .22s var(--x-ease), background .22s var(--x-ease);
}
.snip-card:hover {
  border-color: var(--x-line-gold);
  background: rgba(28, 28, 33, .75);
}
.snip-card-code {
  position: relative;
  padding: 12px 14px 14px;
  background: rgba(10, 10, 12, .72);
  border-bottom: 1px solid var(--x-line-soft);
}
/* 底部渐隐：暗示代码未完，点开看全文 */
.snip-card-code::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 12, .92));
  pointer-events: none;
}
.snip-card-code pre {
  margin: 0;
  font-family: var(--x-mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--x-paper-dim);
  white-space: pre;
  overflow: hidden;
  max-height: 150px;
}
.snip-card-body { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px 4px; flex: 1; }
.snip-card-title {
  font-family: var(--x-serif);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--x-paper);
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.snip-card:hover .snip-card-title { color: var(--x-gold-soft); }
.snip-card-desc {
  font-family: var(--x-kai);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--x-paper-faint);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.snip-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 13px;
  font-family: var(--x-mono);
  font-size: 11.5px;
  color: var(--x-paper-faint);
}
.snip-lang {
  padding: 1px 7px 2px;
  color: var(--x-gold);
  border: 1px solid var(--x-line-gold-soft);
  font-size: 10.5px;
  letter-spacing: .05em;
}
.snip-author { color: var(--x-paper-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.snip-gap { flex: 1; }

/* ── 响应式：3 列 → 2 列 → 1 列 ── */
@media (max-width: 1080px) {
  .forum-board-grid, .snip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .forum-board-grid, .snip-grid { grid-template-columns: 1fr; }
}

/* ── 亮色主题：卡片翻成纸白底墨字 ── */
body.light .forum-board-card, body.theme-light .forum-board-card,
body.light .snip-card, body.theme-light .snip-card {
  background: rgba(255, 255, 255, .8);
  border-color: rgba(27, 43, 34, .14);
}
body.light .forum-board-card:hover, body.theme-light .forum-board-card:hover,
body.light .snip-card:hover, body.theme-light .snip-card:hover {
  border-color: var(--x-gold-deep);
  background: #fff;
}
body.light .fbc-name, body.theme-light .fbc-name,
body.light .snip-card-title, body.theme-light .snip-card-title { color: #16241c; }
body.light .fbc-desc, body.theme-light .fbc-desc,
body.light .snip-author, body.theme-light .snip-author { color: #46564d; }
body.light .fbc-count, body.theme-light .fbc-count,
body.light .snip-lang, body.theme-light .snip-lang { color: var(--x-gold-deep); }
body.light .fbc-go, body.theme-light .fbc-go,
body.light .snip-card-desc, body.theme-light .snip-card-desc,
body.light .snip-card-meta, body.theme-light .snip-card-meta { color: #6a7a70; }
body.light .fbc-sigil, body.theme-light .fbc-sigil { border-color: rgba(27, 43, 34, .18); background: rgba(165, 138, 56, .08); }
body.light .snip-card-code, body.theme-light .snip-card-code {
  background: #14161a;
  border-bottom-color: rgba(27, 43, 34, .1);
}
body.light .snip-card-code::after { background: linear-gradient(180deg, transparent, rgba(20, 22, 26, .92)); }
body.light .snip-card-code pre, body.theme-light .snip-card-code pre { color: #b8c4bc; }
body.light .fbc-foot, body.theme-light .fbc-foot { border-top-color: rgba(27, 43, 34, .1); }

/* ── 运行输出的语义分层（2026-09-28）── */
/* 引擎状态行：编译中/编译成功/编译失败/执行完成，总指令数 —— 与程序输出拉开 */
.ide-run-modal-body .ide-out-engine {
  font-weight: 600;
  letter-spacing: .08em;
}
.ide-run-modal-body .ide-out-engine.is-compiling {
  color: #e0af68; /* 琥珀：进行中 */
  animation: ideOutPulse 1.2s ease-in-out infinite;
}
.ide-run-modal-body .ide-out-engine.is-ok { color: #9ece6a; }        /* 绿：编译成功 */
.ide-run-modal-body .ide-out-engine.is-err { color: #f7768e; }       /* 红：编译失败 */
.ide-run-modal-body .ide-out-engine.is-done {
  color: #7f8ab0; /* 暗蓝灰：引擎收尾摘要（执行完成，总指令数） */
  font-weight: 500;
  border-top: 1px dashed rgba(127, 138, 176, 0.35);
  display: inline-block;
  margin-top: 8px;
  padding-top: 8px;
}
@keyframes ideOutPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* stderr 诊断块：红色左边线，与正常输出在空间上也分开 */
.ide-run-modal-body .ide-out-stderr {
  display: block;
  margin-top: 10px;
  padding: 9px 11px;
  color: #f7768e;
  background: rgba(247, 118, 142, 0.07);
  border-left: 2px solid rgba(247, 118, 142, 0.55);
  white-space: pre-wrap;
}

/* 底部元信息条：耗时/执行模式。虚线上边框正好接替原来手拼的 ─────── 分隔线 */
.ide-run-modal-status {
  display: none; /* 打开态由 showRunOutput() 置 flex */
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #12121b;
  border-top: 1px dashed rgba(217, 180, 90, 0.32);
  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #d9b45a;
}

/* ═══════════════ 13. 视觉收尾（2026-09-29 实拍审计）═══════════════
 * 全站逐页实拍后发现的三类旧层残留，逐条归位到东方编辑感语言。
 * 均带 !important：对手方（common.css:5585/4134/5615）也带。 */
/* 13.1 特性卡序号条：common.css:5615 给 .f-icon 留了 16px 圆角与外发光
 *    —— 序号「01」看起来浮在一条胶囊上。圆角、光晕都是旧语法，归零。 */
.feat-card .f-icon {
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* 13.2 彩色标签：common.css:4134 起 .tag-green/.tag-red 是带 !important
 *    的渐变药丸，赢了本层 6.4 节的无 important 覆盖，代码广场因此
 *    出现绿色圆角药丸。以同等 !important 夺回，收敛到金线语言。 */
.tag, .tag-blue, .tag-green, .tag-purple, .tag-orange, .tag-red {
  background: none !important;
  background-image: none !important;
  border-radius: 0 !important;
  border: 1px solid var(--x-line-gold-soft) !important;
  color: var(--x-gold) !important;
}
/* 13.3 列表条目应是「稿纸上的行」：common.css:5585 把 .list-item 也包进
 *    玻璃卡（实底 + 四边框 + hover 负外边距），首页热门文章/活跃话题
 *    因此变成一格格浮起的盒子。这里只留下边线，hover 回到金线 + 左移。 */
.list-item {
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--x-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.list-item:hover {
  background: rgba(232, 239, 234, .03) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.list-item:last-child { border-bottom-color: transparent !important; }
/* 13.5 下载页分隔点：.dot 是嵌在外层 span 里的 inline 元素，
 *    width/height 对 inline 不生效 → 分隔点塌缩成 0 宽，
 *    「60MBWindows/macOS/Linux」粘成一坨。升为 inline-block 才立得住。 */
.x-entry-meta .dot {
  display: inline-block;
  margin: 0 4px;
  vertical-align: middle;
}
/* 13.4 移动端悬浮开关：common.css 把它钉在视口垂直中线，390px 下
 *    会压住 hero 正文。挪到底部、与回顶按钮同列上下叠放。 */
@media (max-width: 768px) {
  .floating-panel {
    top: auto;
    bottom: 84px;
    transform: none;
    right: 12px;
  }
  .floating-toggle {
    width: 40px;
    height: 40px;
    opacity: .92;
  }
}