/* =========================================================================
   静态首页主题层（与 Vue 端 src/style.css 的 token 保持同调）
   - 默认            = Steam 暗色（保持原样）
   - html[data-theme="paper"]      = 纸韵 · 宣纸（浅）
   - html[data-theme="paper-dark"] = 纸韵 · 夜（深）
   主题切换由 Vue 端写入 localStorage('mhxy-theme')，本页监听 storage 同步。
   ========================================================================= */

:root {
  --s-bg: #0a0d12;
  --s-nav: rgba(15, 18, 25, 0.95);
  --s-card: #0f1a28;
  --s-card-2: #1a2d3d;
  --s-border: rgba(255, 255, 255, 0.06);
  --s-border-2: rgba(79, 195, 247, 0.3);
  --s-primary: #4fc3f7;
  --s-accent: #ffd700;
  --s-danger: #ff6b6b;
  --s-success: #5bc97f;
  --s-purple: #a78bfa;
  --s-orange: #ff9f43;
  --s-blue: #4fc3f7;
  --s-text: #c5cdd5;
  --s-text-2: #d0d4f1;
  --s-text-muted: #8f98a0;
  --s-text-strong: #ffffff;
  --s-ink-on-light: #333;
  --s-cell: #d0d4f1;
  --s-cell-empty: #8f98a0;
}

html[data-theme='paper'] {
  --s-bg: #f7f2e8;
  --s-nav: rgba(255, 253, 247, 0.92);
  --s-card: #fffdf7;
  --s-card-2: #fbf7ed;
  --s-border: rgba(31, 28, 24, 0.12);
  --s-border-2: rgba(31, 28, 24, 0.26);
  --s-primary: #c8472e;
  --s-accent: #b8893a;
  --s-danger: #b3261e;
  --s-success: #2f6b3c;
  --s-purple: #74619e;
  --s-orange: #b06a24;
  --s-blue: #3a6ea5;
  --s-text: #1f1c18;
  --s-text-2: #3a352c;
  --s-text-muted: #6b655b;
  --s-text-strong: #12100d;
  --s-ink-on-light: #12100d;
  --s-cell: #f5eeda;
  --s-cell-empty: #e3d9c0;
}

html[data-theme='paper-dark'] {
  --s-bg: #141519;
  --s-nav: rgba(27, 29, 35, 0.92);
  --s-card: #1b1d23;
  --s-card-2: #20222a;
  --s-border: rgba(236, 230, 218, 0.12);
  --s-border-2: rgba(236, 230, 218, 0.26);
  --s-primary: #e06a4f;
  --s-accent: #d2a95c;
  --s-danger: #e0563c;
  --s-success: #5aa76e;
  --s-purple: #a99bd0;
  --s-orange: #e0965c;
  --s-blue: #7fb3dd;
  --s-text: #ece6da;
  --s-text-2: #cfc8ba;
  --s-text-muted: #8c8478;
  --s-text-strong: #f8f4ec;
  --s-ink-on-light: #1f1c18;
  --s-cell: #cfc8ba;
  --s-cell-empty: #8c8478;
}

/* 纸韵下的页面底纹（宣纸晕染 + 帘纹），默认主题不生效 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0;
  mix-blend-mode: multiply;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  background-image: none;
}
html[data-theme='paper'] body::before {
  opacity: 0.05;
}
html[data-theme='paper-dark'] body::before {
  opacity: 0.035;
  mix-blend-mode: screen;
}
html[data-theme='paper'] body::after {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(31, 28, 24, 0.018) 0,
    rgba(31, 28, 24, 0.018) 1px,
    transparent 1px,
    transparent 5px
  );
}
html[data-theme='paper-dark'] body::after {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(236, 230, 218, 0.02) 0,
    rgba(236, 230, 218, 0.02) 1px,
    transparent 1px,
    transparent 5px
  );
}


/* =========================================================================
   宣纸主题适配补丁：轮播 / 快捷入口卡片
   （默认赛博与夜主题不加载这些规则）
   ========================================================================= */

/* ---- 快捷入口卡片：浅纸上的底、边框与投影 ---- */
html[data-theme='paper'] .nav-card {
  background: var(--s-card);
  border-color: var(--s-border);
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.05), 0 8px 24px rgba(31, 28, 24, 0.08);
}
html[data-theme='paper'] .nav-card:hover {
  border-color: var(--s-border-2);
  box-shadow: 0 2px 4px rgba(31, 28, 24, 0.06), 0 14px 32px rgba(31, 28, 24, 0.14);
}
html[data-theme='paper'] .nav-card::before {
  background: linear-gradient(135deg, transparent 0%, rgba(31, 28, 24, 0.03) 100%);
}

/* ---- 轮播：内联深色渐变在浅纸上改为各模块专属纸感渐变 ---- */
html[data-theme='paper'] .hero-banner {
  box-shadow: 0 1px 2px rgba(31, 28, 24, 0.06), 0 16px 36px rgba(31, 28, 24, 0.12);
}
html[data-theme='paper'] .hero-slide[data-module='huajing'] .slide-bg {
  background: linear-gradient(135deg, #eaf0e0 0%, #dde8d2 55%, #d0e0c4 100%) !important;
}
html[data-theme='paper'] .hero-slide[data-module='ghost'] .slide-bg {
  background: linear-gradient(135deg, #ede7f3 0%, #e2d9ee 55%, #d5cbe6 100%) !important;
}
html[data-theme='paper'] .hero-slide[data-module='fentu'] .slide-bg {
  background: linear-gradient(135deg, #e4efee 0%, #d6e7e5 55%, #c8dfdc 100%) !important;
}
html[data-theme='paper'] .hero-slide[data-module='watu'] .slide-bg {
  background: linear-gradient(135deg, #f4ecdc 0%, #ecdfc6 55%, #e3d2b2 100%) !important;
}
html[data-theme='paper'] .hero-slide[data-module='harvest'] .slide-bg {
  background: linear-gradient(135deg, #f2ead4 0%, #eaddba 55%, #e0cfa4 100%) !important;
}

/* 浅底上的轮播文字：白字翻墨字，去掉深色投影 */
html[data-theme='paper'] .slide-title {
  color: #1f1c18;
  text-shadow: none;
}
html[data-theme='paper'] .slide-desc {
  color: #5c564c;
}
html[data-theme='paper'] .slide-tag {
  background: rgba(31, 28, 24, 0.07);
}
/* 各 slide 的标签色跟随模块专属色 */
html[data-theme='paper'] .hero-slide[data-module='huajing'] .slide-tag { color: #3d6b34; }
html[data-theme='paper'] .hero-slide[data-module='ghost'] .slide-tag { color: #6b4f8f; }
html[data-theme='paper'] .hero-slide[data-module='fentu'] .slide-tag { color: #2e6b66; }
html[data-theme='paper'] .hero-slide[data-module='watu'] .slide-tag,
html[data-theme='paper'] .hero-slide[data-module='harvest'] .slide-tag { color: #8a6a24; }
/* 图标投影由白光改柔和纸影 */
html[data-theme='paper'] .visual-icon {
  filter: drop-shadow(0 6px 14px rgba(31, 28, 24, 0.18));
}

/* 夜主题：轮播保持深色，仅把投影柔化、卡片底走 token */
html[data-theme='paper-dark'] .nav-card {
  background: var(--s-card);
}
html[data-theme='paper-dark'] .hero-banner {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 36px rgba(0, 0, 0, 0.4);
}

/* ---- 本月活动：活动条与日历的宣纸适配 ---- */
html[data-theme='paper'] .activity-item {
  background: rgba(31, 28, 24, 0.06);
}
html[data-theme='paper'] .activity-divider {
  background: var(--s-border);
}
html[data-theme='paper'] .calendar-grid {
  background: rgba(31, 28, 24, 0.04);
}
html[data-theme='paper'] .month-arrow {
  background: rgba(31, 28, 24, 0.07);
}
html[data-theme='paper'] .calendar-header,
html[data-theme='paper'] .calendar-modal-content {
  border-color: var(--s-border);
}
/* 选中日期：宣纸下紫底偏深，日期数字翻白保证可读 */
html[data-theme='paper'] .calendar-day-cell.selected .day-number {
  color: #fffdf7;
  text-shadow: none;
}
html[data-theme='paper-dark'] .calendar-day-cell.selected .day-number {
  color: #141519;
  text-shadow: none;
}

/* ---- 静态页主题切换器（右上角三圆点） ---- */
.theme-toggle {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-left: auto;
  padding-left: 16px;
}
.tt-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--s-border, rgba(255, 255, 255, 0.14));
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.tt-btn:hover { transform: scale(1.12); }
.tt-btn i { display: block; width: 12px; height: 12px; border-radius: 50%; }
.tt-btn[data-tt="cyber"] i { background: #070a12; box-shadow: inset 0 0 0 2px #22d3ee; }
.tt-btn[data-tt="paper"] i { background: #f7f2e8; box-shadow: inset 0 0 0 2px #c8472e; }
.tt-btn[data-tt="paper-dark"] i { background: #141519; box-shadow: inset 0 0 0 2px #d2a95c; }
.tt-btn.active {
  border-color: var(--s-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--s-primary) 30%, transparent);
}