/* ===== ds2-chouqian.css — DS2太极灵签主题样式 =====
   从 base.css 拆分而来，保持原始顺序
   ===== */


/* ============================================================
   每日一签 v2 — DS2 太极灵签主题（浅色毛玻璃版）
   设计概念：灵签浮牌 + 翻牌仪式 + 信息分层
   ============================================================ */

/* ===== DS2 主题变量 ===== */
:root {
  /* 签文等级主题色 —— 通过JS设置 --ds2-theme-h/s/l */
  --ds2-theme: #6C5CE7;
  --ds2-theme-rgb: 108, 92, 231;
  --ds2-theme-glow: rgba(var(--ds2-theme-rgb), 0.3);
  --ds2-theme-soft: rgba(var(--ds2-theme-rgb), 0.08);
  --ds2-theme-border: rgba(var(--ds2-theme-rgb), 0.15);

  /* 等级配色映射 */
  --ds2-gold: #C9900E;
  --ds2-gold-bright: #D4A234;
  --ds2-gold-rgb: 201, 144, 14;
  --ds2-purple: #6C5CE7;
  --ds2-purple-rgb: 108, 92, 231;
  --ds2-jade: #2E8B57;
  --ds2-jade-rgb: 46, 139, 87;
  --ds2-teal: #0EA5A5;
  --ds2-teal-rgb: 14, 165, 165;
  --ds2-slate: #6B7B8D;
  --ds2-slate-rgb: 107, 123, 141;
  --ds2-gray: #8E99A4;
  --ds2-gray-rgb: 142, 153, 164;

  /* 五行色 */
  --ds2-wx-jin: #F39C12;
  --ds2-wx-mu: #27AE60;
  --ds2-wx-shui: #3498DB;
  --ds2-wx-huo: #E74C3C;
  --ds2-wx-tu: #8B6914;
}

/* ===== 签文等级主题色类 ===== */
.ds2-theme-ss { --ds2-theme: var(--ds2-gold); --ds2-theme-rgb: var(--ds2-gold-rgb); }
.ds2-theme-s  { --ds2-theme: var(--ds2-purple); --ds2-theme-rgb: var(--ds2-purple-rgb); }
.ds2-theme-ms { --ds2-theme: var(--ds2-jade); --ds2-theme-rgb: var(--ds2-jade-rgb); }
.ds2-theme-m  { --ds2-theme: var(--ds2-teal); --ds2-theme-rgb: var(--ds2-teal-rgb); }
.ds2-theme-mx { --ds2-theme: var(--ds2-slate); --ds2-theme-rgb: var(--ds2-slate-rgb); }
.ds2-theme-x  { --ds2-theme: var(--ds2-gray); --ds2-theme-rgb: var(--ds2-gray-rgb); }
.ds2-theme-xx { --ds2-theme: var(--ds2-gray); --ds2-theme-rgb: var(--ds2-gray-rgb); }

/* ============================================================
   DS2 封面页
   ============================================================ */
.ds2-cover {
  position: relative;
  min-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  animation: ds2-fadein 0.6s ease-out;
  overflow: hidden;
}
@keyframes ds2-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 封面装饰 — 淡水墨晕染 */
.ds2-cover::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.ds2-cover::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(253, 121, 168, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 日期行 */
.ds2-date-row {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  z-index: 1;
  opacity: 0;
  animation: ds2-cascade-in 0.5s ease-out 0.1s forwards;
}
.ds2-date-row .ds2-separator {
  margin: 0 8px;
  color: var(--text-tertiary);
  font-size: 10px;
}

/* 日主标签 */
.ds2-daymaster {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 14px;
  border-radius: 20px;
  background: rgba(108, 92, 231, 0.06);
  border: 1px solid rgba(108, 92, 231, 0.1);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 20px;
  z-index: 1;
  opacity: 0;
  animation: ds2-cascade-in 0.5s ease-out 0.2s forwards;
}

/* ============================================================
   DS2 灵签浮牌
   ============================================================ */
.ds2-card-stage {
  position: relative;
  perspective: 900px;
  z-index: 1;
  margin: 16px 0 24px;
  opacity: 0;
  animation: ds2-cascade-in 0.5s ease-out 0.3s forwards;
}
.ds2-card-wrap {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  cursor: pointer;
}
.ds2-card-wrap.ds2-flipped {
  transform: rotateY(180deg);
}
.ds2-card-face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 正面 — 玉石宣纸质感 */
.ds2-card-front {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(245, 240, 255, 0.9) 30%,
    rgba(255, 250, 245, 0.85) 70%,
    rgba(255, 255, 255, 0.9) 100%);
  border: 1px solid rgba(108, 92, 231, 0.12);
  box-shadow:
    0 8px 32px rgba(108, 92, 231, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* 宣纸纹理叠加 */
.ds2-card-front::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
}
/* 光泽 shimmer */
.ds2-card-front::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 48%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.35) 52%,
    transparent 60%
  );
  animation: ds2-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ds2-shimmer {
  0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* 正面装饰纹样 */
.ds2-card-sigil {
  font-size: 72px;
  color: rgba(108, 92, 231, 0.12);
  font-family: 'Noto Serif SC', serif;
  line-height: 1;
  user-select: none;
  position: relative;
  z-index: 1;
}
.ds2-card-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 18px;
  letter-spacing: 0.3em;
  color: rgba(108, 92, 231, 0.35);
  margin-top: 16px;
  position: relative;
  z-index: 1;
}
/* 正面装饰边框线 */
.ds2-card-border-deco {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(108, 92, 231, 0.08);
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
}

/* 背面 — 三层布局：签级 + 繁体竖排签诗 + 天意已定 */
.ds2-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(248, 245, 255, 0.95) 50%,
    rgba(255, 252, 248, 0.92) 100%);
  border: 1px solid rgba(var(--ds2-theme-rgb), 0.18);
  box-shadow:
    0 8px 32px rgba(var(--ds2-theme-rgb), 0.12),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 10px 12px;
  overflow: hidden;
}

/* 繁体衬线字体类 */
.ds2-card-poem-tc {
  font-family: 'Noto Serif TC', 'Noto Serif SC', 'STSong', 'SimSun', 'Songti SC', serif;
}

/* 顶部区 — 繁体签级（约 20%） */
.ds2-card-back-level {
  font-family: 'Noto Serif TC', 'Noto Serif SC', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ds2-theme);
  text-shadow: 0 0 20px rgba(var(--ds2-theme-rgb), 0.25);
  letter-spacing: 0.2em;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  opacity: 0;
  animation: ds2-char-reveal 300ms ease-out forwards;
}

/* 中部主体区 — 繁体竖排签诗（约 55%） */
.ds2-card-back-poem {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  padding: 4px 0;
  min-height: 0;
}

/* 每列签诗 */
.ds2-poem-col {
  writing-mode: vertical-rl;
  font-family: 'Noto Serif TC', 'Noto Serif SC', serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.75);
  letter-spacing: 0.15em;
  line-height: 1.4;
  white-space: nowrap;
}

/* 签诗 3~4 列时字号自适应 */
.ds2-card-back-poem.ds2-poem-cols-3 .ds2-poem-col { font-size: 14px; gap: 10px; }
.ds2-card-back-poem.ds2-poem-cols-4 .ds2-poem-col { font-size: 12px; gap: 8px; }
.ds2-card-back-poem.ds2-poem-cols-3 { gap: 10px; }
.ds2-card-back-poem.ds2-poem-cols-4 { gap: 8px; }

/* 逐字 span */
.ds2-poem-col .ds2-poem-char {
  display: inline;
  opacity: 0;
  animation: ds2-char-reveal 150ms ease-out forwards;
  animation-delay: var(--char-delay, 0ms);
}

/* 底部区 — 天意已定（约 10%） */
.ds2-card-back-sub {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.2em;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  opacity: 0;
  animation: ds2-char-reveal 400ms ease-out forwards;
  animation-delay: var(--sub-delay, 2000ms);
}

/* 底部装饰云纹 */
.ds2-card-back::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--ds2-theme-rgb), 0.04) 40%,
    rgba(var(--ds2-theme-rgb), 0.08) 100%);
  border-radius: 0 0 16px 16px;
  pointer-events: none;
  z-index: 0;
}

/* 逐字渐现关键帧 */
@keyframes ds2-char-reveal {
  0% { opacity: 0; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== DS2 浮牌悬浮动画 ===== */
.ds2-card-float .ds2-card-wrap {
  animation: ds2-float 3.5s ease-in-out infinite;
}
@keyframes ds2-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.ds2-card-float .ds2-card-wrap.ds2-flipped {
  animation: none;
}

/* 光晕效果 */
.ds2-card-glow {
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: transparent;
  box-shadow: 0 0 24px rgba(108, 92, 231, 0.1), 0 0 48px rgba(108, 92, 231, 0.05);
  pointer-events: none;
  z-index: -1;
  animation: ds2-glow-pulse 3s ease-in-out infinite;
}
@keyframes ds2-glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

/* ===== DS2 引导区 ===== */
.ds2-guide {
  text-align: center;
  z-index: 1;
  opacity: 0;
  animation: ds2-cascade-in 0.5s ease-out 0.4s forwards;
}
.ds2-guide-text {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: 0.2em;
  margin-bottom: 20px;
  opacity: 0.8;
}
.ds2-bazi-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 8px;
}
.ds2-bazi-hint a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s;
}
.ds2-bazi-hint a:hover { opacity: 0.7; }

/* ===== DS2 按钮 ===== */
.ds2-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #8B5CF6);
  color: #fff;
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15em;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.ds2-btn-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
  transform: translateX(-100%) rotate(45deg);
  transition: transform 0.6s;
}
.ds2-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(108, 92, 231, 0.35);
}
.ds2-btn-primary:hover::before {
  transform: translateX(100%) rotate(45deg);
}
.ds2-btn-primary:active {
  transform: scale(0.97);
}
.ds2-btn-primary:disabled {
  opacity: 0.6;
  pointer-events: none;
}
.ds2-btn-primary .ds2-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ds2-spin 0.7s linear infinite;
}
@keyframes ds2-spin {
  to { transform: rotate(360deg); }
}

.ds2-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(108, 92, 231, 0.2);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
}
.ds2-btn-ghost:hover {
  background: rgba(108, 92, 231, 0.06);
  border-color: rgba(108, 92, 231, 0.3);
}

/* ===== DS2 底部入口 ===== */
.ds2-footer {
  text-align: center;
  margin-top: 24px;
  z-index: 1;
  opacity: 0;
  animation: ds2-cascade-in 0.5s ease-out 0.5s forwards;
}

/* ============================================================
   DS2 翻牌仪式动画
   ============================================================ */

/* 凝聚阶段 */
.ds2-phase-gather .ds2-card-wrap {
  animation: ds2-gather-shrink 0.8s ease-in-out forwards, ds2-card-shake 0.25s ease-in-out infinite !important;
}
@keyframes ds2-gather-shrink {
  0% { transform: scale(1); }
  100% { transform: scale(0.95); filter: brightness(1.05); }
}
/* 灵签微摇 — Z 轴旋转，模拟摇签随机感 */
@keyframes ds2-card-shake {
  0%, 100% { transform: scale(0.95) rotateZ(0deg); }
  25% { transform: scale(0.95) rotateZ(2.5deg); }
  75% { transform: scale(0.95) rotateZ(-2.5deg); }
}
.ds2-phase-gather .ds2-card-glow {
  animation: ds2-gather-glow 0.8s ease-in-out forwards !important;
}
@keyframes ds2-gather-glow {
  0% { box-shadow: 0 0 24px rgba(108, 92, 231, 0.1); }
  100% { box-shadow: 0 0 48px rgba(108, 92, 231, 0.25), 0 0 80px rgba(108, 92, 231, 0.1); }
}
.ds2-phase-gather .ds2-guide {
  transition: opacity 0.5s ease-out;
  opacity: 0 !important;
}

/* 凝聚微粒子 */
.ds2-particle {
  position: absolute;
  width: var(--p-size, 3px);
  height: var(--p-size, 3px);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: ds2-particle-converge var(--p-dur, 0.8s) ease-in var(--p-delay, 0s) forwards;
}
@keyframes ds2-particle-converge {
  0% {
    opacity: 0.8;
    transform: translate(var(--p-x, 0), var(--p-y, 0)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2);
  }
}

/* 翻转阶段 — 光线扫过 */
.ds2-phase-flip .ds2-card-wrap {
  transform: rotateY(180deg) !important;
  transition: transform 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}
.ds2-light-sweep {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}
.ds2-light-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: ds2-sweep 0.8s ease-in-out forwards;
}
@keyframes ds2-sweep {
  0% { left: -60%; }
  100% { left: 120%; }
}

/* 绽放阶段 */
.ds2-phase-bloom .ds2-card-wrap {
  transform: rotateY(180deg) scale(1.05) !important;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.ds2-phase-bloom .ds2-card-glow {
  animation: ds2-bloom-glow 1s ease-out forwards !important;
}
@keyframes ds2-bloom-glow {
  0% { box-shadow: 0 0 48px rgba(var(--ds2-theme-rgb), 0.25); opacity: 1; }
  50% { box-shadow: 0 0 80px rgba(var(--ds2-theme-rgb), 0.4), 0 0 120px rgba(var(--ds2-theme-rgb), 0.15); opacity: 1; }
  100% { box-shadow: 0 0 32px rgba(var(--ds2-theme-rgb), 0.15); opacity: 1; }
}

/* 光波扩散 */
.ds2-ripple-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  border: 2px solid rgba(var(--ds2-theme-rgb), 0.3);
  pointer-events: none;
  animation: ds2-ripple-expand var(--rw-dur, 1s) ease-out var(--rw-delay, 0s) forwards;
}
@keyframes ds2-ripple-expand {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ============================================================
   DS2 签文结果页
   ============================================================ */
.ds2-result {
  position: relative;
  padding: 20px 0;
  animation: ds2-fadein 0.5s ease-out;
}

/* ===== Hero 签文主卡片 — 浅色毛玻璃·东方美学 ===== */
.ds2-hero-card {
  position: relative;
  border-radius: 20px;
  padding: 32px 24px 28px;
  margin-bottom: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 4px 32px rgba(108, 92, 231, 0.06),
    0 1px 8px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 边框流光效果 — Apple Intelligence 风格 */
.ds2-hero-card .ds2-border-glow {
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ds2-hero-card .ds2-border-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--ds2-border-angle, 0deg),
    transparent 0%,
    transparent 25%,
    rgba(var(--ds2-theme-rgb), 0.4) 35%,
    rgba(var(--ds2-theme-rgb), 0.6) 40%,
    rgba(255, 215, 0, 0.3) 45%,
    transparent 55%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ds2-border-rotate 4s linear infinite;
}
@keyframes ds2-border-rotate {
  from { --ds2-border-angle: 0deg; }
  to { --ds2-border-angle: 360deg; }
}
@property --ds2-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* 漂浮光斑 */
.ds2-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
  opacity: 0.35;
}
.ds2-hero-orb--1 {
  width: 120px; height: 120px;
  background: rgba(var(--ds2-theme-rgb), 0.12);
  top: -20px; right: -20px;
  animation: ds2-orb-float-1 8s ease-in-out infinite;
}
.ds2-hero-orb--2 {
  width: 90px; height: 90px;
  background: rgba(253, 121, 168, 0.1);
  bottom: 10%; left: -15px;
  animation: ds2-orb-float-2 10s ease-in-out infinite;
}
.ds2-hero-orb--3 {
  width: 70px; height: 70px;
  background: rgba(243, 156, 18, 0.08);
  top: 40%; right: 10%;
  animation: ds2-orb-float-3 12s ease-in-out infinite;
}
@keyframes ds2-orb-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
  33% { transform: translate(-20px, 15px) scale(1.1); opacity: 0.5; }
  66% { transform: translate(10px, -10px) scale(0.9); opacity: 0.3; }
}
@keyframes ds2-orb-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  50% { transform: translate(25px, -20px) scale(1.15); opacity: 0.45; }
}
@keyframes ds2-orb-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
  40% { transform: translate(-15px, 10px) scale(1.1); opacity: 0.4; }
  70% { transform: translate(10px, -15px) scale(0.95); opacity: 0.3; }
}
/* 宣纸纹理 + 淡雅水墨晕染 */
.ds2-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(108, 92, 231, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 85%, rgba(253, 121, 168, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(243, 156, 18, 0.02) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
/* 微妙光泽扫过 */
.ds2-hero-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 42%,
    rgba(255, 255, 255, 0.25) 48%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.25) 52%,
    transparent 58%
  );
  animation: ds2-hero-shimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ds2-hero-shimmer {
  0%, 100% { transform: translateX(-120%) translateY(-120%) rotate(45deg); }
  50% { transform: translateX(120%) translateY(120%) rotate(45deg); }
}
.ds2-hero-card > * { position: relative; z-index: 1; }

/* 装饰光晕 — 主题色柔光 */
.ds2-hero-aura {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(var(--ds2-theme-rgb), 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: ds2-aura-breathe 4s ease-in-out infinite;
}
@keyframes ds2-aura-breathe {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* 浮动装饰粒子 — 浅色版 */
.ds2-hero-stars {
  display: none;
}

/* 流星效果 — 浅色版隐藏 */
.ds2-hero-meteor {
  display: none;
}

/* 四角装饰 — 浅色优雅纹饰 */
.ds2-hero-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 1;
}
.ds2-hero-corner::before,
.ds2-hero-corner::after {
  content: '';
  position: absolute;
  background: linear-gradient(135deg, rgba(var(--ds2-theme-rgb), 0.2), rgba(var(--ds2-theme-rgb), 0.06));
  border-radius: 1px;
}
.ds2-hero-corner::before {
  width: 20px;
  height: 1.5px;
}
.ds2-hero-corner::after {
  width: 1.5px;
  height: 20px;
}
.ds2-hero-corner--tl { top: 12px; left: 12px; }
.ds2-hero-corner--tl::before { top: 0; left: 0; }
.ds2-hero-corner--tl::after { top: 0; left: 0; }
.ds2-hero-corner--tr { top: 12px; right: 12px; }
.ds2-hero-corner--tr::before { top: 0; right: 0; }
.ds2-hero-corner--tr::after { top: 0; right: 0; }
.ds2-hero-corner--bl { bottom: 12px; left: 12px; }
.ds2-hero-corner--bl::before { bottom: 0; left: 0; }
.ds2-hero-corner--bl::after { bottom: 0; left: 0; }
.ds2-hero-corner--br { bottom: 12px; right: 12px; }
.ds2-hero-corner--br::before { bottom: 0; right: 0; }
.ds2-hero-corner--br::after { bottom: 0; right: 0; }

/* 顶部分隔线 — 浅色版隐藏 */
.ds2-hero-top-line {
  display: none;
}

/* 按签级浅色毛玻璃微调 — 渐变底色 + 水墨晕染 */
.ds2-theme-ss .ds2-hero-card {
  border-color: rgba(201,144,14,0.18);
  box-shadow: 0 4px 32px rgba(201,144,14,0.08), 0 1px 8px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.9);
  background: linear-gradient(160deg, rgba(255,255,255,0.6) 0%, rgba(255,248,230,0.5) 40%, rgba(255,240,210,0.4) 70%, rgba(255,255,255,0.6) 100%);
}
.ds2-theme-ss .ds2-hero-card::before {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(201,144,14,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 80%, rgba(243,156,18,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255,215,0,0.04) 0%, transparent 40%);
}
.ds2-theme-s .ds2-hero-card {
  border-color: rgba(108,92,231,0.15);
  background: linear-gradient(160deg, rgba(255,255,255,0.6) 0%, rgba(245,240,255,0.5) 40%, rgba(235,230,255,0.4) 70%, rgba(255,255,255,0.6) 100%);
}
.ds2-theme-s .ds2-hero-card::before {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(108,92,231,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 85%, rgba(162,155,254,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(139,124,246,0.03) 0%, transparent 40%);
}
.ds2-theme-ms .ds2-hero-card {
  border-color: rgba(46,139,87,0.15);
  box-shadow: 0 4px 32px rgba(46,139,87,0.06), 0 1px 8px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.9);
  background: linear-gradient(160deg, rgba(255,255,255,0.6) 0%, rgba(240,255,245,0.5) 40%, rgba(230,250,238,0.4) 70%, rgba(255,255,255,0.6) 100%);
}
.ds2-theme-ms .ds2-hero-card::before {
  background:
    radial-gradient(ellipse at 25% 20%, rgba(46,139,87,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 80%, rgba(39,174,96,0.05) 0%, transparent 50%);
}
.ds2-theme-m .ds2-hero-card {
  border-color: rgba(14,165,165,0.15);
  box-shadow: 0 4px 32px rgba(14,165,165,0.06), 0 1px 8px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.9);
  background: linear-gradient(160deg, rgba(255,255,255,0.6) 0%, rgba(235,252,252,0.5) 40%, rgba(225,248,248,0.4) 70%, rgba(255,255,255,0.6) 100%);
}
.ds2-theme-m .ds2-hero-card::before {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(14,165,165,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(0,184,148,0.05) 0%, transparent 50%);
}
.ds2-theme-mx .ds2-hero-card {
  border-color: rgba(107,123,141,0.12);
  background: linear-gradient(160deg, rgba(255,255,255,0.6) 0%, rgba(240,242,245,0.5) 40%, rgba(235,238,242,0.4) 70%, rgba(255,255,255,0.6) 100%);
}
.ds2-theme-x .ds2-hero-card {
  border-color: rgba(142,153,164,0.12);
  background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(238,240,244,0.5) 40%, rgba(232,235,240,0.45) 70%, rgba(255,255,255,0.55) 100%);
}
.ds2-theme-xx .ds2-hero-card {
  border-color: rgba(142,153,164,0.1);
  background: linear-gradient(160deg, rgba(255,255,255,0.5) 0%, rgba(235,237,240,0.45) 40%, rgba(228,230,235,0.4) 70%, rgba(255,255,255,0.5) 100%);
}

/* 顶部信息行 — 浅色品牌 */
.ds2-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ds2-hero-brand {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ds2-theme, var(--accent));
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  opacity: 0.7;
}
.ds2-hero-date { font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.06em; }
.ds2-hero-pillar { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--text-tertiary); margin-left: 6px; opacity: 0.7; }

/* 签级 — 纯色主题色文字·无边框 */
.ds2-level-text {
  font-family: 'Noto Serif SC', serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--ds2-theme, var(--accent));
  letter-spacing: 0.25em;
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.2;
  position: relative;
  opacity: 0;
  padding: 10px 22px;
  animation: ds2-hero-level-in 0.6s ease-out 0.1s forwards;
}
@keyframes ds2-level-shine {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: -100% 0; }
}
/* 方印边框 — 移除 */
.ds2-level-text::before {
  display: none;
}
/* 外层装饰框 — 移除 */
.ds2-level-text::after {
  display: none;
}
.ds2-level-glow {
  display: none;
}
@keyframes ds2-gold-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes ds2-hero-level-in {
  0% { opacity: 0; transform: translateY(-8px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 签诗竖排区 — 无背景框·紧凑排版 */
.ds2-poem-vertical {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 8px 12px 10px;
  min-height: 80px;
  position: relative;
  background: none;
  border-radius: 0;
  border: none;
  margin-bottom: 0;
}
/* 卷轴装饰线 — 隐藏 */
.ds2-poem-scroll-top,
.ds2-poem-scroll-bottom {
  display: none;
}
/* 签诗列 — 主题色文字 */
.ds2-poem-line {
  writing-mode: vertical-rl;
  font-family: 'Noto Serif SC', 'Noto Serif TC', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.18em;
  line-height: 1.6;
  white-space: nowrap;
}
/* 逐字书写动画 */
.ds2-poem-char {
  display: inline-block;
  opacity: 0;
  animation: ds2-char-brush 0.35s ease-out forwards;
}
@keyframes ds2-char-brush {
  0% { opacity: 0; transform: translateY(-4px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* 印章 — 主题色 */
.ds2-poem-seal {
  position: absolute;
  bottom: 10px; left: 14px;
  width: 34px; height: 34px;
  border: 2px solid rgba(var(--ds2-theme-rgb), 0.25);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif SC', serif;
  font-size: 11px; font-weight: 700;
  color: rgba(var(--ds2-theme-rgb), 0.4);
  transform: rotate(-6deg);
  opacity: 0;
  animation: ds2-seal-stamp 0.4s ease-out 2.2s forwards;
}
@keyframes ds2-seal-stamp {
  0% { opacity: 0; transform: rotate(-6deg) scale(1.3); }
  60% { opacity: 1; transform: rotate(-6deg) scale(0.95); }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}

/* 分隔线 — 浅色优雅 + 太极符号 */
.ds2-poem-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 4px auto;
  opacity: 0;
  animation: ds2-divider-expand 0.5s ease-out 2.0s forwards;
}
.ds2-poem-divider--light {
  margin: 2px auto;
}
.ds2-poem-divider::before, .ds2-poem-divider::after {
  content: ''; width: 50px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ds2-theme-rgb), 0.15));
  border-radius: 1px;
}
.ds2-poem-divider::after {
  background: linear-gradient(90deg, rgba(var(--ds2-theme-rgb), 0.15), transparent);
}
.ds2-poem-divider-wing {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--ds2-theme-rgb), 0.15);
  display: inline-block;
}
.ds2-poem-divider-dot {
  width: auto; height: auto;
  background: none;
  transform: none;
  flex-shrink: 0;
  font-size: 12px;
  color: rgba(var(--ds2-theme-rgb), 0.3);
  letter-spacing: 0;
}
.ds2-poem-divider-dot::before {
  content: '☯';
  animation: ds2-bagua-spin 12s linear infinite;
  display: inline-block;
}
@keyframes ds2-bagua-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ds2-divider-expand {
  0% { opacity: 0; transform: scaleX(0.3); }
  100% { opacity: 1; transform: scaleX(1); }
}

/* 解读 — 结构化展示 */
.ds2-reading {
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.9; text-align: center;
  padding: 0 16px; margin-bottom: 4px;
}
.ds2-reading-first-char {
  font-family: 'Noto Serif SC', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ds2-theme, var(--accent));
  line-height: 1;
  margin-right: 2px;
}
/* 解读主体 */
.ds2-reading-body {
  margin-bottom: 6px;
}
/* 「」引用高亮 */
.ds2-reading-quote {
  font-family: 'Noto Serif SC', serif;
  font-weight: 600;
  color: var(--ds2-theme, var(--accent));
  opacity: 0.85;
}
/* 核心结论行 — 左右对称装饰 */
.ds2-reading-conclusion {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 5px 16px;
  border-radius: 6px;
  background: rgba(var(--ds2-theme-rgb), 0.05);
  border-left: 3px solid rgba(var(--ds2-theme-rgb), 0.25);
  border-right: 3px solid rgba(var(--ds2-theme-rgb), 0.25);
  text-align: center;
  line-height: 1.8;
  margin-top: 4px;
}

/* 卦象典故 — 左右并排居中布局·无边框 */
.ds2-hero-gua-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 10px;
  margin-bottom: 4px;
  position: relative;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

/* SVG 卦象容器 — 左侧（放大版适配） */
.ds2-hero-gua-svg-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 130px;
  min-width: 130px;
  position: relative;
}
/* 卦象背后的光晕 — 放大版 */
.ds2-hero-gua-svg-wrap::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ds2-theme-rgb), 0.1) 0%, transparent 70%);
  animation: ds2-gua-glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ds2-gua-glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* SVG 卦象本体 — 放大版 */
.ds2-gua-svg {
  width: 130px;
  height: 150px;
  position: relative;
  z-index: 1;
}

/* 星空微粒底纹 */
.ds2-star-particle {
  fill: rgba(var(--ds2-theme-rgb), 0.15);
  animation: ds2-star-drift 8s ease-in-out infinite;
}
@keyframes ds2-star-drift {
  0%, 100% { opacity: 0.1; transform: translate(0, 0); }
  25% { opacity: 0.5; transform: translate(1px, -2px); }
  50% { opacity: 0.2; transform: translate(-1px, 1px); }
  75% { opacity: 0.6; transform: translate(2px, -1px); }
}

/* 八卦方位盘 — 双层旋转环 + 入场动画 */
.ds2-bagua-ring-group {
  opacity: 0;
  animation: ds2-bagua-rotate 40s linear infinite,
             ds2-ring-appear 0.6s ease-out 0.1s forwards;
  transform-origin: center center;
}
@keyframes ds2-bagua-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ds2-ring-appear {
  0% { opacity: 0; transform: rotate(0deg) scale(0.8); }
  100% { opacity: 1; transform: rotate(30deg) scale(1); }
}
.ds2-bagua-ring-outer {
  fill: none;
  stroke: rgba(var(--ds2-theme-rgb), 0.12);
  stroke-width: 0.6;
  stroke-dasharray: 6 4;
}
.ds2-bagua-ring-inner {
  fill: none;
  stroke: rgba(var(--ds2-theme-rgb), 0.06);
  stroke-width: 0.4;
  stroke-dasharray: 2 6;
}
/* 方位盘上的微型三爻符号 */
.ds2-bagua-mini-yao {
  fill: rgba(var(--ds2-theme-rgb), 0.18);
  transition: fill 0.3s;
}
/* 当前卦所在方位高亮 */
.ds2-bagua-mini-active {
  fill: rgba(var(--ds2-theme-rgb), 0.6);
  filter: drop-shadow(0 0 2px rgba(var(--ds2-theme-rgb), 0.3));
}
/* 方位间的连接光点 */
.ds2-bagua-dot {
  fill: rgba(var(--ds2-theme-rgb), 0.15);
  animation: ds2-dot-twinkle 4s ease-in-out infinite;
}
@keyframes ds2-dot-twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* 爻线入场动画 — 「显卦」序列 */
.ds2-yao-wrap {
  opacity: 0;
  animation: ds2-yao-appear 0.6s ease-out forwards;
}
@keyframes ds2-yao-appear {
  0% { opacity: 0; transform: scaleX(0) translateY(4px); }
  50% { opacity: 0.8; transform: scaleX(1.08) translateY(0); }
  100% { opacity: 1; transform: scaleX(1) translateY(0); }
}

/* 爻线本体 */
.ds2-yao {
  opacity: 1;
}

/* 阳爻 — 暖金色·增强发光脉冲 */
.ds2-yao--yang {
  fill: url(#yangGrad);
  filter: url(#yangGlow);
  animation: ds2-yang-pulse 3s ease-in-out infinite 2s;
}
@keyframes ds2-yang-pulse {
  0%, 100% { filter: url(#yangGlow) brightness(1); }
  50% { filter: url(#yangGlow) brightness(1.3); }
}

/* 阴爻 — 冷蓝紫色·增强发光脉冲 */
.ds2-yao--yin {
  fill: url(#yinGrad);
  filter: url(#yinGlow);
  animation: ds2-yin-pulse 3.5s ease-in-out infinite 2.2s;
}
@keyframes ds2-yin-pulse {
  0%, 100% { filter: url(#yinGlow) brightness(1); }
  50% { filter: url(#yinGlow) brightness(1.25); }
}

/* 流光纹层 — 金属拉丝光泽滑过 */
.ds2-yao-sheen {
  opacity: 0;
  mix-blend-mode: overlay;
  animation: ds2-sheen-slide 4s ease-in-out infinite 2.5s;
}
.ds2-yao-sheen--yang {
  fill: url(#yangSheen);
}
.ds2-yao-sheen--yin {
  fill: url(#yinSheen);
}
@keyframes ds2-sheen-slide {
  0% { opacity: 0; transform: translateX(-100%); }
  20% { opacity: 0.6; }
  50% { opacity: 0.8; transform: translateX(100%); }
  51% { opacity: 0; }
  100% { opacity: 0; }
}

/* 端点粒子 — 阳爻火焰/阴爻雾气 */
.ds2-yao-particle {
  opacity: 0;
  filter: url(#particleGlow);
  animation: ds2-particle-drift 3s ease-in-out infinite;
}
.ds2-yao-particle--yang {
  fill: #F5D070;
}
.ds2-yao-particle--yin {
  fill: #A29BFE;
}
@keyframes ds2-particle-drift {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25% { opacity: 0.7; transform: translate(-2px, -3px) scale(1); }
  50% { opacity: 0.4; transform: translate(1px, -5px) scale(0.8); }
  75% { opacity: 0.6; transform: translate(-1px, -2px) scale(1.1); }
  100% { opacity: 0; transform: translate(0, -6px) scale(0.5); }
}

/* 太极双鱼 — 上下卦分界 */
.ds2-taiji-group {
  opacity: 0;
  animation: ds2-taiji-spin 12s linear infinite,
             ds2-taiji-appear 0.5s ease-out 0.4s forwards;
  transform-origin: 0 0;
}
@keyframes ds2-taiji-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ds2-taiji-appear {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(180deg); }
}
.ds2-taiji-outline {
  fill: none;
  stroke: rgba(var(--ds2-theme-rgb), 0.1);
  stroke-width: 0.4;
}
.ds2-taiji-yang {
  fill: url(#yangGrad);
  opacity: 0.7;
}
.ds2-taiji-yin {
  fill: url(#yinGrad);
  opacity: 0.6;
}
.ds2-taiji-dot-yin {
  fill: #6C5CE7;
  opacity: 0.8;
}
.ds2-taiji-dot-yang {
  fill: #E8B84B;
  opacity: 0.8;
}

/* 旧上下卦分隔虚线（已被太极替代，保留类名兼容） */
.ds2-yao-divider {
  display: none;
}

/* 旧的文字符号隐藏 */
.ds2-hero-gua {
  display: none;
}
.ds2-hero-gua-symbol { display: none; }

.ds2-hero-gua-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.15em;
  margin-bottom: 3px;
}
.ds2-hero-gua-oracle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 3px;
  display: block;
  text-align: center;
  line-height: 1.5;
  position: relative;
  padding: 0;
}
/* 装饰性引号 — 紧凑版 */
.ds2-hero-gua-oracle::before {
  content: '「';
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  color: rgba(var(--ds2-theme-rgb), 0.18);
  margin-right: 2px;
}
.ds2-hero-gua-oracle::after {
  content: '」';
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  color: rgba(var(--ds2-theme-rgb), 0.18);
  margin-left: 2px;
}
.ds2-hero-allusion {
  text-align: center; font-size: 11px; color: var(--text-tertiary);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.ds2-hero-allusion::before { content: '典故 · '; color: var(--ds2-theme, var(--accent)); opacity: 0.6; }

/* 卦象右侧信息区 */
.ds2-hero-gua-info {
  flex: none;
  text-align: center;
}

/* 五行/应季标签行 */
.ds2-hero-gua-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
  justify-content: center;
}
.ds2-hero-gua-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.ds2-hero-gua-tag--wx {
  background: rgba(var(--ds2-theme-rgb), 0.06);
  color: var(--ds2-theme);
  border: 1px solid rgba(var(--ds2-theme-rgb), 0.12);
}
.ds2-hero-gua-tag--season {
  background: rgba(243, 156, 18, 0.06);
  color: #B8860B;
  border: 1px solid rgba(243, 156, 18, 0.12);
}
.ds2-gua-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 宜忌标签区 — 单行双色流式布局 */
.ds2-hero-yiji {
  display: flex; flex-direction: column;
  align-items: center; gap: 0; padding-top: 4px;
}
.ds2-hero-yiji-row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 6px;
}
.ds2-hero-tag {
  padding: 5px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; white-space: nowrap;
  position: relative;
  overflow: hidden;
  opacity: 0; animation: ds2-tag-pop 0.35s ease-out forwards;
}
/* 微光扫描 */
.ds2-hero-tag::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: ds2-tag-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ds2-tag-shimmer {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}
.ds2-tag-icon {
  font-size: 8px;
  margin-right: 3px;
  opacity: 0.7;
  display: inline-block;
}
.ds2-hero-tag--yi .ds2-tag-icon {
  color: #27AE60;
}
.ds2-hero-tag--ji .ds2-tag-icon {
  color: #E74C3C;
}
@keyframes ds2-tag-pop {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* 旧结构兼容（隐藏） */
.ds2-hero-tag--yi {
  background: rgba(39,174,96,0.08); color: #27AE60;
  border: 1px solid rgba(39,174,96,0.15);
  animation: ds2-tag-pop 0.35s ease-out forwards, ds2-tag-float 4s ease-in-out infinite;
  animation-delay: var(--tag-delay, 2.2s), 3s;
}
.ds2-hero-tag--ji {
  background: rgba(231,76,60,0.08); color: #E74C3C;
  border: 1px solid rgba(231,76,60,0.15);
  animation: ds2-tag-pop 0.35s ease-out forwards, ds2-tag-float 4.5s ease-in-out infinite;
  animation-delay: var(--tag-delay, 2.4s), 3.2s;
}
/* 宜忌标签悬浮微动 */
@keyframes ds2-tag-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
/* 宜忌行内标签错开节奏 */
.ds2-hero-yiji-row:first-child .ds2-hero-tag:nth-child(1) { --tag-delay: 2.2s; animation-delay: 2.2s, 3s; }
.ds2-hero-yiji-row:first-child .ds2-hero-tag:nth-child(2) { --tag-delay: 2.25s; animation-delay: 2.25s, 3.3s; }
.ds2-hero-yiji-row:first-child .ds2-hero-tag:nth-child(3) { --tag-delay: 2.3s; animation-delay: 2.3s, 3.6s; }
.ds2-hero-yiji-row:first-child .ds2-hero-tag:nth-child(4) { --tag-delay: 2.35s; animation-delay: 2.35s, 3.9s; }
.ds2-hero-yiji-row:last-child .ds2-hero-tag:nth-child(1) { --tag-delay: 2.4s; animation-delay: 2.4s, 3.15s; }
.ds2-hero-yiji-row:last-child .ds2-hero-tag:nth-child(2) { --tag-delay: 2.45s; animation-delay: 2.45s, 3.45s; }
.ds2-hero-yiji-row:last-child .ds2-hero-tag:nth-child(3) { --tag-delay: 2.5s; animation-delay: 2.5s, 3.75s; }
.ds2-hero-yiji-row:last-child .ds2-hero-tag:nth-child(4) { --tag-delay: 2.55s; animation-delay: 2.55s, 4.05s; }
.ds2-result-hero, .ds2-poem-card, .ds2-yiji, .ds2-gua-row, .ds2-allusion {
  display: none !important;
}

/* 第二层：宜忌紧凑条 */
.ds2-yiji {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 12px 0;
  max-height: 48px;
}
.ds2-yiji-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--glass-bg);
}
.ds2-yiji-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ds2-yiji-label--yi { color: #27AE60; }
.ds2-yiji-label--ji { color: #E74C3C; }
.ds2-yiji-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
}
.ds2-tag-yi {
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  background: rgba(39, 174, 96, 0.08);
  color: #27AE60;
  border: 1px solid rgba(39, 174, 96, 0.12);
}
.ds2-tag-ji {
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  background: rgba(231, 76, 60, 0.08);
  color: #E74C3C;
  border: 1px solid rgba(231, 76, 60, 0.12);
}

/* 幸运信息三列chip */
.ds2-lucky {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.ds2-lucky-chip {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 6px 4px;
  text-align: center;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ds2-lucky-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-shadow-hover);
}
.ds2-lucky-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.ds2-lucky-value {
  font-family: 'Noto Serif SC', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}
.ds2-lucky-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}

/* 第三层：天机妙论卡片 */
.ds2-tianji {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 12px 0;
  box-shadow: var(--card-shadow);
}
.ds2-tianji-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ds2-tianji-title i {
  color: var(--accent);
  font-size: 16px;
}
.ds2-tianji-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
  white-space: pre-wrap;
}
/* 流式输出：打字机光标 + 渐入动画 */
.ds2-tianji-body.ds2-tianji-streaming {
  min-height: 40px;
}
.ds2-tianji-body.ds2-tianji-streaming::after {
  content: '▍';
  display: inline;
  color: var(--ds2-theme, var(--accent));
  animation: ds2-cursor-blink 0.6s steps(2) infinite;
  font-weight: 300;
  opacity: 0.7;
  margin-left: 1px;
}
@keyframes ds2-cursor-blink {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0; }
}
.ds2-tianji-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 8px 0;
}
.ds2-tianji-pulse {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(108, 92, 231, 0.12);
  animation: ds2-tianji-dot 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ds2-tianji-dot {
  0%, 100% { transform: scale(0.8); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 1; }
}
.ds2-tianji-fail {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 命主专析折叠 */
.ds2-mingzhu {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ds2-mingzhu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 0;
}
.ds2-mingzhu-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ds2-mingzhu-arrow {
  font-size: 16px;
  color: var(--text-tertiary);
  transition: transform 0.3s;
}
.ds2-mingzhu.collapsed .ds2-mingzhu-arrow {
  transform: rotate(-90deg);
}
.ds2-mingzhu-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 10px;
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.ds2-mingzhu.collapsed .ds2-mingzhu-body {
  max-height: 0;
  opacity: 0;
}

/* 五行增运/避忌双色标签 */
.ds2-wx-advice {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ds2-wx-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
}
.ds2-wx-pill--enhance {
  background: rgba(39, 174, 96, 0.08);
  color: #27AE60;
  border: 1px solid rgba(39, 174, 96, 0.15);
}
.ds2-wx-pill--avoid {
  background: rgba(231, 76, 60, 0.08);
  color: #E74C3C;
  border: 1px solid rgba(231, 76, 60, 0.15);
}

/* ============================================================
   DS2 天机妙论富文本排版
   ============================================================ */
.ds2-tianji-heading {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds2-theme, var(--accent));
  margin: 14px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(108, 92, 231, 0.12);
  line-height: 1.5;
}
.ds2-tianji-heading:first-child {
  margin-top: 0;
}
.ds2-tianji-bracket {
  color: var(--ds2-theme, var(--accent));
  font-weight: 600;
}
.ds2-tianji-body strong {
  color: var(--ds2-theme, var(--accent));
  font-weight: 600;
}
.ds2-tianji-body em {
  font-style: italic;
  color: var(--text-secondary);
}
.ds2-tianji-body p {
  margin: 8px 0;
  line-height: 1.75;
}
.ds2-tianji-body p:first-child {
  margin-top: 0;
}
.ds2-tianji-ol,
.ds2-tianji-ul {
  padding-left: 16px;
  margin: 6px 0;
  line-height: 1.7;
}
.ds2-tianji-ol li,
.ds2-tianji-ul li {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.ds2-tianji-ol {
  list-style-type: decimal;
}
.ds2-tianji-ol li::marker {
  color: var(--ds2-theme, var(--accent));
  font-weight: 600;
}
.ds2-tianji-ul {
  list-style-type: disc;
}
.ds2-tianji-ul li::marker {
  color: var(--ds2-theme, var(--accent));
}
.ds2-mingzhu-body .ds2-tianji-heading {
  margin-top: 10px;
  font-size: 13px;
}

/* ============================================================
   DS2 五行水平条形图
   ============================================================ */
.ds2-wuxing-bars {
  margin: 12px 0;
}
.ds2-wuxing-bars-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ds2-wuxing-bars-title i {
  color: var(--accent);
  font-size: 16px;
}
.ds2-wx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 22px;
  margin-bottom: 4px;
}
.ds2-wx-label {
  width: 52px;
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ds2-wx-label-emoji {
  font-size: 14px;
  width: 18px;
  text-align: center;
}
.ds2-wx-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
}
.ds2-wx-bar {
  height: 100%;
  border-radius: 4px;
  width: 0%;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.ds2-wx-bar--jin  { background: linear-gradient(90deg, #F39C12, #F1C40F); }
.ds2-wx-bar--mu   { background: linear-gradient(90deg, #27AE60, #2ECC71); }
.ds2-wx-bar--shui { background: linear-gradient(90deg, #3498DB, #5DADE2); }
.ds2-wx-bar--huo  { background: linear-gradient(90deg, #E74C3C, #EC7063); }
.ds2-wx-bar--tu   { background: linear-gradient(90deg, #8B6914, #B8860B); }
.ds2-wx-pct {
  width: 36px;
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: right;
  flex-shrink: 0;
}

/* ============================================================
   DS2 历史签文页
   ============================================================ */
.ds2-history {
  padding: 20px 0;
  animation: ds2-fadein 0.5s ease-out;
}
.ds2-history-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.ds2-history-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  color: var(--text-primary);
  font-size: 18px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.ds2-history-back:hover {
  background: rgba(108, 92, 231, 0.06);
  border-color: rgba(108, 92, 231, 0.2);
}
.ds2-history-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.ds2-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds2-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  transition: all 0.25s;
  opacity: 0;
  animation: ds2-cascade-in 0.5s ease-out forwards;
}
.ds2-history-item:hover {
  transform: translateY(-2px);
  border-color: rgba(108, 92, 231, 0.15);
  box-shadow: var(--card-shadow-hover);
}
.ds2-history-item-date {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 56px;
}
.ds2-history-item-badge {
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.ds2-badge-ss {
  background: rgba(201, 144, 14, 0.1);
  color: var(--ds2-gold);
  border: 1px solid rgba(201, 144, 14, 0.2);
}
.ds2-badge-s {
  background: rgba(108, 92, 231, 0.08);
  color: var(--ds2-purple);
  border: 1px solid rgba(108, 92, 231, 0.15);
}
.ds2-badge-ms {
  background: rgba(46, 139, 87, 0.08);
  color: var(--ds2-jade);
  border: 1px solid rgba(46, 139, 87, 0.15);
}
.ds2-badge-m {
  background: rgba(14, 165, 165, 0.08);
  color: var(--ds2-teal);
  border: 1px solid rgba(14, 165, 165, 0.15);
}
.ds2-badge-mx {
  background: rgba(107, 123, 141, 0.08);
  color: var(--ds2-slate);
  border: 1px solid rgba(107, 123, 141, 0.15);
}
.ds2-badge-x {
  background: rgba(142, 153, 164, 0.08);
  color: var(--ds2-gray);
  border: 1px solid rgba(142, 153, 164, 0.15);
}
.ds2-history-item-poem {
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 空状态 */
.ds2-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
}
.ds2-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: ds2-float 3s ease-in-out infinite;
}
.ds2-empty-text {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.ds2-empty-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}

/* ============================================================
   DS2 级联入场动画
   ============================================================ */
@keyframes ds2-cascade-in {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.ds2-cascade {
  opacity: 0;
  animation: ds2-cascade-in 0.45s ease-out forwards;
}
.ds2-cascade-1 { animation-delay: 0.06s; }
.ds2-cascade-2 { animation-delay: 0.12s; }
.ds2-cascade-3 { animation-delay: 0.18s; }
.ds2-cascade-4 { animation-delay: 0.24s; }
.ds2-cascade-5 { animation-delay: 0.30s; }
.ds2-cascade-6 { animation-delay: 0.36s; }
.ds2-cascade-7 { animation-delay: 0.42s; }

/* ============================================================
   DS2 操作按钮区
   ============================================================ */
.ds2-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* ============================================================
   DS2 等级徽章（通用）
   ============================================================ */
.ds2-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

/* ============================================================
   DS2 响应式适配
   ============================================================ */
@media (max-width: 640px) {
  .ds2-history-list {
    gap: 6px;
  }
}

@media (max-width: 380px) {
  /* 浮牌缩小 */
  .ds2-card-wrap {
    width: 160px;
    height: 240px;
  }
  .ds2-card-sigil {
    font-size: 56px;
  }
  .ds2-card-title {
    font-size: 15px;
    letter-spacing: 0.2em;
  }

  /* 结果页适配 — Hero卡片 */
  .ds2-hero-card {
    padding: 24px 16px 22px;
    border-radius: 16px;
  }
  .ds2-level-text {
    font-size: 32px;
    margin-bottom: 4px;
  }
  .ds2-poem-vertical {
    gap: 10px;
    min-height: 90px;
  }
  .ds2-poem-line {
    font-size: 15px;
    letter-spacing: 0.12em;
  }
  .ds2-poem-seal {
    width: 28px;
    height: 28px;
    font-size: 9px;
  }
  .ds2-reading {
    font-size: 13px;
    padding: 0 8px;
  }
  .ds2-hero-yiji {
    gap: 4px;
  }
  .ds2-hero-tag {
    padding: 4px 10px;
    font-size: 11px;
  }
  .ds2-level-glow {
    inset: -14px -20px;
  }
  /* 小屏卦象区域改为纵向 */
  .ds2-hero-gua-box {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .ds2-hero-gua-info {
    text-align: center;
  }
  .ds2-hero-gua-oracle {
    text-align: center;
  }
  .ds2-hero-allusion {
    text-align: center;
  }
  .ds2-hero-gua-tags {
    justify-content: center;
  }

  /* 星尘和流星在小屏幕隐藏 */
  .ds2-hero-aura { display: none; }
  .ds2-hero-corner { display: none; }

  /* 幸运信息压缩 */
  .ds2-lucky {
    gap: 6px;
    max-height: none;
  }
  .ds2-lucky-chip {
    padding: 6px 4px;
  }
  .ds2-lucky-value {
    font-size: 13px;
  }

  /* 五行条形图 */
  .ds2-wx-label {
    width: 44px;
    font-size: 11px;
  }

  /* 按钮 */
  .ds2-btn-primary {
    padding: 12px 32px;
    font-size: 15px;
  }
}

/* ============================================================
   DS2 分享面板（底部弹出式 Modal）
   ============================================================ */
.ds2-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: background 0.3s ease;
}
.ds2-share-overlay.ds2-share-active {
  background: rgba(0, 0, 0, 0.45);
}
.ds2-share-overlay.ds2-share-exit {
  background: rgba(0, 0, 0, 0);
}
.ds2-share-panel {
  width: 90%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 20px;
  padding: 12px 20px 28px;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
  will-change: transform, opacity;
}
.ds2-share-active .ds2-share-panel {
  transform: scale(1);
  opacity: 1;
}
.ds2-share-exit .ds2-share-panel {
  transform: scale(0.95);
  opacity: 0;
}
.ds2-share-handle {
  display: none;
}
.ds2-share-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ds2-share-title span {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.ds2-share-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-tertiary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.ds2-share-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* 签文预览卡片 */
.ds2-share-preview {
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.ds2-share-preview.ds2-theme-ss {
  background: linear-gradient(135deg, #f6d365 0%, #fda085 50%, #fbc2eb 100%);
}
.ds2-share-preview.ds2-theme-s {
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 50%, #f6d365 100%);
}
.ds2-share-preview.ds2-theme-ms {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e063 50%, #f7dc6f 100%);
}
.ds2-share-preview.ds2-theme-m {
  background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 50%, #a18cd1 100%);
}
.ds2-share-preview.ds2-theme-mx {
  background: linear-gradient(135deg, #8e9eab 0%, #667eea 50%, #eef2f3 100%);
}
.ds2-share-preview.ds2-theme-x {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.ds2-share-preview.ds2-theme-xx {
  background: linear-gradient(135deg, #434343 0%, #667eea 100%);
}
.ds2-share-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: inherit;
}
.ds2-share-preview > * {
  position: relative;
  z-index: 1;
}
.ds2-share-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.ds2-share-card-brand {
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: 2px;
}
.ds2-share-card-date {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.45);
}
.ds2-share-card-level {
  font-family: 'Noto Serif SC', serif;
  font-size: 32px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 12px;
  letter-spacing: 4px;
}
.ds2-share-card-poem {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'Noto Serif SC', 'Noto Serif TC', serif;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 12px;
  min-height: 120px;
  padding: 8px 0;
}
.ds2-share-card-poem > div {
  writing-mode: vertical-rl;
  letter-spacing: 0.12em;
  line-height: 1.5;
  white-space: nowrap;
}
.ds2-share-card-divider {
  width: 40px;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
  margin: 0 auto 10px;
}
.ds2-share-card-reading {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.7;
  margin-bottom: 14px;
  padding: 0 8px;
  text-align: center;
}
/* 分享卡片 — 解读结构化（与展示页一致） */
.ds2-share-card-reading .ds2-reading-body {
  margin-bottom: 6px;
}
.ds2-share-card-reading .ds2-reading-quote {
  font-family: 'Noto Serif SC', serif;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}
.ds2-share-card-reading .ds2-reading-conclusion {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.75);
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-left: 2px solid rgba(0, 0, 0, 0.2);
  border-right: 2px solid rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 1.7;
  margin-top: 4px;
}
/* 分享卡片 — 宜忌标签图标 */
.ds2-share-tag-icon {
  font-size: 8px;
  margin-right: 2px;
  opacity: 0.7;
  display: inline-block;
}
.ds2-share-tag--yi .ds2-share-tag-icon {
  color: rgba(0, 100, 50, 0.6);
}
.ds2-share-tag--ji .ds2-share-tag-icon {
  color: rgba(180, 40, 30, 0.6);
}
.ds2-share-card-tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ds2-share-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.ds2-share-tag {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.ds2-share-tag--yi {
  background: rgba(39, 174, 96, 0.15);
  color: rgba(0, 100, 50, 0.8);
}
.ds2-share-tag--ji {
  background: rgba(231, 76, 60, 0.15);
  color: rgba(180, 40, 30, 0.8);
}

/* 分享卡片 — 卦象信息区（SVG六爻 + 卦名信息布局） */
.ds2-share-gua-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 0;
}
.ds2-share-gua-svg-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds2-share-gua-svg {
  width: 80px;
  height: 90px;
}
.ds2-share-gua-info {
  text-align: center;
}
.ds2-share-gua-section {
  text-align: center;
  margin-bottom: 10px;
  padding: 8px 0;
}
.ds2-share-gua-name {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.75);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.ds2-share-gua-oracle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.5;
  margin-bottom: 3px;
}
.ds2-share-gua-oracle::before {
  content: '「';
  font-family: 'Noto Serif SC', serif;
  color: rgba(0, 0, 0, 0.25);
}
.ds2-share-gua-oracle::after {
  content: '」';
  font-family: 'Noto Serif SC', serif;
  color: rgba(0, 0, 0, 0.25);
}
.ds2-share-gua-allusion {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 6px;
}
.ds2-share-gua-tags {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.ds2-share-gua-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.3);
  color: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.ds2-share-gua-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds2-share-gua-emoji {
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

/* 分享卡片 — 幸运信息三列 */
.ds2-share-lucky {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 10px 0 8px;
}
.ds2-share-lucky-item {
  text-align: center;
  padding: 6px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.ds2-share-lucky-label {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 2px;
}
.ds2-share-lucky-value {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ds2-share-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

/* 分享卡片 — 天机妙论摘要 */
.ds2-share-tianji {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.ds2-share-tianji-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 6px;
  letter-spacing: 0.06em;
}
.ds2-share-tianji-text {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.7;
}

/* 分享卡片 — 底部品牌引导 */
.ds2-share-footer {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.3);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.06em;
}

/* 操作按钮组 */
.ds2-share-actions {
  display: flex;
  gap: 10px;
}
.ds2-share-btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}
.ds2-share-btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.25);
}
.ds2-share-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(108, 92, 231, 0.35);
}
.ds2-share-btn--primary:active {
  transform: translateY(0);
}
.ds2-share-btn--ghost {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.ds2-share-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.07);
}

/* ===== DS2 减少动画偏好 ===== */
@media (prefers-reduced-motion: reduce) {
  .ds2-card-float .ds2-card-wrap,
  .ds2-card-glow,
  .ds2-particle,
  .ds2-ripple-wave,
  .ds2-cascade,
  .ds2-tianji-pulse,
  .ds2-empty-icon,
  .ds2-history-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ds2-card-front::after {
    animation: none !important;
  }
  /* 禁用灵签微摇 */
  .ds2-phase-gather .ds2-card-wrap {
    animation: ds2-gather-shrink 0.8s ease-in-out forwards !important;
  }
  /* 逐字渐现改为整体淡入 */
  .ds2-card-back-level,
  .ds2-poem-col .ds2-poem-char,
  .ds2-card-back-sub {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ds2-card-back {
    transition: opacity 0.4s ease-out;
  }
  /* Hero卡片 + 签诗逐字 + 印章 + 分隔线 + 标签 + 光晕 — 禁用动画 */
  .ds2-level-text,
  .ds2-poem-char,
  .ds2-poem-seal,
  .ds2-poem-divider,
  .ds2-hero-tag {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .ds2-poem-seal {
    transform: rotate(-6deg) !important;
  }
  .ds2-level-glow {
    animation: none !important;
    opacity: 0.5 !important;
  }
  /* Hero卡片 — 禁用动画 */
  .ds2-hero-card::after,
  .ds2-hero-tag::after {
    animation: none !important;
  }
  .ds2-poem-divider-dot::before,
  .ds2-poem-divider-wing {
    animation: none !important;
  }
  .ds2-level-text {
    animation: none !important;
    opacity: 1 !important;
  }
  /* 详情弹窗 — 禁用缩放，仅 opacity */
  .ds2-detail-panel {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ds2-detail-overlay {
    transition: opacity 0.2s ease !important;
  }
  .ds2-detail-overlay.ds2-detail-exit .ds2-detail-panel {
    animation: none !important;
    opacity: 0 !important;
  }
  /* 分享弹窗 — 禁用缩放动画 */
  .ds2-share-panel {
    transition: opacity 0.2s ease !important;
    transform: none !important;
  }
}

/* ============================================================
   DS2 历史签文列表交互增强
   ============================================================ */
.ds2-history-item {
  cursor: pointer;
  position: relative;
}
.ds2-history-item-arrow {
  font-size: 16px;
  color: var(--text-tertiary);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ds2-history-item:hover .ds2-history-item-arrow {
  opacity: 0.5;
  transform: translateX(2px);
}

/* ============================================================
   DS2 签文详情弹窗
   ============================================================ */
.ds2-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: background 0.3s ease;
}
.ds2-detail-overlay.ds2-detail-active {
  background: rgba(0, 0, 0, 0.45);
}
.ds2-detail-overlay.ds2-detail-exit {
  background: rgba(0, 0, 0, 0);
}

.ds2-detail-panel {
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12), 0 4px 24px rgba(0, 0, 0, 0.06);
  transform: scale(0.92);
  opacity: 0;
  animation: ds2-detail-enter 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  will-change: transform, opacity;
  position: relative;
}
@keyframes ds2-detail-enter {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.ds2-detail-exit .ds2-detail-panel {
  animation: ds2-detail-leave 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes ds2-detail-leave {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.95); opacity: 0; }
}

/* 关闭按钮 */
.ds2-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-tertiary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  z-index: 2;
}
.ds2-detail-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
}

/* 弹窗签文等级 */
.ds2-detail-level {
  font-family: 'Noto Serif SC', serif;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
  line-height: 1.3;
}

/* 弹窗签诗 — 竖排古风 */
.ds2-detail-poem-section {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 8px;
  margin-bottom: 16px;
  min-height: 130px;
  position: relative;
}
.ds2-detail-poem-line {
  writing-mode: vertical-rl;
  font-family: 'Noto Serif SC', 'Noto Serif TC', serif;
  font-size: 15px;
  color: var(--text-primary);
  letter-spacing: 0.12em;
  line-height: 1.5;
  white-space: nowrap;
}

/* 弹窗分割线 — 古风纹样 */
.ds2-detail-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto;
}
.ds2-detail-divider::before,
.ds2-detail-divider::after {
  content: '';
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108, 92, 231, 0.18));
}
.ds2-detail-divider::after {
  background: linear-gradient(90deg, rgba(108, 92, 231, 0.18), transparent);
}

/* 弹窗解读 — 引号装饰 */
.ds2-detail-reading {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.9;
  text-align: center;
  padding: 0 20px;
  margin-bottom: 14px;
  position: relative;
}
.ds2-detail-reading::before {
  content: '「';
  position: absolute;
  left: 2px;
  top: -2px;
  font-family: 'Noto Serif SC', serif;
  font-size: 18px;
  color: rgba(108, 92, 231, 0.12);
  line-height: 1;
}
.ds2-detail-reading::after {
  content: '」';
  position: absolute;
  right: 2px;
  bottom: -4px;
  font-family: 'Noto Serif SC', serif;
  font-size: 18px;
  color: rgba(108, 92, 231, 0.12);
  line-height: 1;
}

/* 弹窗宜忌 */
.ds2-detail-yiji {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
}
.ds2-detail-yiji-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.6);
}

/* 弹窗AI分析折叠 */
.ds2-detail-ai-section {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 14px;
  margin-top: 8px;
}
.ds2-detail-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 6px 0;
  transition: opacity 0.2s;
}
.ds2-detail-ai-header:hover {
  opacity: 0.8;
}
.ds2-detail-ai-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ds2-detail-ai-arrow {
  font-size: 16px;
  color: var(--text-tertiary);
  transition: transform 0.3s;
}
.ds2-detail-ai-section.collapsed .ds2-detail-ai-arrow {
  transform: rotate(-90deg);
}
.ds2-detail-ai-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 8px;
  max-height: 400px;
  overflow-y: auto;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.ds2-detail-ai-section.collapsed .ds2-detail-ai-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* 弹窗日期 */
.ds2-detail-date {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 14px;
  letter-spacing: 0.06em;
}

/* 弹窗滚动条 */
.ds2-detail-panel::-webkit-scrollbar { width: 4px; }
.ds2-detail-panel::-webkit-scrollbar-track { background: transparent; }
.ds2-detail-panel::-webkit-scrollbar-thumb {
  background: rgba(108, 92, 231, 0.12);
  border-radius: 2px;
}
.ds2-detail-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(108, 92, 231, 0.25);
}