/*
 * wp前端/css/app.css
 * ─────────────────────────────────────────────────────────────────────────────
 * WP 大六壬 AI 解读前端 — 设计系统 & 全局样式
 *
 * 职责范围：
 *   1. CSS 自定义属性（设计 token）—— 颜色、字体、间距、圆角、阴影
 *   2. 基础 reset（box-sizing、margin/padding 归零、滚动行为）
 *   3. #ai-app 容器基础布局
 *   4. 通用原子类：.btn（按钮）、.card（卡片）、.divider（金色分隔线）
 *   5. 响应式断点：移动优先，断点 768px 切换 PC 布局
 *
 * 不在此文件中：
 *   - 具体业务页样式（起盘页、支付页、历史页等）—— 由后续 Task 各自追加
 *   - WP 主题覆盖样式 —— 部署到 WP 后在子主题 functions.php 中 enqueue
 *
 * 色值来源：D:\000\玄学出海\workpress页面\CLAUDE.md §5 设计系统规范（已核实）
 * 字体来源：Lora 衬线体 —— 已自托管至 wp前端/fonts/（见下方 §0 @font-face，E 阶段从 Google Fonts 迁出）。
 * ─────────────────────────────────────────────────────────────────────────────
 * 物理隔离说明：
 *   本目录 wp前端/ 与 前端/（uni-app）及 后端/ 完全物理隔离，
 *   不引用、不共享任何其他目录的样式文件。
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════════
   §0  自托管字体 @font-face（Lora 衬线体）

   E 阶段收尾（B1 红队 M2）：从 Google Fonts CDN 迁移为本地自托管，原因——
     1. 供应链：去除对 fonts.googleapis.com / fonts.gstatic.com 的第三方运行时依赖
        （CDN 不可达/被投毒不影响本前端；与 Vue 自托管 js/vendor/ 同口径）。
     2. GDPR：Google Fonts 在浏览器请求字体时会把用户 IP 发往 Google 服务器
        （已有德国法院判例认定违反 GDPR）；该站装 Complianz 面向 EU，自托管彻底规避。
     3. 大陆访问：Google Fonts 在大陆不稳定，自托管同源加载稳定。

   字体文件（wp前端/fonts/，本 css 在 css/ 故用相对路径 ../fonts/）：
     - lora-latin.woff2     （拉丁基础 + 常用标点/货币符号，37788 字节）
     - lora-latin-ext.woff2 （拉丁扩展：欧洲变音/越南语等，20088 字节）
   均取自 Google Fonts Lora v37 官方 woff2 子集（latin / latin-ext）。
   仅取这两个子集：en 界面文案落在 latin/latin-ext；🔴 Lora 本就不含 CJK 字形，
   zh 中文按 --font-serif 回退到 'Georgia'/系统 serif（与迁移前 Google Fonts 行为完全一致，无退化）。
   400/600 两字重在 Google Fonts 子集里共享同一 woff2（Lora 为可变字体），故各子集仅一个文件，
   通过 font-weight 声明区分；font-display:swap 加载期回退 serif 不阻塞渲染（同迁移前）。
   ⚠️ 部署：fonts/ 目录须随静态资源一并部署（与 css/ js/ 平级）；woff2 由 WP 同源提供，无跨域。
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lora 400（latin 子集） */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-latin.woff2') format('woff2');
  /* unicode-range 与 Google Fonts latin 子集一致：基础拉丁 + 常用标点/货币/箭头符号 */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora 400（latin-ext 子集：欧洲变音/越南语等扩展拉丁） */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 600（latin 子集；与 400 共享同一 woff2 文件，仅 font-weight 区分） */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora 600（latin-ext 子集） */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §1  设计 Token（CSS 自定义属性）
   所有颜色、字体、布局数值均定义于 :root，
   业务组件通过 var(--xxx) 引用，方便全局主题切换。
   ═══════════════════════════════════════════════════════════════════════════ */
:root {

  /* ── 颜色系统（2026-06-15 统一到 WP 主站青绿主题；值 1:1 套用主站 astra-child/css/global.css :root）
     主站换肤：金棕 → 青绿(teal) + 金作点缀。变量名保持不变（不动 var() 引用，保证功能不受影响）。 ── */

  /* 主色：按钮、分隔线、装饰元素、数字圆圈（青绿，= 主站 --hui-gold） */
  --gold: #15545a;

  /* 深主色：链接、副标题、标签文字、证言署名（深青，= 主站 --hui-gold-dark） */
  --gold-deep: #0e3c41;

  /* 金点缀色：少量高级点缀（hero ✦ 装饰 / 个别强调），= 主站 --hui-gold-light（旧金降级为点缀） */
  --gold-accent: #c9a44b;

  /* 深色：主标题、正文强调（墨青黑，= 主站 --hui-brown-dark） */
  --brown: #0c2f33;

  /* 主正文颜色（墨青黑，= 主站 --hui-brown-body） */
  --text: #1d2b2c;

  /* 次文字色：描述文字、卡片正文（青灰，= 主站 --hui-brown-sub） */
  --text-secondary: #42585a;

  /* 弱文字色：占位/禁用/极次要文字（青灰，与 --text-secondary 同源，统一收口散落的灰棕弱文字） */
  --text-muted: #42585a;

  /* 强调色：小标题强调（青，= 主站 --hui-brown-accent） */
  --text-accent: #2f5a5e;

  /* 卡片背景（冷青白，= 主站 --hui-cream） */
  --cream: #f3f7f6;

  /* 暖白背景：引用块、标签背景、页面主背景（冷青白，= 主站 --hui-warm-white） */
  --warm: #eaf2f1;

  /* 抬升表面色：略亮于卡片的浮起表面（冷青白，统一收口散落的近白底） */
  --surface-raised: #f3f7f6;

  /* 深一档暖白：CTA 渐变终止色（青白，= 主站 --hui-cta-end） */
  --warm-deep: #dceae7;

  /* 边框色：分隔线、输入框边框（青灰，= 主站 --hui-border） */
  --border: #cfe0dd;

  /* 浅边框：标签边框、CTA 内分隔线（浅青，= 主站 --hui-border-light） */
  --border-light: #dce8e6;

  /* CTA 渐变背景：行动号召区域（起止色均走 token，便于全局主题切换） */
  --cta-gradient: linear-gradient(135deg, var(--warm), var(--warm-deep));

  /* 错误色：表单验证、错误提示 */
  --error: #b91c1c;

  /* 成功色：操作成功提示 */
  --success: #166534;

  /* ── 状态徽章配色（badge 专用，统一收口于 token，避免散落魔法色） ── */

  /* 成功徽章：浅绿底 + 绿边（对应 --success 文字色） */
  --badge-success-bg: #dcfce7;
  --badge-success-border: #bbf7d0;

  /* 等待徽章：浅黄底 + 棕黄文字 + 琥珀边 */
  --badge-pending-bg: #fef9c3;
  --badge-pending-text: #854d0e;
  --badge-pending-border: #fde68a;

  /* ── 字体系统 ── */

  /* 主字体栈：Lora 衬线体（已自托管,见 §0 @font-face） + Georgia 本地回退 + 系统 serif 兜底
     🔴 zh 中文走回退（Lora 不含 CJK）：'Georgia'/系统 serif,与迁移前一致 */
  --font-serif: 'Lora', 'Georgia', serif;

  /* 行高：宽松排版，适合长文阅读 */
  --line-height: 1.8;

  /* ── 布局尺寸 ── */

  /* 页面容器最大宽度（与 WP 主题 1000px 对齐） */
  --max-width: 1000px;

  /* 正文段落推荐宽度（每行约 65-70 字符，阅读舒适区） */
  --content-width: 780px;

  /* 标准内容内边距（移动端） */
  --page-padding-mobile: 16px;

  /* 标准内容内边距（PC 端） */
  --page-padding-desktop: 24px;

  /* ── 圆角 ── */

  /* 按钮圆角：胶囊形，与 WP 主题 CTA 按钮一致 */
  --radius-btn: 30px;

  /* 卡片圆角 */
  --radius-card: 8px;

  /* 小元素圆角（标签、徽章） */
  --radius-sm: 4px;

  /* ── 阴影 ── */

  /* 卡片阴影：柔和浮起感 */
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.04);

  /* 悬停阴影：轻微加深 */
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.08);

  /* ── 过渡动画 ── */

  /* 标准交互过渡时长 */
  --transition: 0.2s ease;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2  基础 Reset
   消除浏览器默认样式差异，建立一致的盒模型基准。
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 全局盒模型：border-box
 * 让 width/height 包含 padding 和 border，避免布局计算错误。
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * HTML & Body 基础重置：
 * - margin/padding 归零（消除浏览器默认 body margin）
 * - 字体、行高、颜色统一
 * - 背景色使用暖白，与 WP 主题奶油色系统一
 * - scroll-behavior: smooth 支持锚点平滑滚动
 */
html {
  scroll-behavior: smooth;
  font-size: 16px; /* 基准字号，rem 参考值 */
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 1rem;          /* 16px */
  line-height: var(--line-height);
  color: var(--text);
  background-color: var(--warm);
  -webkit-font-smoothing: antialiased;   /* macOS/iOS 字体平滑 */
  -moz-osx-font-smoothing: grayscale;   /* Firefox macOS 字体平滑 */
}

/*
 * 标题元素：统一颜色、字重
 */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  color: var(--brown);
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.3;
}

/*
 * 段落：重置默认 margin
 */
p {
  margin: 0 0 1em;
}

/*
 * 链接：使用深金色，与 WP 主题链接色一致
 */
a {
  color: var(--gold-deep);
  text-decoration: underline;
  transition: color var(--transition);
}

a:hover,
a:focus {
  color: var(--gold);
}

/*
 * 图片：默认块级，最大宽度 100%，防止溢出
 */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * 列表：重置默认缩进（具体样式由业务组件定义）
 */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * 表单元素：继承字体（浏览器默认不继承）
 */
input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
}

/*
 * 分隔线（<hr>）：使用品牌边框色
 */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5em 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §3  #ai-app 容器
   Vue 3 应用挂载根容器的基础布局。
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 应用根容器：
 * - 高度自适应内容（min-height: auto）：本前端嵌入 WP Astra 页面的内容区，
 *   外层已有 Astra 的 header/footer/面包屑。若此处写死 min-height:100vh，
 *   会在 header+footer 之外再撑出整屏高度，内容稀少的页面（落地页/登录态）
 *   底部出现大片空白。故让容器随内容自然撑高，由 WP 页面整体决定视口占用。
 * - 背景色与 body 一致，覆盖 WP 主题可能注入的背景色
 * - display: flex + flex-direction: column 支持页头/内容/页脚三段式布局
 */
#ai-app {
  min-height: auto;
  background-color: var(--warm);
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: var(--font-serif);
}

/*
 * 骨架占位（Loading Placeholder）：
 * 在 Vue 挂载完成前显示，挂载后被组件树替换，自动消失。
 */
.ai-app-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 40px 16px;
}

.ai-app-loading__text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

/*
 * 页面主内容区容器（.ai-page-content）：
 * 居中布局，左右 padding 适配移动端。
 * PC 端通过媒体查询加宽 padding。
 */
.ai-page-content {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px var(--page-padding-mobile);
  /* 在 #ai-app 这个纵向 flex 容器内占据可伸展空间；
     #ai-app 已改为 min-height:auto，故此处不强制撑满视口，
     仅在同列存在固定高页头/页脚时把它们顶向两端。 */
  flex: 1 0 auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §4  通用原子类 — 按钮（.btn）
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 基础按钮样式：
 * 胶囊形（border-radius 30px），与 WP 主题 CTA 按钮风格一致。
 * display: inline-flex 支持内部图标垂直居中。
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;                         /* 图标与文字间距 */
  padding: 14px 40px;               /* 与 WP 主题按钮 padding 一致 */
  border-radius: var(--radius-btn); /* 胶囊圆角 30px */
  border: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;            /* 覆盖 <a> 的下划线 */
  transition:
    background-color var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
  white-space: nowrap;
}

/* 禁用/不可点击时的样式 */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/*
 * 主按钮（Primary）：金色背景，深棕文字
 * 用于页面主要 CTA（提交、支付、继续等）
 */
.btn--primary {
  background-color: var(--gold);
  color: #ffffff;               /* 白字：青绿底白字，对齐主站 .hui-btn（青绿底深字对比不足） */
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--gold-deep);
  color: #ffffff;               /* hover 深青底白字，对齐主站 */
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
  outline: none;
}

/*
 * 次级按钮（Secondary）：透明背景 + 金色边框
 * 用于次要操作（取消、返回等）
 */
.btn--secondary {
  background-color: transparent;
  color: var(--gold-deep);
  border: 2px solid var(--gold);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--gold);
  color: #ffffff;               /* hover 青绿底白字，对齐主站 */
  outline: none;
}

/*
 * 幽灵按钮（Ghost）：纯文字，无边框无背景
 * 用于低优先级操作（"了解更多" 等）
 */
.btn--ghost {
  background-color: transparent;
  color: var(--text-secondary);   /* 次要操作（close/取消）：低调青灰，不抢主色 */
  padding: 14px 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn--ghost:hover,
.btn--ghost:focus,
.btn--ghost:focus-visible {
  color: var(--text);   /* hover 文字加深为墨青 */
  outline: none;
  /* 🔴 关键：本规则【不带 #ai-app 前缀】，因为多个弹窗(含 account/DeleteMyData)已 <Teleport to="body">
   *    脱离 #ai-app 容器，#ai-app 前缀的规则对它们无效。
   *    Astra 父主题 inline-css 给所有 button:hover/:focus 设金色 background/border-color
   *    (var(--ast-global-color-1))，ghost 透明按钮会露出金色。此处用淡青灰底压住金色 + 提供低调反馈。 */
  background-color: rgba(21, 84, 90, 0.08) !important;   /* 淡青灰底：低调 hover 反馈（主色8%透明，非金色） */
  border-color: transparent !important;
  text-decoration-color: var(--text);
}

/*
 * 按钮尺寸变体
 */

/* 小尺寸按钮（标签、内联操作） */
.btn--sm {
  padding: 8px 20px;
  font-size: 0.875rem;
}

/* 大尺寸按钮（Hero 区域主 CTA） */
.btn--lg {
  padding: 18px 52px;
  font-size: 1.1rem;
}

/* 全宽按钮（移动端表单提交） */
.btn--full {
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §5  通用原子类 — 卡片（.card）
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 基础卡片：
 * - 奶油白背景（#f3f7f6），与 WP 主题服务卡片一致
 * - 顶部 3px 金色装饰线（品牌标志性视觉元素）
 * - 柔和阴影 + 圆角 8px
 */
.card {
  background-color: var(--cream);
  border-radius: var(--radius-card);          /* 8px */
  border-top: 3px solid var(--gold);          /* 顶部金色装饰线 */
  box-shadow: var(--shadow-card);             /* 0 4px 14px rgba(0,0,0,0.04) */
  padding: 24px;
  transition: box-shadow var(--transition), transform var(--transition);
}

/* 卡片悬停效果（可选，通过 .card--hoverable 启用） */
.card--hoverable:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/*
 * 证言卡片变体：左边框替代顶部边框
 * 与 WP 主题证言区块样式一致
 */
.card--testimonial {
  border-top: none;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/*
 * 扁平卡片变体：无阴影，仅用边框区分
 * 适合列表内的条目卡片
 */
.card--flat {
  box-shadow: none;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §6  通用原子类 — 金色分隔线（.divider）
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 品牌金色短分隔线：
 * 60px 宽、3px 高，与 WP 主题 Section 标题下方装饰线一致。
 * 常用于 Section 标题居中对齐时，与标题同样居中。
 */
.divider {
  width: 60px;
  height: 3px;
  background-color: var(--gold);
  border: none;
  margin: 12px 0;
}

/* 居中版分隔线（配合 .text-center 使用） */
.divider--center {
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §7  通用原子类 — 徽章 / 标签（.badge）
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 内联小标签：
 * 用于状态显示（"Pending Review"、"Answered" 等）
 */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.03em;
  border: 1px solid var(--border-light);
  background-color: var(--warm);
  color: var(--text-accent);
}

/* 金色强调徽章（重要状态） */
.badge--gold {
  background-color: var(--gold);
  color: #ffffff;               /* 青绿底徽章白字，对齐主站徽章 */
  border-color: var(--gold);
}

/* 成功状态徽章 */
.badge--success {
  background-color: var(--badge-success-bg);
  color: var(--success);
  border-color: var(--badge-success-border);
}

/* 等待状态徽章 */
.badge--pending {
  background-color: var(--badge-pending-bg);
  color: var(--badge-pending-text);
  border-color: var(--badge-pending-border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8  通用工具类（布局辅助）
   ═══════════════════════════════════════════════════════════════════════════ */

/* 文本对齐 */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* 文本颜色 */
.text-gold        { color: var(--gold); }
.text-gold-deep   { color: var(--gold-deep); }
.text-brown       { color: var(--brown); }
.text-secondary   { color: var(--text-secondary); }
.text-accent      { color: var(--text-accent); }

/* 字体大小 */
.text-sm  { font-size: 0.875rem; }
.text-lg  { font-size: 1.125rem; }
.text-xl  { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }

/* 字重 */
.font-normal   { font-weight: 400; }
.font-semibold { font-weight: 600; }

/* 间距（Margin / Padding 常用快捷类） */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 8px; }
.mt-2  { margin-top: 16px; }
.mt-3  { margin-top: 24px; }
.mt-4  { margin-top: 32px; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 8px; }
.mb-2  { margin-bottom: 16px; }
.mb-3  { margin-bottom: 24px; }
.mb-4  { margin-bottom: 32px; }

/* Flex 快捷 */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1  { gap: 8px; }
.gap-2  { gap: 16px; }
.gap-3  { gap: 24px; }
.gap-4  { gap: 32px; }

/* 宽度 */
.w-full  { width: 100%; }
.w-auto  { width: auto; }

/* 可见性辅助 */
.sr-only {
  /* 屏幕阅读器可见，视觉上隐藏（无障碍辅助文本） */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §9  响应式断点（移动优先 Mobile First）
   断点：768px — 小于为手机布局，大于等于为平板/PC 布局
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 768px 以上（平板、PC）：
 * - 加宽页面内边距
 * - 让正文段落回归 780px 宽度限制（在宽屏下不过度拉伸）
 */
@media (min-width: 768px) {

  /* PC 端页面内容区：更宽的内边距 */
  .ai-page-content {
    padding: 40px var(--page-padding-desktop);
  }

  /* PC 端大按钮升级为更大尺寸 */
  .btn--lg {
    padding: 20px 60px;
    font-size: 1.15rem;
  }

  /* PC 端卡片内边距加宽 */
  .card {
    padding: 32px;
  }
}

/*
 * 1000px 以上（宽屏 PC）：
 * - 容器居中显示，左右自动留白
 */
@media (min-width: 1000px) {

  .ai-page-content {
    padding: 48px var(--page-padding-desktop);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §10  WP 主题覆盖（当本前端嵌入 Astra 子主题页面时）
   防止 Astra 全局样式污染 #ai-app 内的组件样式。
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 说明：ul/ol 的重置已在 §2 全局完成，且本前端整页只有一个 #ai-app 根，
 * 故此处不再重复 #ai-app ul/ol（避免纯冗余规则）。
 * 下列仅保留针对 Astra「高优先级选择器」的防穿透重置——这些是 §2 全局
 * 规则压不住的（Astra 用 .entry-content a / .wp-block-button__link 等更高
 * 特异度选择器注入样式），必须用 #ai-app 前缀提高特异度才能覆盖。
 */

/*
 * 防 Astra `.entry-content a` 等高优先级选择器覆盖 #ai-app 内链接颜色，
 * 强制使用本设计系统的金色 token。
 */
#ai-app a {
  color: var(--gold-deep);
}

#ai-app a:hover {
  color: var(--gold);
}

/*
 * 防 Astra `.wp-block-button__link` / 主题按钮样式注入 #ai-app 内的 <button>，
 * 归零默认外观，交由 .btn 系列原子类控制。
 */
#ai-app button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/*
 * ⚠️ 特异度修正：上面的 `#ai-app button`（特异度 0,1,1）会压过 `.btn`（0,1,0），
 * 使 #ai-app 内带 .btn 类的按钮被 reset 抹掉 background/border/padding。
 * 故对 #ai-app 内的 .btn 重新提特异度恢复其设计样式（沿用 §4 的 token）。
 */
#ai-app button.btn {
  border-radius: var(--radius-btn);
  padding: 14px 40px;
}
#ai-app button.btn--primary {
  background-color: var(--gold);
  color: #ffffff;               /* 白字：青绿底白字，对齐主站 .hui-btn（特异度覆盖处同步） */
}
#ai-app button.btn--primary:hover,
#ai-app button.btn--primary:focus-visible {
  background-color: var(--gold-deep);
  color: #ffffff;               /* hover 深青底白字，对齐主站 */
}
#ai-app button.btn--secondary {
  background-color: transparent;
  color: var(--gold-deep);
  border: 2px solid var(--gold);
}
#ai-app button.btn--sm { padding: 8px 20px; }
#ai-app button.btn--lg { padding: 18px 52px; }

/*
 * 年命选择器确认按钮（青绿底）：提特异度确保青绿底白字稳定，
 * 防 `#ai-app button`(background:none, 0,1,1) 压过 .nianming-header-confirm(0,1,0)。
 */
#ai-app .nianming-header-confirm {
  background: var(--gold);
  color: #ffffff;
}
#ai-app .nianming-header-confirm:hover:not(:disabled) {
  background: var(--gold-deep);
  color: #ffffff;
}

/*
 * close/取消等 ghost 按钮：用最高特异度钉死低调中性色，hover 也不跳主色（金/青绿）。
 * 防任何主题或基类规则把 ghost hover 染成 var(--gold)（用户反馈 close hover 金色不搭）。
 */
#ai-app button.btn--ghost {
  color: var(--text-secondary);
  text-decoration-color: var(--text-secondary);   /* 下划线色随文字（防主题把下划线染金） */
  background-color: transparent;
  border-color: transparent;
}
/*
 * 🔴 真凶：Astra 父主题 inline-css 给所有 `button:hover/:focus`(0,1,1) 设
 *   background-color/border-color: var(--ast-global-color-1)（金色），
 *   导致 ghost close 按钮 hover 露出金色【背景/边框】（非文字色，故之前只改 color 无效）。
 * 用 #ai-app button.btn--ghost:hover(1,2,1) 钉死透明背景+透明边框压住它。
 */
#ai-app button.btn--ghost:hover,
#ai-app button.btn--ghost:focus,
#ai-app button.btn--ghost:focus-visible {
  color: var(--text);
  text-decoration-color: var(--text);   /* hover 下划线也保持中性墨青，不跳金 */
  background-color: transparent !important;   /* 压住 Astra button:hover 的金色背景 */
  border-color: transparent !important;       /* 压住 Astra button:hover 的金色边框 */
}

/*
 * 防 Astra 子主题 `.hui-page h1`(global.css color:var(--hui-brown-dark)墨青,特异度0,1,1)
 * 覆盖 hero 主标题 .cast-hero__title(0,1,0) → 标题被强制成墨青叠深青绿底看不见(用户截图问题)。
 * 用 #ai-app 前缀提特异度(1,1,0)恢复金色,与 §16 .cast-hero__title 设计一致。
 */
#ai-app .cast-hero__title {
  color: var(--gold-accent);
}
/*
 * 同理防 Astra `.hui-page p`(color:var(--hui-brown-sub)青灰,0,1,1) 覆盖 hero 副标题/正文(<p>,0,1,0)
 * → 青灰字叠深青绿底看不见(用户截图)。提特异度恢复青白可读色。
 */
#ai-app .cast-hero__subtitle {
  color: rgba(243, 247, 246, 0.82);
}
#ai-app .cast-hero__desc {
  color: rgba(243, 247, 246, 0.78);
}
/*
 * 防 Astra `.hui-page a`(深金) + 本档 §10 `#ai-app a`(--gold-deep) 覆盖 CTA 按钮(<a>)文字
 * → 按钮文字非白(用户反馈"Consult Maya Hui →"按钮文字要白)。提特异度恢复白字(青绿底白字,对齐主站)。
 */
#ai-app a.cast-cta-btn {
  color: #ffffff;
}
#ai-app a.cast-cta-btn:hover {
  color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §11  单页状态机骨架样式（main.js 的顶栏 + 视图容器）
   B3 提供：顶栏 / 视图容器 / loading / error / 占位 的基础排版。
   各业务视图（consent/cast/...）的具体样式由 D 阶段各组件随附。
   ═══════════════════════════════════════════════════════════════════════════ */

/* 状态机根容器：纵向布局，撑满 #ai-app */
#ai-app-root {
  display: flex;
  flex-direction: column;
  min-height: inherit;
}

/* ── 顶栏 ── */
.ai-topbar {
  display: flex;
  align-items: center;
  /* 靠右对齐由 .ai-topbar__brand{margin-right:auto} 实现（三子 brand/actions/lang，
     brand 占左推开右侧操作+语言区）。原 justify-content:space-between 已被 auto margin 覆盖失效，移除。 */
  gap: 16px;
  padding: 14px var(--page-padding-mobile);
  background-color: var(--cream);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  /* 2026-06-03 顶栏粘顶：整页 window 滚动时顶栏吸附页顶不随内容滚走。
     z-index:100 —— 高于内容(ChartCard .cc-card sticky z-index:10)，
     低于所有弹窗遮罩(加购 .ct-modal-overlay / GDPR .dmd-overlay = 1000、Toast = 1200、年命 = 1500、generating overlay = 900)。
     ⚠️ 不可用 1100：会盖住加购弹窗(1000)和 GDPR(1000)破坏本需求弹窗。 */
  position: sticky;
  /* 2026-06-13：粘顶时 top 下移避开 WP 主站固定导航栏 .hui-nav（position:fixed; top:0;
     z-index:1000，滚动后 .hui-nav--scrolled padding:14px + brand-text 1.35rem 约 54px 高）。
     原 top:0 会被 hui-nav(层级 1000>本栏 100) 盖住。桌面取 64px（覆盖滚动态 ~54px + 留间隙），
     移动端(≤767)在 @media 块改 58px（hui-nav 移动 padding:12px 约 50px）。sticky 的 top 仅粘顶时生效，
     不占文档流不产生额外间隙。hui-nav 高度若后续改动需同步此值。 */
  top: 64px;
  z-index: 100;
}

.ai-topbar__brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  margin-right: auto;   /* 推开右侧：brand 左、操作区+语言区靠右（替代原 space-between，适配 lang 移出为独立子元素后的三子布局） */
}

/* 品牌名（Maya Hui / 蓝莲先生） */
.ai-topbar__brand-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brown);
}

/* 产品副标题（Da Liu Ren AI Analysis） */
.ai-topbar__brand-subtitle {
  font-size: 0.8rem;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
}

.ai-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* History 按钮 */
.ai-topbar__btn {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--gold-deep);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
}
/* 🔴 #ai-app + !important 钉死:防 Astra 主题全局 button/a hover 把顶栏文字变白(用户反馈)。
   hover/active 统一用浅金底 rgba(金,0.22)(与性别选中同色)+ 深棕字。 */
.ai-topbar__btn:hover,
.ai-topbar__btn--active,
#ai-app .ai-topbar__btn:hover,
#ai-app .ai-topbar__btn--active,
#ai-app .ai-topbar__btn:focus,
#ai-app .ai-topbar__btn:focus-visible {
  color: var(--brown) !important;
  background-color: rgba(21, 84, 90, 0.22) !important;
}

/* 语言切换按钮（en / zh）—— 分段控件（segmented control）风格，明确呈现为可点按钮。
   用户反馈（2026-06-02）：原样式无边框无底色像纯文本，看不出是按钮选项。
   未选中态：金色描边 + 透明底 + 深金字（一眼可辨是按钮）；选中态见下方 --active。
   #ai-app 提特异度 + !important 防 Astra 主题全局 button 样式渗透（与 .ai-topbar__btn 同款范式）。 */
.ai-topbar__lang-btn,
#ai-app .ai-topbar__lang-btn {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-deep) !important;
  background-color: transparent !important;
  padding: 5px 14px;
  border: 1px solid var(--gold) !important;     /* 金色描边：明确按钮边界 */
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
/* 选中态（--active）：实金底 + 奶油字，强对比突出当前语言；hover/focus 同样高亮。 */
.ai-topbar__lang-btn--active,
.ai-topbar__lang-btn:hover,
#ai-app .ai-topbar__lang-btn--active,
#ai-app .ai-topbar__lang-btn:hover,
#ai-app .ai-topbar__lang-btn:focus,
#ai-app .ai-topbar__lang-btn:focus-visible {
  color: var(--cream) !important;               /* 奶油字（实金底上清晰）*/
  background-color: var(--gold) !important;     /* 实金底：选中态强对比 */
  border-color: var(--gold) !important;
  outline: none;
}

/* 语言切换 wrapper（2026-06-04 从 actions 移出为 .ai-topbar 直接子元素）：
   两语言按钮成组，PC 端跟在操作区右侧（视觉同原状）。 */
.ai-topbar__lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 顶栏手机端响应式（<768）：操作区独占第二行，品牌行右侧放语言切换（用户 2026-06-04）。
   原理：.ai-topbar 是 flex-wrap 容器，三直接子 brand / actions / lang。
   - actions order:3 + width:100% → 强制换到第二行独占。
   - lang order:2 → 留在第一行，brand{margin-right:auto} 把它推到品牌行最右侧。 */
@media (max-width: 767px) {
  /* 2026-06-13：移动端粘顶 top 避开 WP 主站固定导航栏 hui-nav（移动 padding:12px 约 50px 高），
     与 .hui-nav 的 @media(max-width:768px) 断点对齐（767/768 实质等价）。 */
  .ai-topbar {
    top: 58px;
  }
  .ai-topbar__actions {
    order: 3;
    width: 100%;
    flex-wrap: wrap;          /* 操作按钮多时自身可再换行，不溢出 */
  }
  .ai-topbar__lang {
    order: 2;                 /* 第一行品牌右侧 */
  }
  /* brand order 默认 0，在第一行最左；margin-right:auto 把 lang 推到第一行最右 */
}

/* ── 视图容器 ── */
.ai-view-container {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px var(--page-padding-mobile);
}

/* 🔴 cast 起盘视图全宽（去 1000px 限宽 + 去左右 padding，让双栏铺满）。
   仅 cast 视图用此 modifier；其它视图保持上面限宽居中。 */
.ai-view-container--full {
  max-width: none;
  padding: 0;
}

/* 单个视图通用容器 */
.ai-view {
  display: flex;
  flex-direction: column;
}

/* loading / error 视图：居中 */
.ai-view--loading,
.ai-view--error {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 240px;
  gap: 16px;
}

.ai-view__status-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.ai-view__error-text {
  color: var(--error);
  font-size: 1rem;
  max-width: 28em;
}

/* 视图标题 */
.ai-view__title {
  font-size: 1.4rem;
  color: var(--brown);
  margin-bottom: 16px;
}

/* D 阶段占位框（骨架阶段标明各视图待实现的组件） */
.ai-view__placeholder {
  border: 1px dashed var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
  text-align: center;
  color: var(--text-secondary);
  background-color: var(--cream);
  font-size: 0.9rem;
}

/* PC 端顶栏/视图内边距加宽 */
@media (min-width: 768px) {
  .ai-topbar {
    padding: 16px var(--page-padding-desktop);
  }
  .ai-view-container {
    padding: 40px var(--page-padding-desktop);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §12  Picker 组件样式（PickerColumn + DateTimePicker）
   C1 阶段并入：css/app.css 统一 enqueue，无运行时 createElement('style') 注入。

   Token 映射说明（对应旧 SPA DateTimePicker.js 内联 CSS 的替换）：
     旧 --text-muted  → 本项目 --text-secondary（次文字色）
     旧 --wx-fire     → 本项目 --gold（品牌金色，高亮选中项）
     旧 --bg          → 本项目 --cream（奶油白，遮罩渐变起始色）
     旧 --border-inner→ 本项目 --border（边框色）
     旧 --font-kai    → 本项目 --font-serif（Lora 衬线体）
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 日期时间选择器容器：
 * 包裹 5 列（年/月/日/时/分），统一高度、防止文字选中、禁用默认触摸滚动。
 */
.dt-picker {
  padding: 4px 0;
}

.dt-picker-cols {
  display: flex;
  height: 180px;           /* ITEM_HEIGHT(36) × VISIBLE_COUNT(5) = 180px */
  user-select: none;       /* 防止拖动时意外选中文字 */
  touch-action: none;      /* 接管触摸事件，防止页面随手指滚动 */
}

/*
 * 单列容器：
 * flex: 1 均分宽度，position: relative 供遮罩/指示线绝对定位，
 * overflow: hidden 裁剪超出可见区域的选项。
 */
.picker-col {
  flex: 1;
  position: relative;
  overflow: hidden;
  font-family: var(--font-serif); /* 使用 Lora 衬线体，与整体风格统一 */
  font-size: 16px;
}

/*
 * 滑动列表：
 * position: relative 支持 translateY 动画；
 * will-change: transform 提示浏览器提前开启 GPU 合成层，动画更流畅。
 */
.picker-list {
  position: relative;
  will-change: transform;
}

/*
 * 单个选项：
 * 固定行高与 ITEM_HEIGHT 对应（36px）；
 * 非选中态使用次文字色（--text-secondary），视觉上向中心聚焦。
 */
.picker-item {
  height: 36px;
  line-height: 36px;
  text-align: center;
  color: var(--text-secondary);      /* 非选中态：次文字色（旧 --text-muted） */
  transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
}

/*
 * 选中态选项：
 * 使用品牌金色（--gold）+ 略大字号 + 加粗，与未选中项形成层次对比。
 */
.picker-item.active {
  color: var(--gold);                /* 选中高亮：品牌金色（旧 --wx-fire） */
  font-size: 18px;
  font-weight: bold;
}

/*
 * 列头标签（年/月/日/时/分）：固定在每列顶部，整列只渲染一次（性能：避免
 * 每个选项各带一个 suffix span 导致语言切换时长列表全量重渲染卡顿）。
 * 绝对定位在列顶部、浮于遮罩之上；居中对齐与选项列对齐。
 * 英文环境 suffix 为空串 → 显示空白，但保留固定高度防止中英切换时布局抖动。
 */
.picker-col-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-deep);           /* 列头用深金色，与选项数字区分 */
  pointer-events: none;              /* 不拦截滑动事件 */
  z-index: 3;                        /* 浮于遮罩(z-index:2)之上 */
}

/*
 * 上下遮罩层：
 * 渐变遮住顶部/底部选项，形成透视消失的滑轮视觉效果。
 * pointer-events: none 确保遮罩不拦截触摸/鼠标事件。
 * z-index: 2 覆盖在选项列表之上，低于指示线（z-index: 1 of indicator 需注意）。
 */
.picker-mask {
  position: absolute;
  left: 0;
  right: 0;
  height: 72px;                      /* ITEM_HEIGHT(36) × 2 = 72px */
  pointer-events: none;
  z-index: 2;
}

/* 顶部遮罩：从上方奶油白渐变到透明 */
.picker-mask-top {
  top: 0;
  background: linear-gradient(to bottom, var(--cream) 30%, transparent);
  /* --cream（奶油白）替代旧 --bg（背景色） */
}

/* 底部遮罩：从下方奶油白渐变到透明 */
.picker-mask-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--cream) 30%, transparent);
}

/*
 * 选中指示线：
 * 上下各一条细线框住中间选项，半透明金色背景强化选中感。
 * 定位在列高中央，高度等于一个选项高度（36px）。
 */
.picker-indicator {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 36px;
  transform: translateY(-50%);
  border-top: 1px solid var(--border);    /* 边框色（旧 --border-inner） */
  border-bottom: 1px solid var(--border);
  background: rgba(21, 84, 90, 0.06);   /* 品牌主色 --gold: #15545a（青绿）的 6% 透明度 */
  pointer-events: none;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §13  CitySearchPicker 城市选择器组件样式（C2 阶段）
   作用域限定在 .city-search-* 与 .city-cascade-* 选择器前缀，防止全局污染。

   设计 Token 映射：
     主边框色      → var(--border)
     输入框背景     → var(--cream)
     次文字色      → var(--text-secondary)
     金色高亮      → var(--gold) / var(--gold-deep)
     错误色        → var(--error)
     成功色        → var(--success)
     卡片圆角      → var(--radius-card)  8px
     小圆角        → var(--radius-sm)    4px
     过渡动画      → var(--transition)   0.2s ease
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * 组件根容器：
 * 纵向布局，与表单其他字段保持一致的间距。
 * position: relative 供搜索下拉绝对定位使用。
 */
.city-search-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  font-family: var(--font-serif);
}

/* ── 搜索框区 ── */

/*
 * 搜索区容器：含标签 + 输入行
 */
.city-search-section {
  position: relative;
}

/*
 * 搜索框标签：与表单其他字段标签风格一致（金深色、小字号）
 */
.city-search-label {
  display: block;
  font-size: 0.875rem;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/*
 * 输入框容器：position: relative 供内部绝对定位元素（spinner/clear 按钮）使用
 */
.city-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/*
 * 搜索输入框：
 * 全宽、奶油白背景、金色边框、Lora 字体，与整体设计系统一致。
 * padding-right 留给 spinner/clear 按钮空间。
 */
.city-search-input {
  width: 100%;
  padding: 10px 40px 10px 12px;          /* 右侧留 40px 给 spinner/clear 按钮 */
  background-color: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.city-search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.75;
}

.city-search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(21, 84, 90, 0.15);   /* 金色光晕，与 Astra 主题风格一致 */
}

/*
 * 搜索中旋转 spinner：
 * 纯 CSS 环形动画，不依赖图标库。
 * 绝对定位在输入框右侧内部。
 */
.city-search-spinner {
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: city-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* 内联（非绝对定位）的 spinner：用于级联区状态行内 */
.city-search-spinner--inline {
  position: static;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes city-spin {
  to { transform: rotate(360deg); }
}

/*
 * 清空按钮（输入框内右侧 ×）：
 * 小圆形、透明背景、悬停金色高亮。
 */
.city-search-clear {
  position: absolute;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--transition), background-color var(--transition);
}

.city-search-clear:hover,
.city-search-clear:focus-visible {
  color: var(--brown);
  background-color: var(--warm);
  outline: none;
}

/*
 * 搜索结果下拉列表：
 * 绝对定位在输入框正下方，宽度与输入框一致，带阴影浮起感。
 * 最大高度 280px，超出内容可滚动。
 * z-index: 100 确保覆盖其他表单元素。
 */
.city-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background-color: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover);
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  /* 平滑显示（与输入框过渡保持一致） */
}

/*
 * 搜索结果项：
 * 悬停金色背景，光标手形，键盘可聚焦（tabindex 在模板中设置）。
 */
.city-search-result-item {
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background-color var(--transition);
}

.city-search-result-item:last-child {
  border-bottom: none;
}

.city-search-result-item:hover {
  background-color: rgba(21, 84, 90, 0.08);   /* 金色 8% 透明度浅底 */
}

/* 城市名 + 国家代码行 */
.city-search-result-name {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}

/* 国家代码标签（如 CN US）：次文字色、较小字号 */
.city-search-result-country {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-left: 6px;
  font-weight: 400;
}

/* 行政区 + 时区 + 坐标元信息行 */
.city-search-result-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  line-height: 1.4;
}

/* 行政区（州/省）/ 时区标识：无额外样式，与坐标同行靠 .city-search-result-meta 的
   gap 隔开、继承元信息行颜色，故不单列空规则（删除原 .city-search-result-admin /
   .city-search-result-tz 空块）。 */

/* 坐标（lat/lng） */
.city-search-result-coords {
  color: var(--gold-deep);
  opacity: 0.8;
}

/*
 * 搜索状态行（加载中/无结果/错误）：
 * 居中对齐，次文字色。
 */
.city-search-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* 无结果状态 */
.city-search-status--empty {
  color: var(--text-secondary);
  font-style: italic;
}

/* 错误状态 */
.city-search-status--error {
  color: var(--error);
}

/* ── 级联区 ── */

/*
 * 级联区容器：与搜索区有分隔线
 */
.city-cascade-section {
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
}

/*
 * 级联展开/折叠按钮：
 * 文字链接风格，轻量感，不抢主搜索区视觉焦点。
 */
.city-cascade-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--gold-deep);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

.city-cascade-toggle:hover,
.city-cascade-toggle:focus-visible {
  color: var(--gold);
  outline: none;
}

/* 折叠/展开箭头 */
.city-cascade-arrow {
  font-size: 0.7rem;
  transition: transform var(--transition);
  display: inline-block;
  transform: rotate(0deg);
}

.city-cascade-arrow--open {
  transform: rotate(90deg);
}

/*
 * 级联主体（展开时）：
 * 奶油白背景卡片风格，顶部金色装饰线，内边距。
 */
.city-cascade-body {
  margin-top: 8px;
  background-color: var(--cream);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*
 * 级联行（标签 + select / 城市列表）
 */
.city-cascade-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/*
 * 级联区字段标签
 */
.city-cascade-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
}

/*
 * select 外层 wrap：相对定位供 spinner 使用
 */
.city-cascade-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/*
 * 级联 select 下拉：与搜索框风格统一
 */
.city-cascade-select {
  width: 100%;
  padding: 9px 12px;
  background-color: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  cursor: pointer;
  appearance: none;                               /* 统一 select 外观（去浏览器默认箭头） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230e3c41' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  transition: border-color var(--transition);
  outline: none;
}

.city-cascade-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(21, 84, 90, 0.15);
}

.city-cascade-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/*
 * 级联城市列表（热门城市，人口降序）：
 * 最大高度 200px 可滚动，每项与搜索结果项风格一致。
 */
.city-cascade-city-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow-y: auto;
  max-height: 200px;
  background-color: var(--warm);
}

/*
 * 级联城市项（与搜索结果项样式一致）
 */
.city-cascade-city-item {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background-color var(--transition);
}

.city-cascade-city-item:last-child {
  border-bottom: none;
}

.city-cascade-city-item:hover {
  background-color: rgba(21, 84, 90, 0.08);
}

/* ── 已选中城市确认条 ── */

/*
 * 已选中城市条：
 * 成功绿色左边框 + 浅绿背景，明确告知用户城市已选定。
 */
.city-selected-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background-color: var(--badge-success-bg);
  border: 1px solid var(--badge-success-border);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
}

/* 勾选图标（✓） */
.city-selected-icon {
  font-size: 1rem;
  color: var(--success);
  flex-shrink: 0;
}

/* 城市信息文字区 */
.city-selected-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 城市名（粗体） */
.city-selected-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* 元信息（国家/时区/坐标） */
.city-selected-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* "Change" 按钮：幽灵按钮风格 */
.city-selected-clear {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--gold-deep);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--transition), color var(--transition);
}

.city-selected-clear:hover,
.city-selected-clear:focus-visible {
  background-color: var(--gold);
  color: var(--brown);
  outline: none;
}

/* PC 端适配 */
@media (min-width: 768px) {
  .city-cascade-body {
    padding: 18px;
  }

  .city-cascade-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }

  /* PC 端标签固定宽度，与 select / 城市列表对齐 */
  .city-cascade-label {
    width: 120px;
    flex-shrink: 0;
    padding-top: 10px;        /* 与 select padding-top 对齐，视觉水平线 */
  }

  .city-cascade-select-wrap {
    flex: 1;
  }

  .city-cascade-city-list {
    flex: 1;
    max-height: 240px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §14  NianmingPicker 命主年命选择器 + Toast 全局轻提示（C3 阶段）
   作用域：.nianming-* 前缀（NianmingPicker）+ .toast-container / .toast（Toast）
   设计 token 全部引用 §1 的 CSS 自定义属性，无硬编码色值。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NianmingPicker：外层容器 ─────────────────────────────────────────── */

/* 组件最外层 wrapper，提供间距隔离 */
.nianming-picker {
  width: 100%;
}

/* ── NianmingPicker：触发区域（按钮 + 已选展示） ─────────────────────── */

/* 触发区域：已选展示条 + 操作按钮组纵向排列 */
.nianming-trigger {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 已选展示条：日期 + 干支 + 生肖横向排列 */
.nianming-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--gold-faint, rgba(21, 84, 90, 0.08));
  border: 1px solid var(--gold);
  border-radius: 8px;
  font-family: var(--font-body, 'Lora', serif);
}

/* 日期文字 */
.nianming-date-text {
  color: var(--text-secondary);
  font-size: 13px;
}

/* 年命干支（甲子 乙丑 丙寅）—— 命理术语，保留中文，突出展示 */
.nianming-ganzhi {
  color: var(--gold-deep);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  font-family: var(--font-body, serif);
}

/* 生肖展示（中：鼠 / 英：Year of the Rat） */
.nianming-zodiac {
  color: var(--text-muted, #42585a);
  font-size: 13px;
  font-style: italic;
}

/* 操作按钮组：Select/Modify + Clear 横向排列 */
.nianming-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 触发弹窗按钮（Select / Modify）：次级描边低调风格（2026-06-09 用户调整）。
   🔴 原为金底主按钮，对【选填】的年命字段太抢眼；改成透明底 + 浅边框 + 次要色 + 小字号
   的次级风格（与 .nianming-clear-btn 同档，但保留可点击暗示），不再撑满整行宽、左对齐。
   仍用 #ai-app 高优先级 + !important 钉死透明底/次要色，覆盖 Astra 全局 .btn 金底白字。 */
.nianming-select-btn,
#ai-app .nianming-select-btn {
  flex: 0 0 auto;                 /* 不撑满整行，按内容宽度 */
  align-self: flex-start;        /* 左对齐（不被 flex 拉伸） */
  padding: 6px 14px !important;  /* 比主按钮更紧凑 */
  border: 1px solid var(--border, rgba(21, 84, 90, 0.3)) !important;
  border-radius: 8px !important;
  background: transparent !important;        /* 钉死透明底，去金底主按钮观感 */
  color: var(--text-secondary) !important;   /* 次要色，低调 */
  font-size: 0.85rem !important;             /* 小字号，弱化存在感 */
  font-weight: 400 !important;
}
#ai-app .nianming-select-btn:hover,
#ai-app .nianming-select-btn:active,
#ai-app .nianming-select-btn:focus,
#ai-app .nianming-select-btn:focus-visible {
  /* hover：金边 + 深金字（与 clear 按钮一致的次级反馈），透明底保持清爽；
     含裸 :focus 防点击后停焦点态被 Astra button:focus 覆盖成白字。 */
  border-color: var(--gold) !important;
  background: transparent !important;
  color: var(--gold-deep) !important;
}

/* 清除按钮：次级样式（镂空/灰色），避免误触 */
.nianming-clear-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--border, rgba(21, 84, 90, 0.3));
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body, 'Lora', serif);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.nianming-clear-btn,
#ai-app .nianming-clear-btn {
  background: transparent !important;   /* 钉死透明底,防 Astra 全局 .btn 给金底 */
}
.nianming-clear-btn:hover,
#ai-app .nianming-clear-btn:hover,
#ai-app .nianming-clear-btn:focus-visible {
  border-color: var(--gold);
  background: transparent !important;
  color: var(--gold-deep) !important;   /* hover 深金字(防 Astra 白字),透明底清晰 */
}

/* ── NianmingPicker：弹窗遮罩 + 模态框 ───────────────────────────────── */

/* 遮罩层：全屏固定定位，半透明深色背景，高层级覆盖页面内容 */
.nianming-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;         /* 弹窗从底部弹出（移动端惯例） */
  justify-content: center;
  z-index: 1500;                 /* 高于 Toast（z-index: 1200），低于系统级弹窗 */
}

/* 弹窗主体：白色圆角卡片，最大宽度 480px，底部安全区适配 */
.nianming-modal {
  width: 100%;
  max-width: 480px;
  background: var(--surface, #fff);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 32px rgba(12, 47, 51, 0.18);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0);   /* iPhone Home Bar 适配 */
}

/* 弹窗头部：取消按钮 + 标题 + 确认按钮，三等分布局 */
.nianming-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, rgba(21, 84, 90, 0.2));
  background: var(--surface-raised, #f3f7f6);
}

/* 弹窗标题 */
.nianming-modal-title {
  font-family: var(--font-heading, 'Lora', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--brown);
  text-align: center;
  flex: 1;
}

/* 弹窗头部按钮（取消 / 确认）基础样式 */
.nianming-header-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-family: var(--font-body, 'Lora', serif);
  font-size: 14px;
  cursor: pointer;
  transition: opacity .2s, background .2s;
  min-width: 60px;
  text-align: center;
}

.nianming-header-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 取消按钮：灰色镂空 */
.nianming-header-cancel {
  background: transparent;
  color: var(--text-secondary);
}

.nianming-header-cancel:hover:not(:disabled),
#ai-app .nianming-header-cancel:hover:not(:disabled),
#ai-app .nianming-header-cancel:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary) !important;  /* 🔴 钉死深灰字:防 Astra button:hover 把取消按钮文字变白看不清(用户反馈) */
}

/* 确认按钮：主金色填充 */
.nianming-header-confirm {
  background: var(--gold);
  color: #ffffff;               /* 白字：青绿底白字，对齐主站及其他按钮 */
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.nianming-header-confirm:hover:not(:disabled) {
  background: var(--gold-deep);
  color: #ffffff;               /* hover 深青底白字 */
}

/* 弹窗主体区域：放 DateTimePicker + 日期预览 */
.nianming-modal-body {
  padding: 12px 0 16px;
}

/* 选中日期预览文字（小字辅助确认） */
.nianming-date-preview {
  display: block;
  text-align: center;
  margin-top: 6px;
  color: var(--text-muted, #42585a);
  font-size: 11px;
}

/* ── NianmingPicker：加载 spinner ─────────────────────────────────────── */

/* 内联 spinner（确认按钮内显示），纯 CSS 动画，无图片依赖 */
.nianming-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(12, 47, 51, 0.3);
  border-top-color: var(--brown);
  border-radius: 50%;
  animation: nianming-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes nianming-spin {
  to { transform: rotate(360deg); }
}

/* ── NianmingPicker：弹窗进出场 Transition ───────────────────────────── */

/* 进入过渡：遮罩淡入 + 弹窗从底部滑入 */
.nianming-modal-enter-active {
  transition: opacity 0.25s ease;
}

.nianming-modal-enter-active .nianming-modal {
  transition: transform 0.25s ease;
}

.nianming-modal-leave-active {
  transition: opacity 0.2s ease;
}

.nianming-modal-leave-active .nianming-modal {
  transition: transform 0.2s ease;
}

.nianming-modal-enter-from {
  opacity: 0;
}

.nianming-modal-enter-from .nianming-modal {
  transform: translateY(100%);
}

.nianming-modal-leave-to {
  opacity: 0;
}

.nianming-modal-leave-to .nianming-modal {
  transform: translateY(100%);
}

/* ── PC 端弹窗适配（居中弹窗，非底部 sheet） ────────────────────────── */

@media (min-width: 768px) {
  /* PC 端：遮罩居中对齐，弹窗改为居中浮层 */
  .nianming-mask {
    align-items: center;
  }

  .nianming-modal {
    border-radius: 16px;     /* 四角全圆 */
    max-width: 420px;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §14-B  Toast 全局轻提示样式
   作用域：.toast-container / .toast / .toast.error / .toast.success
   ─────────────────────────────────────────────────────────────────────── */

/* 容器：固定于屏幕底部居中，纵向堆叠多条提示 */
.toast-container {
  position: fixed;
  bottom: 60px;                  /* 距底部留空，避免遮住底部导航 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;                 /* 高于页面内容，低于弹窗遮罩（1500） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;          /* 不阻断用户对页面的点击 */
  max-width: 90vw;
}

/* 单条 Toast：默认风格（金色风格，与主题一致） */
.toast {
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-body, 'Lora', serif);
  font-size: 14px;
  color: var(--brown);
  /* 🔴 不透明底(原 rgba 半透明会透出页面色致文字看不清,用户反馈):奶油白实底 */
  background: var(--cream);
  border: 1px solid var(--gold);
  box-shadow: 0 4px 16px rgba(12, 47, 51, 0.18);
  opacity: 1;
  transition: opacity 0.3s ease;   /* 淡出由 Toast.js 触发 el.style.opacity='0' */
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 320px;
  text-align: center;
  pointer-events: none;
}

/* Toast 错误变体（红色边框 + 浅红实底,文字深红清晰） */
.toast.error {
  background: #fdecea;          /* 不透明浅红底(替原 10% 透明红) */
  border-color: #dc3545;
  color: #721c24;
}

/* Toast 成功变体（绿色边框 + 浅绿实底） */
.toast.success {
  background: #e9f7ec;          /* 不透明浅绿底(替原 10% 透明绿) */
  border-color: #28a745;
  color: #155724;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §15  ConsentGate 知情同意门控卡片样式（D1 阶段）
   作用域：.consent-* 前缀，全部使用 §1 设计 token。
   布局：移动优先，全屏遮罩居中卡片；PC 端（>=768px）卡片最大宽度约束。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 全屏背景遮罩（含居中布局容器） ──────────────────────────────────────── */
/* 使用 flex 垂直+水平居中，适配 PC/手机同一套布局 */
.consent-overlay {
  /* 相对 #ai-view-container 定位；覆盖整个视图区 */
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;       /* 垂直居中 */
  justify-content: center;   /* 水平居中 */
  padding: 16px;             /* 移动端给边距，防止卡片贴屏幕边缘 */
  background: rgba(12, 47, 51, 0.55);  /* 深棕半透明遮罩（与品牌色系一致） */
  z-index: 900;              /* 高于顶栏（顶栏 z-index ~100），低于 Toast（1200） */
  box-sizing: border-box;
}

/* ── 居中卡片主体 ─────────────────────────────────────────────────────────── */
.consent-card {
  background: var(--cream);          /* 奶油背景，与整体设计一致 */
  border: 1px solid var(--border);   /* 暖色边框 */
  border-radius: 16px;               /* 圆角，与 .card 原子类一致 */
  box-shadow: 0 8px 32px rgba(12, 47, 51, 0.18); /* 棕色阴影 */
  padding: 28px 24px 24px;           /* 内边距：顶部稍大（标题区留白） */
  width: 100%;                       /* 移动端：占满 overlay 减去 padding */
  max-width: 520px;                  /* 最大宽度约束（PC 端不过宽） */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;                         /* 各区块间距统一 */
  max-height: 90vh;                  /* 防止超长内容撑出视口 */
  overflow-y: auto;                  /* 超长时可滚动（极端小屏/大字号场景） */
}

/* ── 标题区 ───────────────────────────────────────────────────────────────── */
.consent-header {
  /* 无额外布局，标题本身即占位 */
}

.consent-title {
  font-family: var(--font-heading, 'Lora', serif);
  font-size: 1.15rem;                /* 稍大于正文，突出标题 */
  font-weight: 700;
  color: var(--brown);               /* 深棕主标题色 */
  line-height: 1.4;
  margin: 0;
}

/* ── 正文区 ───────────────────────────────────────────────────────────────── */
.consent-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 正文段落 */
.consent-paragraph {
  font-family: var(--font-body, 'Lora', serif);
  font-size: 0.925rem;
  color: var(--text-secondary);      /* 次文字色，柔和易读 */
  line-height: 1.65;
  margin: 0;
}

/* Privacy Policy 内联链接 */
.consent-privacy-link {
  color: var(--gold-deep);           /* 深金色链接，与主题一致 */
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color 0.2s;
  cursor: pointer;
}

.consent-privacy-link:hover,
.consent-privacy-link:focus {
  color: var(--gold);                /* hover 变浅金色 */
  outline: none;
}

/* ── 勾选框行 ─────────────────────────────────────────────────────────────── */
.consent-checkbox-row {
  /* 轻微背景区分，引导用户注意此操作 */
  background: var(--warm);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 16px;
}

/* label 整行可点 */
.consent-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

/* 勾选框本体 */
.consent-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;                   /* 与第一行文字对齐 */
  accent-color: var(--gold);         /* 勾选色使用主金色 */
  cursor: pointer;
}

/* 勾选框禁用态（提交中） */
.consent-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 勾选框说明文字 */
.consent-checkbox-text {
  font-family: var(--font-body, 'Lora', serif);
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.55;
}

/* ── 同意按钮行 ───────────────────────────────────────────────────────────── */
.consent-action {
  display: flex;
  justify-content: center;
}

/* 同意按钮：复用 .btn .btn--primary 原子类（§4 定义），追加 consent 作用域调整 */
.consent-btn {
  width: 100%;                       /* 移动端：宽按钮全宽，便于点击 */
  max-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1rem;
  padding: 13px 24px;
  border-radius: 10px;
  transition: opacity 0.2s, background 0.2s;
}

/* 禁用态：未勾选或加载中 */
.consent-btn--disabled,
.consent-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;              /* 防止禁用态下仍触发 click */
}

/* ── 加载 spinner（复用 NianmingPicker 的旋转动画，§14 已定义 @keyframes） ── */
/* 作用域类 .consent-spinner 避免与 .nianming-spinner 命名冲突 */
.consent-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  /* 复用 §14 定义的 spin keyframe，若未定义则此处自定义 */
  animation: consent-spin 0.75s linear infinite;
  flex-shrink: 0;
}

/* consent-spin：与 §14 nianming-spin 语义等同，独立命名防冲突 */
@keyframes consent-spin {
  to { transform: rotate(360deg); }
}

/* ── 免责声明区 ───────────────────────────────────────────────────────────── */
.consent-footer {
  border-top: 1px solid var(--border-light);
  padding-top: 14px;
}

/* 免责声明文本（spec §4.12 A版，逐字固定） */
.consent-disclaimer {
  font-family: var(--font-body, 'Lora', serif);
  font-size: 0.8rem;                 /* 小字号，符合免责区惯例 */
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  opacity: 0.85;
}

/* ── PC 端卡片适配（>=768px）────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* PC 端：卡片最大宽度进一步约束，圆角稍大 */
  .consent-card {
    max-width: 560px;
    padding: 36px 36px 28px;
    border-radius: 20px;
  }

  /* PC 端：标题字号稍大 */
  .consent-title {
    font-size: 1.25rem;
  }

  /* PC 端：正文字号稍大，提升可读性 */
  .consent-paragraph {
    font-size: 0.975rem;
  }

  /* PC 端：按钮不拉满宽（居中自适应宽度） */
  .consent-btn {
    width: auto;
    min-width: 200px;
    padding: 13px 36px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §16  CastForm — 起盘着陆页
   PC 双栏（Hero 左 / 表单右）；手机单列（简介折顶部→表单→QA）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 整页容器 ───────────────────────────────────────────────────────────── */
.cast-page {
  width: 100%;
  min-height: 100vh;
  background: var(--warm);
}

/* ── 双栏着陆区 ─────────────────────────────────────────────────────────── */
/* 手机：单列纵排；PC（≥768px）：左右双栏 */
.cast-landing {
  display: flex;
  flex-direction: column;   /* 手机：纵向单列 */
  min-height: calc(100vh - 60px);
}

/* ── PC 左栏：品牌 Hero 简介 ─────────────────────────────────────────────── */
.cast-hero {
  position: relative;
  background: var(--brown);                        /* 深棕底色兜底（图片加载前） */
  color: var(--cream);
  padding: 40px 28px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;                               /* 手机：简介折叠为较小 Hero 条 */
  overflow: hidden;
}

/* Hero 背景图占位层（URL 通过 CSS 变量注入）；WP 侧可 inline style 覆盖 --cast-hero-bg */
.cast-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--cast-hero-bg, url(../assets/cast-hero.jpg));  /* 默认：本地生成的青绿玄学背景图（assets/cast-hero.jpg）；WP 侧仍可 inline style 覆盖 --cast-hero-bg */
  background-size: cover;
  background-position: center;
  opacity: 0.22;                                   /* 柔和覆盖，不喧宾夺主 */
  z-index: 0;
}

.cast-hero__content {
  position: relative;
  z-index: 1;
  max-width: 520px;
}

.cast-hero__title {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold-accent);   /* 金标题：深青绿 hero 底上用金强调，保证对比度（主站深底法则） */
  margin: 0 0 6px;
  line-height: 1.25;
}

.cast-hero__subtitle {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: rgba(243, 247, 246, 0.82);
  margin: 0 0 14px;
}

.cast-hero__divider {
  width: 48px;
  height: 2px;
  background: var(--gold-accent);   /* 金色分隔线：深底点缀（主站法则2） */
  margin: 12px 0;
  border-radius: 1px;
}

.cast-hero__desc {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(243, 247, 246, 0.78);
  margin: 0 0 14px;
}

.cast-hero__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cast-hero__features li {
  font-size: 0.85rem;
  color: rgba(243, 247, 246, 0.85);   /* 青白文字：深青绿 hero 底上保证可读（原青绿叠青绿底看不清） */
  padding-left: 18px;
  position: relative;
}

.cast-hero__features li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--gold-accent);   /* 金色装饰符：深底点缀（主站法则3） */
  font-size: 0.7rem;
  top: 2px;
}

/* ── 右栏 / 手机主体：表单面板 ──────────────────────────────────────────── */
.cast-form-panel {
  flex: 1;
  padding: 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--warm);
}

/* 表单卡片（包裹所有表单字段） */
.cast-form-card {
  width: 100%;
  max-width: 540px;
  background: var(--cream);
  border-radius: var(--radius-card, 8px);
  border: 1px solid var(--border);
  padding: 24px 20px 28px;
  box-shadow: var(--shadow-card);
}

/* 表单卡片标题 */
.cast-form-card__title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brown);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--gold-accent);   /* 金色标题分隔线：呼应 hero，表单卡标题强调（主站法则2） */
}

/* ── 通用表单字段 ────────────────────────────────────────────────────────── */
.cast-field {
  margin-bottom: 20px;
}

.cast-field:last-child {
  margin-bottom: 0;
}

/* 字段头部：标签 + 右侧辅助按钮/徽章 */
.cast-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

/* 字段标签基础样式 */
.cast-field__label {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-accent);
  display: block;
  margin-bottom: 8px;
}

.cast-field__header .cast-field__label {
  margin-bottom: 0;   /* 在 header 内时不需要下方 margin（header 自带 margin-bottom） */
}

/* 必填字段标签（右上角星号） */
.cast-field__label--required::after {
  content: ' *';
  color: var(--error);
  font-size: 0.85em;
}

/* 字段说明徽章（如 "Northern Hemisphere only"） */
.cast-field__badge {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--warm-deep);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm, 4px);
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 字段错误提示 */
.cast-field__error {
  font-size: 0.8rem;
  color: var(--error);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* 字段辅助文字（如字符计数、时间显示） */
.cast-field__hint {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 5px;
  opacity: 0.8;
}

/* 字段辅助文字靠右对齐（如字符计数） */
.cast-field__hint--right {
  text-align: right;
}

/* ── "Now" 按钮（起课时间右侧） ──────────────────────────────────────────── */
.cast-btn-now {
  background: transparent;
  border: 1px solid var(--gold-accent);   /* 金边 Now 按钮：表单功能按钮金点缀 */
  color: var(--gold-accent);               /* 金字 */
  border-radius: 6px;
  padding: 3px 10px;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}

.cast-btn-now:hover {
  background: var(--gold-accent);   /* hover 金底配深青字（金#c9a44b 偏亮，白字对比不足看不清，改深字） */
  color: var(--brown);
}

/* ── 浏览器定位按钮 ──────────────────────────────────────────────────────── */
.cast-btn-geolocation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--gold-accent);   /* 金字：Use my location 文字标金（功能小按钮金点缀，呼应 Now 按钮） */
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
  margin-top: 8px;
}

.cast-btn-geolocation:hover:not(:disabled) {
  border-color: var(--gold-accent);   /* hover 金虚线边 */
  color: var(--gold-accent);          /* hover 金字 */
  background-color: transparent !important;   /* 防 Astra button:hover 金底盖住金字（金底金字会糊） */
}

.cast-btn-geolocation:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 定位 loading spinner */
.cast-geo-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cast-geo-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes cast-geo-spin {
  to { transform: rotate(360deg); }
}

/* ── 真太阳时开关字段 ────────────────────────────────────────────────────── */
.cast-field--switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

/* 隐藏原生 checkbox */
.cast-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* 视觉开关（复用 §8 ConsentGate 开关样式语义，独立命名） */
.cast-switch-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.25s;
  flex-shrink: 0;
}

.cast-switch-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* 开关勾选态：checkbox:checked → 同级 .cast-switch-toggle */
.cast-switch-input:checked + .cast-switch-toggle {
  background: var(--gold);
}

.cast-switch-input:checked + .cast-switch-toggle::after {
  transform: translateX(18px);
}

/* 开关旁标签文字 */
.cast-switch-label {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  margin-bottom: 0;      /* 覆盖 .cast-field__label 的默认 margin-bottom */
}

/* ── 分隔线 ──────────────────────────────────────────────────────────────── */
.cast-divider {
  height: 1px;
  background: var(--border-light);
  margin: 6px 0 20px;
}

/* ── 命主姓名（First name + Last name 并排） ─────────────────────────────── */
.cast-name-row {
  display: flex;
  gap: 12px;
}

.cast-name-group {
  flex: 1;
  min-width: 0;    /* 防止 flex 子项溢出父容器 */
}

/* 名/姓 内部子标签 */
.cast-name-sublabel {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* ── 通用输入框 ──────────────────────────────────────────────────────────── */
.cast-input {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.cast-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(21, 84, 90, 0.15);
}

/* 错误态输入框 */
.cast-input--error {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.12);
}

/* 选用额度套餐桶下拉（额度桶重构阶段5）：复用 .cast-input 基样式，仅补原生 select 的指针/高度
   （native <select> 继承 .cast-input 的边框/字体/圆角即可，此处保证可点指针 + 不被压扁）*/
.cast-lot-select {
  cursor: pointer;
  min-height: 38px;
  /* 保留浏览器原生下拉箭头（appearance 不重置，避免无箭头导致用户不知可下拉）*/
}

/* ── 性别选择按钮组 ──────────────────────────────────────────────────────── */
.cast-sex-row {
  display: flex;
  gap: 12px;
}

/* 性别单个按钮 */
.cast-sex-btn {
  flex: 1;
  padding: 9px 12px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition),
              color var(--transition);
  text-align: center;
}

.cast-sex-btn:hover:not(.cast-sex-btn--active) {
  border-color: var(--gold);
  color: var(--gold-deep);
}

/* 已选中 */
/* 🔴 用 #ai-app 提优先级 + !important 钉死深棕字:防 Astra 主题的 button:focus 等
   全局规则在选中(按钮获焦)时把文字覆盖成白色 → 金底白字看不清(用户反馈)。 */
.cast-sex-btn--active,
#ai-app .cast-sex-btn--active,
#ai-app .cast-sex-btn--active:hover,
#ai-app .cast-sex-btn--active:focus,
#ai-app .cast-sex-btn--active:focus-visible {
  background: rgba(21, 84, 90, 0.22);  /* 浅青绿底(主色#15545a 22%透明):选中态柔和,不抢眼 */
  color: var(--brown) !important;        /* 深棕字,浅金底上清晰 */
  border-color: var(--gold);             /* 金边强化选中边界 */
  font-weight: 600;
}

/* 错误态（未选时提交） */
.cast-sex-btn--error {
  border-color: var(--error);
}

/* ── 问题 textarea ────────────────────────────────────────────────────────── */
.cast-textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.cast-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(21, 84, 90, 0.15);
}

/* ── Begin Analysis 提交按钮 ─────────────────────────────────────────────── */
/* 🔴 高对比加固(2026-05-29):所有金色系按钮的 hover/active 一律「金/深金底 + 深棕字」,
   彻底弃用白字——白字/浅色在奶油金配色页面上对比不足看不清(用户反馈)。
   深棕 #3b2f1a 在金 #c9a44b 上对比度约 7:1,清晰。下方各 :hover 的 color:#fff 已逐一改为 --brown。 */
.cast-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brown);
  background: var(--gold);
  border: none;
  border-radius: var(--radius-btn, 30px);
  cursor: pointer;
  margin-top: 24px;
  transition: opacity var(--transition), background var(--transition),
              box-shadow var(--transition);
  box-shadow: 0 4px 16px rgba(21, 84, 90, 0.35);
}

/* 🔴 文字色钉死:Astra 父主题 button:focus 设白字,点击后鼠标移开按钮停在 :focus 态
   → 文字变白(用户反馈)。必须覆盖【所有】焦点伪类(:focus / :focus-visible / :focus-within),
   之前只钉 :focus-visible 漏了裸 :focus。默认态也钉深棕,任何状态文字恒深棕。 */
#ai-app .cast-submit-btn,
#ai-app .cast-submit-btn:focus,
#ai-app .cast-submit-btn:focus-visible,
#ai-app .cast-submit-btn:focus-within {
  color: var(--brown) !important;
}
.cast-submit-btn:hover:not(:disabled),
#ai-app .cast-submit-btn:hover:not(:disabled),
.cast-submit-btn:active:not(:disabled),
#ai-app .cast-submit-btn:active:not(:disabled),
#ai-app .cast-submit-btn:focus:not(:disabled),
#ai-app .cast-submit-btn:focus-visible {
  /* hover/active/focus 背景浅金(与性别选中同色),文字深棕,全 !important */
  background: rgba(21, 84, 90, 0.55) !important;
  color: var(--brown) !important;
  box-shadow: 0 4px 16px rgba(21, 84, 90, 0.35);
}

.cast-submit-btn:disabled,
.cast-submit-btn--loading {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Begin Analysis 按钮内 spinner */
.cast-submit-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cast-submit-spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes cast-submit-spin {
  to { transform: rotate(360deg); }
}

/* ── F2 双按钮并列：[排盘] + [AI 解析] ──────────────────────────────────────
   两按钮共用 .cast-submit-btn 基础样式（金底深棕字 + hover/active/focus 深棕字防 Astra 白字）。
   .cast-btn-row 横向并排等宽；窄屏（<480px）自动竖排避免拥挤。 */
.cast-btn-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* 排盘 / AI 两按钮在行内等宽（覆盖 .cast-submit-btn 的 width:100% + margin-top） */
.cast-btn-row .cast-submit-btn {
  flex: 1 1 0;
  width: auto;
  margin-top: 0;
}

/* 排盘按钮：免费工具，用描边次要风格区分付费的 AI 解析（金底）主按钮 */
.cast-cast-btn,
#ai-app .cast-cast-btn {
  background: var(--cream, #f3f7f6);
  border: 1.5px solid var(--gold);
  box-shadow: none;
}

/* 排盘按钮 hover/active/focus：浅金底 + 深棕字（与全站一致，防 Astra 白字） */
.cast-cast-btn:hover:not(:disabled),
#ai-app .cast-cast-btn:hover:not(:disabled),
.cast-cast-btn:active:not(:disabled),
#ai-app .cast-cast-btn:active:not(:disabled),
#ai-app .cast-cast-btn:focus:not(:disabled),
#ai-app .cast-cast-btn:focus-visible {
  background: rgba(21, 84, 90, 0.18) !important;
  color: var(--brown) !important;
  box-shadow: none;
}

/* AI 解析按钮内的游客锁图标 */
.cast-ai-lock {
  font-size: 0.95em;
  line-height: 1;
  flex-shrink: 0;
}

/* 窄屏：双按钮竖排（避免文案 + 锁图标在窄宽度下挤压） */
@media (max-width: 479px) {
  .cast-btn-row {
    flex-direction: column;
  }
}

/* ── F3 真盘展示区（排盘成功后表单下方内联展开）──────────────────────────────
   宽度对齐表单卡（cast-form-card），居中；内含 ChartCard + AI 解析提醒卡。 */
/* 🔴 真盘展示区（已移出双栏 .cast-landing，作 .cast-page 直属全宽块，置于表单下方）。
   居中限宽：盘面内容（四柱/天地盘/三传四课/神煞）较宽，给 720px 居中比原 460px(对齐右栏)更舒展美观。
   移动端 width:100% 自适应。 */
.cast-result {
  width: 100%;
  max-width: 720px;
  margin: 28px auto 0;
}

/* 真盘下方 AI 解析提醒卡：✨ 想知道这盘的含义? [AI 解析→] */
.cast-result-cta {
  margin-top: 16px;
  padding: 18px 20px;
  background: var(--cta-gradient, linear-gradient(135deg, #eaf2f1, #dceae7));
  border: 1px solid var(--border-light, #dce8e6);
  border-radius: var(--radius-card, 8px);
  text-align: center;
}

/* 提醒卡标题文案 */
.cast-result-cta__title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brown);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* 提醒卡内的 ✨ 图标 */
.cast-result-cta__spark {
  margin-right: 4px;
}

/* 提醒卡内的 AI 解析按钮：限宽居中（不撑满，弱于主流程双按钮观感） */
.cast-result-cta__btn,
#ai-app .cast-result-cta__btn {
  width: auto;
  min-width: 200px;
  margin-top: 0;
  display: inline-flex;
}

/* （真盘 max-width 已统一为 720px 居中，见上方 .cast-result；原对齐右栏的 460px media query 已移除——
   真盘现是全宽区块不再受右栏宽度约束。） */

/* ── QA / 使用技巧卡片区 ─────────────────────────────────────────────────── */
.cast-qa-section {
  max-width: var(--max-width, 1000px);
  margin: 0 auto;
  padding: 40px 16px 32px;
}

.cast-qa-section__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brown);
  text-align: center;
  margin: 0 0 24px;
}

/* QA 4 卡网格：手机 1 列 / 平板 2 列 / PC 4 列 */
.cast-qa-grid {
  display: grid;
  grid-template-columns: 1fr;       /* 手机：单列 */
  gap: 16px;
}

/* QA 单卡 */
.cast-qa-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 8px);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-card);
}

/* QA 卡图标 */
.cast-qa-card__icon {
  font-size: 1.4rem;
  line-height: 1;
}

/* QA 卡标题 */
.cast-qa-card__title {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brown);
  margin: 0;
  line-height: 1.35;
}

/* QA 卡正文 */
.cast-qa-card__body {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* CTA 卡：金色渐变背景，视觉强调 */
.cast-qa-card--cta {
  background: var(--cta-gradient);
  border-color: var(--gold-accent);   /* 金边 CTA 卡：呼应 CTA 高级点缀（主站法则2） */
}

/* ── CTA 按钮（仅 CastForm 页，4卡最后一张内部） ─────────────────────────── */
.cast-cta-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 18px;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;               /* 白字：青绿底白字，对齐主站 .hui-btn */
  background: var(--gold);
  border-radius: var(--radius-btn, 30px);
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
              box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(21, 84, 90, 0.3);
  align-self: flex-start;
}

.cast-cta-btn:hover {
  background: var(--gold-deep);
  color: #ffffff;               /* hover 深青底白字，对齐主站 */
  box-shadow: 0 4px 12px rgba(14, 60, 65, 0.4);
}

/* ── 底部免责声明 ─────────────────────────────────────────────────────────── */
.cast-footer {
  max-width: var(--max-width, 1000px);
  margin: 0 auto;
  padding: 0 16px 32px;
}

.cast-footer__disclaimer {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.55;
  margin: 0;
  opacity: 0.8;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

/* ── PC 端适配（≥ 768px）────────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* 双栏横向布局 */
  .cast-landing {
    flex-direction: row;
    min-height: calc(100vh - 60px);
  }

  /* 左栏 Hero：加宽到 55%（2026-05-30 用户：cast 视图全宽后吃掉富余空间，减少右侧留白；
     表单卡尺寸不变，由 hero 占据多出来的宽度）。撑满高度。 */
  .cast-hero {
    width: 55%;
    flex-shrink: 0;
    min-height: auto;
    padding: 52px 48px;
  }

  .cast-hero__title {
    font-size: 2rem;
  }

  .cast-hero__desc {
    font-size: 0.95rem;
  }

  /* 右栏表单面板：占剩余宽度（hero 加宽后约 45%），表单卡居中（原 flex-start 靠左会右侧留白）。 */
  .cast-form-panel {
    flex: 1;
    padding: 36px 28px;
    align-items: center;
    padding-top: 48px;
  }

  .cast-form-card {
    max-width: 460px;
    padding: 28px 24px 32px;
  }

  /* QA 4卡：PC 端 2 列 → 4 列 */
  .cast-qa-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cast-qa-section {
    padding: 52px 24px 40px;
  }

}

/* ── 宽屏（≥ 1024px）：QA 4 列 ────────────────────────────────────────────── */
@media (min-width: 1024px) {

  .cast-hero {
    width: 38%;
    padding: 60px 48px;
  }

  .cast-qa-grid {
    grid-template-columns: repeat(4, 1fr);
  }

}


/* ═══════════════════════════════════════════════════════════════════════════
   §17  PackagePicker — 套餐选择页（D3 阶段）
   手机：卡片竖排；PC（≥768px）：三档并排。BEST VALUE 档金边 + 角标突出。
   复用 §1 设计 token + .card / .btn 原子类。无裸 button（用 .btn class 满足 §10 特异度）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 整页容器 ───────────────────────────────────────────────────────────── */
.picker-page {
  width: 100%;
  min-height: calc(100vh - 60px);
  background: var(--warm);
  padding: 32px 20px 48px;
}

/* ── 页头：返回入口 + 标题 + 副标题 ──────────────────────────────────────── */
.picker-header {
  max-width: var(--max-width);
  margin: 0 auto 28px;
  text-align: center;
}

/* 返回按钮（左对齐于页头上方，文本链接风格） */
.picker-back-btn {
  display: inline-block;
  background: none;
  border: none;
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 12px;
  float: left;                       /* 浮于标题左侧；手机窄屏也不挤压标题 */
  transition: color var(--transition);
}
.picker-back-btn:hover,
.picker-back-btn:focus-visible {
  color: var(--brown);
  text-decoration: underline;
  outline: none;
}

.picker-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brown);
  margin: 0 0 8px;
  clear: both;                       /* 清除 back-btn 浮动，标题独占一行居中 */
}

.picker-subtitle {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-secondary, #42585a);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── 状态区（加载中 / 加载失败 / 空套餐）────────────────────────────────── */
.picker-state {
  max-width: 520px;
  margin: 40px auto;
  text-align: center;
  color: var(--text);
  font-family: var(--font-serif);
}
.picker-state__msg {
  font-size: 1rem;
  margin-bottom: 16px;
}
.picker-state--loading p {
  margin-top: 12px;
  color: var(--text-secondary, #42585a);
}

/* 加载中 spinner（复用 §14 定义的 spin 旋转动画 keyframe） */
.picker-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(21, 84, 90, 0.3);   /* 金色半透明轨道 */
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: nianming-spin 0.7s linear infinite; /* 复用 §14 @keyframes nianming-spin */
  vertical-align: middle;
  margin-right: 6px;
}

/* 重试按钮下方的「返回起盘」次级链接 */
.picker-retry-btn {
  margin: 8px 0 16px;
}
.picker-back-link {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color var(--transition);
}
.picker-back-link:hover,
.picker-back-link:focus-visible {
  color: var(--brown);
  text-decoration: underline;
  outline: none;
}

/* ── 套餐卡片网格 ───────────────────────────────────────────────────────── */
/* 手机：单列纵排；PC：三档并排 */
.picker-grid {
  display: grid;
  grid-template-columns: 1fr;        /* 手机：单列 */
  gap: 22px;
  max-width: var(--max-width);
  margin: 0 auto;
  align-items: stretch;              /* 同行卡片等高 */
}

/* 单张套餐卡片（复用 .card 视觉语言：cream 底、圆角、顶部金线） */
.picker-card {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-card);
  padding: 30px 22px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.picker-card:hover {
  box-shadow: var(--shadow-hover, 0 10px 26px rgba(0,0,0,0.10));
  transform: translateY(-3px);
}

/* 主推档（badge 非空）：金色加粗边框 + 轻微放大上移（视觉主推） */
.picker-card--best {
  border: 2px solid var(--gold);
  border-top: 3px solid var(--gold);
  box-shadow: 0 10px 30px rgba(21, 84, 90, 0.26);
  transform: translateY(-6px);
}
.picker-card--best:hover {
  transform: translateY(-9px);
}

/* 主推角标（卡片顶部居中悬浮） */
.picker-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold-accent);   /* 金底角标(BEST VALUE/MOST POPULAR)：营销焦点，金底白字（主站法则5） */
  color: #fff;
  font-family: var(--font-serif);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(14, 60, 65, 0.30);
}

.picker-card__name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brown);
  margin: 4px 0 16px;
}

/* 价格区：原价(独立行) → 主价 → save% → per-topic，垂直居中堆叠 */
.picker-card__price-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  min-height: 110px;                 /* 各卡价格区等高（现统一 4 行:原价/主价/save/per），下方分隔线对齐 */
  justify-content: center;
}

/* 划线原价（独立成行，删除线弱化色，纯展示锚定）；compareAtText 为空时不渲染。
   🔴 text-decoration 加 !important 防 Astra 主题全局重置 span/div 的删除线（参照 Astra 渗透问题）。 */
.picker-card__compare {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: #42585a;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(66, 88, 90, 0.85);
  line-height: 1;
}

/* 实收主价（大金色） */
.picker-card__price {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--gold-accent);   /* 金色主价：套餐卡视觉焦点，金强调价值感（主站法则1） */
  line-height: 1.05;
}

/* 节省百分比（save% pill）；savePercent 为空时不渲染 */
.picker-card__save {
  margin-top: 2px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(21, 84, 90, 0.18);
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* per-topic 单价（每问折算，弱化色） */
.picker-card__pertopic {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: #42585a;
  margin-top: 2px;
}

/* 含问数 + 追问上限。🔴 用 #ai-app 前缀提特异度(0,2,0)≥Astra `.entry-content ul`(0,2,0)
   且后定义胜出，清掉 Astra 给 ul 注入的 padding-left（否则内容左偏=别扭）。
   布局：卡片化清单——每项「✓图标 + 文字」左对齐居中块，金色细分隔，紧贴价格区。 */
#ai-app .picker-card__features {
  list-style: none;
  padding: 0;
  margin: 8px 0 18px;            /* 与上方 price-block 拉近(14→8) */
  width: 100%;
  border-top: 1px solid var(--border);   /* 与价格区之间一条细分隔，结构清晰 */
  padding-top: 12px;
}
#ai-app .picker-card__features li {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;       /* 整行居中(与卡片其余居中对齐) */
  gap: 7px;
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--text);
  padding: 5px 0;
  line-height: 1.35;
}
/* ✓ 勾选图标（::before 生成，金色，不依赖外部资源；标记每项是套餐含的权益） */
#ai-app .picker-card__features li::before {
  content: "✓";
  color: var(--gold-accent);   /* 金色勾选符：权益清单装饰点缀（主站法则3） */
  font-weight: 700;
  font-size: 0.92rem;
  flex: 0 0 auto;
}
/* 第1行(问数)：稍突出(深棕加粗)，作为该档核心权益 */
#ai-app .picker-card__features li:first-child {
  font-weight: 700;
  color: var(--brown);
  font-size: 0.92rem;
}

/* Select 按钮：占满卡片宽度（.btn--primary 提供金色样式） */
.picker-card__select {
  width: 100%;
  margin-top: auto;                  /* 推到卡片底部，各卡按钮对齐 */
}

/* ── 底部免责声明 ───────────────────────────────────────────────────────── */
.picker-footer {
  max-width: var(--max-width);
  margin: 32px auto 0;
  text-align: center;
}
.picker-footer__disclaimer {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  color: var(--text-secondary, #42585a);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

/* ── 响应式网格 ──────────────────────────────────────────────────────────
   手机单列（默认）；平板 2 列；桌面按档数自适应（用 auto-fit + minmax 让
   4 档时排满一行均衡，不再固定 3 列把第 4 档挤到第二行单独一列）。 */
@media (min-width: 600px) {
  .picker-grid {
    grid-template-columns: repeat(2, 1fr);   /* 平板：2 列 */
  }
}
@media (min-width: 980px) {
  .picker-grid {
    /* 桌面：每列至少 220px，能放几列放几列；4 档→4 列均衡，3 档→3 列 */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .picker-title {
    font-size: 1.9rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §18  GeneratingView — 生成中·盘面揭晓动画（D4 阶段）
   spec §4.9：逐块淡入上浮 + 金色微光，节奏从容（约 16~18s）。天地盘 12 宫从子起
   按地盘环序逐个归位（格子固定·内容数据驱动），中宫课名最后。神煞逐个 pop（数量数据驱动）。
   两阶段等待语轮播。🔴 reduce-motion 降级为纯淡入（无位移/无脉动），见末段 @media。
   复用 §1 设计 token：金 --gold(#c9a44b) / 深金 --gold-deep(#8b6914) / 深棕 --brown / 奶油 --cream。
   配色克制：金/棕色调为主，不做花哨五行色（贴"专业不神秘化·金光"）。无裸 button（用 .btn class）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 五行配色类（.wx-水/.wx-木/.wx-火/.wx-土/.wx-金）─────────────────────────
   🔴 配色由后端 render 的 *Wx 字段驱动：前端只按 'wx-'+五行字 拼 class（GeneratingView.wxClass），
   绝不在前端从干支推五行。空串五行不上色（无 wx- 类匹配）。
   选色克制专业、贴 WP 金棕底（避免高饱和花哨）：以 color 覆盖文字色，仅作五行区分提示。 */
.wx-水 { color: #2f6b7a; }   /* 水：墨青（沉稳冷调） */
.wx-木 { color: #4f7a42; }   /* 木：苍绿（克制绿） */
.wx-火 { color: #b04a2f; }   /* 火：赭红（暖而不艳） */
.wx-土 { color: #8b6914; }   /* 土：深金棕（=品牌 --gold-deep，融入金棕调） */
.wx-金 { color: #9a7b2e; }   /* 金：暗金（偏棕的金，区别于土的深金） */

/* ── 整页容器 ───────────────────────────────────────────────────────────── */
.gen-page {
  width: 100%;
  min-height: calc(100vh - 60px);
  background: var(--warm);
  padding: 32px 20px 56px;
  box-sizing: border-box;
}

/* ── 揭晓区容器（居中收窄，便于聚焦仪式）─────────────────────────────────── */
.gen-reveal {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* 头部状态语 */
.gen-reveal__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brown);
  text-align: center;
  margin: 0 0 4px;
  letter-spacing: 0.5px;
}

/* ── 流式首答正文（stream_visible，2026-06-04）：仅 streamMode 揭晓期逐字打字机展示 ──
   卡片化承载逐字增量文本（已过拒答+sanitize，无免责）；批量链路此块不渲染。 */
.gen-stream-answer {
  width: 100%;
  box-sizing: border-box;
  background: var(--cream);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);            /* 顶部金色装饰线（与 .gen-block / .card 同语言） */
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin: 4px 0;
}
.gen-stream-answer__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;                         /* 保留换行（与对话气泡答案一致的可读性） */
  word-break: break-word;
}
/* 🔴 首问流式底部锚点（2026-06-05）：零高度占位，贴底跟随 scrollIntoView 的目标。
   揭晓页无底部 sticky 输入条，故无需 scroll-margin-bottom（区别于对话页 .ct-stream__anchor）。 */
.gen-stream-answer__anchor {
  height: 0;
}
/* 🔴 揭晓底部锚点（2026-06-05 需求1）：零高度占位，揭晓动画期间盘面块逐个淡入时
   贴底跟随滚动的目标（手机端不再留大块空白干等）。同零高度不占位、不影响揭晓布局。 */
.gen-reveal__anchor {
  height: 0;
}

/* ── 揭晓块通用：未揭晓时【display:none 不占位】，is-shown 才出现并播淡入上浮 ──────────
   🔴 2026-06-05 修复：原用 opacity:0 隐藏会让所有盘面块（四柱/天地盘/三传四课/神煞）
   在揭晓未开始时就【占据完整布局空间】，把页面一开始撑到很高，内容落到视口下半部分、
   手机端起始大片空白。改用 display:none 隐藏（不占位）→ 页面随揭晓逐块由短变长，配合
   贴底跟随滚动，用户始终看到最新揭晓的块。display 不可 transition，故 is-shown 时用
   @keyframes 入场动画保留淡入上浮仪式（与原 0.7s 节奏一致）。 */
.gen-block {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);            /* 顶部金色装饰线（与 .card 一致语言） */
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  box-sizing: border-box;
}
/* 🔴 未揭晓时强制隐藏【整块】不占位（2026-06-05 修复）：
   用 :not(.is-shown) + !important 覆盖各盘面块【自己的 display】——gen-keti/gen-sike-sanchuan
   各有 display:flex（内部布局需要），定义在 .gen-block 之后会覆盖 .gen-block 的 display，
   导致这两块即便未揭晓也一直显示（用户实测「除神煞外课体/三传四课一进首问就显示」根因）。
   故隐藏走 :not(.is-shown)（特异度 0,2,0 + !important）稳压块自己的 display:flex。
   ⚠️ 这是「块级揭晓显隐」与后台「三传/四课/神煞显隐」是两层、互不冲突：
   - 神煞块用 v-if（displayConfig.shensha 关→整块不渲染，根本无 .gen-block）；
   - 三传/四课的后台显隐是传子组件 show-sanchuan/show-sike 在子组件内部控制；
     本规则只控「揭晓动画时整块是否出现」，is-shown 后各块用自己的 display（flex/block）。 */
.gen-block:not(.is-shown) {
  display: none !important;
}
/* 揭晓：is-shown 时不写死 display（让 gen-keti/gen-sike-sanchuan 用自己的 flex、
   其余块用 div 默认 block），仅叠加入场动画（淡入 + 上浮，替代原 transition）。 */
.gen-block.is-shown {
  animation: gen-block-in 0.7s ease both;
}
/* reduce-motion：尊重偏好，is-shown 即可见，不播位移/淡入动画 */
.gen-reveal--reduced .gen-block.is-shown {
  animation: none;
}
@keyframes gen-block-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 块标签（小标题，深金色） */
.gen-block__label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold-accent);   /* 金色 eyebrow 小标题：uppercase+字间距，盘面区块标签金点缀（主站法则1） */
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── 1. 四柱 ─────────────────────────────────────────────────────────────── */
.gen-bazi__pillars {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
}
.gen-pillar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--warm);
}
.gen-pillar__cn {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.gen-pillar__gan,
.gen-pillar__zhi {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brown);
  line-height: 1.2;
}

/* ── 2. 课体 + 月将 ───────────────────────────────────────────────────────── */
.gen-keti {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
}
.gen-keti__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gen-keti__name,
.gen-keti__yuejiang {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-deep);
}

/* ── 3. 天地盘（4×4 CSS Grid；格子固定·内容数据驱动）───────────────────────
   每格用后端 render.tianPanCells 给的 row/col（1-4）经 inline style grid-row/grid-column
   定位（前端不算坐标）。中央 2×2（行2-3·列2-3）无格子，由 .gen-tp-center 课名覆盖。 */
.gen-tianpan__grid {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
}
.gen-tp-cell {
  min-width: 0;
  min-height: 0;
  position: relative;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--warm);
  box-sizing: border-box;
  overflow: hidden;
  /* 问题2 修复（2026-05-29）：照搬 uni-app .grid-cell-inner 三段式 flex column。
     align-items:stretch 让三段各自横向占满，三段（天将顶 / 天盘行中 / 地盘底）靠各自 flex
     份额自然分布（天将与地盘 flex:0 0 auto 取自然高，天盘行 flex:1 占满中间剩余空间）。
     不再用 justify-content:center（旧版把三段当整体垂直居中，导致上神不在格子几何中心）。 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2px;
  /* 12 宫初始：透明 + 轻微缩放，is-settled 归位淡入 + 金色微光 */
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.42s ease, transform 0.42s ease, box-shadow 0.42s ease;
}
.gen-tp-cell.is-settled {
  opacity: 1;
  transform: scale(1);
  /* 金色微光：归位瞬间的克制高光（金光基调，与五行字色叠加不冲突） */
  box-shadow: 0 0 0 1px var(--gold-accent), 0 0 10px rgba(201, 164, 75, 0.35);   /* 金边+金光晕：揭晓动画金光点缀 */
}
/* 空亡格：虚线框直观标识（淡灰虚线，不抢眼；读后端 cell.xunKong 成品，零推算）*/
.gen-tp-cell--xunkong {
  border: 1px dashed var(--text-secondary);
}
/* 长生：左上角标（绝对定位；对应 uni-app .cell-zhangsheng，保持不变）*/
.gen-tp-cell__cs {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 0.5rem;
  color: var(--text-secondary);
  line-height: 1;
  z-index: 1;
}
/* ① 天将：顶部一行·左右居中（问题2 修复：照搬 uni-app .cell-tianjiang
   —— flex:0 0 auto 取自然高 + text-align:center 水平居中，置于宫格最上面）*/
.gen-tp-cell__tj {
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gold-deep);
  line-height: 1.1;
}
/* ② 天盘行：占满宫格中间剩余空间（flex:1），内部 flex center 让上神落在格子几何中心
   （问题2 修复：照搬 uni-app .cell-tianpan-row —— relative 作遁干 absolute 的定位上下文）*/
.gen-tp-cell__tp-row {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* 天盘上神：天盘行内居中（=格子几何中心，最大字号·主视觉；对应 uni-app .cell-tianpan）*/
.gen-tp-cell__tp {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brown);
  line-height: 1.1;
}
/* 遁干：absolute 浮在天盘行右侧 + 垂直居中，与上神同水平线但不影响上神居中
   （问题2 修复：照搬 uni-app .cell-tianpan-gan —— right + top:50% + translateY(-50%)）*/
.gen-tp-cell__gan {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.62rem;
  color: var(--gold-deep);
  line-height: 1;
  pointer-events: none;
}
/* ③ 地盘：底部一行·居中（问题2 修复：照搬 uni-app .cell-dipan
   —— flex:0 0 auto 取自然高 + align-self:center 水平居中，置于宫格最下面）*/
.gen-tp-cell__dp {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.1;
}
/* 中央 2×2 课名（12 宫归位后最后出现） */
.gen-tp-center {
  position: absolute;
  top: 26.5%;
  left: 26.5%;
  width: 47%;
  height: 47%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 4px;
  z-index: 2;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.gen-tp-center.is-shown {
  opacity: 1;
  transform: scale(1);
}
.gen-tp-center__label {
  font-size: 0.6rem;
  color: var(--text-secondary);
  letter-spacing: 2px;
}
.gen-tp-center__name {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-deep);
  text-align: center;
}

/* ── 4. 三传 / 四课 ───────────────────────────────────────────────────────── */
.gen-sike-sanchuan {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gen-sub {
  width: 100%;
}
.gen-sike__grid {
  display: flex;
  flex-direction: row;
  gap: 6px;
}
.gen-ke-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--warm);
  font-family: var(--font-serif);
}
/* 空亡课：虚线框标识（读后端 ke.xunKong 成品，零推算）*/
.gen-ke-item--xunkong {
  border: 1px dashed var(--text-secondary);
}
.gen-ke-item__dg,
.gen-ke-item__tj { font-size: 0.72rem; font-weight: 700; color: var(--gold-deep); }
.gen-ke-item__shang,
.gen-ke-item__xia { font-size: 0.9rem; font-weight: 700; color: var(--brown); }
.gen-ke-item__label { font-size: 0.6rem; color: var(--text-secondary); }

/* 三传显隐改由 KpSanChuanSiKe 的 showSanchuan prop 控制（2026-06-03 双场景后台可配），不再全局隐藏 */

.gen-sanchuan__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gen-chuan-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* 用户要求（2026-05-29）：每行内容左右居中（label/六亲/遁干/地支/天将一组在行内居中）*/
  justify-content: center;
  gap: 10px;
  padding: 4px 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--warm);
  font-family: var(--font-serif);
}
.gen-chuan-item__label { font-size: 0.7rem; color: var(--text-secondary); }
.gen-chuan-item__liuqin { font-size: 0.78rem; color: var(--text-secondary); }
.gen-chuan-item__dg { font-size: 0.8rem; color: var(--gold-deep); }
.gen-chuan-item__zhi { font-size: 1rem; font-weight: 700; color: var(--brown); }
/* 天将：去掉 margin-left:auto（原把天将推到最右破坏居中），改随组居中 */
.gen-chuan-item__tj { font-size: 0.8rem; font-weight: 700; color: var(--gold-deep); }
/* 空亡传：虚线框标识（读后端 c.xunKong 成品，零推算）*/
.gen-chuan-item--xunkong {
  border: 1px dashed var(--text-secondary);
}

/* ── 5. 神煞（逐个 pop；数量数据驱动）────────────────────────────────────── */
.gen-shensha__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.gen-ss-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--gold);
  border-radius: 20px;
  background: var(--cream);
  font-family: var(--font-serif);
  /* 初始：缩放 + 透明，is-shown 逐个 pop 淡入 */
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.gen-ss-item.is-shown {
  opacity: 1;
  transform: scale(1);
}
.gen-ss-item__name { font-size: 0.7rem; color: var(--text-secondary); }
.gen-ss-item__zi { font-size: 0.85rem; font-weight: 700; color: var(--gold-deep); }

/* ── 6. 等待语轮播（太极脉动 + 两阶段文案）──────────────────────────────── */
.gen-wait {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 0 6px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.gen-wait.is-shown {
  opacity: 1;
  transform: translateY(0);
}
/* 太极脉动指示器：金色圆环呼吸 */
.gen-wait__pulse {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: radial-gradient(circle, rgba(21, 84, 90, 0.22), transparent 70%);
  animation: gen-pulse 1.8s ease-in-out infinite;
}
@keyframes gen-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.6; }
  50%      { transform: scale(1.12); opacity: 1; }
}
/* 等待语文本（:key=waitText 触发轮播淡入；用过渡近似淡入淡出） */
.gen-wait__text {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
  min-height: 1.4em;
  animation: gen-fade-in 0.6s ease;
}
@keyframes gen-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 失败态：未扣费提示 + Retry + 次要出口 ──────────────────────────────── */
.gen-failed {
  max-width: 480px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 28px 22px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.gen-failed__icon {
  font-size: 2rem;
  color: var(--gold-deep);
  line-height: 1;
}
.gen-failed__msg {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brown);
  margin: 0;
}
.gen-failed__no-charge {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--success);              /* 用成功色让"未扣费"显得安心、正向 */
  margin: 0;
}
.gen-failed__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}
.gen-failed__retry {
  min-width: 180px;
}
.gen-failed__back-link {
  background: none;
  border: none;
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.gen-failed__back-link:hover,
.gen-failed__back-link:focus-visible {
  color: var(--gold);
}

/* ── spinner（重试中）：复用金色旋转 ──────────────────────────────────────── */
.gen-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: gen-spin 0.7s linear infinite;
}
@keyframes gen-spin {
  to { transform: rotate(360deg); }
}

/* ── PC 响应式：四课/三传与天地盘并排留白更舒展 ─────────────────────────── */
@media (min-width: 768px) {
  .gen-reveal {
    max-width: 620px;
  }
  .gen-reveal__title {
    font-size: 1.6rem;
  }
}

/* ═══ 🔴 reduce-motion 降级：纯淡入，无位移/无脉动/无逐宫缩放 ═══════════════
   无障碍标准（spec §4.9 必做）。gen-reveal--reduced 由 JS 检测 prefers-reduced-motion
   后加在 .gen-reveal 上；同时用 @media 兜底（即使无 JS class 也降级）。
   降级策略：所有元素直接全显（opacity:1 + 无 transform），过渡/动画关闭。 */
.gen-reveal--reduced .gen-block,
.gen-reveal--reduced .gen-tp-cell,
.gen-reveal--reduced .gen-tp-center,
.gen-reveal--reduced .gen-ss-item,
.gen-reveal--reduced .gen-wait {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.gen-reveal--reduced .gen-tp-cell.is-settled {
  box-shadow: 0 0 0 1px var(--gold); /* 保留细金边，去掉发光动效 */
}
.gen-reveal--reduced .gen-wait__pulse,
.gen-reveal--reduced .gen-wait__text {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .gen-block,
  .gen-tp-cell,
  .gen-tp-center,
  .gen-ss-item,
  .gen-wait {
    transition: none !important;
  }
  .gen-block,
  .gen-tp-cell,
  .gen-tp-center,
  .gen-ss-item,
  .gen-wait {
    opacity: 1 !important;
    transform: none !important;
  }
  .gen-wait__pulse,
  .gen-wait__text,
  .gen-spinner {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §19  ChartCard — 三段式悬浮盘面卡（D5 阶段）
   spec §4 / §4.4：sticky 悬浮三段折叠卡，点击逐段展开/收起。
   作为 D6 ChatThread 对话页顶部 sticky 卡片，展示命盘信息。
   盘面子组件（KpBazi/KpTianpan/KpSanChuanSiKe/KpShensha）复用 §18 既有 class
   （.gen-bazi__pillars / .gen-pillar / .gen-tianpan__grid / .gen-tp-cell /
    .gen-sike__grid / .gen-sanchuan__list / .gen-ss-item 等），本节仅补 ChartCard
   自身布局 + KpBazi 紧凑修饰。复用 §1 设计 token（金/深金/奶油/棕）。
   🔴 起盘信息只显去标识非定位字段（农历/节气/夏令时），CSS 无特殊处理（数据层已白名单过滤）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 卡片外壳（sticky 悬浮，金顶装饰线，与 .card 一致语言）──────────────────── */
.cc-card {
  position: sticky;
  top: 8px;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  background: var(--cream);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  /* 用户要求（2026-05-29）：默认全展开且内容全显示、不出现卡内滚动条。
     故移除 max-height:70vh + overflow-y:auto，盘面卡随内容自适应高度撑开。 */
}

/* ── 段落容器 ─────────────────────────────────────────────────────────────── */
.cc-seg { width: 100%; }
.cc-seg--1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cc-seg--more {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

/* ── 上区块：左盘面 + 右命主（手机窄屏竖排，宽屏并排）────────────────────────── */
.cc-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cc-top__chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-top__master {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 小标签（深金色小标题，复用揭晓块标签语言）*/
.cc-mini-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold-deep);
  text-transform: uppercase;
}

/* 课体 / 月将行 */
.cc-keti-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cc-keti-val {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-deep);
}

/* 命主姓名 / 元信息（性别·生肖）/ 年命四柱 */
.cc-master__name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brown);
  margin: 0;
}
.cc-master__meta {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cc-master__meta .cc-dot { color: var(--border-light); }
.cc-master__nianming {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

/* ── KpBazi 紧凑修饰（ChartCard 小型四柱用；不改 .gen-pillar 子元素结构）────────── */
.gen-bazi__pillars--compact { gap: 6px; }
.gen-bazi__pillars--compact .gen-pillar { padding: 5px 3px; }
.gen-bazi__pillars--compact .gen-pillar__gan,
.gen-bazi__pillars--compact .gen-pillar__zhi { font-size: 1rem; }
.gen-bazi__pillars--compact .gen-pillar__cn { font-size: 0.62rem; }

/* ── 分隔线 ───────────────────────────────────────────────────────────────── */
.cc-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2px 0;
}

/* ── 起盘信息 ─────────────────────────────────────────────────────────────── */
.cc-casting { display: flex; flex-direction: column; gap: 8px; }
/* 起盘四柱块（起盘信息内，2026-05-30 用户：起盘四柱移入此处）：标签 + 四柱上下排 */
.cc-casting__bazi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-casting__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* 九宗门派金色角标（中性表述，不暴露引擎名）*/
.cc-badge {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold-deep);
  background: linear-gradient(135deg, rgba(21, 84, 90, 0.18), rgba(14, 60, 65, 0.10));
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 2px 10px;
}
.cc-casting__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-casting__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cc-casting__dt {
  flex-shrink: 0;
  width: 124px;            /* 加宽(原88px),让英文标签(如"True Solar Time")不换行(用户反馈) */
  white-space: nowrap;     /* 标签不换行 */
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.cc-casting__dd {
  margin: 0;
  font-size: 0.82rem;
  color: var(--brown);
  font-family: var(--font-serif);
}
/* 空亡行：多个旬空地支并排，地支之间留间距（五行配色由 .wx-* class 注入，本处不设颜色） */
.cc-casting__dd--xunkong {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 8px;
}
.cc-casting__empty {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

/* ── 月将 / 空亡 / 日干寄宫 一排同框（用户要求 2026-05-29：三者并排横向一框）──────────
   横向 flex 三项并排；窄屏 flex-wrap 自动换行。整框奶白底 + 金边，与起盘信息语言一致。 */
.cc-summary-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 8px 12px;
  background: var(--warm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
/* 单项：标签 + 值横向（值用 font-serif 强调，五行配色由 .wx-* class 注入）*/
.cc-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cc-summary-item__label {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.cc-summary-item__val {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-deep);
}
/* 空亡：多个旬空地支并排留间距（五行配色由 .wx-* class 注入，本处不设颜色）*/
.cc-summary-item__val--xunkong {
  flex-wrap: wrap;
  gap: 0 8px;
}

/* ── 余额行 + 加购按钮 ────────────────────────────────────────────────────── */
.cc-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.cc-balance__text {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-deep);
  font-family: var(--font-serif);
}
.cc-balance__add {
  flex-shrink: 0;
  font-size: 0.8rem;
  padding: 6px 12px;
}

/* ── 展开/收起切换 ────────────────────────────────────────────────────────── */
.cc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px dashed var(--border);
  padding: 8px 4px 2px;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--gold-deep);
}
.cc-toggle:hover,
.cc-toggle:focus-visible { color: var(--gold); }
.cc-toggle__arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.cc-toggle__arrow.is-open { transform: rotate(180deg); }

/* ── 第二/三段盘面块 ──────────────────────────────────────────────────────── */
.cc-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 三传四课块：KpSanChuanSiKe 多根节点（两个 .gen-sub）作为本块直接子节点，竖排留白 */
.cc-block--scsk {
  gap: 12px;
}

/* 日干寄宫块：日干字 → 寄宫地支，每字五行配色（class 由后端 *Wx 经 wxClass 给出） */
.cc-jigong-val {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
}
/* 寄宫箭头：中性符号，弱化色，不参与五行配色 */
.cc-jigong-arrow {
  color: var(--brown);
  opacity: 0.6;
  font-weight: 400;
}

/* reduce-motion：关闭箭头旋转过渡 */
@media (prefers-reduced-motion: reduce) {
  .cc-toggle__arrow { transition: none !important; }
}

/* PC 宽屏：上区块左盘面 + 右命主并排，更舒展 */
@media (min-width: 560px) {
  .cc-top {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }
  .cc-top__chart { flex: 1 1 0; min-width: 0; }
  .cc-top__master { flex: 1 1 0; min-width: 0; }

  /* 🔴 填了命主年命时强制上下排（覆盖上面 PC 的左右并排）：
     右栏多一组年命四柱会与左栏盘面四柱左右并排但高度不齐显乱，改为盘面四柱在上、
     命主信息整块在下，整齐。两栏恢复全宽不再 flex:1 均分。 */
  .cc-top--stacked {
    flex-direction: column;
    gap: 12px;
  }
  .cc-top--stacked .cc-top__chart,
  .cc-top--stacked .cc-top__master {
    flex: none;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §20  ChatThread — 对话页（D6 阶段）
   spec §4.10/§4.11/§4.12：单列对话流，手机/PC 同一套。
     - 顶部 sticky：ChartCard（§19）含余额行 + 加购入口。
     - 中间滚动区：问/答气泡流（用户气泡靠右金调，AI 气泡靠左奶油调）。
       🔴 每条已审 AI 答案末尾紧跟免责（.ct-bubble__disclaimer，弱化色小字）。
     - 底部 sticky：仅追问输入条 AskInput（🔴 CTA 不在此页）；closed 只读无输入条；
       追问用尽 → 金色加购提示卡（.ct-exhausted）。
     - 加购确认弹窗（.ct-modal-*）：居中遮罩，确认 → 整页跳 Stripe。
   复用 §1 设计 token（金/深金/奶油/棕/边框）+ §4 .btn 原子类 + §18 gen-spin keyframes。
   🔴 本节零盘面样式（盘面全在 §18/§19 子组件）；对话页只排问答文本布局。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 页面外壳：纵向 flex，顶/底 sticky 夹住中间滚动区 ───────────────────────── */
.ct-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  /* 视口高度约束：顶 ChartCard + 中滚动 + 底输入条三段布局；min-height 防内容少时塌陷 */
  min-height: 60vh;
  gap: 12px;
}

/* 顶部盘面卡容器（ChartCard 自身已 position:sticky，本容器仅占位与留白） */
.ct-top {
  width: 100%;
}

/* ── 中间滚动区：气泡流 ─────────────────────────────────────────────────────── */
.ct-stream {
  flex: 1 1 auto;
  min-height: 200px;
  /* 内部滚动：长对话时仅气泡流滚动，顶/底 sticky 不动 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 2px;
}

/* 🔴 底部锚点（零高度占位）：ChatThread 自动滚动 scrollIntoView 的目标 + 贴底判定基准。
   不占视觉空间（高度 0）。注：flex gap 对零高度子项仍生效，会在最后一条消息与锚点间留 16px，
   视觉无害（锚点不可见，仅底部多 16px 留白）。
   🔴 scroll-margin-bottom:88px：scrollIntoView({block:'end'}) 把锚点对齐到视口底边时，
   底部 sticky 输入条（.ct-bottom，约 60~70px）会盖住最后一条消息末行；scroll-margin-bottom
   让浏览器在对齐时为锚点底部预留 88px 空间（> 输入条高度），使最后一条消息完整露出不被遮。 */
.ct-stream__anchor {
  height: 0;
  flex: 0 0 auto;
  scroll-margin-bottom: 88px;
}

/* 加载中 / 加载失败 状态块（居中提示） */
.ct-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-secondary);
}
.ct-state__msg {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text);
}

/* ── 单个 turn（用户问题 + AI 答案）─────────────────────────────────────────── */
.ct-turn {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 气泡通用 */
.ct-bubble {
  max-width: 88%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  font-family: var(--font-serif);
  line-height: 1.65;
}

/* 用户问题气泡：靠右，金调浅底（与品牌色呼应，区别于 AI 答案） */
.ct-bubble--user {
  align-self: flex-end;
  background: rgba(21, 84, 90, 0.14);  /* 金色浅底 */
  border: 1px solid var(--border-light);
  border-top-right-radius: var(--radius-sm);
}

/* AI 答案气泡：靠左，奶油底 + 金色左线（与 .card--accent 同语言） */
.ct-bubble--ai {
  align-self: flex-start;
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-top-left-radius: var(--radius-sm);
}

/* 气泡文本（用户问题 / AI 答案正文）：保留换行（答案多段），不允许 HTML（Vue 文本插值已转义） */
.ct-bubble__text {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  white-space: pre-wrap;      /* 保留答案内换行与多段排版 */
  word-break: break-word;     /* 长串/URL 不撑破气泡 */
}
/* 🔴 防 Astra 主题渗透：WP 文章容器 `.entry-content p { margin-bottom }`（特异度 0,0,1,1）
   会盖过上面的 margin:0，导致每个气泡 p（尤其用户问题气泡）下方多出一大块空白。
   #ai-app + !important 钉死归零（与 §6 .ai-topbar__btn 防 Astra 白字同款范式）。 */
#ai-app .ct-bubble__text {
  margin: 0 !important;
}
.ct-bubble__answer {
  font-size: 1rem;
}

/* 🔴 §4.12 免责：紧跟每条已审 AI 答案下方，弱化色小字（只圈 AI 输出） */
.ct-bubble__disclaimer {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--text-secondary);
  font-size: 0.72rem;
  line-height: 1.5;
  font-style: italic;
}

/* AI 答案生成中提示（streaming/reviewing；🔴 无未审文本，仅提示 + spinner） */
.ct-bubble__pending {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-style: italic;
}

/* 中断·未扣费提示 */
.ct-bubble__interrupted {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 0.92rem;
}
/* 失败轮重试按钮（小尺寸 ghost） */
.ct-bubble__retry {
  font-size: 0.85rem;
  padding: 6px 14px;
}

/* ── 底部区域（sticky）：输入条 / closed 提示 / 用尽加购卡 ─────────────────── */
.ct-bottom {
  position: sticky;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--paper, #fff);
  padding-top: 8px;
}

/* 议题已关闭（closed）只读提示 */
.ct-closed {
  padding: 14px 16px;
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.ct-closed__msg {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 0.92rem;
}

/* 追问输入条 AskInput：输入框 + 发送按钮横排 */
.ct-ask {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-card);
}
.ct-ask__input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  max-height: 120px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper, #fff);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.5;
}
.ct-ask__input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(21, 84, 90, 0.2);
}
.ct-ask__input.is-disabled,
.ct-ask__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* 发送按钮：不收缩，与输入框底对齐 */
.ct-ask__send {
  flex-shrink: 0;
  white-space: nowrap;
}
/* 🔴 发送按钮内边距改为 14px 14px（用户要求 2026-06-02）。
   按钮带 .btn.btn--primary，默认 padding 由 `#ai-app button.btn { padding:14px 40px }`（特异度 0,1,1,1）给定，
   左右 40px 过宽；此处用 `#ai-app button.ct-ask__send`（同特异度 0,1,1,1，§20 后定义胜出）收窄为 14px 14px。 */
#ai-app button.ct-ask__send {
  padding: 14px 14px;
}

/* ── 追问用尽态加购卡（spec §4.11，金色突出）──────────────────────────────── */
.ct-exhausted {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: linear-gradient(180deg, rgba(21, 84, 90, 0.12), rgba(21, 84, 90, 0.04));
  border: 1px solid var(--gold);
  border-radius: var(--radius-card);
  text-align: center;
}
.ct-exhausted__title {
  margin: 0 0 12px;
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  font-weight: 700;
}
.ct-exhausted__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ── 加购确认弹窗（spec §4.11）────────────────────────────────────────────── */
.ct-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(29, 43, 44, 0.45);   /* 棕调半透明遮罩 */
}
.ct-modal {
  width: 100%;
  max-width: 360px;
  /* 🔴 防小屏/大字号被裁切（红队第2轮 Low-1，与 .consent-card / .dmd-modal 同口径加固） */
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 22px 20px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover);
}
.ct-modal__title {
  margin: 0 0 8px;
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
}
.ct-modal__desc {
  margin: 0 0 18px;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.6;
}
.ct-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ──────────────────────────────────────────────────────────────────────────────
   加购弹框·套餐选项行（2026-06-04 行业标准 option-row 重做）
   参考：Salt/Cieden/NN-G 可选卡片(radio 单选·整行可点·单列垂直·价格固定右侧)
        + Shopify 订阅 inline pricing。
   行内三栏：[radio 左] · [追问数+最划算标 中 flex:1] · [价格上/每追问单价下 右对齐]。
   ────────────────────────────────────────────────────────────────────────────── */
.ct-buy-grid {
  display: flex;
  flex-direction: column;   /* 单列垂直（行业：选项行单列对齐最易扫读） */
  gap: 10px;
  margin: 8px 0 18px;
}
/* 单个选项行：整行可点的横向布局 */
/* 🔴 用 #ai-app button.ct-buy-row 提特异度(0,1,1,1)：否则被 §10 全局重置
   `#ai-app button { padding:0 }`(特异度 0,1,1)压住，单类 .ct-buy-row(0,1,0) 的 padding 不生效。
   与 §20 `#ai-app button.ct-ask__send` 同款修正范式。 */
#ai-app button.ct-buy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 3px;             /* 用户实测：内容到行边框 3px 观感最佳（行高由内容撑起，仍是合理点击区） */
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--cream);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
/* hover/selected 改 border-color/background：同样需 #ai-app button 提特异度，否则被全局 border:none/background:none 压住 */
#ai-app button.ct-buy-row:hover:not(:disabled) { border-color: var(--gold); }
.ct-buy-row:disabled { cursor: default; }
.ct-buy-row--best {
  order: -1;   /* 最划算置顶（仅改视觉顺序，不动数据顺序） */
}
#ai-app button.ct-buy-row--selected {
  border-color: var(--gold);
  background: rgba(21, 84, 90, .07);             /* 极淡金底强调选中 */
  box-shadow: 0 0 0 2px rgba(21, 84, 90, .30);   /* 与 --gold 同色高亮环 */
}
/* 左：radio 圆圈（选中时内填金色圆点；内容缩小一档 20→18） */
.ct-buy-row__radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  position: relative;
  transition: border-color .15s;
}
.ct-buy-row--selected .ct-buy-row__radio {
  border-color: var(--gold);
}
.ct-buy-row--selected .ct-buy-row__radio::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--gold);
  border-radius: 50%;
}
/* 中：追问数量（独占中栏，最划算标已移到右栏 per 左侧，不挤压本栏） */
.ct-buy-row__mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;                  /* 追问数与 badge 角标的间距 */
}
.ct-buy-row__count {
  font-size: 0.92rem;       /* 追问数文字（用户微调 0.95→0.92） */
  font-weight: 700;
  color: var(--text);
}
/* 后端 badge 角标（运营后台可配，紧跟追问数；badge 非空才渲染） */
.ct-buy-row__badge {
  font-size: 0.58rem;
  letter-spacing: .04em;
  font-weight: 700;
  color: #fff;
  background: var(--gold);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
/* 右：划线原价(上,删除线) + 实收价 + save%&每追问单价(下)，右对齐固定列 */
.ct-buy-row__pricing {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.2;
}
/* 划线原价（删除线弱化色，独立成行）；compareAtText 为空时不渲染。
   🔴 text-decoration 加 !important 防 Astra 主题重置删除线（参照 Astra 渗透问题）。 */
.ct-buy-row__compare {
  font-size: 0.78rem;
  font-weight: 500;
  color: #42585a;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(66, 88, 90, 0.85);
  line-height: 1;
}
/* 价格行：save%（左，紧挨价格）+ 实收价（右），横向一组，整体右对齐 */
.ct-buy-row__price-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.ct-buy-row__price {
  font-size: 1.18rem;       /* 缩小一档 1.3→1.18 */
  font-weight: 700;
  color: var(--gold-deep);
}
/* 下行：badge 角标（左）+ 每追问单价（右），横向一组 */
.ct-buy-row__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
/* 节省百分比（save% pill）；savePercent 为空时不渲染 */
.ct-buy-row__save {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--gold-deep);
  background: rgba(21, 84, 90, 0.18);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ct-buy-row__per {
  font-size: 0.72rem;       /* 缩小一档 0.76→0.72 */
  color: var(--text-secondary);
}
.ct-buy-loading, .ct-buy-empty {
  padding: 24px 0; text-align: center; color: var(--text-secondary); font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
/* 弹框底部按钮：取消(次)窄 + 支付(主)宽，等高，完全在弹窗内不溢出 */
.ct-buy-modal .ct-modal__actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.ct-buy-modal .ct-modal__actions .btn {
  white-space: nowrap;
  justify-content: center;
}
.ct-buy-modal .ct-modal__actions .btn--ghost {
  flex: 0 0 auto;     /* 取消按钮按内容宽度，不抢空间 */
  padding-left: 16px;
  padding-right: 16px;
}
.ct-buy-modal .ct-modal__actions .btn--primary {
  flex: 1 1 auto;     /* 支付主按钮占据剩余宽度，醒目 */
}

/* ── spinner（复用 §18 gen-spin keyframes；金色轨道版，与 .picker-spinner 同尺寸语言）── */
.ct-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid rgba(21, 84, 90, 0.3);   /* 金色半透明轨道 */
  border-top-color: var(--gold);
  border-radius: 50%;
  vertical-align: middle;
  animation: gen-spin 0.7s linear infinite;     /* 复用 §18 @keyframes gen-spin */
}

/* reduce-motion：关闭 spinner 旋转（无障碍） */
@media (prefers-reduced-motion: reduce) {
  .ct-spinner { animation: none !important; }
  .ct-stream { scroll-behavior: auto; }
}

/* PC 宽屏：气泡略收窄留白更舒展，弹窗稍宽 */
@media (min-width: 768px) {
  .ct-bubble { max-width: 78%; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §21  HistoryView — 历史对话页（D7，spec §4.5）
   ─────────────────────────────────────────────────────────────────────────
   双态：
     - 列表态：双列自适应网格（repeat(auto-fit, minmax(280px,1fr))，宽屏 2-3 列、
       手机单列），每议题一张卡（首问 / 命主姓名·起盘时间·课名 / 状态徽标）。
       底部 Load more 分页；空态 / spinner 加载中 / 失败重试。
     - 回看态：复用 ChatThread（§20）+ 顶部 Back 返回条。
   复用 §1 设计 token（金 #c9a44b / 深棕 / 奶油 / 边框 / Lora）+ §4 .btn 原子类
   + §5 .card--flat（卡片：奶油底 + 顶部 3px 金线）+ §7 .badge 原子类
   + §18 @keyframes gen-spin（spinner）。
   🔴 本节零盘面样式（盘面全在 §18/§19 子组件，由回看态 ChatThread 承载）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 页面外壳 ───────────────────────────────────────────────────────────── */
.hv-page {
  width: 100%;
  max-width: 1000px;                 /* 网格居中容器最大宽度（spec：max-width:1000px 居中）*/
  margin: 0 auto;
  padding: 16px 16px 32px;
  box-sizing: border-box;
}

/* 页面标题（复用对话/视图标题语言：Lora 衬线 + 深棕）*/
.hv-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--brown);
  margin: 8px 0 18px;
  text-align: center;
}

/* ── 状态占位（加载中 / 失败 / 空态）通用容器 ─────────────────────────────── */
.hv-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-serif);
}
.hv-state__msg {
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.hv-empty__text {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* ── 双列自适应网格 ─────────────────────────────────────────────────────── */
.hv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  /* 宽屏 2-3 列 / 手机单列 */
  gap: 16px;
}

/* ── 议题卡片（复用 .card--flat：奶油底 + 顶部 3px 金线 + 边框）────────────── */
.hv-card {
  cursor: pointer;                    /* 整卡可点击 */
  /* 2026-06-06 卡片美化：更紧凑（右侧留出「…」按钮空间，避免与状态徽标重叠）*/
  padding: 13px 16px;
  padding-right: 40px;                /* 右内边距给「…」按钮让位 */
  display: flex;
  flex-direction: column;
  gap: 5px;                           /* 元素间距收紧（原 8px）*/
  position: relative;                 /* 「…」按钮 / 小菜单绝对定位锚点 */
  transition: box-shadow var(--transition), transform var(--transition);
}
.hv-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* 键盘焦点可见（无障碍：tabindex 卡片聚焦时金色描边）*/
.hv-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* 第一行：首问（深色主文字，最多两行省略号防溢出）*/
.hv-card__question {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  /* 限两行省略（webkit 多行截断，主流浏览器通用）*/
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 时间 · 课名 行（2026-06-06：时间 + 课名同一行，灰色小字；命主姓名已去除） */
.hv-card__time {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-secondary); /* 弱化次要信息 */
  line-height: 1.35;
}

/* 状态徽标容器 */
.hv-card__status {
  margin-top: 1px;
}

/* ── 右下角「…」更多菜单按钮（2026-06-06 软删入口）──────────────────────── */
.hv-card__more {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.hv-card__more:hover,
.hv-card__more:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  outline: none;
}

/* 「…」小菜单（绝对定位于按钮上方右侧，浮层）*/
.hv-card__menu {
  position: absolute;
  right: 8px;
  bottom: 40px;                       /* 浮在「…」按钮上方 */
  z-index: 5;
  min-width: 180px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
  padding: 4px;
  cursor: default;                    /* 菜单区不继承整卡 pointer */
}
/* 菜单项：删除操作项。🔴 用 #ai-app 前缀提特异度(0,1,1)≥全局 #ai-app button，
   防 Astra/全局 button:hover 样式覆盖 color 导致 hover 时文字与背景同色看不见。
   删除是危险操作 → 默认深红字 + 行内删除图标语义；hover 柔和红底 + 红字（始终显式设 color）。*/
#ai-app .hv-card__menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: #b3261e;                        /* 删除危险红（深，与白底高对比） */
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
#ai-app .hv-card__menu-item:hover,
#ai-app .hv-card__menu-item:focus-visible {
  background: rgba(179, 38, 30, 0.10);   /* 柔和红淡底 */
  color: #8c1d18;                        /* 🔴 hover 显式设深红字，绝不留给全局覆盖（根治撞色） */
  outline: none;
}

/* ── 软删二次确认弹窗（复用 .ct-modal-overlay/.ct-modal 范式）──────────────── */
.hv-confirm {
  max-width: 420px;
}
.hv-confirm__title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--text);
}
.hv-confirm__body {
  margin: 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.hv-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
/* 「移除」确认按钮（危险态：复用 primary 形态但偏告警语义）*/
.hv-confirm__danger {
  min-width: 96px;
}

/* ── Load more 分页区 ───────────────────────────────────────────────────── */
.hv-more {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* ── 回看态返回条 ───────────────────────────────────────────────────────── */
.hv-back {
  margin-bottom: 14px;
}
/* 轻量文字链接式返回（← Back）：弱化色、无边框无底、不抢视觉；hover 才显金色 + 箭头左移。
   🔴 不再复用 .btn--secondary（那是大金边胶囊，在回看态顶部太突兀）。
   🔴 用 #ai-app 前缀提特异度(0,1,1)≥全局 #ai-app button 重置，保 padding/font 不被压（Astra 渗透防护）。*/
#ai-app .hv-back__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-secondary, #42585a);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition);
}
#ai-app .hv-back__btn:hover {
  color: var(--gold-deep);
}
.hv-back__arrow {
  font-size: 1.05rem;
  line-height: 1;
  transition: transform var(--transition);
}
.hv-back__btn:hover .hv-back__arrow {
  transform: translateX(-3px);   /* hover 箭头左移，强化"返回"语义 */
}

/* ── spinner（复用 §18 gen-spin keyframes；金色轨道版，与 .ct-spinner 同语言）── */
.hv-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(21, 84, 90, 0.3);   /* 金色半透明轨道 */
  border-top-color: var(--gold);
  border-radius: 50%;
  vertical-align: middle;
  animation: gen-spin 0.7s linear infinite;     /* 复用 §18 @keyframes gen-spin */
}
/* Load more 按钮内联 spinner：右侧留白 */
.hv-spinner--inline {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

/* reduce-motion：关闭 spinner 旋转（无障碍）*/
@media (prefers-reduced-motion: reduce) {
  .hv-spinner { animation: none !important; }
  .hv-card { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §22  DeleteMyData — GDPR 数据删除入口（D8，spec §4.13「不显眼」账户操作）
   ─────────────────────────────────────────────────────────────────────────
   形态：顶栏低调「Account」按钮 → 轻量弹层（modal overlay，叠在当前视图上）。
   弹层三态（弹层级 step）：entry（删除入口）→ confirm（二次确认）→ success（删除成功）。
   复用 §1 设计 token（金 #c9a44b / 深金 / 奶油 / 棕 / 边框 / Lora）+ §4 .btn 原子类
   + §18 @keyframes gen-spin（spinner）+ §20 .ct-modal-* 同款 modal 范式。
   🔴 本节零盘面样式（删除入口不涉盘面，无命理 know-how）。
   新增 .btn--danger（危险操作按钮变体，红棕调）——项目原仅有 primary/secondary/ghost，
   删除是高风险操作，需视觉区分（沿用 .btn 原子基类，仅覆盖配色）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 顶栏 Account 按钮（低调入口，与 .ai-topbar__btn 同语言但更弱化）─────────── */
.ai-topbar__account-btn {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--text-secondary);                 /* 次文字色：低调不抢眼（弱于 History 的深金）*/
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
}
.ai-topbar__account-btn:hover,
.ai-topbar__account-btn:focus-visible,
#ai-app .ai-topbar__account-btn:hover,
#ai-app .ai-topbar__account-btn:focus,
#ai-app .ai-topbar__account-btn:focus-visible {
  color: var(--brown) !important;                 /* 深棕字(防Astra白字),浅金底清晰 */
  background-color: rgba(21, 84, 90, 0.22) !important;  /* 与性别选中同色 */
  outline: none;
}

/* ── 危险操作按钮变体（.btn--danger）：删除等高风险操作，红棕调 ─────────────── */
.btn--danger {
  background-color: #9b3f2f;                     /* 红棕：与品牌暖色调协调的危险色 */
  color: var(--cream);
}
.btn--danger:hover,
.btn--danger:focus-visible {
  background-color: #7e3326;                     /* hover 加深 */
  color: var(--cream);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
  outline: none;
}
.btn--danger:disabled {
  background-color: #c19084;                     /* disabled 淡化（与基类 :disabled 配合）*/
  color: var(--cream);
}

/* ── 弹层遮罩（复用 §20 .ct-modal-overlay 语言：固定全屏 + 棕调半透明遮罩）──── */
.dmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(29, 43, 44, 0.45);            /* 棕调半透明遮罩（与 .ct-modal-overlay 同口径）*/
}

/* ── 弹层卡片（复用 §20 .ct-modal 语言：奶油底 + 顶部 3px 金线 + 圆角阴影）──── */
.dmd-modal {
  width: 100%;
  max-width: 400px;
  /* 🔴 防小屏/大字号被裁切（红队第2轮 Low-1，与 .consent-card 同口径加固）：
     视口高度 90% 上限 + 内部滚动条，弹层超长时优先保留可关闭/可操作 */
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 24px 22px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover);
}

/* 弹层标题（Lora 衬线 + 深金，与 .ct-modal__title 同语言）*/
.dmd-modal__title {
  margin: 0 0 10px;
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
}
/* 二次确认态标题用危险色强调（更醒目，提示高风险）*/
.dmd-modal__title--danger {
  color: #9b3f2f;
}

/* 弹层说明文字（与 .ct-modal__desc 同语言）*/
.dmd-modal__desc {
  margin: 0 0 18px;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 删除入口区块（entry 态：小标题 + 告知文案）*/
.dmd-section {
  margin: 0 0 18px;
  padding: 14px 14px;
  background: var(--warm);                       /* 暖白底，与卡片奶油底拉开层次 */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.dmd-section__heading {
  margin: 0 0 8px;
  color: var(--text-accent);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
}
.dmd-section__desc {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Privacy Policy 链接行（紧随 desc，小字，与 desc 同色系）*/
.dmd-section__privacy {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* Privacy Policy 可点链接（深金色下划线，复用 ConsentGate .consent-privacy-link 视觉语言）*/
.dmd-privacy-link {
  color: var(--gold-deep);           /* 深金色链接，与主题一致 */
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color 0.2s;
  cursor: pointer;
}
.dmd-privacy-link:hover,
.dmd-privacy-link:focus {
  color: var(--gold);                /* hover 变浅金色 */
  outline: none;
}

/* 操作按钮行（右对齐，与 .ct-modal__actions 同语言）*/
.dmd-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* ── spinner（复用 §18 gen-spin keyframes；删除进行中按钮内联）──────────────── */
.dmd-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid rgba(243, 247, 246, 0.4);    /* 奶油半透明轨道（衬危险色按钮底）*/
  border-top-color: var(--cream);
  border-radius: 50%;
  vertical-align: middle;
  animation: gen-spin 0.7s linear infinite;      /* 复用 §18 @keyframes gen-spin */
}

/* reduce-motion：关闭 spinner 旋转（无障碍）*/
@media (prefers-reduced-motion: reduce) {
  .dmd-spinner { animation: none !important; }
}

/* ── 额度套餐展示区块（额度桶重构阶段5）──────────────────────────────────────
   复用 §22 .dmd-section 暖白底卡片语言；内列出可用/已用套餐桶。
   合规：中性词，无盘面、无玄学 know-how。 */
.dmd-lots { /* 复用 .dmd-section 基样式，仅作语义锚点，无额外覆盖 */ }

/* 加载失败重试按钮（小尺寸 ghost，紧随错误文案）*/
.dmd-lots__retry {
  margin-top: 10px;
  padding: 6px 14px;
  font-size: 0.85rem;
}

/* 套餐桶列表（无序列表去默认样式）*/
.dmd-lot-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
/* 已用桶列表与可用桶列表之间留间距 */
.dmd-lot-list--used {
  margin-top: 8px;
}

/* 单个套餐桶行（名称 + 元信息两端对齐，换行自适应）*/
.dmd-lot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--cream);                       /* 奶油底，衬于 §22 暖白区块上拉开层次 */
  font-family: var(--font-serif);
}
.dmd-lot + .dmd-lot {
  margin-top: 6px;
}

/* 套餐名（主信息，深金强调）*/
.dmd-lot__name {
  color: var(--gold-deep);
  font-size: 0.92rem;
  font-weight: 700;
}

/* 元信息容器（剩余/总 + 追问数，右侧）*/
.dmd-lot__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 0.82rem;
}

/* 剩余/总 议题数（可用桶主数据，次文字色）*/
.dmd-lot__remaining {
  color: var(--text-secondary);
  font-weight: 600;
}

/* 已用完标记（已用桶）*/
.dmd-lot__used-tag {
  color: var(--text-secondary);
  font-weight: 600;
}

/* 每议题追问数（小字、淡色，附属信息）*/
.dmd-lot__followup {
  color: var(--text-secondary);
  opacity: 0.85;
}

/* ── 已用套餐桶整体置灰（与可用桶视觉拉开）──────────────────────────────── */
.dmd-lot--used {
  background: var(--warm);                         /* 暖白底，弱化 */
  opacity: 0.6;                                    /* 整体置灰，表示不再可用 */
}
.dmd-lot--used .dmd-lot__name {
  color: var(--text-secondary);                    /* 名称降为次文字色（去金强调）*/
}

/* ── 套餐桶单行卡片改造（2026-06-02：文案对齐选桶下拉「名 — 剩余X问，每问可追问Y次」）──
   每个 .dmd-lot 内只含一个整行文案 .dmd-lot__label；覆盖原两端对齐为左对齐单行卡片，
   可用桶左侧加金色竖条（呼应选桶下拉的金色语言），已用桶靠 .dmd-lot--used 置灰。 */
.dmd-lot {
  display: block;                                  /* 覆盖原 flex 两端对齐，改单行整块 */
  padding: 9px 12px;
  border-left: 3px solid var(--gold);             /* 金色左条：可用桶强调（与 .ct-bubble--ai 同语言）*/
}
/* 已用桶左条降为灰，弱化 */
.dmd-lot--used {
  border-left-color: var(--border);
}
/* 整行文案（套餐名 + 剩余/追问，与选桶下拉同款措辞）*/
.dmd-lot__label {
  display: block;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
}
/* 已用桶文案降为次文字色 */
.dmd-lot--used .dmd-lot__label {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ── 套餐桶分页条（上一页 · 第X/Y页 · 下一页）──────────────────────────────── */
.dmd-lots__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
/* 翻页按钮（圆形金边小按钮）*/
.dmd-lots__pager-btn,
#ai-app button.dmd-lots__pager-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--gold-deep);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition), opacity var(--transition);
}
.dmd-lots__pager-btn:hover:not(:disabled),
#ai-app button.dmd-lots__pager-btn:hover:not(:disabled),
#ai-app button.dmd-lots__pager-btn:focus-visible {
  color: var(--cream) !important;
  background-color: var(--gold) !important;
  outline: none;
}
/* 禁用态（首/末页）：淡化不可点 */
.dmd-lots__pager-btn:disabled,
#ai-app button.dmd-lots__pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* 页码信息（第 X / Y 页）*/
.dmd-lots__pager-info {
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 64px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §24 流式平滑打字机·末段逐字渐显（2026-06-04 流式体验优化）
   ─────────────────────────────────────────────────────────────────────────
   后端 SSE 每 ~0.4s 推「当前全文」（覆盖语义），前端用 rAF 恒速逐字追上（见
   js/stream_typewriter.js），把「已显示文本」拆为「已稳定 streamHead」+「末段
   streamTail」。末段用此 class 包裹并以变化的 :key 重挂，每次重挂触发 fade-in
   动画 → 新追上的字符渐显，实现 ChatGPT/Claude 式平滑流出（非 0.4s 整段跳变）。
   对话页 .ct-stream-char 与揭晓页 .gen-stream-char 共用同一动画（视觉一致）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* 新追上字符的淡入关键帧（短促 0.28s，仅透明度——不位移不重排，避免逐字抖动/jank） */
@keyframes ct-stream-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 末段渐显片段：inline 不破坏文本流（与前文同一行/同段连续渲染），仅做透明度淡入 */
.ct-stream-char,
.gen-stream-char {
  display: inline;
  animation: ct-stream-fade-in 0.28s ease-out;
  will-change: opacity;                          /* 提示合成层，淡入更顺滑 */
}

/* 🔴 尊重无障碍：prefers-reduced-motion 时关闭渐显动画（直接全显，无淡入），
   与揭晓动画 reduce-motion 降级同口径，避免对动效敏感用户的不适。 */
@media (prefers-reduced-motion: reduce) {
  .ct-stream-char,
  .gen-stream-char {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §23  裂变邀请 — MyReferral 面板 + ShareReferral 分享弹层（P5/P8/P8b）
   ─────────────────────────────────────────────────────────────────────────
   - MyReferral：内嵌 Account 弹层（DeleteMyData 入口态），复用 §22 .dmd-section
     暖白卡片语言 + §4 .btn 原子类；邀请码/链接/复制/分享 + 进度 + 三周期 + 输码。
   - ShareReferral：modal，复用 §22 .dmd-overlay/.dmd-modal；链接复制 + 各渠道分享按钮。
   🔴 自定义按钮/输入框一律用 `#ai-app` 前缀提特异度（0,1,1,0+），防 Astra 的
      `#ai-app button` 全局重置（§10）压住背景/边框/padding，与 §20/§22 同款范式。
   🔴 本节零盘面样式、无命理 know-how（纯裂变 UI）。
   复用 §1 设计 token（金/深金/奶油/暖白/边框/Lora）。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 我的邀请面板容器（复用 §22 .dmd-section，加一点强调）──────────────────── */
.referral {
  /* 继承 .dmd-section 暖白卡片样式；此处仅微调（顶部金线弱强调，与套餐区区分） */
}

/* 加载失败重试按钮间距 */
.referral__retry {
  margin-top: 8px;
}

/* 字段标签（链接/输码共用）：小字深金 */
.referral__field-label {
  display: block;
  margin: 10px 0 4px;
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 700;
}

/* 链接行容器 */
.referral__link-row {
  margin-top: 6px;
}

/* 链接框 + 复制按钮一行（窄屏自动换行）*/
.referral__link-box,
.share-link-box {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-top: 4px;
}

/* 只读链接输入框（#ai-app 提特异度，防 Astra input 全局样式覆盖）*/
#ai-app input.referral__link-input {
  flex: 1 1 200px;
  min-width: 0;                                   /* 防 flex 子项溢出 */
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 0.86rem;
  box-shadow: none;
}

/* 复制按钮：不被 .btn 拉伸过长（窄屏与输入框并排）*/
.referral__copy-btn {
  flex: 0 0 auto;
}

/* 邀请码行（前缀 + code）*/
.referral__code-line {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 0.84rem;
}
/* 邀请码本体：深金加粗 + 等宽感（letter-spacing 拉开便于读/抄）*/
.referral__code {
  color: var(--gold-accent);   /* 金色邀请码：核心可分享资产，金强调（营销点缀） */
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* 分享按钮（独占一行，主操作金色）*/
.referral__share-btn {
  margin-top: 10px;
}

/* ── 进度统计（三格等宽）──────────────────────────────────────────────────── */
.referral__stats {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.referral__stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--cream);
  text-align: center;
}
/* 统计数字（大号深金）*/
.referral__stat-num {
  color: var(--gold-accent);   /* 金色统计数字：关键营销数据强调（已邀/已付费/已得奖） */
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}
/* 统计标签（小字次要色）*/
.referral__stat-label {
  margin-top: 4px;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 0.74rem;
}

/* ── 三周期成功数列表（去 §10 .entry-content ul 默认 padding 用 list-style:none + 0）── */
.referral__periods {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;                                     /* 🔴 防 Astra .entry-content ul 左 padding */
}
.referral__period {
  padding: 6px 0;
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 0.85rem;
  border-bottom: 1px dashed var(--border);
}
.referral__period:last-child {
  border-bottom: none;
}

/* ── 手动输码区 ────────────────────────────────────────────────────────────── */
.referral__redeem {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.referral__redeem-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
/* 输码输入框（#ai-app 提特异度）*/
#ai-app input.referral__redeem-input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--warm);
  color: var(--brown);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  box-shadow: none;
}
#ai-app input.referral__redeem-input:disabled {
  opacity: 0.6;
}
.referral__redeem-btn {
  flex: 0 0 auto;
}

/* ── ShareReferral 分享弹层 ────────────────────────────────────────────────── */
/* 分享 modal 稍宽便于渠道按钮排布（复用 .dmd-modal 基样式）*/
.share-modal {
  max-width: 440px;
}

/* 渠道按钮组（自适应换行，每个按钮等宽弹性）*/
.share-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}

/* 渠道分享按钮（#ai-app 提特异度防 Astra button 重置；金边奶油底）*/
#ai-app button.share-channel-btn {
  flex: 1 1 auto;
  min-width: 88px;
  padding: 9px 12px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-btn);
  background: var(--cream);
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  box-shadow: none;
  text-transform: none;                           /* 防 Astra 大写化 */
}
#ai-app button.share-channel-btn:hover {
  background: var(--gold);
  color: #fff;
}

/* 分享弹层免责一行（弱化小字）*/
.share-disclaimer {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 0.74rem;
  line-height: 1.5;
}