/* ============================================================
   多元宇宙子站 · 设计系统 mv.css
   气质：多元、鲜活、充满可能性（脑洞感）
   主色调：棱镜紫 + 折射青（火花橙保留为品牌锚点色）
   设计语言：裂缝、棱镜折射、碎片几何
   ============================================================ */

/* 字体引入与主站完全一致（Noto Sans SC 400/700 · fonts.loli.net 镜像） */
@import url('https://fonts.loli.net/css?family=Noto+Sans+SC:400,700&display=swap');

/* ---------- 设计令牌 ---------- */
:root {
  /* 基底 */
  --mv-bg: #0B0716;          /* 深渊紫黑 */
  --mv-bg-2: #140C28;        /* 次级背景 */
  --mv-panel: rgba(26, 17, 50, 0.72);
  --mv-panel-solid: #181030;
  --mv-line: rgba(168, 139, 250, 0.16);

  /* 品牌色 */
  --mv-purple: #8B5CF6;      /* 棱镜紫 */
  --mv-purple-2: #C084FC;
  --mv-cyan: #22D3EE;        /* 折射青 */
  --mv-orange: #FF7A1A;      /* 火花橙 · 品牌锚点 */
  --mv-pink: #FF3D9A;

  /* 文字 */
  --mv-text: #EDE9FE;
  --mv-text-dim: #A79FC9;
  --mv-text-faint: #6E6690;

  /* 动态宇宙主题色（由 JS 按宇宙覆写） */
  --u-theme: #8B5CF6;
  --u-theme-rgb: 139, 92, 246;
  --u-theme-soft: rgba(139, 92, 246, 0.14);
  --u-theme-glow: rgba(139, 92, 246, 0.45);

  --mv-radius: 14px;
  --mv-nav-h: 64px;
}

/* ---------- 基础重置 ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Noto Sans SC', sans-serif;
  background: var(--mv-bg);
  color: var(--mv-text);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 棱镜折射背景：多层径向光斑 + 细网格 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 55% at 18% -5%, rgba(139, 92, 246, 0.22), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 10%, rgba(34, 211, 238, 0.12), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(192, 132, 252, 0.14), transparent 65%),
    var(--mv-bg);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(168, 139, 250, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 139, 250, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 30%, transparent 75%);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

::selection { background: rgba(139, 92, 246, 0.45); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0E0820; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--mv-purple), var(--mv-cyan));
  border-radius: 6px;
  border: 2px solid #0E0820;
}

/* ---------- 通用容器 ---------- */
.mv-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   多元宇宙 · 独立导航（棱镜紫玻璃 + 折射光裂边）
   与主站灰色导航完全区分：只承载子站自己的页面与品牌
   ============================================================ */
.mv-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--mv-nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(20, 12, 40, 0.92), rgba(12, 8, 26, 0.86));
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

/* 底部折射光裂边：紫 → 粉 → 青的一缕光线 */
.mv-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(139, 92, 246, 0) 6%,
    rgba(139, 92, 246, 0.7) 32%,
    rgba(255, 61, 154, 0.55) 50%,
    rgba(34, 211, 238, 0.7) 68%,
    rgba(34, 211, 238, 0) 94%);
  pointer-events: none;
}

.mv-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- 品牌：棱镜图标 + 紫青渐变字标 ---------- */
.mv-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.mv-nav-prism {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--mv-cyan);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(34, 211, 238, 0.14));
  border: 1px solid rgba(168, 139, 250, 0.45);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.35), inset 0 0 10px rgba(34, 211, 238, 0.12);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.mv-nav-prism svg { width: 19px; height: 19px; display: block; }
.mv-nav-brand:hover .mv-nav-prism {
  transform: rotate(90deg);
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.45), inset 0 0 12px rgba(139, 92, 246, 0.25);
}

.mv-nav-word {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  background: linear-gradient(90deg, var(--mv-purple-2), var(--mv-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 英文身份副标 */
.mv-nav-tagline {
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  color: var(--mv-text-faint);
  padding-left: 14px;
  border-left: 1px solid var(--mv-line);
  white-space: nowrap;
}

/* ---------- 菜单 ---------- */
.mv-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* 导航链接：淡紫文字 + 悬浮玻璃片 */
.mv-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--mv-text-dim);
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mv-nav-link:hover {
  color: #FFFFFF;
  background: rgba(139, 92, 246, 0.14);
}
.mv-nav-link.active {
  color: #FFFFFF;
  background: rgba(34, 211, 238, 0.09);
}
/* 激活态：棱镜碎片状短下划线（紫→青渐变 + 青色辉光） */
.mv-nav-link.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--mv-purple), var(--mv-cyan));
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.8);
}

/* 核心行动「创建宇宙」：青色描边棱镜胶囊 */
.mv-nav-cta {
  margin-left: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  color: #A5F3FC;
  border: 1px solid rgba(34, 211, 238, 0.45);
  background: rgba(34, 211, 238, 0.08);
  gap: 7px;
}
.mv-nav-cta i { font-size: 0.78rem; }
.mv-nav-cta:hover {
  color: #FFFFFF;
  background: rgba(34, 211, 238, 0.18);
  border-color: var(--mv-cyan);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
}
.mv-nav-cta.active {
  color: #FFFFFF;
  background: rgba(34, 211, 238, 0.2);
  border-color: var(--mv-cyan);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
}
.mv-nav-cta::after { display: none; }

/* 「返回主线」：幽灵分隔链接，悬停泛火花橙（通往主站的品牌锚点） */
.mv-nav-exit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  padding: 8px 0 8px 18px;
  border-left: 1px solid var(--mv-line);
  font-size: 0.86rem;
  color: var(--mv-text-faint);
  white-space: nowrap;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.mv-nav-exit i { font-size: 0.75rem; }
.mv-nav-exit:hover {
  color: var(--mv-orange);
  text-shadow: 0 0 14px rgba(255, 122, 26, 0.6);
}

/* 移动端汉堡按钮（折射青） */
.mv-nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--mv-cyan);
  font-size: 1.3rem;
  padding: 4px 8px;
  cursor: pointer;
}

@keyframes fragSpin { to { transform: rotate(360deg); } }

/* ---------- 按钮体系 ---------- */
.mv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 12px;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  position: relative;
  overflow: hidden;
}

.mv-btn:hover { transform: translateY(-3px); }
.mv-btn:active { transform: translateY(-1px) scale(0.98); }

/* 主按钮：跟随宇宙主题色 */
.mv-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--u-theme), rgba(var(--u-theme-rgb), 0.75));
  box-shadow: 0 6px 26px var(--u-theme-glow);
}

.mv-btn-primary:hover { box-shadow: 0 10px 34px var(--u-theme-glow); filter: brightness(1.12); }

/* 次按钮：棱镜描边 */
.mv-btn-ghost {
  color: var(--mv-text);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(168, 139, 250, 0.4);
}

.mv-btn-ghost:hover { border-color: var(--mv-cyan); box-shadow: 0 0 22px rgba(34, 211, 238, 0.25); }

/* 火花橙按钮（品牌锚点：返回主线等） */
.mv-btn-spark {
  color: #fff;
  background: linear-gradient(135deg, var(--mv-orange), #FF9A4D);
  box-shadow: 0 6px 22px rgba(255, 122, 26, 0.35);
}

.mv-btn-sm { padding: 9px 18px; font-size: 0.86rem; border-radius: 10px; }

/* ---------- 区块标题 ---------- */
.mv-section { padding: 88px 0 40px; position: relative; }

.mv-section-head { text-align: center; margin-bottom: 48px; }

.mv-section-head .kicker {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  color: var(--mv-cyan);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.mv-section-head h2 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 900;
  background: linear-gradient(120deg, #fff 20%, var(--mv-purple-2) 55%, var(--mv-cyan) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mv-section-head p { color: var(--mv-text-dim); margin: 0; font-size: 0.98rem; }

/* 标题两侧的裂缝装饰 */
.crack-title { display: flex; align-items: center; justify-content: center; gap: 18px; }
.crack-title::before, .crack-title::after {
  content: '';
  width: 70px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--mv-purple));
  clip-path: polygon(0 40%, 60% 40%, 70% 0, 82% 100%, 100% 60%, 100% 100%, 0 100%);
}
.crack-title::after { transform: scaleX(-1); background: linear-gradient(90deg, transparent, var(--mv-cyan)); }

/* ---------- 碎片卡片（通用） ---------- */
.mv-card {
  position: relative;
  background: var(--mv-panel);
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  backdrop-filter: blur(14px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.mv-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--u-theme-rgb), 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 26px var(--u-theme-soft);
}

/* 卡片右上角碎片角标 */
.mv-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 46px; height: 46px;
  background: linear-gradient(225deg, var(--u-theme-soft), transparent 70%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}

/* ---------- 宇宙卡片网格 ---------- */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.u-card { padding: 24px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; }

.u-card-top { display: flex; align-items: center; gap: 14px; }

.u-orb {
  width: 54px; height: 54px;
  flex: none;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,0.55), transparent 42%),
    radial-gradient(circle at 50% 50%, var(--uc, var(--mv-purple)) 0%, rgba(0,0,0,0.55) 86%);
  box-shadow: 0 0 22px var(--uc-glow, rgba(139,92,246,0.5)), inset 0 0 12px rgba(0,0,0,0.5);
}

.u-orb::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.25);
  animation: fragSpin 14s linear infinite;
}

.u-card-title { font-size: 1.12rem; font-weight: 800; margin: 0; line-height: 1.35; }
.u-card-sub { font-size: 0.82rem; color: var(--mv-text-dim); margin: 2px 0 0; }

.u-card-desc {
  font-size: 0.9rem;
  color: var(--mv-text-dim);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.u-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.u-tag {
  font-size: 0.72rem;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--mv-line);
  color: var(--mv-text-dim);
  background: rgba(255,255,255,0.03);
}

.u-tag.cat { color: var(--uc, var(--mv-purple)); border-color: rgba(var(--u-theme-rgb), 0.4); background: var(--u-theme-soft); }

.u-card-stats {
  display: flex;
  gap: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--mv-line);
  font-size: 0.8rem;
  color: var(--mv-text-faint);
}

.u-card-stats b { color: var(--mv-text); font-weight: 700; }

/* ---------- 分类入口 ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 18px;
}

.cat-tile {
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cat-tile .cat-ico {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  border-radius: 16px;
  background: var(--cc-soft, rgba(139,92,246,0.14));
  color: var(--cc, var(--mv-purple));
  clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%);
  transition: transform 0.3s ease;
}

.cat-tile:hover .cat-ico { transform: rotate(8deg) scale(1.08); }

.cat-tile h4 { margin: 0; font-size: 1rem; font-weight: 800; }
.cat-tile span { font-size: 0.76rem; color: var(--mv-text-faint); }

/* ---------- 排行榜 ---------- */
.rank-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; }

.rank-tab {
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid var(--mv-line);
  background: transparent;
  color: var(--mv-text-dim);
  font-size: 0.88rem;
  font-weight: 700;
  transition: all 0.25s ease;
}

.rank-tab.active {
  color: #fff;
  border-color: var(--mv-purple);
  background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(34,211,238,0.2));
  box-shadow: 0 0 18px rgba(139,92,246,0.3);
}

.rank-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }

.rank-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  cursor: pointer;
}

.rank-no {
  font-size: 1.5rem;
  font-weight: 900;
  width: 44px;
  text-align: center;
  font-style: italic;
  color: var(--mv-text-faint);
}

.rank-row:nth-child(1) .rank-no { color: #FFD76A; text-shadow: 0 0 16px rgba(255,215,106,0.6); }
.rank-row:nth-child(2) .rank-no { color: #D9E2F3; text-shadow: 0 0 14px rgba(217,226,243,0.5); }
.rank-row:nth-child(3) .rank-no { color: #E89A5B; text-shadow: 0 0 14px rgba(232,154,91,0.5); }

.rank-info { flex: 1; min-width: 0; }
.rank-info h4 { margin: 0; font-size: 1rem; font-weight: 800; }
.rank-info p { margin: 2px 0 0; font-size: 0.78rem; color: var(--mv-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rank-score { text-align: right; flex: none; }
.rank-score b { display: block; color: var(--mv-cyan); font-size: 1.05rem; }
.rank-score span { font-size: 0.72rem; color: var(--mv-text-faint); }

/* ============================================================
   首页 Hero · 宇宙之眼
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--mv-nav-h) + 40px) 24px 60px;
  overflow: hidden;
}

#hero-fragments {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-inner { position: relative; z-index: 2; max-width: 860px; }

/* 宇宙之眼：中心棱镜 */
.cosmic-eye {
  width: 168px; height: 168px;
  margin: 0 auto 30px;
  position: relative;
  display: grid;
  place-items: center;
}

.cosmic-eye .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(168,139,250,0.35);
}

.cosmic-eye .ring.r2 { inset: 18px; border-style: dashed; border-color: rgba(34,211,238,0.4); animation: fragSpin 18s linear infinite reverse; }
.cosmic-eye .ring.r3 { inset: 38px; border-color: rgba(255,61,154,0.3); }

.cosmic-eye .prism {
  width: 74px; height: 74px;
  background: conic-gradient(from 200deg, var(--mv-purple), var(--mv-cyan), var(--mv-pink), var(--mv-purple));
  clip-path: polygon(50% 0, 100% 88%, 0 88%);
  filter: drop-shadow(0 0 24px rgba(139,92,246,0.8)) drop-shadow(0 0 60px rgba(34,211,238,0.35));
  animation: prismPulse 3.2s ease-in-out infinite;
}

@keyframes prismPulse {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 20px rgba(139,92,246,0.7)); }
  50% { transform: scale(1.08) rotate(8deg); filter: drop-shadow(0 0 34px rgba(34,211,238,0.9)); }
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 900;
  margin: 0 0 8px;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.hero h1 .grad {
  background: linear-gradient(110deg, var(--mv-purple-2) 10%, var(--mv-cyan) 50%, var(--mv-pink) 90%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradFlow 5s linear infinite;
}

@keyframes gradFlow { to { background-position: 200% center; } }

.hero .hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--mv-text-dim);
  margin: 0 auto 38px;
  max-width: 620px;
}

.hero-ctas { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

.hero-stats {
  margin-top: 54px;
  display: flex;
  justify-content: center;
  gap: clamp(24px, 6vw, 72px);
  flex-wrap: wrap;
}

.hero-stat b { display: block; font-size: 1.7rem; font-weight: 900; color: var(--mv-cyan); }
.hero-stat span { font-size: 0.82rem; color: var(--mv-text-faint); letter-spacing: 0.12em; }

/* ============================================================
   探索页 · 分歧点图谱
   ============================================================ */
.explore-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--mv-line);
  background: rgba(255,255,255,0.03);
  color: var(--mv-text-dim);
  font-size: 0.86rem;
  font-weight: 700;
  transition: all 0.22s ease;
}

.chip:hover { color: var(--mv-text); border-color: var(--mv-purple); }

.chip.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(139,92,246,0.45), rgba(34,211,238,0.25));
  border-color: transparent;
  box-shadow: 0 0 16px rgba(139,92,246,0.35);
}

.graph-wrap {
  position: relative;
  height: clamp(440px, 70vh, 720px);
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(139,92,246,0.1), transparent 70%),
    #0A0614;
  border: 1px solid var(--mv-line);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 56px;
  /* 画布手势：抓住可拖，触屏不触发浏览器默认滚动/缩放 */
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.graph-wrap.is-grabbing { cursor: grabbing; }

.graph-wrap svg { display: block; width: 100%; height: 100%; }

/* 世界坐标层（点网格 + 边界虚线），不接收指针，保证空白点击可穿透到 svg */
.graph-grid { pointer-events: none; }
.graph-world-edge {
  fill: none;
  stroke: rgba(168, 139, 250, 0.22);
  stroke-width: 1;
  stroke-dasharray: 2 9;
  pointer-events: none;
}

/* 右上角缩放控件 */
.graph-tools {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(11, 7, 22, 0.72);
  border: 1px solid var(--mv-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.graph-tool-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid transparent;
  background: rgba(139, 92, 246, 0.12);
  color: var(--mv-text-dim);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.graph-tool-btn:hover {
  color: #FFFFFF;
  background: rgba(34, 211, 238, 0.18);
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.25);
}
.graph-tool-btn:active { transform: scale(0.94); }

.graph-zoom-level {
  min-width: 52px;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mv-cyan);
  font-variant-numeric: tabular-nums;
}

/* 右下角操作提示 */
.graph-hint {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--mv-text-dim);
  background: rgba(11, 7, 22, 0.7);
  border: 1px solid var(--mv-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  white-space: nowrap;
}
.graph-hint i { color: var(--mv-purple-2); font-size: 0.78rem; }

.graph-legend {
  position: absolute;
  left: 18px; bottom: 16px;
  display: flex;
  gap: 16px;
  font-size: 0.74rem;
  color: var(--mv-text-dim);
  background: rgba(11,7,22,0.7);
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--mv-line);
  backdrop-filter: blur(8px);
}

.graph-legend i {
  display: inline-block;
  width: 22px; height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mv-purple), var(--mv-cyan));
  vertical-align: middle;
  margin-right: 6px;
}

/* SVG 图谱元素样式 */
.tl-line {
  stroke: url(#tlGrad);
  stroke-width: 3;
  stroke-dasharray: 8 6;
  fill: none;
}

.dp-node { cursor: pointer; }

.dp-node .dp-hex {
  fill: rgba(24,16,48,0.95);
  stroke: var(--mv-purple);
  stroke-width: 2;
  transition: all 0.25s ease;
}

.dp-node:hover .dp-hex, .dp-node.active .dp-hex {
  fill: rgba(139,92,246,0.3);
  stroke: var(--mv-cyan);
  filter: drop-shadow(0 0 12px rgba(139,92,246,0.8));
}

.dp-node text { fill: var(--mv-text); font-size: 13px; font-weight: 700; pointer-events: none; }
.dp-node .dp-year { fill: var(--mv-cyan); font-size: 11px; font-weight: 400; }

.branch-line {
  fill: none;
  stroke: var(--bc, var(--mv-purple));
  stroke-linecap: round;
  opacity: 0.55;
  transition: opacity 0.3s ease, filter 0.25s ease;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: branchDraw 1.6s ease forwards;
}

@keyframes branchDraw { to { stroke-dashoffset: 0; } }

.u-orb-node { cursor: pointer; }

.u-orb-node circle.orb-core {
  fill: var(--uc, var(--mv-purple));
  stroke: rgba(255,255,255,0.5);
  stroke-width: 1.5;
  transition: r 0.25s ease;
  filter: drop-shadow(0 0 10px var(--uc-glow, rgba(139,92,246,0.6)));
}

.u-orb-node:hover circle.orb-core { filter: drop-shadow(0 0 20px var(--uc-glow)); }

.u-orb-node text {
  fill: var(--mv-text);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(11,7,22,0.9);
  stroke-width: 3px;
}

.graph-dim { opacity: 0.12 !important; transition: opacity 0.3s ease; }

/* ---------- 悬停 / 聚焦 高亮细节 ----------
   .is-hover：悬停分歧点节点或星球时，JS 给关联的分支线与星球加上的瞬时点亮态
   .is-focus ：点击分歧点聚焦时，给当前分支线与星球加的持续选中态
   （两种状态均会被 .graph-dim 的 !important 压暗，保证 dim 优先级最高） */
.branch-line.is-hover,
.branch-line.is-focus {
  opacity: 0.95;
  filter: drop-shadow(0 0 6px var(--bc, var(--mv-purple)));
}

.u-orb-node.is-hover circle.orb-core { filter: drop-shadow(0 0 18px var(--uc-glow, rgba(139,92,246,0.6))); }
.u-orb-node.is-focus circle.orb-core { filter: drop-shadow(0 0 24px var(--uc-glow, rgba(139,92,246,0.6))); }

/* 星球虚线外环：悬停点亮旋转，聚焦时脉冲呼吸（选中指示） */
.u-orb-node .orb-ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.25s ease;
}
.u-orb-node.is-hover .orb-ring {
  opacity: 1;
  animation: ringSpin 10s linear infinite;
}
.u-orb-node.is-focus .orb-ring {
  opacity: 1;
  animation: ringPulse 1.6s ease-in-out infinite;
}

@keyframes ringSpin { to { transform: rotate(360deg); } }

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.22); opacity: 0.4; }
}

/* 图谱节点弹入动画 */
.u-orb-node, .dp-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: orbPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes orbPop {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

/* 图谱节点缓慢漂浮 */
.u-orb-node .orb-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: orbDrift 6s ease-in-out infinite;
}

@keyframes orbDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 图谱提示卡 */
.graph-tip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  min-width: 200px;
  max-width: 260px;
  padding: 14px 16px;
  background: rgba(18,11,36,0.96);
  border: 1px solid var(--mv-purple);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 24px rgba(139,92,246,0.25);
  font-size: 0.82rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.graph-tip.show { opacity: 1; transform: translateY(0); }
.graph-tip h5 { margin: 0 0 6px; font-size: 0.92rem; }
.graph-tip p { margin: 0; color: var(--mv-text-dim); font-size: 0.78rem; }
.graph-tip .tip-stats { margin-top: 8px; color: var(--mv-cyan); font-size: 0.74rem; }

/* 「我的投稿 · 审核中」卡片（creator 页） */
.pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.pending-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  opacity: 0.88;
}
.pending-orb {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff6, var(--uc, var(--mv-purple)) 58%);
  box-shadow: 0 0 16px var(--uc-glow, rgba(139,92,246,0.4));
}
.pending-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--mv-cyan);
  border: 1px solid rgba(34,211,238,0.4);
  background: rgba(34,211,238,0.08);
}

/* ============================================================
   宇宙详情页
   ============================================================ */
.u-hero {
  position: relative;
  padding: calc(var(--mv-nav-h) + 56px) 0 48px;
  overflow: hidden;
}

.u-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 20% 0%, var(--u-theme-soft), transparent 65%),
    radial-gradient(ellipse 60% 80% at 90% 20%, rgba(34,211,238,0.08), transparent 60%);
  pointer-events: none;
}

.u-hero-inner { position: relative; display: flex; gap: 34px; align-items: center; flex-wrap: wrap; }

.u-hero-orb {
  width: 148px; height: 148px;
  flex: none;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.6), transparent 40%),
    radial-gradient(circle at 50% 50%, var(--u-theme) 0%, rgba(0,0,0,0.6) 88%);
  box-shadow: 0 0 50px var(--u-theme-glow), inset -14px -16px 34px rgba(0,0,0,0.55);
  animation: orbFloat 5s ease-in-out infinite;
}

@keyframes orbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.u-hero-orb::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.3);
  animation: fragSpin 16s linear infinite;
}

.u-hero-info { flex: 1; min-width: 280px; }

.u-hero h1 { margin: 0 0 6px; font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 900; }

.u-hero .u-premise {
  font-size: 1.05rem;
  color: var(--u-theme);
  font-weight: 700;
  margin: 0 0 14px;
}

.u-hero .u-summary { color: var(--mv-text-dim); max-width: 640px; margin: 0 0 18px; }

.u-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.u-stat-row { display: flex; gap: 28px; margin-top: 22px; flex-wrap: wrap; }
.u-stat-row .hs b { display: block; font-size: 1.4rem; font-weight: 900; color: #fff; }
.u-stat-row .hs span { font-size: 0.78rem; color: var(--mv-text-faint); }

.dp-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--mv-text-dim);
  border: 1px solid var(--mv-line);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.03);
}

.dp-breadcrumb .spark-dot { color: var(--mv-orange); }

/* Tab 栏 */
.u-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--mv-line);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 36px;
}

.u-tab {
  padding: 14px 24px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--mv-text-dim);
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.22s ease;
}

.u-tab:hover { color: var(--mv-text); }

.u-tab.active {
  color: var(--u-theme);
  border-bottom-color: var(--u-theme);
}

.u-panel { display: none; animation: panelIn 0.4s ease; }
.u-panel.active { display: block; }

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

/* 章节列表 */
.chapter-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 26px;
  margin-bottom: 12px;
  cursor: pointer;
}

.chapter-row:hover { border-color: rgba(var(--u-theme-rgb), 0.5); }

.chapter-no {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--u-theme);
  background: var(--u-theme-soft);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.chapter-row .ch-info { flex: 1; }
.chapter-row h4 { margin: 0; font-size: 1.02rem; }
.chapter-row p { margin: 3px 0 0; font-size: 0.8rem; color: var(--mv-text-faint); }

.chapter-row .ch-arrow { color: var(--u-theme); font-size: 1.1rem; }

/* 分歧设定：与主线差异 */
.diff-list { display: flex; flex-direction: column; gap: 14px; }

.diff-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  padding: 20px 24px;
}

.diff-col {
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.88rem;
}

.diff-col.mainline {
  background: rgba(255,122,26,0.08);
  border: 1px solid rgba(255,122,26,0.3);
}

.diff-col.altline {
  background: var(--u-theme-soft);
  border: 1px solid rgba(var(--u-theme-rgb), 0.4);
}

.diff-col h5 { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 0.14em; }
.diff-col.mainline h5 { color: var(--mv-orange); }
.diff-col.altline h5 { color: var(--u-theme); }
.diff-col p { margin: 0; color: var(--mv-text-dim); }

.diff-vs {
  align-self: center;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-style: italic;
  color: var(--mv-cyan);
  border: 1px solid var(--mv-line);
  border-radius: 50%;
  background: rgba(11,7,22,0.8);
}

/* 共创者 */
.creator-row { display: flex; align-items: center; gap: 18px; padding: 18px 24px; }
.avatar {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--mv-purple), var(--mv-cyan));
}
.creator-row .cr-info { flex: 1; }
.creator-row h4 { margin: 0; }
.creator-row p { margin: 2px 0 0; font-size: 0.8rem; color: var(--mv-text-faint); }

.cr-badge {
  font-size: 0.72rem;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--u-theme-soft);
  color: var(--u-theme);
  border: 1px solid rgba(var(--u-theme-rgb), 0.4);
}

/* 讨论区 */
.discuss-form { display: flex; gap: 12px; margin-bottom: 28px; }
.discuss-form input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--mv-line);
  border-radius: 12px;
  padding: 13px 18px;
  color: var(--mv-text);
  font-size: 0.92rem;
  font-family: inherit;
}
.discuss-form input:focus { outline: none; border-color: var(--u-theme); box-shadow: 0 0 0 3px var(--u-theme-soft); }

.discuss-item { display: flex; gap: 14px; padding: 16px 4px; border-bottom: 1px dashed var(--mv-line); }
.discuss-item .avatar { width: 40px; height: 40px; font-size: 0.9rem; }
.discuss-item h5 { margin: 0 0 4px; font-size: 0.9rem; }
.discuss-item h5 span { color: var(--mv-text-faint); font-weight: 400; font-size: 0.76rem; margin-left: 10px; }
.discuss-item p { margin: 0; font-size: 0.88rem; color: var(--mv-text-dim); }

/* 跨宇宙对比 */
.cmp-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 18px 22px;
  margin-bottom: 22px;
}

.cmp-slot {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px dashed rgba(168,139,250,0.5);
  color: var(--mv-text-faint);
  font-size: 0.85rem;
  background: rgba(255,255,255,0.02);
}

.cmp-slot.filled {
  border-style: solid;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 14px; }

.cmp-table th, .cmp-table td {
  padding: 14px 18px;
  text-align: center;
  border-bottom: 1px solid var(--mv-line);
  font-size: 0.88rem;
}

.cmp-table th:first-child, .cmp-table td:first-child { text-align: left; color: var(--mv-text-faint); font-size: 0.82rem; }

.cmp-table thead th {
  background: rgba(139,92,246,0.12);
  font-size: 0.95rem;
}

.cmp-table .cmp-col { border-top: 3px solid var(--cc, var(--mv-purple)); }

.cmp-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cc, var(--mv-purple));
  box-shadow: 0 0 10px var(--cc, var(--mv-purple));
  margin-right: 8px;
  vertical-align: -2px;
}

/* 选择宇宙的弹层 */
.mv-modal-mask {
  position: fixed; inset: 0;
  background: rgba(6,3,14,0.75);
  backdrop-filter: blur(6px);
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mv-modal-mask.show { display: flex; }

.mv-modal {
  width: min(680px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--mv-panel-solid);
  border: 1px solid var(--mv-line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.mv-modal h3 { margin: 0 0 18px; }

.pick-list { display: flex; flex-direction: column; gap: 10px; }

.pick-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--mv-line);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pick-row:hover { border-color: var(--mv-purple); background: rgba(139,92,246,0.08); }
.pick-row.picked { opacity: 0.4; pointer-events: none; }

/* ============================================================
   创建向导
   ============================================================ */
.wizard-steps {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 30px 0 48px;
}

.wz-step {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--mv-text-faint);
  font-size: 0.9rem;
  font-weight: 700;
}

.wz-step .wz-dot {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--mv-line);
  background: rgba(255,255,255,0.03);
  font-weight: 900;
  transition: all 0.3s ease;
}

.wz-step.done .wz-dot, .wz-step.active .wz-dot {
  border-color: var(--mv-purple);
  background: linear-gradient(135deg, var(--mv-purple), var(--mv-cyan));
  color: #fff;
  box-shadow: 0 0 18px rgba(139,92,246,0.45);
}

.wz-step.active { color: var(--mv-text); }

.wz-line { width: 64px; height: 2px; background: var(--mv-line); margin: 0 14px; align-self: center; }
.wz-line.done { background: linear-gradient(90deg, var(--mv-purple), var(--mv-cyan)); }

.wz-panel { display: none; max-width: 860px; margin: 0 auto; }
.wz-panel.active { display: block; animation: panelIn 0.4s ease; }

.wz-option {
  display: flex;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 14px;
  cursor: pointer;
  border: 1px solid var(--mv-line);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  transition: all 0.22s ease;
}

.wz-option:hover { border-color: rgba(139,92,246,0.6); transform: translateX(4px); }

.wz-option.picked {
  border-color: var(--u-theme);
  background: var(--u-theme-soft);
  box-shadow: 0 0 22px var(--u-theme-soft);
}

.wz-option .wz-opt-main { flex: 1; }
.wz-option h4 { margin: 0 0 4px; font-size: 1.02rem; }
.wz-option p { margin: 0; font-size: 0.84rem; color: var(--mv-text-dim); }

.wz-radio {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--mv-line);
  margin-top: 3px;
  position: relative;
}

.wz-option.picked .wz-radio { border-color: var(--u-theme); }
.wz-option.picked .wz-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--u-theme);
}

/* 表单 */
.wz-field { margin-bottom: 22px; }
.wz-field label { display: block; font-size: 0.86rem; font-weight: 700; margin-bottom: 8px; color: var(--mv-text-dim); }

.wz-input, .wz-textarea, .wz-select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--mv-line);
  border-radius: 12px;
  padding: 13px 18px;
  color: var(--mv-text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wz-input:focus, .wz-textarea:focus, .wz-select:focus {
  outline: none;
  border-color: var(--u-theme);
  box-shadow: 0 0 0 3px var(--u-theme-soft);
}

.wz-textarea { min-height: 120px; resize: vertical; }

/* 主题色板 */
.palette { display: flex; flex-wrap: wrap; gap: 14px; }

.swatch-pick {
  width: 52px; height: 52px;
  border-radius: 14px;
  border: 3px solid transparent;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease;
  background: var(--pc);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.swatch-pick:hover { transform: scale(1.12); }

.swatch-pick.picked {
  border-color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 0 24px var(--pc);
}

.swatch-pick.picked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* 分类选择 */
.cat-pick-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* 实时预览卡 */
.wz-preview {
  margin-top: 30px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(var(--u-theme-rgb), 0.4);
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, var(--u-theme-soft), transparent 60%),
    rgba(255,255,255,0.02);
}

.wz-preview h5 { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 0.2em; color: var(--mv-text-faint); }

.wz-nav-actions { display: flex; justify-content: space-between; margin-top: 38px; gap: 12px; }

/* 邀请伙伴 */
.invite-link-box {
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
}

.invite-link-box input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px dashed var(--mv-line);
  border-radius: 12px;
  padding: 13px 18px;
  color: var(--mv-cyan);
  font-size: 0.88rem;
}

.partner-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  margin-bottom: 10px;
}

.partner-row .p-role { margin-left: auto; font-size: 0.76rem; color: var(--mv-cyan); }

/* 诞生动画覆盖层 */
.birth-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #05030B;
  display: none;
  align-items: center;
  justify-content: center;
}

.birth-overlay.show { display: flex; }

#birth-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.birth-text {
  position: relative;
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.birth-text.show { opacity: 1; }

.birth-text h2 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  margin: 0 0 10px;
  background: linear-gradient(120deg, #fff, var(--u-theme), var(--mv-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.birth-text p { color: var(--mv-text-dim); margin: 0 0 28px; }

.birth-actions { display: flex; gap: 14px; justify-content: center; }

/* ============================================================
   阅读页
   ============================================================ */
.read-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 34px;
  padding: calc(var(--mv-nav-h) + 40px) 0 80px;
}

.read-toc {
  position: sticky;
  top: calc(var(--mv-nav-h) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--mv-nav-h) - 48px);
  overflow-y: auto;
  padding: 20px;
}

.read-toc h4 { margin: 0 0 14px; font-size: 0.82rem; letter-spacing: 0.18em; color: var(--mv-text-faint); }

.toc-item {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
  color: var(--mv-text-dim);
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}

.toc-item:hover { color: var(--mv-text); background: rgba(139,92,246,0.08); }

.toc-item.active {
  color: var(--u-theme);
  border-left-color: var(--u-theme);
  background: var(--u-theme-soft);
  font-weight: 700;
}

.read-progress {
  position: fixed;
  top: var(--mv-nav-h);
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--u-theme), var(--mv-cyan));
  z-index: 90;
  box-shadow: 0 0 12px var(--u-theme-glow);
  transition: width 0.1s linear;
}

.read-main { max-width: 720px; margin: 0 auto; width: 100%; }

.read-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; flex-wrap: wrap; }

.read-back {
  font-size: 0.86rem;
  color: var(--mv-text-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.read-back:hover { color: var(--mv-text); }

.read-to-mainline {
  margin-left: auto;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--mv-orange);
  border: 1px solid rgba(255,122,26,0.5);
  background: rgba(255,122,26,0.08);
  padding: 9px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.read-to-mainline:hover { background: rgba(255,122,26,0.2); box-shadow: 0 0 20px rgba(255,122,26,0.3); transform: translateY(-2px); }

.read-article h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 900; margin: 0 0 8px; }

.read-meta { color: var(--mv-text-faint); font-size: 0.84rem; margin-bottom: 40px; display: flex; gap: 16px; flex-wrap: wrap; }

.read-article .read-body { font-size: 1.06rem; line-height: 2.05; color: #D8D2F0; }

.read-body p { margin: 0 0 1.6em; }

.read-body p:first-of-type::first-letter {
  font-size: 3.2em;
  font-weight: 900;
  float: left;
  line-height: 1;
  margin: 0.08em 0.12em 0 0;
  color: var(--u-theme);
  text-shadow: 0 0 24px var(--u-theme-glow);
}

.read-divider {
  text-align: center;
  margin: 44px 0;
  color: var(--u-theme);
  letter-spacing: 0.8em;
  font-size: 0.9rem;
}

.read-footer-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 60px; }

.read-footer-nav .mv-btn { flex: 1; }

.read-tools { display: flex; gap: 8px; margin-left: auto; }

.read-tool-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--mv-line);
  background: rgba(255,255,255,0.03);
  color: var(--mv-text-dim);
  transition: all 0.2s ease;
}

.read-tool-btn:hover { color: var(--u-theme); border-color: var(--u-theme); }

/* ============================================================
   主理人主页
   ============================================================ */
.creator-hero {
  position: relative;
  padding: calc(var(--mv-nav-h) + 60px) 0 40px;
  text-align: center;
}

.creator-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 90% at 50% 0%, rgba(139,92,246,0.18), transparent 65%);
  pointer-events: none;
}

.creator-hero .big-avatar {
  width: 110px; height: 110px;
  margin: 0 auto 20px;
  font-size: 2.4rem;
  position: relative;
  box-shadow: 0 0 44px rgba(139,92,246,0.45);
}

.creator-hero h1 { margin: 0 0 6px; font-size: 2rem; font-weight: 900; }
.creator-hero .cr-bio { color: var(--mv-text-dim); max-width: 520px; margin: 0 auto 24px; }

.creator-stats { display: flex; justify-content: center; gap: 44px; margin-bottom: 26px; flex-wrap: wrap; }
.creator-stats b { display: block; font-size: 1.5rem; font-weight: 900; color: var(--mv-cyan); }
.creator-stats span { font-size: 0.78rem; color: var(--mv-text-faint); }

.creator-actions { display: flex; gap: 12px; justify-content: center; }

/* 主打宇宙大卡 */
.featured-universe {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--mv-line);
  margin-bottom: 44px;
  min-height: 300px;
}

.featured-visual {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, var(--fv-soft, rgba(139,92,246,0.25)), transparent 70%),
    rgba(255,255,255,0.02);
  overflow: hidden;
}

.featured-visual .big-orb {
  width: 170px; height: 170px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.6), transparent 40%),
    radial-gradient(circle at 50% 50%, var(--fv, var(--mv-purple)) 0%, rgba(0,0,0,0.6) 88%);
  box-shadow: 0 0 60px var(--fv-glow, rgba(139,92,246,0.5));
  animation: orbFloat 5s ease-in-out infinite;
}

.featured-info { padding: 38px 36px; display: flex; flex-direction: column; justify-content: center; }
.featured-info .fv-label { font-size: 0.76rem; letter-spacing: 0.24em; color: var(--mv-orange); margin-bottom: 12px; }
.featured-info h3 { margin: 0 0 10px; font-size: 1.7rem; font-weight: 900; }
.featured-info p { color: var(--mv-text-dim); margin: 0 0 22px; }

/* ============================================================
   穿越动效覆盖层
   ============================================================ */
#mv-traverse {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}

#mv-traverse.active { pointer-events: auto; opacity: 1; }

#mv-shards {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.traverse-glitch {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px);
  mix-blend-mode: screen;
}

#mv-traverse.active .traverse-glitch { animation: glitchFlicker 0.5s steps(2) 2; }

@keyframes glitchFlicker {
  0% { opacity: 0; transform: translateX(0); }
  20% { opacity: 0.8; transform: translateX(-6px); }
  40% { opacity: 0.2; transform: translateX(5px); }
  60% { opacity: 0.7; transform: translateX(-3px); }
  100% { opacity: 0; transform: translateX(0); }
}

.traverse-word {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.5em;
  color: #fff;
  opacity: 0;
  text-shadow: 3px 0 var(--mv-pink), -3px 0 var(--mv-cyan);
}

#mv-traverse.active .traverse-word { animation: wordGlitch 0.6s steps(3) 1; }

@keyframes wordGlitch {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(1.4); }
  30% { opacity: 1; transform: translate(-52%,-50%) scale(1); clip-path: inset(20% 0 30% 0); }
  60% { opacity: 1; transform: translate(-48%,-50%) scale(1); clip-path: inset(50% 0 10% 0); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(0.9); }
}

/* 页面载入时的裂痕开场（入场） */
body.mv-entering { animation: pageEnter 0.5s ease; }

@keyframes pageEnter {
  from { opacity: 0; filter: hue-rotate(40deg) brightness(1.6); }
  to { opacity: 1; filter: none; }
}

/* ============================================================
   页脚
   ============================================================ */
/* 页脚（与主站统一：bg-gray-800 + SPARK UNIVERSE 红渐变 + 备案信息） */
.mv-footer {
  background: #1F2937;
  margin-top: 90px;
  padding: 32px 0;
}

.mv-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.mv-footer-spark {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #F87171, #DC2626);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mv-footer a {
  color: rgba(245, 246, 245, 0.82);
  font-size: 0.85rem;
  line-height: 2;
  transition: color 0.3s ease;
}

.mv-footer a:hover { color: #FFFFFF; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 900px) {
  .read-layout { grid-template-columns: 1fr; }
  .read-toc { position: static; max-height: none; display: none; }
  .featured-universe { grid-template-columns: 1fr; }
  .featured-visual { min-height: 220px; }
  .diff-item { grid-template-columns: 1fr; }
  .diff-vs { justify-self: center; transform: rotate(90deg); }
}

/* 导航在窄屏折叠为下拉面板（链接较多，1080px 起折叠） */
@media (max-width: 1080px) {
  .mv-nav-tagline { display: none; }
  .mv-nav-toggle { display: block; }

  .mv-nav-links {
    display: none;
    position: absolute;
    top: var(--mv-nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: rgba(12, 8, 26, 0.98);
    padding: 14px 24px 22px;
    border-bottom: 1px solid var(--mv-line);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
    max-height: calc(100vh - var(--mv-nav-h));
    overflow-y: auto;
  }

  .mv-nav-links.open { display: flex; }

  .mv-nav-link {
    padding: 13px 14px;
    font-size: 0.98rem;
  }
  .mv-nav-link.active::after { display: none; }
  .mv-nav-link.active {
    font-weight: 700;
    border-left: 2px solid var(--mv-cyan);
    border-radius: 0 10px 10px 0;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.02));
  }

  .mv-nav-cta {
    justify-content: center;
    margin: 6px 0 2px;
    padding: 13px 18px;
  }
  .mv-nav-cta.active { border-left: 1px solid var(--mv-cyan); }

  .mv-nav-exit {
    justify-content: center;
    margin: 8px 0 0;
    padding: 14px 2px 2px;
    border-left: none;
    border-top: 1px solid var(--mv-line);
  }
}

@media (max-width: 768px) {
  .mv-section { padding: 60px 0 30px; }
  .graph-wrap { height: clamp(420px, 64vh, 600px); border-radius: 14px; }
  .graph-legend { display: none; }
  .graph-tools { top: 10px; right: 10px; padding: 5px; gap: 4px; }
  .graph-tool-btn { width: 32px; height: 32px; }
  .graph-zoom-level { min-width: 44px; font-size: 0.7rem; }
  .graph-hint { right: 10px; bottom: 10px; font-size: 0.68rem; padding: 6px 11px; }
  .wz-line { width: 28px; }
  .wz-step span.wz-label { display: none; }
}

/* ============================================================
   Cookie 同意横幅与设置面板（移植自 cookie-consent-demo.html，
   配色适配多元宇宙子站：火花橙 + 折射青 + 深渊紫）
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  width: calc(100% - 48px);
  max-width: 720px;
  background: rgba(14, 10, 28, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 14px;
  padding: 26px;
  z-index: 10001; /* 高于穿越动效层(9999)，合规层始终置顶 */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(139, 92, 246, 0.06) inset,
              0 1px 0 rgba(255, 255, 255, 0.04) inset;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease;
}

.cookie-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.cookie-banner__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.cookie-banner__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  position: relative;
}

.cookie-banner__icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle at 40% 35%, var(--mv-orange) 0%, rgba(255, 122, 26, 0.3) 30%, transparent 70%);
  border-radius: 50%;
  opacity: 0.4;
  filter: blur(2px);
}

.cookie-banner__icon svg {
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--mv-orange);
  filter: drop-shadow(0 0 8px rgba(255, 122, 26, 0.5));
}

.cookie-banner__title {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.3px;
}

.cookie-banner__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mv-text-dim);
  margin-bottom: 16px;
}

.cookie-banner__text a {
  color: var(--mv-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, 0.3);
  transition: border-color 0.2s, color 0.2s;
}

.cookie-banner__text a:hover {
  border-bottom-color: var(--mv-cyan);
  color: #7DEAF7;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.cookie-btn {
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
  font-family: inherit;
}

.cookie-btn--primary {
  background: linear-gradient(135deg, var(--mv-orange) 0%, #FF9A4D 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 12px rgba(255, 122, 26, 0.35),
              0 1px 0 rgba(255, 255, 255, 0.2) inset;
  position: relative;
  overflow: hidden;
}

.cookie-btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.5s ease;
}

.cookie-btn--primary:hover::before { left: 100%; }

.cookie-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255, 122, 26, 0.5),
              0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.cookie-btn--secondary {
  background: rgba(34, 211, 238, 0.07);
  color: var(--mv-cyan);
  border: 1px solid rgba(34, 211, 238, 0.32);
}

.cookie-btn--secondary:hover {
  color: #7DEAF7;
  border-color: rgba(34, 211, 238, 0.65);
  background: rgba(34, 211, 238, 0.14);
}

.cookie-btn--link {
  background: transparent;
  color: var(--mv-text-faint);
  border: none;
  padding: 10px 4px;
  font-size: 13px;
}

.cookie-btn--link:hover { color: var(--mv-cyan); }

/* 顶部光带：青 → 火花橙 → 青 */
.cookie-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.3) 15%,
    rgba(255, 122, 26, 0.85) 50%,
    rgba(34, 211, 238, 0.3) 85%,
    transparent 100%);
  border-radius: 14px 14px 0 0;
  opacity: 0.8;
}

.cookie-banner::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--mv-orange);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--mv-orange), 0 0 20px rgba(255, 122, 26, 0.5);
  opacity: 0.9;
}

/* ---------- Cookie 设置面板 ---------- */
.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 12, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cookie-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.cookie-modal {
  background: var(--mv-panel-solid, #181030);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65),
              0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.cookie-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.3) 20%,
    rgba(255, 122, 26, 0.9) 50%,
    rgba(34, 211, 238, 0.3) 80%,
    transparent 100%);
  border-radius: 16px 16px 0 0;
  z-index: 2;
}

.cookie-modal-overlay.show .cookie-modal {
  transform: translateY(0) scale(1);
}

.cookie-modal__header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid rgba(168, 139, 250, 0.12);
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #181030 0%, rgba(24, 16, 48, 0.95) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
}

.cookie-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.cookie-modal__subtitle {
  font-size: 13px;
  color: var(--mv-text-faint);
}

.cookie-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(34, 211, 238, 0.08);
  border-radius: 8px;
  color: var(--mv-text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.cookie-modal__close:hover {
  background: rgba(34, 211, 238, 0.16);
  color: var(--mv-cyan);
}

.cookie-modal__body { padding: 16px 24px 24px; }

.cookie-category {
  border: 1px solid rgba(168, 139, 250, 0.16);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: rgba(139, 92, 246, 0.03);
}

.cookie-category:hover {
  border-color: rgba(34, 211, 238, 0.28);
  box-shadow: 0 2px 12px rgba(34, 211, 238, 0.07);
}

.cookie-category__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.04) 0%, transparent 100%);
  user-select: none;
}

.cookie-category__info { flex: 1; }

.cookie-category__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--mv-text);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-category__badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.cookie-category__badge--required {
  background: rgba(255, 122, 26, 0.12);
  color: #FF9A4D;
  border: 1px solid rgba(255, 122, 26, 0.28);
}

.cookie-category__badge--optional {
  background: rgba(34, 211, 238, 0.1);
  color: var(--mv-cyan);
  border: 1px solid rgba(34, 211, 238, 0.22);
}

.cookie-category__desc {
  font-size: 13px;
  color: var(--mv-text-faint);
  line-height: 1.5;
}

/* 开关 */
.cookie-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 12px;
}

.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(110, 102, 144, 0.22);
  border: 1px solid rgba(168, 139, 250, 0.25);
  border-radius: 24px;
  transition: 0.3s;
}

.cookie-toggle__slider::before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #8E86B0;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-toggle input:checked + .cookie-toggle__slider {
  background: rgba(255, 122, 26, 0.2);
  border-color: rgba(255, 122, 26, 0.45);
}

.cookie-toggle input:checked + .cookie-toggle__slider::before {
  transform: translateX(20px);
  background: var(--mv-orange);
  box-shadow: 0 0 8px rgba(255, 122, 26, 0.6);
}

.cookie-toggle input:disabled + .cookie-toggle__slider {
  cursor: not-allowed;
  opacity: 0.7;
}

.cookie-toggle input:disabled + .cookie-toggle__slider::before {
  background: var(--mv-orange);
  box-shadow: 0 0 8px rgba(255, 122, 26, 0.4);
}

.cookie-category__expand {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  color: var(--mv-text-faint);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.cookie-category.expanded .cookie-category__expand {
  transform: rotate(180deg);
}

.cookie-category__details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(0, 0, 0, 0.22);
}

.cookie-category.expanded .cookie-category__details {
  max-height: 400px;
  border-top: 1px solid rgba(168, 139, 250, 0.1);
}

.cookie-category__details-inner { padding: 12px 16px; }

.cookie-list { list-style: none; margin: 0; padding: 0; }

.cookie-list__item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(168, 139, 250, 0.08);
  font-size: 13px;
}

.cookie-list__item:last-child { border-bottom: none; }

.cookie-list__name {
  color: var(--mv-text-dim);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.cookie-list__meta {
  color: var(--mv-text-faint);
  font-size: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-modal__footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(168, 139, 250, 0.12);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0;
  background: linear-gradient(0deg, #181030 0%, rgba(24, 16, 48, 0.95) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 移动端 */
@media (max-width: 480px) {
  .cookie-banner {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
    padding: 18px;
  }
  .cookie-banner.show { transform: translateY(0); }
  .cookie-banner__actions { flex-direction: column; }
  .cookie-banner__actions .cookie-btn { width: 100%; text-align: center; }
  .cookie-modal { max-height: 90vh; border-radius: 12px; }
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  .cookie-modal,
  .cookie-modal-overlay,
  .cookie-toggle__slider,
  .cookie-toggle__slider::before,
  .cookie-category__details {
    transition: none;
    animation: none;
  }
}