/* ==========================================================================
   theme.css — 国风水墨仙侠暗色主题 · 道家玄阁意境
   设计基准：移动端 375px，PC 居中等比 max-width 480px
   配色：玄墨底色 · 暗玉青 · 暗朱砂红 · 暗鎏金
   ========================================================================== */

/* ---------- CSS 变量：色彩体系 ---------- */
:root {
  /* 背景色系 — 玄墨 */
  --bg-void:        #0d0d12;   /* 玄墨底色 */
  --bg-ink:         #15151e;   /* 水墨墨色 */
  --bg-ink-deep:    #0f0f16;   /* 更深墨色 */
  --bg-panel:       rgba(21, 21, 30, 0.72);  /* 半透明磨砂面板 */

  /* 点缀色 — 低饱和度 */
  --jade:           #4a7c7e;   /* 暗玉青 */
  --jade-light:     #5a9092;   /* 暗玉青（亮） */
  --jade-dim:       rgba(74, 124, 126, 0.14);
  --cinnabar:       #8b3a3a;   /* 暗朱砂红 */
  --cinnabar-light: #a04545;   /* 暗朱砂红（亮） */
  --cinnabar-dim:   rgba(139, 58, 58, 0.14);
  --gold:           #8a7a4a;   /* 暗鎏金 */
  --gold-light:     #a3925a;   /* 暗鎏金（亮） */
  --gold-dim:       rgba(138, 122, 74, 0.14);

  /* 文字色 */
  --text-primary:   #d5d0c8;   /* 主文字 宣纸白偏暖 */
  --text-secondary: #8a8580;   /* 次要文字 */
  --text-muted:     #5a5550;   /* 弱化文字 */
  --text-jade:      #6a9c9e;   /* 暗玉青文字 */
  --text-gold:      #a3925a;   /* 鎏金文字 */
  --text-cinnabar:  #a04545;   /* 朱砂文字 */

  /* 边框 — 墨晕 + 细金线 */
  --border-ink:     rgba(255, 255, 255, 0.06);
  --border-jade:    rgba(74, 124, 126, 0.30);
  --border-gold:    rgba(138, 122, 74, 0.30);
  --border-cinnabar: rgba(139, 58, 58, 0.30);

  /* 字体 — 思源宋体 + 楷体 */
  --font-serif:    "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-kai:      "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", serif;
  --font-mono:     "JetBrains Mono", "Fira Code", "Consolas", monospace;

  /* 圆角 — 柔和 */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* 阴影 — 轻微浮起 */
  --shadow-panel:  0 6px 24px rgba(0, 0, 0, 0.45);
  --shadow-float:  0 4px 16px rgba(0, 0, 0, 0.35);
  --glow-jade:     0 0 10px rgba(74, 124, 126, 0.25);
  --glow-gold:     0 0 10px rgba(138, 122, 74, 0.25);
  --glow-cinnabar: 0 0 10px rgba(139, 58, 58, 0.25);

  /* 过渡 */
  --ease-ink: cubic-bezier(0.4, 0, 0.2, 1);

  /* 尺寸 */
  --container-max: 480px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 全局重置 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-serif);
  color: var(--text-primary);
  background-color: var(--bg-void);
  line-height: 1.75;
  font-size: 15px;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ---------- 背景：宣纸暗纹理 + 水墨云雾渐变 ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* 淡云雾渐变 */
    radial-gradient(ellipse 70% 50% at 30% 15%, rgba(74, 124, 126, 0.04), transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 75%, rgba(138, 122, 74, 0.035), transparent 65%),
    radial-gradient(ellipse 90% 60% at 50% 50%, rgba(21, 21, 30, 0.3), transparent 75%),
    /* 底层渐变 */
    linear-gradient(165deg, #0d0d12 0%, #101019 40%, #0d0d12 100%);
}

/* 宣纸暗纹理 — SVG noise */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.50 0 0 0 0 0.42 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 淡墨远山装饰 — 固定在底部 */
.ink-mountains {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
}

/* 微弱粒子光点 */
.particle-dots {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.particle-dots span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 0;
  animation: particle-float 8s ease-in-out infinite;
}
.particle-dots span:nth-child(1) { left: 15%; top: 20%; animation-delay: 0s; }
.particle-dots span:nth-child(2) { left: 45%; top: 60%; animation-delay: 2s; }
.particle-dots span:nth-child(3) { left: 75%; top: 30%; animation-delay: 4s; }
.particle-dots span:nth-child(4) { left: 25%; top: 75%; animation-delay: 1s; }
.particle-dots span:nth-child(5) { left: 65%; top: 15%; animation-delay: 3s; }
.particle-dots span:nth-child(6) { left: 85%; top: 65%; animation-delay: 5s; }

@keyframes particle-float {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  50%      { opacity: 0.4; transform: translateY(-30px) scale(1); }
}

/* 所有实际内容置于纹理之上 */
#app, .app-shell, header, main, footer, .page { position: relative; z-index: 1; }

/* ---------- 排版基础 ---------- */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.35; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

a { color: var(--text-jade); text-decoration: none; transition: color 0.25s var(--ease-ink); }
a:hover { color: var(--text-gold); }

::selection { background: var(--jade-dim); color: var(--text-jade); }

/* ---------- 墨晕磨砂卡片面板 ---------- */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-panel);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* 墨晕边框效果 */
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, rgba(138, 122, 74, 0.15), transparent 40%, transparent 60%, rgba(74, 124, 126, 0.10));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 玉青描边面板 */
.panel--jade { border-color: var(--border-jade); }
.panel--jade::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--jade), transparent);
}

/* 鎏金描边面板 */
.panel--gold { border-color: var(--border-gold); }
.panel--gold::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- 滚动条美化 ---------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-ink-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--jade-dim), var(--gold-dim));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--jade); }

* { scrollbar-width: thin; scrollbar-color: var(--jade-dim) var(--bg-ink-deep); }

/* ---------- 文字工具类 ---------- */
.text-jade      { color: var(--text-jade); }
.text-gold      { color: var(--text-gold); }
.text-cinnabar  { color: var(--text-cinnabar); }
.text-muted     { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.font-kai       { font-family: var(--font-kai); }
.font-mono      { font-family: var(--font-mono); }
.text-glow-jade     { color: var(--text-jade); text-shadow: var(--glow-jade); }
.text-glow-gold     { color: var(--text-gold); text-shadow: var(--glow-gold); }
.text-glow-cinnabar { color: var(--text-cinnabar); text-shadow: var(--glow-cinnabar); }

/* 水墨分割线 */
.ink-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
  margin: 16px 0;
}

/* ---------- 动画关键帧 ---------- */
@keyframes ink-spread {
  0%   { transform: scale(0.6); opacity: 0; }
  50%  { opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes ink-rotate {
  to { transform: rotate(360deg); }
}
@keyframes float-up {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes seal-press {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}