/* ═══════════════════════════════════════════════════════════════
   藏经阁 · 开发资源阁 — 主题系统
   ─────────────────────────────────────────────────────────────
   设计基因继承自「东风」Agent（玻璃拟态 + 深邃面板 + 玉质按钮 +
   波浪菜单 + 柔光斑呼吸 + 鎏金雕刻铭牌）。
   v1.3 暗红典藏配色：绛檀深红底 × 赤玉主色 × 鎏金点睛 —— 典藏与复古。
   换色即换皮：结构与材质手法不动，只改本文件令牌。
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 主色：赤玉（绛红）——对应东风的 Indigo/Purple ── */
  --color-primary-50:  #fdf1ef;
  --color-primary-100: #fadcd7;
  --color-primary-200: #f3b2a9;
  --color-primary-300: #e8887b;
  --color-primary-400: #dd6557;
  --color-primary-500: #bf4638;   /* 赤玉主色 */
  --color-primary-600: #a1362b;
  --color-primary-700: #872a22;
  --color-primary-800: #6b201a;
  --color-primary-900: #4d1511;

  /* ── 强调色：鎏金 ——对应东风的 Amber 黄玉（典藏金）── */
  --color-accent-400: #ecc97c;
  --color-accent-500: #d9a441;
  --color-accent-600: #b8862e;
  --color-accent-700: #94671f;

  /* ── 第三色：黛蓝（点缀/信息）── */
  --color-tertiary-500: #5f8fb4;

  /* ── 背景层次：绛檀深红 ——对应东风的 #1a1a3a 靛蓝 ── */
  --bg-deep:     #2a100d;
  --bg-surface:  #341713;
  --bg-elevated: #3d1e18;
  --bg-glass:    rgba(255, 255, 255, 0.06);

  /* ── 玻璃拟态层级（与东风同构，色温换为暖檀）── */
  --glass-wash:     rgba(255, 232, 208, 0.020);
  --glass-quiet:    rgba(255, 232, 208, 0.045);
  --glass-resting:  rgba(255, 232, 208, 0.070);
  --glass-floating: rgba(255, 232, 208, 0.110);
  --glass-overlay:  rgba(255, 232, 208, 0.165);

  /* ── 文字 ── */
  --text-primary:   rgba(255, 244, 236, 0.95);
  --text-secondary: rgba(255, 244, 236, 0.66);
  --text-tertiary:  rgba(255, 244, 236, 0.42);
  --text-inverse:   #1a0b08;

  /* ── 功能色 ── */
  --color-success: #3f9d6e;
  --color-warning: #d99a2b;
  --color-error:   #e04b38;
  --color-info:    #5f8fb4;

  /* ── 渐变 ── */
  --gradient-primary: linear-gradient(135deg, #bf4638 0%, #d4614f 50%, #e8887b 100%);
  --gradient-accent:  linear-gradient(135deg, #d9a441 0%, #ecc06a 100%);
  --gradient-jade:    linear-gradient(135deg, #ecc97c 0%, #d9a441 52%, #8a5f1c 100%);
  --gradient-glass:   linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%);

  /* ═══ 藏经阁曲面面板（全系统卡片统一材质）═══
     三层光影，与东风同一材质语言，色温换为绛檀：
     ① 横向曲度光：左缘暖光受光 → 中部通透 → 右缘背光暗角
     ② 顶部弧形环境光（曲面顶缘反光）
     ③ 主体 162° 绛檀渐变（比页面底色略亮，读作"抬起的面板"） */
  --panel-radius: 18px;
  --panel-rim:        rgba(233, 190, 150, 0.14);
  --panel-rim-strong: rgba(244, 205, 165, 0.30);
  --panel-bg:
    linear-gradient(90deg,
      rgba(244, 214, 180, 0.055) 0%,
      rgba(244, 214, 180, 0.014) 16%,
      transparent 40%,
      transparent 66%,
      rgba(0, 0, 0, 0.20) 88%,
      rgba(0, 0, 0, 0.34) 100%),
    radial-gradient(130% 44% at 28% -10%, rgba(244, 214, 180, 0.075), transparent 66%),
    linear-gradient(162deg, #43211b 0%, #371a15 38%, #2a130f 70%, #1d0c09 100%);
  --panel-bg-quiet:
    radial-gradient(120% 60% at 30% -12%, rgba(244, 214, 180, 0.05), transparent 70%),
    linear-gradient(160deg, #3a1c16 0%, #2a130f 60%, #200d0a 100%);
  --panel-bg-overlay:
    linear-gradient(90deg, rgba(244, 214, 180, 0.05) 0%, transparent 40%, rgba(0, 0, 0, 0.22) 100%),
    radial-gradient(120% 46% at 30% -8%, rgba(244, 214, 180, 0.08), transparent 64%),
    linear-gradient(158deg, #4a251d 0%, #2a130f 55%, #1a0a07 100%);
  --panel-shadow:
    inset 1px 1px 0 rgba(244, 220, 190, 0.085),
    inset -10px 0 26px rgba(0, 0, 0, 0.36),
    inset 0 -58px 76px rgba(0, 0, 0, 0.22),
    0 6px 22px rgba(0, 0, 0, 0.42);
  --panel-shadow-quiet:
    inset 1px 1px 0 rgba(244, 220, 190, 0.06),
    inset -8px 0 20px rgba(0, 0, 0, 0.28),
    0 3px 12px rgba(0, 0, 0, 0.30);
  --panel-shadow-lift:
    inset 1px 1px 0 rgba(244, 220, 190, 0.13),
    inset -10px 0 26px rgba(0, 0, 0, 0.30),
    inset 0 -58px 76px rgba(0, 0, 0, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.55);
  --panel-shadow-overlay:
    inset 1px 1px 0 rgba(244, 220, 190, 0.12),
    inset -10px 0 26px rgba(0, 0, 0, 0.32),
    0 30px 70px rgba(0, 0, 0, 0.66),
    0 0 44px rgba(191, 70, 56, 0.12);

  /* ── 侧栏面板（比内容区更深，"檀木匣"式对比；东风为近黑靛蓝）── */
  --sidebar-bg:
    radial-gradient(120% 60% at 20% 0%, rgba(200, 110, 70, 0.10), transparent 60%),
    linear-gradient(168deg, #33150f 0%, #240e0a 48%, #170704 100%);

  --shadow-glass:    0 8px 32px rgba(0, 0, 0, 0.30);
  --shadow-glow:     0 0 20px rgba(191, 70, 56, 0.18);
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.50);

  /* ── 玉质按钮（同东风「抛光玉体」结构，换色）── */
  --jade-rim: rgba(255, 236, 214, 0.20);

  /* ── 圆角 ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── 动画 ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 字体 ── */
  --font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
  --font-brush: Gabriola, 'Monotype Corsiva', 'Palace Script MT', 'Segoe Script', cursive;

  /* ── 布局 ── */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 80px;
  --header-height: 56px;
}

/* ── 玻璃拟态基类（与东风同构）── */
.glass {
  background: var(--glass-resting);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 236, 214, 0.06);
  box-shadow: var(--shadow-glass);
}
.glass-wash {
  background: var(--glass-wash);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 236, 214, 0.03);
}
.glass-floating {
  background: var(--glass-floating);
  backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(255, 236, 214, 0.10);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}

/* ── 曲面面板（藏经阁卡片统一材质）── */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-rim);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
.panel--quiet { background: var(--panel-bg-quiet); box-shadow: var(--panel-shadow-quiet); }
.panel--lift  { box-shadow: var(--panel-shadow-lift); border-color: var(--panel-rim-strong); }

/* ── 玻璃光晕边框（hover 点亮）── */
.glass-glow { position: relative; }
.glass-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-primary);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.glass-glow:hover::before { opacity: 0.5; }

/* ── 渐变文字 ── */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══ 铭牌镌刻：鎏金主铭 + 朱砂副铭（藏书阁题签气质）═══ */
.plaque-jade {
  font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(178deg, #f9e7ae 0%, #e6c46a 26%, #cf9a3e 52%, #a3742a 74%, #7d5814 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.95))
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.55))
    drop-shadow(0 -1px 0 rgba(255, 240, 200, 0.22))
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}
.plaque-cinnabar {
  font-weight: 800;
  letter-spacing: 2.5px;
  background: linear-gradient(178deg, #ffd9cd 0%, #f0897a 30%, #e2564a 58%, #a82f24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7)) drop-shadow(0 0 9px rgba(226, 86, 74, 0.25));
}

/* ── 扫描线光效（暖金光带）── */
.scan-line { position: relative; overflow: hidden; }
.scan-line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 200%;
  background: linear-gradient(to bottom, transparent 0%, rgba(217, 164, 65, 0.06) 50%, transparent 100%);
  animation: scanMove 3s linear infinite;
  pointer-events: none;
}
@keyframes scanMove {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(50%); }
}

/* ── 弹簧入场（东风 springIn / springUp）── */
@keyframes springIn {
  0%   { opacity: 0; transform: scale(0.9) translateY(20px); }
  60%  { transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes springUp {
  0%   { opacity: 0; transform: translateY(24px); }
  60%  { transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes staggerIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 呼吸光效 ── */
@keyframes breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(191, 70, 56, 0.16); }
  50%      { box-shadow: 0 0 40px rgba(191, 70, 56, 0.32); }
}

/* ── 菜单文字波浪跳动（东风招牌交互，藏经阁沿用）── */
@keyframes waveJump {
  0%, 100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-5px) scale(1.12); }
  60%      { transform: translateY(2px) scale(0.98); }
  80%      { transform: translateY(-1px) scale(1.02); }
}

/* ── 粒子背景画布 ── */
#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── 全局重置 ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a { color: var(--color-primary-300); text-decoration: none; }
a:hover { color: var(--color-primary-200); }
ul { list-style: none; }
code, pre, .mono { font-family: var(--font-mono); }

/* ── 滚动条 ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(233, 190, 150, 0.18);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(233, 190, 150, 0.34); }