/* =========================================================
   爻知云AI · 新国风主题覆写层 (guofeng-theme.css)
   ---------------------------------------------------------
   设计定位：新国风 / 宣纸 + 墨 + 朱砂 + 金，呼应爻知云
             「传统文化 · 国学推广」的品牌内核。
   约束：
   - 纯 CSS，零图片，全部视觉由代码与渐变/纹理控制。
   - 完整保留 style.css 中的 base64 手写体 PangMenZhengDao。
   - 只覆写视觉属性（颜色/边框/背景/阴影/字体/动效），
     不改动任何 class 名、DOM 结构或 JS 逻辑，
     因此不影响既有功能（路由仅切换 class）。
   - 链接顺序：必须位于 css/style.css 之后。

   ★ 字体硬纪律（用户严规，源自 style.css 原手写体作用域 + history.js:133 注释）：
     手写体「庞门正道 PangMenZhengDao」仅可用于以下 5 处文字：
       · 品牌标题 .brand-title
       · 卦名 .gua-name / .gua-title-name
       · 卦标题 .gua-title
       · 预览卦名 .preview-name
     除上述 5 处外，全站一切文字（正文/标题/按钮/标签/卡片/弹窗等）
     一律使用「思源宋体」(Source Han Serif / Noto Serif CJK)，
     绝不可再用手写体。新增任何元素的默认字体必须继承宋体。
   ========================================================= */

:root {
  /* —— 宣纸 / 绢底 —— */
  --gf-paper:        #f4ecd9;   /* 主背景：暖宣纸 */
  --gf-paper-card:   #fbf6ea;   /* 卡片：更亮的纸面 */
  --gf-paper-deep:   #ece0c6;   /* 凹陷/禁用分区 */
  --gf-desk:         #2a251f;   /* 桌面（仅在 #app 之外露出） */

  /* —— 墨色文字 —— */
  --gf-ink:          #211e1a;
  --gf-ink-soft:     #4a443b;
  --gf-ink-faint:    #8c8170;

  /* —— 朱砂（主色 / 行动召唤）—— */
  --gf-cinnabar:     #9e2b25;
  --gf-cinnabar-deep:#7d211c;
  --gf-cinnabar-soft:#b8453c;

  /* —— 金 / 赭石（描边 / 装饰 / 付费）—— */
  --gf-gold:         #b08d57;
  --gf-gold-soft:    #c9a96a;
  --gf-gold-deep:    #93713f;

  /* —— 黛绿（极少量次强调）—— */
  --gf-jade:         #2f5d50;

  /* —— 统一暖光源阴影 —— */
  --gf-shadow:        0 0.06rem 0.2rem rgba(60, 40, 20, 0.12);
  --gf-shadow-strong: 0 0.1rem 0.32rem rgba(120, 30, 20, 0.22);
  --gf-shadow-up:     0 -0.04rem 0.18rem rgba(60, 40, 20, 0.10);
}

/* ===================== 基础层 ===================== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* 桌面：#app 之外的「书案」底色；移动端 #app 满宽，此底不露 */
body {
  color: var(--gf-ink);
  /* 全站默认 = 思源宋体（手写体仅 5 处特例，见文件头纪律） */
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'Noto Serif SC',
               'Songti SC', 'STSong', 'SimSun', serif;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(176, 141, 87, 0.10), transparent 60%),
    linear-gradient(160deg, #2c2720, #211d18);
  background-attachment: fixed;
}

/* 750 画框：宣纸 + 金线镶边，替代冷灰描边 */
#app {
  background: var(--gf-paper);
  box-shadow:
    0 0 0.4rem rgba(176, 141, 87, 0.35),
    0 0 0 1px rgba(176, 141, 87, 0.25);
}

/* 容器：宣纸 + 极淡墨晕 + 斜向纸纹（极低透明，不显噪） */
.container {
  color: var(--gf-ink);
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(33, 30, 26, 0.045), transparent 70%),
    repeating-linear-gradient(135deg,
      rgba(140, 120, 90, 0.022) 0 2px, transparent 2px 6px),
    var(--gf-paper);
}

/* ===================== 品牌 / 标题 ===================== */

.brand-logo {
  color: var(--gf-ink);
  letter-spacing: 0.1rem;
  padding-bottom: 0.12rem;
  position: relative;
}
/* 朱砂「钤印」下划：仿印章钤痕 */
.brand-logo::after {
  content: '';
  display: block;
  width: 0.9rem;
  height: 0.04rem;
  margin: 0.1rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gf-cinnabar), transparent);
  border-radius: 0.04rem;
}

.brand-title {
  font-family: "PangMenZhengDao", serif;
  color: var(--gf-cinnabar);
  letter-spacing: 0.06rem;
}

.brand-subtitle {
  color: var(--gf-ink-faint);
  letter-spacing: 0.04rem;
}

/* 手写体严格限定：仅 卦名 / 卦标题 / 预览卦名（其余文字一律继承思源宋体） */
.gua-title,
.gua-title-name,
.gua-name,
.preview-name {
  font-family: "PangMenZhengDao", 'Source Han Serif SC', 'Songti SC', serif;
}

.title        { color: var(--gf-ink); }
.gua-title,
.gua-title-name,
.gua-name     { color: var(--gf-ink); }
.gua-title-prefix,
.gua-name.changed { color: var(--gf-cinnabar); }
.section-title,
.content-title,
.preview-title,
.pay-notice-title { color: var(--gf-cinnabar); }
.step-title    { color: var(--gf-cinnabar); }

.version-text,
.countdown-text { color: var(--gf-ink-faint); }

/* ===================== 卡片 ===================== */

.card,
.disclaimer-card,
.payment-card,
.result-card,
.ai-gua-content,
.pay-notice,
.history-item,
.empty-state {
  background: var(--gf-paper-card);
  border: 1px solid rgba(176, 141, 87, 0.55);
  border-radius: 0.14rem;
  box-shadow: var(--gf-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* 卡片内细分隔：朱砂渐隐线，替代生硬灰线 */
.divider {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, rgba(176, 141, 87, 0.6), transparent);
}
/* 卦源徽标细分隔也统一为金线 */
.gua-source-badge { border-bottom: 1px solid rgba(176, 141, 87, 0.4); }
.gua-source-badge .text {
  color: var(--gf-ink-faint);
  border: 1px solid var(--gf-gold-soft);
  background: rgba(176, 141, 87, 0.06);
}

/* ===================== 预览区（朱砂印章式）=====================
   外层 .preview-container 仅作 flex 布局，取消卡片视觉，
   以避免与内层 .preview-section 形成“卡片套卡片”。 */
.preview-container {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* 内层 = 一方朱砂钤印：双层边框 + 淡朱砂影 + 题头细线 */
.preview-section {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(158, 43, 37, 0.04), transparent 70%),
    var(--gf-paper-card);
  border: 1px solid var(--gf-cinnabar);
  border-radius: 0.1rem;
  box-shadow:
    0 0.04rem 0.16rem rgba(158, 43, 37, 0.20),
    inset 0 0 0 0.04rem var(--gf-paper-card),
    inset 0 0 0 0.06rem rgba(158, 43, 37, 0.38);
  position: relative;
}

/* 题头细线，仿印鉴题款 */
.preview-header { margin-bottom: 0.12rem; }
.preview-title {
  border-bottom: 1px solid rgba(158, 43, 37, 0.3);
  padding-bottom: 0.06rem;
}

/* ===================== 按钮（新国风 · 朱砂印章体系）=====================
   全按钮共享：印章折角（左上+右下两枚 L 形折角，currentColor 自适应）+
   轻按压反馈。层级：primary(朱砂实底) > ai(鎏金) > secondary(描边印章)；
   danger 用于「我确认都看明白了 / 清空」等强提示。 */
.btn,
.modal-btn {
  position: relative;
}
.btn::before, .btn::after,
.modal-btn::before, .modal-btn::after {
  content: '';
  position: absolute;
  width: 0.14rem;
  height: 0.14rem;
  border: 1.5px solid currentColor;
  opacity: 0.5;
  pointer-events: none;
}
.btn::before, .modal-btn::before { top: 0.08rem; left: 0.08rem; border-right: none; border-bottom: none; }
.btn::after,  .modal-btn::after  { bottom: 0.08rem; right: 0.08rem; border-left: none; border-top: none; }

.btn {
  border-radius: 0.14rem;
  letter-spacing: 0.08rem;
  font-weight: 600;
}
.btn:hover  { transform: translateY(-1px); }   /* 触屏无 hover，桌面更灵动 */

/* 主行动：朱砂实底印章（生成卦象 / 确定） */
.btn-primary {
  background: linear-gradient(135deg, #a8332b, #8c231d);
  color: #f7e9c9;
  border: 1px solid #7d211c;
  box-shadow:
    0 0.06rem 0.2rem rgba(158, 43, 37, 0.42),
    inset 0 0 0 0.02rem rgba(247, 233, 201, 0.45),
    inset 0 0.05rem 0.12rem rgba(247, 233, 201, 0.12);
}

/* 次行动：描边印章（暖纸底 + 朱砂描边 + 内细线） */
.btn-secondary {
  background: linear-gradient(180deg, #fbf6ea, #f3e8d2);
  color: var(--gf-cinnabar);
  border: 1.5px solid rgba(158, 43, 37, 0.6);
  box-shadow:
    0 0.04rem 0.14rem rgba(60, 40, 20, 0.14),
    inset 0 0 0 0.02rem rgba(255, 255, 255, 0.6);
}

/* 付费 AI 解读：鎏金印章（尊享层级） */
.btn-ai {
  background: linear-gradient(135deg, #cba968, #a8854c);
  color: #2a251f;
  border: 1px solid #93713f;
  box-shadow:
    0 0.06rem 0.2rem rgba(168, 133, 76, 0.42),
    inset 0 0 0 0.02rem rgba(255, 255, 255, 0.4);
}
.btn-ai-unlocked {
  background: linear-gradient(135deg, #b8453c, #9e2b25);
  color: #f7e9c9;
  border: 1px solid #7d211c;
  box-shadow:
    0 0.06rem 0.2rem rgba(158, 43, 37, 0.42),
    inset 0 0 0 0.02rem rgba(247, 233, 201, 0.45);
}

/* 警示强提示：深朱砂实底（我确认都看明白了 / 清空） */
.btn-danger {
  background: linear-gradient(135deg, #b03a2e, #8c231d);
  color: #f7e9c9;
  border: 1px solid #7d211c;
  box-shadow:
    0 0.06rem 0.2rem rgba(158, 43, 37, 0.42),
    inset 0 0 0 0.02rem rgba(247, 233, 201, 0.45);
}

/* AI 解读页注入按钮：原 style.css 蓝色渐变 → 统一鎏金印章 */
.btn-interpret {
  background: linear-gradient(135deg, #cba968, #a8854c);
  color: #2a251f;
  border: 1px solid #93713f;
  box-shadow:
    0 0.06rem 0.2rem rgba(168, 133, 76, 0.42),
    inset 0 0 0 0.02rem rgba(255, 255, 255, 0.4);
}

/* 禁用态：纸灰，无角标 */
.btn[disabled] {
  background: var(--gf-paper-deep) !important;
  color: var(--gf-ink-faint) !important;
  border: 1px solid rgba(140, 129, 112, 0.4) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.btn[disabled]::before,
.btn[disabled]::after { display: none; }

/* ===================== 卦象爻线（墨笔）===================== */

.yang-line,
.yin-line::before,
.yin-line::after,
.preview-yang-line,
.preview-yin-line::before,
.preview-yin-line::after {
  background-color: var(--gf-ink);
  border-radius: 0.01rem;
}

.preview-name { color: var(--gf-ink); font-family: "PangMenZhengDao", serif; }

/* 卦辞 / 爻辞正文 */
.gua-content,
.yao-text,
.content-text,
.step-text,
.clause-text,
.history-question,
.history-time { color: var(--gf-ink-soft); }

.clause-bullet { color: var(--gf-cinnabar); }
.hint,
.gua-content-hint,
.day-info { color: var(--gf-ink-faint); }

/* ===================== 底部操作栏 ===================== */

.bottom-bar {
  background: rgba(251, 246, 234, 0.96);
  border-top: 1px solid rgba(176, 141, 87, 0.5);
  box-shadow: var(--gf-shadow-up);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.bottom-bar-center { align-items: center; }

/* ===================== 弹窗 / Toast ===================== */

.modal-mask { background: rgba(33, 29, 24, 0.55); }
.modal-dialog {
  background: var(--gf-paper-card);
  border: 1px solid var(--gf-gold);
  border-radius: 0.16rem;
  box-shadow: 0 0.2rem 0.6rem rgba(33, 29, 24, 0.4),
              inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.modal-btn-confirm {
  background: linear-gradient(135deg, #a8332b, #8c231d);
  color: #f7e9c9;
  border: 1px solid #7d211c;
  box-shadow:
    0 0.06rem 0.2rem rgba(158, 43, 37, 0.42),
    inset 0 0 0 0.02rem rgba(247, 233, 201, 0.45);
}
.modal-btn-cancel {
  background: linear-gradient(180deg, #fbf6ea, #f3e8d2);
  color: var(--gf-cinnabar);
  border: 1.5px solid rgba(158, 43, 37, 0.6);
  box-shadow:
    0 0.04rem 0.14rem rgba(60, 40, 20, 0.14),
    inset 0 0 0 0.02rem rgba(255, 255, 255, 0.6);
}
/* 单按钮弹窗（仅有「确定」时，app.js 加 modal-btn-single） */
.modal-btn-single {
  background: linear-gradient(135deg, #a8332b, #8c231d) !important;
  color: #f7e9c9 !important;
  border: 1px solid #7d211c !important;
}

.toast {
  background: var(--gf-paper-card);
  color: var(--gf-ink);
  border: 1px solid var(--gf-gold);
  border-left: 0.06rem solid var(--gf-cinnabar);
  box-shadow: var(--gf-shadow);
}
.toast.toast-success { border-left-color: var(--gf-jade); }
.toast.toast-error   { border-left-color: var(--gf-cinnabar-deep); }

/* ===================== 付费 / 邀请码 ===================== */

.payment-overlay { background: rgba(33, 29, 24, 0.6); }
.payment-card {
  background: var(--gf-paper-card);
  border: 1px solid var(--gf-gold);
  border-radius: 0.16rem;
}
.payment-price-value { color: var(--gf-cinnabar); }
.payment-direct-btn {
  background: linear-gradient(135deg, #c9a96a, #a8854c);
  color: #2a251f;
  border: none;
}
.payment-promo-banner {
  background: rgba(158, 43, 37, 0.08);
  border: 1px solid rgba(158, 43, 37, 0.3);
}
.pay-notice {
  border-left: 0.06rem solid var(--gf-cinnabar);
}
.pay-notice-free { color: var(--gf-gold-deep); }
.pay-notice-text { color: var(--gf-ink-soft); }

.invite-redeem-box,
.invite-divider span { color: var(--gf-ink-soft); }
.invite-redeem-btn {
  background: linear-gradient(135deg, #c9a96a, #a8854c);
  color: #2a251f;
  border: none;
}

/* ===================== 焦点可见（无障碍）===================== */

button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
.invite-code-input:focus-visible {
  outline: 2px solid var(--gf-cinnabar);
  outline-offset: 2px;
}

/* ===================== 入场动效（轻）===================== */

@keyframes gf-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.card,
.result-card,
.gua-content,
.preview-section,
.pay-notice,
.history-item {
  animation: gf-rise 0.45s ease both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
  .card, .result-card, .gua-content, .preview-section,
  .pay-notice, .history-item { animation: none; }
}