/* ═══════════════════════════════════════════════════════════════
   Visual System v2 · Layered Glass
   Mirror atmosphere layer — sits on top of system-v1.
   Philosophy: 镜子 × 水 × 景深
   Not geek, not spa. Intimate, deep, quietly alive.
   ═══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   1. TOKEN SHIFT — redirect ambient colors to ink-blue-black
   These override v1 values; every existing .vs-* / .mh-* / .card
   inherits the new mood automatically.
   ────────────────────────────────────────────────────────────── */

:root {
  /* 底色家族：从中性深灰 → 墨蓝黑（加 4° 蓝偏） */
  --vs-bg-0: #0A0E1A;           /* 主背景 — 深夜水面 */
  --vs-bg-1: #0F1524;           /* 次级 — 玻璃底 */
  --vs-bg-2: #131A2C;           /* 强容器 — 下沉一步 */

  /* 最深潜像层（桌面两侧水面，比 bg-0 只深 1 档，避免"中间亮两侧死黑"） */
  --vs-bg-deep: #070A14;

  /* 线层微调（颜色不变，但底换了，视觉权重自然跟着走） */
  --vs-line-0: rgba(232, 217, 182, 0.06);   /* 极弱，带微暖 */
  --vs-line-1: rgba(232, 217, 182, 0.12);   /* 常规 */
  --vs-line-2: rgba(232, 217, 182, 0.20);   /* 强 */

  /* 文字层（近白改为微暖白，呼应月光色） */
  --vs-text-0: #F2EEE4;         /* 主标题 — 暖白（不是纯白） */
  --vs-text-1: #B8B3A5;         /* 次级 */
  --vs-text-2: #6B6558;         /* 元信息 */

  /* 次强调：从钛灰蓝改为深海青（略压暗） */
  --vs-accent: #7591A8;

  /* 主强调：月光白/暖金 — 罕用，只在核心动作 & 激活 lens */
  --vs-accent-moon: #E8D9B6;
  --vs-accent-moon-faint: rgba(232, 217, 182, 0.10);

  /* 警示（极罕见）— 暖褐红 */
  --vs-warn-soft: #C97B63;

  /* ── Glass Material 3 档 ── */
  --vs-glass-1-bg: rgba(255, 255, 255, 0.045);
  --vs-glass-1-border: rgba(232, 217, 182, 0.12);
  --vs-glass-1-blur: 16px;

  --vs-glass-2-bg: rgba(255, 255, 255, 0.025);
  --vs-glass-2-border: rgba(232, 217, 182, 0.08);
  --vs-glass-2-blur: 24px;

  --vs-glass-3-bg: rgba(255, 255, 255, 0.012);
  --vs-glass-3-border: rgba(232, 217, 182, 0.05);
  --vs-glass-3-blur: 40px;

  /* ── Motion ── */
  --vs-motion-breath: 9s;
  --vs-motion-surface: 1000ms;
  --vs-motion-soft: 600ms;
  --vs-motion-quick: 280ms;
  --vs-ease-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --vs-ease-deep: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Serif stack — 中文 Hero 专用 ── */
  --vs-serif-hero: 'LXGW WenKai Screen', 'Noto Serif SC', 'Source Han Serif SC',
                   'Songti SC', 'STSong', 'SimSun', 'Georgia', serif;
}


/* ──────────────────────────────────────────────────────────────
   2. ATMOSPHERE — body 两侧最深 + .app 中心玻璃剧场
   桌面上 .app 是 400px 窄条，如果氛围在 body 全屏，会造成
   "中间 vs 两侧"割裂。策略：
   - body: 全屏最深（bg-deep）
   - .app: 墨蓝黑 + 氛围光源 + 呼吸（氛围就发生在 app 内部）
   - 两侧空间干净单色，跟中心形成"聚光灯照在剧场"的统一感
   ────────────────────────────────────────────────────────────── */

html, body {
  background: var(--vs-bg-deep) !important;
  color: var(--vs-text-1);
}

/* 永远保留滚动条位置 — 防止 .app 在滚动条出现/消失时左右漂 */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;  /* fallback：老浏览器无 scrollbar-gutter 时永远显示滚动条 */
}

body {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  /* 桌面/平板两侧也要"活"的水面 —— 全屏极淡 ambient
     NOTE: 去掉 background-attachment: fixed 避免 scroll 时逐帧重绘 */
  background-image:
    radial-gradient(
      ellipse 120% 60% at 50% 0%,
      rgba(117, 145, 168, 0.06) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 140% 80% at 50% 100%,
      rgba(232, 217, 182, 0.025) 0%,
      transparent 60%
    ) !important;
}

/* .app 自成一座玻璃剧场，但不是"孤岛"
   —— 用柔大 halo + 细边光跟两侧水面自然衔接
   NOTE: box-shadow 从 200px 简化到 120px，降低滚动时合成负担 */
.app {
  position: relative;
  z-index: 2;
  background:
    radial-gradient(
      ellipse 60% 30% at 50% -5%,
      rgba(117, 145, 168, 0.10) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 40% at 50% 105%,
      rgba(232, 217, 182, 0.05) 0%,
      transparent 55%
    ),
    var(--vs-bg-0) !important;
  box-shadow:
    0 0 0 1px rgba(232, 217, 182, 0.03),
    0 0 60px 20px rgba(117, 145, 168, 0.05),
    0 0 120px 40px rgba(10, 14, 26, 0.25);
}

/* .app 内部的氛围光源（静态，不用动画避免滚动流页抖动）
   呼吸感挪到 mh-main::after 月盘、签名线、星云上，它们都在固定尺寸容器内 */
.app::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 70% 40% at 30% 15%,
      rgba(117, 145, 168, 0.08) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 60% 35% at 70% 80%,
      rgba(232, 217, 182, 0.05) 0%,
      transparent 65%
    );
  border-radius: inherit;
}

/* 颗粒噪点 — 极淡，限定在 app 内（无动画） */
.app::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  border-radius: inherit;
}

/* 滚动流页（rehearsal/chat 对话流 / 洞察 / 档案等）进一步禁用
   会因 .app 尺寸变化而抖动的呼吸元素
   —— 签名线、月盘这些是 display:none 默认，只在主页/洞察 hero 显示，不受影响 */
#pg-rehearsal .mh-main::after,
#pg-chat .mh-main::after {
  animation: none !important;
}

/* .app 所有直接子元素浮在氛围层之上 */
.app > * {
  position: relative;
  z-index: 2;
}

/* mir-breath 已弃用（太慢看不到），动效集中在 Section 16c */

/* 所有 #pg-* 页面容器透底，露出 .app 氛围 */
.page {
  background: transparent !important;
}


/* ──────────────────────────────────────────────────────────────
   3. GLASS MATERIAL CLASSES
   用在需要"看得透又不透底"的 surface 上。
   3 档景深：近=清晰 / 中=稳定 / 远=沉积。
   ────────────────────────────────────────────────────────────── */

.mir-glass,
.mir-glass-1 {
  position: relative;
  background: var(--vs-glass-1-bg);
  backdrop-filter: blur(var(--vs-glass-1-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--vs-glass-1-blur)) saturate(140%);
  border: 1px solid var(--vs-glass-1-border);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.35);
}

.mir-glass-2 {
  position: relative;
  background: var(--vs-glass-2-bg);
  backdrop-filter: blur(var(--vs-glass-2-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--vs-glass-2-blur)) saturate(130%);
  border: 1px solid var(--vs-glass-2-border);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mir-glass-3 {
  position: relative;
  background: var(--vs-glass-3-bg);
  backdrop-filter: blur(var(--vs-glass-3-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--vs-glass-3-blur)) saturate(120%);
  border: 1px solid var(--vs-glass-3-border);
  border-radius: 10px;
  filter: blur(0.2px);  /* 景深模拟 */
  opacity: 0.92;
}

/* 悬停时玻璃"哈气散掉"变清晰 */
.mir-glass-hover,
.mir-glass-1.is-interactive,
.mir-glass-2.is-interactive {
  transition: backdrop-filter var(--vs-motion-quick),
              border-color var(--vs-motion-quick),
              background var(--vs-motion-quick);
  cursor: pointer;
}
.mir-glass-hover:hover,
.mir-glass-1.is-interactive:hover,
.mir-glass-2.is-interactive:hover {
  border-color: var(--vs-accent-moon-faint);
  background: rgba(255, 255, 255, 0.055);
}


/* ──────────────────────────────────────────────────────────────
   4. LIQUID GLASS — refraction via SVG feDisplacementMap
   Apple liquid-glass 风格：玻璃底下文字轻微扭曲。
   仅 Chromium 稳定生效；Safari/Firefox 降级为纯 blur + grain。
   ────────────────────────────────────────────────────────────── */

.mir-liquid {
  position: relative;
  isolation: isolate;
}

/* Chromium 才生效的折射层 */
@supports (backdrop-filter: url(#x)) {
  .mir-liquid::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    backdrop-filter: url(#mir-liquid-filter) blur(2px);
    -webkit-backdrop-filter: url(#mir-liquid-filter) blur(2px);
    border-radius: inherit;
    z-index: -1;
  }
}

/* 高光带（所有浏览器都生效） */
.mir-liquid::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 217, 182, 0.35) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}


/* ──────────────────────────────────────────────────────────────
   5. HERO SERIF — 中文 Hero 衬线
   仅用于钩子句 / 引文 / 单句观察。正文不要换。
   ────────────────────────────────────────────────────────────── */

.mir-hero-serif {
  font-family: var(--vs-serif-hero);
  font-weight: 300;                    /* 宋体 Light 质感 */
  letter-spacing: 0.02em;
  line-height: 1.65;
  font-feature-settings: "palt" 1;     /* CJK 紧排 */
}

.mir-hero-serif-lg {
  font-family: var(--vs-serif-hero);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--vs-text-0);
}


/* ──────────────────────────────────────────────────────────────
   6. MOTION PRIMITIVES
   所有 keyframes 集中在 Section 16c 定义，这里不再重复。
   ────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────
   7. GHOST BUTTON REFINEMENT
   保留 .btn/.btn-primary/.btn-ghost 现有 class，仅升级视觉语言。
   ────────────────────────────────────────────────────────────── */

.btn,
.btn-primary,
.btn-ghost,
.vs-btn {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--vs-line-1) !important;
  transition: border-color var(--vs-motion-quick),
              background var(--vs-motion-quick),
              box-shadow var(--vs-motion-quick) !important;
  letter-spacing: 0.01em;
}

@media (hover: hover) {
  .btn:hover,
  .btn-primary:not(:disabled):hover,
  .btn-ghost:hover,
  .vs-btn:hover {
    border-color: var(--vs-accent-moon-faint) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow:
      inset 0 1px 0 rgba(232, 217, 182, 0.12),
      0 4px 20px rgba(0, 0, 0, 0.3) !important;
  }
}

.btn:active,
.btn-primary:not(:disabled):active,
.btn-ghost:active {
  transform: translateY(1px);
}

/* text-only button — 轻描淡写的入口 */
.btn-text {
  letter-spacing: 0.03em;
  transition: color var(--vs-motion-quick), opacity var(--vs-motion-quick);
}
@media (hover: hover) {
  .btn-text:hover {
    color: var(--vs-accent-moon) !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   8. INPUT & TEXTAREA — 下边线 + 玻璃呼吸
   ────────────────────────────────────────────────────────────── */

textarea,
input[type="text"],
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  background: rgba(255, 255, 255, 0.02) !important;
  border: none !important;
  border-bottom: 1px solid var(--vs-line-1) !important;
  border-radius: 6px 6px 0 0 !important;
  transition: border-color var(--vs-motion-quick),
              background var(--vs-motion-quick) !important;
}

textarea:focus,
input[type="text"]:focus,
input:focus {
  border-bottom-color: var(--vs-accent-moon) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  outline: none !important;
  box-shadow: 0 1px 0 var(--vs-accent-moon-faint);
}


/* ──────────────────────────────────────────────────────────────
   9. CARD / SURFACE SOFTENING
   系统里现有 .card / .surface-card / .overview-card 已经是"透明+左边线"。
   在玻璃氛围下它们还需要一点呼吸边距和 hover 过渡。
   ────────────────────────────────────────────────────────────── */

.card,
.surface-card,
.overview-card,
.vs-surface {
  transition: border-left-color var(--vs-motion-quick),
              background var(--vs-motion-quick),
              opacity var(--vs-motion-quick);
}


/* ──────────────────────────────────────────────────────────────
   10. HAIRLINE RULE SOFTENING
   系统里的 hr / .vs-rule / .section-divider 在玻璃底下太硬。
   改为渐隐光带。
   ────────────────────────────────────────────────────────────── */

.vs-rule,
.section-divider,
hr {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--vs-line-0) 20%,
    var(--vs-line-1) 50%,
    var(--vs-line-0) 80%,
    transparent 100%) !important;
}


/* ──────────────────────────────────────────────────────────────
   11. PAGE TRANSITIONS — deeper fade
   ────────────────────────────────────────────────────────────── */

@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page.active {
  animation: pageIn 500ms var(--vs-ease-deep) both !important;
}


/* ──────────────────────────────────────────────────────────────
   12. HOME · 呼吸光点（关系网入口升级）
   把 mh-network-entry 变成一个"会呼吸的星云卡"。
   ────────────────────────────────────────────────────────────── */

#pg-mirror-home .mh-net-card {
  position: relative;
  border: none !important;
  border-top: 1px solid var(--vs-line-0) !important;
  padding: var(--vs-sp-6) var(--vs-sp-4) !important;
  overflow: hidden;
  transition: background var(--vs-motion-soft) var(--vs-ease-gentle);
}

/* .mh-net-card::before 由 Section 16c 定义为 2 颗闪星 */

/* 关系小圆点升级为柔光点 */
#pg-mirror-home .mh-net-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vs-accent);
  box-shadow: 0 0 8px rgba(117, 145, 168, 0.6);
  margin-right: 8px;
  vertical-align: middle;
}
#pg-mirror-home .mh-net-dot--accent {
  background: var(--vs-accent-moon);
  box-shadow: 0 0 10px rgba(232, 217, 182, 0.55);
}
#pg-mirror-home .mh-net-dot--muted {
  background: var(--vs-text-2);
  box-shadow: 0 0 6px rgba(107, 101, 88, 0.4);
}


/* ──────────────────────────────────────────────────────────────
   12b. SIGNATURE · 全站 A1 ♦ 月光晕（catch-all）
   不限定位置，所有页面的 A1 svg 都会发月光。
   ────────────────────────────────────────────────────────────── */

#pg-mirror-home svg,
#pg-insight svg,
#pg-mirror-detail svg,
.vs-exp-hero__mark svg,
.mirror-mark svg,
.md-lead-mark svg {
  filter: drop-shadow(0 0 8px rgba(232, 217, 182, 0.55))
          drop-shadow(0 0 18px rgba(117, 145, 168, 0.28));
  transition: filter var(--vs-motion-soft);
}

/* 不应用到 chat 图标按钮这些功能性 SVG */
#pg-chat svg,
#chat-image-btn svg,
#chat-voice-btn svg,
#chat-image-remove svg {
  filter: none !important;
}


/* ──────────────────────────────────────────────────────────────
   12b-2. HOME · Hero 左侧月光签名线
   "这一段是你" 的视觉锚点，永远可见，独家识别符号。
   ────────────────────────────────────────────────────────────── */

#pg-mirror-home .mh-main-line-wrap {
  position: relative;
  padding-left: 18px;
}

#pg-mirror-home .mh-main-line-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(232, 217, 182, 0) 0%,
    rgba(232, 217, 182, 0.55) 25%,
    rgba(232, 217, 182, 0.3) 75%,
    rgba(232, 217, 182, 0) 100%);
  box-shadow:
    0 0 8px rgba(232, 217, 182, 0.4),
    0 0 16px rgba(117, 145, 168, 0.2);
}


/* ──────────────────────────────────────────────────────────────
   12b-3. HOME · Hero 右上月盘（非对称视觉锚）
   一个极淡月轮，非对称放在 Hero 右上，打破克制的中轴感。
   ────────────────────────────────────────────────────────────── */

#pg-mirror-home .mh-main {
  overflow: visible;   /* 保留月盘溢出到 .app 右侧的一小部分 */
}

#pg-mirror-home .mh-main::after {
  content: '';
  position: absolute;
  right: 8%;          /* 手机上 right:-8% 会被 overflow-x:hidden 裁掉，改到 app 内 */
  top: -6%;
  width: 200px;
  height: 200px;
  max-width: 55%;     /* 手机窄屏时自动收缩，保证不溢出 */
  max-height: 200px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    circle at center,
    rgba(232, 217, 182, 0.14) 0%,
    rgba(232, 217, 182, 0.05) 28%,
    rgba(117, 145, 168, 0.02) 55%,
    transparent 70%
  );
}


/* ──────────────────────────────────────────────────────────────
   12c. HOME · 关系网卡片星云背景
   在 mh-net-card 里叠一层极淡的 SVG 光点阵，暗示"星图/网"的存在
   但不落成具体"节点+连线"——保持 Mirror 的镜子哲学。
   ────────────────────────────────────────────────────────────── */

#pg-mirror-home .mh-net-card {
  position: relative;
  isolation: isolate;
}

#pg-mirror-home .mh-net-card::after {
  content: '';
  position: absolute;
  right: 4%;
  top: 8%;
  width: 65%;
  height: 88%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
  background-image:
    radial-gradient(2.5px 2.5px at 18% 28%, rgba(232, 217, 182, 0.95), transparent 60%),
    radial-gradient(3.5px 3.5px at 58% 18%, rgba(117, 145, 168, 0.85), transparent 60%),
    radial-gradient(2px 2px at 42% 68%, rgba(232, 217, 182, 0.7), transparent 60%),
    radial-gradient(2.5px 2.5px at 80% 48%, rgba(117, 145, 168, 0.75), transparent 60%),
    radial-gradient(3px 3px at 15% 78%, rgba(232, 217, 182, 0.6), transparent 60%),
    radial-gradient(2px 2px at 88% 82%, rgba(117, 145, 168, 0.65), transparent 60%),
    radial-gradient(4px 4px at 50% 48%, rgba(232, 217, 182, 0.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 72% 72%, rgba(232, 217, 182, 0.5), transparent 60%),
    radial-gradient(2.2px 2.2px at 32% 88%, rgba(117, 145, 168, 0.55), transparent 60%);
  filter: drop-shadow(0 0 3px rgba(232, 217, 182, 0.4));
}


/* ──────────────────────────────────────────────────────────────
   12d. HOME · dots 升级为呼吸光点（更大，更明显）
   原 6px 太小，改成 9px + 外光晕。
   ────────────────────────────────────────────────────────────── */

#pg-mirror-home .mh-net-dot {
  width: 9px;
  height: 9px;
  margin-right: 10px;
  box-shadow:
    0 0 12px currentColor,
    0 0 20px rgba(232, 217, 182, 0.3);
}


/* ──────────────────────────────────────────────────────────────
   13. HOME · 主视觉 Hero 升级（衬线 + 呼吸）
   ────────────────────────────────────────────────────────────── */

#pg-mirror-home .mh-main {
  position: relative;
  padding: var(--vs-sp-8) 0 var(--vs-sp-8) 0 !important;
}

#pg-mirror-home .mh-main::before {
  content: '';
  position: absolute;
  left: -20%; top: 0; bottom: 0; width: 140%;
  background: radial-gradient(
    ellipse 60% 80% at 30% 50%,
    rgba(232, 217, 182, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

#pg-mirror-home .mh-main-line-wrap .vs-exp-hero__sentence {
  font-family: var(--vs-serif-hero);
  font-weight: 400;
  font-size: 22px !important;
  letter-spacing: 0.02em;
  line-height: 1.8 !important;
}

#pg-mirror-home .mh-main-label {
  font-family: 'SF Mono', 'Cascadia Code', monospace;
  letter-spacing: 0 !important;
  color: var(--vs-accent-moon) !important;
  opacity: 0.55 !important;
}
#pg-mirror-home .mh-main-label .u-wordmark {
  letter-spacing: 0.22em !important;
}


/* ──────────────────────────────────────────────────────────────
   14. INSIGHT · Liquid Glass hero + 滚动景深
   ────────────────────────────────────────────────────────────── */

#pg-insight {
  position: relative;
  padding-top: var(--vs-sp-5);
}

/* Hero 区包裹玻璃折射 */
#pg-insight #insight-hero-zone {
  position: relative;
  padding: var(--vs-sp-6) var(--vs-sp-4);
  margin: 0 calc(-1 * var(--vs-sp-4)) var(--vs-sp-4);
  background: var(--vs-glass-1-bg);
  backdrop-filter: blur(var(--vs-glass-1-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--vs-glass-1-blur)) saturate(130%);
  border: 1px solid var(--vs-glass-1-border);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  isolation: isolate;
}

/* Liquid Glass 折射 —— 只作用于玻璃材质本身（背景被折射），
   文字在 z-index: 2 前景不受影响，100% 清晰可读。
   Chromium 138+ 支持；其他浏览器静默降级为现有 blur（看起来一样好）。 */
@supports (backdrop-filter: url(#mir-liquid-filter)) {
  #pg-insight #insight-hero-zone {
    backdrop-filter:
      url(#mir-liquid-filter)
      blur(var(--vs-glass-1-blur))
      saturate(130%);
    -webkit-backdrop-filter:
      url(#mir-liquid-filter)
      blur(var(--vs-glass-1-blur))
      saturate(130%);
  }
}

/* 确保 hero 内容在折射层之上，文字绝不扭曲 */
#pg-insight #insight-hero-zone > * {
  position: relative;
  z-index: 2;
}

/* 月光高光带 */
#pg-insight #insight-hero-zone::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 217, 182, 0.5) 50%,
    transparent 100%);
  pointer-events: none;
}

/* 底部月光漫反射（让下缘发光融入背景） */
#pg-insight #insight-hero-zone::after {
  content: '';
  position: absolute;
  left: -10%; right: -10%;
  bottom: -60%;
  height: 120%;
  background: radial-gradient(
    ellipse 50% 40% at center top,
    rgba(232, 217, 182, 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: -1;
}

/* Hero 文字升级为衬线 */
#pg-insight #insight-hero-zone .vs-exp-hero__sentence,
#pg-insight #insight-hero-zone .t-display,
#pg-insight #insight-hero-zone .t-hero {
  font-family: var(--vs-serif-hero);
  font-weight: 400 !important;
  font-size: 22px !important;
  letter-spacing: 0.02em;
  line-height: 1.75 !important;
  color: var(--vs-text-0) !important;
}

/* lens 区：每条 item 进入景深（越下越淡） */
#pg-insight #insight-lenses .il-item {
  border-left: 1px solid var(--vs-line-1) !important;
  padding: var(--vs-sp-4) var(--vs-sp-4) !important;
  margin-bottom: var(--vs-sp-3) !important;
  background: rgba(255, 255, 255, 0.015);
  border-radius: 0 8px 8px 0;
  transition: background var(--vs-motion-quick);
}

#pg-insight #insight-lenses .il-item:hover {
  background: rgba(255, 255, 255, 0.035);
}

/* 每条 lens 都该看清（不做景深模糊 —— 违反 Mirror 不装饰哲学）
   保留极轻微 opacity 递减只是为了呼吸感，不影响可读 */
#pg-insight #insight-lenses .il-item:nth-child(n+4) {
  opacity: 0.95;
}

/* focus 行改柔光带 */
#pg-insight #insight-focus {
  color: var(--vs-accent-moon) !important;
  padding: 6px 10px;
  display: inline-block !important;
  border-radius: 6px;
  background: var(--vs-accent-moon-faint);
}


/* ──────────────────────────────────────────────────────────────
   15. CHAT composer · 水纹氛围 + 玻璃输入
   pg-chat 是"一次性发起"composer，不是传统对话流。
   我们给它加：
   - 头部一圈月光呼吸
   - textarea 变成"可书写的水面"
   - 提交按钮变 Liquid Glass
   ────────────────────────────────────────────────────────────── */

#pg-chat {
  position: relative;
  padding-top: var(--vs-sp-6);
}

#pg-chat::before {
  content: '';
  position: absolute;
  top: 0; left: -10%; right: -10%;
  height: 180px;
  background: radial-gradient(
    ellipse 60% 80% at 50% 0%,
    rgba(232, 217, 182, 0.08) 0%,
    rgba(117, 145, 168, 0.04) 30%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* 主提示句升级衬线 */
#pg-chat h2.t-title {
  font-family: var(--vs-serif-hero);
  font-weight: 400;
  font-size: 20px !important;
  letter-spacing: 0.03em;
  line-height: 1.75 !important;
  color: var(--vs-text-0);
}

/* textarea 升级为"可书写的水面" */
#pg-chat #chat-input {
  padding: 18px 16px !important;
  border: 1px solid var(--vs-line-0) !important;
  border-bottom: 1px solid var(--vs-line-1) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.035) 0%,
      rgba(255, 255, 255, 0.01) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 20px rgba(0, 0, 0, 0.15);
  font-size: 14px !important;
  line-height: 1.85 !important;
}

#pg-chat #chat-input:focus {
  border-color: var(--vs-accent-moon-faint) !important;
  border-bottom-color: var(--vs-accent-moon) !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(232, 217, 182, 0.02) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.12),
    0 6px 28px rgba(0, 0, 0, 0.25);
}

/* 对象归属选择条升级 */
#pg-chat #chat-object-picker {
  padding: 12px 14px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--vs-line-0) !important;
  border-left: 2px solid var(--vs-accent-moon) !important;
  border-radius: 8px !important;
}


/* ──────────────────────────────────────────────────────────────
   16b. COLD-START OPTION CARDS · 主副标签对齐修复
   老 .cs-gender-card 是 text-align:center + .cs-card-hint 的 margin-left:10px，
   主标签宽度不一时副字参差。改为 flex + baseline + 统一间距。
   ────────────────────────────────────────────────────────────── */

.cs-gender-card {
  display: flex !important;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  padding: 16px 18px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  transition: border-color var(--vs-motion-quick),
              background var(--vs-motion-quick),
              color var(--vs-motion-quick) !important;
}

@media (hover: hover) {
  .cs-gender-card:hover {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: var(--vs-accent-moon-faint) !important;
  }
}

.cs-card-hint {
  margin-left: 0 !important;   /* 用 gap 代替 */
  opacity: 0.5;
  font-weight: 400;
}


/* ──────────────────────────────────────────────────────────────
   16c. MOTION LAYER · 3 个动效（有语义，不只是装饰）
   ① 月光流：签名线静态 + 月光滴从顶滑到底（时间/观察在流过）
   ② 星闪：平时 1 颗主星柔呼吸；`.has-update` class 时 3 颗齐闪（变化提示）
   ③ Hero 浮现：一次性入场
   所有 keyframes 集中在这里，不散布其他位置。
   ────────────────────────────────────────────────────────────── */

/* 签名线容器 */
#pg-mirror-home .mh-main-line-wrap,
#pg-mirror-home #mh-empty {
  position: relative;
}

#pg-mirror-home .mh-main-line-wrap {
  padding-left: 18px;
}

#pg-mirror-home #mh-empty {
  padding: var(--vs-sp-10) 0 var(--vs-sp-8) 18px;
  min-height: 220px;
}


/* ① 签名线 —— 静态细线（不动） */
#pg-mirror-home .mh-main-line-wrap::before,
#pg-mirror-home #mh-empty::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 20%;
  width: 1.5px;
  border-radius: 1px;
  background: linear-gradient(180deg,
    rgba(232, 217, 182, 0) 0%,
    rgba(232, 217, 182, 0.6) 25%,
    rgba(232, 217, 182, 0.4) 75%,
    rgba(232, 217, 182, 0) 100%);
  box-shadow: 0 0 5px rgba(232, 217, 182, 0.3);
}

/* 月光滴沿签名线滑落（hero 态才有，空态不流 —— 观察未发生） */
@keyframes mir-drop-fall {
  0%   { top: 0;   opacity: 0; }
  8%   { top: 0;   opacity: 1; }
  62%  { top: 88%; opacity: 1; }
  68%  { top: 88%; opacity: 0; }
  100% { top: 0;   opacity: 0; }
}

#pg-mirror-home .mh-main-line-wrap::after {
  content: '';
  position: absolute;
  left: -1px;
  width: 3.5px;
  height: 12px;
  top: 0;
  border-radius: 2px;
  background: radial-gradient(ellipse at center,
    rgba(232, 217, 182, 1) 0%,
    rgba(232, 217, 182, 0.6) 45%,
    rgba(232, 217, 182, 0) 100%);
  box-shadow:
    0 0 8px rgba(232, 217, 182, 0.85),
    0 0 16px rgba(117, 145, 168, 0.3);
  animation: mir-drop-fall 5s ease-in-out infinite;
  pointer-events: none;
}


/* ② 星闪 —— 平时 1 颗主星柔呼吸 */
@keyframes mir-star-breath {
  0%, 100% {
    opacity: 0.5;
    filter: drop-shadow(0 0 4px rgba(232, 217, 182, 0.4));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(232, 217, 182, 0.85));
  }
}

#pg-mirror-home .mh-net-card::before {
  content: '';
  position: absolute;
  right: 22%;
  top: 42%;
  width: 32px;
  height: 32px;
  pointer-events: none;
  background-image:
    radial-gradient(5px 5px at 50% 50%, rgba(232, 217, 182, 1), transparent 55%);
  animation: mir-star-breath 3.8s ease-in-out infinite;
}

/* 关系网有变化时 —— JS 给 .mh-net-card 加 .has-update class 时激活 */
@keyframes mir-star-alert {
  0%, 100% {
    opacity: 0.55;
    filter: drop-shadow(0 0 5px rgba(232, 217, 182, 0.5));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(232, 217, 182, 1));
  }
}

#pg-mirror-home .mh-net-card.has-update::before {
  right: 10%;
  top: 20%;
  width: 60%;
  height: 60%;
  background-image:
    radial-gradient(5px 5px at 22% 30%, rgba(232, 217, 182, 1), transparent 55%),
    radial-gradient(6px 6px at 50% 55%, rgba(232, 217, 182, 1), transparent 55%),
    radial-gradient(5px 5px at 78% 72%, rgba(232, 217, 182, 1), transparent 55%);
  animation: mir-star-alert 1.8s ease-in-out infinite;
}


/* ③ Hero 首次进入浮现（一次性） */
@keyframes mir-hero-rise {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

#pg-mirror-home .mh-main:not([style*="display: none"]):not([style*="display:none"]) {
  animation: mir-hero-rise 900ms var(--vs-ease-deep) both;
}


/* ④ 水纹涌现 —— 月光仪式
   用在：深度模式完成 / 跨对象发现首次浮现
   设计：月光从顶部"洒下" —— inset box-shadow 月光白（#E8D9B6）+ 顶部光带 + 外辉光
   只作用于 box-shadow + border，不动 opacity/transform，文字始终清晰。
   挂载：JS 加 .mir-water-reveal class，1.9s 后移除 */
@keyframes mir-water-reveal {
  0% {
    box-shadow:
      inset 0 150px 70px -30px rgba(232, 217, 182, 0.45),
      inset 0 2px 0 rgba(232, 217, 182, 0.65),
      0 0 60px rgba(232, 217, 182, 0.22);
    border-color: rgba(232, 217, 182, 0.5);
  }
  30% {
    box-shadow:
      inset 0 110px 65px -28px rgba(232, 217, 182, 0.33),
      inset 0 1px 0 rgba(232, 217, 182, 0.5),
      0 0 55px rgba(232, 217, 182, 0.17);
    border-color: rgba(232, 217, 182, 0.4);
  }
  55% {
    box-shadow:
      inset 0 75px 55px -28px rgba(232, 217, 182, 0.2),
      inset 0 1px 0 rgba(232, 217, 182, 0.32),
      0 0 48px rgba(232, 217, 182, 0.11);
    border-color: rgba(232, 217, 182, 0.28);
  }
  75% {
    box-shadow:
      inset 0 40px 40px -25px rgba(232, 217, 182, 0.11),
      inset 0 1px 0 rgba(232, 217, 182, 0.22),
      0 6px 40px rgba(0, 0, 0, 0.35);
    border-color: rgba(232, 217, 182, 0.18);
  }
  90% {
    box-shadow:
      inset 0 16px 24px -20px rgba(232, 217, 182, 0.05),
      inset 0 1px 0 rgba(232, 217, 182, 0.15),
      0 10px 40px rgba(0, 0, 0, 0.35);
    border-color: rgba(232, 217, 182, 0.14);
  }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(232, 217, 182, 0.12),
      0 12px 40px rgba(0, 0, 0, 0.35);
    border-color: var(--vs-glass-1-border);
  }
}

/* 更柔的 ease-in-out（ease-deep 前快后快会让尾部塌陷） */
.mir-water-reveal {
  animation: mir-water-reveal 2500ms cubic-bezier(0.33, 0, 0.4, 1) both !important;
}


/* Empty 态月盘（静态，不抢注意力） */
#pg-mirror-home #mh-empty::after {
  content: '';
  position: absolute;
  right: 8%;
  top: -10%;
  width: 180px;
  height: 180px;
  max-width: 55%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    circle at center,
    rgba(232, 217, 182, 0.10) 0%,
    rgba(232, 217, 182, 0.035) 28%,
    rgba(117, 145, 168, 0.015) 55%,
    transparent 70%
  );
}


/* Reduced motion 全禁 */
@media (prefers-reduced-motion: reduce) {
  #pg-mirror-home .mh-main-line-wrap::after,
  #pg-mirror-home .mh-net-card::before,
  #pg-mirror-home .mh-main {
    animation: none !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   17a. NETWORK · GLASS WALL v2 (镜我画廊 · 四层尺度)
   每人一块 Liquid Glass 玻璃片。按对象数 N 自适应四档：
     Intimate (1-10)  · 大玻璃完整材质
     Gallery  (11-30) · 中玻璃 masonry
     Monument (31-100)· 小玻璃 + 按 relation_type 分段
     Cathedral (100+) · 名片 chip 密铺，密度即艺术
   共性不再画线（廉价+N 大了意义丢失），升舱为 "✦ 共同的线" 章节卡片。
   Focus 态才启用 Liquid Glass 折射（其他静态，节流）。
   ────────────────────────────────────────────────────────────── */

/* Network page surface 已由 system-v1.css 设定，这里只管 glass wall 自己 */

/* ══════════════════════════════════════════════════════
   Hero 总领
   ══════════════════════════════════════════════════════ */
#pg-network .vs-net-hero {
  position: relative;
  padding: 6px 0 16px;
  padding-right: 72px;
  margin-bottom: 0;
}
#pg-network .vs-net-hero__share {
  position: absolute;
  top: 4px;
  right: 0;
  padding: 8px 10px;
  min-height: 36px;
}
#pg-network .vs-net-hero__title {
  font-family: 'Songti SC', 'Source Han Serif SC', 'Source Han Serif CN', serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--vs-text-0);
  margin: 0;
}
#pg-network .vs-net-hero__sub {
  font-size: 11px;
  color: var(--vs-text-2);
  margin-top: 10px;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════
   Toolbar · search + sort chips （N >= 5 才挂载）
   ══════════════════════════════════════════════════════ */
.vs-net-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0 18px;
  min-height: 28px;
  flex-wrap: nowrap;
}
.vs-net-sort {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.vs-net-sort__chip {
  font-size: 10.5px;
  color: var(--vs-text-2);
  background: transparent;
  border: none;
  padding: 4px 7px;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 180ms, color 180ms;
  white-space: nowrap;
  font-family: inherit;
}
@media (max-width: 400px) {
  .vs-net-sort__chip {
    font-size: 10px;
    padding: 4px 6px;
  }
}
.vs-net-sort__chip:hover { opacity: 0.8; }
.vs-net-sort__chip.is-active {
  color: var(--vs-accent-moon);
  opacity: 1;
}
.vs-net-sort__chip.is-active::before {
  content: '· ';
  opacity: 0.6;
}

/* 视角 toggle (Monument/Cathedral 才显示) —— 类型 | 共性 */
.vs-net-view {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-left: 10px;
  border-left: 1px solid rgba(232, 217, 182, 0.1);
}
.vs-net-view__label {
  font-size: 10px;
  color: var(--vs-text-2);
  letter-spacing: 0.1em;
  opacity: 0.4;
  margin-right: 3px;
}
.vs-net-view__chip {
  font-size: 10.5px;
  color: var(--vs-text-2);
  background: transparent;
  border: none;
  padding: 4px 6px;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 180ms, color 180ms;
}
.vs-net-view__chip:hover { opacity: 0.8; }
.vs-net-view__chip.is-active {
  color: var(--vs-accent-moon);
  opacity: 1;
}
.vs-net-view__sep {
  color: var(--vs-text-2);
  opacity: 0.3;
  font-size: 10px;
}

/* Search */
.vs-net-search {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 28px;
  transition: min-width 240ms var(--vs-ease-gentle);
}
.vs-net-search.is-open {
  min-width: 160px;
  flex: 1;
}
.vs-net-search__icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
  opacity: 0.55;
  stroke: var(--vs-accent-moon);
  fill: none;
  stroke-width: 1.5;
  transition: opacity 180ms;
  flex-shrink: 0;
}
.vs-net-search__icon:hover { opacity: 1; }
.vs-net-search.is-open .vs-net-search__icon { opacity: 0.9; }
.vs-net-search__input {
  display: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(232, 217, 182, 0.18);
  color: var(--vs-text-0);
  font-size: 12.5px;
  font-family: inherit;
  padding: 4px 8px 4px 6px;
  outline: none;
  width: 140px;
  margin-right: 6px;
  letter-spacing: 0.04em;
}
.vs-net-search.is-open .vs-net-search__input {
  display: block;
}
.vs-net-search__input::placeholder {
  color: var(--vs-text-2);
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════
   Chapter · ✦ 共同的线 （取代月光丝）
   ══════════════════════════════════════════════════════ */
.vs-net-chapter {
  padding: 2px 0 8px;
  margin-bottom: 24px;
}
.vs-net-chapter__title {
  font-size: 10.5px;
  color: var(--vs-text-2);
  letter-spacing: 0.22em;
  opacity: 0.55;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vs-net-chapter__title::before {
  content: '✦';
  color: var(--vs-accent-moon);
  font-size: 11px;
  opacity: 0.85;
}
.vs-common-card {
  position: relative;
  padding: 14px 16px 14px 18px;
  margin-bottom: 8px;
  background: var(--vs-glass-2-bg);
  backdrop-filter: blur(var(--vs-glass-2-blur)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--vs-glass-2-blur)) saturate(125%);
  border: 1px solid var(--vs-glass-2-border);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.2);
  animation: slab-rise 720ms var(--vs-ease-gentle) both;
}
.vs-common-card--emerging {
  opacity: 0.78;
  border-style: dashed;
  border-color: rgba(232, 217, 182, 0.1);
  background: var(--vs-glass-3-bg);
}
.vs-common-card::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(232, 217, 182, 0) 0%,
    rgba(232, 217, 182, 0.5) 30%,
    rgba(232, 217, 182, 0.3) 70%,
    rgba(232, 217, 182, 0) 100%);
  box-shadow: 0 0 4px rgba(232, 217, 182, 0.3);
}
.vs-common-card__desc {
  font-family: 'Songti SC', 'Source Han Serif SC', 'Source Han Serif CN', serif;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--vs-text-0);
  letter-spacing: 0.015em;
  margin-bottom: 10px;
}
.vs-common-card__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vs-common-card__chip {
  font-size: 10.5px;
  padding: 2px 8px 3px;
  border-radius: 10px;
  border: 1px solid rgba(232, 217, 182, 0.16);
  color: var(--vs-text-1);
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.88;
  transition: opacity 160ms, background 160ms, border-color 160ms;
}
.vs-common-card__chip:hover {
  opacity: 1;
  background: rgba(232, 217, 182, 0.06);
  border-color: rgba(232, 217, 182, 0.3);
}

/* ══════════════════════════════════════════════════════
   Section header (grouped by relation_type, N > 15)
   ══════════════════════════════════════════════════════ */
.vs-net-section {
  margin-bottom: 18px;
}
.vs-net-section__header {
  font-size: 10.5px;
  color: var(--vs-text-2);
  letter-spacing: 0.22em;
  opacity: 0.4;
  margin: 6px 0 10px;
  padding-left: 2px;
}
.vs-net-section__header::before {
  content: '· ';
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════
   Wall container · 四档尺度
   ══════════════════════════════════════════════════════ */
.vs-glass-wall {
  position: relative;
  padding: 4px 0 20px;
  margin-top: 4px;
  isolation: isolate;
  /* 用 grid 替代 column-count · column 布局 + slab min-height 会在最后一列造成"空白卡"视觉（Bug 2） */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  align-items: start;
}
@media (min-width: 560px) {
  .vs-glass-wall { gap: 10px 18px; }
}

/* Intimate (N 1-10): 默认 2 col，标准间距 */
/* Gallery (N 11-30): 同上 */
/* Monument (N 31-100): 不走 outer column，交给 section 内的 subWall 自己 2 col */
.vs-glass-wall.tier-monument {
  display: block;  /* monument 外层不 grid，section 内的 subwall 自己 grid */
  gap: initial;
}
.vs-glass-wall.tier-monument .vs-glass-slab { margin-bottom: 0; }
.vs-glass-wall.tier-monument .vs-net-section__subwall {
  /* Bug 2 fix: column-count 会造成"最后一列空白卡"视觉 · 改 grid */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: start;
}

/* Cathedral (N > 100): 名片 chip 密铺（flex，不走 column） */
.vs-glass-wall.tier-cathedral {
  column-count: initial;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 7px;
}

/* ══════════════════════════════════════════════════════
   Glass slab (base + 4 size buckets)
   ══════════════════════════════════════════════════════ */
.vs-glass-slab {
  position: relative;
  display: block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 12px;
  padding: 14px 14px 16px 22px;
  border-radius: 14px;
  background: var(--vs-glass-2-bg);
  backdrop-filter: blur(var(--vs-glass-2-blur)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--vs-glass-2-blur)) saturate(125%);
  border: 1px solid var(--vs-glass-2-border);
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.22);
  color: var(--vs-text-0);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  z-index: 2;
  transition:
    opacity var(--vs-motion-quick) var(--vs-ease-gentle),
    border-color var(--vs-motion-quick),
    transform var(--vs-motion-soft) var(--vs-ease-gentle);
  /* box-shadow 故意不走 transition —— ripple 动画结束时才不会多补一次 600ms 渐入 */
  /* slab-rise 入场动画故意不挂 base —— 避免 class 切换翻回时动画重放。
     只挂在 .is-entering（JS 700ms 后移除）和 .is-new 上 */
}

@keyframes slab-rise {
  0%   { transform: translateY(10px) scale(0.985); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.vs-glass-slab.is-entering {
  animation: slab-rise 700ms var(--vs-ease-gentle) both;
}

/* Size buckets */
.vs-glass-slab--lg {
  min-height: 120px;
  padding: 16px 16px 20px 24px;
  background: var(--vs-glass-1-bg);
  border-color: var(--vs-glass-1-border);
}
.vs-glass-slab--md {
  min-height: 96px;
  padding: 14px 14px 18px 22px;
}
.vs-glass-slab--sm {
  min-height: 78px;
  padding: 12px 12px 14px 20px;
}
.vs-glass-slab--nano {
  min-height: 68px;
  padding: 11px 12px 12px 18px;
  opacity: 0.6;
  background: var(--vs-glass-3-bg);
  border-color: var(--vs-glass-3-border);
}

/* Stagger entry delays */
.vs-glass-slab:nth-child(1) { animation-delay: 20ms; }
.vs-glass-slab:nth-child(2) { animation-delay: 80ms; }
.vs-glass-slab:nth-child(3) { animation-delay: 140ms; }
.vs-glass-slab:nth-child(4) { animation-delay: 200ms; }
.vs-glass-slab:nth-child(5) { animation-delay: 260ms; }
.vs-glass-slab:nth-child(6) { animation-delay: 320ms; }
.vs-glass-slab:nth-child(7) { animation-delay: 380ms; }
.vs-glass-slab:nth-child(8) { animation-delay: 440ms; }
.vs-glass-slab:nth-child(n+9) { animation-delay: 500ms; }

/* Monument: lighter stagger + smaller shadows */
.vs-glass-wall.tier-monument .vs-glass-slab--lg { min-height: 100px; padding: 13px 14px 16px 20px; }
.vs-glass-wall.tier-monument .vs-glass-slab--md { min-height: 82px; padding: 11px 12px 14px 18px; }
.vs-glass-wall.tier-monument .vs-glass-slab--sm { min-height: 68px; padding: 10px 12px 12px 16px; }
.vs-glass-wall.tier-monument .vs-glass-slab--nano { min-height: 58px; padding: 9px 10px 10px 15px; }

/* 月光签名线（左缘） */
.vs-glass-slab::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 18%;
  bottom: 22%;
  width: 1px;
  border-radius: 1px;
  background: linear-gradient(180deg,
    rgba(232, 217, 182, 0) 0%,
    rgba(232, 217, 182, 0.52) 28%,
    rgba(232, 217, 182, 0.3) 72%,
    rgba(232, 217, 182, 0) 100%);
  box-shadow: 0 0 3px rgba(232, 217, 182, 0.26);
  pointer-events: none;
}
.vs-glass-slab--lg::before {
  background: linear-gradient(180deg,
    rgba(232, 217, 182, 0) 0%,
    rgba(232, 217, 182, 0.7) 24%,
    rgba(232, 217, 182, 0.42) 76%,
    rgba(232, 217, 182, 0) 100%);
  box-shadow: 0 0 5px rgba(232, 217, 182, 0.4);
}
.vs-glass-slab--nano::before {
  background: linear-gradient(180deg,
    rgba(232, 217, 182, 0) 0%,
    rgba(232, 217, 182, 0.22) 50%,
    rgba(232, 217, 182, 0) 100%);
  box-shadow: none;
}

/* 顶部月光高光（Liquid Glass specular） */
.vs-glass-slab::after {
  content: '';
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 217, 182, 0.28) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 3;
}
.vs-glass-slab--lg::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 217, 182, 0.38) 50%,
    transparent 100%);
}

/* ══════════════════════════════════════════════════════
   Slab content v2: name + time + dots (NO sentence)
   ══════════════════════════════════════════════════════ */
.vs-glass-slab__name {
  display: block;
  font-family: 'Songti SC', 'Source Han Serif SC', 'Source Han Serif CN', serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--vs-accent-moon);
  margin: 0 0 8px;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}
.vs-glass-slab--lg .vs-glass-slab__name { font-size: 17px; margin-bottom: 10px; }
.vs-glass-slab--sm .vs-glass-slab__name { font-size: 14px; margin-bottom: 6px; }
.vs-glass-slab--nano .vs-glass-slab__name {
  color: var(--vs-text-1);
  font-size: 13px;
  opacity: 0.85;
}

.vs-glass-slab__time {
  display: block;
  font-size: 10px;
  color: var(--vs-text-2);
  opacity: 0.65;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 2;
}
.vs-glass-slab--lg .vs-glass-slab__time { font-size: 10.5px; }
.vs-glass-slab--nano .vs-glass-slab__time { opacity: 0.4; }

/* Meta dots (共性命中数，右下) */
.vs-glass-slab__meta {
  position: absolute;
  right: 11px;
  bottom: 9px;
  display: flex;
  gap: 3px;
  pointer-events: none;
  z-index: 2;
}
.vs-glass-slab__meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vs-accent-moon);
  box-shadow: 0 0 4px rgba(232, 217, 182, 0.55);
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════
   Cathedral (tier) · 名片 chip 模式
   ══════════════════════════════════════════════════════ */
.vs-glass-wall.tier-cathedral .vs-glass-slab {
  flex: 0 0 calc(25% - 6px);
  min-height: 0;
  height: auto;
  padding: 7px 6px 8px;
  border-radius: 5px;
  margin-bottom: 0;
  /* rise 入场也挂在 .is-entering — 见下面 */
  overflow: hidden;
}
.vs-glass-wall.tier-cathedral .vs-glass-slab.is-entering {
  animation: slab-rise 520ms var(--vs-ease-gentle) both;
}
@media (min-width: 560px) {
  .vs-glass-wall.tier-cathedral .vs-glass-slab { flex-basis: calc(16.66% - 6px); }
}
@media (min-width: 820px) {
  .vs-glass-wall.tier-cathedral .vs-glass-slab { flex-basis: calc(12.5% - 6px); }
}

/* Cathedral slab: 签名线挪到顶部小短线 */
.vs-glass-wall.tier-cathedral .vs-glass-slab::before {
  left: 50%;
  top: 0;
  bottom: auto;
  width: 12px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent,
    rgba(232, 217, 182, 0.55) 50%,
    transparent);
  box-shadow: 0 0 2px rgba(232, 217, 182, 0.25);
}
.vs-glass-wall.tier-cathedral .vs-glass-slab::after { display: none; }

.vs-glass-wall.tier-cathedral .vs-glass-slab__name {
  font-size: 11.5px;
  margin: 0;
  color: var(--vs-text-1);
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs-glass-wall.tier-cathedral .vs-glass-slab--lg .vs-glass-slab__name {
  color: var(--vs-accent-moon);
  font-size: 12px;
}
.vs-glass-wall.tier-cathedral .vs-glass-slab--nano {
  opacity: 0.5;
}
.vs-glass-wall.tier-cathedral .vs-glass-slab__time,
.vs-glass-wall.tier-cathedral .vs-glass-slab__meta {
  display: none;
}

/* Cathedral breathing — 唯有 lg 的名片轻呼吸，其他静态 */
@keyframes slab-breath-micro {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
.vs-glass-wall.tier-cathedral .vs-glass-slab--lg {
  animation: slab-breath-micro 4.2s ease-in-out calc(var(--breath-delay, 0s)) infinite;
}
/* 入场的 rise 仍由 .is-entering 提供，和 breath 叠加（compound 不冲突） */
.vs-glass-wall.tier-cathedral .vs-glass-slab--lg.is-entering {
  animation:
    slab-rise 520ms var(--vs-ease-gentle) both,
    slab-breath-micro 4.2s ease-in-out calc(var(--breath-delay, 0s)) infinite;
}

/* ══════════════════════════════════════════════════════
   Focus interactions
   ══════════════════════════════════════════════════════ */
@supports (backdrop-filter: url(#mir-liquid-filter)) {
  .vs-glass-slab--focused {
    backdrop-filter:
      url(#mir-liquid-filter)
      blur(var(--vs-glass-1-blur))
      saturate(140%);
    -webkit-backdrop-filter:
      url(#mir-liquid-filter)
      blur(var(--vs-glass-1-blur))
      saturate(140%);
  }
}
.vs-glass-slab--focused {
  border-color: rgba(232, 217, 182, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.25),
    0 10px 34px rgba(232, 217, 182, 0.14),
    0 0 0 1px rgba(232, 217, 182, 0.12);
  transform: translateY(-1px) scale(1.012);
  z-index: 4;
  opacity: 1 !important;
}
.vs-glass-slab--focused::before {
  background: linear-gradient(180deg,
    rgba(232, 217, 182, 0) 0%,
    rgba(232, 217, 182, 0.9) 28%,
    rgba(232, 217, 182, 0.6) 72%,
    rgba(232, 217, 182, 0) 100%);
  box-shadow:
    0 0 6px rgba(232, 217, 182, 0.55),
    0 0 16px rgba(117, 145, 168, 0.22);
}

/* Wall-level focus · 3 档明暗：focused > echo > dim */
.vs-glass-wall--focusing .vs-glass-slab:not(.vs-glass-slab--focused):not(.vs-glass-slab--echo) {
  opacity: 0.2 !important;
}

/* Echo 态 —— 共性伙伴：比 dim 亮，比 focused 弱。玻璃边有微月光 */
.vs-glass-wall--focusing .vs-glass-slab--echo {
  opacity: 0.78 !important;
  border-color: rgba(232, 217, 182, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.15),
    0 6px 22px rgba(232, 217, 182, 0.08),
    0 0 14px rgba(232, 217, 182, 0.1);
}
.vs-glass-wall--focusing .vs-glass-slab--echo::before {
  background: linear-gradient(180deg,
    rgba(232, 217, 182, 0) 0%,
    rgba(232, 217, 182, 0.72) 26%,
    rgba(232, 217, 182, 0.44) 74%,
    rgba(232, 217, 182, 0) 100%);
  box-shadow: 0 0 5px rgba(232, 217, 182, 0.45);
}

/* 共鸣涟漪 —— 点击 focused 瞬间向 siblings 方向扫一下 */
@keyframes slab-ripple {
  0%   { box-shadow: inset 0 1px 0 rgba(232, 217, 182, 0.15), 0 6px 22px rgba(0,0,0,0.22), 0 0 0 0 rgba(232, 217, 182, 0.5); }
  45%  { box-shadow: inset 0 1px 0 rgba(232, 217, 182, 0.3), 0 6px 22px rgba(0,0,0,0.22), 0 0 26px 6px rgba(232, 217, 182, 0.38); }
  100% { box-shadow: inset 0 1px 0 rgba(232, 217, 182, 0.15), 0 6px 22px rgba(0,0,0,0.22), 0 0 0 0 rgba(232, 217, 182, 0); }
}
.vs-glass-slab.is-ripple {
  animation: slab-ripple 1.1s var(--vs-ease-gentle);
}

/* Pulse ring — hover 共性 chip / shared siblings 时对应对象玻璃短暂脉冲 */
@keyframes slab-pulse-ring {
  0%   { box-shadow: inset 0 1px 0 rgba(232, 217, 182, 0.08), 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(232, 217, 182, 0); }
  40%  { box-shadow: inset 0 1px 0 rgba(232, 217, 182, 0.28), 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 20px rgba(232, 217, 182, 0.4), 0 0 0 1px rgba(232, 217, 182, 0.35); }
  100% { box-shadow: inset 0 1px 0 rgba(232, 217, 182, 0.08), 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(232, 217, 182, 0); }
}
.vs-glass-slab.is-pulse {
  animation: slab-pulse-ring 1.1s var(--vs-ease-gentle);
  opacity: 0.72 !important;
}

/* ══════════════════════════════════════════════════════
   has-update — 最新一块玻璃的到达光
   ══════════════════════════════════════════════════════ */
@keyframes slab-arrive {
  0% {
    box-shadow:
      inset 0 1px 0 rgba(232, 217, 182, 0.08),
      0 6px 18px rgba(0, 0, 0, 0.22),
      0 0 0 0 rgba(232, 217, 182, 0);
  }
  38% {
    box-shadow:
      inset 0 1px 0 rgba(232, 217, 182, 0.38),
      0 8px 26px rgba(0, 0, 0, 0.22),
      0 0 24px rgba(232, 217, 182, 0.3);
  }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(232, 217, 182, 0.08),
      0 6px 18px rgba(0, 0, 0, 0.22),
      0 0 0 0 rgba(232, 217, 182, 0);
  }
}
.vs-glass-slab.is-new {
  animation: slab-arrive 2.8s var(--vs-ease-deep) 900ms both;
  /* slab-rise 已由 .is-entering 提供（JS 会在 is-new 的同时加 is-entering） */
}

/* ══════════════════════════════════════════════════════
   Focus summary bar (sticky) + 共性反射行
   ══════════════════════════════════════════════════════ */
.vs-glass-focus-bar {
  position: fixed;   /* viewport-pinned 不依赖滚动位置；点击即见 */
  bottom: 0;
  left: 0;
  right: 0;
  padding: 13px 16px 18px;
  background: linear-gradient(180deg,
    rgba(7, 10, 20, 0.58) 0%,
    rgba(7, 10, 20, 0.92) 30%,
    rgba(7, 10, 20, 0.98) 100%);
  border-top: 1px solid rgba(232, 217, 182, 0.18);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  z-index: 40;
  transition: opacity 220ms var(--vs-ease-gentle), transform 260ms var(--vs-ease-gentle);
  max-height: 56vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 限制宽度和 app 容器对齐，避免溢出到侧边 */
  max-width: 820px;
  margin: 0 auto;
}
.vs-glass-focus-bar[hidden] {
  display: none;
}
/* focus 激活时给 wall 底部留空避免遮挡最后一块玻璃 */
#pg-network.has-focus-bar #net-root {
  padding-bottom: 180px;
}
.vs-glass-focus-bar[hidden] { display: none; }
.vs-glass-focus-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.vs-glass-focus-bar__name {
  font-family: 'Songti SC', 'Source Han Serif SC', serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--vs-accent-moon);
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.vs-glass-focus-bar__cta {
  flex-shrink: 0;
  color: var(--vs-accent-moon);
  font-size: 11.5px;
  cursor: pointer;
  letter-spacing: 0.06em;
  padding: 2px 0 2px 6px;
  opacity: 0.85;
}
.vs-glass-focus-bar__cta:hover { opacity: 1; }
.vs-glass-focus-bar__desc {
  display: block;
  font-family: 'Songti SC', 'Source Han Serif SC', serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--vs-text-1);
  opacity: 0.82;
  line-height: 1.75;
  letter-spacing: 0.015em;
  /* 换行全显，不截断 —— 解决"…"廉价问题 */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding-bottom: 4px;
}
.vs-glass-focus-bar__shared {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--vs-text-2);
  line-height: 1.65;
  letter-spacing: 0.02em;
  cursor: default;
}
.vs-glass-focus-bar__shared-label {
  color: var(--vs-accent-moon);
  opacity: 0.7;
  margin-right: 4px;
  letter-spacing: 0.08em;
}
.vs-glass-focus-bar__shared-names {
  cursor: pointer;
  color: var(--vs-text-1);
  opacity: 0.88;
  transition: color 160ms;
}
.vs-glass-focus-bar__shared-names:hover {
  color: var(--vs-accent-moon);
  opacity: 1;
}

/* ══════════════════════════════════════════════════════
   Empty state
   ══════════════════════════════════════════════════════ */
#pg-network .vs-net-empty {
  position: relative;
  padding: 80px 4px 40px;
  text-align: left;
  color: var(--vs-text-1);
}
#pg-network .vs-net-empty__line {
  position: absolute;
  left: 8px;
  top: 80px;
  bottom: 40%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(232, 217, 182, 0) 0%,
    rgba(232, 217, 182, 0.35) 50%,
    rgba(232, 217, 182, 0) 100%);
}
#pg-network .vs-net-empty__hint {
  font-family: 'Songti SC', 'Source Han Serif SC', serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.9;
  color: var(--vs-text-1);
  margin-left: 14px;
  opacity: 0.85;
  white-space: pre-line;
}

/* ══════════════════════════════════════════════════════
   Footer row
   ══════════════════════════════════════════════════════ */
#pg-network .vs-net-footer {
  padding-top: 24px;
  margin-top: 8px;
  border-top: 1px solid var(--vs-line-0);
  display: flex;
  gap: 10px;
}
#pg-network .vs-net-footer .vs-btn {
  flex: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vs-glass-slab,
  .vs-glass-slab.is-new,
  .vs-glass-slab.is-pulse,
  .vs-glass-wall.tier-cathedral .vs-glass-slab--lg,
  .vs-common-card {
    animation: none !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   17c. COMMONALITY WEAVE v4 · 镜廊（Spatial Glass Corridor）
   - 3D perspective space, glass panels 在不同 z-depth 漂浮
   - 时间 / 数据密度 → z 轴（最近/最密 在前）
   - 月光束 = SVG "world lines" 穿过面板
   - 灵感：Interstellar tesseract × Apple Vision Pro spatial × Kusama mirror room
   - 关键：所有 fullscreen 元素 append 到 document.body 避开 .app transform 劫持
   ────────────────────────────────────────────────────────────── */

/* #pg-commonality-weave 本身留空，真正舞台在 body 里的 .cw-stage */
#pg-commonality-weave {
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

/* ── Stage（append 到 body） ── */
body > .cw-stage {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%,
      rgba(18, 26, 46, 0.88) 0%,
      rgba(8, 12, 22, 0.97) 55%,
      rgba(3, 5, 10, 1) 100%),
    #04060c;
  /* 透视容器 */
  perspective: 1400px;
  perspective-origin: 50% 38%;
  /* 字体平滑 */
  -webkit-font-smoothing: antialiased;
  font-smooth: always;
  /* 入场 */
  animation: cw-stage-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cw-stage-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
body > .cw-stage[hidden] { display: none; }

/* 背景星尘（非共性对象在最深处的 ambient 光点） */
body > .cw-stage .cw-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body > .cw-stage .cw-ambient__dot {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(232, 217, 182, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(232, 217, 182, 0.18);
}

/* 月光光带作氛围（左右边缘渐入渐出） */
body > .cw-stage::before {
  content: '';
  position: absolute;
  left: -15%;
  top: -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(ellipse,
    rgba(232, 217, 182, 0.06) 0%,
    transparent 65%);
  pointer-events: none;
}
body > .cw-stage::after {
  content: '';
  position: absolute;
  right: -15%;
  bottom: -20%;
  width: 65%;
  height: 65%;
  background: radial-gradient(ellipse,
    rgba(117, 145, 168, 0.05) 0%,
    transparent 65%);
  pointer-events: none;
}

/* ── 返回按钮：挂在 stage 内，不依赖 .app ── */
body > .cw-stage .cw-stage__back {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 30;
  background: rgba(8, 12, 22, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(232, 217, 182, 0.16);
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 11.5px;
  color: var(--vs-text-1);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity 180ms;
}
body > .cw-stage .cw-stage__back:hover { opacity: 1; }

/* ── 标题（悬浮在 stage 顶部） ── */
body > .cw-stage .cw-stage__header {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 25;
  pointer-events: none;
}
body > .cw-stage .cw-stage__meta-label {
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: var(--vs-accent-moon);
  opacity: 0.55;
  margin-bottom: 8px;
}
body > .cw-stage .cw-stage__title {
  font-family: 'Songti SC', 'Source Han Serif SC', serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--vs-text-0);
  margin: 0;
  opacity: 0.88;
}
body > .cw-stage .cw-stage__sub {
  font-size: 11px;
  color: var(--vs-text-2);
  opacity: 0.5;
  letter-spacing: 0.08em;
  margin-top: 6px;
}

/* ── 3D 舞台 ── */
body > .cw-stage .cw-world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  /* 去掉 transition —— raf 每帧写 transform，transition 会和 raf 打架导致闪烁 */
}
body > .cw-stage {
  cursor: grab;
  /* Bug 1 fix: 3D 镜廊全屏接管 touch，禁止浏览器默认 pan/zoom 与 drag 打架导致闪屏 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
body > .cw-stage.is-grabbing {
  cursor: grabbing;
}

/* ── Panel：每个对象 / 每条共性都是一块玻璃面板 ── */
.cw-panel {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  pointer-events: none;  /* panel 本身不响应，只 core 响应（避免误触） */
}
.cw-panel__core {
  position: relative;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(232, 217, 182, 0.12);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.08),
    0 6px 24px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  cursor: pointer;
  transition: background 200ms, border-color 200ms, box-shadow 200ms;
}
@media (hover: hover) {
  .cw-panel__core:hover {
    background: rgba(232, 217, 182, 0.07);
    border-color: rgba(232, 217, 182, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(232, 217, 182, 0.22),
      0 0 24px rgba(232, 217, 182, 0.18),
      0 6px 24px rgba(0, 0, 0, 0.35);
  }
}

/* 顶部月光签名条 */
.cw-panel__core::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 217, 182, 0.4) 50%,
    transparent 100%);
}
/* 移动端 fat finger 友好命中区扩大 14px · 视觉零变化 · 兜底 iOS Safari 3D hit-test */
.cw-panel__core::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 18px;
  pointer-events: auto;
}

/* 人名面板：对象 */
.cw-panel__name {
  font-family: 'Songti SC', 'Source Han Serif SC', serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--vs-accent-moon);
  letter-spacing: 0.04em;
  line-height: 1.35;
  white-space: nowrap;
}
.cw-panel__sub {
  font-size: 10px;
  color: var(--vs-text-2);
  opacity: 0.6;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

/* 近景 panel 强化 */
.cw-panel--near .cw-panel__core {
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: rgba(232, 217, 182, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.22),
    0 12px 36px rgba(0, 0, 0, 0.45);
}
.cw-panel--near .cw-panel__name { font-size: 15px; }

/* Hub panel（贯穿多条共性的交汇人）：月光强光晕 */
.cw-panel--hub .cw-panel__core {
  background: rgba(232, 217, 182, 0.08);
  border-color: rgba(232, 217, 182, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.32),
    0 0 24px rgba(232, 217, 182, 0.32),
    0 12px 32px rgba(0, 0, 0, 0.45);
}
.cw-panel--hub .cw-panel__name {
  color: var(--vs-accent-moon);
  text-shadow: 0 0 10px rgba(232, 217, 182, 0.4);
}
@keyframes cw-hub-breath {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(232, 217, 182, 0.32), 0 0 18px rgba(232, 217, 182, 0.26), 0 12px 32px rgba(0, 0, 0, 0.45); }
  50%      { box-shadow: inset 0 1px 0 rgba(232, 217, 182, 0.42), 0 0 32px rgba(232, 217, 182, 0.42), 0 12px 32px rgba(0, 0, 0, 0.45); }
}
.cw-panel--hub .cw-panel__core {
  animation: cw-hub-breath 4.4s ease-in-out infinite;
}

/* 共性面板 —— 主角级：更宽 + 大字 + 横排 */
.cw-panel--common .cw-panel__core {
  padding: 16px 20px;
  min-width: 260px;
  max-width: 340px;
  border-color: rgba(232, 217, 182, 0.28);
  background: rgba(18, 26, 46, 0.72);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.2),
    0 10px 36px rgba(0, 0, 0, 0.45);
}
.cw-panel--common .cw-panel__title {
  font-family: 'Songti SC', 'Source Han Serif SC', serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--vs-text-0);
  opacity: 0.95;
  letter-spacing: 0.02em;
  white-space: normal;   /* 关键：允许横排换行，不再竖排 */
  word-break: break-word;
  overflow-wrap: break-word;
}
.cw-panel--common.cw-panel--emerging .cw-panel__core {
  border-style: dashed;
  background: rgba(14, 20, 34, 0.6);
  opacity: 0.88;
}

/* 中景 panel 轻量卡片（不 backdrop-filter —— 性能！148 个 backdrop 会闪） */
.cw-panel--mid .cw-panel__core {
  background: rgba(14, 20, 36, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(232, 217, 182, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.3);
}
.cw-panel--mid .cw-panel__name { font-size: 12px; }
.cw-panel--mid .cw-panel__sub { display: none; }

/* 远景 panel 降亮度 + 无模糊（纯 rgba） */
.cw-panel--far .cw-panel__core {
  background: rgba(10, 14, 26, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(232, 217, 182, 0.06);
  padding: 7px 10px;
  box-shadow:
    inset 0 1px 0 rgba(232, 217, 182, 0.04),
    0 3px 10px rgba(0, 0, 0, 0.3);
  opacity: 0.68;
}
.cw-panel--far .cw-panel__name {
  color: var(--vs-text-1);
  font-size: 10.5px;
  opacity: 0.72;
}
.cw-panel--far .cw-panel__sub { display: none; }
.cw-panel--far .cw-panel__core::before { opacity: 0.3; }

/* ── 月光束（3D CSS 线段 · 放 .cw-world 内真随相机旋转） ── */
.cw-beam-3d {
  position: absolute;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(232, 217, 182, 0.05) 0%,
    rgba(232, 217, 182, 0.42) 18%,
    rgba(232, 217, 182, 0.42) 82%,
    rgba(232, 217, 182, 0.05) 100%);
  box-shadow: 0 0 3px rgba(232, 217, 182, 0.4);
  will-change: transform, opacity;
}
.cw-beam-3d.is-strong {
  height: 1.5px;
  background: linear-gradient(90deg,
    rgba(232, 217, 182, 0.08) 0%,
    rgba(232, 217, 182, 0.68) 18%,
    rgba(232, 217, 182, 0.68) 82%,
    rgba(232, 217, 182, 0.08) 100%);
  box-shadow: 0 0 5px rgba(232, 217, 182, 0.55);
}

/* ── Tooltip · 固定屏幕下方（手机友好，不跟随 panel 投影漂移）── */
/* 挂 body 级别（不进 stage，避免 stage 的 perspective 劫持 position:fixed），
   所以 z-index 必须 > stage (100) */
.cw-tip {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 200;
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  padding: 14px 16px 15px;
  background: rgba(8, 12, 22, 0.94);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(232, 217, 182, 0.26);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  color: var(--vs-text-1);
  animation: cw-tip-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cw-tip-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.cw-tip[hidden] { display: none; }

/* ── 焦点态：点击对象后的视觉引导 ── */
body > .cw-stage .cw-panel { transition: opacity 280ms ease, filter 280ms ease; }
body > .cw-stage .cw-panel--active .cw-panel__core {
  border-color: rgba(232, 217, 182, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(232, 217, 182, 0.55),
    0 8px 32px rgba(232, 217, 182, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body > .cw-stage .cw-panel--connected .cw-panel__core {
  border-color: rgba(232, 217, 182, 0.42);
}
body > .cw-stage .cw-panel--dim {
  opacity: 0.22;
  filter: saturate(0.4);
}
.cw-tip__name {
  font-family: 'Songti SC', 'Source Han Serif SC', serif;
  font-weight: 300;
  font-size: 14px;
  color: var(--vs-accent-moon);
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.cw-tip__meta {
  font-size: 10.5px;
  color: var(--vs-text-2);
  opacity: 0.65;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
}
.cw-tip__line {
  font-family: 'Songti SC', 'Source Han Serif SC', serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.65;
  color: var(--vs-text-1);
  opacity: 0.82;
  margin-top: 3px;
}

/* ── 空态 ── */
body > .cw-stage .cw-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  color: var(--vs-text-2);
  font-family: 'Songti SC', 'Source Han Serif SC', serif;
  font-size: 15px;
  line-height: 1.9;
  opacity: 0.7;
  white-space: pre-line;
}

/* Entry button on network hero */
.vs-net-hero__overlook {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--vs-accent-moon);
  background: transparent;
  border: 1px solid rgba(232, 217, 182, 0.2);
  border-radius: 14px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 180ms, border-color 180ms;
  font-family: inherit;
}
.vs-net-hero__overlook:hover {
  opacity: 1;
  border-color: rgba(232, 217, 182, 0.4);
  background: rgba(232, 217, 182, 0.05);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body > .cw-stage,
  body > .cw-stage .cw-world,
  .cw-tip,
  .cw-panel--hub .cw-panel__core {
    animation: none !important;
    transition: none !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   17b. BACK BUTTON · 全站顶部左上方 "← 返回 X" 统一样式
   ────────────────────────────────────────────────────────────── */

.mir-back-top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 4px 8px 4px 0;
  margin-bottom: 14px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--vs-text-2);
  opacity: 0.55;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 180ms, color 180ms;
}
.mir-back-top:hover {
  opacity: 0.9;
  color: var(--vs-accent-moon);
}


/* ──────────────────────────────────────────────────────────────
   17. SCROLLBAR —— 月光玻璃风格，全站统一
   ────────────────────────────────────────────────────────────── */

/* Firefox / 新版 Safari */
html, body {
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 217, 182, 0.22) transparent;
}
/* 可滚元素统一继承（任何 overflow:auto/scroll 的容器都走月光色） */
* {
  scrollbar-color: rgba(232, 217, 182, 0.22) transparent;
}

/* Chromium / WebKit */
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(232, 217, 182, 0.18);
  border-radius: 3px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 217, 182, 0.4);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }


/* ──────────────────────────────────────────────────────────────
   18. SELECTION
   ────────────────────────────────────────────────────────────── */

::selection {
  background: rgba(232, 217, 182, 0.25);
  color: var(--vs-text-0);
}


/* ──────────────────────────────────────────────────────────────
   19. REDUCED MOTION — accessibility
   ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body::before,
  #pg-mirror-home .mh-net-card::before,
  #pg-mirror-home .mh-main::before,
  #pg-insight #insight-hero-zone::after,
  #pg-chat::before,
  #pg-mirror-home .mh-net-dot {
    animation: none !important;
  }
  .mir-surface-in,
  .mir-fade-in,
  .page.active,
  .mir-water-reveal,
  .mir-water-reveal::before {
    animation-duration: 0.01ms !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   20. LOW-PERF DEGRADATION
   若设备禁用 backdrop-filter，保留最少识别度。
   ────────────────────────────────────────────────────────────── */

@supports not (backdrop-filter: blur(1px)) {
  .mir-glass, .mir-glass-1, .mir-glass-2, .mir-glass-3,
  #pg-insight #insight-hero-zone,
  #pg-chat #chat-input {
    background: var(--vs-bg-1) !important;
  }
}


/* ──────────────────────────────────────────────────────────────
   21. BACK-TO-TOP · 长页面浮动回顶按钮
   仅 5 个长滚动页生效（pg-network/object-detail/mirror-detail/saved/rehearsal）
   滚动 > 400px 自动淡入
   ────────────────────────────────────────────────────────────── */

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(232, 217, 182, 0.22);
  background: rgba(8, 12, 22, 0.66);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  color: var(--vs-accent-moon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, background 180ms;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.back-to-top.is-visible {
  opacity: 0.88;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  opacity: 1;
  background: rgba(14, 20, 36, 0.78);
  border-color: rgba(232, 217, 182, 0.36);
}
.back-to-top:active {
  transform: translateY(2px);
}
/* demo switcher 占着右下时，回顶按钮上移让位（仅 demo / dev 账号生效） */
body.has-demo-switcher .back-to-top {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}