/* ═══════════════════════════════════════════════════════════════════
 * 夏语 · 高端设计系统 (xiayu-premium.css)
 * 2026-09-29 重建：从令牌根上推翻「荷塘月色·文艺夜」与「黑金」两套旧语言，
 * 建立统一的高端科技框架「玄 · Obsidian + 翡翠 + 香槟金」。
 *
 * 加载位置：index.html 中置于 editorial 之后（全站最高优先级）。
 * 手法：重定义 --x-* 令牌（暗色 :root + 亮色 body.light），157KB 旧组件
 *       因消费令牌而自动换肤；再用 !important 对位 editorial 的 !important
 *       裁决块，接管 hero / 卡片 / 按钮 / 导航 / 背景的「质感」。
 *
 * 设计语言：
 *   · 玄黑冷底（非墨绿），层级靠发丝线 + 极淡玻璃，而非辉光堆砌
 *   · 翡翠绿 = 主交互色（按钮 / 激活导航 / 强调）
 *   · 香槟金 = 奢侈感点缀（发丝线 / 分隔 / 字标），克制使用
 *   · 精修黑体标题（弃用满屏宋体的文艺感），hero 大标题渐变 + 柔光
 *   · 圆角回归（14-26px），玻璃拟态，hover 微浮起
 * ═══════════════════════════════════════════════════════════════════ */

/* ───────────────── 1. 暗色令牌（重定义 editorial 的 --x-*） ───────────────── */
:root {
  /* 玄：冷调近黑，掺极淡蓝而非绿 —— 与「墨绿文艺夜」彻底拉开 */
  --x-ink-950: #05070b;
  --x-ink-900: #0a0d13;
  --x-ink-850: #0d1119;
  --x-ink-800: #11161f;
  --x-ink-700: #161c27;   /* 卡片底 */
  --x-ink-600: #1d2531;
  --x-ink-500: #28323f;

  /* 冷白文字层级 */
  --x-paper:       #eef2f7;
  --x-paper-soft:  #c8d2dd;
  --x-paper-dim:   #98a3b1;
  --x-paper-faint: #6b7686;

  /* 翡翠：夏的标识符，主交互色 */
  --x-lotus:      #34e0c0;
  --x-lotus-soft: #79f0d8;
  --x-lotus-deep: #159e84;
  --x-lotus-rgb:  52, 224, 192;

  /* 香槟金：奢侈感点缀（发丝线 / 分隔 / 字标），不铺面 */
  --x-gold:      #e3c074;
  --x-gold-soft: #f3dfa6;
  --x-gold-deep: #b3893a;

  /* 朱砂：仅印章 / 正在发生 */
  --x-cinnabar:      #e0574a;
  --x-cinnabar-soft: #ef6e62;
  --x-seal-bg:       #d8463b;

  /* 发丝线：白改冷白，金改香槟 */
  --x-line:           rgba(238, 242, 247, .09);
  --x-line-soft:      rgba(238, 242, 247, .055);
  --x-line-strong:    rgba(238, 242, 247, .16);
  --x-line-gold:      rgba(227, 192, 116, .40);
  --x-line-gold-soft: rgba(227, 192, 116, .20);

  --x-lotus-line:      rgba(52, 224, 192, .30);
  --x-lotus-line-soft: rgba(52, 224, 192, .14);
  --x-moon:            #eef2f7;
  --x-moon-rgb:        238, 242, 247;

  /* 字体：标题改用精修黑体（弃文艺宋体）；楷体仅留作竖排侧标点缀 */
  --x-serif: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei",
             "Noto Sans SC", system-ui, sans-serif;
  --x-sans:  "PingFang SC", "MiSans", "HarmonyOS Sans SC", "Microsoft YaHei",
             "Noto Sans SC", system-ui, sans-serif;
  --x-kai:   "LXGW WenKai Screen", "KaiTi", "STKaiti", "楷体",
             "Noto Serif SC Variable", 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: 96px;
  --x-ease: cubic-bezier(.22, .61, .36, 1);
  --x-track-2: .06em;
  --x-track-3: .16em;
  --x-track-4: .30em;

  /* 圆角回归（弃直角立场） */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;
  --p-r-xs: 8px;
  --p-r-sm: 10px;
  --p-r-md: 14px;
  --p-r-lg: 18px;

  /* 把主色变量也翻成翡翠：链接 / 激活 / 主按钮跟随 */
  --cp:           var(--x-lotus);
  --cp-dark:      var(--x-lotus-deep);
  --cp-light:     var(--x-lotus-soft);
  --gold:         var(--x-gold);
  --accent:       var(--x-lotus);
  --accent-2:     var(--x-lotus-soft);
  --accent-3:     var(--x-lotus-deep);
  --c-accent:     var(--x-lotus);
  --c-accent-2:   var(--x-lotus-soft);
  --c-accent-3:   var(--x-lotus-deep);
  --c-gold:       var(--x-gold);
  --c-gold-hi:    var(--x-gold-soft);
  --c-gold-deep:  var(--x-gold-deep);
  --shadow:        0 18px 40px rgba(0, 0, 0, .5);
  --shadow-lg:     0 30px 70px rgba(0, 0, 0, .62);
}

/* ───────────────── 2. 基底：透出 .tech-fx 氛围层 ───────────────── */
html { background: var(--x-ink-950); }
body {
  background: transparent !important;   /* 让固定氛围层透出 */
  color: var(--x-paper-dim);
}
::selection { background: rgba(52, 224, 192, .28); color: var(--x-paper); }
:focus-visible { outline: 2px solid var(--x-lotus); outline-offset: 2px; }

/* 标题系统：精修黑体 + 更大字号 + 紧字距（高端感来自留白与对比） */
h1, h2, h3 {
  font-family: var(--x-serif);
  font-weight: 700;
  color: var(--x-paper);
  line-height: 1.22;
  letter-spacing: var(--x-track-2);
}
h4, h5, h6 { font-family: var(--x-sans); font-weight: 700; color: var(--x-paper); }
p { color: var(--x-paper-dim); }

/* ───────────────── 3. 氛围层：关掉旧月色/水纹/岸线，启用玄背景 ───────────────── */
body::before, body::after { display: none !important; }
.hero::after { display: none !important; }

.tech-fx {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1200px 720px at 80% -10%, rgba(52, 224, 192, .10), transparent 60%),
    radial-gradient(1000px 820px at 8% 6%, rgba(227, 192, 116, .07), transparent 60%),
    radial-gradient(900px 900px at 50% 122%, rgba(52, 224, 192, .06), transparent 60%),
    var(--x-ink-950);
}
.tech-fx::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(238, 242, 247, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 242, 247, .035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 28%, #000 0%, transparent 80%);
          mask-image: radial-gradient(circle at 50% 28%, #000 0%, transparent 80%);
}
.tech-fx .tech-scan {
  position: absolute; width: 62vw; height: 62vw; left: -12vw; top: -14vw;
  background: radial-gradient(circle, rgba(52, 224, 192, .16), transparent 60%);
  filter: blur(40px);
  animation: xAurora 26s ease-in-out infinite alternate;
}
@keyframes xAurora {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(22vw, 12vh) scale(1.15); }
}

/* ───────────────── 4. 顶部导航 ───────────────── */
header {
  background: rgba(10, 13, 19, .72) !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--x-line-gold-soft) !important;
}
.logo { color: var(--x-paper); }
.logo:hover { color: var(--x-gold); }
header nav a { color: var(--x-paper-dim); border-radius: var(--r-sm) !important; }
header nav a:hover { color: var(--x-paper); }
header nav a::after { background: var(--x-lotus); height: 2px; bottom: 4px; border-radius: 2px; }
header nav a.active { color: var(--x-lotus) !important; }
header nav a.active::after { background: var(--x-lotus); }

/* 主题切换 / 搜索按钮等小控件圆角化 */
.theme-toggle, .search-box button, .mobile-menu-btn {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--x-line) !important;
}

/* ───────────────── 5. Hero ───────────────── */
.hero {
  background-image: none !important;     /* 弃旧网格，交给 .tech-fx */
  border-bottom: 1px solid var(--x-line-soft);
  padding: 96px 0 104px;
}
.hero::before {                           /* 翡翠极光，替换旧月白光斑 */
  background: radial-gradient(circle, var(--x-lotus) 0%, transparent 68%);
  opacity: .14; filter: blur(120px);
}
.hero h1 {
  font-family: var(--x-serif);
  font-weight: 700;
  background: linear-gradient(100deg, #ffffff 0%, var(--x-lotus-soft) 52%, var(--x-gold) 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
          color: transparent !important;
  filter: drop-shadow(0 0 26px rgba(52, 224, 192, .22));
}
.hero h1 .l1 { color: var(--x-lotus-soft) !important; font-weight: 500; }
.hero-eyebrow { color: var(--x-paper-faint); }
.hero-eyebrow .dot { background: var(--x-lotus); box-shadow: 0 0 10px rgba(52, 224, 192, .7); }

/* Hero 代码窗：玻璃 + 发丝边 + 柔影 */
.hero-visual {
  background: linear-gradient(180deg, rgba(13, 17, 25, .86), rgba(8, 11, 16, .92)) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(52, 224, 192, .05) !important;
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.hero-visual .term-bar {
  border-bottom: 1px solid var(--x-line) !important;
  background: rgba(255, 255, 255, .02) !important;
}
.code-tabs button {
  border-radius: var(--r-sm) !important;
  color: var(--x-paper-dim);
}
.code-tabs button.on, .code-tabs button:hover {
  color: var(--x-lotus); background: rgba(52, 224, 192, .10) !important;
}
#heroCodeBody, .hero-visual pre { color: var(--x-paper); }
.code-out .ok { color: var(--x-lotus); }

/* ───────────────── 6. 按钮 ───────────────── */
.btn, .btn-primary, .btn-ghost, .btn-outline {
  border-radius: var(--r-md) !important;
  font-family: var(--x-sans);
  font-weight: 600;
}
.btn-primary {
  background: linear-gradient(135deg, var(--x-lotus), var(--x-lotus-deep)) !important;
  color: #04130f !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(52, 224, 192, .32) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--x-lotus-soft), var(--x-lotus)) !important;
  box-shadow: 0 10px 30px rgba(52, 224, 192, .46) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}
.btn-ghost, .btn-outline {
  color: var(--x-paper) !important;
  border-color: var(--x-line-strong) !important;
  background: rgba(255, 255, 255, .03) !important;
}
.btn-ghost:hover, .btn-outline:hover {
  border-color: var(--x-lotus-line) !important;
  color: var(--x-lotus) !important;
}

/* ───────────────── 7. 卡片 / 容器：玻璃 + 发丝边 + hover 微浮 ───────────────── */
.card, .feat-card, .snip-card, .forum-board-card, .ancient-stat-card,
.modal-box, .x-entry, .doc-card, .blog-card, .post-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(10px);
  transition: border-color .22s var(--x-ease), box-shadow .22s var(--x-ease), transform .22s var(--x-ease);
}
.card:hover, .feat-card:hover, .snip-card:hover, .forum-board-card:hover,
.ancient-stat-card:hover, .blog-card:hover, .post-card:hover {
  border-color: var(--x-lotus-line) !important;
  box-shadow: 0 0 0 1px var(--x-lotus-line), 0 24px 52px rgba(0, 0, 0, .5) !important;
  transform: translateY(-3px) !important;
}
.feat-card .f-icon {
  font-family: var(--x-mono) !important;
  color: var(--x-lotus) !important;
  background: rgba(52, 224, 192, .10) !important;
  border: 1px solid var(--x-lotus-line) !important;
  border-radius: var(--r-sm) !important;
}

/* 统计数字：等宽 + 翡翠辉光 */
.ancient-stat-num, .stat-num, .checkin-num {
  font-family: var(--x-mono) !important;
  color: var(--x-paper) !important;
  text-shadow: 0 0 18px rgba(52, 224, 192, .25);
}

/* ───────────────── 8. 通用区块标记 / 眉标 ───────────────── */
.x-sec-mark, .section-title, .eyebrow {
  color: var(--x-lotus) !important;
  font-family: var(--x-mono) !important;
  letter-spacing: var(--x-track-3);
}
.x-sec-mark::before, .section-title::before {
  background: linear-gradient(90deg, var(--x-lotus), transparent) !important;
}

/* 标签（代码广场 CP 等） */
.tag, .tag-green, .tag-blue, .snip-lang, .x-tag {
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--x-lotus-line) !important;
  color: var(--x-lotus) !important;
  background: rgba(52, 224, 192, .08) !important;
}

/* 列表条目：扁平行 + 下边线，弃旧玻璃盒 */
.list-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--x-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.list-item:hover { background: rgba(52, 224, 192, .04) !important; }

/* 输入控件 */
input, textarea, select, .search-box input {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: var(--r-sm) !important;
  color: var(--x-paper) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--x-lotus-line) !important;
  box-shadow: 0 0 0 3px rgba(52, 224, 192, .14) !important;
}

/* 弹窗 */
.modal { background: rgba(3, 5, 9, .72); backdrop-filter: blur(6px); }
.modal-box { border-radius: var(--r-xl) !important; }

/* 页脚 */
.site-footer { border-top: 1px solid var(--x-line-gold-soft); background: rgba(5, 7, 11, .6) !important; }
.site-footer .footer-title { color: var(--x-paper); }
.site-footer .footer-desc, .site-footer .footer-col a { color: var(--x-paper-dim); }
.site-footer .footer-col a:hover { color: var(--x-lotus); }

/* ───────────────── 9. 亮色主题（瓷 Porcelain）：完整重定义令牌 ───────────────── */
body.light {
  --x-ink-950: #eaeef3; --x-ink-900: #f4f6f9; --x-ink-850: #eef1f5; --x-ink-800: #e8ecf1;
  --x-ink-700: #ffffff; --x-ink-600: #f1f4f8; --x-ink-500: #e2e7ee;
  --x-paper: #0d1219; --x-paper-soft: #2b333d; --x-paper-dim: #5b6573; --x-paper-faint: #7c8694;
  --x-lotus: #0c9c83; --x-lotus-soft: #0b876f; --x-lotus-deep: #0a7563; --x-lotus-rgb: 12, 156, 131;
  --x-gold: #a87d2e; --x-gold-soft: #c79a45; --x-gold-deep: #8a6522;
  --x-cinnabar: #cf4636; --x-cinnabar-soft: #e0584b; --x-seal-bg: #c23b30;
  --x-line: rgba(13, 18, 25, .10); --x-line-soft: rgba(13, 18, 25, .06);
  --x-line-strong: rgba(13, 18, 25, .16); --x-line-gold: rgba(168, 125, 46, .34); --x-line-gold-soft: rgba(168, 125, 46, .18);
  --x-lotus-line: rgba(12, 156, 131, .26); --x-lotus-line-soft: rgba(12, 156, 131, .12);
  --x-moon: #0d1219; --x-moon-rgb: 13, 18, 25;
  --cp: var(--x-lotus); --accent: var(--x-lotus); --primary: var(--x-lotus); --gold: var(--x-gold);
  --card-bg: rgba(255, 255, 255, .7); --c-card-bg: rgba(255, 255, 255, .7);
  --card-solid: #ffffff; --c-card-solid: #ffffff;
  --shadow: 0 16px 36px rgba(20, 30, 50, .12); --shadow-lg: 0 28px 64px rgba(20, 30, 50, .18);

  /* ── 桥接变量重定义（2026-09-29 系统性修复）──
   * 🔴 custom property 在声明处(:root)求值：editorial 桥接块 --card: var(--x-ink-700)
   * 在 html 层就已解析成暗值，body 继承解析结果——只翻 --x-* 原始令牌传不过去。
   * 亮色必须在此把全部桥接变量重新挂到已翻正的原始令牌上，否则 var() 消费者
   * （docs 侧栏/论坛卡/旧组件的 var(--bg)/var(--text)/var(--border)）全是暗值。 */
  --card: var(--x-ink-700);
  --bg: var(--x-ink-900);
  --bg-0: var(--x-ink-950);
  --bg-1: var(--x-ink-900);
  --bg-2: var(--x-ink-950);
  --bg-2-c: var(--x-ink-800);
  --bg-secondary: var(--x-ink-800);
  --bg-tertiary: 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);
  --accent-soft: linear-gradient(135deg, rgba(12, 156, 131, .12), rgba(10, 117, 99, .08));
  --accent-grad: linear-gradient(135deg, var(--x-lotus-soft), var(--x-lotus), var(--x-lotus-deep));
  --c-grad: linear-gradient(135deg, var(--x-lotus-soft), var(--x-lotus), var(--x-lotus-deep));
  --glow-blue: 0 0 20px rgba(12, 156, 131, .18);
  --glow-blue-strong: 0 0 30px rgba(12, 156, 131, .26);
  --vermilion: var(--x-cinnabar);
  --jade: var(--x-lotus);
}
/* 用 !important 盖过 editorial 的硬编码浅绿白，统一为瓷白 */
body.light { background: var(--x-ink-900) !important; color: var(--x-paper) !important; }
body.light .tech-fx { display: none !important; }
body.light header {
  background: rgba(244, 246, 249, .82) !important;
  border-bottom-color: var(--x-line-gold-soft) !important;
}
body.light .logo, body.light h1, body.light h2, body.light h3 { color: var(--x-paper); }
body.light .card, body.light .feat-card, body.light .snip-card,
body.light .forum-board-card, body.light .ancient-stat-card, body.light .modal-box {
  background: #ffffff !important;
  border-color: var(--x-line) !important;
  box-shadow: 0 10px 30px rgba(20, 30, 50, .08) !important;
}
body.light .card:hover, body.light .feat-card:hover, body.light .snip-card:hover,
body.light .forum-board-card:hover {
  border-color: var(--x-lotus-line) !important;
  box-shadow: 0 0 0 1px var(--x-lotus-line), 0 16px 38px rgba(20, 30, 50, .12) !important;
}
/* 论坛/文档区 editorial「收编」段硬编码暗面(!important rgba(22,22,26,.45/.55/.62))亮色翻白 */
body.light .forum-stat-card, body.light .hot-topic-card, body.light .essence-card,
body.light .announcement-panel, body.light .active-users-panel,
body.light .forum-board, body.light .board-item, body.light .doc-welcome-card,
body.light .hot-topic-card:hover, body.light .essence-card:hover {
  background: #ffffff !important;
  background-image: none !important;
  border-color: var(--x-line) !important;
  color: var(--x-paper) !important;
}
body.light .forum-stat-card:hover, body.light .hot-topic-card:hover,
body.light .essence-card:hover, body.light .board-item:hover {
  border-color: var(--x-lotus-line) !important;
}
/* 文章/帖子正文代码面钉死暗底（白卡暗码块设计）：
   🔴 --x-ink-950 在亮色翻成瓷层，而 editorial .markdown-content pre 引用它作代码底
   （background: var(--x-ink-950) !important）→ 白底 + 暗色系语法高亮(金/橙/蓝)不可读。
   代码面语义=终端，统一钉回玄黑；行内 code 保持亮色纸片不动。 */
body.light .markdown-content pre, body.light .code-content,
body.light .code-content pre, body.light .md-code-block,
body.light .md-code-block .code-line-nums, body.light .detail-content pre,
body.light .doc-detail-body pre, body.light .doc-detail-body .code-content {
  background: #0d1119 !important;
  color: #e5e7eb !important;
}
body.light .md-code-block { border-color: rgba(238, 242, 247, .1) !important; }
body.light .md-code-header { background: #16171e !important; border-bottom-color: rgba(238, 242, 247, .08) !important; }
body.light .site-footer { background: #eef1f5 !important; border-top-color: var(--x-line-gold-soft) !important; }
body.light .site-footer .footer-title { color: var(--x-paper); }
body.light .site-footer .footer-desc, body.light .site-footer .footer-col a { color: var(--x-paper-dim); }
body.light input, body.light textarea, body.light select {
  background: #ffffff !important; color: var(--x-paper); border-color: var(--x-line);
}
body.light .btn-primary {
  background: linear-gradient(135deg, var(--x-lotus), var(--x-lotus-deep)) !important;
  color: #ffffff !important;
}
body.light .hero-visual {
  background: linear-gradient(180deg, #ffffff, #f3f6f9) !important;
  border-color: var(--x-line) !important;
}
/* 亮色专属修正：关键字胶囊（暗色硬编码会变黑块）、输出区灰带、h1 渐变起点 */
body.light .hero-keys kbd, body.light kbd {
  background: #ffffff !important;
  color: #0d1219 !important;
  border: 1px solid var(--x-line-strong) !important;
  box-shadow: none !important;
}
body.light .code-out { background: #eef2f6 !important; color: #2b333d !important; }
body.light .code-out .ok { color: #0c9c83 !important; }
body.light .hero h1 {
  background-image: linear-gradient(100deg, #0d1219 0%, #0b876f 55%, #a87d2e 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
}

/* ───────────────── 10. 旧层残留清理（2026-09-29 复扫） ───────────────── */
/* 旧「飘浮粒子」层（common.js:9 注入 + common.css:2426 样式）：暗色已被 §11 S7 星尘取代、
   亮色散落翡翠小点成噪音 → 整体退役 */
.floating-particles { display: none !important; }
/* 亮色下搜索框：editorial:541 硬编码暗底 rgba(22,22,26,.72) 会从"检"按钮后透出深色块；
   改令牌化 —— 暗色取 --card-bg(=原值不变)，亮色由 body.light --card-bg 翻白 */
.search-box { background: var(--card-bg) !important; }
.search-box button { color: var(--x-paper-dim) !important; }
/* 亮色下 editorial 月晕(.hero::before)以 --x-paper(亮色=墨色) 画 110px 大模糊 → 左上灰渍，关闭 */
body.light .hero::before { display: none !important; }

/* ───────────────── 12. 列表条目卡化：博客文章 / 论坛帖子共用 .x-entry ─────────────────
 * editorial 原设计=「稿纸上的行」(无边框底色、hover 缩进跳动) —— 用户否掉，换「杂志卡」：
 * 每行一张悬浮卡 + 左侧翡翠笔锋线 + 幽灵序号 + 元信息胶囊行 + hover 微浮。 */
.x-entry {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)) !important;
  border: 1px solid var(--x-line) !important;
  border-bottom: 1px solid var(--x-line) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px 24px !important;
  margin-bottom: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 26px rgba(0, 0, 0, .32) !important;
  transition: border-color .22s var(--x-ease), transform .22s var(--x-ease), box-shadow .22s var(--x-ease), background .22s var(--x-ease);
}
.x-entry::before {                    /* 翡翠笔锋线：hover 自上而下扫出 */
  left: 0 !important; top: 18px !important; bottom: 18px !important; width: 3px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, var(--x-lotus), rgba(var(--x-lotus-rgb), .12)) !important;
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--x-ease);
}
.x-entry:hover {
  padding-left: 24px !important;      /* 撤掉 editorial 的缩进跳动，卡片不动只浮起 */
  transform: translateY(-2px);
  border-color: var(--x-lotus-line) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
  box-shadow: 0 0 0 1px var(--x-lotus-line), 0 18px 40px rgba(0, 0, 0, .4) !important;
}
.x-entry:hover::before { transform: scaleY(1) !important; background: var(--x-lotus) !important; }
/* 序号：幽灵等宽字，转翡翠 */
.x-entry-num {
  font-family: var(--x-mono) !important;
  font-size: 13px !important;
  color: var(--x-paper-faint) !important;
  opacity: .8;
  align-self: start !important;
  padding-top: 4px !important;
}
.x-entry:hover .x-entry-num { color: var(--x-lotus) !important; opacity: 1; }
/* 缩略图：圆角化，去灰度滤镜 */
.x-entry-thumb { border-radius: var(--r-md) !important; filter: none !important; }
/* 分类眉标（首个 sub，模板内联金色）转翡翠等宽眉标 */
.x-entry-body > .x-entry-sub[style] {
  color: var(--x-lotus) !important;
  font-family: var(--x-mono) !important;
  font-size: 11px !important;
  letter-spacing: var(--x-track-3);
}
/* 标题：hover 翡翠（弃金色） */
.x-entry:hover .x-entry-title { color: var(--x-lotus-soft) !important; }
/* 元信息：竖点隐藏，条目变胶囊 */
.x-entry-meta { gap: 8px !important; margin-top: 14px !important; flex-wrap: wrap; white-space: normal !important; }
.x-entry-meta > span {
  padding: 3px 10px;
  border: 1px solid var(--x-line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .03);
  color: var(--x-paper-dim) !important;
  transition: color .2s var(--x-ease), border-color .2s var(--x-ease);
}
.x-entry-meta > span.dot { display: none !important; }
.x-entry:hover .x-entry-meta > span { border-color: var(--x-line-strong); }
/* 继续阅读：翡翠 + hover 滑动 */
.x-entry-cta { margin-left: auto !important; color: var(--x-lotus) !important; border: 0 !important; background: none !important; padding-right: 0 !important; opacity: .75; transition: opacity .2s var(--x-ease), transform .2s var(--x-ease); }
.x-entry:hover .x-entry-cta { opacity: 1; transform: translateX(4px); }
/* 置顶印：朱砂胶囊（论坛帖子） */
.x-pin {
  display: inline-block; padding: 1px 9px; margin-right: 8px;
  font-size: 11px; line-height: 1.6; border-radius: var(--r-pill);
  background: var(--x-seal-bg); color: #fff; vertical-align: 2px; letter-spacing: 2px;
}
/* 亮色主题：白卡 + 瓷影 */
body.light .x-entry {
  background: #ffffff !important;
  border-color: var(--x-line) !important;
  box-shadow: 0 8px 22px rgba(20, 30, 50, .06) !important;
}
body.light .x-entry:hover {
  background: #ffffff !important;
  box-shadow: 0 0 0 1px var(--x-lotus-line), 0 16px 34px rgba(20, 30, 50, .1) !important;
}
body.light .x-entry-meta > span { background: #f4f6f9; border-color: transparent; }
@media (max-width: 768px) {
  .x-entry { padding: 16px 18px !important; }
  .x-entry.x-entry-media { grid-template-columns: 36px 100px minmax(0, 1fr) !important; }
  .x-entry.x-entry-media .x-entry-meta { grid-column: 1 / -1; }
  .x-entry-thumb { width: 100px !important; height: 70px !important; }
  .x-entry-meta > span { padding: 2px 8px; font-size: 11px; }
}

/* ───────────────── 13. 代码块工具条：复制按钮（2026-09-29 新增） ───────────────── */
.md-code-actions { display: flex; gap: 8px; align-items: center; }
.md-code-copy-btn {
  background: transparent;
  border: 1px solid #2b2b33;
  color: #a8a398;
  padding: 4px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.md-code-copy-btn:hover { border-color: var(--x-lotus); color: var(--x-lotus); }
.md-code-copy-btn.copied { border-color: var(--x-lotus); color: var(--x-lotus); }

/* ───────────────── 15. 移动端 hero 重排（2026-09-29）─────────────────
 * 375px 首屏原是「标题→按钮→关键字→(下滑才见)代码窗」；现在把代码窗提到
 * 标题之后、按钮之前 —— 第一屏即见产品演示。手法：hero-content display:contents
 * 把子元素提升进 hero 弹性流，再逐个 order。 */
@media (max-width: 768px) {
  .hero { display: flex !important; flex-direction: column; padding: 36px 0 44px !important; gap: 20px !important; }
  .hero-content { display: contents; }
  .hero-vertical { display: none !important; }
  .hero-eyebrow { order: 1; margin-bottom: 0 !important; }
  .hero h1 { order: 2; }
  .hero .x-rule, .hero .gold-rule { order: 3; margin: 16px 0 !important; }
  .hero-visual { order: 4; }
  .hero-desc { order: 5; }
  .hero-btns { order: 6; }
  .hero-keys { order: 7; }
}

/* ───────────────── 16. 长文目录 TOC（toc.js 注入，右缘悬浮）─────────────────
 * 详情页首个 .markdown-content 的 h2/h3 ≥2 枚时才出现；标题锚点平滑滚动留出头部高度 */
.markdown-content h2, .markdown-content h3 { scroll-margin-top: 92px; }
.x-toc {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  width: 208px; max-height: 62vh; overflow-y: auto;
  padding: 12px 10px; z-index: 60;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)) !important;
  border: 1px solid var(--x-line) !important;
  border-radius: var(--r-lg) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38) !important;
}
.x-toc-title {
  font-family: var(--x-mono); font-size: 11px; letter-spacing: var(--x-track-3);
  color: var(--x-paper-faint); padding: 2px 10px 8px;
  border-bottom: 1px solid var(--x-line-soft); margin-bottom: 6px;
}
.x-toc a {
  display: block; padding: 5px 10px; margin: 1px 0;
  font-size: 12.5px; line-height: 1.5; border-radius: var(--r-sm);
  color: var(--x-paper-dim); text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .18s var(--x-ease), background .18s var(--x-ease), border-color .18s var(--x-ease);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.x-toc a.x-toc-lv2 { padding-left: 22px; font-size: 12px; opacity: .85; }
.x-toc a:hover { color: var(--x-paper); background: rgba(52, 224, 192, .07); }
.x-toc a.on {
  color: var(--x-lotus) !important;
  border-left-color: var(--x-lotus);
  background: rgba(52, 224, 192, .1);
}
body.light .x-toc {
  background: #ffffff !important;
  border-color: var(--x-line) !important;
  box-shadow: 0 10px 26px rgba(20, 30, 50, .1) !important;
}
@media (max-width: 1279px) { .x-toc { display: none; } }

/* ───────────────── 16b. 内嵌目录卡（toc.js v1.1，插详情页右栏作者卡片下方）─────────────────
 * 与悬浮 .x-toc 同款观感，但改为文档流内竖排卡片：去定位/限宽/窄屏隐藏 */
.x-toc.x-toc-inline {
  position: static; transform: none;
  width: auto; max-height: none;
  margin-bottom: 16px;
  display: block !important;             /* 覆盖窄屏 .x-toc{display:none}，侧栏内全宽可见 */
}
.x-toc-inline .x-toc-title { white-space: nowrap; }

/* ───────────────── 17. 减弱动效偏好 ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .tech-fx .tech-scan, .hero-eyebrow .dot { animation: none !important; }
}

/* ── 标准库参考：入口横幅 + 标准库大全 CTA + 长文折叠章节 ── */
.x-feature-banner{
  display:flex; align-items:center; gap:14px; padding:15px 18px; margin:0 0 22px;
  border:1px solid var(--border); border-radius:14px; cursor:pointer;
  background:linear-gradient(120deg, rgba(var(--x-lotus-rgb),.12), rgba(227,192,116,.10));
  transition:border-color .2s, transform .2s;
}
.x-feature-banner:hover{ border-color:var(--x-lotus); transform:translateY(-1px); }
.x-feature-banner .fb-ico{ font-size:26px; line-height:1; }
.x-feature-banner .fb-body{ flex:1; min-width:0; }
.x-feature-banner .fb-title{ font-weight:700; font-size:15px; color:var(--text); }
.x-feature-banner .fb-sub{ font-size:12.5px; color:var(--gray); margin-top:3px; }
.x-feature-banner .fb-go{ color:var(--x-lotus); font-size:13px; font-weight:600; white-space:nowrap; }

.x-stdlib-cta{
  display:flex; align-items:center; gap:12px; margin:14px 0 4px; padding:14px 16px;
  border:1px solid var(--border); border-radius:12px; cursor:pointer;
  background:linear-gradient(120deg, rgba(var(--x-lotus-rgb),.12), rgba(227,192,116,.10));
  transition:border-color .2s, transform .2s;
}
.x-stdlib-cta:hover{ border-color:var(--x-lotus); transform:translateY(-1px); }
.x-stdlib-cta .ico{ font-size:24px; }
.x-stdlib-cta .txt{ flex:1; min-width:0; font-size:13px; color:var(--gray); }
.x-stdlib-cta .txt b{ color:var(--text); font-size:14px; }
.x-stdlib-cta .txt small{ display:block; margin-top:3px; opacity:.85; }
.x-stdlib-cta .go{ color:var(--x-lotus); font-weight:600; white-space:nowrap; }

.x-collapsible{
  border:1px solid var(--border); border-radius:12px; margin:16px 0; padding:0 16px;
  background:var(--card);
}
.x-collapsible > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:13px 0; font-weight:600; color:var(--text);
}
.x-collapsible > summary::-webkit-details-marker{ display:none; }
.x-collapsible > summary::before{ content:'▾'; color:var(--x-lotus); font-size:13px; transition:transform .15s; }
.x-collapsible:not([open]) > summary::before{ content:'▸'; }
.x-collapsible > summary > h2{ margin:0; font-size:1.12rem; border:none; padding:0; }
.x-collapsible[open] > summary{ border-bottom:1px solid var(--border); margin-bottom:8px; }

/* ═══════════════════════════════════════════════════════════════════
 * 11. 动效签名层（S1-S8）
 * 规范：reports/design_signature_spec.md（含 §7 体验审查修正，逐条采纳）
 * 原则：动效讲语言的故事 / 一页一主循环 / 克制即奢侈 / 可关可降。
 * 落地纪律：
 *   · 所有「入场默认态 opacity:0」的声明必须包进
 *     @media (prefers-reduced-motion: no-preference)，默认态 opacity:1
 *     （§7.6 P0：防 reduce 用户首屏永久空白）。
 *   · S1 渐变下放到每个 .x-char 自持裁切（§7.4-①：合成层会破坏祖先 clip）。
 *   · .x-tilt 双写类对垒 §7 hover 的 (0,2,0) !important（§7.4-②）。
 *   · will-change 仅保留 .x-spot / #x-progress / .hero-visual / .x-tilt 悬停期。
 * ═══════════════════════════════════════════════════════════════════ */

/* — 11.0 动效节奏令牌（追加，不动现有令牌） — */
:root {
  --fx-beat1: 0.05s;                             /* eyebrow */
  --fx-beat2: 0.18s;                             /* h1 逐字 */
  --fx-beat3: 0.90s;                             /* 下划线笔触 / 代码窗 */
  --fx-rise:  cubic-bezier(.22, .61, .36, 1);
  --fx-snap:  cubic-bezier(.34, 1.42, .64, 1);   /* 带一点回弹 */
  --fx-caret: rgba(var(--x-lotus-rgb), .9);
  --fx-glare: rgba(255, 255, 255, .10);
}

/* — 11.1 关键帧 — */
@keyframes fxCharIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fxRise   { to { opacity: 1; transform: translateY(0); } }
@keyframes fxRiseT  { to { transform: translateY(0); } }   /* 纯 transform 上浮（供被 !important 钉死 opacity 的元素） */
@keyframes fxBrush  { to { transform: scaleX(1); } }
@keyframes fxCaret  { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes fxOutIn  { to { opacity: 1; transform: translateY(0); } }
@keyframes fxRiver  { to { transform: translateX(-50%); } }
@keyframes fxGrid   { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes fxDust   { to { transform: translateY(320px); } }
@keyframes fxSheen  { to { transform: translateX(130%); } }
@keyframes fxRip    { to { transform: scale(2.8); opacity: 0; } }

/* — 11.2 S1 Hero「语句成形」三拍 — */
/* 渐变下放：逐字自持裁切。--n 由 JS 写入 h1（字符数），步长 = 100%/(n-1)。 */
.hero h1 { --n: 6; }
.hero h1 .x-char {
  background-image: linear-gradient(100deg, #ffffff 0%, var(--x-lotus-soft) 52%, var(--x-gold) 100%);
  background-size: calc(var(--n) * 100%) 100%;
  background-position-x: calc(var(--i) * (100% / (var(--n) - 1)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* .l1 包装层改实色填充，不依赖祖先裁切（text-fill-color 为继承属性，仅改 color 不足以显色） */
.hero h1 .x-l1w { display: block; -webkit-text-fill-color: var(--x-lotus-soft); }
body.light .hero h1 .x-char {
  background-image: linear-gradient(100deg, #0d1219 0%, #0b876f 55%, #a87d2e 100%);
}
body.light .hero h1 .x-l1w { -webkit-text-fill-color: #0b876f; }

@media (prefers-reduced-motion: no-preference) {
  /* 第 1 拍：eyebrow + 竖排侧标 */
  .hero-eyebrow { opacity: 0; animation: fxRise .6s var(--fx-rise) var(--fx-beat1) forwards; }
  .hero-vertical { opacity: 0; animation: fxRise .8s var(--fx-rise) .5s forwards; }
  .hero h1 .x-l1w { opacity: 0; animation: fxRise .6s var(--fx-rise) var(--fx-beat1) forwards; }
  /* 第 2 拍：主标题逐字（--fx-snap 轻回弹，70ms 递进） */
  .hero h1 .x-char {
    display: inline-block;
    opacity: 0; transform: translateY(26px) scale(.96);
    transform-origin: 50% 100%;
    animation: fxCharIn .58s var(--fx-snap) forwards;
    animation-delay: calc(var(--fx-beat2) + var(--i) * 70ms);
  }
  /* 第 3 拍：x-rule 变「笔锋下划线」，scaleX 一笔扫出 */
  .hero .x-rule {
    height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--x-lotus) 0%, rgba(var(--x-lotus-rgb), .55) 45%, var(--x-line-gold) 100%) !important;
    transform: scaleX(0); transform-origin: left center;
    animation: fxBrush .9s var(--fx-rise) var(--fx-beat3) forwards;
  }
  /* 收尾：80ms 递进上浮。hero-desc 的 opacity 已被 editorial 裁决块
     opacity:1 !important 钉死（!important 会压过 animation），故只做 transform。 */
  .hero-desc { transform: translateY(22px); animation: fxRiseT .7s var(--fx-rise) 1.05s forwards; }
  .hero-btns { opacity: 0; animation: fxRise .7s var(--fx-rise) 1.2s forwards; }
  .hero-keys { opacity: 0; animation: fxRise .7s var(--fx-rise) 1.35s forwards; }
}

/* — 11.3 S2 代码窗「编译循环」—— 全站唯一常驻大循环 — */
.x-caret {
  display: inline-block; width: .55em; height: 1.1em;
  margin-left: 1px; vertical-align: text-bottom; border-radius: 1px;
  background: var(--fx-caret); box-shadow: 0 0 8px rgba(var(--x-lotus-rgb), .45);
  animation: fxCaret 1s steps(2, jump-none) infinite;
}
.code-out .x-oline { display: inline-block; opacity: 0; transform: translateY(4px); }
.code-out .x-oline.x-in { animation: fxOutIn .4s var(--fx-rise) forwards; }
@media (prefers-reduced-motion: no-preference) {
  #heroCodeBody, .code-out { transition: opacity .4s var(--x-ease); }
  #heroCodeBody.x-fade, .code-out.x-fade { opacity: 0; }
}

/* — 11.4 S3 指针聚光灯 + 代码窗视差（氛围动效：亮色由 .tech-fx 同策略关闭） — */
.x-spot {
  position: absolute; top: 0; left: 0; width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--x-lotus-rgb), .09), transparent 65%);
  filter: blur(30px);
  opacity: 0; transition: opacity .5s var(--x-ease);
  pointer-events: none; will-change: transform; z-index: 0;   /* .hero > * 已是 z-index:1，光在内容之下 */
}
.hero:hover .x-spot { opacity: 1; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-visual {
    transform: perspective(1200px) rotateY(var(--pv-y, 0deg)) rotateX(var(--pv-x, 0deg)) !important;
    transition: transform .25s var(--x-ease);
    will-change: transform;
  }
}

/* — 11.5 S4 卡片 3D 倾斜 + 指向性辉光 — */
/* 双写类提升至 (0,2,0)：与 §7 .card:hover 等打平后按源序取胜（§7.4-②） */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .x-tilt.x-tilt {
    transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-3px) !important;
    will-change: transform;   /* 仅悬停期提升，避免 6+ 常驻合成层（§7.5） */
  }
  .feat-card::after, .snip-card::after, .forum-board-card::after,
  .blog-card::after, .post-card::after, .doc-card::after, .card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), var(--fx-glare), transparent 65%);
    opacity: 0; transition: opacity .35s var(--x-ease);
    pointer-events: none;
  }
  .feat-card:hover::after, .snip-card:hover::after, .forum-board-card:hover::after,
  .blog-card:hover::after, .post-card:hover::after, .doc-card:hover::after,
  .card:hover::after { opacity: 1; }
}
/* 亮色：白卡上换冷调翡翠辉光，避免白上白 */
body.light .feat-card::after, body.light .snip-card::after, body.light .forum-board-card::after,
body.light .blog-card::after, body.light .post-card::after, body.light .doc-card::after,
body.light .card::after {
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--x-lotus-rgb), .08), transparent 65%);
}

/* — 11.6 S5 「词法长河」跑马灯 + 朱砂印章（全站唯一一处红） — */
.x-river {
  display: flex; align-items: center;
  overflow: hidden; padding: 18px 28px; margin-top: -1px;
  border-top: 1px solid var(--x-line-soft); border-bottom: 1px solid var(--x-line-soft);
  background: rgba(255, 255, 255, .015);
}
.x-seal {
  flex: none; margin-right: 28px; padding: 6px 8px;
  font-family: var(--x-kai); font-size: 13px; line-height: 1.15; letter-spacing: 2px;
  color: #f6e8e6; background: var(--x-seal-bg);
  writing-mode: vertical-rl; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(224, 87, 74, .35), 0 4px 14px rgba(216, 70, 59, .3);
}
.x-river-track {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--x-mono); font-size: 14px; letter-spacing: var(--x-track-2);
  animation: fxRiver 36s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.x-river:hover .x-river-track { animation-play-state: paused; }
/* 每份内容包一层 seg（padding-right 补 gap），track 无 gap —— 消 -50% 循环的半个 gap 跳动（§7.4-④） */
.x-river-seg { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; }
.x-river-track span { color: var(--x-lotus); }
.x-river-track span.g { color: var(--x-gold); }
.x-river-track i { color: var(--x-paper-faint); font-style: normal; }
body.light .x-river { background: rgba(13, 18, 25, .02); }
@media (prefers-reduced-motion: reduce) {
  .x-river-track { animation: none; }
}

/* — 11.7 S6 顶部进度「墨线」+ 导航滑动指针 — */
#x-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1001;
  background: linear-gradient(90deg, var(--x-lotus), var(--x-gold));
  transform: scaleX(0); transform-origin: left center;
  will-change: transform; pointer-events: none;
}
header nav { position: relative; }
.x-glider {
  position: absolute; bottom: 4px; left: 0; height: 2px; width: 1px; border-radius: 2px;
  background: var(--x-lotus); box-shadow: 0 0 8px rgba(var(--x-lotus-rgb), .5);
  transform: translateX(var(--gx, 0px)) scaleX(var(--gs, 0));
  transform-origin: left center;
  transition: transform .38s var(--fx-snap), opacity .25s var(--x-ease);
  pointer-events: none;
}
/* 桌面端 per-link 下划线退役（移动端菜单保留）；触屏 glider 禁用；reduce 瞬移 */
@media (pointer: fine) { header nav a::after { opacity: 0 !important; } }
@media (pointer: coarse) { .x-glider { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .x-glider { transition: none; } }

/* — 11.8 S7 氛围精修：网格呼吸 + 星尘漂移 + 静态噪点 — */
.tech-fx .x-dust, .tech-fx .x-dust2 {
  position: absolute; inset: -50% 0 0 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(238, 242, 247, .5), transparent),
    radial-gradient(1px 1px at 140px 90px, rgba(var(--x-lotus-rgb), .4), transparent),
    radial-gradient(1.5px 1.5px at 260px 190px, rgba(227, 192, 116, .35), transparent);
  background-size: 320px 320px;
}
.tech-fx .x-dust2 { background-size: 480px 480px; }
.tech-fx::after {
  content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .tech-fx::before { animation: fxGrid 8s ease-in-out infinite; }
  .tech-fx .x-dust  { opacity: .5; animation: fxDust 60s linear infinite; }
  .tech-fx .x-dust2 { opacity: .3; animation: fxDust 90s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-fx .x-dust, .tech-fx .x-dust2 { display: none; }   /* reduce 完全回到 v1.0 底色 */
}
/* 低端机/小屏降载（§7.5）：噪点混合层与第二层星尘关闭 */
@media (max-width: 768px), (pointer: coarse) {
  .tech-fx::after { display: none; }
  .tech-fx .x-dust2 { display: none; }
}

/* — 11.9 S8 主按钮流光 + 点击涟漪 — */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-130%);
  }
  .btn-primary:hover::after { animation: fxSheen .7s var(--x-ease); }
  .x-rip {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: rgba(255, 255, 255, .35);
    transform: scale(0); animation: fxRip .6s ease-out forwards;
  }
}