/* ====================================================
   Liquid Glass Layer v1.0 — 叠加在 style.css 之上
   Apple-style: 折射边缘 + 镜面高光 + 色散 + 极光背景
   Chromium: backdrop-filter SVG 真折射; 其他浏览器自动磨砂
   移动端: 降级为纯磨砂（性能保护）
   ==================================================== */

:root {
  --lg-refract: 1;              /* 运行时由 lg.js 检测改写为 0 时全站磨砂 */
  --lg-glass-tint: rgba(255, 255, 255, 0.30);
  --lg-glass-tint-dark: rgba(16, 22, 34, 0.36);
  --lg-edge-light: rgba(255, 255, 255, 0.65);
  --lg-edge-light-dark: rgba(180, 220, 255, 0.35);
  --lg-chroma: 2.5px;
  --lg-aurora-opacity: 0.5;
}

/* ---------- 背景系统 v3: 剧场级 · 深空 ---------- */
/* 层级: 深空基底 → 星尘粒子(canvas) → 极光带 → 光球 → 光束 → 晕影 → 噪点 */

/* 基底: 深空冷黑纵向渐变（浅色主题也压暗一档做"剧场灯灭"感） */
body {
  background-image: linear-gradient(180deg, #eef1f6 0%, #f6f7fa 50%, #e9edf3 100%);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background-image: linear-gradient(180deg, #04060b 0%, #080d18 55%, #03050a 100%);
}

/* 星尘粒子: lg.js canvas 绘制, 极慢漂浮 + 呼吸闪烁 */
#lg-stars {
  position: fixed; inset: 0; z-index: -3;
  pointer-events: none;
}

/* 极光带: 大胆的青紫对角光带（明度提一档, 更"哇"） */
#lg-aurora {
  position: fixed; inset: -25%;
  z-index: -3; pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(46% 60% at 12% 8%,  rgba(8, 145, 178, 0.30), transparent 60%),
    radial-gradient(40% 55% at 92% 16%, rgba(124, 58, 237, 0.26), transparent 60%),
    radial-gradient(44% 52% at 68% 92%, rgba(6, 182, 212, 0.16), transparent 58%),
    radial-gradient(34% 44% at 6% 86%,  rgba(219, 39, 119, 0.10), transparent 60%);
  animation: lg-drift 44s ease-in-out infinite alternate;
  will-change: transform;
}
[data-theme="dark"] #lg-aurora {
  background:
    radial-gradient(46% 60% at 12% 8%,  rgba(86, 198, 238, 0.22), transparent 60%),
    radial-gradient(40% 55% at 92% 16%, rgba(139, 92, 246, 0.20), transparent 60%),
    radial-gradient(44% 52% at 68% 92%, rgba(34, 211, 238, 0.13), transparent 58%),
    radial-gradient(34% 44% at 6% 86%,  rgba(59, 130, 246, 0.12), transparent 60%);
}
@keyframes lg-drift {
  0%   { transform: translate3d(-1.5%, -1%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(1.5%, 1.6%, 0) rotate(3deg) scale(1.07); }
  100% { transform: translate3d(-1%, 0.8%, 0) rotate(-2deg) scale(1.02); }
}

/* 视差光球 ×3: 提亮加色 */
.lg-orb {
  position: fixed; z-index: -2; pointer-events: none;
  border-radius: 50%; will-change: transform;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
#lg-orb-1 { width: 58vw; height: 58vw; top: -14vh; left: -10vw;
  background: radial-gradient(circle, rgba(8,145,178,0.16) 0%, rgba(8,145,178,0.06) 45%, transparent 70%); }
#lg-orb-2 { width: 46vw; height: 46vw; top: 30vh; right: -12vw;
  background: radial-gradient(circle, rgba(124,58,237,0.13) 0%, rgba(124,58,237,0.05) 45%, transparent 70%); }
#lg-orb-3 { width: 38vw; height: 38vw; bottom: -12vh; left: 30vw;
  background: radial-gradient(circle, rgba(212,175,55,0.12) 0%, rgba(212,175,55,0.045) 45%, transparent 70%); }
[data-theme="dark"] #lg-orb-1 { background: radial-gradient(circle, rgba(86,198,238,0.12) 0%, rgba(86,198,238,0.045) 45%, transparent 70%); }
[data-theme="dark"] #lg-orb-2 { background: radial-gradient(circle, rgba(139,92,246,0.11) 0%, rgba(139,92,246,0.04) 45%, transparent 70%); }
[data-theme="dark"] #lg-orb-3 { background: radial-gradient(circle, rgba(212,175,55,0.07) 0%, rgba(212,175,55,0.028) 45%, transparent 70%); }

/* 光束扫掠: 提亮 */
#lg-beam {
  position: fixed; inset: -30%; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 34%,
    rgba(255, 255, 255, 0.5) 47%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.5) 53%,
    transparent 66%);
  opacity: 0.5;
  animation: lg-sweep 30s ease-in-out infinite;
  will-change: transform, opacity;
}
[data-theme="dark"] #lg-beam {
  background: linear-gradient(115deg,
    transparent 36%,
    rgba(170, 205, 255, 0.07) 47%,
    rgba(210, 232, 255, 0.11) 50%,
    rgba(170, 205, 255, 0.07) 53%,
    transparent 64%);
}
@keyframes lg-sweep {
  0%, 100% { transform: translateX(-46%) rotate(0.5deg); opacity: 0; }
  12%      { opacity: 0.6; }
  50%      { transform: translateX(42%) rotate(-0.5deg); opacity: 0.45; }
  62%      { opacity: 0; }
}

/* 晕影: 方向性光 */
#lg-vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 55%),
    linear-gradient(180deg, transparent 72%, rgba(15, 23, 42, 0.05) 100%);
}
[data-theme="dark"] #lg-vignette {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(120, 170, 235, 0.06) 0%, transparent 55%),
    linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.32) 100%);
}

/* 噪点: 提到 3.5% 增加胶片质感 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { opacity: 0.06; }

/* Header 分隔线：横向光刻线（透明→白→透明），iOS hairline 质感 */
.header { border-bottom: none; }
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(15,23,42,0.05) 18%,
    rgba(15,23,42,0.12) 50%,
    rgba(15,23,42,0.05) 82%, transparent);
  pointer-events: none;
}
[data-theme="dark"] .header::after {
  background: linear-gradient(90deg,
    transparent, rgba(148,178,220,0.07) 18%,
    rgba(148,178,220,0.16) 50%,
    rgba(148,178,220,0.07) 82%, transparent);
}

/* ============================================================
   核心 Liquid Glass 面板
   .lg = 玻璃本体; lg.js 会补 backdrop-filter: url(#lg-filter-N)
   ============================================================ */
.lg {
  position: relative;
  background: rgba(255, 255, 255, 0.20);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),          /* 顶棱镜面高光 */
    inset 0 -1px 0 rgba(15, 23, 42, 0.05),            /* 底棱厚度暗边 */
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    0 18px 44px rgba(10, 18, 32, 0.14),               /* 大而软的悬浮投影 */
    0 3px 8px rgba(10, 18, 32, 0.07);                 /* 近距接触阴影 */
  -webkit-backdrop-filter: var(--lg-bf-wk, blur(28px) saturate(180%));
  backdrop-filter: var(--lg-bf, blur(28px) saturate(180%));
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
[data-theme="dark"] .lg {
  background: rgba(17, 23, 36, 0.30);
  border-color: rgba(190, 225, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(200, 235, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    inset 1px 0 0 rgba(160, 200, 255, 0.07),
    0 22px 56px rgba(0, 4, 12, 0.55),
    0 4px 10px rgba(0, 4, 12, 0.32);
}

/* 指针跟随边缘光 — lg.js 用 CSS 变量驱动 */
.lg::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lg-hover-glow, 0);
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(
    220px circle at var(--lg-mx, 50%) var(--lg-my, 50%),
    rgba(255, 255, 255, 0.22),
    transparent 65%
  );
  mix-blend-mode: screen;
}
.lg:hover::before { opacity: 1; }
[data-theme="dark"] .lg::before {
  background: radial-gradient(
    220px circle at var(--lg-mx, 50%) var(--lg-my, 50%),
    rgba(160, 215, 255, 0.16),
    transparent 65%
  );
}

/* ---------- 应用到现有组件 ---------- */

/* 去模板化: 卡片 highlight 竖条改为 hover 时才出现的内发光 */
.issue-card.highlight { border-left: none; }
.issue-card.highlight::after {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2.5px;
  border-radius: 2px; background: var(--accent); opacity: 0;
  box-shadow: 0 0 14px var(--accent-soft);
  transition: opacity 0.35s var(--ease), top 0.35s var(--ease), bottom 0.35s var(--ease);
}
.issue-card.highlight { position: relative; }
.issue-card.highlight:hover::after { opacity: 0.9; top: 12%; bottom: 12%; }

/* Header: 融入背景（半透明 + 大 blur），去"贴纸断层" */
.header {
  background: rgba(247, 248, 250, 0.55);
  -webkit-backdrop-filter: var(--lg-bf-wk, blur(24px) saturate(160%));
  backdrop-filter: var(--lg-bf, blur(24px) saturate(160%));
}
[data-theme="dark"] .header { background: rgba(8, 11, 17, 0.5); }

/* 主题切换按钮: 玻璃小圆钮（双主题自适应，不再发白） */
#theme-toggle {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text-primary);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 14px rgba(10,18,32,0.15);
}
[data-theme="dark"] #theme-toggle {
  background: rgba(148, 178, 220, 0.12);
  border-color: rgba(190, 225, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(200,235,255,0.25), 0 4px 14px rgba(0,4,12,0.4);
}

/* 卡片标签克制: 首页卡片最多显示 4 个（lg.js 截断），密度降噪 */
.header.is-scrolled { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 12px 36px rgba(8,14,26,0.14); }
.header-inner { position: relative; z-index: 1; }

/* Toolbar 玻璃化 */
.toolbar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.toolbar .pill { background: var(--lg-tint, rgba(255,255,255,0.34)); -webkit-backdrop-filter: var(--lg-bf-wk, blur(10px)); backdrop-filter: var(--lg-bf, blur(10px)); border-color: rgba(148,178,220,0.22); }
[data-theme="dark"] .toolbar .pill { background: rgba(22,30,46,0.5); }
.pill:active { transform: scale(0.97); }
.toolbar .pill.active,
.pill.active {
  background: var(--accent); color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--border-accent), 0 6px 18px var(--accent-soft);
}

/* 卡片列表：真玻璃（更透 + 拾色） */
.issue-card {
  position: relative;
  background: rgba(255, 255, 255, 0.14);
  background: var(--lg-tint, rgba(255, 255, 255, 0.14));
  border: 1px solid rgba(255, 255, 255, var(--lg-edge, 0.5));
  -webkit-backdrop-filter: var(--lg-bf-wk, blur(26px) saturate(185%));
  backdrop-filter: var(--lg-bf, blur(26px) saturate(185%));
  overflow: hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(15, 23, 42, 0.05),
    0 24px 60px rgba(10, 18, 32, 0.16),
    0 4px 10px rgba(10, 18, 32, 0.07);
}
[data-theme="dark"] .issue-card {
  background: rgba(19, 26, 40, 0.32);
  border-color: rgba(190, 225, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(200, 235, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 18px 48px rgba(0, 4, 12, 0.5),
    0 3px 8px rgba(0, 4, 12, 0.3);
}
.issue-card:hover {
  border-color: rgba(255, 255, 255, var(--lg-edge, 0.55));
  transform: translateY(-2px);          /* 精致微浮 2px, 0.4s 柔和缓动 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),
    0 22px 52px rgba(10, 18, 32, 0.16),
    0 4px 10px rgba(10, 18, 32, 0.08);
}
.issue-card {
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}
.issue-card .issue-arrow { transition: color 0.35s var(--ease), transform 0.35s var(--ease); }
.issue-card:hover .issue-arrow { transform: translateX(4px); }   /* 箭头轻推 */

/* Hero stats & metric-card & text-block: 玻璃上的玻璃（嵌套内层，Apple tab 内嵌胶囊手法） */
.hero-stats, .metric-card, .text-block, .interactive-box, .footer-admin, .link-item, .video-wrapper {
  background: var(--lg-tint, rgba(255, 255, 255, 0.32));
  -webkit-backdrop-filter: var(--lg-bf-wk, blur(18px) saturate(165%));
  backdrop-filter: var(--lg-bf, blur(18px) saturate(165%));
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 8px 22px rgba(10, 18, 32, 0.08);
}
[data-theme="dark"] .hero-stats, [data-theme="dark"] .metric-card, [data-theme="dark"] .text-block,
[data-theme="dark"] .interactive-box, [data-theme="dark"] .footer-admin, [data-theme="dark"] .link-item,
[data-theme="dark"] .video-wrapper {
  background: rgba(24, 32, 50, 0.36);
  border-color: rgba(190, 225, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(200, 235, 255, 0.18),
    0 10px 30px rgba(0, 4, 12, 0.4);
}

/* issue-vol 徽章: 玻璃内的玻璃（第二层嵌套） */
.issue-vol {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(10,18,32,0.06);
  -webkit-backdrop-filter: var(--lg-bf-wk, blur(10px)); backdrop-filter: var(--lg-bf, blur(10px));
}
[data-theme="dark"] .issue-vol {
  background: rgba(30, 40, 60, 0.3);
  border-color: rgba(190, 225, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(200,235,255,0.16), 0 4px 12px rgba(0,4,12,0.35);
}
.issue-vol-date { color: var(--text-secondary); opacity: 0.9; }

/* 标签 chip: 卡片玻璃上的小玻璃卵石 */
.issue-tag {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
[data-theme="dark"] .issue-tag {
  background: rgba(30, 40, 60, 0.28);
  border-color: rgba(190, 225, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(200,235,255,0.12);
}

/* 横向溢出保护（防极光/滚动条挤宽） */
html, body { overflow-x: hidden; }

/* ---------- Hero: 彩色壁纸横幅（给玻璃提供可折射的底） ---------- */
/* ---------- Hero 背景: 极光流动壁纸 ---------- */
.hero-bg {
  position: absolute; inset: 0; border-radius: inherit; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 160% at 85% 10%, rgba(124, 58, 237, 0.55), transparent 55%),
    radial-gradient(100% 130% at 15% 90%, rgba(8, 145, 178, 0.6), transparent 60%),
    radial-gradient(80% 120% at 50% 50%, rgba(197, 168, 108, 0.32), transparent 65%),
    linear-gradient(135deg, #0b3a4d 0%, #123a5f 40%, #1d2f5e 70%, #2b2450 100%);
}
/* 流动色斑层 ×2 — 慢速漂移, 呼吸感 */
.hero-bg::before, .hero-bg::after {
  content: ""; position: absolute; inset: -40%;
  background:
    radial-gradient(34% 38% at 30% 35%, rgba(86, 198, 238, 0.4), transparent 62%),
    radial-gradient(28% 32% at 72% 62%, rgba(167, 108, 255, 0.35), transparent 62%),
    radial-gradient(24% 28% at 50% 12%, rgba(255, 196, 128, 0.22), transparent 62%);
  animation: hero-flow 22s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.hero-bg::after {
  background:
    radial-gradient(30% 34% at 66% 26%, rgba(64, 224, 200, 0.28), transparent 60%),
    radial-gradient(26% 30% at 24% 70%, rgba(120, 140, 255, 0.3), transparent 60%);
  animation-duration: 31s;
  animation-direction: alternate-reverse;
}
@keyframes hero-flow {
  0%   { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, 4%, 0) rotate(8deg) scale(1.15); }
  100% { transform: translate3d(-2%, 2%, 0) rotate(-6deg) scale(1.06); }
}
/* 网格光栅 — 科技感基线 */
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80% 90% at 70% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(80% 90% at 70% 30%, #000 30%, transparent 75%);
}
/* 扫掠光带 — 定时横穿 */
.hero-sheen {
  position: absolute; inset: -30% -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.16) 48%,
    rgba(255, 255, 255, 0.24) 50%,
    rgba(255, 255, 255, 0.16) 52%,
    transparent 60%);
  animation: hero-sheen 7.5s ease-in-out infinite;
  transform: translateX(-70%);
}
@keyframes hero-sheen {
  0%, 64%  { transform: translateX(-70%); opacity: 0; }
  70%      { opacity: 1; }
  100%     { transform: translateX(70%); opacity: 0; }
}
[data-theme="dark"] .hero-bg {
  background:
    radial-gradient(120% 160% at 85% 10%, rgba(139, 92, 246, 0.4), transparent 55%),
    radial-gradient(100% 130% at 15% 90%, rgba(86, 198, 238, 0.32), transparent 60%),
    radial-gradient(80% 120% at 50% 50%, rgba(212, 175, 55, 0.16), transparent 65%),
    linear-gradient(135deg, #050d18 0%, #081526 45%, #0a1030 75%, #120b28 100%);
}
.hero {
  position: relative;
  margin-bottom: 0;
  max-width: none;
  background: #103049;   /* 兜底色; WebGL/CSS 两种模式下被 .hero-bg 覆盖 */
  border-radius: 26px;
  padding: 58px 48px 92px;
  overflow: visible;
  box-shadow: 0 30px 80px rgba(11, 35, 60, 0.35), 0 6px 18px rgba(11, 35, 60, 0.2);
  isolation: isolate;
}
.hero > *:not(.hero-bg):not(.hero-stats) { position: relative; z-index: 1; }
[data-theme="dark"] .hero {
  background: #060b16;
  box-shadow: 0 36px 90px rgba(0, 4, 12, 0.6), 0 8px 20px rgba(0, 4, 12, 0.4);
}
.hero h1 {
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(30px, 4.2vw, 44px);
  text-shadow: 0 2px 24px rgba(5, 20, 40, 0.45);
  max-width: 16ch;
  background: linear-gradient(100deg,
    #ffffff 30%, #dcefff 44%, #f0e8ff 54%, #ffffff 70%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: h1-shimmer 14s ease-in-out infinite;   /* 慢速柔和, 不再快速跳动 */
  position: relative;
}
@keyframes h1-shimmer {
  0%   { background-position: 120% 0; }
  50%  { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}
.hero-sub, .hero-eyebrow { color: rgba(255,255,255,0.82); }
.hero-eyebrow::before { background: rgba(255,255,255,0.7); }

/* hero-chips: 横幅内的三个玻璃数据片（替代旧 hero-stats 骑缝条） */
.hero-chips {
  position: relative; z-index: 1;
  display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap;
}
.hero-chip {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 118px;
  padding: 14px 22px;
  border-radius: 18px;
  background: var(--lg-tint, rgba(255, 255, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, var(--lg-edge, 0.28));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(5, 18, 38, 0.18),
    0 10px 26px rgba(5, 18, 38, 0.3);
  -webkit-backdrop-filter: var(--lg-bf-wk, blur(18px) saturate(170%));
  backdrop-filter: var(--lg-bf, blur(18px) saturate(170%));
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero-chip {
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.hero-chip:hover {
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 14px 34px rgba(5, 18, 38, 0.34);
}
.hc-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 21px;
  color: #fff; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(5, 20, 40, 0.4);
}
.hc-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.75); font-family: var(--font-mono);
}
[data-theme="dark"] .hero-chip {
  background: rgba(18, 26, 44, 0.34);
  border-color: rgba(190, 225, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(200, 235, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 16px 38px rgba(0, 4, 12, 0.5);
}
.hero-sub {
  color: rgba(255, 255, 255, 0.85); font-size: 15.5px; margin-top: 14px; max-width: 56ch;
}
.issue-list { margin-top: 30px; }
@media (max-width: 768px) {
  .hero { padding: 36px 22px 40px; border-radius: 20px; }
  .hero-chips { gap: 10px; }
  .hero-chip { min-width: 96px; padding: 11px 16px; border-radius: 14px; }
  .hc-num { font-size: 17px; }
}

/* ---------- /#lab 玻璃调节页 ---------- */
.lab-hero-glass-demo {
  position: relative; height: 300px; border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(90% 130% at 80% 12%, rgba(124, 58, 237, 0.75), transparent 58%),
    radial-gradient(90% 130% at 12% 88%, rgba(8, 145, 178, 0.8), transparent 62%),
    radial-gradient(60% 90% at 50% 50%, rgba(197, 168, 108, 0.45), transparent 65%),
    linear-gradient(135deg, #0b3a4d 0%, #16305a 45%, #241f52 100%);
  box-shadow: 0 24px 64px rgba(11, 35, 60, 0.35);
}
.lab-demo-strip {
  position: absolute; left: 24px; right: 24px; bottom: 40px; height: 86px;
  border-radius: 43px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: rgba(255, 255, 255, calc(0.5 * (1 - var(--lg-alpha, 0.5))));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1.5px 0 rgba(5, 18, 38, 0.14),
    0 22px 54px rgba(5, 18, 38, 0.32);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  transition: background 0.15s linear;
}
.lab-demo-strip .lds-t { font-weight: 700; font-size: 16px; color: #fff; text-shadow: 0 1px 10px rgba(5,20,40,0.5); }
.lab-demo-strip .lds-s { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.8); }
.lab-controls {
  margin-top: 22px; padding: 24px 26px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(148, 178, 220, 0.28); border-radius: 18px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
[data-theme="dark"] .lab-controls { background: rgba(20, 27, 44, 0.5); border-color: rgba(148,178,220,0.14); }
.lab-ctl-row { display: flex; align-items: center; gap: 16px; margin: 14px 0; }
.lab-ctl-row label { flex: 0 0 130px; font-size: 13px; color: var(--text-secondary); }
.lab-ctl-row .pct { flex: 0 0 52px; text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--accent); font-weight: 700; }
.lab-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; }

/* ---------- 液态交互: 只留光效, 不做位移（防晕） ---------- */
/* 液体高光: pill 内一道光泽随 hover 流过 */
.pill { position: relative; overflow: hidden; }
.pill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 30%, rgba(255,255,255,0.45) 48%, rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.45) 52%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none; border-radius: inherit;
  mix-blend-mode: overlay;
}
.pill:hover::after { transform: translateX(120%); }

/* pill hover: 只亮边, 不上浮 */
.pill:hover {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 18px rgba(10,18,32,0.1);
}

/* 搜索框聚焦: 光晕呼吸（无位移） */
.header-search input:focus {
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 22px var(--accent-soft);
}

/* 链接条目: 左侧光条升起（内容不动） */
.link-item { position: relative; overflow: hidden; }
.link-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), rgba(124,58,237,0.8));
  border-radius: 3px;
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.35s var(--ease);
}
.link-item:hover::before { transform: scaleY(1); }

/* WebGL header 撤销后: header 玻璃 pill 纯 CSS 双主题 */
.hdr-root { position: relative; }
.hdr-glass {
  display: flex; align-items: center; gap: 20px; flex: 1;
  padding: 8px 22px; border-radius: 26px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(15, 23, 42, 0.05),
    0 10px 28px rgba(10, 18, 32, 0.12);
  -webkit-backdrop-filter: var(--lg-bf-wk, blur(20px) saturate(165%));
  backdrop-filter: var(--lg-bf, blur(20px) saturate(165%));
}
.hdr-glass .header-search { max-width: 460px; }
.hdr-glass .header-search input {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(148, 178, 220, 0.3);
  color: var(--text-primary);
}
.hdr-glass .header-search input::placeholder { color: var(--text-muted); }
.hdr-glass .header-right { margin-left: auto; }
[data-theme="dark"] .hdr-glass {
  background: rgba(20, 28, 45, 0.5);
  border-color: rgba(190, 225, 255, 0.14);
  box-shadow:
    inset 0 1.5px 0 rgba(200, 235, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 12px 32px rgba(0, 4, 12, 0.45);
}
[data-theme="dark"] .hdr-glass .header-search input {
  background: rgba(10, 15, 26, 0.55);
  border-color: rgba(148, 178, 220, 0.18);
  color: var(--text-primary);
}
[data-theme="dark"] .hdr-glass .header-updated { color: var(--text-muted); }
.header.lg-webgl-hdr .hdr-glass { background: transparent; border-color: transparent; box-shadow: none; }
@media (max-width: 768px) { .hdr-glass { flex-wrap: wrap; padding: 8px 14px; } }

/* ---------- 路由转场 ---------- */
#app { position: relative; }
.page-enter {
  animation: lg-page-in 0.55s var(--ease) both;
}
@keyframes lg-page-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* 详情页 section 逐个入场（lg.js 给 .section 加 stagger 类） */
.section.lg-stagger { animation: lg-sec-in 0.6s var(--ease) both; }
@keyframes lg-sec-in {
  from { opacity: 0; transform: translateY(26px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- 点击涟漪 ---------- */
.lg-ripple {
  position: fixed; z-index: 250; pointer-events: none;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 24px var(--accent-soft), inset 0 0 12px var(--accent-soft);
  animation: lg-ripple 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes lg-ripple {
  from { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
  to   { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}

/* ---------- 搜索框聚焦折射脉冲 ---------- */
.header-search input {
  background: var(--lg-tint, rgba(255,255,255,0.4)); -webkit-backdrop-filter: var(--lg-bf-wk, blur(10px)); backdrop-filter: var(--lg-bf, blur(10px));
  border-radius: 999px;
}
[data-theme="dark"] .header-search input { background: rgba(20,27,42,0.55); }
.header-search input:focus {
  box-shadow: 0 0 0 3px var(--accent-soft), 0 8px 28px var(--accent-soft);
}

/* hero 本体不参与任何位移动画（防弹跳感） */
.hero { transition: none; }

/* ============================================================
   移动端 & 无障碍保护
   ============================================================ */
@media (max-width: 768px) {
  #lg-aurora { animation-duration: 64s; }
  #lg-beam { display: none; }        /* 移动端砍光束（GPU 大面积合成） */
  .lg-orb { display: none; }          /* 光球依赖指针，触屏无意义 */
  .issue-card, .hero-stats, .metric-card, .text-block, .toolbar .pill,
  .header, .header-search input {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);   /* 轻磨砂，去掉重滤镜 */
  }
  .page-enter, .section.lg-stagger { animation-duration: 0.4s; filter: none; }
  .lg-ripple { display: none; }  /* 触屏不做鼠标涟漪 */
}

@media (prefers-reduced-motion: reduce) {
  #lg-aurora, #lg-beam, .hero-bg::before, .hero-bg::after, .hero-sheen, .hero h1 { animation: none; }
  #lg-stars { display: none; }
  .hero h1 { -webkit-text-fill-color: rgba(255,255,255,0.96); background: none; }
  .lg-orb { transition: none; }
  .issue-card.tilt { transform: none; }
  .page-enter, .section.lg-stagger, .lg-ripple { animation: none !important; opacity: 1; filter: none; }
}
@media (max-width: 768px) {
  #lg-stars { opacity: 0.5; }            /* 移动端减半粒子亮度 */
  .hero-sheen { display: none; }
  .hero-bg::before, .hero-bg::after { animation-duration: 34s; }
  .issue-card.tilt { transform: none; }
}

/* 真折射: lg.js 检测 Chromium 后给 <html> 加 .lg-refract，
   backdrop-filter 换成 SVG 位移滤镜 URL + 基础磨砂叠加 */
html.lg-refract .lg,
html.lg-refract .issue-card {
  -webkit-backdrop-filter: url(#lg-refract-f) blur(3px) saturate(155%);
  backdrop-filter: url(#lg-refract-f) blur(3px) saturate(155%);
}