/* ════════════════════════════════════════════════════════════════
   divination-unify.css
   天机问卦 · 全模块统一主题
   ① 配色统一为「命理玄机紫 #6C5CE7」为主，金色仅作点缀
   ② 所有卡片/特效统一为苹果「液态玻璃」质感
   ③ 各术法结果页/内页区块内容对齐（留白、左右边距一致）
   说明：功能性语义色（五行/六神/奇门分层/吉凶/铜钱本体）保留不改。
   该文件须在 index.html 中最后引入以覆盖既有样式。
   ════════════════════════════════════════════════════════════════ */

:root {
  --dvu-purple: #6C5CE7;
  --dvu-purple-light: #8B7CF6;
  --dvu-purple-lighter: #A29BFE;
  --dvu-purple-deep: #5B4FC9;
  --dvu-purple-soft: rgba(108, 92, 231, 0.10);
  --dvu-purple-glow: rgba(108, 92, 231, 0.28);
  /* 苹果液态玻璃 */
  --dvu-glass-bg: rgba(255, 255, 255, 0.55);
  --dvu-glass-bg-strong: rgba(255, 255, 255, 0.66);
  --dvu-glass-blur: blur(30px) saturate(1.7);
  --dvu-glass-border: rgba(255, 255, 255, 0.72);
  --dvu-glass-shadow:
    0 8px 32px rgba(108, 92, 231, 0.10),
    0 2px 10px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --dvu-glass-shadow-hover:
    0 14px 44px rgba(108, 92, 231, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ───────────────────────────────────────────────
   一、入口页道场主题 token 改紫（rt-* 金色 → 紫色）
   仅影响天机问卦页面链路，不动全局
   ─────────────────────────────────────────────── */
.div-page:not(.ritual-theme) {
  --rt-gold: #6C5CE7;
  --rt-gold-light: #8B7CF6;
  --rt-gold-dim: #5B4FC9;
  --rt-gold-glow: rgba(108, 92, 231, 0.22);
  --rt-text-gold: #6C5CE7;
  --rt-border-strong: rgba(108, 92, 231, 0.28);
}

/* ───────────────────────────────────────────────
   二、苹果液态玻璃 — 统一所有卡片质感
   ─────────────────────────────────────────────── */
.div-page .div-glass-card,
.div-page .rt-hero-card,
.div-page .rt-sub-card,
.div-page .ly2-card,
#liuyao-result-page .ly-hero-card-light,
#liuyao-result-page .ly-guaci-card,
#liuyao-result-page .ly-analysis-card,
#liuyao-result-page .div-result-card,
.div-page .qm-hero-card,
.div-page .div-result-card,
.div-page .tianji-step-card {
  background: var(--dvu-glass-bg) !important;
  backdrop-filter: var(--dvu-glass-blur);
  -webkit-backdrop-filter: var(--dvu-glass-blur);
  border: 1px solid var(--dvu-glass-border);
  box-shadow: var(--dvu-glass-shadow);
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.div-page .div-glass-card:hover,
.div-page .rt-hero-card:hover,
.div-page .rt-sub-card:hover,
.div-page .ly2-card:hover {
  box-shadow: var(--dvu-glass-shadow-hover);
  border-color: rgba(108, 92, 231, 0.22);
  transform: translateY(-2px);
}

/* 玻璃输入框 */
.div-page .div-glass-input,
.div-page .ly2-input {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}
.div-page .div-glass-input:focus,
.div-page .ly2-input:focus-within {
  border-color: rgba(108, 92, 231, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.10) !important;
}

/* ───────────────────────────────────────────────
   三、主按钮统一为紫色液态玻璃
   ─────────────────────────────────────────────── */
.div-page .div-btn-gold {
  background: linear-gradient(135deg, var(--dvu-purple) 0%, var(--dvu-purple-light) 55%, var(--dvu-purple-lighter) 100%) !important;
  background-size: 200% 200%;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(60, 40, 140, 0.25);
  box-shadow: 0 6px 22px rgba(108, 92, 231, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.div-page .div-btn-gold:hover {
  box-shadow: 0 12px 32px rgba(108, 92, 231, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* ───────────────────────────────────────────────
   四、六爻起卦页（ly2-*）：品牌色改紫，铜钱本体保留金色点缀
   ─────────────────────────────────────────────── */
.ly2-cast-btn {
  background: linear-gradient(135deg, #8B7CF6 0%, #6C5CE7 60%, #5B4FC9 100%) !important;
  box-shadow: 0 8px 22px rgba(108, 92, 231, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.ly2-cast-btn:hover { box-shadow: 0 12px 30px rgba(108, 92, 231, 0.40) !important; }
.ly2-chip:hover { border-color: rgba(108, 92, 231, 0.28); background: rgba(255, 255, 255, 0.8); }
.ly2-chip:hover i { color: var(--dvu-purple); }
.ly2-chip.active {
  border-color: rgba(108, 92, 231, 0.5);
  background: var(--dvu-purple-soft);
  color: var(--dvu-purple);
  box-shadow: 0 4px 14px rgba(108, 92, 231, 0.14);
}
.ly2-chip.active i { color: var(--dvu-purple); }
.ly2-status.done { color: var(--dvu-purple); }
.ly2-hexagram.complete {
  box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.2), 0 8px 26px rgba(108, 92, 231, 0.12);
}
/* 阳爻保留暖金作为阴阳区分的点缀（金色仅点缀），阴爻紫色 */

/* ───────────────────────────────────────────────
   五、六爻结果页（.ly-*）：品牌装饰金 → 紫
   ─────────────────────────────────────────────── */
#liuyao-result-page .ly-section-label,
#liuyao-result-page .ly-section-label i { color: var(--dvu-purple); }
#liuyao-result-page .ly-section-label::after { background: rgba(108, 92, 231, 0.12); }
/* 顶部装饰条统一为紫色调 */
#liuyao-result-page .ly-hero-glow { background: radial-gradient(circle, rgba(108, 92, 231, 0.18), transparent 70%) !important; }

/* ───────────────────────────────────────────────
   六、奇门英雄卡 / 标题图标：暖金 → 紫
   ─────────────────────────────────────────────── */
.div-page .qm-hero-card {
  background:
    linear-gradient(135deg, rgba(108, 92, 231, 0.10), rgba(162, 155, 254, 0.05)) ,
    var(--dvu-glass-bg) !important;
}
.div-page .qm-hero-glow {
  background: radial-gradient(circle, rgba(108, 92, 231, 0.22), transparent 70%) !important;
}
.div-page .qm-hero-bagua,
.div-page .qm-hero-title { color: var(--dvu-purple); }

/* 结果区标题/小图标的品牌金 → 紫（保留五行/六神等语义色） */
.div-page .div-result-title i[style*="--div-gold"],
.div-page .div-result-title i[style*="d4950c"],
.div-page .div-result-title i[style*="e8a006"] { color: var(--dvu-purple) !important; }

/* ───────────────────────────────────────────────
   七、内容对齐 — 各术法内页/结果页区块留白与边距统一
   ─────────────────────────────────────────────── */
/* 统一内容容器宽度（梅花 520 → 560，与奇门/六壬一致） */
.div-page > div[style*="max-width:520px"] { max-width: 560px !important; }

/* 卡片在容器内左右贴齐、统一圆角与盒模型，避免错位 */
.div-page .div-glass-card,
.div-page .qm-hero-card,
.div-page .qm-info-bar {
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 18px;
}
/* 结果页 section 与卡片左右边距一致 */
#liuyao-result-page .ly-result-page,
#liuyao-result-page .ly-section { box-sizing: border-box; }
#liuyao-result-page .ly-section > .ly-hero-card-light,
#liuyao-result-page .ly-section > .ly-guaci-card,
#liuyao-result-page .ly-section > .ly-analysis-card,
#liuyao-result-page .ly-section > .div-result-card,
#liuyao-result-page .ly-section > .ly-paipan-wrap { width: 100%; box-sizing: border-box; }

/* ───────────────────────────────────────────────
   八、入口页 Hero / 子卡 液态玻璃微调（与紫色协调）
   ─────────────────────────────────────────────── */
.div-page .rt-hero-card-bg {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(108, 92, 231, 0.10), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(162, 155, 254, 0.08), transparent 55%) !important;
}
.div-page .rt-hero-card-enter,
.div-page .rt-portal-title { color: var(--dvu-purple); }
.div-page .rt-portal-gate-icon { color: var(--dvu-purple); }

/* 通用问事类型标签：金色选中/悬停 → 紫色 */
.div-page .tianji-qtype-tag:hover {
  color: var(--dvu-purple);
  border-color: rgba(108, 92, 231, 0.28);
  background: rgba(108, 92, 231, 0.06);
}
.div-page .tianji-qtype-tag.active {
  color: var(--dvu-purple);
  border-color: rgba(108, 92, 231, 0.42);
  background: rgba(108, 92, 231, 0.12);
  box-shadow: 0 0 12px rgba(108, 92, 231, 0.12);
}

/* ───────────────────────────────────────────────
   九、无障碍：降低动效
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .div-page .div-glass-card:hover,
  .div-page .rt-hero-card:hover,
  .div-page .rt-sub-card:hover,
  .div-page .ly2-card:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   十、AI 断卦结果 · Markdown 优雅排版（紫色主题，左对齐、留白统一）
   ════════════════════════════════════════════════════════════ */
.tianji-md {
  text-align: left;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--div-text-secondary, #636e83);
  word-break: break-word;
}
.tianji-md > *:first-child { margin-top: 0; }
.tianji-md > *:last-child { margin-bottom: 0; }

/* 一级标题（文章总标题） */
.tianji-md-h2 {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--dvu-purple, #6C5CE7);
  margin: 18px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(108, 92, 231, 0.14);
}
/* 二级标题（章节，带紫色印记竖条） */
.tianji-md-h3 {
  font-family: 'Noto Serif SC', serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--div-text-primary, #1a1a2e);
  margin: 18px 0 8px;
  padding-left: 11px;
  position: relative;
}
.tianji-md-h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, #8B7CF6, #6C5CE7);
}
/* 三级标题 */
.tianji-md-h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--dvu-purple, #6C5CE7);
  margin: 14px 0 6px;
}
/* 段落 */
.tianji-md-p { margin: 8px 0; line-height: 1.92; }
/* 无序列表 */
.tianji-md-list { list-style: none; margin: 8px 0; padding: 0; }
.tianji-md-list li {
  position: relative;
  padding-left: 18px;
  margin: 6px 0;
  line-height: 1.85;
}
.tianji-md-list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B7CF6, #6C5CE7);
}
/* 有序条目（行动建议 1. 2. 3.） */
.tianji-md-num-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 9px 0;
}
.tianji-md-num {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #8B7CF6, #6C5CE7);
  box-shadow: 0 2px 6px rgba(108, 92, 231, 0.28);
  margin-top: 1px;
}
.tianji-md-num-text { flex: 1; line-height: 1.85; }
/* 行内强调 */
.tianji-md strong { font-weight: 700; color: var(--div-text-primary, #1a1a2e); }
.tianji-md em { font-style: italic; color: var(--div-text-secondary, #636e83); }
.tianji-md code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(108, 92, 231, 0.08);
  color: var(--dvu-purple, #6C5CE7);
}