/* ==========================================================================
   星空清理者 · 知识手册 —— 作品专属样式
   视觉身份：地球大气边缘（Atmospheric Limb） + 飞行日志时间线
   字体：Orbitron（显示 / 遥测）+ Noto Sans SC（正文 / 中文）
   主色：地平线橘 #c2620a · 大气青 #0c84a0 · 深空靛 #34469c，置于大气青浅底 #d2e8ef
   —— 刻意区别于库内其它作品（Lora+Work Sans / 红色系 / 卡片网格+TOC）
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root {
  /* —— 设计令牌（作品自有命名体系，前缀 pl-）——
     主题：地球大气边缘（Atmospheric Limb）——
     取色自轨道上看地球那条「深空靛蓝 → 大气青 → 地平线橘」的辉光带。
     surface 用明亮的「大气青」浅底（护眼、不暗不灰不黄），
     limb 渐变作为标志元素用于 hero 辉光带与飞行日志时间线主轴。
     三栏对照色 = limb 三色：琥珀(地平线)/青(大气)/靛蓝(深空)。 */
  --pl-void: #bcdbe4;          /* 最深纸面（rail / hero 渐变用） */
  --pl-deep: #d2e8ef;          /* 主背景：明亮大气青浅底 */
  --pl-panel: #e8f4f7;         /* 面板：近白大气青卡片 */
  --pl-panel-2: #ddf0f4;       /* 抬升面板 */
  --pl-grid: rgba(18, 70, 102, 0.11);   /* 工程网格线（深青墨） */
  --pl-line: rgba(18, 70, 102, 0.20);   /* 描边 */

  --pl-text: #14203a;          /* 正文：深空靛墨 */
  --pl-muted: #41526e;
  --pl-dim: #6f819b;

  --pl-amber: #c2620a;         /* 地平线辉光 / 动画线 */
  --pl-amber-soft: rgba(194, 98, 10, 0.13);
  --pl-cyan: #0c84a0;          /* 大气青 / 漫画线 */
  --pl-cyan-soft: rgba(12, 132, 160, 0.11);
  --pl-green: #34469c;         /* 深空靛蓝 / 科学线（limb 三色之一） */
  --pl-green-soft: rgba(52, 70, 156, 0.11);
  --pl-red: #bb3a2a;           /* 警报 / 改编差异 */

  /* —— 左 rail：深空暗区（与右侧明亮大气形成对比，但不至于死黑）—— */
  --pl-rail-bg: linear-gradient(180deg, #283a66 0%, #2f437a 55%, #344a86 100%);
  --pl-rail-text: #f1f5fd;
  --pl-rail-muted: #cdd8ef;
  --pl-rail-dim: #a3b3d8;
  --pl-rail-line: rgba(180, 204, 240, 0.24);

  /* limb 标志渐变：深空 → 大气 → 地平线 */
  --pl-limb: linear-gradient(90deg, #1a2a6b 0%, #14618f 36%, #1aa0bc 60%, #e08a2c 100%);
  --pl-limb-v: linear-gradient(180deg, #1a2a6b 0%, #1aa0bc 50%, #e08a2c 100%);

  --pl-title-color: var(--pl-amber);
  --pl-title-weight: 900;

  --pl-display: 'Orbitron', 'Noto Sans SC', sans-serif;
  --pl-body: 'Noto Sans SC', system-ui, -apple-system, "Segoe UI", sans-serif;

  --pl-rail: 248px;
  --pl-radius: 12px;
  --pl-shadow: 0 1px 2px rgba(18, 50, 90, 0.08), 0 6px 18px rgba(18, 50, 90, 0.11);
  --pl-shadow-sm: 0 1px 2px rgba(18, 50, 90, 0.07), 0 3px 8px rgba(18, 50, 90, 0.09);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* —— 优化：大小复合网格背景 —— */
  background:
    linear-gradient(var(--pl-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pl-grid) 1px, transparent 1px),
    linear-gradient(rgba(18, 70, 102, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 70, 102, 0.05) 1px, transparent 1px),
    radial-gradient(1100px 700px at 88% -8%, rgba(12, 132, 160, 0.10), transparent 60%),
    radial-gradient(900px 600px at -5% 8%, rgba(194, 98, 10, 0.06), transparent 55%),
    var(--pl-deep);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px, auto, auto, auto;
  color: var(--pl-text);
  font-family: var(--pl-body);
  line-height: 1.78;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pl-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(12, 132, 160, 0.24); color: #14203a; }

/* ============================ 布局：左 rail + 主内容 ====================== */
.pl-shell { display: flex; min-height: 100vh; }

.pl-rail {
  width: var(--pl-rail);
  flex: 0 0 var(--pl-rail);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  /* —— 优化：毛玻璃效果 —— */
  background: rgba(40, 58, 102, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid transparent;
  /* 右缘 limb 辉光线：深空与大气交界处 */
  border-image: var(--pl-limb-v) 1;
  box-shadow: 4px 0 24px rgba(8, 16, 40, 0.28);
  padding: 1.4rem 1.1rem 2rem;
  scrollbar-width: thin;
  color: var(--pl-rail-text);
}
.pl-rail::-webkit-scrollbar { width: 7px; }
.pl-rail::-webkit-scrollbar-thumb { background: var(--pl-rail-line); border-radius: 4px; }

/* —— 作品大标题栏（左上角品牌入口，每页必备，链接到作品 index）—— */
.pl-brand {
  display: block;
  text-decoration: none;
  padding: 0.4rem 0.2rem 1.1rem;
  border-bottom: 1px solid var(--pl-rail-line);
  margin-bottom: 1rem;
}
.pl-brand:hover { text-decoration: none; }
.pl-brand .pl-brand-greek {
  font-family: var(--pl-display);
  font-weight: var(--pl-title-weight);
  font-size: 1.18rem;
  letter-spacing: 0.14em;
  color: #f0a93f;
  line-height: 1.1;
  text-shadow: 0 0 18px rgba(240, 169, 63, 0.35);
  transition: color 0.2s ease;
}
.pl-brand:hover .pl-brand-greek { color: #ffc46a; }
.pl-brand .pl-brand-cn {
  display: block;
  font-family: var(--pl-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.32em;
  color: var(--pl-rail-text);
  margin-top: 0.3rem;
}
.pl-brand .pl-brand-sub {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--pl-rail-dim);
  margin-top: 0.35rem;
  text-transform: uppercase;
}

.pl-rail-label {
  font-family: var(--pl-display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--pl-rail-dim);
  text-transform: uppercase;
  margin: 1.3rem 0 0.5rem;
}
.pl-nav { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.pl-nav li { margin: 0; }
.pl-nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.55rem;
  border-radius: 8px;
  color: var(--pl-rail-muted);
  font-size: 0.9rem;
  border-left: 2px solid transparent;
}
.pl-nav a:hover { background: rgba(165, 192, 235, 0.14); color: var(--pl-rail-text); text-decoration: none; }
.pl-nav a.is-active {
  color: #ffb955;
  background: rgba(255, 185, 85, 0.18);
  border-left-color: #ffb955;
}
.pl-nav .pl-nav-code {
  font-family: var(--pl-display);
  font-size: 0.68rem;
  color: var(--pl-rail-dim);
  flex: 0 0 auto;
}

/* ============================ 主内容区 ================================== */
.pl-main { flex: 1 1 auto; min-width: 0; padding: 2.2rem clamp(1rem, 3vw, 3rem) 4rem; }
.pl-container { max-width: 1080px; margin: 0 auto; }

/* —— 顶部移动端栏（默认隐藏，<1024px 显示）—— */
.pl-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(40, 58, 102, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid transparent;
  border-image: var(--pl-limb) 1;
  padding: 0.75rem 1.2rem;
  /* —— 关键修复：使用 calc 抵消父容器的动态 padding，实现全宽 —— */
  margin-left: calc(-1 * clamp(1rem, 3vw, 3rem));
  margin-right: calc(-1 * clamp(1rem, 3vw, 3rem));
  margin-top: -2.2rem;
  margin-bottom: 1.5rem;
  color: var(--pl-rail-text);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.pl-topbar .pl-brand-cn { color: var(--pl-rail-text); }
.pl-topbar .pl-brand-greek { color: #ffb955; }
.pl-topbar .pl-brand { border: 0; padding: 0; margin: 0; }
.pl-topbar .pl-brand-greek { font-size: 1rem; }
.pl-topbar .pl-brand-cn { display: inline; font-size: 0.8rem; margin-left: 0.5rem; letter-spacing: 0.2em; }
.pl-topbar .pl-brand-sub { display: none; }
.pl-menu-toggle {
  background: var(--pl-panel);
  border: 1px solid var(--pl-line);
  color: var(--pl-text);
  border-radius: 8px;
  width: 42px; height: 38px;
  font-size: 1.2rem;
  cursor: pointer;
  display: grid; place-items: center;
}

/* —— 页面标题区 —— */
.pl-pagehead { margin-bottom: 2rem; }
.pl-eyebrow {
  font-family: var(--pl-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--pl-cyan);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 0.6rem;
}
.pl-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--pl-cyan); }
.pl-pagehead h1 {
  font-family: var(--pl-display);
  font-weight: 900;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.7rem);
  line-height: 1.12;
  margin: 0.7rem 0 0.6rem;
  letter-spacing: 0.01em;
}
.pl-pagehead .pl-lede { color: var(--pl-muted); max-width: 70ch; font-size: 1.02rem; }

/* —— 通用面板 —— */
.pl-panel {
  background: var(--pl-panel);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: 1.4rem 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--pl-shadow-sm);
}
.pl-panel h2, .pl-panel h3 { font-family: var(--pl-display); }

/* —— 容器护角对准框 (HUD Reticles) —— */
.pl-panel, .pl-chart, .pl-col, .pl-vol-card, .pl-char {
  position: relative;
  /* 基础内阴影，增加一点深度 */
  box-shadow: inset 0 0 15px rgba(18, 70, 102, 0.02), var(--pl-shadow-sm);
  /* —— 优化：延长总过渡时间至 0.8s，增加载入感 —— */
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* —— 悬停时：高能电浆辉光模式 (Plasma Glow) —— */
.pl-panel:hover, .pl-chart:hover, .pl-col:hover, .pl-vol-card:hover, .pl-char:hover {
  /* 使用带有呼吸感的浅色底，模拟高能屏幕 */
  background: linear-gradient(135deg, #f0f9ff 0%, #fff7ed 100%); 
  border-color: var(--pl-cyan);
  /* 复合光晕：主青色光 + 边缘微量橘色光 */
  box-shadow: 0 0 35px rgba(12, 132, 160, 0.28),
              0 0 10px rgba(194, 98, 10, 0.15),
              inset 0 0 25px rgba(12, 132, 160, 0.08),
              var(--pl-shadow);
  transform: translateY(-3px); /* 略微加大浮起距离 */
}

/* 悬停时关键词同步高亮 */
.pl-panel:hover .pl-kw, .pl-vol-card:hover .pl-kw {
  text-shadow: 0 0 12px rgba(194, 98, 10, 0.4);
  color: #e08a2c;
}

.pl-panel::before, .pl-panel::after,
.pl-chart::before, .pl-chart::after,
.pl-col::before, .pl-col::after,
.pl-vol-card::before, .pl-vol-card::after,
.pl-char::before, .pl-char::after {
  content: "";
  position: absolute;
  width: 14px; /* 略微加大角标尺寸 */
  height: 14px;
  pointer-events: none;
  opacity: 0.4;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: pl-bracket-pulse 4s infinite ease-in-out;
  z-index: 10;
}

/* 左上角护角 */
.pl-panel::before, .pl-chart::before, .pl-col::before, .pl-vol-card::before, .pl-char::before {
  top: -8px; left: -8px;
  border-top: 2px solid var(--pl-cyan);
  border-left: 2px solid var(--pl-cyan);
}

/* 右下角护角 */
.pl-panel::after, .pl-chart::after, .pl-col::after, .pl-vol-card::after, .pl-char::after {
  bottom: -8px; right: -8px;
  border-bottom: 2px solid var(--pl-amber);
  border-right: 2px solid var(--pl-amber);
}

/* —— 悬停时：角标捕捉动画 (Snap-in) —— */
.pl-panel:hover::before, .pl-chart:hover::before, .pl-col:hover::before, .pl-vol-card:hover::before, .pl-char:hover::before {
  opacity: 1;
  top: -2px; left: -2px;
  animation: none;
}
.pl-panel:hover::after, .pl-chart:hover::after, .pl-col:hover::after, .pl-vol-card:hover::after, .pl-char:hover::after {
  opacity: 1;
  bottom: -2px; right: -2px;
  animation: none;
}

/* 角标呼吸关键帧 */
@keyframes pl-bracket-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

.pl-section-title {
  font-family: var(--pl-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin: 2.6rem 0 1.2rem;
  display: flex; align-items: center; gap: 0.7rem;
  letter-spacing: 0.02em;
}
/* —— 自动化元数据标签 —— */
.pl-section-title::after, .pl-pagehead h1::after {
  /* —— 优化：默认使用占位符，避免误导 —— */
  content: "REF_ID: 0x----"; 
  font-family: var(--pl-display);
  font-size: 8px;
  color: var(--pl-dim);
  letter-spacing: 1px;
  border-left: 1px solid var(--pl-line);
  padding-left: 0.8rem;
  margin-left: auto;
  opacity: 0.5;
}

/* 当标签定义了 data-id 时，显示真实 ID 并提亮 */
.pl-section-title[data-id]::after, .pl-pagehead h1[data-id]::after {
  content: "REF_ID: 0x" attr(data-id);
  opacity: 0.8;
  color: var(--pl-cyan);
}

/* 主标题标签位置微调 */
.pl-pagehead h1 { display: flex; align-items: baseline; justify-content: space-between; }
.pl-pagehead h1::after { font-weight: normal; margin-bottom: 0.5rem; }
.pl-section-title .pl-tag-code {
  font-size: 0.72rem;
  color: var(--pl-deep);
  background: var(--pl-amber);
  padding: 0.18rem 0.5rem;
  border-radius: 5px;
  letter-spacing: 0.08em;
}

/* ============================ 飞行日志时间线 =========================== */
.pl-log { position: relative; margin: 1.5rem 0; padding-left: 2.2rem; }
.pl-log::before {
  content: "";
  position: absolute;
  left: 9px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--pl-limb-v);
  /* 2.2 初始缩放设为 0 */
  transform: scaleY(0);
  transform-origin: top;
  /* —— 优化：调慢生长动画速度 —— */
  transition: transform 2.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.pl-log.is-visible::before {
  transform: scaleY(1);
}
.pl-episode { 
  position: relative; 
  margin-bottom: 2.6rem; 
  /* —— 优化：只有在移动端/平板（有吸顶栏）时才需要跳转偏移 —— */
  scroll-margin-top: 80px; 
}

/* 宽屏 PC 模式：移除跳转偏移，因为顶栏已隐藏 */
@media (min-width: 1024px) {
  .pl-episode {
    scroll-margin-top: 0;
  }
}
.pl-episode::before {
  content: "";
  position: absolute;
  left: -2.2rem; top: 0.4rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--pl-deep);
  border: 2px solid var(--pl-amber);
  box-shadow: 0 0 0 4px rgba(194, 98, 10, 0.16);
}
.pl-ep-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; margin-bottom: 0.3rem; }
.pl-ep-phase {
  font-family: var(--pl-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--pl-deep);
  background: var(--pl-cyan);
  padding: 0.16rem 0.55rem;
  border-radius: 5px;
}
.pl-ep-title { font-family: var(--pl-display); font-weight: 700; font-size: 1.18rem; margin: 0; }
.pl-ep-jp { color: var(--pl-dim); font-size: 0.82rem; }
.pl-ep-airdate { color: var(--pl-dim); font-size: 0.78rem; font-family: var(--pl-display); }

/* ============================ 三方对照（动画↔漫画↔科学）================ */
.pl-compare { margin: 1rem 0 0; }
.pl-compare-tabs { display: none; } /* 桌面端隐藏标签，<768 显示 */
.pl-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.9rem; }
.pl-col {
  border: 1px solid var(--pl-line);
  border-radius: 10px;
  padding: 1rem 1.05rem;
  background: var(--pl-panel);
  box-shadow: var(--pl-shadow-sm);
}
.pl-col h4 {
  font-family: var(--pl-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  margin: 0 0 0.6rem;
  display: flex; align-items: center; gap: 0.45rem;
  text-transform: uppercase;
}
.pl-col h4::before { content: ""; width: 10px; height: 10px; border-radius: 2px; }
.pl-col p, .pl-col ul { margin: 0.45rem 0; font-size: 0.92rem; }
.pl-col ul { padding-left: 1.1rem; }
.pl-col--anime { border-top: 3px solid var(--pl-amber); }
.pl-col--anime h4 { color: var(--pl-amber); }
.pl-col--anime h4::before { background: var(--pl-amber); }
.pl-col--manga { border-top: 3px solid var(--pl-cyan); }
.pl-col--manga h4 { color: var(--pl-cyan); }
.pl-col--manga h4::before { background: var(--pl-cyan); }
.pl-col--sci { border-top: 3px solid var(--pl-green); }
.pl-col--sci h4 { color: var(--pl-green); }
.pl-col--sci h4::before { background: var(--pl-green); }

/* 关键词高亮 */
.pl-kw { color: var(--pl-amber); font-weight: 500; }
.pl-kw-cyan { color: var(--pl-cyan); font-weight: 500; }
.pl-kw-sci { color: var(--pl-green); font-weight: 500; }

/* 改编差异徽标 */
.pl-diff {
  display: inline-block;
  font-family: var(--pl-display);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--pl-red);
  border: 1px solid rgba(187, 58, 42, 0.42);
  background: rgba(187, 58, 42, 0.10);
  padding: 0.1rem 0.45rem;
  border-radius: 5px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* ============================ 知识卡 / 表格 / 图表容器 ================= */
.pl-kbox {
  background: var(--pl-green-soft);
  border: 1px solid rgba(52, 70, 156, 0.30);
  border-left: 3px solid var(--pl-green);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.93rem;
}
.pl-kbox .pl-kbox-title {
  font-family: var(--pl-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--pl-green);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

table.pl-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.9rem; }
table.pl-table th, table.pl-table td { border: 1px solid var(--pl-line); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
table.pl-table th { background: var(--pl-panel-2); font-family: var(--pl-display); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--pl-cyan); }
table.pl-table tr:nth-child(even) td { background: rgba(18,70,102,0.045); }

.pl-chart {
  background: var(--pl-panel);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: 1.5rem;
  margin: 1.4rem 0;
  box-shadow: var(--pl-shadow-sm);
  position: relative;
  /* —— 优化：确保内容（包括 Mermaid）居中 —— */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* —— 3.3 数据引线装饰 —— */
.pl-chart-cap { font-size: 0.8rem; color: var(--pl-dim); margin-top: 1rem; text-align: center; font-family: var(--pl-display); width: 100%; }

.pl-echart { width: 100%; height: 380px; min-height: 300px; }

/* Mermaid 样式覆盖 */
.mermaid { 
  background: transparent !important; 
  text-align: center; 
  width: 100%; 
  display: flex; 
  justify-content: center; 
}
.mermaid svg {
  filter: drop-shadow(0 0 2px rgba(12, 132, 160, 0.2));
  max-width: 100%;
}

/* 折叠（移动端图表） */
.pl-collapse > summary {
  cursor: pointer;
  font-family: var(--pl-display);
  font-size: 0.82rem;
  color: var(--pl-cyan);
  padding: 0.5rem 0;
  list-style: none;
}
.pl-collapse > summary::-webkit-details-marker { display: none; }
.pl-collapse > summary::before { content: "▸ "; }
.pl-collapse[open] > summary::before { content: "▾ "; }

/* ============================ 章节导航（上一/下一）==================== */
.pl-pager {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 3rem 0 1rem; padding-top: 1.5rem;
  border-top: 1px solid var(--pl-line);
}
.pl-pager a {
  flex: 1 1 0;
  background: var(--pl-panel);
  border: 1px solid var(--pl-line);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  color: var(--pl-text);
}
.pl-pager a:hover { border-color: var(--pl-cyan); text-decoration: none; }
.pl-pager .pl-pager-dir { font-family: var(--pl-display); font-size: 0.7rem; color: var(--pl-dim); letter-spacing: 0.1em; }
.pl-pager .pl-pager-ttl { font-family: var(--pl-display); font-weight: 600; font-size: 0.95rem; margin-top: 0.2rem; }
.pl-pager a.pl-pager-next { text-align: right; }
.pl-pager a.pl-pager-disabled { opacity: 0.35; pointer-events: none; }

/* —— 回到顶部 —— */
.pl-totop {
  position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 40;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--pl-panel); border: 1px solid var(--pl-line);
  color: var(--pl-amber); font-size: 1.1rem; cursor: pointer;
  display: none; place-items: center; box-shadow: var(--pl-shadow);
}
.pl-totop.is-visible { display: grid; }

/* —— 页脚 —— */
.pl-footer {
  border-top: 1px solid var(--pl-line);
  margin-top: 3rem; padding-top: 1.6rem;
  color: var(--pl-dim); font-size: 0.82rem;
}

/* ============================ 首页专用 ================================ */
/* —— Hero：深空暗区，模拟「从轨道暗侧望向被照亮的地球大气」—— */
.pl-hero {
  position: relative;
  border: 1px solid rgba(150, 180, 230, 0.18);
  border-radius: 16px;
  overflow: hidden;
  padding: clamp(2rem, 1rem + 5vw, 4rem);
  /* —— 4.1 多层视差星空 & 4.3 扫描线叠加 —— */
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1px, transparent 1px, transparent 2px), /* 扫描线 */
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 10% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 90% 10%, rgba(255,255,255,0.3), transparent),
    radial-gradient(900px 420px at 86% -10%, rgba(26, 160, 188, 0.30), transparent 60%),
    radial-gradient(680px 360px at 6% 110%, rgba(224, 138, 44, 0.18), transparent 60%),
    linear-gradient(155deg, #0a1230 0%, #0f1c44 55%, #143058 100%);
  background-attachment: scroll, fixed, fixed, fixed, fixed, scroll, scroll, scroll;
  box-shadow: inset 0 0 80px rgba(8, 14, 36, 0.5);
  color: #e8eef9;
  margin-bottom: 2.2rem;
  animation: pl-stars-drift 60s linear infinite;
}

@keyframes pl-stars-drift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 40px 60px, -30px 50px, 20px -40px, -50px -20px, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

/* —— 4.2 地球边缘辉光呼吸效果 —— */
.pl-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--pl-limb);
  box-shadow: 0 0 22px rgba(26, 160, 188, 0.55);
  animation: pl-glow-pulse 4s ease-in-out infinite;
}

@keyframes pl-glow-pulse {
  0%, 100% { opacity: 0.8; box-shadow: 0 0 15px rgba(26, 160, 188, 0.4); }
  50% { opacity: 1; box-shadow: 0 0 30px rgba(26, 160, 188, 0.7); }
}
.pl-hero h1 {
  font-family: var(--pl-display);
  font-weight: 900;
  font-size: clamp(2rem, 1.2rem + 4vw, 3.6rem);
  margin: 0.6rem 0;
  letter-spacing: 0.02em;
  line-height: 1.08;
  color: #f4f8ff;
}
.pl-hero .pl-hero-greek {
  font-family: var(--pl-display);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #54d2ec;
  font-size: clamp(0.9rem, 0.7rem + 1vw, 1.3rem);
  text-shadow: 0 0 16px rgba(26, 160, 188, 0.5);
}
.pl-hero .pl-hero-quote {
  color: #c2cee6;
  font-style: italic;
  max-width: 60ch;
  margin-top: 1rem;
  border-left: 2px solid #f0a93f;
  padding-left: 1rem;
}
.pl-stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.pl-stat .pl-stat-num { font-family: var(--pl-display); font-weight: 700; font-size: 2rem; color: #f0a93f; text-shadow: 0 0 18px rgba(240,169,63,0.3); }
.pl-stat .pl-stat-lbl { color: #93a4c9; font-size: 0.82rem; letter-spacing: 0.05em; }

.pl-vol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.pl-vol-card {
  display: block;
  background: var(--pl-panel);
  border: 1px solid var(--pl-line);
  border-radius: 12px;
  padding: 1.3rem;
  color: var(--pl-text);
  box-shadow: var(--pl-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.3s ease;
}
.pl-vol-card:hover { 
  transform: translateY(-4px); 
  border-color: var(--pl-amber); 
  text-decoration: none;
  background-color: var(--pl-panel-2);
}

/* —— 2.1 扫描效果：水平亮线 —— */
.pl-vol-card::before {
  content: "";
  position: absolute;
  top: -2px; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pl-amber), transparent);
  box-shadow: 0 0 8px var(--pl-amber);
  opacity: 0;
  z-index: 5;
}
.pl-vol-card:hover::before {
  animation: pl-scan 1.2s linear infinite;
}
@keyframes pl-scan {
  0% { top: -2%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 102%; opacity: 0; }
}

/* —— 2.3 按钮闪烁反馈 —— */
.pl-nav a, .pl-aux-card, .pl-pager a, .pl-menu-toggle {
  transition: opacity 0.1s ease;
}
.pl-nav a:active, .pl-aux-card:active, .pl-pager a:active, .pl-menu-toggle:active {
  animation: pl-flicker 0.15s ease;
}
@keyframes pl-flicker {
  0% { opacity: 1; }
  50% { opacity: 0.4; transform: scale(0.98); }
  100% { opacity: 1; }
}
.pl-vol-card .pl-vol-code {
  font-family: var(--pl-display); font-weight: 900; font-size: 2.2rem;
  color: var(--pl-amber-soft); position: absolute; top: 0.4rem; right: 0.8rem;
  -webkit-text-stroke: 1px rgba(194,98,10,0.55); color: transparent;
}
.pl-vol-card h3 { font-family: var(--pl-display); margin: 0 0 0.3rem; font-size: 1.1rem; }
.pl-vol-card .pl-vol-range { color: var(--pl-cyan); font-family: var(--pl-display); font-size: 0.76rem; letter-spacing: 0.05em; }
.pl-vol-card p { color: var(--pl-muted); font-size: 0.88rem; margin: 0.6rem 0 0; }

.pl-aux-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.pl-aux-card {
  background: var(--pl-panel); border: 1px solid var(--pl-line); border-radius: 10px;
  padding: 1.1rem; color: var(--pl-text); box-shadow: var(--pl-shadow-sm);
}
.pl-aux-card:hover { border-color: var(--pl-cyan); text-decoration: none; }
.pl-aux-card .pl-aux-ico { font-size: 1.4rem; }
.pl-aux-card h4 { font-family: var(--pl-display); margin: 0.4rem 0 0.2rem; font-size: 1rem; }
.pl-aux-card p { color: var(--pl-muted); font-size: 0.82rem; margin: 0; }

/* —— 角色卡 —— */
.pl-char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.pl-char {
  background: var(--pl-panel); border: 1px solid var(--pl-line);
  border-radius: 12px; padding: 1.2rem; border-top: 3px solid var(--pl-cyan);
  box-shadow: var(--pl-shadow-sm);
}
.pl-char h3 { font-family: var(--pl-display); margin: 0 0 0.2rem; font-size: 1.12rem; }
.pl-char .pl-char-en { color: var(--pl-dim); font-size: 0.78rem; font-family: var(--pl-display); letter-spacing: 0.05em; }
.pl-char .pl-char-role { color: var(--pl-amber); font-size: 0.8rem; margin: 0.4rem 0; }
.pl-char p { font-size: 0.9rem; color: var(--pl-muted); margin: 0.5rem 0 0; }

/* —— 术语表 —— */
.pl-term { border-bottom: 1px solid var(--pl-line); padding: 1rem 0; }
.pl-term dt { font-family: var(--pl-display); font-weight: 600; color: var(--pl-cyan); font-size: 1rem; }
.pl-term dt .pl-term-en { color: var(--pl-dim); font-size: 0.78rem; font-weight: 400; margin-left: 0.5rem; }
.pl-term dd { margin: 0.4rem 0 0; color: var(--pl-text); font-size: 0.92rem; }

/* ============================ 响应式：三档断点 ======================== */

/* 平板：768–1023px —— 收起 rail，三栏合并为两栏（动画+漫画 / 科学）*/
@media (max-width: 1023px) {
  .pl-rail {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 80;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 8px 0 32px rgba(18,50,90,0.22);
  }
  .pl-shell.is-nav-open .pl-rail { transform: translateX(0); }
  .pl-topbar { 
    display: flex; 
    /* 移动端下保持边距对齐逻辑 */
    margin-left: calc(-1 * clamp(1rem, 3vw, 3rem));
    margin-right: calc(-1 * clamp(1rem, 3vw, 3rem));
    /* —— 关键修复：完全抵消 .pl-main 的 2.2rem 顶部 padding —— */
    margin-top: -2.2rem; 
  }
  .pl-nav-scrim {
    display: none; position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,0.5);
  }
  .pl-shell.is-nav-open .pl-nav-scrim { display: block; }
  .pl-cols { grid-template-columns: 1fr 1fr; }
  .pl-col--sci { grid-column: 1 / -1; }
}

/* —— 5.2 自定义滚动条 (Webkit) —— */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(18, 70, 102, 0.05); }
::-webkit-scrollbar-thumb { 
  background: var(--pl-line); 
  border-radius: 3px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--pl-cyan); }

/* 手机：<768px —— 单栏；三方对照改标签页切换 */
@media (max-width: 767px) {
  .pl-echart { height: 280px; }
  .pl-compare-tabs {
    display: flex; gap: 0.4rem; margin-bottom: 0.7rem;
    background: rgba(18, 70, 102, 0.05);
    padding: 0.3rem;
    border-radius: 10px;
  }
  .pl-compare-tabs button {
    flex: 1 1 0;
    font-family: var(--pl-display);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.3rem;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--pl-muted);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  /* —— 5.1 标签页重绘：激活态效果 —— */
  .pl-compare-tabs button[aria-selected="true"] { 
    color: #fff; 
    background: var(--pl-amber); 
    box-shadow: 0 4px 12px rgba(194, 98, 10, 0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }
  .pl-compare-tabs button[data-target="manga"][aria-selected="true"] { 
    background: var(--pl-cyan); 
    box-shadow: 0 4px 12px rgba(12, 132, 160, 0.3);
  }
  .pl-compare-tabs button[data-target="sci"][aria-selected="true"] { 
    background: var(--pl-green); 
    box-shadow: 0 4px 12px rgba(52, 70, 156, 0.3);
  }
  .pl-cols { grid-template-columns: 1fr; }
  .pl-cols.is-tabbed .pl-col { display: none; }
  .pl-cols.is-tabbed .pl-col.is-shown { display: block; animation: pl-pane-in 0.3s ease-out; }
  
  @keyframes pl-pane-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .pl-col--sci { grid-column: auto; }
  .pl-pager { flex-direction: column; }
  .pl-section-title { font-size: 1.15rem; }
  table.pl-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* —— 5.3 打印/PDF 样式优化 —— */
@media print {
  .pl-rail, .pl-topbar, .pl-totop, .pl-nav-scrim, .pl-pager { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .pl-main { padding: 0 !important; }
  .pl-panel, .pl-col, .pl-vol-card { 
    break-inside: avoid; 
    border: 1px solid #ddd !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .pl-hero { 
    background: #14203a !important; 
    color: #fff !important; 
    -webkit-print-color-adjust: exact;
  }
  .pl-section-title::after { display: none; }
}

/* —— 页面内部大纲 (HUD Outline) —— */
.pl-outline {
  position: fixed;
  right: 0;
  top: 15vh;
  /* —— 优化：自适应宽度 —— */
  width: auto;
  min-width: 180px;
  max-width: 280px;
  height: auto;
  max-height: 160px; 
  /* —— 优化：更深邃、更具质感的 HUD 背景 —— */
  background: rgba(14, 26, 60, 0.98); 
  backdrop-filter: blur(15px);
  border: 1px solid rgba(26, 160, 188, 0.4);
  border-right: none;
  border-radius: 12px 0 0 12px;
  padding: 1.2rem 1.2rem 1.2rem 42px;
  z-index: 90;
  overflow: hidden; 
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.2s ease;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5), inset 1px 1px 0 rgba(255,255,255,0.05);
  transform: translateX(calc(100% - 32px));
}

.pl-outline.is-expanded {
  transform: translateX(0);
  /* —— 关键修复：高度随内容自适应，最高 80vh —— */
  max-height: 80vh;
  overflow-y: auto;
}

/* 侧边触发条 */
.pl-outline-trigger {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pl-amber);
  color: #fff;
  border-radius: 12px 0 0 12px;
  transition: background 0.2s;
  z-index: 2;
}
.pl-outline-trigger:hover { background: #e08a2c; }
.pl-outline-trigger::before {
  content: "LOG NAVIGATION";
  font-family: var(--pl-display);
  font-size: 10px;
  white-space: nowrap;
  transform: rotate(-90deg);
  letter-spacing: 2.5px;
}

/* 宽屏下默认展开且还原尺寸 */
@media (min-width: 1440px) {
  .pl-outline {
    right: 2rem;
    top: 12vh;
    transform: none;
    max-height: 80vh;
    background: rgba(18, 70, 102, 0.04);
    backdrop-filter: none;
    border: none;
    border-left: 1px dashed var(--pl-line);
    border-radius: 0;
    box-shadow: none;
    width: 180px;
    padding: 1rem;
    overflow-y: auto;
  }
  .pl-outline-trigger { display: none; }
  .pl-container { margin-right: 200px; }
  .pl-outline-title { color: var(--pl-cyan) !important; text-shadow: none !important; }
  .pl-outline a { color: var(--pl-muted) !important; }
  .pl-outline a .pl-outline-num { color: var(--pl-cyan) !important; }
}

/* 手机端自适应优化 */
@media (max-width: 767px) {
  .pl-outline {
    top: 15vh;
    min-width: 160px;
    max-width: 220px;
    max-height: 48px; 
    transform: translateX(calc(100% - 20px));
    padding-left: 42px;
    z-index: 100;
  }
  .pl-outline.is-expanded {
    max-height: 65vh; 
    transform: translateX(0);
  }
  .pl-outline-trigger { 
    width: 20px; 
    border-radius: 10px 0 0 10px;
  }
  .pl-outline-trigger::before { 
    content: "⋮"; 
    transform: none; 
    font-size: 16px; 
  }
}

@keyframes pl-tab-pulse {
  0%, 100% { box-shadow: -2px 0 8px rgba(194, 98, 10, 0.3); opacity: 0.7; }
  50% { box-shadow: -4px 0 12px rgba(194, 98, 10, 0.5); opacity: 0.9; }
}

.pl-outline-title {
  font-family: var(--pl-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: #54d2ec; 
  margin-bottom: 0.8rem;
  display: flex;
  align-items: flex-start; /* 改为 flex-start 以适应多行 */
  gap: 0.5rem;
  padding-left: 10px;
  text-shadow: 0 0 8px rgba(84, 210, 236, 0.4);
  line-height: 1.4; /* 增加行高，防止重叠 */
}
.pl-outline-title::before { content: ""; width: 4px; height: 4px; background: var(--pl-amber); border-radius: 50%; }

.pl-outline ul { list-style: none; padding: 0 0 0 10px; margin: 0; }
.pl-outline li { margin-bottom: 0.6rem; }
.pl-outline a {
  display: block;
  font-family: var(--pl-display), var(--pl-body);
  font-size: 0.78rem;
  /* —— 优化：链接文字改为高对比度浅色 —— */
  color: #cdd8ef; 
  transition: all 0.2s;
  line-height: 1.3;
  padding-left: 0.5rem;
  border-left: 2px solid transparent;
}
.pl-outline a:hover {
  color: #ffb955;
  text-decoration: none;
  border-left-color: var(--pl-amber);
  padding-left: 0.8rem;
}
.pl-outline a .pl-outline-num {
  display: block;
  font-size: 0.65rem;
  /* —— 优化：编号颜色提亮 —— */
  color: #54d2ec; 
  margin-bottom: 0.1rem;
}