/* =========================================================
 * theme-v2-plus.css — 高端动感增强层（v2 骨架之上）
 * ---------------------------------------------------------
 * 目标：在保持 v2「宋雅·墨骨」克制骨架的前提下，
 *      为首页/入场/交互加入一层"科技动感"：
 *      · 极光宣纸背景（缓慢漂移，不刺眼）
 *      · 星象罗盘 hero（SVG 缓慢自转，藤黄描边）
 *      · 数字滚动 + 光泽扫过
 *      · 卡片入场时序 + hover 微光
 *      · 卦爻粒子 loading
 *      · 底部 tabbar 玻璃质感
 * 仅在 body.theme-v2 下生效
 * ========================================================= */

/* =========================================================
 * §1 · 极光宣纸背景
 * ========================================================= */
body.theme-v2 {
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%,   rgba(110,139,157,.10), transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 20%,  rgba(201,151,74,.08),  transparent 55%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(78,125,106,.08),  transparent 60%),
    var(--v2-paper) !important;
  background-attachment: fixed !important;
  position: relative;
}

/* 极光漂移层：极缓慢的位移，只在有动画偏好时启用 */
body.theme-v2::before {
  content: "";
  position: fixed;
  inset: -20% -10% -20% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 20% at 25% 30%,  rgba(110,139,157,.14), transparent 60%),
    radial-gradient(ellipse 25% 18% at 75% 60%,  rgba(201,151,74,.12),  transparent 60%),
    radial-gradient(ellipse 22% 16% at 50% 85%,  rgba(78,125,106,.10),  transparent 60%);
  filter: blur(30px);
  opacity: .9;
  animation: v2p-aurora 24s ease-in-out infinite alternate;
}

@keyframes v2p-aurora {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg);  }
  50%  { transform: translate3d( 3%,  2%, 0) rotate(1deg);  }
  100% { transform: translate3d(-2%,  4%, 0) rotate(-1deg); }
}

/* 极细金线网格（宣纸经纬），仅桌面态显示 */
@media (min-width: 640px) {
  body.theme-v2::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(184,134,11,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(184,134,11,.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
  }
}

/* =========================================================
 * §2 · 首页 header — 银月徽记 + 呼吸光晕
 * ========================================================= */
body.theme-v2 .page-header {
  position: relative;
}

body.theme-v2 .header-logo-img {
  position: relative;
  animation: v2p-halo 4.5s ease-in-out infinite;
}

@keyframes v2p-halo {
  0%, 100% { box-shadow: 0 0 0 1px var(--v2-hair-2), 0 0  0px rgba(201,151,74,.0),  0 0  0px rgba(110,139,157,.0); }
  50%      { box-shadow: 0 0 0 1px var(--v2-hair-2), 0 0 18px rgba(201,151,74,.28), 0 0 32px rgba(110,139,157,.14); }
}

/* 问候语：宋体+渐变墨→天青，字尾一枚金点 */
body.theme-v2 .greeting {
  background: linear-gradient(90deg, var(--v2-ink) 0%, var(--v2-primary-2) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  position: relative;
  display: inline-block;
}
body.theme-v2 .greeting::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-gold);
  margin-left: 10px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(201,151,74,.6);
  animation: v2p-blink 2.2s ease-in-out infinite;
}
@keyframes v2p-blink {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1);   }
}

/* =========================================================
 * §3 · Hero 今日运势卡 — 星象罗盘 + 光泽扫过
 * ========================================================= */
body.theme-v2 .hero-today {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,253,247,.98), rgba(251,247,238,.96)) !important;
  border: 1px solid var(--v2-hair) !important;
  border-radius: var(--v2-r-md) !important;
  padding: var(--v2-sp-5) var(--v2-sp-5) var(--v2-sp-4) !important;
  box-shadow: 0 1px 2px rgba(58,46,36,.04), 0 12px 32px rgba(58,46,36,.05) !important;
}

/* 右上角：SVG 星象罗盘（数据 URI，无外部依赖） */
body.theme-v2 .hero-today::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 160px;
  height: 160px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'>\
<g fill='none' stroke='%23C9974A' stroke-width='.6' opacity='.55'>\
<circle cx='80' cy='80' r='72'/>\
<circle cx='80' cy='80' r='58'/>\
<circle cx='80' cy='80' r='44'/>\
<circle cx='80' cy='80' r='28'/>\
</g>\
<g stroke='%236E8B9D' stroke-width='.5' opacity='.45'>\
<line x1='80' y1='8'  x2='80' y2='152'/>\
<line x1='8'  y1='80' x2='152' y2='80'/>\
<line x1='29' y1='29' x2='131' y2='131'/>\
<line x1='131' y1='29' x2='29' y2='131'/>\
</g>\
<g fill='%23C9974A' opacity='.7'>\
<circle cx='80' cy='8' r='1.6'/><circle cx='152' cy='80' r='1.6'/>\
<circle cx='80' cy='152' r='1.6'/><circle cx='8' cy='80' r='1.6'/>\
</g>\
<g fill='%232A2622' font-family='Songti SC, serif' font-size='9' opacity='.55'>\
<text x='77' y='16'>子</text><text x='145' y='83'>卯</text>\
<text x='77' y='150'>午</text><text x='9' y='83'>酉</text>\
</g>\
</svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .85;
  animation: v2p-spin 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes v2p-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 左侧藤黄立柱：呼吸渐变 */
body.theme-v2 .hero-today::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--v2-gold) 0%, var(--v2-gold-2) 50%, var(--v2-good) 100%);
  animation: v2p-pulse-bar 3.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes v2p-pulse-bar {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1;   }
}

body.theme-v2 .hero-today > * { position: relative; z-index: 2; }

/* 分数：衬线大字 + 数字滚动感（通过 letter-spacing 变化制造轻微动感） */
body.theme-v2 .hero-today-score .hero-score-num {
  font-family: var(--v2-font-num) !important;
  font-size: 34px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  background: linear-gradient(180deg, var(--v2-ink) 0%, var(--v2-ink-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

/* good/mid/low 的分数颜色（覆盖 §14） */
body.theme-v2 .hero-today-score.hero-score-good .hero-score-num {
  background: linear-gradient(180deg, var(--v2-good) 0%, var(--v2-good-2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.theme-v2 .hero-today-score.hero-score-mid .hero-score-num {
  background: linear-gradient(180deg, var(--v2-gold-2) 0%, var(--v2-gold) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.theme-v2 .hero-today-score.hero-score-low .hero-score-num {
  background: linear-gradient(180deg, var(--v2-bad) 0%, var(--v2-bad-2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

body.theme-v2 .hero-today-score .hero-score-label {
  font-family: var(--v2-font-serif) !important;
  font-size: 11px !important;
  letter-spacing: .32em !important;
  color: var(--v2-muted) !important;
  margin-top: 4px !important;
  padding-left: .32em;
}

/* 卡入场：轻微上移 + 光泽扫过一次 */
body.theme-v2 .hero-today {
  animation: v2p-hero-in .8s var(--v2-ease-out) both;
}
@keyframes v2p-hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* =========================================================
 * §4 · 功能分区 zone — 卡片时序入场 + hover 微光
 * ========================================================= */
body.theme-v2 .zones-container {
  gap: var(--v2-sp-4) !important;
}

body.theme-v2 .zone-section {
  background: linear-gradient(180deg, rgba(255,253,247,.98), rgba(251,247,238,.94)) !important;
  border: 1px solid var(--v2-hair) !important;
  border-radius: var(--v2-r-md) !important;
  box-shadow: 0 1px 2px rgba(58,46,36,.04) !important;
  padding: var(--v2-sp-4) var(--v2-sp-4) var(--v2-sp-3) !important;
  animation: v2p-zone-in .7s var(--v2-ease-out) both;
}
body.theme-v2 .zones-container > .zone-section:nth-child(1) { animation-delay: .05s; }
body.theme-v2 .zones-container > .zone-section:nth-child(2) { animation-delay: .12s; }
body.theme-v2 .zones-container > .zone-section:nth-child(3) { animation-delay: .19s; }
body.theme-v2 .zones-container > .zone-section:nth-child(4) { animation-delay: .26s; }

@keyframes v2p-zone-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* zone-header-icon：换成描边金框 + 内金点 */
body.theme-v2 .zone-header-icon {
  background: linear-gradient(135deg, rgba(201,151,74,.10), rgba(201,151,74,.02)) !important;
  border: 1px solid var(--v2-gold) !important;
  border-radius: 4px !important;
  color: var(--v2-gold-2);
  position: relative;
  overflow: hidden;
}
body.theme-v2 .zone-header-icon { isolation: isolate; }
body.theme-v2 .zone-header-icon::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 340deg, rgba(201,151,74,.35) 360deg);
  animation: v2p-spin 8s linear infinite;
  opacity: .5;
  z-index: -1;
  pointer-events: none;
}

/* zone-action：hover 时描边转天青 + 极淡光泽扫过 */
body.theme-v2 .zone-action {
  position: relative;
  overflow: hidden;
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-hair) !important;
  border-radius: var(--v2-r-sm) !important;
  transition:
    border-color var(--v2-t-1) var(--v2-ease-out),
    transform var(--v2-t-1) var(--v2-ease-out),
    box-shadow var(--v2-t-2) var(--v2-ease-out) !important;
}
body.theme-v2 .zone-action::before {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(201,151,74,.14) 50%, transparent 100%);
  transition: left .8s var(--v2-ease-out);
  pointer-events: none;
}
body.theme-v2 .zone-action:hover {
  border-color: var(--v2-primary) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(58,46,36,.08) !important;
}
body.theme-v2 .zone-action:hover::before {
  left: 130%;
}
body.theme-v2 .zone-action:active {
  transform: translateY(0) !important;
}

/* HOT 徽标：藤黄描边 + 呼吸 */
body.theme-v2 .zone-hot-dot {
  animation: v2p-hot 2s ease-in-out infinite;
}
@keyframes v2p-hot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,151,74,0); }
  50%      { box-shadow: 0 0 0 3px rgba(201,151,74,.14); }
}

/* zone-action-icon：轻微悬停放大 */
body.theme-v2 .zone-action .zone-action-icon {
  transition: transform var(--v2-t-2) var(--v2-ease-spring, cubic-bezier(.34,1.56,.64,1));
}
body.theme-v2 .zone-action:hover .zone-action-icon {
  transform: scale(1.15) rotate(-4deg);
}

/* =========================================================
 * §5 · CTA 主按钮 — 金色扫光
 * ========================================================= */
body.theme-v2 .btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--v2-primary-2) 0%, var(--v2-primary-3) 100%) !important;
  transition:
    transform var(--v2-t-1) var(--v2-ease-out),
    box-shadow var(--v2-t-2) var(--v2-ease-out) !important;
}
body.theme-v2 .btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(201,151,74,.35) 50%, transparent 100%);
  transition: left .9s var(--v2-ease-out);
  pointer-events: none;
}
body.theme-v2 .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(74,101,119,.25) !important;
}
body.theme-v2 .btn-primary:hover::before {
  left: 120%;
}
body.theme-v2 .btn-primary:active {
  transform: translateY(0) !important;
}

/* =========================================================
 * §6 · Tabbar — 玻璃 + 微光
 * ========================================================= */
body.theme-v2 .tabbar {
  background: rgba(246,241,232,.82) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px) !important;
  backdrop-filter: saturate(180%) blur(18px) !important;
  border-top: 1px solid rgba(232,225,211,.6) !important;
  box-shadow: 0 -6px 24px rgba(58,46,36,.04) !important;
}
body.theme-v2 .tabbar-item {
  transition: color var(--v2-t-1) var(--v2-ease-out);
}
body.theme-v2 .tabbar-item .tabbar-icon {
  transition: transform var(--v2-t-2) var(--v2-ease-spring, cubic-bezier(.34,1.56,.64,1));
}
body.theme-v2 .tabbar-item.active .tabbar-icon {
  transform: translateY(-2px) scale(1.1) !important;
  filter: drop-shadow(0 2px 6px rgba(201,151,74,.28));
}

/* =========================================================
 * §7 · Loading — 卦爻脉冲
 * ========================================================= */
body.theme-v2 .loading-overlay {
  background: rgba(20,15,10,.42) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
body.theme-v2 .loading-box {
  background: rgba(255,253,247,.92) !important;
  border: 1px solid var(--v2-hair) !important;
  border-radius: var(--v2-r-md) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.35) !important;
  font-family: var(--v2-font-serif);
  color: var(--v2-ink);
}
body.theme-v2 .ll-qigua-ring {
  border-top-color: var(--v2-gold) !important;
  border-right-color: var(--v2-primary) !important;
  border-bottom-color: var(--v2-good) !important;
  border-left-color: transparent !important;
}
body.theme-v2 .ll-qigua-ring.r2 {
  border-top-color: var(--v2-good) !important;
  border-right-color: transparent !important;
  border-bottom-color: var(--v2-gold) !important;
  border-left-color: var(--v2-primary) !important;
}
body.theme-v2 .ll-qigua-core {
  background: radial-gradient(circle at 40% 35%, #F6D993, #B27F32 70%) !important;
  color: #2A2622 !important;
  font-family: var(--v2-font-serif) !important;
  box-shadow: 0 0 20px rgba(201,151,74,.55) !important;
}

/* =========================================================
 * §8 · 每日一言卡 — 章尾印 + 引文
 * ========================================================= */
body.theme-v2 .tips-content {
  padding: var(--v2-sp-3) var(--v2-sp-4);
  border-left: 2px solid var(--v2-gold);
  background: linear-gradient(90deg, rgba(201,151,74,.05), transparent 80%);
  border-radius: 0 var(--v2-r-xs) var(--v2-r-xs) 0;
  font-style: italic;
}

/* =========================================================
 * §9 · 覆盖 v1 深度页在 v2 下漏掉的强渐变 chip / 单元格
 * ========================================================= */
body.theme-v2 .jm-cell.auspicious {
  background: linear-gradient(180deg, rgba(78,125,106,.10), rgba(78,125,106,.02)) !important;
  border-color: var(--v2-good) !important;
}
body.theme-v2 .jm-cell.inauspicious {
  background: linear-gradient(180deg, rgba(160,44,44,.08), rgba(160,44,44,.02)) !important;
  border-color: var(--v2-bad) !important;
}
body.theme-v2 .jm-cell.daji {
  background: linear-gradient(180deg, rgba(201,151,74,.14), rgba(201,151,74,.04)) !important;
  border-color: var(--v2-gold) !important;
  box-shadow: 0 0 16px rgba(201,151,74,.22) !important;
}

body.theme-v2 .zr-em-top   { background: linear-gradient(180deg, rgba(160,44,44,.08),  transparent) !important; border-left-color: var(--v2-bad)  !important; }
body.theme-v2 .zr-em-good  { background: linear-gradient(180deg, rgba(78,125,106,.08), transparent) !important; border-left-color: var(--v2-good) !important; }
body.theme-v2 .zr-em-warn  { background: linear-gradient(180deg, rgba(201,151,74,.10), transparent) !important; border-left-color: var(--v2-gold) !important; }
body.theme-v2 .zr-em-bad   { background: linear-gradient(180deg, rgba(160,44,44,.10),  transparent) !important; border-left-color: var(--v2-bad)  !important; }

/* 紫微宫 / 奇门宫 / 八卦格 / 命卦 hero / deep-block —— 统一素笺 */
body.theme-v2 .zw-gong,
body.theme-v2 .qm-gong,
body.theme-v2 .bg-cell,
body.theme-v2 .jm-cell,
body.theme-v2 .kua-hero,
body.theme-v2 .deep-block,
body.theme-v2 .qm-info {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-hair) !important;
  color: var(--v2-ink) !important;
}
body.theme-v2 .deep-block { border-left: 2px solid var(--v2-primary) !important; }
body.theme-v2 .qm-info    { border-left: 2px solid var(--v2-gold) !important; color: var(--v2-ink-2) !important; }
body.theme-v2 .kua-hero {
  background: linear-gradient(180deg, rgba(255,253,247,.98), rgba(251,247,238,.94)) !important;
  box-shadow: var(--v2-sh-1) !important;
}

/* 八字命盘表头：墨玉底 + 金线，替代 v1 深绿渐变 */
body.theme-v2 .bazi-chart-head {
  background: linear-gradient(180deg, var(--v2-ink) 0%, #16110D 100%) !important;
  color: #F6F1E8 !important;
  font-family: var(--v2-font-serif) !important;
  letter-spacing: .16em !important;
  border-bottom: 1px solid var(--v2-gold) !important;
}

/* 头像圆：金框素笺 */
body.theme-v2 .avatar {
  background: linear-gradient(135deg, var(--v2-paper-2), var(--v2-surface)) !important;
  color: var(--v2-ink) !important;
  border: 1px solid var(--v2-gold) !important;
  font-family: var(--v2-font-serif) !important;
  font-weight: 500 !important;
  box-shadow: 0 0 0 3px rgba(201,151,74,.08) !important;
}

/* 九宫飞星头信息条：墨玉+金线 */
body.theme-v2 .yunpan-info {
  background: linear-gradient(135deg, var(--v2-ink) 0%, #16110D 100%) !important;
  color: #F6F1E8 !important;
  border: 1px solid var(--v2-gold) !important;
  border-radius: var(--v2-r-sm) !important;
  font-family: var(--v2-font-serif) !important;
  letter-spacing: .12em !important;
}

/* =========================================================
 * §10 · Toast — 玻璃感
 * ========================================================= */
body.theme-v2 .toast {
  background: rgba(42,38,34,.92) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  color: #F6F1E8 !important;
  border: 1px solid rgba(201,151,74,.28) !important;
  border-radius: var(--v2-r-sm) !important;
  padding: 12px 20px !important;
  font-family: var(--v2-font-serif) !important;
  letter-spacing: .08em !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.35) !important;
}

/* =========================================================
 * §11 · 免责声明 — 章尾风
 * ========================================================= */
body.theme-v2 .disclaimer {
  background: transparent !important;
  border: 1px dashed var(--v2-hair-2) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  color: var(--v2-muted) !important;
  font-family: var(--v2-font-serif) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  padding: var(--v2-sp-3) var(--v2-sp-2) !important;
  margin: var(--v2-sp-6) 0 var(--v2-sp-4) !important;
  text-align: center;
}

/* =========================================================
 * §12 · 数字统一走衬线数字体
 * ========================================================= */
body.theme-v2 .v2-num,
body.theme-v2 .hero-score-num,
body.theme-v2 .hero-today-solar {
  font-variant-numeric: lining-nums tabular-nums;
}

/* =========================================================
 * §13 · 尊重系统偏好：减少动画
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
  body.theme-v2::before,
  body.theme-v2 .header-logo-img,
  body.theme-v2 .greeting::after,
  body.theme-v2 .hero-today::before,
  body.theme-v2 .hero-today::after,
  body.theme-v2 .zone-hot-dot,
  body.theme-v2 .zone-header-icon::after {
    animation: none !important;
  }
  body.theme-v2 .zone-action,
  body.theme-v2 .btn-primary,
  body.theme-v2 .tabbar-item .tabbar-icon {
    transition: none !important;
  }
}

/* =========================================================
 * §14 · 夜观模式微调
 * ========================================================= */
body.theme-v2.theme-dark {
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%,   rgba(143,179,196,.10), transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 20%,  rgba(217,178,124,.08), transparent 55%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(122,175,152,.08), transparent 60%),
    var(--v2-paper) !important;
}
body.theme-v2.theme-dark::before {
  opacity: .5;
}
body.theme-v2.theme-dark .hero-today {
  background: linear-gradient(180deg, rgba(20,26,34,.95), rgba(16,21,28,.92)) !important;
}
body.theme-v2.theme-dark .zone-section {
  background: linear-gradient(180deg, rgba(20,26,34,.9), rgba(16,21,28,.85)) !important;
}
body.theme-v2.theme-dark .tabbar {
  background: rgba(11,15,20,.82) !important;
}