/* ── charting/_base.css ── */
/*
 * 盘面替身的公共底座。
 *
 * 文件名以下划线开头是为了排序：writeCss 按文件名升序拼接 charting/ 下的 CSS，
 * `_` 在 ASCII 里排在小写字母之前，所以底座一定先于九门各自的样式表落地。
 *
 * 这里做三件事：
 *
 * 一是把应用的设计令牌搬进 .ppv 作用域。九门的样式基本是从应用的 CSS Module 抄过来的，
 * 那些规则通篇引用 --zd-*；令牌在这里就位，抄过来的规则改动最小，往后应用调令牌，
 * 这边照着改一处就跟上了。刻意不挂在 :root —— 品牌站自己有一套 --ink/--line/--accent，
 * 两套令牌漫到一起，改哪一套都说不清会动到哪里。
 *
 * 二是画外壳：页眉、分栏、纸面、圆角、发丝线。九门共用同一个外壳，看起来才像同一个应用里
 * 的九页，而不是九张风格各异的图。
 *
 * 三是给九门备一批公共件（.pp-card / .pp-gz / 五行配色 / .pp-grid-hair），
 * 免得同一条发丝线在九个文件里各写一遍、各写歪一点。
 */

/* ── 作用域令牌 ────────────────────────────────────────────────────────────── */

/*
 * 令牌挂在 .ppz 上，排盘卡片与整页排盘两处外壳都套它——两者用同一套字号、线宽与配色，
 * 令牌只该有一份。刻意不挂 :root：品牌站自己有一套 --ink/--line/--accent，两套令牌漫到
 * 一起，改哪一套都说不清会动到哪里。
 */
.ppz {
  display: block;
  width: 100%;
  color: var(--zd-text);
  font-family: var(--zd-font-sans);
  text-align: left;

  /* 与应用 src/shared/styles/tokens.css 同值。改这里之前先看那边是不是也改了。 */
  --zd-bg: #faf9f5;
  --zd-surface: #fff;
  --zd-line: #cab49f;
  --zd-text: #000;
  --zd-muted: #8f6f4c;
  --zd-accent: #ec631f;
  --zd-selected-bg: rgba(255, 219, 206, 0.18);
  --zd-radius-card: 10px;

  /*
   * 应用里自带一份思源宋体子集（ZD Song）。官网不便再背一份字体，退到系统衬线——
   * 干支、星曜这些常用字在 Songti SC / Source Han Serif 里都有，观感一致。
   */
  --zd-font-serif: var(--font-serif);
  --zd-font-sans: var(--font-sans);

  /* 五行配色，与 src/shared/lunar/lunar.ts 的 WUXING_COLORS 同值。 */
  --wx-wood: #266f40;
  --wx-fire: #b73f42;
  --wx-earth: #753f2d;
  --wx-metal: #d59531;
  --wx-water: #2c679f;
}

/*
 * 应用的卡片用 `composes: zdHairline from global` 把这条工具类组合上来。CSS Module 的组合
 * 搬不过来，所以改成在 HTML 上直接写 `class="liuyaoCard zdHairline"`，规则照抄
 * src/shared/styles/global.css，一个字节没改。
 *
 * 原理：叠一层 1.6px 边框的伪元素再整体 scale(.5) 压成 0.8px，绕开 0.5px 在低 DPR 上被
 * 取整回 1px 的问题。
 */
.ppz .zdHairline,
.ppz .zdHairlineBefore {
  position: relative;
  border: none;
  overflow: hidden;
}

.ppz .zdHairline::after,
.ppz .zdHairlineBefore::before {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 0.5px;
  right: auto;
  bottom: auto;
  width: calc(200% - 2px);
  height: calc(200% - 2px);
  border: 1.6px solid var(--zd-line);
  border-radius: var(--zd-hairline-radius, calc(var(--zd-radius-card) * 2));
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;
  z-index: 1;
}

/* ── 排盘卡片（问 AI 对话里那张） ─────────────────────────────────────────── */

/*
 * 八门的排盘卡片在应用里是八个组件（src/h5/components/*ResultCard.tsx），但外壳完全一样：
 * 一圈发丝线、同一套内边距、左上角名字、右上角时间、右侧一个「›」。所以外壳收在这里，
 * 各门的 CSS 只写自己那块盘。
 *
 * 这张卡在应用里就是浮在对话流上的一张卡，底下是同一个米色纸面（--zd-bg 与品牌站的 --bg
 * 同值），所以这里也不给它底色——它落在官网的纸面上，与落在对话里是同一个样子。
 */
.ppc {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  /* 与整页排盘一样，它是一幅画：不接收指针事件，也不可选中。 */
  pointer-events: none;
  user-select: none;
  /*
   * 应用里右边会宽出一截给跳转用的「›」。官网这张卡不通向任何地方，那个记号只会引人去点，
   * 所以不画它，内边距也就左右等宽——与应用里展示态卡片的 .flush 同值。
   */
  padding: 16px 18px;
  border-radius: var(--zd-radius-card);
  background: transparent;
  color: var(--zd-text);
  text-align: left;
}

/*
 * 发丝线。照搬应用的 .zdHairline：画一个 1.6px 的边框再整体 scale(.5) 压成 0.8px。
 * 直接写 0.8px 会在低 DPR 屏上被取整回 1px，与应用里的观感就差一档。
 */
.ppc::after {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 0.5px;
  width: calc(200% - 2px);
  height: calc(200% - 2px);
  border: 1.6px solid var(--zd-line);
  border-radius: calc(var(--zd-radius-card) * 2);
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;
}

.ppc-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* 名字是动态内容（人名、占测事项），应用里刻意用非衬线避开宋体子集缺字。 */
.ppc-name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.ppc-gender {
  flex: none;
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--zd-accent);
}

.ppc-time {
  flex: none;
  font-size: 11px;
  color: var(--zd-muted);
}

/* 四柱一行：靠左、柱间一个空格宽，不铺满也不均分——与应用的 .pillars 同一口径。 */
.ppc-pillars {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
}

/* 四柱行：柱靠左，右边挂一条小注（月将 / 日空 / 地分），同行两端对齐。 */
.ppc-pr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.ppc-note {
  flex: none;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  color: var(--zd-muted);
}

/* 卡内分节的那条横线。应用里每张卡都用它把「头部信息」与「盘」分开。 */
.ppc-rule {
  border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
}

/* 阳爻一条实线、阴爻断成两截，总宽一致。六爻 / 梅花 / 筮法三门共用。 */
.ppc-yang,
.ppc-yin {
  display: inline-flex;
  width: 36px;
  height: 5px;
  flex: none;
}

.ppc-yang {
  border-radius: 1px;
  background: var(--zd-text);
}

.ppc-yin {
  justify-content: space-between;
}

.ppc-yin > span {
  display: block;
  width: 16px;
  height: 5px;
  border-radius: 1px;
  background: var(--zd-text);
}

/* ── 外壳 ─────────────────────────────────────────────────────────────────── */

/*
 * 盘面替身整体。
 *
 * 宽度随容器走而不是钉死 362px（应用的内容宽）：这一页的盘面栏在宽屏上有四百多像素，
 * 钉死会在栏里留下两条空边。九门的盘面因此必须是流式的——栅格用 minmax(0, 1fr)，
 * 字号照抄应用的固定值。这条是九门共同的约束，不是建议。
 */
/*
 * 整页排盘。
 *
 * 不画外框：浮层本身已经是一块托起来的面，再套一圈边就成了「框里的框」。这里只铺应用的
 * 纸面底色，页眉与正文直接落在上面——看到的就是那一页，不是那一页的截图。
 */
.ppv {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--zd-bg);
  /* 是一幅「界面的画」，不是可操作的界面：整块不接收指针事件，里面也没有可聚焦元素。 */
  pointer-events: none;
  user-select: none;
}

/*
 * 页眉只留门类名。返回箭头与右侧的省略号都不画：它们在应用里各自通向一处，这里哪也去不了，
 * 画上去只会让人去点。页眉黏在顶上，长页滚起来也知道自己在看哪一门。
 */
.ppv-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid var(--zd-line);
  background: var(--zd-bg);
}

.ppv-title {
  min-width: 0;
  font-family: var(--zd-font-serif);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ppv-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 16px 20px;
}

/* ── 公共件 ───────────────────────────────────────────────────────────────── */

/* 白纸卡：应用里表格、宫格、爻位都装在这样一张卡里。 */
.pp-card {
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  overflow: hidden;
}

/*
 * 栅格发丝线。
 *
 * 宫格类盘面（奇门九宫、紫微十二宫、金口诀四位）内部要画一张网。逐格加 border 会在
 * 相邻两格之间叠成双线，所以统一用「容器底色当线、格子铺白底、gap 露出线」的老办法：
 * 容器 background 是线色，格子之间留 0.8px 的缝，缝里透出来的就是线。
 */
.pp-grid-hair {
  display: grid;
  gap: 0.8px;
  background: var(--zd-line);
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  overflow: hidden;
}

.pp-grid-hair > * {
  background: var(--zd-surface);
  min-width: 0;
}

/* 干支、星曜这类固定字形：衬线、加重，是盘面的主角。 */
.pp-gz {
  font-family: var(--zd-font-serif);
  font-weight: 700;
}

.pp-label {
  color: var(--zd-muted);
}

.pp-muted {
  color: var(--zd-muted);
}

.pp-accent {
  color: var(--zd-accent);
}

/* 五行配色。应用里是按字符查表写进 inline style 的，这里落成类，HTML 里少一串重复的色值。 */
.pp-wood { color: var(--wx-wood); }
.pp-fire { color: var(--wx-fire); }
.pp-earth { color: var(--wx-earth); }
.pp-metal { color: var(--wx-metal); }
.pp-water { color: var(--wx-water); }

/* 选中态：浅橙底 + 橙描边。应用里点开某个字看解析就是这个样子，替身里用来点出盘眼。 */
.pp-sel {
  border-radius: 8px;
  background: var(--zd-selected-bg);
  box-shadow: inset 0 0 0 1px var(--zd-accent);
}

/* ── 消撞：品牌站全局样式与应用类名重名 ───────────────────────────────────── */

/*
 * 替身用的是应用 CSS Module 里的原名（见 app-css.mjs），而品牌站的页面样式表里也有同名的
 * 裸选择器。作用域前缀只挡得住「两边都声明了的属性」——对方独有的那几条照样落进来，
 * 而且因为应用侧压根没写，看样式表时也发现不了。这一节按应用侧的实际取值把它们定死。
 *
 * 落在底座而不是某一门：`.ppz` 是卡（.ppc-<门>）、整页（.ppv-<门>）与功能演示（.pp-feat）
 * 共同的外壳，撞的是全局选择器，九门都会撞。
 *
 * 权重要卡在「一个类」这一档：既压得住品牌站那些裸选择器，又不能反过来盖住应用侧同为一个
 * 类的声明——搬运来的样式拼在自写样式之后（见 build-legal-static.mjs 的 writeChartingCss），
 * 同权重时以应用为准，这正是搬运的意义。
 */

/*
 * 全局 `.row { gap: clamp(1.4rem, 4vw, 3.5rem) }`（首页那组交错图文行）——而应用排盘表格
 * 每一行的类名也叫 row。八字整页那张表于是被塞进 7 道最宽 56px 的缝：行宽 446px 扣掉 42px
 * 行首与 392px 的缝，只剩 1.7px 分给七列。表头两字被挤成竖排、流月推出卡片右缘、
 * 第 6 列（大运）左侧那条竖线也跟着离开列边界——它画在轨道左边框上，轨道被缝推走了。
 *
 * 应用侧没声明 gap，grid 的初值就是 0，这里照抄这个 0。
 */
.ppz .row {
  gap: 0;
}

/*
 * 全局 `h1,h2,h3,h4 { letter-spacing: -0.01em }`——而应用从不给裸标题定样式（src 下的
 * 样式表里没有一条 h1~h4 规则），小标题的字距本该是 normal。字体字号字重都被各自的类
 * 盖住了，只剩这一条漏进来。目前替身里的裸标题只有 <h2>：八字整页大运/流年/流月三个
 * .luckBlockTitle；功能演示那三个 <h3> 另有 .sectionTitle 兜着（见 _features.css）。
 *
 * `:where()` 把元素选择器的权重清零，整条退回「一个类」的量级——否则 `.ppz h2` 会连应用侧
 * 将来给标题类写的字距一并盖掉。
 */
.ppz :where(h2) {
  letter-spacing: normal;
}

/* ── charting/_features.css ── */
/*
 * 「易学术数」页两段功能演示的舞台。DOM 见 charting/features.mjs。
 *
 * 盘面、弹窗、分屏外壳与问 AI 面板的样子都不在这里——那几块是构建时从应用的 CSS Module
 * 原样搬进各自作用域的（见 charting/app-css.mjs）：
 *
 *   BaziChartPage.module.css / BaziSymbolDialog.module.css → .ppv-bazi
 *   BaziAiSplitPage.module.css                             → .ppv-split
 *   AskAiPage.module.css                                   → .ppv-askai
 *
 * 标记直接用应用的类名就吃到了。这份文件只补三样：
 *
 *   ① 舞台：一块「手机屏」外框、上下分屏的位置、模拟指针与点击涟漪；
 *   ② 编排：把静止的盘面、弹窗与对话接成两段循环动画，只驱动 transform / opacity；
 *   ③ 消撞：品牌站 styles.css 里几个全局类（.section / .row / .composer / h3）与应用的
 *      通用类名同名，漏进来的恰好是应用侧没写、盖不住的属性，只能在这里显式压掉。
 *
 * 四条约定，改这份文件之前先记住：
 *
 * 1. **选择器一律 `.ppz` / `.pp-` 打头。** 构建期 assertChartCssScoped 按前缀验作用域；
 *    漏一层，`.section`、`.row`、`.composer` 这些名字会把品牌站别的页面一起改形。
 *    注意根节点上 `.ppz` 与 `.pp-feat-*` 是**同一个元素**，所以写 `.ppz.pp-feat-sym`
 *    而不是 `.ppz .pp-feat-sym`。
 * 2. **`@keyframes` 名字一律 `pp-feat-` 打头。** 关键帧名会拼进全站样式表，没有作用域可言。
 * 3. **特异性至少三个类。** charting.css 里搬来的应用规则拼在这份文件**之后**，
 *    `.ppv-bazi .overlay` 是 (0,2,0)；要盖住它，这边得是 (0,3,0) 起步。搬来的规则里
 *    还有 (0,3,0) 的（如 `.ppv-askai .stepDone .stepIcon`），要盖它就得四个类。
 * 4. **零素材、只动 transform / opacity。** 这一页已经有九张门类配图要下载了；
 *    width / top / left 一律不碰，免得每帧重排。唯一的例外是选中气泡栏收起时的 max-height
 *    ——那是应用里真会发生的一次布局变化（气泡被发送吃掉、输入条下移），拿透明度装不像。
 */

/* ── 舞台 ─────────────────────────────────────────────────────────────────── */

.ppz.pp-feat {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  /* 是一幅「界面的画」，不是可操作的界面：整块不接指针事件，里面也没有可聚焦元素。 */
  pointer-events: none;
  user-select: none;

  /*
   * 应用的弹窗与底部输入框引用了这四个令牌，但它们定义在 src/shared/styles 的 :root 上，
   * 没跟着 CSS Module 搬过来。缺了会让 padding 整条声明失效（弹窗贴死屏幕边缘），
   * 所以在这里按 tokens.css 的原值补齐；安全区在静态站恒为 0。
   */
  --zd-modal-gutter-x: 24px;
  --zd-modal-gutter-y: 28px;
  --zd-safe-top: 0px;
  --zd-safe-bottom: 0px;
  --zd-gutter: 20px;
}

/*
 * 没滚到跟前就按住不放。
 *
 * 两段演示都是无限循环，页面一加载就在跑；等人滚到时早演到中段了，「点桃花」那一下根本没
 * 看见。所以脚本先给根节点挂上 .pp-feat-hold（见 charting/page.mjs 的 featureDemoScript），
 * 把里面所有动画按在第 0 帧——那一帧正好是「一张干净的盘」，静止时也说得通——滚到跟前
 * 再摘掉这个类，从头演起。
 *
 * 这个类由脚本挂，所以没有 JS 时这条规则一条也不命中，动画照常自己跑，与站里入场动画
 * （.anim / .in）是同一个路数。
 *
 * `!important` 在这里是必须的，不是图省事：下面每一条动画都是用 `animation` 简写下发的，
 * 而简写会把 animation-play-state 一并重置成 running；那些规则又都比这条更具体（三四个类，
 * 搬来的应用规则还排在后面），不加 !important 这道闸一次也拦不住。
 */
.ppz.pp-feat-hold *,
.ppz.pp-feat-hold *::before,
.ppz.pp-feat-hold *::after {
  animation-play-state: paused !important;
}

/* 应用的 global.css 全局开了 border-box，搬过来的规则都按它算尺寸。 */
.ppz.pp-feat *,
.ppz.pp-feat *::before,
.ppz.pp-feat *::after {
  box-sizing: border-box;
}

/*
 * 行首标签的窄栏适配（非汉字语种）。
 *
 * 盘上行首那一列宽 42px 定死（BaziChartPage.module.css 的 `.row` 网格），13px 三个汉字
 * 「藏干」「神煞」正好装下；换成 Shensha / Không Vong / เทียนกาน 就要顶出去。应用自己有这
 * 一条适配（`html[lang='en'] .rowHead`），但搬运时按语种写的规则整类丢掉了——替身当初只有
 * 中文一份，那些规则确实永不命中（见 charting/app-css.mjs 的 DROP_SELECTOR）。排盘页铺到
 * 15 个语种之后它们又需要了，所以照抄一份到这里，把语种条件放宽成「非汉字标签的语种」。
 *
 * 汉字标签的三种（简体、繁体、日文，行首在应用 i18n 里都是汉字）排除在外，仍走 13px。
 * 韩文与其余十一种一律缩到 10px：这不是精调，是照应用英文那一档的既有取值。
 *
 * 语种条件写成 `:lang()` 而不是 `html[lang=…] .ppz…`：这一份样式表的每条选择器都必须以
 * 作用域类打头（见 build-legal-static.mjs 的 assertChartCssScoped），把条件挪到目标元素上
 * 才既满足那道闸、又照样只作用于替身。`:lang(zh)` 按连字符前缀匹配，zh-Hans 与 zh-Hant
 * 一并命中。
 */
.ppz.pp-feat .rowHead:not(:lang(zh)):not(:lang(ja)) {
  font-size: 10px;
  line-height: 1.15;
  padding-left: 4px;
  letter-spacing: -0.35px;
  word-break: break-word;
}

.ppz.pp-feat .headPillar:not(:lang(zh)):not(:lang(ja)) {
  font-size: 11px;
  letter-spacing: -0.25px;
}

/* 屏幕外框：一块立起来的纸面，所有动画都裁在它里面。 */
.ppz.pp-feat .pp-feat-screen {
  position: relative;
  height: 560px;
  overflow: hidden;
  border-radius: var(--zd-radius-card);
  background: var(--zd-bg);
  /* 自成层叠上下文：弹窗遮罩、指针的 z-index 不外溢到板块里别的东西上。 */
  isolation: isolate;
}

/* 单页。整页排盘的外壳（.ppv）不套：那一层带页眉与自己的定位，这里只要一块画布。 */
.ppz.pp-feat .pp-feat-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ppz.pp-feat .ppv-body {
  overflow: hidden;
}

/*
 * 整段时长。
 *
 * 动画二的十几个元素必须同拍，时长只该有一处；出场时刻则按它的比例写
 * （`animation-delay: calc(var(--pp-t) * 0.45)` = 走到 45% 时落下）。
 * features.mjs 里正文逐字的 delay 也是这么算的，那边只出比例、不写时长。
 */
.ppz.pp-feat-chat {
  --pp-t: 6.6s;
}

/*
 * 两个作用域各套一层空壳。
 *
 * 搬来的规则是后代选择器（`.ppv-askai .page`），作用域类要是和目标类写在同一个节点上就
 * 一条也匹配不上——症状是面板退回整页态的绝对定位、整块塌成一条，且不报错。空壳只管把
 * 高度传下去，样子仍由应用那份决定。
 */
.ppz.pp-feat-chat .pp-feat-stage,
.ppz.pp-feat-chat .pp-feat-app {
  height: 100%;
}

/*
 * 分屏容器。应用里它外面还有一层 `.split`（撑高 + flex 列），替身不要那一层：品牌站全局
 * 有个同名的 `.split`（grid + 2rem 间距 + align-items:start），会把上下两半推开、还不让
 * 子项横向铺满。少一层反而省事——高度这里给，AI 面板绝对定位也要它当参照。
 */
.ppz.pp-feat-chat .panes {
  position: relative;
  height: 100%;
}

/* ── 消撞：品牌站全局类与应用类名重名 ─────────────────────────────────────── */

/*
 * 全局 `.section { padding: 56px 0 }`（宽屏 88px）与 `.section + .section { border-top }`
 * ——而弹窗每一小节的类名正是 section。不压掉，三节解析会被撑成三屏高、还各带一条横线。
 */
.ppz.pp-feat .section {
  padding: 0;
  border-top: 0;
}

/*
 * `.row`（同名的还有排盘表格每一行）已由底座统一消撞，见 _base.css 的同名一节——那条撞的
 * 是九门共有的表格，只在这里压掉的话，浮层里的整页排盘还是散的（曾经就是）。
 */

/*
 * 全局 `.composer { max-width: 820px; margin: 0 auto }`（首页那个提问框）——而问 AI 面板
 * 底部的输入框类名也叫 composer。只压 max-width：margin 应用侧自己写了
 * （`.embedded .composer { margin: 8px 12px 12px }`，三个类，盖得住全局那条），这里再写一遍
 * 只会和它打平、靠拼接顺序分胜负。
 */
.ppz.pp-feat .composer {
  max-width: none;
}

/*
 * 全局 `h1,h2,h3,h4 { letter-spacing: -0.01em }`——小节标题在应用里是 <h3>，字体字号字重
 * 都被 .sectionTitle 盖住了，只剩这一条字距漏进来。
 */
.ppz.pp-feat .sectionTitle {
  letter-spacing: normal;
}

/*
 * 弹窗正文、选中气泡栏与对话区在应用里都是可滚区。替身不接指针事件，滚不动，滚动条只是噪点。
 */
.ppz.pp-feat .body,
.ppz.pp-feat .selectionChips,
.ppz.pp-feat .conversation,
.ppz.pp-feat .embeddedScrollBody {
  scrollbar-width: none;
}

.ppz.pp-feat .body::-webkit-scrollbar,
.ppz.pp-feat .selectionChips::-webkit-scrollbar,
.ppz.pp-feat .conversation::-webkit-scrollbar,
.ppz.pp-feat .embeddedScrollBody::-webkit-scrollbar {
  display: none;
}

/*
 * 正文底部渐隐。应用里超长解析是滚出来的（有滚动条、手能划），替身两样都没有，硬切在
 * 面板下沿会像是渲染坏了——en 档的解析正文就长到这一步。渐隐把「下面还有」说清楚。
 * zh 档正文本来就装得下，末尾那一截是空白，这层渐隐看不出来。
 *
 * 渐变里的 #000 不是颜色而是遮罩的不透明通道（黑=保留、透明=隐去），所以不走 --zd-* 令牌。
 */
.ppz.pp-feat .body {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
}

/*
 * 弹窗高度：应用里 `.dialog` 是 max-height:100% + 正文自身滚动，在手机上实际就是占满
 * 遮罩留出的可用高度（CSS 注释里写着「占满可用高度」）。替身把它坐实，指针落点与缩放
 * 原点才有确定的坐标可算。
 */
.ppz.pp-feat .dialog {
  height: 100%;
}

/* ── 模拟指针 ─────────────────────────────────────────────────────────────── */

/*
 * 指针本身没有大小，箭头与涟漪都挂在它的左上角（left/top 定的那个点就是落点）。
 *
 * 宽度却给了 100%：这样 translateX 的百分比才有意义——它按元素自身宽度算，撑满屏宽之后
 * 「横着挪 11% 屏宽」就能写成 translateX(11%)，屏窄了也不会挪过头。指针在屏里来回走的那几段
 * 靠它落点才准（见动画二那只从盘上移到弹窗按钮的指针）。高度仍是 0，不占位、不挡东西。
 */
.ppz.pp-feat .pp-feat-ptr {
  position: absolute;
  z-index: 60;
  width: 100%;
  height: 0;
  opacity: 0;
  will-change: transform;
}

/*
 * 箭头光标，尖端就是落点。一开始画的是实心圆点，结果它整个盖住了「桃花」两个字——
 * 演示要人看清点的是哪个符号，指针就不能压在符号上。箭头往右下伸，符号露在尖端旁边。
 */
.ppz.pp-feat .pp-feat-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 20px;
  background: var(--zd-accent);
  clip-path: polygon(0 0, 0 100%, 26% 73%, 45% 100%, 67% 88%, 49% 62%, 100% 54%);
  /* 按下时朝尖端收，落点不跟着挪。 */
  transform-origin: 0 0;
}

/* 点击涟漪：落下那一刻从指针中心荡开一圈。 */
.ppz.pp-feat .pp-feat-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid var(--zd-accent);
  border-radius: 50%;
  opacity: 0;
}

/* ── 动画一：哪里不懂点哪里 ───────────────────────────────────────────────── */

/*
 * 8s 一轮：指针探进来落到日柱神煞「桃花」→ 涟漪 + 按下高亮 → 解析弹窗从该位置由小放大、
 * 手同时退开 → 停留读完 → 收回。末帧与首帧同态，接得回去。
 *
 * 前半段的节奏与动画二那只手是同一档：0.16s 出现、0.4s 到位、0.6s 按下。早先这一段走了近
 * 三秒，看着像是在犹豫；真人点一个已经看见的东西不会那么慢。
 *
 * 指针的落点用 left/top 定一次（不参与动画），来去只动 transform。
 *
 * top 对着日柱神煞格的**第三项**：排盘服务把桃花排在该柱末位（太极贵人・将星・桃花），
 * 不是第 0 项。`.shenshaItem` 的行距是 19px（13px 行高 + 1px 边框×2 + 2px 容器间距），
 * 所以在原先第 0 项的 392px 上再往下让两格。
 */
.ppz.pp-feat-sym {
  --pp-t: 8s;
}

.ppz.pp-feat-sym .pp-feat-ptr {
  left: 66%;
  top: 430px;
  animation: pp-feat-sym-ptr var(--pp-t) linear infinite;
}

.ppz.pp-feat-sym .pp-feat-dot {
  animation: pp-feat-sym-press var(--pp-t) linear infinite;
}

.ppz.pp-feat-sym .pp-feat-ring {
  animation: pp-feat-sym-ripple var(--pp-t) linear infinite;
}

/*
 * 按下的高亮态：借应用「已加入 AI 选中」那一套（.itemActive 的 ::before 底色层 +
 * ::after 描边层）。标记里静态挂着 itemActive，这里把两层的 opacity 交给关键帧。
 */
.ppz.pp-feat-sym .shenshaItem.itemActive::before,
.ppz.pp-feat-sym .shenshaItem.itemActive::after {
  opacity: 0;
  animation: pp-feat-sym-hl var(--pp-t) linear infinite;
}

.ppz.pp-feat-sym .overlay {
  opacity: 0;
  animation: pp-feat-sym-overlay var(--pp-t) linear infinite;
}

/*
 * 缩放原点对着「桃花」那一格（按 340×560 的屏量出来：格心落在弹窗框的 68% / 72% 处），
 * 与应用 useOriginReveal 按点击坐标量原点是同一个效果。
 */
.ppz.pp-feat-sym .dialog {
  opacity: 0;
  transform: scale(0.04);
  transform-origin: 68% 72%;
  animation: pp-feat-sym-dialog var(--pp-t) linear infinite;
}

/* 点完就退开：弹窗放大的同时手撤出画面，剩下的时间整屏都是那段解析，不被一只箭头压着。 */
@keyframes pp-feat-sym-ptr {
  0% {
    opacity: 0;
    transform: translate(64px, 100px);
  }

  2% {
    opacity: 1;
    transform: translate(64px, 100px);
  }

  5%,
  12% {
    opacity: 1;
    transform: translate(0, 0);
  }

  16%,
  100% {
    opacity: 0;
    transform: translate(64px, 100px);
  }
}

@keyframes pp-feat-sym-press {
  0%,
  6% {
    transform: scale(1);
  }

  7.5% {
    transform: scale(0.8);
  }

  9.5%,
  100% {
    transform: scale(1);
  }
}

@keyframes pp-feat-sym-ripple {
  0%,
  7% {
    opacity: 0;
    transform: scale(0.25);
  }

  8% {
    opacity: 0.5;
    transform: scale(0.7);
  }

  15%,
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

@keyframes pp-feat-sym-hl {
  0%,
  7.5% {
    opacity: 0;
  }

  9%,
  88% {
    opacity: 1;
  }

  92%,
  100% {
    opacity: 0;
  }
}

@keyframes pp-feat-sym-overlay {
  0%,
  7.5% {
    opacity: 0;
  }

  10%,
  86% {
    opacity: 1;
  }

  91%,
  100% {
    opacity: 0;
  }
}

/* 进场那一下的回弹曲线抄应用的 dialogIn，离场抄 dialogOut。 */
@keyframes pp-feat-sym-dialog {
  0%,
  7.5% {
    opacity: 0;
    transform: scale(0.04);
    animation-timing-function: cubic-bezier(0.32, 1.25, 0.6, 1);
  }

  13%,
  86% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }

  91%,
  100% {
    opacity: 0;
    transform: scale(0.04);
  }
}

/* ── 动画二：随时随地问康立波老师 ─────────────────────────────────────────── */

/*
 * 一轮 6.6s（--pp-t），演的是应用里「排盘 + AI 同屏」那条路：
 *
 *   一只鼠标探进来点盘上的神煞「桃花」→ 解析弹窗从那一格弹出 → 同一只手顺着挪到「添加到 AI
 *   对话」再点一下 → 符号转选中态、弹窗收起 → AI 面板立刻升起成上下双屏，上半留住四柱
 *   → 输入框里落下「桃花」芯片 → 逐字打出问句 → 点发送 → 芯片被吃掉、用户气泡落下
 *   → 批算过程逐条打钩 → 正文一开口，过程收起为「批算过程」→ 正文逐字浮现，
 *   **没等写完面板就落回，紧接着下一轮**。
 *
 * 最后那一下是有意的：这段正文只是个样子，与其让人读完，不如让人想去应用里自己问一句。
 * 面板 97% 落定、下一轮 9.7% 就按下第一下——中间只隔半秒，接得上，不留空转。
 *
 * 时间轴（百分比 = 占 --pp-t 的比例，改一处记得顺着往下捋）：
 *
 *    9.7% 点「桃花」       16.4% 弹窗弹到位      21.2% 按「添加到 AI 对话」
 *   24.2% 弹窗收起         24.8% 面板升起（0.36s 到位）   32.7% 芯片落下
 *     40% 起手打字（0.7s 打完）  53.9% 按发送      54.2% 输入框清空
 *   56.4% 用户气泡         58.8% 批算开头        61.2%~ 三条批算过程
 *   72.7% 过程收起、正文起笔   89.7% 面板开始落回（正文才出到七成）   97% 落定
 *
 * 打字与出字的速度对着应用来：那边是恒速播放 + 抖动缓冲，一字二三十毫秒，看着是「一直在写」
 * 而不是「一段一段蹦」。手势同理，探进来到按下只有半秒——慢了就会看成「还没点就发出去了」。
 *
 * 出场时刻一律写成 `animation-delay: calc(var(--pp-t) * 0.xxx)`，配一套公用的出场关键帧
 * （pp-feat-chat-in / -token）：十几个元素各出各的场，却只有两组关键帧。
 *
 * 那两组关键帧里「亮 50%、暗 49%」不是随手写的。delay 把整条时间轴整体平移，元素在自己
 * 周期的尾巴上是暗的，那截暗正好盖住「对话区已亮起、但这个元素还没轮到」的那段——否则
 * 上一轮的残影会提前挂在对话区里（正文在问题发出去之前就摆在那了）。所以新加出场元素时
 * 记着：出场点与对话区亮起那一刻（55.2%）之间不能超过 49%。
 */

/*
 * 全程只有一只鼠标，两只指针元素分工如下：
 *
 *   .pp-feat-ptr-chart —— 盘上的「桃花」→ 弹窗的「添加到 AI 对话」。**同一只**：点完桃花不抬手，
 *     顺着往上挪到按钮再点第二下。所以它有自己的一套关键帧（两次按下、中间一段位移），
 *     不走下面那套通用手势。早先这两下是两个指针各点各的，画面上会同时出现两个鼠标。
 *   .pp-feat-ptr-send —— 输入条的发送键。它与前一只隔着打字那几秒，前一只早退出画面了，
 *     所以照旧走通用手势，只把 delay 挪到发送那一刻。
 *
 * 横向位移写成百分比（translateX(11%) = 屏宽的 11%），窄屏上也落得准；纵向仍是 px，
 * 屏高是固定的 560。
 */
.ppz.pp-feat-chat .pp-feat-ptr-chart {
  left: 66%;
  top: 430px;
  animation: pp-feat-chat-hand var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .pp-feat-ptr-chart .pp-feat-dot {
  animation: pp-feat-chat-hand-press var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .pp-feat-ptr-chart .pp-feat-ring {
  animation: pp-feat-chat-hand-ripple var(--pp-t) linear infinite;
}

/* 发送键贴着屏幕下沿，落点从下往上量：屏高改了也不用回来重算。 */
.ppz.pp-feat-chat .pp-feat-ptr-send {
  left: 88%;
  top: auto;
  bottom: 58px;
  animation: pp-feat-chat-ptr var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .pp-feat-ptr-send .pp-feat-dot {
  animation: pp-feat-chat-press var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .pp-feat-ptr-send .pp-feat-ring {
  animation: pp-feat-chat-ripple var(--pp-t) linear infinite;
}

/* 指针、箭头、涟漪三个元素要挂同一个 delay，不然按下与涟漪各走各的。 */
.ppz.pp-feat-chat .pp-feat-ptr-send,
.ppz.pp-feat-chat .pp-feat-ptr-send .pp-feat-dot,
.ppz.pp-feat-chat .pp-feat-ptr-send .pp-feat-ring {
  animation-delay: calc(var(--pp-t) * 0.46);
}

/*
 * 与动画一不同：这里的高亮**点完主按钮才亮**，且此后一直亮着——应用里点符号只是开弹窗，
 * 真正把它记为选中的是「添加到 AI 对话」，而选中态会一直留到手动移除。
 */
.ppz.pp-feat-chat .shenshaItem.itemActive::before,
.ppz.pp-feat-chat .shenshaItem.itemActive::after {
  opacity: 0;
  animation: pp-feat-chat-hl var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .overlay {
  opacity: 0;
  animation: pp-feat-chat-overlay var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .dialog {
  opacity: 0;
  transform: scale(0.04);
  transform-origin: 68% 72%;
  animation: pp-feat-chat-dialog var(--pp-t) linear infinite;
}

/*
 * 主按钮的确认态。应用里点完立刻收弹窗、没有留给按钮的状态类，所以这一圈是替身自己加的：
 * 借选中态的浅橙底 + 橙描边，闪一下表示「记下了」，随后弹窗收起。
 */
.ppz.pp-feat-chat .action {
  position: relative;
  z-index: 0;
}

.ppz.pp-feat-chat .action::after {
  content: "";
  position: absolute;
  inset: -3px -8px;
  z-index: -1;
  border-radius: 1000px;
  background: var(--zd-selected-bg);
  box-shadow: inset 0 0 0 1px var(--zd-accent);
  opacity: 0;
  animation: pp-feat-chat-confirm var(--pp-t) linear infinite;
}

/*
 * 下半区的 AI 面板。
 *
 * 应用里分屏是「上半 flex:1 + 分界线 + 下半按比例」，展开收起走 bottomPane 的 height 过渡。
 * 替身改成绝对定位 + translateY：升降只动 transform，且上半盘不必跟着改高——盘面被面板盖住
 * 的那一截，和被压扁滚上去的效果在画面上是一回事。
 *
 * z-index 压过弹窗遮罩（应用里 .overlay 是 50）：面板升起与弹窗收起有一小段重叠，面板得在
 * 遮罩上面，否则升到一半的面板会被那层灰蒙住。
 */
.ppz.pp-feat-chat .pp-feat-ai {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  /*
   * 66% 是量出来的，不是拍的，两头都卡着：
   *
   * 下半要装下这一轮里最高的那一帧——用户气泡 + 批算头 + 三条过程行（正文尚未展开）——
   * 而对话区超出的部分会从下沿切掉；英文档更紧，免责声明折成两行又吃掉 16px。
   * 上半剩下的 190px 则正好是「表头到地支」，也就是四柱本身：AI 一升起来，盘上要留在眼前的
   * 就是这八个字，与应用 usePaneScrollAlign 对齐到地支行是同一个口径。
   *
   * 改文案长度或屏高时，拿探针量一眼 conversation 的 scrollHeight/clientHeight 再定。
   */
  height: 66%;
  background: var(--zd-bg);
  transform: translateY(100%);
  will-change: transform;
  animation: pp-feat-chat-panel var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .bottomPane {
  flex: 1 1 auto;
}

/* ☰ 在应用里是图标资源，替身画成 SVG（见 features.mjs），尺寸对齐应用给 img 的那条。 */
.ppz.pp-feat-chat .dualToolbarButton svg {
  width: 22px;
  height: 22px;
}

/*
 * 选中气泡栏：芯片落下时展开，发送把它吃掉后收起（应用里发送即 onConsumeSelection 清空，
 * 整行随之消失、输入条下移）。这是这份文件里唯一一处动布局的地方，理由见文件头第 4 条。
 */
.ppz.pp-feat-chat .selectionBar {
  overflow: hidden;
  animation: pp-feat-chat-selbar var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .selectionChip {
  transform-origin: left center;
  opacity: 0;
  animation: pp-feat-chat-chip var(--pp-t) linear infinite;
}

/*
 * 发送键：应用里输入为空是灰的（.sendButton）、有字转黑（.sendButtonActive）。替身两个类
 * 都挂着，色值只能在这儿再写一遍——CSS 没法让关键帧「切回另一条规则的取值」。这两个值抄自
 * AskAiPage.module.css 的那两条，改那边记得回来对一眼。
 */
.ppz.pp-feat-chat .sendButton {
  animation: pp-feat-chat-send var(--pp-t) linear infinite;
}

/*
 * 输入行：占位符与问句叠在同一行上，靠透明度交替。
 *
 * 打字：整句一次落进 DOM，上面盖一块与输入框同色的遮片，遮片按 steps() 逐字向右让开——
 * 只动 transform，不动 width，遮片的左边框就是光标，天然停在已打出的字尾。步数随句子长度
 * 变，所以 timing-function 写在元素上（见 features.mjs 的 composerLine）。
 */
.ppz.pp-feat-chat .pp-feat-line {
  position: relative;
  display: block;
  /* 遮片让开后会停在文字右侧同宽的一段上，靠这一层裁掉，不许压到发送键。 */
  overflow: hidden;
}

/* 占位符：字色抄应用 `.composerInput::placeholder`，伪元素的取值够不着，只能照写一份。 */
.ppz.pp-feat-chat .pp-feat-ph {
  position: absolute;
  left: 0;
  top: 0;
  color: #afafaf;
  animation: pp-feat-chat-ph var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .pp-feat-type {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  white-space: nowrap;
  opacity: 0;
  animation: pp-feat-chat-line var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .pp-feat-type-text {
  display: block;
}

.ppz.pp-feat-chat .pp-feat-type-mask {
  position: absolute;
  inset: 0;
  background: var(--zd-surface);
  border-left: 1.5px solid var(--zd-text);
  will-change: transform;
  animation: pp-feat-chat-type var(--pp-t) infinite;
}

/* 光标闪烁挂在遮片的伪元素上：伪元素不吃父元素行内的 timing-function，步数互不干扰。 */
.ppz.pp-feat-chat .pp-feat-type-mask::before {
  content: "";
  position: absolute;
  left: -1.5px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--zd-surface);
  animation: pp-feat-caret 1.1s linear infinite;
}

/*
 * 对话区总闸：发送之前是一段空会话（应用里此时只有输入条能用），面板落回时一并熄掉。
 * 有了这道闸，里面每个元素只管自己什么时候出场，不用各写一套「什么时候该消失」。
 */
.ppz.pp-feat-chat .conversation {
  opacity: 0;
  animation: pp-feat-chat-flow var(--pp-t) linear infinite;
}

/*
 * 空会话时的那句引导，应用里在对话区正中（.conversationEmpty 把它居中）。替身的对话区从头到
 * 尾都是「有对话」那一档（内容一直在，只是没亮），够不着那条居中规则，所以自己绝对定位居中；
 * 它也必须待在对话区**外面**——对话区那道总闸在发送前是灭的，搁里面就一起灭了。
 */
.ppz.pp-feat-chat .embeddedScrollBody {
  position: relative;
}

.ppz.pp-feat-chat .pp-feat-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  padding: 0 16px;
  transform: translateY(-50%);
  opacity: 0;
  animation: pp-feat-chat-empty var(--pp-t) linear infinite;
}

/* 对话区里逐个落下的四块：用户那一轮、批算开头、三条过程行。 */
.ppz.pp-feat-chat .pp-feat-turn,
.ppz.pp-feat-chat .stepsToggle,
.ppz.pp-feat-chat .stepRow {
  opacity: 0;
  animation: pp-feat-chat-in var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .pp-feat-turn {
  animation-delay: calc(var(--pp-t) * 0.564);
}

.ppz.pp-feat-chat .stepsToggle {
  animation-delay: calc(var(--pp-t) * 0.588);
}

.ppz.pp-feat-chat .stepRow:nth-child(1) {
  animation-delay: calc(var(--pp-t) * 0.612);
}

.ppz.pp-feat-chat .stepRow:nth-child(2) {
  animation-delay: calc(var(--pp-t) * 0.642);
}

.ppz.pp-feat-chat .stepRow:nth-child(3) {
  animation-delay: calc(var(--pp-t) * 0.673);
}

/* 正文逐字：出场时刻写在每个字上（见 features.mjs 的 answerText）。 */
.ppz.pp-feat-chat .tokenFade {
  opacity: 0;
  animation: pp-feat-chat-token var(--pp-t) linear infinite;
}

/*
 * 正文一开口，批算过程就收起来。
 *
 * 这不是替身自己编的节奏，是应用里的一条明规则：`runningStepsOpen = … && !hasVisibleAnswer`
 * ——正文一旦呈现就收起步骤列表，同时本轮判定进入最终阶段，折叠头从「批算中 + 转圈」换成
 * 「批算过程」，箭头翻向下（见 AskAiPage.tsx 里 FINAL_PHASE_DELAY_MS 那段注释）。替身没有类名
 * 可切，四样各写一条关键帧，在同一刻（55.5%~57%）一起翻面：
 *
 *   列表收起 / 正文展开 / 转圈缩掉 / 标题换字 + 箭头掉头
 *
 * 列表与正文这两条动的是 max-height——布局变化，本文件第 4 条约定的第二处例外。它俩必须动
 * 布局：对话区高度是死的，靠透明度腾不出正文要站的地方（上半帧全高 208px 已经顶到天花板）。
 */
.ppz.pp-feat-chat .stepsList {
  overflow: hidden;
  animation: pp-feat-chat-steplist var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .aiBubble {
  overflow: hidden;
  max-height: 0;
  animation: pp-feat-chat-answer var(--pp-t) linear infinite;
}

/*
 * 折叠头的两副面孔叠在同一个格子里换：
 *   运行态 = 转圈 + 「批算中」 + 朝上的箭头
 *   最终态 =        「批算过程」 + 朝下的箭头
 *
 * 整副整副地换、而不是把转圈单独收掉再改字：应用最终态里那个转圈是整个不渲染的，一副一副换
 * 才连宽度带间距都对得上，箭头也永远紧挨着字（叠成一格时，格子按较宽的那副撑开，窄的那副
 * 右边空一截——空在箭头外侧，看不出来）。
 *
 * 两副各自的行内排布抄 .stepsToggle 自己那三条（inline-flex / 居中 / 4px 间距）：它们现在是
 * 它的孙子，够不着。
 */
.ppz.pp-feat-chat .pp-feat-status {
  display: inline-grid;
}

.ppz.pp-feat-chat .pp-feat-status > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ppz.pp-feat-chat .pp-feat-status-run {
  animation: pp-feat-chat-status-run var(--pp-t) linear infinite;
}

.ppz.pp-feat-chat .pp-feat-status-done {
  opacity: 0;
  animation: pp-feat-chat-status-done var(--pp-t) linear infinite;
}

/* 最终态是收起态，箭头朝下——角度抄应用 .stepsToggleChevron 的默认那一条。 */
.ppz.pp-feat-chat .pp-feat-status-done .stepsToggleChevron {
  transform: rotate(90deg);
}

/*
 * 手势：从右下方探进来 → 落点停住 → 按一下 → 退开。发送键那只用它，靠 delay 挪到位。
 * 整套只占 14.5%（0.96s），探进来到按下半秒——快，是为了让「按下」与它引发的那件事咬得住。
 */
@keyframes pp-feat-chat-ptr {
  0% {
    opacity: 0;
    transform: translate(40px, 118px);
  }

  2.4% {
    opacity: 1;
    transform: translate(40px, 118px);
  }

  6.7%,
  10.9% {
    opacity: 1;
    transform: translate(0, 0);
  }

  14.5%,
  100% {
    opacity: 0;
    transform: translate(40px, 118px);
  }
}

@keyframes pp-feat-chat-press {
  0%,
  6.7% {
    transform: scale(1);
  }

  7.9% {
    transform: scale(0.8);
  }

  10.3%,
  100% {
    transform: scale(1);
  }
}

@keyframes pp-feat-chat-ripple {
  0%,
  7.3% {
    opacity: 0;
    transform: scale(0.25);
  }

  8.5% {
    opacity: 0.5;
    transform: scale(0.7);
  }

  17%,
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

/*
 * 盘上那只：探进来 → 点「桃花」（9.7%）→ 不抬手，顺着挪到弹窗的主按钮 → 再点一下（21.2%）
 * → 退开。两次按下之间隔着弹窗弹出的那 0.6s，手就停在桃花上等它出来。
 */
@keyframes pp-feat-chat-hand {
  0%,
  1.8% {
    opacity: 0;
    transform: translate(40px, 118px);
  }

  4.2% {
    opacity: 1;
    transform: translate(40px, 118px);
  }

  7.9%,
  14.4% {
    opacity: 1;
    transform: translate(0, 0);
  }

  18.9%,
  25% {
    opacity: 1;
    transform: translate(11%, -347px);
  }

  28.8%,
  100% {
    opacity: 0;
    transform: translate(11%, -229px);
  }
}

@keyframes pp-feat-chat-hand-press {
  0%,
  7.9% {
    transform: scale(1);
  }

  9.7% {
    transform: scale(0.8);
  }

  11.5%,
  19.4% {
    transform: scale(1);
  }

  21.2% {
    transform: scale(0.8);
  }

  23%,
  100% {
    transform: scale(1);
  }
}

@keyframes pp-feat-chat-hand-ripple {
  0%,
  9.1% {
    opacity: 0;
    transform: scale(0.25);
  }

  10.3% {
    opacity: 0.5;
    transform: scale(0.7);
  }

  14.4% {
    opacity: 0;
    transform: scale(2.4);
  }

  20.6% {
    opacity: 0;
    transform: scale(0.25);
  }

  21.8% {
    opacity: 0.5;
    transform: scale(0.7);
  }

  27%,
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

@keyframes pp-feat-chat-hl {
  0%,
  21.2% {
    opacity: 0;
  }

  23.6%,
  100% {
    opacity: 1;
  }
}

@keyframes pp-feat-chat-overlay {
  0%,
  9.7% {
    opacity: 0;
  }

  13.3%,
  24.2% {
    opacity: 1;
  }

  28.5%,
  100% {
    opacity: 0;
  }
}

@keyframes pp-feat-chat-dialog {
  0%,
  9.7% {
    opacity: 0;
    transform: scale(0.04);
    animation-timing-function: cubic-bezier(0.32, 1.25, 0.6, 1);
  }

  16.4%,
  24.2% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }

  28.5%,
  100% {
    opacity: 0;
    transform: scale(0.04);
  }
}

@keyframes pp-feat-chat-confirm {
  0%,
  21.2% {
    opacity: 0;
  }

  22.4%,
  25.5% {
    opacity: 1;
  }

  27.9%,
  100% {
    opacity: 0;
  }
}

/* 升降曲线抄应用分屏的 splitSlideUp / splitSlideDown。 */
@keyframes pp-feat-chat-panel {
  0%,
  24.8% {
    transform: translateY(100%);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  30.3%,
  89.7% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);
  }

  97%,
  100% {
    transform: translateY(100%);
  }
}

@keyframes pp-feat-chat-selbar {
  0%,
  31.5% {
    max-height: 0;
  }

  34%,
  53.9% {
    max-height: 40px;
  }

  56.4%,
  100% {
    max-height: 0;
  }
}

@keyframes pp-feat-chat-chip {
  0%,
  32.7% {
    opacity: 0;
    transform: scale(0.86);
  }

  36.4%,
  53.9% {
    opacity: 1;
    transform: scale(1);
  }

  55.4%,
  100% {
    opacity: 0;
    transform: scale(0.86);
  }
}

/* 占位符与问句的交接都压在按下（53.9%）之后：早一帧，就成了「还没点就发出去了」。 */
@keyframes pp-feat-chat-ph {
  0%,
  37.6% {
    opacity: 1;
  }

  40%,
  54.2% {
    opacity: 0;
  }

  55.8%,
  100% {
    opacity: 1;
  }
}

@keyframes pp-feat-chat-line {
  0%,
  38.2% {
    opacity: 0;
  }

  40%,
  54.2% {
    opacity: 1;
  }

  55.4%,
  100% {
    opacity: 0;
  }
}

/*
 * 逐字：40%→50.5% 之间遮片让开整句，前后两段按住不动（步数由元素上的 timing-function 定）。
 * 这 10.5% 是 0.7s ——十来个字打完，跟人手打字的速度差不多，也和正文的出字速度对得上。
 */
@keyframes pp-feat-chat-type {
  0%,
  40% {
    transform: translateX(0);
  }

  50.5%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes pp-feat-chat-send {
  0%,
  40% {
    color: #afafaf;
  }

  42.4%,
  54.2% {
    color: #0a0a0a;
  }

  55.8%,
  100% {
    color: #afafaf;
  }
}

/* 空会话引导：面板升起后露出来，发送那一刻让位给第一条消息。 */
@keyframes pp-feat-chat-empty {
  0%,
  31.5% {
    opacity: 0;
  }

  35.2%,
  53.9% {
    opacity: 1;
  }

  55.4%,
  100% {
    opacity: 0;
  }
}

@keyframes pp-feat-chat-flow {
  0%,
  53.9% {
    opacity: 0;
  }

  55.2%,
  97% {
    opacity: 1;
  }

  99.4%,
  100% {
    opacity: 0;
  }
}

/* 批算过程列表：第一条落下时展开，正文一开口就收起。 */
@keyframes pp-feat-chat-steplist {
  0%,
  60.6% {
    max-height: 0;
  }

  62.4%,
  72.7% {
    max-height: 90px;
  }

  74.5%,
  100% {
    max-height: 0;
  }
}

/*
 * 正文那一栏：与列表收起同一刻腾出位置，面板落回后收回去。
 * 96px 不是随手给的——它是列表收起后对话区剩下的高度（三行正文），给大了正文会顶出下沿。
 */
@keyframes pp-feat-chat-answer {
  0%,
  72.7% {
    max-height: 0;
  }

  75.2%,
  97% {
    max-height: 96px;
  }

  99.4%,
  100% {
    max-height: 0;
  }
}

@keyframes pp-feat-chat-status-run {
  0%,
  72.7% {
    opacity: 1;
  }

  74.5%,
  97% {
    opacity: 0;
  }

  99.4%,
  100% {
    opacity: 1;
  }
}

@keyframes pp-feat-chat-status-done {
  0%,
  72.7% {
    opacity: 0;
  }

  74.5%,
  97% {
    opacity: 1;
  }

  99.4%,
  100% {
    opacity: 0;
  }
}

/* 出场：抄应用批算过程行的 stepIn（6px 抬起 + 渐显，320ms 那条回弹曲线）。 */
@keyframes pp-feat-chat-in {
  0% {
    opacity: 0;
    transform: translateY(6px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  1.5%,
  50% {
    opacity: 1;
    transform: translateY(0);
  }

  51.5%,
  100% {
    opacity: 0;
  }
}

/* 正文一个字一帧：抄应用 StreamingMarkdown 的 tokenFade（0.4s 由模糊转清晰）。 */
@keyframes pp-feat-chat-token {
  0% {
    opacity: 0;
    filter: blur(1px);
    animation-timing-function: ease-out;
  }

  2%,
  50% {
    opacity: 1;
    filter: blur(0);
  }

  51.5%,
  100% {
    opacity: 0;
  }
}

/* 光标：--zd-surface 与输入框同色即隐去，交替出现就是闪烁。硬切，不要过渡。 */
@keyframes pp-feat-caret {
  0%,
  49.9% {
    background: var(--zd-text);
  }

  50%,
  100% {
    background: var(--zd-surface);
  }
}

/* ── 减弱动态：关掉全部动画，直接停在末态 ─────────────────────────────────── */

/*
 * 动画一的末态是「弹窗开着」，动画二的末态是「问句已答完」——两段各自把话说完的那一帧。
 * 动画一把指针留在落点上，让静止的画面自己说明「这里可以点」；动画二的画面已经是
 * 上盘下答，指针反而多余。
 */
@media (prefers-reduced-motion: reduce) {
  .ppz.pp-feat .pp-feat-ptr,
  .ppz.pp-feat .pp-feat-dot,
  .ppz.pp-feat .pp-feat-ring,
  .ppz.pp-feat .overlay,
  .ppz.pp-feat .dialog,
  .ppz.pp-feat .pp-feat-ai,
  .ppz.pp-feat .conversation,
  .ppz.pp-feat .pp-feat-turn,
  .ppz.pp-feat .stepsToggle,
  .ppz.pp-feat .pp-feat-status-run,
  .ppz.pp-feat .pp-feat-status-done,
  .ppz.pp-feat .stepsList,
  .ppz.pp-feat .stepRow,
  .ppz.pp-feat .aiBubble,
  .ppz.pp-feat .tokenFade,
  .ppz.pp-feat .pp-feat-empty,
  .ppz.pp-feat .selectionBar,
  .ppz.pp-feat .selectionChip,
  .ppz.pp-feat .sendButton,
  .ppz.pp-feat .pp-feat-ph,
  .ppz.pp-feat .pp-feat-type,
  .ppz.pp-feat .action::after,
  .ppz.pp-feat .shenshaItem.itemActive::before,
  .ppz.pp-feat .shenshaItem.itemActive::after,
  .ppz.pp-feat .pp-feat-type-mask,
  .ppz.pp-feat .pp-feat-type-mask::before {
    animation: none;
  }

  .ppz.pp-feat .pp-feat-ptr,
  .ppz.pp-feat .overlay,
  .ppz.pp-feat .shenshaItem.itemActive::before,
  .ppz.pp-feat .shenshaItem.itemActive::after {
    opacity: 1;
  }

  .ppz.pp-feat .pp-feat-ptr {
    transform: translate(0, 0);
  }

  .ppz.pp-feat-sym .dialog {
    opacity: 1;
    transform: scale(1);
  }

  /* 动画二停在答完那一帧：弹窗已收、面板已升起、过程已折叠成「批算过程」、正文在。 */
  .ppz.pp-feat-chat .overlay,
  .ppz.pp-feat-chat .pp-feat-ptr,
  .ppz.pp-feat-chat .selectionChip,
  .ppz.pp-feat-chat .pp-feat-empty,
  .ppz.pp-feat-chat .pp-feat-type,
  .ppz.pp-feat-chat .pp-feat-status-run {
    opacity: 0;
  }

  .ppz.pp-feat-chat .selectionBar,
  .ppz.pp-feat-chat .stepsList {
    max-height: 0;
  }

  .ppz.pp-feat-chat .aiBubble {
    max-height: none;
  }

  .ppz.pp-feat-chat .pp-feat-ai {
    transform: translateY(0);
  }

  .ppz.pp-feat-chat .conversation,
  .ppz.pp-feat-chat .pp-feat-turn,
  .ppz.pp-feat-chat .stepsToggle,
  .ppz.pp-feat-chat .pp-feat-status-done,
  .ppz.pp-feat-chat .stepRow,
  .ppz.pp-feat-chat .tokenFade,
  .ppz.pp-feat-chat .pp-feat-ph {
    opacity: 1;
  }
}

/* ── charting/fengshui.css ── */
/*
 * 风水盘面替身（八卦尺）的样式。
 *
 * 一个圆盘，三圈：外圈二十四山、中圈后天八卦、内圈洛书九宫。
 *
 * 每一位的摆法是「先把元素挪到圆心，再按方位角转过去，沿半径推出去，最后把字转回来」——
 * 最后那一下反向旋转是关键，少了它字会跟着圆周歪倒，罗盘上的字是一律朝上的。
 *
 * 半径用像素而不是百分比：translateY 的百分比参照的是元素自身高度，不是圆盘直径，
 * 用百分比会让每个字按自己的字号飞到不同的圈上。圆盘本身封了顶（264px），
 * 窄栏下靠 min() 收缩，所以固定半径不会溢出。
 */

/*
 * ── 排盘卡片 ───────────────────────────────────────────────────────────────
 *
 * 卡片挂在 .ppc-fengshui 下，整页挂在 .ppv-fengshui 下，两个作用域互不覆盖。
 * 本节的选择器必须用 .ppc- 打头：写成 .ppv- 的话规则还在、类名也还在，但永远匹配不上
 * 卡片里的节点，卡片会静默地裸出来。
 */

/* 左边一张洛书方图，右边二十四山按八宫分组列出——卡片放不下整个圆盘，拆成这两块。 */
.ppc-fengshui .pp-fengshui-cwrap {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.ppc-fengshui .pp-fengshui-clo {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, 30px);
  gap: 0.5px;
  background: var(--zd-line);
  border: 0.5px solid var(--zd-line);
  border-radius: 6px;
  overflow: hidden;
}

.ppc-fengshui .pp-fengshui-cc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30px;
  background: var(--zd-bg);
}

.ppc-fengshui .pp-fengshui-cc b {
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}

.ppc-fengshui .pp-fengshui-cc i {
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-size: 8px;
  color: var(--zd-muted);
}

.ppc-fengshui .pp-fengshui-cmid b {
  color: var(--zd-accent);
}

/* 二十四山按八宫分成八组，两列排开——一行列二十四个字读不下来。 */
.ppc-fengshui .pp-fengshui-clist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 10px;
  min-width: 0;
  font-family: var(--zd-font-serif);
  font-size: 11px;
  line-height: 1.3;
}

.ppc-fengshui .pp-fengshui-clist i {
  font-style: normal;
  white-space: nowrap;
}

.ppc-fengshui .pp-fengshui-cmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-fengshui .pp-fengshui-cacc {
  color: var(--zd-accent);
}

/* ── 排盘页 ─────────────────────────────────────────────────────────────── */

.ppv-fengshui .pp-fengshui-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  line-height: 1.5;
}

.ppv-fengshui .pp-fengshui-info span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

.ppv-fengshui .pp-fengshui-info i {
  font-style: normal;
  color: var(--zd-muted);
}

.ppv-fengshui .pp-fengshui-stage {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

.ppv-fengshui .pp-fengshui-dial {
  position: relative;
  width: min(100%, 264px);
  aspect-ratio: 1;
  border: 0.8px solid var(--zd-line);
  border-radius: 50%;
  background: var(--zd-surface);
}

/* 中圈、内圈的两道分隔线。用伪元素不够用——要两道，所以给两个空 span。 */
.ppv-fengshui .pp-fengshui-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0.8px solid var(--zd-line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ppv-fengshui .pp-fengshui-ring2 {
  width: 190px;
  height: 190px;
}

.ppv-fengshui .pp-fengshui-ring3 {
  width: 116px;
  height: 116px;
  background: #f8f6f0;
}

/* 正上方那枚指针：告诉人这张盘的零度在哪。 */
.ppv-fengshui .pp-fengshui-needle {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 9px solid var(--zd-accent);
}

.ppv-fengshui .pp-fengshui-m,
.ppv-fengshui .pp-fengshui-g {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  white-space: nowrap;
}

/*
 * 摆位三步走：挪到圆心 → 按方位角转过去 → 沿半径推出去 → 把字转回来。
 * 最后那一下必须有，否则字会跟着圆周躺倒。
 */
.ppv-fengshui .pp-fengshui-m {
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 600;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-114px) rotate(calc(-1 * var(--a)));
}

/* 二十四山里的四维卦（乾坤艮巽）不属五行支干，用中性色，与八个天干十二地支区分开。 */
.ppv-fengshui .pp-fengshui-gua {
  color: #4a3a2c;
}

.ppv-fengshui .pp-fengshui-g {
  gap: 1px;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-78px) rotate(calc(-1 * var(--a)));
}

.ppv-fengshui .pp-fengshui-g b {
  font-size: 13px;
  line-height: 1;
  color: var(--zd-text);
}

.ppv-fengshui .pp-fengshui-g i {
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-size: 10px;
  color: var(--zd-muted);
}

/* ── 洛书九宫 ───────────────────────────────────────────────────────────── */

.ppv-fengshui .pp-fengshui-lo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%);
}

.ppv-fengshui .pp-fengshui-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.ppv-fengshui .pp-fengshui-c b {
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
}

.ppv-fengshui .pp-fengshui-c i {
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-size: 9px;
  color: var(--zd-muted);
}

/* 中五无卦，只有数——洛书的中宫本来就不配八卦。 */
.ppv-fengshui .pp-fengshui-mid b {
  color: var(--zd-accent);
}

.ppv-fengshui .pp-fengshui-note {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.75;
  color: var(--zd-muted);
}


/* ── 搬自 src/h5/components/BaziResultCard.module.css（作用域 .ppc-bazi） ── */
@keyframes ppc-bazi-baziCardStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ppc-bazi .baziCard {
position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  
  padding: 16px 32px 16px 18px;
  border-radius: var(--zd-radius-card);
  background: transparent;
  color: var(--zd-text);
  text-align: left;
  animation: ppc-bazi-baziCardStepIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppc-bazi .baziCardHeader {
display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ppc-bazi .baziCardName {
display: inline-flex;
  align-items: baseline;
  gap: 8px;
  
  font-family: var(--zd-font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--zd-text);
}

.ppc-bazi .baziCardGender {
font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--zd-accent);
}

.ppc-bazi .baziCardTime {
font-size: 11px;
  color: var(--zd-muted);
}

.ppc-bazi .baziCardPillars {
display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  align-self: stretch;
}

.ppc-bazi .baziCardPillarCol {
flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ppc-bazi .baziCardHead {
display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--zd-muted);
}

.ppc-bazi .baziCardChar {
display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--zd-font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.5px;
}

.ppc-bazi .baziCardLuck {
display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  align-self: stretch;
  gap: 2px;
}

.ppc-bazi .baziCardLuckCol {
flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ppc-bazi .baziCardLuckYear {
font-style: normal;
  font-size: 8px;
  font-weight: 400;
  line-height: 1;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppc-bazi .baziCardLuckAge {
font-style: normal;
  font-size: 8px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 2px;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppc-bazi .baziCardLuckChar {
font-style: normal;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.5px;
  color: var(--zd-text);
}

.ppc-bazi .baziCardLuckActive .baziCardLuckChar {
font-weight: 800;
}

.ppc-bazi .baziCardLuckActive .baziCardLuckYear,
.ppc-bazi .baziCardLuckActive .baziCardLuckAge {
font-weight: 700;
  color: var(--zd-accent);
}

.ppc-bazi .flush {
padding-right: 18px;
}

.ppc-bazi .baziCardChevron {
position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zd-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* ── 搬自 src/h5/routes/BaziChartPage.module.css（作用域 .ppv-bazi） ── */
.ppv-bazi .page {
position: relative;
  height: 100%;
  min-height: 0;
  background: var(--zd-bg);
  color: var(--zd-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ppv-bazi .page.embedded {
height: 100%;
}

.ppv-bazi .page.embedded .composerDock {
padding-bottom: 10px;
}

.ppv-bazi .header {
position: relative;
  z-index: 20;
  height: 54px;
  flex-shrink: 0;
  background: var(--zd-bg);
}

.ppv-bazi .headerButton {
position: absolute;
  top: 10px;
  left: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-bazi .headerButton img {
width: 22px;
  height: 22px;
}

.ppv-bazi .title {
position: absolute;
  top: 0;
  left: 50%;
  height: 54px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--zd-font-brand);
  font-size: var(--zd-fs-page);
  font-weight: 700;
}

.ppv-bazi .chartTabs {
position: relative;
  z-index: 20;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  background: var(--zd-bg);
  border-bottom: 0.5px solid transparent;
  transition: border-bottom-color 0.18s ease;
}

.ppv-bazi .chartTabsLine {
border-bottom-color: var(--zd-line);
}

.ppv-bazi .chartTab {
position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
}

.ppv-bazi .chartTabActive {
color: var(--zd-accent);
  font-weight: 600;
}

.ppv-bazi .chartTabLabel {
position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.ppv-bazi .chartTabUnderline {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 10px;
  background: var(--zd-accent);
}

.ppv-bazi .body {
position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  
  transform-origin: 50% 30%;
  transition:
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1000ms ease;
}

.ppv-bazi .bodyVeiled {
transform: scale(0.975);
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
.ppv-bazi .body {
transition: none;
}

.ppv-bazi .bodyVeiled {
transform: none;
    opacity: 1;
}
}

.ppv-bazi .statusBanner {
margin: 8px 0;
  padding: 10px 14px;
  border-radius: var(--zd-radius-md, 12px);
  background: var(--zd-surface);
  color: var(--zd-text-secondary, var(--zd-text));
  font-size: 13px;
  text-align: center;
}

.ppv-bazi .statusBannerError {
background: rgba(220, 53, 69, 0.1);
  color: #c0392b;
}

.ppv-bazi .profile {
padding-top: 8px;
}

.ppv-bazi .profileName {
margin: 0;
  
  font-family: var(--zd-font-sans);
  font-size: 20px;
  line-height: 24px;
  color: #000;
}

.ppv-bazi .profileMeta {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.ppv-bazi .profileMetaTags {
display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 18px;
  color: var(--zd-text);
}

.ppv-bazi .expandButton {
flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 4px 12px;
  border: 0.8px solid var(--zd-line);
  border-radius: 20px;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
}

.ppv-bazi .expandCaret {
width: 7px;
  height: 7px;
  border-right: 1.2px solid var(--zd-muted);
  border-bottom: 1.2px solid var(--zd-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.ppv-bazi .expandCaretUp {
transform: translateY(1px) rotate(-135deg);
}

.ppv-bazi .profileExtraWrap {
display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s ease, opacity 0.28s ease;
}

.ppv-bazi .profileExtraOpen {
grid-template-rows: 1fr;
  opacity: 1;
}

.ppv-bazi .profileExtraInner {
min-height: 0;
  overflow: hidden;
}

.ppv-bazi .profileExtra {
padding-top: 8px;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 18px;
  color: var(--zd-muted);
}

.ppv-bazi .profileExtra p {
margin: 2px 0;
}

@media (prefers-reduced-motion: reduce) {
.ppv-bazi .profileExtraWrap {
transition: none;
}
}

.ppv-bazi .palaceGrid {
display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 12px;
  row-gap: 2px;
  margin-top: 2px;
}

.ppv-bazi .palaceItem {
display: flex;
  align-items: center;
}

.ppv-bazi .palaceLabel {
color: var(--zd-muted);
}

.ppv-bazi .palaceGz {
font-family: var(--zd-font-serif);
  font-weight: 600;
}

.ppv-bazi .palaceNayin {
margin-left: 2px;
  color: var(--zd-muted);
}

.ppv-bazi .profileDivider {
display: block;
  height: 1px;
  margin-top: 12px;
  background: var(--zd-line);
  opacity: 0.6;
}

.ppv-bazi .tableCard {
margin-top: 16px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  overflow: hidden;
}

.ppv-bazi .row {
display: grid;
  grid-template-columns: 42px repeat(7, minmax(0, 1fr));
  align-items: stretch;
  border-bottom: 0.5px solid var(--zd-line);
  min-height: 34px;
  width: 100%;
}

.ppv-bazi .row:last-child {
border-bottom: none;
}

.ppv-bazi .stemRow {
border-bottom: none;
}

.ppv-bazi .row > *:nth-child(6) {
border-left: 0.8px solid var(--zd-line);
}

.ppv-bazi .tableSimple .row {
grid-template-columns: 42px repeat(4, minmax(0, 1fr));
  width: 100%;
}

.ppv-bazi .tableSimple .row > *:nth-child(6) {
border-left: none;
}

.ppv-bazi .tableSimple .shenshaCells {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ppv-bazi .tableSimple .shenshaCells > *:nth-child(5) {
border-left: none;
}

.ppv-bazi .altRow {
background: #f8f6f0;
}

.ppv-bazi .tallRow {
min-height: 64px;
}

.ppv-bazi .shenshaRow {
display: flex;
  align-items: stretch;
  position: relative;
  min-height: 34px;
}

.ppv-bazi .headRow {
min-height: 35px;
  background: #f8f6f0;
}

.ppv-bazi .rowHead {
display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  color: #0a0a0a;
  min-width: 0;
  flex-shrink: 0;
}

.ppv-bazi .headPillar,
.ppv-bazi .headFlow {
display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 400;
  color: #0a0a0a;
  min-width: 0;
  flex-shrink: 0;
}

.ppv-bazi .currentYearRow {
min-height: 40px;
}

.ppv-bazi .currentYearStar {
display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  color: #0a0a0a;
}

.ppv-bazi .currentYearCell {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 0;
}

.ppv-bazi .currentYearPrimary {
font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 15px;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-bazi .currentYearSecondary {
font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 14px;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-bazi .cellWrap {
display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  min-width: 0;
  flex-shrink: 0;
}

.ppv-bazi .tallRow .cellWrap,
.ppv-bazi .shenshaCells .cellWrap {
align-items: flex-start;
}

.ppv-bazi .shenshaHead {
flex: 0 0 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 2px;
}

.ppv-bazi .shenshaHeadLabel {
font-family: var(--zd-font-sans);
  font-size: 13px;
  color: #0a0a0a;
}

.ppv-bazi .shenshaContentCol {
position: relative;
  flex: 1;
  min-width: 0;
}

.ppv-bazi .shenshaCollapsible {
display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s ease, opacity 0.28s ease;
}

.ppv-bazi .shenshaCollapsibleOpen {
grid-template-rows: 1fr;
  opacity: 1;
}

.ppv-bazi .shenshaCollapsibleInner {
min-height: 0;
  overflow: hidden;
}

.ppv-bazi .shenshaCells {
display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
}

.ppv-bazi .shenshaCells .cellWrap:first-child {
padding-left: 4px;
}

.ppv-bazi .shenshaCells > *:nth-child(5) {
border-left: 0.8px solid var(--zd-line);
}

.ppv-bazi .tallRow .cellWrap:nth-child(2) {
padding-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
.ppv-bazi .shenshaCollapsible {
transition: none;
}
}

.ppv-bazi .gzCell,
.ppv-bazi .textCell {
position: relative;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  font-family: var(--zd-font-sans);
}

.ppv-bazi .hiddenCell,
.ppv-bazi .shenshaCell {
display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-family: var(--zd-font-sans);
}

.ppv-bazi .gzCell {
font-family: var(--zd-font-serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 30px;
  padding: 2px 0;
  flex-shrink: 0;
  min-width: 0;
}

.ppv-bazi .gzPlainBig {
font-family: var(--zd-font-serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 30px;
  color: #0a0a0a;
}

.ppv-bazi .textCell {
font-size: 13px;
  color: #0a0a0a;
}

.ppv-bazi .textCellSmall {
font-size: 11px;
  padding-left: 2px;
  padding-right: 2px;
}

.ppv-bazi .hiddenCell {
gap: 2px;
  padding: 4px 0;
  justify-content: center;
  align-items: center;
}

.ppv-bazi .hiddenItem {
position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 43px;
  padding: 1px 3px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.ppv-bazi .hiddenLine {
display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.ppv-bazi .hiddenGod {
color: #0a0a0a;
  font-size: 10px;
}

.ppv-bazi .shenshaCell {
gap: 2px;
  padding: 6px 1px;
  justify-content: flex-start;
  align-items: center;
}

.ppv-bazi .shenshaItem {
position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 10px;
  line-height: 13px;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-bazi .shenshaLine {
font-size: 10px;
  line-height: 13px;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-bazi .shenshaToggle {
display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  border: none;
  border-radius: 20px;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 1;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-bazi .shenshaToggleSmall {
gap: 2px;
  font-size: 9px;
}

.ppv-bazi .shenshaToggleSmall .shenshaToggleCaret {
width: 5px;
  height: 5px;
}

.ppv-bazi .shenshaCollapsedToggle {
position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ppv-bazi .shenshaCollapsedToggle .shenshaToggle {
pointer-events: auto;
}

.ppv-bazi .shenshaToggleCaret {
width: 6px;
  height: 6px;
  border-right: 1.1px solid var(--zd-muted);
  border-bottom: 1.1px solid var(--zd-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.ppv-bazi .shenshaToggleCaretUp {
transform: translateY(1px) rotate(-135deg);
}

.ppv-bazi .placeholderDash {
color: #0a0a0a;
  font-size: 12px;
}

.ppv-bazi .dayMasterTag {
font-size: 11px;
  color: var(--zd-accent);
  font-weight: 700;
}

.ppv-bazi .cellActive,
.ppv-bazi .itemActive {
z-index: 0;
  background: transparent;
  border-color: transparent;
}

.ppv-bazi .cellActive::before,
.ppv-bazi .cellActive::after,
.ppv-bazi .itemActive::before,
.ppv-bazi .itemActive::after {
content: '';
  position: absolute;
  inset: -1px; 
  border-radius: 8px;
  pointer-events: none;
}

.ppv-bazi .itemActive::before,
.ppv-bazi .itemActive::after {
border-radius: 6px;
}

.ppv-bazi .cellActive::before,
.ppv-bazi .itemActive::before {
z-index: -1;
  background: rgba(255, 219, 206, 0.18);
}

.ppv-bazi .cellActive::after,
.ppv-bazi .itemActive::after {
border: 1px solid var(--zd-accent);
}

.ppv-bazi .mergeRight::before,
.ppv-bazi .mergeRight::after {
border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ppv-bazi .mergeRight::after {
border-right: 0;
}

.ppv-bazi .mergeLeft::before,
.ppv-bazi .mergeLeft::after {
border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ppv-bazi .mergeLeft::after {
border-left: 0;
}

.ppv-bazi .mergeUp::before,
.ppv-bazi .mergeUp::after {
border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ppv-bazi .mergeUp::after {
border-top: 0;
}

.ppv-bazi .mergeDown::before,
.ppv-bazi .mergeDown::after {
border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ppv-bazi .mergeDown::after {
border-bottom: 0;
}

.ppv-bazi .bridgeDown::before,
.ppv-bazi .bridgeDown::after {
bottom: -5px;
}

.ppv-bazi .bridgeUp::before,
.ppv-bazi .bridgeUp::after {
top: -5px;
}

.ppv-bazi .gzCell.mergeLeft,
.ppv-bazi .gzCell.mergeRight,
.ppv-bazi .textCell.mergeLeft,
.ppv-bazi .textCell.mergeRight {
width: 100%;
}

.ppv-bazi .hiddenItem.mergeLeft,
.ppv-bazi .hiddenItem.mergeRight,
.ppv-bazi .hiddenItem.mergeUp,
.ppv-bazi .hiddenItem.mergeDown,
.ppv-bazi .shenshaItem.mergeLeft,
.ppv-bazi .shenshaItem.mergeRight,
.ppv-bazi .shenshaItem.mergeUp,
.ppv-bazi .shenshaItem.mergeDown {
width: 100%;
}

.ppv-bazi .hiddenItem.mergeLeft,
.ppv-bazi .hiddenItem.mergeRight,
.ppv-bazi .hiddenItem.mergeUp,
.ppv-bazi .hiddenItem.mergeDown {
justify-content: center;
  gap: 2px;
}

.ppv-bazi .hiddenItem.mergeUp::before,
.ppv-bazi .hiddenItem.mergeUp::after,
.ppv-bazi .shenshaItem.mergeUp::before,
.ppv-bazi .shenshaItem.mergeUp::after {
top: -2px;
}

.ppv-bazi .hiddenItem.mergeDown::before,
.ppv-bazi .hiddenItem.mergeDown::after,
.ppv-bazi .shenshaItem.mergeDown::before,
.ppv-bazi .shenshaItem.mergeDown::after {
bottom: -2px;
}

.ppv-bazi .selectionBar {
display: flex;
  align-items: center;
  gap: 10px;
}

.ppv-bazi .selectionChips {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-bazi .selectionChips::-webkit-scrollbar {
display: none;
}

.ppv-bazi .selectionChip {
display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 0.8px solid var(--zd-accent);
  border-radius: 8px;
  background: rgba(255, 219, 206, 0.35);
  font-family: var(--zd-font-sans);
  font-size: 13px;
  line-height: normal;
  color: var(--zd-accent);
  white-space: nowrap;
}

.ppv-bazi .selectionChipText {
font-weight: 500;
}

.ppv-bazi .selectionChipRemove {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--zd-accent);
  font-size: 15px;
  line-height: 1;
}

.ppv-bazi .luckCard {
margin-top: 16px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 6px 0 10px;
}

.ppv-bazi .luckBlock {
padding: 8px 0 4px;
}

.ppv-bazi .luckBlockTitle {
margin: 0;
  padding: 0 16px;
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: #0a0a0a;
}

.ppv-bazi .luckBlockHead {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ppv-bazi .nayinCheck {
display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  padding: 0;
  border: none;
  background: none;
}

.ppv-bazi .nayinCheckBox {
position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--zd-muted);
  border-radius: 3px;
  background: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ppv-bazi .nayinCheckOn .nayinCheckBox {
border-color: var(--zd-accent);
  background: var(--zd-accent);
}

.ppv-bazi .nayinCheckOn .nayinCheckBox::after {
content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}

.ppv-bazi .nayinCheckLabel {
font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-bazi .luckNayin {
font-family: var(--zd-font-sans);
  font-size: 10px;
  line-height: 13px;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-bazi .luckNayinSmall {
font-size: 8px;
  line-height: 11px;
  letter-spacing: -0.3px;
}

.ppv-bazi .luckScroller {
display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  margin: 0 12px 0;
  padding: 8px 0 2px;
  border-top: 0.5px solid var(--zd-line);
}

.ppv-bazi .luckItem {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 2px 1px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
}

.ppv-bazi .luckItemActive {
border-color: transparent;
  background: rgba(202, 180, 159, 0.28);
}

.ppv-bazi .luckItemAiActive {
border-color: var(--zd-accent);
  background: rgba(255, 219, 206, 0.18);
}

.ppv-bazi .luckAge,
.ppv-bazi .luckYear {
font-family: var(--zd-font-sans);
  font-size: 10px;
  line-height: 13.5px;
  color: #0a0a0a;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  letter-spacing: -0.2px;
}

.ppv-bazi .luckGz {
font-family: var(--zd-font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 27px;
}

.ppv-bazi .luckGzPlain {
font-family: var(--zd-font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 27px;
  color: #0a0a0a;
}

.ppv-bazi .luckTerm {
font-family: var(--zd-font-sans);
  font-size: 10px;
  line-height: 14px;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-bazi .notesCard {
margin-top: 16px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 12px 16px;
}

.ppv-bazi .noteLine {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  line-height: 20px;
  color: var(--zd-text);
}

.ppv-bazi .noteLine + .noteLine {
margin-top: 6px;
}

.ppv-bazi .noteTitle {
font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 500;
  color: #0a0a0a;
}

.ppv-bazi .noteText {
color: var(--zd-muted);
}

.ppv-bazi .relationCard {
margin-top: 12px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 10px 12px 8px;
}

.ppv-bazi .relationHeader {
display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: none;
  background: none;
}

.ppv-bazi .relationTitle {
font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 500;
  color: #0a0a0a;
}

.ppv-bazi .relationToggle {
display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 1;
  color: var(--zd-muted);
}

.ppv-bazi .relationCaret {
width: 6px;
  height: 6px;
  border-right: 1.1px solid var(--zd-muted);
  border-bottom: 1.1px solid var(--zd-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.ppv-bazi .relationCaretUp {
transform: translateY(1px) rotate(-135deg);
}

.ppv-bazi .relationCollapsible {
display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s ease, opacity 0.28s ease;
}

.ppv-bazi .relationCollapsibleOpen {
grid-template-rows: 1fr;
  opacity: 1;
}

.ppv-bazi .relationCollapsibleInner {
min-height: 0;
  overflow: hidden;
}

.ppv-bazi .relationGraphWrap {
padding-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
.ppv-bazi .relationCollapsible,
.ppv-bazi .relationCaret {
transition: none;
}
}

.ppv-bazi .notePillarsCard {
margin-top: 12px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  overflow: hidden;
}

.ppv-bazi .notePillarsGrid {
display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 10px 8px 12px;
  width: 100%;
}

.ppv-bazi .noteLuckRow {
border-top: 0.5px solid var(--zd-line);
  padding: 8px 0 6px;
}

.ppv-bazi .noteLuckRowTitle {
margin: 0 0 4px;
  padding: 0 12px;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--zd-muted);
}

.ppv-bazi .noteLuckScroller {
display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 0 8px;
}

.ppv-bazi .noteLuckItem {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 2px 1px;
}

.ppv-bazi .notePillarCol {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex-shrink: 0;
  flex-basis: 0;
  flex-grow: 1;
}

.ppv-bazi .notePillarCol + .notePillarCol {
border-left: 0.5px solid var(--zd-line);
}

.ppv-bazi .notePillarLabel {
font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
  margin-bottom: 4px;
}

.ppv-bazi .notePillarGz {
font-family: var(--zd-font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.ppv-bazi .noteEditorCard {
margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 12px;
}

.ppv-bazi .noteEditorInput {
width: 100%;
  min-height: 220px;
  resize: vertical;
  border: none;
  outline: none;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--zd-text);
}

.ppv-bazi .noteEditorInput::placeholder {
color: var(--zd-muted);
}

.ppv-bazi .noteEditorFooter {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 0.5px solid var(--zd-line);
  padding-top: 10px;
}

.ppv-bazi .noteEditorStatus {
flex: 1;
  min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
}

.ppv-bazi .noteEditorStatusError {
color: #c0392b;
}

.ppv-bazi .noteEditorSave {
flex-shrink: 0;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-accent);
  color: #fff;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 24px;
}

.ppv-bazi .noteEditorSave:disabled {
opacity: 0.5;
}

.ppv-bazi .conversation {
display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.ppv-bazi .userBubble {
max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px 14px 2px 14px;
  background: var(--zd-accent);
  color: #fff;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 20px;
  word-break: break-word;
}

.ppv-bazi .composerDock {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px var(--zd-gutter) 34px;
  background: var(--zd-bg);
}

.ppv-bazi .aiToggle {
display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: var(--zd-muted);
}

.ppv-bazi .aiToggle svg {
display: block;
}

.ppv-bazi .chipRow {
display: flex;
  align-items: center;
  gap: 8px;
}

.ppv-bazi .chipScroll {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-bazi .chipScroll::-webkit-scrollbar {
display: none;
}

.ppv-bazi .chipScroll .switchChip {
flex-shrink: 0;
}

.ppv-bazi .switchChip {
display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 5px 8px;
  border: 0.8px solid var(--zd-line);
  border-radius: 8px;
  background: transparent;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-bazi .switchChip:disabled {
opacity: 0.55;
}

.ppv-bazi .composer {
display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  column-gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.12);
}

.ppv-bazi .composer input {
min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 12px;
  color: var(--zd-text);
}

.ppv-bazi .composer input::placeholder {
color: #afafaf;
}

.ppv-bazi .composerIcon {
width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
}

.ppv-bazi .composerIcon img {
width: 24px;
  height: 24px;
}

.ppv-bazi .composerIcon svg {
width: 24px;
  height: 24px;
  display: block;
}

.ppv-bazi .sendButton {
color: #afafaf;
}

.ppv-bazi .sendButtonActive {
color: #0a0a0a;
}

.ppv-bazi .recording {
border-radius: 50%;
  background: #f0e6dc;
}

.ppv-bazi .shotOverlay {
position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: calc(var(--zd-modal-gutter-y) + var(--zd-safe-top)) var(--zd-modal-gutter-x)
    calc(var(--zd-modal-gutter-y) + var(--zd-safe-bottom));
  background: rgba(31, 26, 18, 0.55);
}

.ppv-bazi .shotPanel {
position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-height: 100%;
  
  padding: 56px 12px 14px;
  border-radius: 16px;
  background: var(--zd-bg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.ppv-bazi .shotClose {
position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-bazi .shotClose img {
width: 14px;
  height: 14px;
}

.ppv-bazi .shotImageWrap {
flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 0.8px solid var(--zd-line);
  border-radius: 12px;
  background: var(--zd-surface);
  -webkit-overflow-scrolling: touch;
}

.ppv-bazi .shotImage {
display: block;
  width: 100%;
  height: auto;
}

.ppv-bazi .shotErrorText {
margin: 8px 0;
  font-size: 14px;
  text-align: center;
  color: #c0392b;
}

.ppv-bazi .shotLongPressHint {
margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  color: var(--zd-muted);
}

.ppv-bazi .shotSaveButton {
width: 100%;
  height: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--zd-accent);
  color: #fff;
  font-family: var(--zd-font-sans);
  font-size: 15px;
  font-weight: 600;
}

.ppv-bazi .mono .profile *,
.ppv-bazi .mono .tableCard *,
.ppv-bazi .mono .luckCard *,
.ppv-bazi .mono .notesCard *,
.ppv-bazi .mono .relationCard *,
.ppv-bazi .mono .notePillarsCard * {
color: var(--zd-text) !important;
}

.ppv-bazi .mono .relationCard text {
fill: var(--zd-text) !important;
}

/* ── 搬自 src/h5/components/BaziRelationGraph.module.css（作用域 .ppv-bazi） ── */
.ppv-bazi .host {
width: 100%;
  color: var(--zd-text);
}

.ppv-bazi .graph {
display: block;
}

.ppv-bazi .colLabel {
font-family: var(--zd-font-sans);
  font-size: 10px;
  fill: currentColor;
}

.ppv-bazi .gzChar {
font-family: var(--zd-font-serif-text);
  font-weight: 600;
}

.ppv-bazi .relChar {
font-family: var(--zd-font-serif-text);
  font-weight: 600;
}

.ppv-bazi .relationLabel {
font-family: var(--zd-font-sans);
  font-size: 9.5px;
  font-weight: 500;
  fill: currentColor;
}

.ppv-bazi .emptyHint {
margin: 2px 0 4px;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 18px;
  color: var(--zd-muted);
  text-align: center;
}

/* ── 搬自 src/h5/components/BaziSymbolDialog.module.css（作用域 .ppv-bazi） ── */
.ppv-bazi .overlay {
position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: calc(var(--zd-modal-gutter-y) + var(--zd-safe-top)) var(--zd-modal-gutter-x)
    calc(var(--zd-modal-gutter-y) + var(--zd-safe-bottom));
  background: rgba(31, 26, 18, 0.45);
  animation: ppv-bazi-overlayIn 0.2s ease-out;
}

.ppv-bazi .overlayLeaving {
animation: ppv-bazi-overlayOut 0.18s ease-in forwards;
}

.ppv-bazi .dialog {
position: relative;
  width: 100%;
  
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 16px;
  background: #f5f2ed;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  
  will-change: transform;
  backface-visibility: hidden;
}

.ppv-bazi .dialogIn {
animation: ppv-bazi-dialogIn 0.26s cubic-bezier(0.32, 1.25, 0.6, 1);
}

.ppv-bazi .dialogArming {
opacity: 0;
}

.ppv-bazi .dialogLeaving {
animation: ppv-bazi-dialogOut 0.2s ease-in forwards;
}

@keyframes ppv-bazi-overlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ppv-bazi-overlayOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes ppv-bazi-dialogIn {
  from {
    opacity: 0;
    transform: scale(0.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ppv-bazi-dialogOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.04);
  }
}

@media (prefers-reduced-motion: reduce) {
.ppv-bazi .overlay,
.ppv-bazi .overlayLeaving,
.ppv-bazi .dialog,
.ppv-bazi .dialogIn,
.ppv-bazi .dialogArming,
.ppv-bazi .dialogLeaving {
animation: none;
}
}

.ppv-bazi .close {
flex-shrink: 0;
  align-self: flex-start;
  margin-top: -8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #0a0a0a;
  font-size: 22px;
  line-height: 1;
}

.ppv-bazi .heading {
width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ppv-bazi .headingRow {
width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ppv-bazi .fieldLabel {
font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 17px;
  color: var(--zd-muted);
}

.ppv-bazi .symbol {
min-width: 0;
  font-family: var(--zd-font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  color: var(--zd-text);
  text-align: left;
}

.ppv-bazi .ornament {
display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ppv-bazi .ornamentLine {
flex: 1;
  height: 0.5px;
  background: var(--zd-line);
}

.ppv-bazi .ornamentDot {
width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--zd-line);
}

.ppv-bazi .body {
width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  
  overscroll-behavior: contain;
  transform: translateZ(0);
}

.ppv-bazi .bodyText {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--zd-text);
  text-align: center;
}

.ppv-bazi .sections {
display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.ppv-bazi .section {
display: flex;
  flex-direction: column;
  gap: 6px;
}

.ppv-bazi .sectionTitle {
margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--zd-accent);
}

.ppv-bazi .sectionTitle::before {
content: '';
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--zd-accent);
}

.ppv-bazi .sectionText {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--zd-text);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}

.ppv-bazi .luckBadge {
align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 1000px;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
}

.ppv-bazi .luckJi {
color: #1f7a44;
  background: rgba(38, 111, 64, 0.12);
  border-color: rgba(38, 111, 64, 0.4);
}

.ppv-bazi .luckXiong {
color: #b73f42;
  background: rgba(183, 63, 66, 0.12);
  border-color: rgba(183, 63, 66, 0.4);
}

.ppv-bazi .luckNeutral {
color: #8a6d3b;
  background: rgba(138, 109, 59, 0.12);
  border-color: rgba(138, 109, 59, 0.4);
}

.ppv-bazi .ruleList {
margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ppv-bazi .ruleRow {
display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  line-height: 20px;
  color: var(--zd-muted);
}

.ppv-bazi .ruleRowActive {
background: rgba(178, 74, 33, 0.08);
  border-color: rgba(178, 74, 33, 0.35);
  color: var(--zd-text);
}

.ppv-bazi .ruleName {
flex-shrink: 0;
  font-family: var(--zd-font-serif);
  font-weight: 600;
}

.ppv-bazi .ruleRowActive .ruleName {
color: var(--zd-accent);
}

.ppv-bazi .ruleText {
word-break: break-word;
}

.ppv-bazi .action {
flex-shrink: 0;
  margin-bottom: 2px;
  padding: 0 0 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--zd-accent);
  border-radius: 0;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.23px;
  color: var(--zd-accent);
}

/* ── 搬自 src/h5/components/BaziOracleReveal.module.css（作用域 .ppr-bazi） ── */
.ppr-bazi .overlay {
position: absolute;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  
  pointer-events: auto;
  
  perspective: 1800px;
  perspective-origin: 50% 42%;
}

.ppr-bazi .sheet {
position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  
  transform-origin: 0 0;
  will-change: transform, opacity;
}

.ppr-bazi .sheetFront {
position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 58%),
    var(--zd-bg, #faf9f5);
  backface-visibility: hidden;
}

.ppr-bazi .sheetBack {
position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(202, 180, 159, 0.18) 0%, rgba(202, 180, 159, 0.05) 60%),
    #f4f1e9;
  transform: rotate3d(1, -1, 0, 180deg);
  backface-visibility: hidden;
}

.ppr-bazi .charStage {
position: relative;
  width: min(23vw, 100px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ppr-bazi .char {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  
  mix-blend-mode: multiply;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity, filter;
}

.ppr-bazi .charEnter {
animation: ppr-bazi-oracle-char-in 220ms cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes ppr-bazi-oracle-char-in {
  from {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.ppr-bazi .charLeave {
animation: ppr-bazi-oracle-char-out 200ms ease forwards;
}

@keyframes ppr-bazi-oracle-char-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.94);
  }
}

.ppr-bazi .loadingText {
position: absolute;
  left: 50%;
  top: 74.5%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--zd-font-serif, serif);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--zd-muted, #8f6f4c);
  animation: ppr-bazi-oracle-caption-breathe 2200ms ease-in-out infinite;
}

@keyframes ppr-bazi-oracle-caption-breathe {
  0%,
  100% {
    opacity: 0.62;
  }
  50% {
    opacity: 1;
  }
}

.ppr-bazi .loadingDots {
display: inline-flex;
  gap: 3px;
  margin-left: 2px;
}

.ppr-bazi .loadingDots i {
width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: ppr-bazi-oracle-dot-hop 1200ms ease-in-out infinite;
}

.ppr-bazi .loadingDots i:nth-child(2) {
animation-delay: 150ms;
}

.ppr-bazi .loadingDots i:nth-child(3) {
animation-delay: 300ms;
}

@keyframes ppr-bazi-oracle-dot-hop {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.ppr-bazi .overlay[data-phase='flipping'] {
pointer-events: none;
}

.ppr-bazi .overlay[data-phase='flipping'] .sheet {
animation: ppr-bazi-oracle-page-flip 1120ms cubic-bezier(0.38, 0.05, 0.16, 1) forwards;
}

@keyframes ppr-bazi-oracle-page-flip {
  0% {
    transform: rotate3d(1, -1, 0, 0deg) skew(0deg, 0deg);
    opacity: 1;
  }
  60% {
    
    opacity: 0.95;
  }
  100% {
    transform: rotate3d(1, -1, 0, 178deg) skew(1.4deg, 0.9deg);
    opacity: 0;
  }
}

.ppr-bazi .curlShadow {
position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  height: 46%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    140% 140% at 100% 100%,
    rgba(86, 62, 36, 0.16) 0%,
    rgba(86, 62, 36, 0.07) 44%,
    rgba(86, 62, 36, 0) 78%
  );
}

.ppr-bazi .overlay[data-phase='flipping'] .curlShadow {
animation: ppr-bazi-oracle-curl-shade 1120ms ease-out forwards;
}

@keyframes ppr-bazi-oracle-curl-shade {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  70% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}

.ppr-bazi .liftShade {
position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    130% 120% at 96% 96%,
    rgba(60, 44, 26, 0.14) 0%,
    rgba(60, 44, 26, 0.05) 46%,
    rgba(60, 44, 26, 0) 74%
  );
}

.ppr-bazi .overlay[data-phase='flipping'] .liftShade {
animation: ppr-bazi-oracle-lift-shade 1120ms ease-out forwards;
}

@keyframes ppr-bazi-oracle-lift-shade {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
.ppr-bazi .charEnter,
.ppr-bazi .charLeave {
animation: none;
}

.ppr-bazi .charLeave {
display: none;
}

.ppr-bazi .loadingText,
.ppr-bazi .loadingDots i {
animation: none;
}

.ppr-bazi .overlay[data-phase='flipping'] .sheet {
animation: ppr-bazi-oracle-fade-out 320ms ease forwards;
}

.ppr-bazi .overlay[data-phase='flipping'] .curlShadow,
.ppr-bazi .overlay[data-phase='flipping'] .liftShade {
animation: none;
}

@keyframes ppr-bazi-oracle-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}

/* ── 搬自 src/h5/components/ZiweiResultCard.module.css（作用域 .ppc-ziwei） ── */
@keyframes ppc-ziwei-ziweiCardStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ppc-ziwei .ziweiCard {
position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  padding: 16px 32px 16px 18px;
  border-radius: var(--zd-radius-card);
  background: transparent;
  color: var(--zd-text);
  text-align: left;
  animation: ppc-ziwei-ziweiCardStepIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppc-ziwei .ziweiCardHeader {
display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ppc-ziwei .ziweiCardName {
display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppc-ziwei .ziweiCardTime {
flex: none;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-ziwei .pillars {
display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  width: 100%;
  align-self: stretch;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.ppc-ziwei .pillar {
display: inline-flex;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.ppc-ziwei .summary {
display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  align-self: stretch;
  column-gap: 14px;
  row-gap: 8px;
  border-top: 0.5px solid var(--zd-line);
  padding-top: 10px;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  line-height: 1.4;
  color: var(--zd-text);
}

.ppc-ziwei .summaryItem {
display: block;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}

.ppc-ziwei .summaryItem:nth-child(2) {
grid-column: 1 / -1;
}

.ppc-ziwei .placeholder {
border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-ziwei .flush {
padding-right: 18px;
}

.ppc-ziwei .ziweiCardChevron {
position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zd-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* ── 搬自 src/h5/routes/ZiweiChartPage.module.css（作用域 .ppv-ziwei） ── */
.ppv-ziwei .page {
position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--zd-bg, #faf9f5);
  color: var(--zd-text, #0a0a0a);
}

.ppv-ziwei .page.embedded {
height: 100%;
}

.ppv-ziwei .header {
position: relative;
  z-index: 20;
  height: 54px;
  flex-shrink: 0;
  background: var(--zd-bg);
}

.ppv-ziwei .headerButton {
position: absolute;
  top: 10px;
  left: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-ziwei .headerButton img {
width: 22px;
  height: 22px;
}

.ppv-ziwei .title {
position: absolute;
  top: 0;
  left: 50%;
  height: 54px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--zd-font-brand);
  font-size: var(--zd-fs-page);
  font-weight: 700;
}

.ppv-ziwei .chartTabs {
position: relative;
  z-index: 20;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  background: var(--zd-bg, #faf9f5);
  border-bottom: 0.5px solid var(--zd-line);
}

.ppv-ziwei .chartTab {
position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--zd-text, #0a0a0a);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
}

.ppv-ziwei .chartTabActive {
color: var(--zd-accent);
  font-weight: 600;
}

.ppv-ziwei .chartTabLabel {
position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.ppv-ziwei .chartTabUnderline {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 10px;
  background: var(--zd-accent);
}

.ppv-ziwei .body {
position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ppv-ziwei .panelTopPad {
padding-top: 8px;
}

.ppv-ziwei .placeholder {
margin-top: 40px;
  text-align: center;
  color: var(--zd-text-muted, #8a8378);
  font-size: 14px;
}

.ppv-ziwei .profile {
padding-top: 8px;
}

.ppv-ziwei .profileName {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 20px;
  line-height: 24px;
  color: #000;
}

.ppv-ziwei .profileMeta {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.ppv-ziwei .profileMetaTags {
display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 18px;
  color: var(--zd-text);
}

.ppv-ziwei .expandButton {
flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 4px 12px;
  border: 0.8px solid var(--zd-line);
  border-radius: 20px;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
}

.ppv-ziwei .expandCaret {
width: 7px;
  height: 7px;
  border-right: 1.2px solid var(--zd-muted);
  border-bottom: 1.2px solid var(--zd-muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.ppv-ziwei .expandCaretUp {
transform: translateY(1px) rotate(-135deg);
}

.ppv-ziwei .profileExtraWrap {
display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s ease, opacity 0.28s ease;
}

.ppv-ziwei .profileExtraOpen {
grid-template-rows: 1fr;
  opacity: 1;
}

.ppv-ziwei .profileExtraInner {
min-height: 0;
  overflow: hidden;
}

.ppv-ziwei .profileExtra {
padding-top: 8px;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 18px;
  color: var(--zd-muted);
}

.ppv-ziwei .profileExtra p {
margin: 2px 0;
}

@media (prefers-reduced-motion: reduce) {
.ppv-ziwei .profileExtraWrap {
transition: none;
}
}

.ppv-ziwei .profileDivider {
display: block;
  height: 1px;
  margin-top: 12px;
  background: var(--zd-line);
  opacity: 0.6;
}

.ppv-ziwei .plateWrap {
position: relative;
  width: 100%;
  margin: 8px 0 0;
}

.ppv-ziwei .plate {
display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  aspect-ratio: 362 / 543;
  width: 100%;
  margin: 8px 0 0;
  border: 0.5px solid #cab49f;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}

.ppv-ziwei .palace {
position: relative;
  border: 0.5px solid #cab49f;
  overflow: hidden;
  font-family: 'PingFang SC', var(--zd-font-sans, sans-serif);
  color: #0a0a0a;
  padding: 0;
  background: transparent;
  text-align: inherit;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.ppv-ziwei .palaceSelected {
background: rgba(124, 58, 237, 0.16);
  box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, 0.6);
}

.ppv-ziwei .palaceSanFang {
background: rgba(183, 63, 66, 0.12);
  box-shadow: inset 0 0 0 1px rgba(183, 63, 66, 0.42);
}

.ppv-ziwei .palaceStars {
position: absolute;
  top: 2px;
  left: 2px;
  right: 12px;
  bottom: 44px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px 2px;
  overflow: visible;
}

.ppv-ziwei .palaceStars .star:nth-child(n + 15) {
display: none;
}

.ppv-ziwei .symbolSelected {
border-radius: 3px;
  background: rgba(255, 219, 206, 0.6);
  box-shadow: 0 0 0 1px var(--zd-accent);
}

.ppv-ziwei .majorRow {
display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.ppv-ziwei .minorRow {
display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.ppv-ziwei .adjRow {
display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.ppv-ziwei .star {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 7px;
  padding: 0;
  line-height: 0;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.ppv-ziwei .starName {
display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 9px;
  line-height: 10px;
  font-weight: 400;
  color: #0a0a0a;
}

.ppv-ziwei .starMajor {
color: #b73f42;
}

.ppv-ziwei .starMinor {
color: #7c3aed;
}

.ppv-ziwei .starMalefic {
color: #1c5fa8;
}

.ppv-ziwei .verticalChar {
display: block;
  height: 10px;
  line-height: 10px;
}

.ppv-ziwei .starBright {
font-size: 7px;
  line-height: 7px;
  color: #8f6f4c;
}

.ppv-ziwei .starMutagen {
font-size: 8px;
  line-height: 8px;
  font-weight: 600;
}

.ppv-ziwei .mutagenLu {
color: #2f9e44;
}

.ppv-ziwei .mutagenQuan {
color: #1971c2;
}

.ppv-ziwei .mutagenKe {
color: #e8a200;
}

.ppv-ziwei .mutagenJi {
color: #c2255c;
}

.ppv-ziwei .starMutagenOverlay {
font-size: 7px;
  line-height: 8px;
  font-weight: 600;
  opacity: 0.92;
}

.ppv-ziwei .sanFangSvg {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.ppv-ziwei .sanFangDots {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.ppv-ziwei .sanFangDot,
.ppv-ziwei .sanFangDotCenter {
position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ppv-ziwei .sanFangDot {
width: 7px;
  height: 7px;
  background: rgba(183, 63, 66, 0.7);
}

.ppv-ziwei .sanFangDotCenter {
width: 9px;
  height: 9px;
  background: rgba(124, 58, 237, 0.85);
}

.ppv-ziwei .centerDecadalBadge {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
}

.ppv-ziwei .centerDecadalLabel {
font-size: 9px;
  line-height: 12px;
  color: rgba(236, 99, 31, 0.9);
  letter-spacing: 0.08em;
}

.ppv-ziwei .centerDecadalRange {
font-size: 11px;
  line-height: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--zd-accent);
}

.ppv-ziwei .centerDecadalPalace {
font-size: 9px;
  line-height: 12px;
  color: rgba(147, 51, 234, 0.7);
}

.ppv-ziwei .mutagenLegend {
display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0 4px;
}

.ppv-ziwei .legendChip {
font-size: 9px;
  line-height: 14px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 0.5px solid transparent;
  color: #fff;
}

.ppv-ziwei .legendHint {
font-size: 9px;
  line-height: 14px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 0.5px solid #cab49f;
  color: var(--zd-text-muted, #8a8378);
}

.ppv-ziwei .adjStar {
font-size: 9px;
  color: var(--zd-text-muted, #9a9488);
  line-height: 1.2;
}

.ppv-ziwei .emptyStar {
font-size: 11px;
  color: var(--zd-line);
}

.ppv-ziwei .palaceFooter {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  pointer-events: none;
}

.ppv-ziwei .palaceMetaColumn {
position: absolute;
  left: 3.75px;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.ppv-ziwei .palaceMetaLower {
display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.ppv-ziwei .palaceAges {
font-size: 7px;
  line-height: 8px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  color: #0a0a0a;
}

.ppv-ziwei .metaBoshiRow {
display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.ppv-ziwei .metaPalaceTwelve {
font-family: 'PingFang SC', var(--zd-font-sans, sans-serif);
  font-size: 9px;
  line-height: 10px;
  font-weight: 400;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-ziwei .decadalRange {
font-size: 8px;
  line-height: 9px;
  font-weight: 400;
  color: #0a0a0a;
  text-align: left;
  white-space: nowrap;
  flex-shrink: 0;
}

.ppv-ziwei .palaceCorner {
position: absolute;
  right: 3.25px;
  bottom: 3.5px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 2px;
}

.ppv-ziwei .palaceName {
font-size: 7px;
  line-height: 8px;
  font-weight: 500;
  color: #b73f42;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.ppv-ziwei .palaceNameSoul {
color: var(--zd-accent);
}

.ppv-ziwei .palaceGzColumn {
display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
  font-family: 'PingFang SC', var(--zd-font-sans, sans-serif);
  font-size: 9px;
  line-height: 10px;
  font-weight: 400;
}

.ppv-ziwei .palaceGz {
display: flex;
  flex-direction: column;
  align-items: center;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.ppv-ziwei .palaceChangsheng {
display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 7px;
  line-height: 8px;
  font-weight: inherit;
  text-align: center;
  color: #0a0a0a;
}

.ppv-ziwei .palaceChangsheng .verticalChar {
height: 8px;
  line-height: 8px;
}

.ppv-ziwei .palaceChangshengInline {
white-space: nowrap;
}

.ppv-ziwei .bodyBadge,
.ppv-ziwei .originBadge,
.ppv-ziwei .soulBadge {
display: flex;
  align-items: center;
  justify-content: center;
  min-width: 13px;
  min-height: 27px;
  padding: 2px 3px;
  border-radius: 6px;
  border: 0.5px solid transparent;
  font-size: 8px;
  line-height: 9px;
  writing-mode: vertical-rl;
  font-weight: 500;
}

.ppv-ziwei .bodyBadge {
background: rgba(236, 99, 31, 0.08);
  border-color: rgba(236, 99, 31, 0.4);
  color: var(--zd-accent);
}

.ppv-ziwei .originBadge {
background: rgba(134, 142, 150, 0.08);
  border-color: rgba(134, 142, 150, 0.4);
  color: #868e96;
}

.ppv-ziwei .soulBadge {
background: rgba(236, 99, 31, 0.08);
  border-color: rgba(236, 99, 31, 0.4);
  color: var(--zd-accent);
}

.ppv-ziwei .palaceBadges {
position: absolute;
  right: 3.17px;
  bottom: 57.5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}

.ppv-ziwei .center {
grid-row: 2 / 4;
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 8px 6px 6px;
  border: 0.5px solid #cab49f;
  overflow: hidden;
}

.ppv-ziwei .centerTop {
display: flex;
  justify-content: center;
  gap: 9px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #0a0a0a;
}

.ppv-ziwei .centerPillars {
display: grid;
  grid-template-columns: repeat(4, fit-content(100%));
  gap: 2px 12px;
  padding: 2px 10px;
  margin: 0 auto;
  opacity: 0.8;
}

.ppv-ziwei .centerPillarHead,
.ppv-ziwei .centerPillarRow {
display: contents;
  text-align: center;
}

.ppv-ziwei .centerPillarHead span {
font-size: 11px;
  line-height: 14px;
  color: rgba(0, 0, 0, 0.6);
}

.ppv-ziwei .centerPillarRow span {
font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.ppv-ziwei .centerMaster {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  font-size: 10px;
  line-height: 13px;
  color: #0a0a0a;
}

.ppv-ziwei .centerMasterRow {
display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.ppv-ziwei .centerMasterPair {
display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.ppv-ziwei .centerMasterLabel {
flex: 0 0 auto;
  color: rgba(0, 0, 0, 0.62);
}

.ppv-ziwei .centerMasterValue {
flex: 0 0 auto;
  font-weight: 500;
}

.ppv-ziwei .scopeModeBar {
display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin-top: 2px;
  box-sizing: border-box;
}

.ppv-ziwei .scopeModeBtn {
appearance: none;
  border: 0.5px solid #b8b8b8;
  border-radius: 4px;
  background: transparent;
  color: #5c5348;
  width: 100%;
  min-width: 0;
  font-size: clamp(6px, 1.9vw, 8px);
  line-height: 11px;
  padding: 2px 1px;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
}

.ppv-ziwei .scopeModeBtnActive {
font-weight: 600;
}

.ppv-ziwei .scopeModeBtnNatal {
color: #dc2626;
}

.ppv-ziwei .scopeModeBtnNatal.scopeModeBtnActive {
border-color: #dc2626;
  background: rgba(220, 38, 38, 0.22);
}

.ppv-ziwei .scopeModeBtnDecadal {
color: #7c3aed;
}

.ppv-ziwei .scopeModeBtnDecadal.scopeModeBtnActive {
border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.22);
}

.ppv-ziwei .scopeModeBtnYearly {
color: #ea580c;
}

.ppv-ziwei .scopeModeBtnYearly.scopeModeBtnActive {
border-color: #ea580c;
  background: rgba(234, 88, 12, 0.22);
}

.ppv-ziwei .scopeModeBtnMonthly {
color: #16a34a;
}

.ppv-ziwei .scopeModeBtnMonthly.scopeModeBtnActive {
border-color: #16a34a;
  background: rgba(22, 163, 74, 0.22);
}

.ppv-ziwei .scopeModeBtnDaily {
color: #92400e;
}

.ppv-ziwei .scopeModeBtnDaily.scopeModeBtnActive {
border-color: #92400e;
  background: rgba(146, 64, 14, 0.22);
}

.ppv-ziwei .scopeModeBtnHourly {
color: #2563eb;
}

.ppv-ziwei .scopeModeBtnHourly.scopeModeBtnActive {
border-color: #2563eb;
  background: rgba(37, 99, 235, 0.22);
}

.ppv-ziwei .centerBrandWrap {
flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 2px 0 4px;
}

.ppv-ziwei .centerBrandImg {
display: block;
  width: min(88%, 176px);
  height: auto;
  max-height: 44px;
  object-fit: contain;
}

.ppv-ziwei .horoscopeTagGrid {
position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  z-index: 3;
}

.ppv-ziwei .horoscopeTagCol {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.ppv-ziwei .horoscopeTagItem {
font-size: 7px;
  line-height: 8px;
  font-weight: 600;
  white-space: nowrap;
}

.ppv-ziwei .horoscopeTagDecadal {
color: #7c3aed;
}

.ppv-ziwei .horoscopeTagYearly {
color: #ea580c;
}

.ppv-ziwei .horoscopeTagMonthly {
color: #16a34a;
}

.ppv-ziwei .horoscopeTagDaily {
color: #92400e;
}

.ppv-ziwei .horoscopeTagHourly {
color: #2563eb;
}

.ppv-ziwei .horoscopeTagNatal {
color: #dc2626;
}

.ppv-ziwei .horoscopeFlowRow {
display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 2px;
  margin-bottom: 0;
}

.ppv-ziwei .palaceStarsWithScopeTags {
bottom: 48px;
}

.ppv-ziwei .horoscopeFlowBadge {
display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 6px;
  line-height: 7px;
  color: #0a0a0a;
  font-weight: 400;
}

.ppv-ziwei .horoscopeFlowBadge .verticalChar {
height: 7px;
  line-height: 7px;
}

.ppv-ziwei .centerLabel {
display: none;
}

.ppv-ziwei .centerSihua {
display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
}

.ppv-ziwei .centerSihuaLabel {
color: rgba(0, 0, 0, 0.55);
}

.ppv-ziwei .centerSihuaItem {
font-weight: 600;
}

.ppv-ziwei .sihuaTextLu {
color: #2f9e44;
}

.ppv-ziwei .sihuaTextQuan {
color: #1971c2;
}

.ppv-ziwei .sihuaTextKe {
color: #e8a200;
}

.ppv-ziwei .sihuaTextJi {
color: #c2255c;
}

.ppv-ziwei .timelineCard {
margin-top: 8px;
  margin-bottom: 14px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: transparent;
  padding: 6px 0 10px;
}

.ppv-ziwei .timelineBlock {
padding: 8px 0 4px;
}

.ppv-ziwei .timelineHeading {
display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0 16px;
}

.ppv-ziwei .sectionTitle {
flex-shrink: 0;
  margin: 0;
  font-family: 'Noto Serif SC', var(--zd-font-serif);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: #0a0a0a;
}

.ppv-ziwei .timelineGrid {
display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 12px;
  padding: 8px 0 2px;
  border-top: 0.5px solid var(--zd-line);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-ziwei .timelineGrid::-webkit-scrollbar {
display: none;
}

.ppv-ziwei .timelineCell {
flex: 0 0 auto;
  min-width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
  border: none;
  background: transparent;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
}

.ppv-ziwei .timelineCellActive {
background: rgba(202, 180, 159, 0.28);
}

.ppv-ziwei .timelineCellAiSelected {
border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--zd-accent);
}

.ppv-ziwei .timelineAge,
.ppv-ziwei .timelineYear {
font-size: 10px;
  line-height: 13.5px;
  font-weight: 400;
  color: #0a0a0a;
}

.ppv-ziwei .timelineGz {
font-family: var(--zd-font-serif);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
}

.ppv-ziwei .composerDock {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px var(--zd-gutter) 34px;
  background: var(--zd-bg);
}

.ppv-ziwei .page.embedded .composerDock {
display: none;
}

.ppv-ziwei .chipRow {
display: flex;
  align-items: center;
  gap: 8px;
}

.ppv-ziwei .chipScroll {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-ziwei .chipScroll::-webkit-scrollbar {
display: none;
}

.ppv-ziwei .chipScroll .switchChip {
flex-shrink: 0;
}

.ppv-ziwei .switchChip {
display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 5px 8px;
  border: 0.8px solid var(--zd-line);
  border-radius: 8px;
  background: transparent;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-ziwei .switchChip:disabled {
opacity: 0.55;
}

.ppv-ziwei .aiToggle {
display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: var(--zd-muted);
}

.ppv-ziwei .aiToggle svg {
display: block;
}

.ppv-ziwei .composer {
flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.12);
  text-align: left;
}

.ppv-ziwei .composerPlus {
display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--zd-bg);
  color: var(--zd-accent);
  font-size: 18px;
  line-height: 1;
}

.ppv-ziwei .composerPlaceholder {
flex: 1;
  color: #afafaf;
  font-size: 14px;
  line-height: 12px;
}

.ppv-ziwei .shotOverlay {
position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: calc(var(--zd-modal-gutter-y) + var(--zd-safe-top)) var(--zd-modal-gutter-x)
    calc(var(--zd-modal-gutter-y) + var(--zd-safe-bottom));
  background: rgba(31, 26, 18, 0.55);
}

.ppv-ziwei .shotPanel {
position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-height: 100%;
  padding: 56px 12px 14px;
  border-radius: 16px;
  background: var(--zd-bg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.ppv-ziwei .shotClose {
position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-ziwei .shotClose img {
width: 14px;
  height: 14px;
}

.ppv-ziwei .shotImageWrap {
flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 0.8px solid var(--zd-line);
  border-radius: 12px;
  background: var(--zd-surface);
  -webkit-overflow-scrolling: touch;
}

.ppv-ziwei .shotImage {
display: block;
  width: 100%;
  height: auto;
}

.ppv-ziwei .shotErrorText {
margin: 8px 0;
  font-size: 14px;
  text-align: center;
  color: #c0392b;
}

.ppv-ziwei .shotLongPressHint {
margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  color: var(--zd-muted);
}

.ppv-ziwei .shotSaveButton {
width: 100%;
  height: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--zd-accent);
  color: #fff;
  font-family: var(--zd-font-sans);
  font-size: 15px;
  font-weight: 600;
}

.ppv-ziwei .notePillarsCard {
margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 10px 8px 12px;
}

.ppv-ziwei .notePillarCol {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ppv-ziwei .notePillarCol + .notePillarCol {
border-left: 0.5px solid var(--zd-line);
}

.ppv-ziwei .notePillarLabel {
font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
  margin-bottom: 4px;
}

.ppv-ziwei .notePillarGz {
font-family: var(--zd-font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.ppv-ziwei .noteEditorCard {
margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 12px;
}

.ppv-ziwei .noteEditorInput {
width: 100%;
  min-height: 220px;
  resize: vertical;
  border: none;
  outline: none;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--zd-text);
}

.ppv-ziwei .noteEditorInput::placeholder {
color: var(--zd-muted);
}

.ppv-ziwei .noteEditorFooter {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 0.5px solid var(--zd-line);
  padding-top: 10px;
}

.ppv-ziwei .noteEditorStatus {
flex: 1;
  min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
}

.ppv-ziwei .noteEditorStatusError {
color: #c0392b;
}

.ppv-ziwei .noteEditorSave {
flex-shrink: 0;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-accent);
  color: #fff;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 24px;
}

.ppv-ziwei .noteEditorSave:disabled {
opacity: 0.5;
}

.ppv-ziwei .palaceInfoOpen {
box-shadow: inset 0 0 0 1px rgba(183, 63, 66, 0.45);
}

.ppv-ziwei .sheetOverlay {
position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: calc(var(--zd-modal-gutter-y) + var(--zd-safe-top)) var(--zd-modal-gutter-x)
    calc(var(--zd-modal-gutter-y) + var(--zd-safe-bottom));
  background: rgba(31, 26, 18, 0.45);
}

.ppv-ziwei .sheetPanel {
display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  min-height: 60%;
  padding: 16px 0 20px;
  border-radius: 10px;
  background: #f5f2ed;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  
  will-change: transform;
  backface-visibility: hidden;
}

.ppv-ziwei .sheetOverlayIn {
animation: ppv-ziwei-sheet-overlay-in 200ms ease-out;
}

.ppv-ziwei .sheetOverlayLeaving {
animation: ppv-ziwei-sheet-overlay-out 200ms ease-in forwards;
}

.ppv-ziwei .sheetPanelArming {
opacity: 0;
}

.ppv-ziwei .sheetPanelIn {
animation: ppv-ziwei-sheet-panel-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppv-ziwei .sheetPanelLeaving {
animation: ppv-ziwei-sheet-panel-out 200ms ease-in forwards;
}

@keyframes ppv-ziwei-sheet-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ppv-ziwei-sheet-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes ppv-ziwei-sheet-panel-in {
  from { opacity: 0; transform: scale(0.04); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ppv-ziwei-sheet-panel-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.04); }
}

@media (prefers-reduced-motion: reduce) {
.ppv-ziwei .sheetOverlayIn,
.ppv-ziwei .sheetOverlayLeaving,
.ppv-ziwei .sheetPanelIn,
.ppv-ziwei .sheetPanelLeaving {
animation: none;
}
}

.ppv-ziwei .sheetHead {
position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  flex-shrink: 0;
}

.ppv-ziwei .sheetTitle {
margin: 0;
  font-family: var(--zd-font-brand);
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

.ppv-ziwei .sheetClose {
position: absolute;
  right: 16px;
  top: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #0a0a0a;
  font-size: 22px;
  line-height: 1;
}

.ppv-ziwei .sheetActions {
display: flex;
  padding: 8px 16px 0;
  flex-shrink: 0;
}

.ppv-ziwei .sheetSanFangCard {
--zd-line: var(--zd-accent);
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-radius: var(--zd-radius-card);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
}

.ppv-ziwei .sheetSanFangLabel {
font-family: var(--zd-font-serif-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.5px;
  color: var(--zd-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ppv-ziwei .sheetSanFangChevron {
flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ppv-ziwei .sheetSanFangChevron svg {
width: 20px;
  height: 20px;
}

.ppv-ziwei .sheetSanFangChevron svg path {
stroke: var(--zd-accent);
}

.ppv-ziwei .sheetOrnament {
display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 0;
  flex-shrink: 0;
}

.ppv-ziwei .sheetOrnamentLine {
flex: 1;
  height: 1px;
  background: rgba(202, 180, 159, 0.25);
}

.ppv-ziwei .sheetOrnamentDot {
width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--zd-line);
}

.ppv-ziwei .sheetBody {
flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 0;
  -webkit-overflow-scrolling: touch;
  
  overscroll-behavior: contain;
  transform: translateZ(0);
}

.ppv-ziwei .sheetSection {
margin-bottom: 12px;
  padding: 12px;
  border: 0.5px solid rgba(202, 180, 159, 0.55);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  
  contain: layout paint style;
}

.ppv-ziwei .sheetSectionHead {
display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.ppv-ziwei .sheetSectionTitle {
margin: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #595959;
}

.ppv-ziwei .sheetSectionTitle::before {
content: '';
  flex-shrink: 0;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--zd-accent);
}

.ppv-ziwei .sheetSectionSymbolLine {
margin: 2px 0 8px;
  font-family: var(--zd-font-serif);
  font-size: 20px;
  line-height: 28px;
  color: #0a0a0a;
  word-break: break-word;
}

.ppv-ziwei .sheetSectionSymbol {
font-family: var(--zd-font-serif);
  font-weight: 700;
}

.ppv-ziwei .sheetSectionLine {
margin: 0 0 6px;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 20px;
  color: #0a0a0a;
  word-break: break-word;
}

.ppv-ziwei .sheetSectionClamp {
display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ppv-ziwei .sheetSectionSymbolActive {
padding: 1px 5px;
  border: 0.8px solid var(--zd-accent);
  border-radius: 5px;
  background: rgba(255, 219, 206, 0.35);
}

.ppv-ziwei .meaningBlock {
margin: 0 0 10px;
}

.ppv-ziwei .sheetBlock {
margin: 0 0 12px;
}

.ppv-ziwei .sheetBlock:last-child {
margin-bottom: 0;
}

.ppv-ziwei .sheetBlockHead {
margin: 0 0 6px;
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  color: #0a0a0a;
}

.ppv-ziwei .meaningBlock:last-child {
margin-bottom: 0;
}

.ppv-ziwei .meaningSectionTitle {
margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: #595959;
}

.ppv-ziwei .meaningSectionTitle::before {
content: '·';
  flex-shrink: 0;
  font-weight: 600;
  color: #595959;
}

.ppv-ziwei .luckBadge {
display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 3px 12px;
  border-radius: 1000px;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
}

.ppv-ziwei .luckJi {
color: #1f7a44;
  background: rgba(38, 111, 64, 0.12);
  border-color: rgba(38, 111, 64, 0.4);
}

.ppv-ziwei .luckXiong {
color: #b73f42;
  background: rgba(183, 63, 66, 0.12);
  border-color: rgba(183, 63, 66, 0.4);
}

.ppv-ziwei .luckNeutral {
color: #8a6d3b;
  background: rgba(138, 109, 59, 0.12);
  border-color: rgba(138, 109, 59, 0.4);
}

.ppv-ziwei .sheetAddBtn {
flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
  padding: 0 0 1px;
  border: none;
  border-bottom: 1px solid var(--zd-accent);
  border-radius: 0;
  background: transparent;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--zd-accent);
  white-space: nowrap;
}

.ppv-ziwei .sheetAddBtnActive {
font-weight: 600;
}

.ppv-ziwei .sheetDetailBtn {
display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--zd-accent);
}

.ppv-ziwei .sheetLocked {
position: relative;
}

.ppv-ziwei .sheetLockedBlur {
filter: blur(6px);
  opacity: 0.78;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.ppv-ziwei .sheetLockedClamp {
max-height: 44px;
  overflow: hidden;
}

.ppv-ziwei .sheetLockHint {
position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ppv-ziwei .sheetLockHintPill {
display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 0.5px solid rgba(202, 180, 159, 0.7);
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 1;
  color: var(--zd-muted);
  box-shadow: 0 2px 8px rgba(31, 26, 18, 0.12);
}

.ppv-ziwei .sheetLockIcon {
width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.ppv-ziwei .sheetDetailChevron {
display: inline-block;
  transition: transform 0.2s ease;
}

.ppv-ziwei .sheetDetailChevronUp {
transform: rotate(180deg);
}

/* ── 搬自 src/h5/components/ZiweiStarReveal.module.css（作用域 .ppr-ziwei） ── */
.ppr-ziwei .overlay {
position: absolute;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: auto;
  background: var(--zd-bg, #faf9f5);
}

.ppr-ziwei .overlay::before {
content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 46%,
    rgba(250, 249, 245, 0) 58%,
    rgba(143, 111, 76, 0.08) 100%
  );
}

.ppr-ziwei .canvas {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ppr-ziwei .caption {
position: absolute;
  left: 50%;
  
  top: 81%;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transform: translateX(-50%);
  color: var(--zd-muted, #8f6f4c);
  font-family: var(--zd-font-serif, serif);
  font-size: 14px;
  letter-spacing: 5px;
  white-space: nowrap;
}

.ppr-ziwei .caption i {
width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: ppr-ziwei-dotPulse 960ms ease-in-out infinite;
}

.ppr-ziwei .caption i:nth-child(3) {
animation-delay: 160ms;
}

.ppr-ziwei .caption i:nth-child(4) {
animation-delay: 320ms;
}

@keyframes ppr-ziwei-dotPulse {
  0%,
  100% {
    opacity: 0.24;
  }

  35% {
    opacity: 1;
  }
}

.ppr-ziwei .closing {
animation: ppr-ziwei-revealOut 520ms ease forwards;
}

@keyframes ppr-ziwei-revealOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
.ppr-ziwei .caption i {
animation: none;
}

.ppr-ziwei .closing {
animation-duration: 220ms;
}
}

/* ── 搬自 src/h5/components/QimenResultCard.module.css（作用域 .ppc-qimen） ── */
@keyframes ppc-qimen-qimenCardStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ppc-qimen .qimenCard {
position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  
  padding: 16px 32px 16px 18px;
  border-radius: var(--zd-radius-card);
  background: transparent;
  color: var(--zd-text);
  text-align: left;
  animation: ppc-qimen-qimenCardStepIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppc-qimen .qimenCardHeader {
display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ppc-qimen .qimenCardName {
display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  
  font-family: var(--zd-font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppc-qimen .qimenCardGender {
flex: none;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--zd-accent);
}

.ppc-qimen .qimenCardTime {
flex: none;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-qimen .pillarRow {
display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  align-self: stretch;
}

.ppc-qimen .pillars {
display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.5em;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
}

.ppc-qimen .pillar {
display: inline-flex;
}

.ppc-qimen .qimenCardGrid {
display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  align-self: stretch;
  border-top: 0.5px solid var(--zd-line);
  border-left: 0.5px solid var(--zd-line);
  border-radius: 6px;
}

.ppc-qimen .cell {
position: relative;
  min-height: 58px;
  border-right: 0.5px solid var(--zd-line);
  border-bottom: 0.5px solid var(--zd-line);
  overflow: hidden;
}

.ppc-qimen .cellCenter {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}

.ppc-qimen .cellDunju {
font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--zd-accent);
  text-align: center;
}

.ppc-qimen .cellCore {
position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: var(--zd-font-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  white-space: nowrap;
}

.ppc-qimen .cellMarks {
position: absolute;
  left: 3px;
  top: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ppc-qimen .mark {
font-size: 8px;
  line-height: 1;
}

.ppc-qimen .cellGua {
position: absolute;
  left: 3px;
  bottom: 3px;
  font-family: var(--zd-font-serif);
  font-size: 9px;
  line-height: 1;
}

.ppc-qimen .cellStems {
position: absolute;
  right: 3px;
  bottom: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-family: var(--zd-font-serif);
  font-size: 9px;
  line-height: 11px;
}

.ppc-qimen .cellStem {
display: inline-flex;
}

.ppc-qimen .cellStemsCompact {
font-size: 8px;
  line-height: 9px;
}

.ppc-qimen .ziwuNotice {
display: block;
  margin: 0;
  padding: 8px 10px;
  border: 0.5px solid #e0c08a;
  border-radius: 6px;
  background: #fbf1df;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 1.7;
  color: #6a5948;
  text-align: left;
  white-space: normal;
}

.ppc-qimen .flush {
padding-right: 18px;
}

.ppc-qimen .qimenCardChevron {
position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zd-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* ── 搬自 src/h5/routes/QimenChartPage.module.css（作用域 .ppv-qimen） ── */
.ppv-qimen .page {
position: relative;
  height: 100%;
  min-height: 0;
  background: var(--zd-bg);
  color: var(--zd-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ppv-qimen .header {
position: relative;
  z-index: 20;
  height: 54px;
  flex-shrink: 0;
  background: var(--zd-bg);
}

.ppv-qimen .headerButton {
position: absolute;
  top: 10px;
  left: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-qimen .headerButton img {
width: 22px;
  height: 22px;
}

.ppv-qimen .title {
position: absolute;
  top: 0;
  left: 50%;
  height: 54px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--zd-font-brand);
  font-size: var(--zd-fs-page);
  font-weight: 700;
}

.ppv-qimen .chartTabs {
position: relative;
  z-index: 20;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  background: var(--zd-bg);
  border-bottom: 0.5px solid var(--zd-line);
}

.ppv-qimen .chartTab {
position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
}

.ppv-qimen .chartTabActive {
color: var(--zd-accent);
  font-weight: 600;
}

.ppv-qimen .chartTabLabel {
position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.ppv-qimen .chartTabUnderline {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 10px;
  background: var(--zd-accent);
}

.ppv-qimen .body {
position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  transform-origin: 50% 30%;
  transition:
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 900ms ease;
}

.ppv-qimen .bodyVeiled {
transform: scale(0.975);
  opacity: 0.9;
}

.ppv-qimen .panelTopPad {
padding-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
.ppv-qimen .body {
transition: none;
}

.ppv-qimen .bodyVeiled {
transform: none;
    opacity: 1;
}
}

.ppv-qimen .statusBanner {
margin: 8px 0;
  padding: 10px 14px;
  border-radius: var(--zd-radius-md, 12px);
  background: var(--zd-surface);
  color: var(--zd-text-secondary, var(--zd-text));
  font-size: 13px;
  text-align: center;
}

.ppv-qimen .statusBannerError {
background: rgba(220, 53, 69, 0.1);
  color: #c0392b;
}

.ppv-qimen .infoSection {
display: flex;
  flex-direction: column;
}

.ppv-qimen .hourNav {
display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
}

.ppv-qimen .hourNavBtn {
display: flex;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--zd-muted);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.ppv-qimen .hourNavBtn:first-child {
justify-content: flex-start;
}

.ppv-qimen .hourNavBtn:last-child {
justify-content: flex-end;
}

.ppv-qimen .hourNavArrow {
font-size: 18px;
  line-height: 1;
}

.ppv-qimen .eventNote {
flex: 1 1 auto;
  text-align: center;
  
  font-family: var(--zd-font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.ppv-qimen .dateLines {
margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--zd-text);
  font-family: var(--zd-font-sans);
  font-size: 13px;
  line-height: 18px;
}

.ppv-qimen .dateLines p {
margin: 0;
}

.ppv-qimen .infoDivider {
display: block;
  height: 0.5px;
  margin: 8px 0;
  background: var(--zd-line);
}

.ppv-qimen .infoGrid {
display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.ppv-qimen .pillarBox {
display: flex;
  flex-direction: column;
  gap: 4px;
}

.ppv-qimen .pillarHeadRow,
.ppv-qimen .pillarStemRow,
.ppv-qimen .pillarBranchRow {
display: grid;
  grid-template-columns: repeat(4, 30px);
  column-gap: 0;
}

.ppv-qimen .pillarHead {
text-align: center;
  color: var(--zd-muted);
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.ppv-qimen .pillarChar {
text-align: center;
  font-family: var(--zd-font-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
}

.ppv-qimen .pillarStemDay,
.ppv-qimen .pillarStemHour {
position: relative;
}

.ppv-qimen .pillarStemDay::after,
.ppv-qimen .pillarStemHour::after {
content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
}

.ppv-qimen .pillarStemDay::after {
background: #2f6fd8;
}

.ppv-qimen .pillarStemHour::after {
background: #e0352b;
}

.ppv-qimen .metaBox {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 120px;
}

.ppv-qimen .metaZao {
margin: 0;
  color: var(--zd-text);
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 15px;
}

.ppv-qimen .metaJu {
margin: 0;
  color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.ppv-qimen .metaKong,
.ppv-qimen .metaPattern {
margin: 0;
  color: var(--zd-muted);
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 15px;
}

.ppv-qimen .metaClickable:hover {
color: var(--zd-accent);
}

.ppv-qimen .nineGridWrap {
margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ppv-qimen .ringRow {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 22px;
  min-height: 18px;
}

.ppv-qimen .gridMiddle {
display: flex;
  align-items: stretch;
  gap: 2px;
}

.ppv-qimen .ringCol {
display: grid;
  grid-template-rows: repeat(3, 1fr);
  width: 18px;
  flex-shrink: 0;
}

.ppv-qimen .ringCell {
display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ppv-qimen .ringCellH {
flex-direction: row;
}

.ppv-qimen .ringCellV {
flex-direction: column;
}

.ppv-qimen .ringChip {
position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5px 2.5px;
  
  border: none;
  border-radius: 2px;
  overflow: hidden;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 12px;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-qimen .ringChip::after {
content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid var(--zd-line);
  
  border-radius: 4px;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;
}

.ppv-qimen .ringChipPill {
border-radius: 10px;
}

.ppv-qimen .ringChipPill::after {
border-radius: 20px;
}

.ppv-qimen .ringChipVText {
writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 1px;
}

.ppv-qimen .nineGrid {
flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 1 / 1;
  border: 0.5px solid var(--zd-line);
}

.ppv-qimen .cell {
position: relative;
  border: 0.5px solid var(--zd-line);
  background: transparent;
  padding: 0;
  overflow: hidden;
  font-family: var(--zd-font-sans);
  text-align: left;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.ppv-qimen .cellActive {
background: var(--zd-selected-bg);
  box-shadow: inset 0 0 0 1.5px var(--zd-accent);
  z-index: 1;
}

.ppv-qimen .centerCell {
background: #f0e6dc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.ppv-qimen .cellCore {
position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ppv-qimen .cellGod,
.ppv-qimen .cellStar,
.ppv-qimen .cellDoor {
font-family: var(--zd-font-sans);
  font-weight: 500;
  white-space: nowrap;
}

.ppv-qimen .cellDoor {
font-size: 18px;
  line-height: 20px;
}

.ppv-qimen .cellGod,
.ppv-qimen .cellStar {
font-size: 14px;
  line-height: 16px;
}

.ppv-qimen .cellMarks {
position: absolute;
  left: 3.75px;
  top: 3.75px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ppv-qimen .mark {
display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 2px;
  border: 0.5px solid #3ea1ff;
  border-radius: 20px;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 14px;
}

.ppv-qimen .markKong {
color: #2c679f;
}

.ppv-qimen .markMa {
color: #0a0a0a;
}

.ppv-qimen .cellGanBox {
position: absolute;
  right: 3.75px;
  top: 3.75px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px 2.5px;
  border: 0.5px solid var(--zd-line);
  font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 12px;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-qimen .cellGanDivider {
width: 0.5px;
  height: 9px;
  background: var(--zd-line);
}

.ppv-qimen .cellGua {
position: absolute;
  left: 3.75px;
  bottom: 3.75px;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 16px;
}

.ppv-qimen .cellStems {
position: absolute;
  right: 3.75px;
  bottom: 3.75px;
  display: flex;
  flex-direction: column;
  
  align-items: flex-end;
  gap: 1.5px;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 15px;
  white-space: nowrap;
}

.ppv-qimen .cellHeavenRow {
display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.ppv-qimen .cellStemsCompact .cellHeavenRow {
gap: 4px;
}

.ppv-qimen .stemBox {
display: inline-block;
  flex-shrink: 0;
  border-radius: 2px;
  
  outline-offset: 1.5px;
}

.ppv-qimen .stemBoxBlue {
outline: 1px solid #2f6fd8;
}

.ppv-qimen .stemBoxRed {
outline: 1px solid #e0352b;
}

.ppv-qimen .stemBoxYellow {
outline: 1px solid #e0a500;
}

.ppv-qimen .cellStemsCompact {
font-size: 11px;
  line-height: 12px;
}

.ppv-qimen .centerLine {
margin: 0;
  color: var(--zd-text);
  font-family: var(--zd-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.ppv-qimen .centerFutou {
margin: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 6px;
  color: var(--zd-text);
  font-family: var(--zd-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.ppv-qimen .centerBrandImg {
display: block;
  width: auto;
  max-width: 96%;
  height: 22px;
  object-fit: contain;
}

.ppv-qimen .legend {
display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
}

.ppv-qimen .legendDivider {
display: block;
  height: 0.5px;
  margin: 0 0 5px;
  background: var(--zd-line);
}

.ppv-qimen .legendItem {
display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 16px;
  color: var(--zd-text);
}

.ppv-qimen .legendLabel {
flex: 1;
  min-width: 0;
  
  color: var(--zd-muted);
}

.ppv-qimen .legendGanBox,
.ppv-qimen .legendChip {
position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #0a0a0a;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 12px;
  white-space: nowrap;
}

.ppv-qimen .legendGanBox {
gap: 3px;
  padding: 1.5px 3px;
}

.ppv-qimen .legendChip {
min-width: 18px;
  padding: 1.5px 4px;
}

.ppv-qimen .legendGanBox::after,
.ppv-qimen .legendChip::after {
content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid var(--zd-line);
  border-radius: 4px;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;
}

.ppv-qimen .legendChipPill::after {
border-radius: 20px;
}

.ppv-qimen .legendGanDivider {
width: 0.5px;
  height: 9px;
  background: var(--zd-line);
}

.ppv-qimen .conversation {
display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.ppv-qimen .userBubble {
max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px 14px 2px 14px;
  background: var(--zd-accent);
  color: #fff;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 20px;
  word-break: break-word;
}

.ppv-qimen .page.embedded {
height: 100%;
}

.ppv-qimen .composerDock {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px var(--zd-gutter) 34px;
  background: var(--zd-bg);
}

.ppv-qimen .chipRow {
display: flex;
  align-items: center;
  gap: 8px;
}

.ppv-qimen .chipScroll {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-qimen .chipScroll::-webkit-scrollbar {
display: none;
}

.ppv-qimen .chipScroll .switchChip {
flex-shrink: 0;
}

.ppv-qimen .switchChip {
display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 5px 8px;
  border: 0.8px solid var(--zd-line);
  border-radius: 8px;
  background: transparent;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-qimen .switchChip:disabled {
opacity: 0.55;
}

.ppv-qimen .composer {
display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  column-gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.12);
}

.ppv-qimen .composer input {
min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 12px;
  color: var(--zd-text);
}

.ppv-qimen .composer input::placeholder {
color: #afafaf;
}

.ppv-qimen .composerIcon {
width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
}

.ppv-qimen .composerIcon img {
width: 24px;
  height: 24px;
}

.ppv-qimen .composerIcon svg {
width: 24px;
  height: 24px;
  display: block;
}

.ppv-qimen .sendButton {
color: #afafaf;
}

.ppv-qimen .sendButtonActive {
color: #0a0a0a;
}

.ppv-qimen .recording {
border-radius: 50%;
  background: #f0e6dc;
}

.ppv-qimen .sheetOverlay {
position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: calc(var(--zd-modal-gutter-y) + var(--zd-safe-top)) var(--zd-modal-gutter-x)
    calc(var(--zd-modal-gutter-y) + var(--zd-safe-bottom));
  background: rgba(31, 26, 18, 0.45);
}

.ppv-qimen .sheetPanel {
display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  min-height: 60%;
  padding: 16px 0 20px;
  border-radius: 10px;
  background: #f5f2ed;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  
  will-change: transform;
  backface-visibility: hidden;
}

.ppv-qimen .sheetOverlayIn {
animation: ppv-qimen-sheet-overlay-in 200ms ease-out;
}

.ppv-qimen .sheetOverlayLeaving {
animation: ppv-qimen-sheet-overlay-out 200ms ease-in forwards;
}

.ppv-qimen .sheetPanelArming {
opacity: 0;
}

.ppv-qimen .sheetPanelIn {
animation: ppv-qimen-sheet-panel-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppv-qimen .sheetPanelLeaving {
animation: ppv-qimen-sheet-panel-out 200ms ease-in forwards;
}

@keyframes ppv-qimen-sheet-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ppv-qimen-sheet-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes ppv-qimen-sheet-panel-in {
  from {
    opacity: 0;
    transform: scale(0.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ppv-qimen-sheet-panel-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.04);
  }
}

@media (prefers-reduced-motion: reduce) {
.ppv-qimen .sheetOverlayIn,
.ppv-qimen .sheetOverlayLeaving,
.ppv-qimen .sheetPanelIn,
.ppv-qimen .sheetPanelLeaving {
animation: none;
}
}

.ppv-qimen .sheetHead {
position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  flex-shrink: 0;
}

.ppv-qimen .sheetTitle {
margin: 0;
  font-family: var(--zd-font-brand);
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

.ppv-qimen .sheetClose {
position: absolute;
  right: 16px;
  top: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #0a0a0a;
  font-size: 22px;
  line-height: 1;
}

.ppv-qimen .sheetOrnament {
display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 0;
  flex-shrink: 0;
}

.ppv-qimen .sheetOrnamentLine {
flex: 1;
  height: 1px;
  background: rgba(202, 180, 159, 0.25);
}

.ppv-qimen .sheetOrnamentDot {
width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--zd-line);
}

.ppv-qimen .sheetBody {
flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 0;
  -webkit-overflow-scrolling: touch;
  
  overscroll-behavior: contain;
  transform: translateZ(0);
}

.ppv-qimen .sheetSection {
margin-bottom: 12px;
  padding: 12px;
  border: 0.5px solid rgba(202, 180, 159, 0.55);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  
  contain: layout paint style;
}

.ppv-qimen .sheetSectionHead {
display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.ppv-qimen .sheetSectionTitle {
margin: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #595959;
}

.ppv-qimen .sheetSectionTitle::before {
content: '';
  flex-shrink: 0;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--zd-accent);
}

.ppv-qimen .sheetSectionSymbolLine {
margin: 2px 0 8px;
  font-family: var(--zd-font-serif);
  font-size: 20px;
  line-height: 28px;
  color: #0a0a0a;
  word-break: break-word;
}

.ppv-qimen .neiGuaSymbolRow {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.ppv-qimen .neiGuaGlyph {
flex-shrink: 0;
  font-family: var(--zd-font-serif);
  font-size: 36px;
  line-height: 1;
  color: #0a0a0a;
}

.ppv-qimen .sheetSectionSymbol {
font-family: var(--zd-font-serif);
  font-weight: 700;
}

.ppv-qimen .sheetSectionLine {
margin: 0 0 6px;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 20px;
  color: #0a0a0a;
  word-break: break-word;
}

.ppv-qimen .sheetSectionClamp {
display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ppv-qimen .sheetBlock {
margin: 0;
}

.ppv-qimen .sheetBlockHead {
margin: 0 0 4px;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #0a0a0a;
}

.ppv-qimen .sheetSectionRule {
display: block;
  width: 100%;
  height: 0.5px;
  margin-top: 12px;
  background: rgba(202, 180, 159, 0.55);
}

.ppv-qimen .sheetToggle {
flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--zd-accent);
}

.ppv-qimen .sheetSectionSymbolActive {
padding: 1px 5px;
  border: 0.8px solid var(--zd-accent);
  border-radius: 5px;
  background: rgba(255, 219, 206, 0.35);
}

.ppv-qimen .meaningBlock {
margin: 0 0 10px;
}

.ppv-qimen .meaningBlock:last-child {
margin-bottom: 0;
}

.ppv-qimen .meaningSectionTitle {
margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: #595959;
}

.ppv-qimen .meaningSectionTitle::before {
content: '·';
  flex-shrink: 0;
  font-weight: 600;
  color: #595959;
}

.ppv-qimen .luckBadge {
display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 3px 12px;
  border-radius: 1000px;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
}

.ppv-qimen .luckJi {
color: #1f7a44;
  background: rgba(38, 111, 64, 0.12);
  border-color: rgba(38, 111, 64, 0.4);
}

.ppv-qimen .luckXiong {
color: #b73f42;
  background: rgba(183, 63, 66, 0.12);
  border-color: rgba(183, 63, 66, 0.4);
}

.ppv-qimen .luckNeutral {
color: #8a6d3b;
  background: rgba(138, 109, 59, 0.12);
  border-color: rgba(138, 109, 59, 0.4);
}

.ppv-qimen .cellSymbolActive {
border-radius: 3px;
  background: rgba(255, 219, 206, 0.6);
  box-shadow: 0 0 0 1px var(--zd-accent);
}

.ppv-qimen .sheetAddBtn {
flex-shrink: 0;
  align-self: flex-start;
  margin-top: 1px;
  padding: 0 0 1px;
  border: none;
  border-bottom: 1px solid var(--zd-accent);
  border-radius: 0;
  background: transparent;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--zd-accent);
  white-space: nowrap;
}

.ppv-qimen .sheetAddBtnActive {
font-weight: 600;
}

.ppv-qimen .sheetDetailBtn {
display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--zd-accent);
}

.ppv-qimen .sheetDetailChevron {
display: inline-block;
  transition: transform 0.2s ease;
}

.ppv-qimen .sheetDetailChevronUp {
transform: rotate(180deg);
}

.ppv-qimen .sheetLocked {
position: relative;
}

.ppv-qimen .sheetLockedBlur {
filter: blur(6px);
  opacity: 0.78;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.ppv-qimen .sheetLockedClamp {
max-height: 44px;
  overflow: hidden;
}

.ppv-qimen .sheetLockedClampTall {
max-height: 96px;
  overflow: hidden;
}

.ppv-qimen .sheetLockedSkeleton {
display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0;
}

.ppv-qimen .sheetLockedSkeletonLine {
height: 13px;
  border-radius: 7px;
  background: rgba(97, 0, 0, 0.1);
}

.ppv-qimen .sheetLockedSkeletonLine:nth-child(2) {
width: 72%;
}

.ppv-qimen .sheetLockHint {
position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ppv-qimen .sheetLockHintPill {
display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 0.5px solid rgba(202, 180, 159, 0.7);
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 1;
  color: var(--zd-muted);
  box-shadow: 0 2px 8px rgba(31, 26, 18, 0.12);
}

.ppv-qimen .sheetLockIcon {
width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.ppv-qimen .selectionBar {
display: flex;
  align-items: center;
  gap: 10px;
}

.ppv-qimen .selectionChips {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-qimen .selectionChips::-webkit-scrollbar {
display: none;
}

.ppv-qimen .selectionChip {
display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 0.8px solid var(--zd-accent);
  border-radius: 8px;
  background: rgba(255, 219, 206, 0.35);
  font-family: var(--zd-font-sans);
  font-size: 13px;
  line-height: normal;
  color: #0a0a0a;
}

.ppv-qimen .selectionChipText {
font-weight: 500;
  white-space: nowrap;
}

.ppv-qimen .selectionChipRemove {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--zd-accent);
  font-size: 15px;
  line-height: 1;
}

.ppv-qimen .ycSelectRow {
display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 2px;
  flex-shrink: 0;
}

.ppv-qimen .ycSelectLabel {
font-family: var(--zd-font-sans);
  font-size: 14px;
  color: #610000;
  white-space: nowrap;
}

.ppv-qimen .ycSelectBox {
position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 32px 0 14px;
  border: 0.8px solid var(--zd-line);
  border-radius: 18px;
  background: #fff;
  text-align: left;
}

.ppv-qimen .ycSelectValue {
flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--zd-font-sans);
  font-size: 15px;
  color: #1f1a12;
}

.ppv-qimen .ycSelectArrow {
position: absolute;
  right: 14px;
  pointer-events: none;
  color: var(--zd-line);
  font-size: 12px;
}

.ppv-qimen .ycPickerOverlay {
position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(31, 26, 18, 0.45);
  animation: ppv-qimen-yc-picker-fade-in 180ms ease;
}

.ppv-qimen .ycPickerOverlayLeaving {
animation: ppv-qimen-yc-picker-fade-out 200ms ease forwards;
}

.ppv-qimen .ycPickerSheet {
display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--zd-bottom-sheet-h);
  box-sizing: border-box;
  background: #f5f2ed;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  animation: ppv-qimen-yc-picker-slide-up 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppv-qimen .ycPickerSheetLeaving {
animation: ppv-qimen-yc-picker-slide-down 220ms ease forwards;
}

.ppv-qimen .ycPickerHead {
display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 0.5px solid rgba(202, 180, 159, 0.55);
  flex-shrink: 0;
}

.ppv-qimen .ycPickerTitle {
margin: 0;
  font-family: var(--zd-font-brand);
  font-size: 17px;
  font-weight: 600;
  color: #1f1a12;
}

.ppv-qimen .ycPickerCancel {
padding: 0;
  border: none;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 15px;
  color: #6b6256;
}

.ppv-qimen .ycPickerList {
flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 max(8px, env(safe-area-inset-bottom));
}

.ppv-qimen .ycPickerOption {
display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  border: none;
  background: transparent;
  font-family: var(--zd-font-sans);
  font-size: 16px;
  line-height: 22px;
  color: #1f1a12;
  text-align: left;
}

.ppv-qimen .ycPickerOption:active {
background: rgba(202, 180, 159, 0.18);
}

.ppv-qimen .ycPickerOptionActive {
color: var(--zd-accent);
  font-weight: 600;
}

.ppv-qimen .ycPickerCheck {
color: var(--zd-accent);
  font-size: 15px;
}

@keyframes ppv-qimen-yc-picker-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ppv-qimen-yc-picker-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes ppv-qimen-yc-picker-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes ppv-qimen-yc-picker-slide-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
.ppv-qimen .ycPickerOverlay,
.ppv-qimen .ycPickerOverlayLeaving,
.ppv-qimen .ycPickerSheet,
.ppv-qimen .ycPickerSheetLeaving {
animation: none;
}
}

.ppv-qimen .ycBodyLine {
margin: 0 0 7px;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 22px;
  color: #0a0a0a;
  word-break: break-word;
  white-space: pre-wrap;
}

.ppv-qimen .ycBodyHeading {
margin: 14px 0 6px;
  font-family: var(--zd-font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: #1f1a12;
}

.ppv-qimen .ycBodyHeading:first-child {
margin-top: 0;
}

.ppv-qimen .ycStatus {
padding: 24px 16px;
  text-align: center;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 20px;
  color: #6b6256;
}

.ppv-qimen .ycStatusError {
color: #b3261e;
}

.ppv-qimen .shotOverlay {
position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: calc(var(--zd-modal-gutter-y) + var(--zd-safe-top)) var(--zd-modal-gutter-x)
    calc(var(--zd-modal-gutter-y) + var(--zd-safe-bottom));
  background: rgba(31, 26, 18, 0.55);
}

.ppv-qimen .shotPanel {
position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-height: 100%;
  
  padding: 56px 12px 14px;
  border-radius: 16px;
  background: var(--zd-bg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.ppv-qimen .shotClose {
position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-qimen .shotClose img {
width: 14px;
  height: 14px;
}

.ppv-qimen .shotImageWrap {
flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 0.8px solid var(--zd-line);
  border-radius: 12px;
  background: var(--zd-surface);
  -webkit-overflow-scrolling: touch;
}

.ppv-qimen .shotImage {
display: block;
  width: 100%;
  height: auto;
}

.ppv-qimen .shotErrorText {
margin: 8px 0;
  font-size: 14px;
  text-align: center;
  color: #c0392b;
}

.ppv-qimen .shotLongPressHint {
margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  color: var(--zd-muted);
}

.ppv-qimen .shotSaveButton {
width: 100%;
  height: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--zd-accent);
  color: #fff;
  font-family: var(--zd-font-sans);
  font-size: 15px;
  font-weight: 600;
}

.ppv-qimen .bwSection {
margin-top: 14px;
}

.ppv-qimen .bwTitle {
margin: 0 0 10px;
  font-family: var(--zd-font-serif);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: var(--zd-text);
}

.ppv-qimen .bwGrid {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 1 / 1;
  border: 0.5px solid var(--zd-line);
  background: var(--zd-surface);
}

.ppv-qimen .bwCell {
display: flex;
  justify-content: space-between;
  border: 0.5px solid var(--zd-line);
  
  overflow: hidden;
  padding: 4px 5px;
  font-family: var(--zd-font-sans);
}

.ppv-qimen .bwCellCol {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.ppv-qimen .bwCellColMid {
flex: 1;
}

.ppv-qimen .bwDoorStar {
flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.ppv-qimen .bwNums {
display: flex;
  flex-direction: column;
  gap: 1px;
}

.ppv-qimen .bwNumRow {
display: flex;
  justify-content: space-between;
  gap: 5px;
  min-height: 13px;
  font-size: 10px;
  line-height: 13px;
  color: var(--zd-muted);
}

.ppv-qimen .bwGua {
font-size: 15px;
  line-height: 19px;
}

.ppv-qimen .bwDoor {
font-size: 19px;
  line-height: 23px;
  font-weight: 500;
}

.ppv-qimen .bwStar {
font-size: 16px;
  line-height: 20px;
}

.ppv-qimen .bwCellCenter {
position: relative;
}

.ppv-qimen .bwCenterStar {
position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ppv-qimen .bwBranch {
font-size: 15px;
  line-height: 19px;
  min-height: 19px;
}

.ppv-qimen .bwNumChar {
font-size: 13px;
  line-height: 16px;
  min-height: 16px;
}

.ppv-qimen .bwStems {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ppv-qimen .bwStemCircle {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border: 1px solid #19c2ac;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
}

.ppv-qimen .bwHint {
margin: 8px 2px 0;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppv-qimen .bwDivider {
display: block;
  height: 0.5px;
  margin: 18px 8px;
  background: var(--zd-line);
}

.ppv-qimen .bwTableCell {
display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 4px;
  border: 0.5px solid var(--zd-line);
  
  overflow: hidden;
  padding: 8px 9px;
  font-family: var(--zd-font-sans);
}

.ppv-qimen .bwTableRow {
display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  line-height: 18px;
}

.ppv-qimen .bwTableValue {
color: var(--zd-text);
}

.ppv-qimen .bwJieqiName {
font-weight: 500;
  color: var(--zd-text);
}

.ppv-qimen .bwJieqiDate {
font-size: 11px;
  color: var(--zd-text-secondary, var(--zd-text));
}

.ppv-qimen .notePillarsCard {
margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 10px 8px 12px;
}

.ppv-qimen .notePillarCol {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ppv-qimen .notePillarCol + .notePillarCol {
border-left: 0.5px solid var(--zd-line);
}

.ppv-qimen .notePillarLabel {
font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
  margin-bottom: 4px;
}

.ppv-qimen .notePillarGz {
font-family: var(--zd-font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.ppv-qimen .noteEditorCard {
margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 12px;
}

.ppv-qimen .noteEditorInput {
width: 100%;
  min-height: 220px;
  resize: vertical;
  border: none;
  outline: none;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--zd-text);
}

.ppv-qimen .noteEditorInput::placeholder {
color: var(--zd-muted);
}

.ppv-qimen .noteEditorFooter {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 0.5px solid var(--zd-line);
  padding-top: 10px;
}

.ppv-qimen .noteEditorStatus {
flex: 1;
  min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
}

.ppv-qimen .noteEditorStatusError {
color: #c0392b;
}

.ppv-qimen .noteEditorSave {
flex-shrink: 0;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-accent);
  color: #fff;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 24px;
}

.ppv-qimen .noteEditorSave:disabled {
opacity: 0.5;
}

.ppv-qimen .mono .infoGrid *,
.ppv-qimen .mono .nineGridWrap *,
.ppv-qimen .mono .bwSection *,
.ppv-qimen .mono .notePillarsCard * {
color: var(--zd-text) !important;
}

/* ── 搬自 src/h5/components/ChartRevealDoor.module.css（作用域 .ppr-qimen） ── */
.ppr-qimen .overlay {
position: absolute;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  
  pointer-events: auto;
}

.ppr-qimen .door {
position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  background: var(--zd-bg, #faf9f5);
  will-change: transform;
}

.ppr-qimen .doorLeft {
left: 0;
}

.ppr-qimen .doorRight {
right: 0;
}

.ppr-qimen .doorShadow {
position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  pointer-events: none;
  will-change: transform;
}

.ppr-qimen .doorShadowLeft {
left: 0;
  box-shadow: 14px 0 28px rgba(0, 0, 0, 0.2);
}

.ppr-qimen .doorShadowRight {
right: 0;
  box-shadow: -14px 0 28px rgba(0, 0, 0, 0.2);
}

.ppr-qimen .overlay[data-phase='opening'] .doorLeft,
.ppr-qimen .overlay[data-phase='opening'] .doorShadowLeft {
animation: ppr-qimen-door-slide-left 1000ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.ppr-qimen .overlay[data-phase='opening'] .doorRight,
.ppr-qimen .overlay[data-phase='opening'] .doorShadowRight {
animation: ppr-qimen-door-slide-right 1000ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes ppr-qimen-door-slide-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-104%);
  }
}

@keyframes ppr-qimen-door-slide-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(104%);
  }
}

.ppr-qimen .seamColumn {
position: absolute;
  left: 50%;
  top: 20.7%;
  height: 50.1%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ppr-qimen .seamLine {
width: 1px;
  flex: 1 1 0;
  background: var(--zd-line, #cab49f);
  will-change: transform, opacity;
}

.ppr-qimen .seamLineTop {
transform-origin: center bottom;
  animation: ppr-qimen-seam-grow 520ms cubic-bezier(0.33, 1, 0.68, 1) 120ms backwards;
}

.ppr-qimen .seamLineBottom {
transform-origin: center top;
  animation: ppr-qimen-seam-grow 520ms cubic-bezier(0.33, 1, 0.68, 1) 120ms backwards;
}

@keyframes ppr-qimen-seam-grow {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.ppr-qimen .claspWrap {
position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ppr-qimen .claspWrap::before {
content: '';
  position: absolute;
  width: 58px;
  height: 58px;
  top: 50%;
  left: 50%;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  border: 1px solid rgba(143, 111, 76, 0.55);
  opacity: 0;
  pointer-events: none;
}

.ppr-qimen .claspBase {
position: absolute;
  top: 50%;
  left: 50%;
  margin: -18px 0 0 -18px;
  display: block;
  filter: drop-shadow(0 1.5px 2.5px rgba(60, 42, 24, 0.3));
  animation: ppr-qimen-clasp-enter 460ms cubic-bezier(0.34, 1.4, 0.64, 1) 80ms backwards;
}

.ppr-qimen .claspBar {
position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -32px;
  display: block;
  transform-origin: 32px 9px;
  filter: drop-shadow(0 2px 3px rgba(60, 42, 24, 0.38));
  will-change: transform, opacity;
  animation: ppr-qimen-clasp-enter 460ms cubic-bezier(0.34, 1.4, 0.64, 1) 160ms backwards;
}

@keyframes ppr-qimen-clasp-enter {
  from {
    transform: scale(0.55);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.ppr-qimen .overlay[data-phase='locked'] .claspWrap {
animation: ppr-qimen-clasp-breathe 2400ms ease-in-out 1200ms infinite;
}

@keyframes ppr-qimen-clasp-breathe {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(143, 111, 76, 0));
  }
  50% {
    transform: scale(1.018);
    filter: drop-shadow(0 0 9px rgba(143, 111, 76, 0.4));
  }
}

.ppr-qimen .overlay[data-phase='unlocking'] .claspBar,
.ppr-qimen .overlay[data-phase='opening'] .claspBar {
animation: ppr-qimen-bar-turn 950ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes ppr-qimen-bar-turn {
  0% {
    transform: perspective(260px) rotate(0deg) rotateX(0deg) scale(1);
    filter: drop-shadow(0 2px 3px rgba(60, 42, 24, 0.38));
  }
  
  16% {
    transform: perspective(260px) rotate(-5deg) rotateX(0deg) scale(0.95);
    filter: drop-shadow(0 1px 2px rgba(60, 42, 24, 0.45));
  }
  
  48% {
    transform: perspective(260px) rotate(48deg) rotateX(20deg) scale(1.05);
    filter: drop-shadow(0 5px 7px rgba(60, 42, 24, 0.3)) drop-shadow(0 0 6px rgba(214, 178, 109, 0.5));
  }
  
  72% {
    transform: perspective(260px) rotate(95deg) rotateX(4deg) scale(1);
    filter: drop-shadow(0 2px 3px rgba(60, 42, 24, 0.38)) drop-shadow(0 0 8px rgba(214, 178, 109, 0.7));
  }
  84% {
    opacity: 1;
    transform: perspective(260px) rotate(90deg) rotateX(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: perspective(260px) rotate(90deg) rotateX(0deg) scale(1.05);
    filter: drop-shadow(0 0 12px rgba(214, 178, 109, 0));
  }
}

.ppr-qimen .overlay[data-phase='unlocking'] .claspBase,
.ppr-qimen .overlay[data-phase='opening'] .claspBase {
animation: ppr-qimen-base-glow-out 950ms ease-in-out forwards;
}

@keyframes ppr-qimen-base-glow-out {
  0% {
    opacity: 1;
    filter: drop-shadow(0 1.5px 2.5px rgba(60, 42, 24, 0.3));
  }
  60% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(214, 178, 109, 0.7));
  }
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    filter: drop-shadow(0 0 12px rgba(214, 178, 109, 0));
  }
}

.ppr-qimen .overlay[data-phase='unlocking'] .claspWrap::before,
.ppr-qimen .overlay[data-phase='opening'] .claspWrap::before {
animation: ppr-qimen-unlock-ripple 620ms cubic-bezier(0.22, 1, 0.36, 1) 620ms forwards;
}

@keyframes ppr-qimen-unlock-ripple {
  0% {
    transform: scale(0.45);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.ppr-qimen .overlay[data-phase='unlocking'] .seamLine,
.ppr-qimen .overlay[data-phase='opening'] .seamLine {
animation: ppr-qimen-seam-out 430ms ease-out 520ms forwards;
}

@keyframes ppr-qimen-seam-out {
  0% {
    opacity: 1;
    filter: brightness(1);
  }
  35% {
    opacity: 1;
    filter: brightness(1.35) drop-shadow(0 0 4px rgba(214, 178, 109, 0.7));
  }
  100% {
    opacity: 0;
    filter: brightness(1.2);
  }
}

.ppr-qimen .overlay[data-phase='opening'] .seamColumn {
opacity: 0;
  transition: opacity 200ms ease-out;
}

.ppr-qimen .loadingText {
position: absolute;
  top: 74.5%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  font-family: var(--zd-font-serif, serif);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 6px;
  
  padding-left: 6px;
  color: var(--zd-muted, #8f6f4c);
  opacity: 0.88;
  white-space: nowrap;
  animation: ppr-qimen-text-in 560ms cubic-bezier(0.33, 1, 0.68, 1) 360ms backwards;
  pointer-events: none;
}

@keyframes ppr-qimen-text-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 0.88;
    transform: translateX(-50%) translateY(0);
  }
}

.ppr-qimen .loadingDots {
display: inline-flex;
  gap: 5px;
  margin-left: 4px;
}

.ppr-qimen .loadingDots i {
width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: ppr-qimen-dot-pulse 1320ms ease-in-out infinite;
}

.ppr-qimen .loadingDots i:nth-child(2) {
animation-delay: 220ms;
}

.ppr-qimen .loadingDots i:nth-child(3) {
animation-delay: 440ms;
}

@keyframes ppr-qimen-dot-pulse {
  0%,
  100% {
    opacity: 0.2;
  }
  35% {
    opacity: 1;
  }
}

.ppr-qimen .overlay[data-phase='unlocking'] .loadingText,
.ppr-qimen .overlay[data-phase='opening'] .loadingText {
animation: ppr-qimen-text-out 320ms ease-out forwards;
}

@keyframes ppr-qimen-text-out {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
.ppr-qimen .seamLineTop,
.ppr-qimen .seamLineBottom,
.ppr-qimen .claspBase,
.ppr-qimen .claspBar,
.ppr-qimen .overlay[data-phase='locked'] .claspWrap {
animation: none;
}

.ppr-qimen .overlay[data-phase='unlocking'] .claspBase,
.ppr-qimen .overlay[data-phase='opening'] .claspBase,
.ppr-qimen .overlay[data-phase='unlocking'] .claspBar,
.ppr-qimen .overlay[data-phase='opening'] .claspBar {
animation: none;
    opacity: 0;
    transition: opacity 240ms ease-out;
}

.ppr-qimen .loadingText,
.ppr-qimen .loadingDots i {
animation: none;
}

.ppr-qimen .overlay[data-phase='unlocking'] .loadingText,
.ppr-qimen .overlay[data-phase='opening'] .loadingText {
animation: none;
    opacity: 0;
    transition: opacity 240ms ease-out;
}

.ppr-qimen .overlay[data-phase='opening'] .doorLeft,
.ppr-qimen .overlay[data-phase='opening'] .doorRight {
animation: none;
    opacity: 0;
    transition: opacity 320ms ease-out;
    box-shadow: none;
}

.ppr-qimen .doorShadow {
display: none;
}
}

/* ── 搬自 src/h5/components/LiurenResultCard.module.css（作用域 .ppc-liuren） ── */
@keyframes ppc-liuren-liurenCardStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ppc-liuren .liurenCard {
position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  padding: 16px 32px 16px 18px;
  border-radius: var(--zd-radius-card);
  background: transparent;
  color: var(--zd-text);
  text-align: left;
  animation: ppc-liuren-liurenCardStepIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppc-liuren .liurenCardHeader {
display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ppc-liuren .liurenCardName {
display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppc-liuren .liurenCardTime {
flex: none;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-liuren .pillars {
display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.ppc-liuren .pillar {
display: inline-flex;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.ppc-liuren .pillarRow {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  align-self: stretch;
}

.ppc-liuren .yueJiang {
flex: none;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-liuren .keChuan {
display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  align-self: stretch;
  border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
}

.ppc-liuren .sanchuan {
flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.ppc-liuren .chuanRow {
display: grid;
  grid-template-columns: 20px 30px 26px 14px;
  align-items: center;
  gap: 12px;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  line-height: 1;
}

.ppc-liuren .chuanName {
font-family: var(--zd-font-sans);
  color: #8f6f4c;
  font-size: 11px;
  text-align: center;
}

.ppc-liuren .chuanJiang {
font-family: var(--zd-font-sans);
  color: var(--zd-text);
  font-size: 11px;
  text-align: center;
}

.ppc-liuren .chuanBranch {
display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ppc-liuren .chuanRelation {
color: var(--zd-accent);
  font-size: 11px;
  text-align: center;
}

.ppc-liuren .kong {
margin-left: 1px;
  font-size: 9px;
  color: var(--zd-muted);
}

.ppc-liuren .sike {
flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-left: 12px;
  border-left: 0.5px solid var(--zd-line);
}

.ppc-liuren .keCol {
flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--zd-font-serif);
}

.ppc-liuren .keJiang {
font-family: var(--zd-font-sans);
  font-size: 10px;
  line-height: 1;
  color: var(--zd-muted);
}

.ppc-liuren .keUpper,
.ppc-liuren .keLower {
font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
}

.ppc-liuren .placeholder {
border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-liuren .flush {
padding-right: 18px;
}

.ppc-liuren .liurenCardChevron {
position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zd-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* ── 搬自 src/h5/routes/LiurenChartPage.module.css（作用域 .ppv-liuren） ── */
.ppv-liuren .page {
position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--zd-bg);
  color: var(--zd-text);
  --liuren-pillar-col: 30px;
}

.ppv-liuren .header {
position: relative;
  z-index: 20;
  height: 54px;
  flex-shrink: 0;
  background: var(--zd-bg);
}

.ppv-liuren .headerButton {
position: absolute;
  top: 10px;
  left: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-liuren .headerButton img {
width: 22px;
  height: 22px;
}

.ppv-liuren .title {
position: absolute;
  top: 0;
  left: 50%;
  height: 54px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--zd-font-brand);
  font-size: var(--zd-fs-page);
  font-weight: 700;
}

.ppv-liuren .chartTabs {
position: relative;
  z-index: 20;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  background: var(--zd-bg);
  border-bottom: 0.5px solid var(--zd-line);
}

.ppv-liuren .chartTab {
position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
}

.ppv-liuren .chartTabActive {
color: var(--zd-accent);
  font-weight: 600;
}

.ppv-liuren .chartTabLabel {
position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.ppv-liuren .chartTabUnderline {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 10px;
  background: var(--zd-accent);
}

.ppv-liuren .body {
position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ppv-liuren .panelTopPad {
padding-top: 4px;
}

.ppv-liuren .placeholder {
margin-top: 40px;
  text-align: center;
  color: var(--zd-text-muted, #8a8378);
  font-size: 14px;
}

.ppv-liuren .hourBar {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  height: 30px;
  padding: 0;
}

.ppv-liuren .hourButton {
display: flex;
  align-items: center;
  border: none;
  min-width: 72px;
  padding: 0;
  background: transparent;
  color: var(--zd-muted);
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.ppv-liuren .hourButton:first-child {
justify-content: flex-start;
}

.ppv-liuren .hourButton:last-child {
justify-content: flex-end;
}

.ppv-liuren .eventNote {
flex: 1 1 auto;
  text-align: center;
  font-family: var(--zd-font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.ppv-liuren .calendar {
display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 4px;
  padding: 0;
}

.ppv-liuren .calendar p {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 18px;
  color: var(--zd-text);
}

.ppv-liuren .divider {
height: 0.5px;
  margin: 8px 0;
  background: var(--zd-line);
}

.ppv-liuren .infoRow {
display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.ppv-liuren .pillars {
display: flex;
  flex-direction: column;
  gap: 4px;
}

.ppv-liuren .pillarHead,
.ppv-liuren .pillarRow {
display: grid;
  grid-template-columns: repeat(4, var(--liuren-pillar-col, 30px));
  column-gap: 0;
  text-align: center;
}

.ppv-liuren .pillarHead span {
font-family: var(--zd-font-serif);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--zd-muted);
}

.ppv-liuren .pillarChar {
font-family: var(--zd-font-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  text-align: center;
}

.ppv-liuren .qike {
display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  min-width: 120px;
  text-align: center;
}

.ppv-liuren .qike p {
margin: 0;
}

.ppv-liuren .qikeZao {
color: var(--zd-text);
  font-family: var(--zd-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
}

.ppv-liuren .qikeYueJiang {
color: var(--zd-muted);
  font-family: var(--zd-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
}

.ppv-liuren .qikeKong {
color: var(--zd-muted);
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 15px;
}

.ppv-liuren .qikeKeTi {
margin: 0;
  color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.ppv-liuren .qikeClickable:hover {
color: var(--zd-accent);
}

.ppv-liuren .keChuanRow {
--zd-hairline-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 8px 16px 8px 0;
}

.ppv-liuren .sanChuan {
display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  height: 76px;
  
  width: calc(var(--liuren-pillar-col) * 4);
  flex: 0 0 calc(var(--liuren-pillar-col) * 4);
}

.ppv-liuren .chuanRow {
display: grid;
  
  grid-template-columns: var(--liuren-pillar-col) 29px 26px 11px;
  align-items: end;
  justify-content: start;
  width: 100%;
  height: 20px;
  gap: 8px;
  font-family: var(--zd-font-serif);
  line-height: 16px;
  white-space: nowrap;
}

.ppv-liuren .chuanRow .relation,
.ppv-liuren .chuanRow .tianJiang,
.ppv-liuren .chuanRow .chuanName,
.ppv-liuren .chuanRow .chuanGz {
align-self: end;
  line-height: 1;
}

.ppv-liuren .chuanRow .relation {
width: var(--liuren-pillar-col);
  text-align: center;
}

.ppv-liuren .chuanGz {
display: inline-flex;
  align-items: flex-end;
  align-self: end;
  justify-content: center;
  gap: 1px;
  height: auto;
  line-height: 1;
  font-family: var(--zd-font-serif);
  font-size: 16px;
  font-weight: 400;
}

.ppv-liuren .dunGan {
font-size: 11px;
  line-height: 1;
  color: var(--zd-text);
}

.ppv-liuren .chuanBranch {
font-size: 16px;
  line-height: 1;
  display: block;
}

.ppv-liuren .relation {
font-size: 13px;
  font-weight: 600;
  color: var(--zd-text);
  text-align: center;
}

.ppv-liuren .tianJiang {
font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--zd-text);
  text-align: center;
}

.ppv-liuren .chuanRow .tianJiang {
font-size: 11px;
  line-height: 1;
}

.ppv-liuren .keCol .tianJiang {
font-size: 12px;
  line-height: 15px;
}

.ppv-liuren .chuanName {
font-family: var(--zd-font-sans);
  font-size: 11px;
  color: #8f6f4c;
  text-align: center;
}

.ppv-liuren .siKe {
display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 34px;
  gap: 8px;
  height: 76px;
  padding-left: 28px;
  border-left: 0.5px solid #cab49f;
}

.ppv-liuren .keCol {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 76px;
  gap: 4px;
  font-family: var(--zd-font-serif);
  line-height: 16px;
}

.ppv-liuren .keUpper {
font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 400;
}

.ppv-liuren .keLower {
font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 400;
}

.ppv-liuren .plate {
display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 12px 0 8px;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.ppv-liuren .plateCell {
position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0;
  padding: 4px;
  border: 0.5px solid #cab49f;
  overflow: hidden;
  font-family: var(--zd-font-sans);
}

.ppv-liuren .plateCellBtn {
appearance: none;
  -webkit-appearance: none;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: inherit;
}

.ppv-liuren .plateCellActive {
background: rgba(255, 219, 206, 0.45);
  box-shadow: inset 0 0 0 1px var(--zd-accent);
}

.ppv-liuren .symbolActive {
border-radius: 3px;
  background: rgba(255, 219, 206, 0.7);
  box-shadow: 0 0 0 1px var(--zd-accent);
}

.ppv-liuren .cellMingGong {
padding: 2px;
  border: 0.5px solid #cab49f;
  font-size: 11px;
  font-weight: 400;
  line-height: 12px;
  color: #0a0a0a;
}

.ppv-liuren .cellTianJiang {
font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #8f6f4c;
  text-align: right;
}

.ppv-liuren .cellBranchRow {
display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.ppv-liuren .cellTianPan {
font-family: var(--zd-font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 21px;
}

.ppv-liuren .cellDiPan {
font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  opacity: 1;
}

.ppv-liuren .cellKong {
position: absolute;
  top: 3.75px;
  left: 3.75px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 2px;
  border: 0.5px solid #3ea1ff;
  border-radius: 20px;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  color: #2c679f;
}

.ppv-liuren .plateCenter {
grid-row: 2 / 4;
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.ppv-liuren .plateBrandImg {
display: block;
  width: auto;
  max-width: 82%;
  height: 34px;
  object-fit: contain;
}

.ppv-liuren .shenShaToggleRow {
display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  color: #ec631f;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.ppv-liuren .switch {
position: relative;
  width: 38px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--zd-line);
  transition: background 0.2s ease;
}

.ppv-liuren .switchOn {
background: var(--zd-accent);
}

.ppv-liuren .switchHandle {
position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.ppv-liuren .switchOn .switchHandle {
transform: translateX(18px);
}

.ppv-liuren .shenShaSection {
display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.ppv-liuren .shenShaCard {
display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 12.8px 16.8px;
  border: 0.8px solid #cab49f;
  border-radius: 10px;
  background: #fff;
}

.ppv-liuren .shenShaHeading {
position: relative;
  width: 100%;
  font-family: var(--zd-font-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: var(--zd-text);
}

.ppv-liuren .shenShaHeading::after {
content: '';
  position: absolute;
  left: 0.5px;
  right: 0.5px;
  bottom: 0;
  height: 0.5px;
  background: var(--zd-line);
}

.ppv-liuren .shenShaList {
display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 8px;
  width: 100%;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 21px;
  color: var(--zd-text);
}

.ppv-liuren .shenShaItem {
display: inline-flex;
  align-items: baseline;
  gap: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.ppv-liuren .shenShaItem:active {
opacity: 0.72;
}

.ppv-liuren .shenShaItemName {
font-family: var(--zd-font-sans);
}

.ppv-liuren .shenShaItemSymbol {
font-family: var(--zd-font-serif);
}

.ppv-liuren .shenShaEmpty {
margin: 0;
  font-size: 12.5px;
  color: var(--zd-text-muted, #8a8378);
}

.ppv-liuren .chipRow {
display: flex;
  align-items: center;
  margin: 8px 16px 0;
}

.ppv-liuren .chipScroll {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-liuren .chipScroll::-webkit-scrollbar {
display: none;
}

.ppv-liuren .switchChip {
display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 28px;
  padding: 5px 8px;
  border: 0.8px solid var(--zd-line);
  border-radius: 8px;
  background: transparent;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-liuren .switchChip:disabled {
opacity: 0.55;
}

.ppv-liuren .composer {
flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 16px 16px;
  padding: 10px 14px;
  border: 0.5px solid var(--zd-line);
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
  text-align: left;
}

.ppv-liuren .composerPlus {
display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--zd-bg);
  color: var(--zd-accent);
  font-size: 18px;
  line-height: 1;
}

.ppv-liuren .composerPlaceholder {
flex: 1;
  color: var(--zd-text-muted, #9a9488);
  font-size: 14px;
}

.ppv-liuren .embedded {
height: 100%;
}

.ppv-liuren .embedded .body {
padding-bottom: 24px;
}

.ppv-liuren .shotOverlay {
position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: calc(var(--zd-modal-gutter-y) + var(--zd-safe-top)) var(--zd-modal-gutter-x)
    calc(var(--zd-modal-gutter-y) + var(--zd-safe-bottom));
  background: rgba(18, 16, 14, 0.42);
}

.ppv-liuren .shotPanel {
position: relative;
  display: flex;
  flex-direction: column;
  width: min(92vw, 420px);
  max-height: min(86vh, 760px);
  padding: 44px 14px 14px;
  border-radius: 18px;
  background: var(--zd-surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.ppv-liuren .shotClose {
position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-liuren .shotClose img {
width: 14px;
  height: 14px;
}

.ppv-liuren .shotImageWrap {
flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 12px;
  background: var(--zd-bg);
  -webkit-overflow-scrolling: touch;
}

.ppv-liuren .shotImage {
display: block;
  width: 100%;
  height: auto;
}

.ppv-liuren .shotErrorText {
margin: 8px 0;
  font-size: 14px;
  color: var(--zd-text-muted, #8a8378);
  text-align: center;
}

.ppv-liuren .shotLongPressHint {
margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zd-text-muted, #8a8378);
  font-size: 13px;
}

.ppv-liuren .shotSaveButton {
width: 100%;
  height: 44px;
  flex: 0 0 auto;
  margin-top: 12px;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.ppv-liuren .notePillarsCard {
margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 10px 8px 12px;
}

.ppv-liuren .notePillarCol {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ppv-liuren .notePillarCol + .notePillarCol {
border-left: 0.5px solid var(--zd-line);
}

.ppv-liuren .notePillarLabel {
font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
  margin-bottom: 4px;
}

.ppv-liuren .notePillarGz {
font-family: var(--zd-font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.ppv-liuren .noteEditorCard {
margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 12px;
}

.ppv-liuren .noteEditorInput {
width: 100%;
  min-height: 220px;
  resize: vertical;
  border: none;
  outline: none;
  background: none;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--zd-text);
}

.ppv-liuren .noteEditorInput::placeholder {
color: var(--zd-muted);
}

.ppv-liuren .noteEditorFooter {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 0.5px solid var(--zd-line);
  padding-top: 10px;
}

.ppv-liuren .noteEditorStatus {
flex: 1;
  min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
}

.ppv-liuren .noteEditorStatusError {
color: #c0392b;
}

.ppv-liuren .noteEditorSave {
flex-shrink: 0;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-accent);
  color: #fff;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 24px;
}

.ppv-liuren .noteEditorSave:disabled {
opacity: 0.5;
}

.ppv-liuren {
--liuren-pillar-col: 30px;
}

/* ── 搬自 src/h5/components/LiurenGestureReveal.module.css（作用域 .ppr-liuren） ── */
.ppr-liuren .overlay {
position: absolute;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: auto;
  background: var(--zd-bg, #faf9f5);
}

.ppr-liuren .stage {
position: absolute;
  left: 50%;
  top: 50%;
  width: min(32vw, 140px);
  height: min(32vw, 140px);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

.ppr-liuren .gesture {
position: absolute;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 120ms linear;
  will-change: opacity;
}

.ppr-liuren .gestureActive {
opacity: 1;
}

.ppr-liuren .caption {
position: absolute;
  left: 50%;
  top: 74.5%;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transform: translateX(-50%);
  color: var(--zd-muted, #8f6f4c);
  font-family: var(--zd-font-serif, serif);
  font-size: 14px;
  letter-spacing: 5px;
  white-space: nowrap;
}

.ppr-liuren .caption i {
width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: ppr-liuren-dotPulse 960ms ease-in-out infinite;
}

.ppr-liuren .caption i:nth-child(3) {
animation-delay: 160ms;
}

.ppr-liuren .caption i:nth-child(4) {
animation-delay: 320ms;
}

.ppr-liuren .closing {
animation: ppr-liuren-revealOut 520ms ease forwards;
}

@keyframes ppr-liuren-dotPulse {
  0%,
  100% {
    opacity: 0.24;
  }

  35% {
    opacity: 1;
  }
}

@keyframes ppr-liuren-revealOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
.ppr-liuren .caption i {
animation: none;
}

.ppr-liuren .gesture {
transition: opacity 180ms ease;
}

.ppr-liuren .closing {
animation-duration: 220ms;
    filter: none;
}
}

/* ── 搬自 src/h5/components/LiuyaoResultCard.module.css（作用域 .ppc-liuyao） ── */
@keyframes ppc-liuyao-liuyaoCardStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ppc-liuyao .liuyaoCard {
position: relative;
  
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  padding: 16px 18px;
  border-radius: var(--zd-radius-card);
  background: transparent;
  color: var(--zd-text);
  text-align: left;
  animation: ppc-liuyao-liuyaoCardStepIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppc-liuyao .header {
display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ppc-liuyao .name {
min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppc-liuyao .time {
flex: none;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-liuyao .pillars {
display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.ppc-liuyao .pillar {
display: inline-flex;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.ppc-liuyao .pillarRow {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  align-self: stretch;
}

.ppc-liuyao .rikong {
flex: none;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-liuyao .guaLine {
display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  align-self: stretch;
  border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
}

.ppc-liuyao .guaName {
font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--zd-text);
}

.ppc-liuyao .guaArrow {
color: var(--zd-muted);
  font-size: 12px;
}

.ppc-liuyao .guaBadge {
font-size: 11px;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppc-liuyao .guaPalace {
margin-left: auto;
  font-size: 11px;
  color: var(--zd-accent);
}

.ppc-liuyao .guaTable {
display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  align-self: stretch;
}

.ppc-liuyao .guaHead {
display: grid;
  
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr);
  gap: 4px;
  width: 100%;
  font-family: var(--zd-font-sans);
  font-size: 10px;
  color: var(--zd-muted);
}

.ppc-liuyao .guaHead > span {
text-align: center;
}

.ppc-liuyao .guaRow {
display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr);
  gap: 4px;
  width: 100%;
  align-items: center;
  justify-items: stretch;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  line-height: 1.1;
}

.ppc-liuyao .colLiushen {
display: block;
  width: 100%;
  text-align: center;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  color: var(--zd-text);
}

.ppc-liuyao .colFushen {
display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 11px;
}

.ppc-liuyao .fushenRel {
color: var(--zd-accent);
}

.ppc-liuyao .colGua,
.ppc-liuyao .colBian {
display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  box-sizing: border-box;
}

.ppc-liuyao .rightMarkSlot {
display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  width: 1.8em;
  flex: none;
}

.ppc-liuyao .gz {
display: inline-flex;
  font-weight: 600;
  letter-spacing: 0.2px;
  flex: none;
  
  min-width: 2em;
  justify-content: center;
}

.ppc-liuyao .rel {
font-size: 11px;
  color: var(--zd-text);
  
  white-space: nowrap;
  flex: none;
  
  min-width: 2em;
  text-align: right;
}

.ppc-liuyao .dash {
color: var(--zd-muted);
}

.ppc-liuyao .yaoYang {
display: inline-block;
  width: 36px;
  height: 5px;
  border-radius: 1px;
  background: var(--zd-text);
  flex: none;
}

.ppc-liuyao .yaoYin {
display: inline-flex;
  gap: 4px;
  width: 36px;
  flex: none;
}

.ppc-liuyao .yaoYin > span {
display: inline-block;
  width: 16px;
  height: 5px;
  border-radius: 1px;
  background: var(--zd-text);
}

.ppc-liuyao .shiYing {
font-size: 10px;
  font-weight: 600;
  color: var(--zd-accent);
  line-height: 1;
}

.ppc-liuyao .moving {
font-size: 10px;
  font-weight: 600;
  color: #c0392b;
  line-height: 1;
}

.ppc-liuyao .kong {
font-size: 10px;
  color: var(--zd-muted);
}

.ppc-liuyao .placeholder {
border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-liuyao .flush {
padding-right: 18px;
}

.ppc-liuyao .chevron {
position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zd-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* ── 搬自 src/h5/routes/LiuyaoChartPage.module.css（作用域 .ppv-liuyao） ── */
.ppv-liuyao .page {
position: relative;
  height: 100%;
  min-height: 0;
  background: var(--zd-bg);
  color: var(--zd-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ppv-liuyao .header {
position: relative;
  z-index: 20;
  height: 54px;
  flex-shrink: 0;
  background: var(--zd-bg);
}

.ppv-liuyao .headerButton {
position: absolute;
  top: 10px;
  left: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-liuyao .closeButton {
left: auto;
  right: 20px;
}

.ppv-liuyao .headerButton img {
width: 22px;
  height: 22px;
}

.ppv-liuyao .title {
position: absolute;
  top: 0;
  left: 50%;
  height: 54px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--zd-font-brand);
  font-size: var(--zd-fs-page);
  font-weight: 510;
  white-space: nowrap;
}

.ppv-liuyao .chartTabs {
position: relative;
  z-index: 20;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  background: var(--zd-bg);
  border-bottom: 0.5px solid var(--zd-line);
}

.ppv-liuyao .chartTab {
position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
}

.ppv-liuyao .chartTabActive {
color: var(--zd-accent);
  font-weight: 600;
}

.ppv-liuyao .chartTabLabel {
position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.ppv-liuyao .chartTabUnderline {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 10px;
  background: var(--zd-accent);
}

.ppv-liuyao .panelTopPad {
padding-top: 8px;
}

.ppv-liuyao .body {
position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  transform-origin: 50% 30%;
  transition:
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 900ms ease;
}

.ppv-liuyao .bodyVeiled {
transform: scale(0.975);
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
.ppv-liuyao .body {
transition: none;
}

.ppv-liuyao .bodyVeiled {
transform: none;
    opacity: 1;
}
}

.ppv-liuyao .notePillarsCard {
margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  padding: 10px 8px 12px;
}

.ppv-liuyao .notePillarCol {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ppv-liuyao .notePillarCol + .notePillarCol {
border-left: 0.5px solid var(--zd-line);
}

.ppv-liuyao .notePillarLabel {
font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-muted);
  margin-bottom: 4px;
}

.ppv-liuyao .notePillarGz {
font-family: var(--zd-font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.ppv-liuyao .hourBar {
display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
}

.ppv-liuyao .hourNavBtn {
display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--zd-muted);
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
  white-space: nowrap;
}

.ppv-liuyao .hourNavIcon {
display: block;
  width: 24px;
  height: 24px;
  color: var(--zd-muted);
}

.ppv-liuyao .eventNote {
flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-family: var(--zd-font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: #0a0a0a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.ppv-liuyao .loading,
.ppv-liuyao .error {
margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
}

.ppv-liuyao .loading {
color: var(--zd-muted);
}

.ppv-liuyao .error {
color: #c0392b;
}

.ppv-liuyao .calendar {
display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 4px;
}

.ppv-liuyao .calendar p {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 17.5px;
  color: #0a0a0a;
}

.ppv-liuyao .divider {
height: 0.5px;
  margin: 8px 0;
  background: var(--zd-line);
}

.ppv-liuyao .infoRow {
display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 16px;
}

.ppv-liuyao .pillarBox {
border: 0.5px solid var(--zd-line);
  opacity: 0.8;
  display: inline-grid;
  grid-template-columns: repeat(4, auto);
  padding: 4px 16px;
  column-gap: 16px;
  row-gap: 4px;
  text-align: center;
}

.ppv-liuyao .pillarHead {
font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.6);
}

.ppv-liuyao .pillarChar {
font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.ppv-liuyao .metaCol {
height: 75px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.ppv-liuyao .metaCol p {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 15px;
  color: #0a0a0a;
  text-align: center;
  white-space: pre;
}

.ppv-liuyao .metaCol p.metaGuaShen {
font-size: 13px;
  color: var(--zd-muted);
}

.ppv-liuyao .metaClickable:hover {
color: var(--zd-accent);
}

.ppv-liuyao .guaSection {
display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 14px;
}

.ppv-liuyao .guaCol {
display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.ppv-liuyao .guaColLiushen {
width: 28px;
  flex-shrink: 0;
  align-items: flex-start;
}

.ppv-liuyao .guaColFushen {
width: 46px;
  flex-shrink: 0;
}

.ppv-liuyao .guaColBen,
.ppv-liuyao .guaColBian {
width: 126px;
  flex-shrink: 0;
  align-items: flex-start;
}

.ppv-liuyao .derivedGuaSection {
display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.ppv-liuyao .guaRowStagger {
display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  column-gap: 0;
}

.ppv-liuyao .guaRowStagger > *:nth-child(1) {
grid-column: 2 / 4;
}

.ppv-liuyao .guaRowStagger > *:nth-child(2) {
grid-column: 4 / 6;
}

.ppv-liuyao .derivedGuaCard {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  width: 100%;
  max-width: 120px;
  box-sizing: border-box;
  overflow: visible;
}

.ppv-liuyao .derivedGuaLabel {
height: 20px;
  display: flex;
  align-items: center;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-liuyao .derivedGuaName {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 12px;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-liuyao .derivedGuaHex {
position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  overflow: visible;
}

.ppv-liuyao .derivedHexRow {
position: relative;
  display: flex;
  align-items: center;
  width: 68px;
  height: 8px;
  box-sizing: content-box;
}

.ppv-liuyao .derivedHexYang {
display: block;
  flex: 0 0 68px;
  width: 68px;
  height: 8px;
  background: var(--zd-muted);
}

.ppv-liuyao .derivedHexYin {
display: flex;
  flex: 0 0 68px;
  justify-content: space-between;
  width: 68px;
  height: 8px;
}

.ppv-liuyao .derivedHexYin > span {
display: block;
  width: 30px;
  height: 8px;
  background: var(--zd-muted);
}

.ppv-liuyao .guaHead {
min-height: 42px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  
  max-width: calc(100% + 6px);
  box-sizing: border-box;
  padding: 0 1px;
}

.ppv-liuyao .guaHeadName {
font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-liuyao .guaHeadSub {
font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: var(--zd-text);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  
  text-overflow: ellipsis;
}

.ppv-liuyao .liushenCell {
width: 26px;
  height: 28px;
  display: flex;
  align-items: center;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-liuyao .fushenCell {
width: 100%;
  height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--zd-font-sans);
  color: var(--zd-text);
}

.ppv-liuyao .fushenDash {
font-size: 14px;
  line-height: 21px;
  text-align: center;
}

.ppv-liuyao .fushenRelation {
font-size: 12px;
  line-height: 14px;
  text-align: center;
}

.ppv-liuyao .fushenGanzhi {
font-size: 8px;
  line-height: 10px;
  white-space: nowrap;
}

.ppv-liuyao .yaoRow {
height: 28px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ppv-liuyao .yaoText {
height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--zd-font-sans);
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-liuyao .yaoTextMain {
font-size: 12px;
  line-height: 14px;
  text-align: center;
}

.ppv-liuyao .yaoTextNayin {
font-size: 8px;
  line-height: 10px;
}

.ppv-liuyao .yaoBars {
height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ppv-liuyao .yaoBarYang {
width: 48px;
  height: 8px;
  background: var(--zd-muted);
}

.ppv-liuyao .yaoBarYin {
width: 20px;
  height: 8px;
  background: var(--zd-muted);
}

.ppv-liuyao .yaoMark {
height: 28px;
  min-width: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.ppv-liuyao .yaoMarkIcon {
display: block;
  width: 10px;
  height: 10px;
  color: var(--zd-text);
}

.ppv-liuyao .yaoMarkText {
font-family: var(--zd-font-sans);
  font-size: 10px;
  line-height: 14px;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-liuyao .yaoDash {
height: 28px;
  display: flex;
  align-items: center;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  color: var(--zd-text);
}

.ppv-liuyao .shenShaCard {
margin-top: 14px;
  min-height: 115px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12.8px 16.8px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
}

.ppv-liuyao .shenShaHeading {
position: relative;
  width: 100%;
  font-family: var(--zd-font-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: #0a0a0a;
}

.ppv-liuyao .shenShaHeading::after {
content: '';
  position: absolute;
  left: 0.5px;
  right: 0.5px;
  bottom: 0;
  height: 0.5px;
  background: var(--zd-line);
}

.ppv-liuyao .shenShaItems {
display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  line-height: 21px;
  color: var(--zd-text);
}

.ppv-liuyao .shenShaItem {
display: inline-flex;
  align-items: baseline;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.ppv-liuyao .shenShaItem:active {
opacity: 0.72;
}

.ppv-liuyao .shenShaItemName {
font-family: inherit;
}

.ppv-liuyao .chipRow {
display: flex;
  align-items: center;
  margin: 8px 21px 0;
}

.ppv-liuyao .chipScroll {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-liuyao .chipScroll::-webkit-scrollbar {
display: none;
}

.ppv-liuyao .switchChip {
display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 28px;
  padding: 5px 8px;
  border: 0.8px solid var(--zd-line);
  border-radius: 8px;
  background: transparent;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-liuyao .switchChip:disabled {
opacity: 0.55;
}

.ppv-liuyao .composer {
flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 8px 21px calc(34px + var(--zd-safe-bottom));
  padding: 10px 12px;
  border: none;
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.12);
  text-align: left;
}

.ppv-liuyao .composerIcon {
flex: none;
  width: 24px;
  height: 24px;
}

.ppv-liuyao .composerPlaceholder {
flex: 1;
  min-width: 0;
  color: #afafaf;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppv-liuyao .clickable .guaHeadSub {
color: var(--zd-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ppv-liuyao .clickable .derivedGuaName {
color: var(--zd-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ppv-liuyao .selected {
border-radius: 4px;
  background: rgba(255, 219, 206, 0.7);
  box-shadow: 0 0 0 1px var(--zd-accent);
}

.ppv-liuyao .composerDock {
flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 21px calc(34px + var(--zd-safe-bottom));
}

.ppv-liuyao .selectionBar {
display: flex;
  align-items: center;
  gap: 10px;
}

.ppv-liuyao .selectionChips {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-liuyao .selectionChips::-webkit-scrollbar {
display: none;
}

.ppv-liuyao .selectionChip {
display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 0.8px solid var(--zd-accent);
  border-radius: 8px;
  background: rgba(255, 219, 206, 0.35);
  font-family: var(--zd-font-sans);
  font-size: 13px;
  line-height: normal;
  color: #0a0a0a;
}

.ppv-liuyao .selectionChipText {
font-weight: 500;
  white-space: nowrap;
}

.ppv-liuyao .selectionChipRemove {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--zd-accent);
  font-size: 15px;
  line-height: 1;
}

/* ── 搬自 src/h5/components/LiuyaoCoinReveal.module.css（作用域 .ppr-liuyao） ── */
.ppr-liuyao .overlay {
position: absolute;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: var(--zd-bg, #faf9f5);
  
  pointer-events: auto;
}

.ppr-liuyao .overlay[data-fading='true'] {
animation: ppr-liuyao-reveal-fade-out 720ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes ppr-liuyao-reveal-fade-out {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
  }
}

.ppr-liuyao .stage {
position: absolute;
  inset: 0;
}

.ppr-liuyao .hands {
position: absolute;
  left: 50%;
  top: 52%;
  width: min(48vw, 188px);
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
}

.ppr-liuyao .overlay[data-phase='shaking'] .hands {
animation: ppr-liuyao-hands-shake 760ms ease-in-out infinite;
}

@keyframes ppr-liuyao-hands-shake {
  0% {
    transform: translate(-50%, -50%) translateY(0) rotate(0deg);
  }
  26% {
    transform: translate(-50%, -50%) translateY(-14px) rotate(-2.2deg);
  }
  50% {
    transform: translate(-50%, -50%) translateY(2px) rotate(0.8deg);
  }
  72% {
    transform: translate(-50%, -50%) translateY(-8px) rotate(-1.4deg);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0) rotate(0deg);
  }
}

.ppr-liuyao .overlay[data-phase='tossing'] .hands {
animation: ppr-liuyao-hands-toss 700ms cubic-bezier(0.45, 0, 0.4, 1) forwards;
}

@keyframes ppr-liuyao-hands-toss {
  0% {
    transform: translate(-50%, -50%) translateY(0) rotate(0deg);
    opacity: 1;
  }
  20% {
    transform: translate(-50%, -50%) translateY(15px) rotate(1.6deg);
    opacity: 1;
  }
  46% {
    transform: translate(-50%, -50%) translateY(-36px) rotate(-4deg);
    opacity: 1;
  }
  68% {
    transform: translate(-50%, -50%) translateY(-22px) rotate(-3deg);
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) translateY(38px) rotate(2deg);
    opacity: 0;
  }
}

.ppr-liuyao .coins {
position: absolute;
  left: 50%;
  top: 51%;
  width: 0;
  height: 0;
  perspective: 720px;
}

.ppr-liuyao .coinSlot {
position: absolute;
  left: -28px;
  top: -28px;
  width: 56px;
  height: 56px;
  
  opacity: 0;
}

.ppr-liuyao .coinFly {
display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.ppr-liuyao .coinArc {
display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.ppr-liuyao .coinSpin {
position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--end-rot, 0deg));
  will-change: transform;
}

.ppr-liuyao .coinFace {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;
  
  transform: rotateX(0deg) translateZ(0.6px);
  user-select: none;
  -webkit-user-drag: none;
}

.ppr-liuyao .coinFaceBack {
transform: rotateX(180deg) translateZ(0.6px);
}

.ppr-liuyao .coinShadow {
position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 10px;
  margin: -5px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(60, 42, 24, 0.4), rgba(60, 42, 24, 0) 70%);
  opacity: 0;
  will-change: transform, opacity;
}

.ppr-liuyao .overlay[data-phase='tossing'] .coinSlot {
animation: ppr-liuyao-coin-show 1ms linear var(--coin-delay, 300ms) both;
}

@keyframes ppr-liuyao-coin-show {
  to {
    opacity: 1;
  }
}

.ppr-liuyao .overlay[data-phase='tossing'] .coinFly {
animation: ppr-liuyao-coin-fly-x 1000ms linear var(--coin-delay, 300ms) both;
}

@keyframes ppr-liuyao-coin-fly-x {
  0% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(var(--dx, 0px));
  }
  100% {
    transform: translateX(var(--dx, 0px));
  }
}

.ppr-liuyao .overlay[data-phase='tossing'] .coinArc {
animation: ppr-liuyao-coin-arc 1000ms linear var(--coin-delay, 300ms) both;
}

@keyframes ppr-liuyao-coin-arc {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.5, 1);
  }
  36% {
    transform: translateY(var(--peak, -110px));
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4);
  }
  70% {
    transform: translateY(var(--fall, 148px));
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1);
  }
  79% {
    transform: translateY(calc(var(--fall, 148px) - 24px));
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  87% {
    transform: translateY(var(--fall, 148px));
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1);
  }
  93% {
    transform: translateY(calc(var(--fall, 148px) - 8px));
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  100% {
    transform: translateY(var(--fall, 148px));
  }
}

.ppr-liuyao .overlay[data-phase='tossing'] .coinSpin {
animation: ppr-liuyao-coin-spin 700ms cubic-bezier(0.3, 0.55, 0.55, 1) var(--coin-delay, 300ms) both;
}

@keyframes ppr-liuyao-coin-spin {
  from {
    transform: rotateX(calc(var(--end-rot, 0deg) - var(--turns, 4) * 360deg));
  }
  to {
    transform: rotateX(var(--end-rot, 0deg));
  }
}

.ppr-liuyao .overlay[data-phase='tossing'] .coinShadow {
animation: ppr-liuyao-coin-shadow 1000ms linear var(--coin-delay, 300ms) both;
}

@keyframes ppr-liuyao-coin-shadow {
  0%,
  40% {
    opacity: 0;
    transform: translateX(var(--dx, 0px)) translateY(calc(var(--fall, 148px) + 24px)) scale(0.4);
  }
  70% {
    opacity: 0.42;
    transform: translateX(var(--dx, 0px)) translateY(calc(var(--fall, 148px) + 24px)) scale(1.12);
  }
  79% {
    opacity: 0.26;
    transform: translateX(var(--dx, 0px)) translateY(calc(var(--fall, 148px) + 24px)) scale(0.88);
  }
  87% {
    opacity: 0.4;
    transform: translateX(var(--dx, 0px)) translateY(calc(var(--fall, 148px) + 24px)) scale(1.05);
  }
  100% {
    opacity: 0.35;
    transform: translateX(var(--dx, 0px)) translateY(calc(var(--fall, 148px) + 24px)) scale(1);
  }
}

.ppr-liuyao .loadingText {
position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  font-family: var(--zd-font-serif, serif);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 6px;
  
  padding-left: 6px;
  color: var(--zd-muted, #8f6f4c);
  opacity: 0.88;
  white-space: nowrap;
  animation: ppr-liuyao-text-in 560ms cubic-bezier(0.33, 1, 0.68, 1) 360ms backwards;
  pointer-events: none;
}

@keyframes ppr-liuyao-text-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 0.88;
    transform: translateX(-50%) translateY(0);
  }
}

.ppr-liuyao .loadingDots {
display: inline-flex;
  gap: 5px;
  margin-left: 4px;
}

.ppr-liuyao .loadingDots i {
width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: ppr-liuyao-dot-pulse 1320ms ease-in-out infinite;
}

.ppr-liuyao .loadingDots i:nth-child(2) {
animation-delay: 220ms;
}

.ppr-liuyao .loadingDots i:nth-child(3) {
animation-delay: 440ms;
}

@keyframes ppr-liuyao-dot-pulse {
  0%,
  100% {
    opacity: 0.2;
  }
  35% {
    opacity: 1;
  }
}

.ppr-liuyao .overlay[data-phase='tossing'] .loadingText {
animation: ppr-liuyao-text-out 320ms ease-out forwards;
}

@keyframes ppr-liuyao-text-out {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
.ppr-liuyao .overlay[data-phase='shaking'] .hands {
animation: none;
}

.ppr-liuyao .overlay[data-phase='tossing'] .hands {
animation: none;
    opacity: 0;
    transition: opacity 240ms ease-out;
}

.ppr-liuyao .overlay[data-phase='tossing'] .coinSlot,
.ppr-liuyao .overlay[data-phase='tossing'] .coinFly,
.ppr-liuyao .overlay[data-phase='tossing'] .coinArc,
.ppr-liuyao .overlay[data-phase='tossing'] .coinSpin,
.ppr-liuyao .overlay[data-phase='tossing'] .coinShadow {
animation: none;
}

.ppr-liuyao .loadingText,
.ppr-liuyao .loadingDots i {
animation: none;
}

.ppr-liuyao .overlay[data-phase='tossing'] .loadingText {
animation: none;
    opacity: 0;
    transition: opacity 240ms ease-out;
}

.ppr-liuyao .overlay[data-fading='true'] {
animation: none;
    opacity: 0;
    transition: opacity 320ms ease-out;
}
}

/* ── 搬自 src/h5/components/MeihuaResultCard.module.css（作用域 .ppc-meihua） ── */
@keyframes ppc-meihua-meihuaCardStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ppc-meihua .meihuaCard {
position: relative;
  
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  padding: 16px 18px;
  border-radius: var(--zd-radius-card);
  background: transparent;
  color: var(--zd-text);
  text-align: left;
  animation: ppc-meihua-meihuaCardStepIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppc-meihua .header {
display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ppc-meihua .name {
min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppc-meihua .time {
flex: none;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-meihua .pillars {
display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.ppc-meihua .pillar {
display: inline-flex;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.ppc-meihua .pillarRow {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  align-self: stretch;
}

.ppc-meihua .rikong {
flex: none;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-meihua .guaLine {
display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  align-self: stretch;
  border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
}

.ppc-meihua .guaName {
font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--zd-text);
}

.ppc-meihua .guaArrow {
color: var(--zd-muted);
  font-size: 12px;
}

.ppc-meihua .guaRelation {
margin-left: auto;
  font-size: 11px;
  color: var(--zd-accent);
}

.ppc-meihua .guaGrid {
display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  align-self: stretch;
  overflow: visible;
}

.ppc-meihua .gua {
display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: visible;
}

.ppc-meihua .guaLabel {
font-family: var(--zd-font-sans);
  font-size: 10px;
  color: var(--zd-muted);
}

.ppc-meihua .guaTitle {
max-width: 100%;
  overflow: hidden;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--zd-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppc-meihua .glyph {
position: relative;
  display: flex;
  width: 36px;
  flex-direction: column;
  gap: 3px;
  overflow: visible;
}

.ppc-meihua .glyphRow {
position: relative;
  display: block;
  width: 36px;
  height: 5px;
}

.ppc-meihua .yang {
display: block;
  width: 36px;
  height: 5px;
  border-radius: 1px;
  background: var(--zd-text);
}

.ppc-meihua .yin {
display: flex;
  justify-content: space-between;
  width: 36px;
  height: 5px;
}

.ppc-meihua .yin > span {
display: block;
  width: 16px;
  height: 5px;
  border-radius: 1px;
  background: var(--zd-text);
}

.ppc-meihua .tiYongMark {
position: absolute;
  left: -12px;
  width: 10px;
  text-align: center;
  font-family: var(--zd-font-serif);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: var(--zd-accent);
  pointer-events: none;
}

.ppc-meihua .tiYongMarkUpper {
top: calc(5px + 3px + 2.5px);
}

.ppc-meihua .tiYongMarkLower {
bottom: calc(5px + 3px + 2.5px);
}

.ppc-meihua .movingMark {
position: absolute;
  left: calc(100% + 2px);
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 7px;
  height: 7px;
  color: var(--zd-text);
  pointer-events: none;
}

.ppc-meihua .movingMark svg {
display: block;
  width: 100%;
  height: 100%;
}

.ppc-meihua .meta {
display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  align-self: stretch;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-meihua .metaAccent {
color: var(--zd-accent);
}

.ppc-meihua .placeholder {
border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-meihua .flush {
padding-right: 18px;
}

.ppc-meihua .chevron {
position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zd-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* ── 搬自 src/h5/routes/MeihuaChartPage.module.css（作用域 .ppv-meihua） ── */
.ppv-meihua .page {
position: relative;
  height: 100%;
  min-height: 0;
  background: var(--zd-bg);
  color: var(--zd-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ppv-meihua .header {
position: relative;
  z-index: 20;
  height: 54px;
  flex-shrink: 0;
  background: var(--zd-bg);
}

.ppv-meihua .headerButton {
position: absolute;
  top: 10px;
  left: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-meihua .closeButton {
left: auto;
  right: 20px;
}

.ppv-meihua .headerButton img {
width: 22px;
  height: 22px;
}

.ppv-meihua .title {
position: absolute;
  top: 0;
  left: 50%;
  height: 54px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--zd-font-brand);
  font-size: var(--zd-fs-page);
  font-weight: 510;
  white-space: nowrap;
}

.ppv-meihua .chartTabs {
position: relative;
  z-index: 20;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  background: var(--zd-bg);
  border-bottom: 0.5px solid var(--zd-line);
}

.ppv-meihua .chartTab {
position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
}

.ppv-meihua .chartTabActive {
color: var(--zd-accent);
  font-weight: 600;
}

.ppv-meihua .chartTabLabel {
position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.ppv-meihua .chartTabUnderline {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 10px;
  background: var(--zd-accent);
}

.ppv-meihua .panelTopPad {
padding-top: 8px;
}

.ppv-meihua .body {
position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  transform-origin: 50% 30%;
  transition:
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 900ms ease;
}

.ppv-meihua .bodyVeiled {
transform: scale(0.975);
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
.ppv-meihua .body {
transition: none;
}

.ppv-meihua .bodyVeiled {
transform: none;
    opacity: 1;
}
}

.ppv-meihua .content {
padding-bottom: 16px;
}

.ppv-meihua .hourBar {
display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
}

.ppv-meihua .hourNavBtn {
display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--zd-muted);
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
  white-space: nowrap;
}

.ppv-meihua .hourNavIcon {
display: block;
  width: 24px;
  height: 24px;
  color: var(--zd-muted);
}

.ppv-meihua .eventNote {
flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-family: var(--zd-font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.ppv-meihua .loading,
.ppv-meihua .error {
margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
}

.ppv-meihua .loading {
color: var(--zd-muted);
}

.ppv-meihua .error {
color: #c0392b;
}

.ppv-meihua .calendar {
display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 4px;
}

.ppv-meihua .calendar p {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 17.5px;
  color: var(--zd-text);
}

.ppv-meihua .divider {
height: 0.5px;
  margin: 8px 0;
  background: var(--zd-line);
}

.ppv-meihua .infoRow {
display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 16px;
}

.ppv-meihua .pillarBox {
border: 0.5px solid var(--zd-line);
  opacity: 0.8;
  display: inline-grid;
  grid-template-columns: repeat(4, auto);
  padding: 4px 16px;
  column-gap: 16px;
  row-gap: 4px;
  text-align: center;
}

.ppv-meihua .pillarHead {
font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.6);
}

.ppv-meihua .pillarChar {
font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.ppv-meihua .metaCol {
border-radius: 10px;
  padding: 4px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ppv-meihua .metaCol p {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 21px;
  color: var(--zd-text);
  text-align: center;
  white-space: pre;
}

.ppv-meihua .metaTiYongItem {
display: inline;
  border-radius: 4px;
  color: var(--zd-text);
}

.ppv-meihua .guaSection {
display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 38px;
}

.ppv-meihua .guaRowTop {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  column-gap: 4px;
  overflow: visible;
}

.ppv-meihua .guaRowStagger {
display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  column-gap: 0;
}

.ppv-meihua .guaRowStagger > *:nth-child(1) {
grid-column: 2 / 4;
}

.ppv-meihua .guaRowStagger > *:nth-child(2) {
grid-column: 4 / 6;
}

.ppv-meihua .guaCard {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  width: 100%;
  max-width: 120px;
  box-sizing: border-box;
  overflow: visible;
}

.ppv-meihua .guaLabel {
height: 20px;
  display: flex;
  align-items: center;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-meihua .guaName {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 12px;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-meihua .guaHex {
position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  overflow: visible;
}

.ppv-meihua .tiYongMark {
position: absolute;
  
  left: -16px;
  width: 14px;
  text-align: center;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--zd-accent);
  pointer-events: none;
}

.ppv-meihua .tiYongMarkUpper {
top: calc(4px + 8px + 4px);
}

.ppv-meihua .tiYongMarkLower {
bottom: calc(4px + 8px + 4px);
}

.ppv-meihua .hexRow {
position: relative;
  display: flex;
  align-items: center;
  width: 68px;
  height: 8px;
  box-sizing: content-box;
}

.ppv-meihua .hexYang {
display: block;
  flex: 0 0 68px;
  width: 68px;
  height: 8px;
  background: var(--zd-muted);
}

.ppv-meihua .hexYin {
display: flex;
  flex: 0 0 68px;
  justify-content: space-between;
  width: 68px;
  height: 8px;
}

.ppv-meihua .hexYin > span {
display: block;
  width: 30px;
  height: 8px;
  background: var(--zd-muted);
}

.ppv-meihua .movingMark {
position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 10px;
  height: 10px;
  color: var(--zd-text);
  pointer-events: none;
}

.ppv-meihua .movingMark svg {
display: block;
  width: 100%;
  height: 100%;
}

.ppv-meihua .movingButton {
pointer-events: auto;
  box-sizing: content-box;
  padding: 6px;
  margin: -6px;
  border: none;
  background: none;
}

.ppv-meihua .clickable .guaName {
color: var(--zd-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ppv-meihua .selected {
border-radius: 4px;
  background: rgba(255, 219, 206, 0.7);
  box-shadow: 0 0 0 1px var(--zd-accent);
}

.ppv-meihua .selectionBar {
display: flex;
  align-items: center;
  gap: 10px;
}

.ppv-meihua .selectionChips {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-meihua .selectionChips::-webkit-scrollbar {
display: none;
}

.ppv-meihua .selectionChip {
display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 0.8px solid var(--zd-accent);
  border-radius: 8px;
  background: rgba(255, 219, 206, 0.35);
  font-family: var(--zd-font-sans);
  font-size: 13px;
  line-height: normal;
  color: #0a0a0a;
}

.ppv-meihua .selectionChipText {
font-weight: 500;
  white-space: nowrap;
}

.ppv-meihua .selectionChipRemove {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--zd-accent);
  font-size: 15px;
  line-height: 1;
}

.ppv-meihua .composerDock {
flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 21px calc(34px + var(--zd-safe-bottom));
}

.ppv-meihua .chipRow {
display: flex;
  align-items: center;
  margin-top: 8px;
}

.ppv-meihua .chipScroll {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-meihua .chipScroll::-webkit-scrollbar {
display: none;
}

.ppv-meihua .switchChip {
display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 28px;
  padding: 5px 8px;
  border: 0.8px solid var(--zd-line);
  border-radius: 8px;
  background: transparent;
  color: var(--zd-muted);
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.ppv-meihua .switchChip:disabled {
opacity: 0.55;
}

.ppv-meihua .composer {
display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: none;
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.12);
  text-align: left;
}

.ppv-meihua .composerIcon {
flex: none;
  width: 24px;
  height: 24px;
}

.ppv-meihua .composerPlaceholder {
flex: 1;
  min-width: 0;
  color: #afafaf;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 搬自 src/h5/components/MeihuaBlossomReveal.module.css（作用域 .ppr-meihua） ── */
.ppr-meihua .overlay {
position: absolute;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: var(--zd-bg, #faf9f5);
  pointer-events: auto;
}

.ppr-meihua .overlay[data-fading='true'] {
animation: ppr-meihua-reveal-fade-out 720ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes ppr-meihua-reveal-fade-out {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
  }
}

.ppr-meihua .stage {
position: absolute;
  inset: 0;
}

.ppr-meihua .branch {
position: absolute;
  top: -2%;
  right: -4%;
  width: min(92vw, 360px);
  height: auto;
  
  animation: ppr-meihua-branch-fade-in 880ms ease-out both;
  will-change: opacity, transform;
}

@keyframes ppr-meihua-branch-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ppr-meihua .overlay[data-phase='parting'] .branch {
animation: ppr-meihua-branch-part 900ms cubic-bezier(0.34, 0.1, 0.4, 1) forwards;
  transform-origin: 96% 4%;
}

@keyframes ppr-meihua-branch-part {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0.8deg);
  }
}

.ppr-meihua .petals {
position: absolute;
  inset: 0;
  
  animation: ppr-meihua-petals-arm 1ms linear 900ms both;
  opacity: 0;
}

@keyframes ppr-meihua-petals-arm {
  to {
    opacity: 1;
  }
}

.ppr-meihua .petal {
position: absolute;
  top: var(--petal-top, 10%);
  left: var(--petal-left, 78%);
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  opacity: 0;
  animation: ppr-meihua-petal-blow var(--fall-ms, 5200ms) linear var(--fall-delay, 0ms) infinite;
  will-change: transform, opacity;
}

@keyframes ppr-meihua-petal-blow {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  4% {
    opacity: 0.95;
  }
  78% {
    opacity: 0.85;
  }
  100% {
    
    transform: translate3d(var(--fall-x, -200px), var(--fall-y, 560px), 0);
    opacity: 0.08;
  }
}

.ppr-meihua .petalDrift {
display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.ppr-meihua .overlay[data-phase='parting'] .petalDrift {
animation: ppr-meihua-petal-drift 960ms cubic-bezier(0.33, 0, 0.4, 1) forwards;
}

@keyframes ppr-meihua-petal-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--drift-x, -140px));
  }
}

.ppr-meihua .petalSway {
display: block;
  width: 100%;
  height: 100%;
  animation: ppr-meihua-petal-sway var(--sway-ms, 1800ms) ease-in-out var(--sway-delay, 0ms) infinite
    alternate;
  will-change: transform;
}

@keyframes ppr-meihua-petal-sway {
  from {
    transform: translateX(calc(var(--sway-px, 12px) * -1)) translateY(calc(var(--sway-px, 12px) * -0.25));
  }
  to {
    transform: translateX(var(--sway-px, 12px)) translateY(calc(var(--sway-px, 12px) * 0.25));
  }
}

.ppr-meihua .petalSpin {
display: block;
  width: 100%;
  height: 100%;
  animation: ppr-meihua-petal-spin var(--spin-ms, 2800ms) linear var(--sway-delay, 0ms) infinite;
  will-change: transform;
}

@keyframes ppr-meihua-petal-spin {
  from {
    transform: scale(var(--petal-scale, 1)) rotate3d(0.55, 0.2, 1, 0deg);
  }
  to {
    transform: scale(var(--petal-scale, 1)) rotate3d(0.55, 0.2, 1, 360deg);
  }
}

.ppr-meihua .petalShape {
display: block;
  width: 100%;
  height: 100%;
}

.ppr-meihua .loadingText {
position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  font-family: var(--zd-font-serif, serif);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 6px;
  padding-left: 6px;
  color: var(--zd-muted, #8f6f4c);
  opacity: 0.88;
  white-space: nowrap;
  animation: ppr-meihua-text-in 560ms cubic-bezier(0.33, 1, 0.68, 1) 280ms backwards;
  pointer-events: none;
}

@keyframes ppr-meihua-text-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 0.88;
    transform: translateX(-50%) translateY(0);
  }
}

.ppr-meihua .loadingDots {
display: inline-flex;
  gap: 5px;
  margin-left: 4px;
}

.ppr-meihua .loadingDots i {
width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: ppr-meihua-dot-pulse 1320ms ease-in-out infinite;
}

.ppr-meihua .loadingDots i:nth-child(2) {
animation-delay: 220ms;
}

.ppr-meihua .loadingDots i:nth-child(3) {
animation-delay: 440ms;
}

@keyframes ppr-meihua-dot-pulse {
  0%,
  100% {
    opacity: 0.2;
  }
  35% {
    opacity: 1;
  }
}

.ppr-meihua .overlay[data-phase='parting'] .loadingText {
animation: ppr-meihua-text-out 320ms ease-out forwards;
}

@keyframes ppr-meihua-text-out {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
.ppr-meihua .branch {
animation: none;
    opacity: 1;
}

.ppr-meihua .petals,
.ppr-meihua .petal,
.ppr-meihua .petalDrift,
.ppr-meihua .petalSway,
.ppr-meihua .petalSpin {
animation: none;
}

.ppr-meihua .petals {
opacity: 0;
}

.ppr-meihua .overlay[data-phase='parting'] .branch {
animation: none;
    opacity: 0;
    transition: opacity 240ms ease-out;
}

.ppr-meihua .loadingText,
.ppr-meihua .loadingDots i {
animation: none;
}

.ppr-meihua .overlay[data-phase='parting'] .loadingText {
animation: none;
    opacity: 0;
    transition: opacity 240ms ease-out;
}

.ppr-meihua .overlay[data-fading='true'] {
animation: none;
    opacity: 0;
    transition: opacity 320ms ease-out;
}
}

/* ── 搬自 src/h5/components/ShifaResultCard.module.css（作用域 .ppc-shifa） ── */
@keyframes ppc-shifa-shifaCardStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ppc-shifa .shifaCard {
position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border-radius: var(--zd-radius-card);
  background: transparent;
  color: var(--zd-text);
  text-align: left;
  animation: ppc-shifa-shifaCardStepIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppc-shifa .header {
display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ppc-shifa .name {
min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppc-shifa .time {
flex: none;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-shifa .pillars {
display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.ppc-shifa .pillar {
display: inline-flex;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.ppc-shifa .pillarRow {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  align-self: stretch;
}

.ppc-shifa .rikong {
flex: none;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-shifa .guaLine {
display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  align-self: stretch;
  border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
}

.ppc-shifa .guaName {
font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--zd-text);
}

.ppc-shifa .guaArrow {
color: var(--zd-muted);
  font-size: 12px;
}

.ppc-shifa .guaBadge {
font-size: 11px;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppc-shifa .zhanSummary {
margin: 0 0 0 auto;
  min-width: 0;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  line-height: 18px;
  text-align: right;
  color: var(--zd-accent);
}

.ppc-shifa .guaTable {
display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  align-self: stretch;
}

.ppc-shifa .guaHead {
display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.4fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
  gap: 4px;
  width: 100%;
  font-family: var(--zd-font-sans);
  font-size: 10px;
  color: var(--zd-muted);
}

.ppc-shifa .guaHead > span {
text-align: center;
}

.ppc-shifa .guaRow {
display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.4fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
  gap: 4px;
  width: 100%;
  align-items: center;
  justify-items: stretch;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  line-height: 1.1;
}

.ppc-shifa .colTitle {
display: block;
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--zd-text);
}

.ppc-shifa .colCode {
display: block;
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--zd-muted);
  font-variant-numeric: tabular-nums;
}

.ppc-shifa .colGua,
.ppc-shifa .colZhi {
display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  box-sizing: border-box;
}

.ppc-shifa .colGua::before {
content: '';
  width: 1.2em;
  flex: none;
}

.ppc-shifa .rightMarkSlot {
display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 1.2em;
  flex: none;
}

.ppc-shifa .yaoYang {
display: inline-block;
  width: 36px;
  height: 5px;
  border-radius: 1px;
  background: var(--zd-text);
  flex: none;
}

.ppc-shifa .yaoYin {
display: inline-flex;
  gap: 4px;
  width: 36px;
  flex: none;
}

.ppc-shifa .yaoYin > span {
display: inline-block;
  width: 16px;
  height: 5px;
  border-radius: 1px;
  background: var(--zd-text);
}

.ppc-shifa .moving {
font-size: 10px;
  font-weight: 600;
  color: #c0392b;
  line-height: 1;
}

.ppc-shifa .placeholder {
border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-shifa .flush {
padding-right: 18px;
}

.ppc-shifa .chevron {
position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zd-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* ── 搬自 src/h5/routes/ShifaChartPage.module.css（作用域 .ppv-shifa） ── */
.ppv-shifa .page {
position: relative;
  height: 100%;
  min-height: 0;
  background: var(--zd-bg);
  color: var(--zd-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ppv-shifa .header {
position: relative;
  z-index: 20;
  height: 54px;
  flex-shrink: 0;
  background: var(--zd-bg);
}

.ppv-shifa .headerButton {
position: absolute;
  top: 10px;
  left: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-shifa .closeButton {
left: auto;
  right: 20px;
}

.ppv-shifa .headerButton img {
width: 22px;
  height: 22px;
}

.ppv-shifa .title {
position: absolute;
  top: 0;
  left: 50%;
  height: 54px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--zd-font-brand);
  font-size: var(--zd-fs-page);
  font-weight: 510;
  white-space: nowrap;
}

.ppv-shifa .chartTabs {
position: relative;
  z-index: 20;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  background: var(--zd-bg);
  border-bottom: 0.5px solid var(--zd-line);
}

.ppv-shifa .chartTab {
position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
}

.ppv-shifa .chartTabActive {
color: var(--zd-accent);
  font-weight: 600;
}

.ppv-shifa .chartTabLabel {
position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.ppv-shifa .chartTabUnderline {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 10px;
  background: var(--zd-accent);
}

.ppv-shifa .panelTopPad {
padding-top: 8px;
}

.ppv-shifa .body {
position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  transform-origin: 50% 30%;
  transition:
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 900ms ease;
}

.ppv-shifa .bodyVeiled {
transform: scale(0.975);
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
.ppv-shifa .body {
transition: none;
}

.ppv-shifa .bodyVeiled {
transform: none;
    opacity: 1;
}
}

.ppv-shifa .hourBar {
display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
}

.ppv-shifa .hourNavBtn {
display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--zd-muted);
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
  white-space: nowrap;
}

.ppv-shifa .hourIcon {
display: block;
  width: 24px;
  height: 24px;
  color: var(--zd-muted);
}

.ppv-shifa .eventNote {
flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-family: var(--zd-font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: #0a0a0a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.ppv-shifa .loading,
.ppv-shifa .error {
margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
}

.ppv-shifa .loading {
color: var(--zd-muted);
}

.ppv-shifa .error {
color: #c0392b;
}

.ppv-shifa .calendar {
display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 4px;
}

.ppv-shifa .calendar p {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 17.5px;
  color: #0a0a0a;
}

.ppv-shifa .divider {
height: 0.5px;
  margin: 8px 0;
  background: var(--zd-line);
}

.ppv-shifa .infoRow {
display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 16px;
}

.ppv-shifa .pillarBox {
border: 0.5px solid var(--zd-line);
  opacity: 0.8;
  display: inline-grid;
  grid-template-columns: repeat(4, auto);
  padding: 4px 16px;
  column-gap: 16px;
  row-gap: 4px;
  text-align: center;
}

.ppv-shifa .pillarHead {
font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.6);
}

.ppv-shifa .pillarChar {
font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.ppv-shifa .metaCol {
min-height: 75px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ppv-shifa .metaZhan {
color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}

.ppv-shifa .metaZhan:hover {
color: var(--zd-accent);
}

.ppv-shifa .metaCol p {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 15px;
  color: #0a0a0a;
  text-align: center;
  white-space: pre;
}

.ppv-shifa .metaCol p.metaGuaShen {
font-size: 13px;
  color: var(--zd-muted);
}

.ppv-shifa .derivedRow {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  margin-top: 20px;
}

.ppv-shifa .derivedGuaCard {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  width: 100%;
  max-width: 120px;
  box-sizing: border-box;
  overflow: visible;
}

.ppv-shifa .derivedGuaLabel {
height: 20px;
  display: flex;
  align-items: center;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-shifa .derivedGuaName {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 12px;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-shifa .derivedGuaHex {
position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  overflow: visible;
}

.ppv-shifa .derivedHexRow {
position: relative;
  display: flex;
  align-items: center;
  width: 68px;
  height: 8px;
  box-sizing: content-box;
}

.ppv-shifa .derivedHexYang {
display: block;
  flex: 0 0 68px;
  width: 68px;
  height: 8px;
  background: var(--zd-muted);
}

.ppv-shifa .derivedHexYin {
display: flex;
  flex: 0 0 68px;
  justify-content: space-between;
  width: 68px;
  height: 8px;
}

.ppv-shifa .derivedHexYin > span {
display: block;
  width: 30px;
  height: 8px;
  background: var(--zd-muted);
}

.ppv-shifa .chipRow {
display: flex;
  align-items: center;
  margin: 8px 21px 0;
}

.ppv-shifa .chipScroll {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-shifa .chipScroll::-webkit-scrollbar {
display: none;
}

.ppv-shifa .switchChip {
display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 28px;
  padding: 5px 8px;
  border: 0.8px solid var(--zd-line);
  border-radius: 8px;
  background: transparent;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-shifa .switchChip:disabled {
opacity: 0.55;
}

.ppv-shifa .composer {
flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 8px 21px calc(34px + var(--zd-safe-bottom));
  padding: 10px 12px;
  border: none;
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.12);
  text-align: left;
}

.ppv-shifa .composerIcon {
flex: none;
  width: 24px;
  height: 24px;
}

.ppv-shifa .composerPlaceholder {
flex: 1;
  min-width: 0;
  color: #afafaf;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppv-shifa .clickable .guaHeadSub {
color: var(--zd-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ppv-shifa .clickable .derivedGuaName {
color: var(--zd-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ppv-shifa .selected {
border-radius: 4px;
  background: rgba(255, 219, 206, 0.7);
  box-shadow: 0 0 0 1px var(--zd-accent);
}

.ppv-shifa .composerDock {
flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 21px calc(34px + var(--zd-safe-bottom));
}

.ppv-shifa .selectionBar {
display: flex;
  align-items: center;
  gap: 10px;
}

.ppv-shifa .selectionChips {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-shifa .selectionChips::-webkit-scrollbar {
display: none;
}

.ppv-shifa .selectionChip {
display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 0.8px solid var(--zd-accent);
  border-radius: 8px;
  background: rgba(255, 219, 206, 0.35);
  font-family: var(--zd-font-sans);
  font-size: 13px;
  line-height: normal;
  color: #0a0a0a;
}

.ppv-shifa .selectionChipText {
font-weight: 500;
  white-space: nowrap;
}

.ppv-shifa .selectionChipRemove {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--zd-accent);
  font-size: 15px;
  line-height: 1;
}

.ppv-shifa .guaSection {
display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(48px, 14%, 240px);
  width: var(--zd-content-w);
  max-width: calc(100% - 2 * var(--zd-gutter));
  margin: 16px auto 0;
}

.ppv-shifa .guaCol {
display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  min-width: 0;
}

.ppv-shifa .guaHead {
min-height: 42px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 1px;
  margin-bottom: 10px;
}

.ppv-shifa .guaHeadName {
color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  white-space: nowrap;
}

.ppv-shifa .guaHeadSub {
color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

.ppv-shifa .yaoRow {
position: relative;
  width: 68px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.ppv-shifa .yaoTitle {
position: absolute;
  right: calc(100% + 4px);
  color: var(--zd-muted);
  font-family: var(--zd-font-serif);
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
}

.ppv-shifa .yaoBars {
height: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ppv-shifa .yaoBarYang {
width: 68px;
  height: 8px;
  background: var(--zd-muted);
}

.ppv-shifa .yaoBarYin {
width: 30px;
  height: 8px;
  background: var(--zd-muted);
}

.ppv-shifa .yaoMark {
position: absolute;
  left: calc(100% + 4px);
  width: 10px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ppv-shifa .yaoMarkIcon {
display: block;
  width: 10px;
  height: 10px;
  color: var(--zd-text);
}

.ppv-shifa .yaoMarkGhost {
opacity: 0.5;
}

.ppv-shifa .yaoCode {
position: absolute;
  left: calc(100% + 18px);
  color: var(--zd-muted);
  font-family: var(--zd-font-serif);
  font-size: 12px;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
}

/* ── 搬自 src/h5/components/ShifaReveal.module.css（作用域 .ppr-shifa） ── */
.ppr-shifa .veil {
position: absolute;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  
  pointer-events: auto;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 58%),
    var(--zd-bg, #faf9f5);
}

.ppr-shifa .veilFading {
animation: ppr-shifa-veil-fade 520ms ease forwards;
}

@keyframes ppr-shifa-veil-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.ppr-shifa .stage {
position: absolute;
  left: 50%;
  top: 50%;
  width: 268px;
  
  height: 268px;
  transform: translate(-50%, -50%);
}

.ppr-shifa .stalk {
position: absolute;
  left: 50%;
  bottom: 20px;
  width: 3px;
  height: var(--len);
  margin-left: -1.5px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(180deg, #e5cb9b 0%, #cbab72 46%, #ae8a54 100%);
  
  filter: brightness(var(--tint));
  transform-origin: bottom center;
  transform: translate(var(--hold-x), 0) rotate(var(--hold-rot));
  
  animation: ppr-shifa-shifa-ritual 1620ms cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: var(--step-delay);
}

.ppr-shifa .stalkPick {
z-index: 2;
  transform-origin: center;
  animation-name: ppr-shifa-shifa-pick;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ppr-shifa-shifa-ritual {
  
  0% {
    transform: translate(var(--hold-x), 0) rotate(calc(var(--hold-rot) - 0.9deg));
  }
  10% {
    transform: translate(var(--hold-x), 0) rotate(calc(var(--hold-rot) + 0.9deg));
  }
  
  52% {
    transform: translate(var(--hold-x), 0) rotate(var(--hold-rot));
  }
  
  67%,
  76% {
    transform: translate(var(--split-x), 0) rotate(var(--split-rot));
  }
  
  95%,
  100% {
    transform: translate(var(--four-x), var(--four-y)) rotate(var(--four-rot));
  }
}

@keyframes ppr-shifa-shifa-pick {
  0%,
  12% {
    transform: translate(0, 0) rotate(0deg);
  }
  
  31% {
    transform: translate(32px, -96px) rotate(8deg);
  }
  
  43%,
  100% {
    transform: translate(0, calc(var(--len) / 2 - 198px)) rotate(90deg);
  }
}

.ppr-shifa .caption {
position: absolute;
  left: 50%;
  top: 74.5%;
  transform: translateX(-50%);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
  font-family: var(--zd-font-serif, serif);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--zd-muted, #8f6f4c);
  animation: ppr-shifa-shifa-caption-breathe 2200ms ease-in-out infinite;
}

@keyframes ppr-shifa-shifa-caption-breathe {
  0%,
  100% {
    opacity: 0.62;
  }
  50% {
    opacity: 1;
  }
}

.ppr-shifa .captionDots {
display: inline-flex;
  gap: 3px;
  margin-left: 2px;
}

.ppr-shifa .captionDots i {
width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: ppr-shifa-shifa-dot-hop 1200ms ease-in-out infinite;
}

.ppr-shifa .captionDots i:nth-child(2) {
animation-delay: 150ms;
}

.ppr-shifa .captionDots i:nth-child(3) {
animation-delay: 300ms;
}

@keyframes ppr-shifa-shifa-dot-hop {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.ppr-shifa .veilParting .stage {
animation: ppr-shifa-shifa-stage-exit 420ms ease forwards;
}

.ppr-shifa .veilParting .caption {
animation: ppr-shifa-shifa-caption-exit 420ms ease forwards;
}

@keyframes ppr-shifa-shifa-stage-exit {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -52%) scale(0.97);
  }
}

@keyframes ppr-shifa-shifa-caption-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
.ppr-shifa .stalk,
.ppr-shifa .stalkPick,
.ppr-shifa .caption,
.ppr-shifa .captionDots i,
.ppr-shifa .veilParting .stage,
.ppr-shifa .veilParting .caption,
.ppr-shifa .veilFading {
animation: none;
}

.ppr-shifa .veilFading {
opacity: 0;
}
}

/* ── 搬自 src/h5/components/JinkoujueResultCard.module.css（作用域 .ppc-jinkou） ── */
@keyframes ppc-jinkou-jinkoujueCardStepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ppc-jinkou .jinkoujueCard {
position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 32px 16px 18px;
  border-radius: var(--zd-radius-card);
  background: transparent;
  color: var(--zd-text);
  text-align: left;
  animation: ppc-jinkou-jinkoujueCardStepIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppc-jinkou .jinkoujueCardHeader {
display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ppc-jinkou .jinkoujueCardName {
display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-family: var(--zd-font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppc-jinkou .jinkoujueCardTime {
flex: none;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-jinkou .pillars {
display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.ppc-jinkou .pillar {
display: inline-flex;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.ppc-jinkou .pillarRow {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  align-self: stretch;
}

.ppc-jinkou .difenYueJiang {
flex: none;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  color: var(--zd-muted);
  white-space: pre;
}

.ppc-jinkou .meta {
display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  align-self: stretch;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 15px;
  color: var(--zd-muted);
}

.ppc-jinkou .positionsRow {
display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  align-self: stretch;
  border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
}

.ppc-jinkou .positionsLeft {
display: flex;
  gap: 18px;
  align-items: flex-start;
  min-width: 0;
}

.ppc-jinkou .posLabelCol {
display: flex;
  flex-direction: column;
  gap: 6px;
  width: 26px;
  text-align: right;
}

.ppc-jinkou .posLabelCol span {
height: 18px;
  line-height: 18px;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 400;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppc-jinkou .posValueCol {
display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 62px;
}

.ppc-jinkou .posValue {
height: 18px;
  line-height: 18px;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppc-jinkou .positionsRight {
display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ppc-jinkou .posElementCol {
display: flex;
  flex-direction: column;
  gap: 6px;
  width: 13px;
  text-align: right;
}

.ppc-jinkou .posElementCol span {
height: 18px;
  line-height: 18px;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.ppc-jinkou .posStatusCol {
display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 58px;
}

.ppc-jinkou .posStatusRow {
display: flex;
  align-items: center;
  gap: 4px;
  height: 18px;
}

.ppc-jinkou .yinyangIcon {
display: block;
  width: 11px;
  height: 10px;
  flex: none;
  color: var(--zd-text);
}

.ppc-jinkou .posStatusRow span {
font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppc-jinkou .placeholder {
border-top: 0.5px solid var(--zd-line);
  padding-top: 8px;
  font-size: 11px;
  color: var(--zd-muted);
}

.ppc-jinkou .flush {
padding-right: 18px;
}

.ppc-jinkou .jinkoujueCardChevron {
position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zd-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* ── 搬自 src/h5/routes/JinkoujueChartPage.module.css（作用域 .ppv-jinkou） ── */
.ppv-jinkou .page {
position: relative;
  height: 100%;
  min-height: 0;
  background: var(--zd-bg);
  color: var(--zd-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ppv-jinkou .header {
position: relative;
  z-index: 20;
  height: 54px;
  flex-shrink: 0;
  background: var(--zd-bg);
}

.ppv-jinkou .headerButton {
position: absolute;
  top: 10px;
  left: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
}

.ppv-jinkou .closeButton {
left: auto;
  right: 20px;
}

.ppv-jinkou .headerButton img {
width: 22px;
  height: 22px;
}

.ppv-jinkou .title {
position: absolute;
  top: 0;
  left: 50%;
  height: 54px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--zd-font-brand);
  font-size: var(--zd-fs-page);
  font-weight: 510;
  white-space: nowrap;
}

.ppv-jinkou .chartTabs {
position: relative;
  z-index: 20;
  display: flex;
  flex-shrink: 0;
  height: 40px;
  background: var(--zd-bg);
  border-bottom: 0.5px solid var(--zd-line);
}

.ppv-jinkou .chartTab {
position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--zd-text);
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 500;
}

.ppv-jinkou .chartTabActive {
color: var(--zd-accent);
  font-weight: 600;
}

.ppv-jinkou .chartTabLabel {
position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.ppv-jinkou .chartTabUnderline {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 10px;
  background: var(--zd-accent);
}

.ppv-jinkou .body {
position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ppv-jinkou .panelTopPad {
padding-top: 8px;
}

.ppv-jinkou .hourBar {
display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
}

.ppv-jinkou .hourNavBtn {
display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--zd-muted);
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
  white-space: nowrap;
}

.ppv-jinkou .hourNavIcon {
display: block;
  width: 24px;
  height: 24px;
  color: var(--zd-muted);
}

.ppv-jinkou .eventNote {
flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-family: var(--zd-font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--zd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.ppv-jinkou .loading,
.ppv-jinkou .error {
margin: 12px 0 0;
  text-align: center;
  font-size: 14px;
}

.ppv-jinkou .loading {
color: var(--zd-muted);
}

.ppv-jinkou .error {
color: #c0392b;
}

.ppv-jinkou .calendar {
display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 4px;
}

.ppv-jinkou .calendar p {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 17.5px;
  color: var(--zd-text);
}

.ppv-jinkou .divider {
height: 0.5px;
  margin: 8px 0;
  background: var(--zd-line);
}

.ppv-jinkou .infoRow {
display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 16px;
}

.ppv-jinkou .pillarBox {
border: 0.5px solid var(--zd-line);
  opacity: 0.8;
  display: inline-grid;
  grid-template-columns: repeat(4, auto);
  padding: 4px 16px;
  column-gap: 16px;
  row-gap: 4px;
  text-align: center;
}

.ppv-jinkou .pillarHead {
font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.6);
}

.ppv-jinkou .pillarChar {
font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
}

.ppv-jinkou .metaCol {
height: 75px;
  border-radius: 10px;
  padding: 4px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.ppv-jinkou .metaCol p {
margin: 0;
  font-family: var(--zd-font-sans);
  font-size: 12px;
  line-height: 15px;
  color: var(--zd-text);
  text-align: center;
  white-space: pre;
}

.ppv-jinkou .metaCol p.metaKongwang {
font-size: 13px;
  color: var(--zd-muted);
}

.ppv-jinkou .positionsRow {
display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 28px;
  padding: 0 16px;
}

.ppv-jinkou .positionsLeft {
display: flex;
  gap: 24px;
  align-items: flex-start;
  font-size: 14px;
}

.ppv-jinkou .posLabelCol {
display: flex;
  flex-direction: column;
  gap: 8px;
  width: 28px;
  text-align: right;
}

.ppv-jinkou .posLabelCol span {
height: 20px;
  line-height: 20px;
  font-family: var(--zd-font-serif);
  font-weight: 400;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-jinkou .posValueCol {
display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 69px;
}

.ppv-jinkou .posValueCol p {
margin: 0;
  height: 20px;
  line-height: 20px;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-jinkou .positionsRight {
display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ppv-jinkou .posElementCol {
display: flex;
  flex-direction: column;
  gap: 8px;
  width: 14px;
  text-align: right;
  font-size: 14px;
}

.ppv-jinkou .posElementCol span {
height: 20px;
  line-height: 20px;
  font-family: var(--zd-font-serif);
  font-weight: 400;
  white-space: nowrap;
}

.ppv-jinkou .posStatusCol {
display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 66px;
}

.ppv-jinkou .posStatusRow {
display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
}

.ppv-jinkou .yinyangIcon {
display: block;
  width: 11px;
  height: 10px;
  flex: none;
  color: var(--zd-text);
}

.ppv-jinkou .posStatusRow p {
margin: 0;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--zd-text);
  white-space: nowrap;
}

.ppv-jinkou .shenshaCard {
margin-top: 28px;
  background: var(--zd-surface);
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  padding: 12.8px 16.8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ppv-jinkou .shenshaSection {
display: flex;
  flex-direction: column;
}

.ppv-jinkou .shenshaTitle {
margin: 0;
  height: 21px;
  line-height: 21px;
  font-family: var(--zd-font-serif);
  font-size: 16px;
  font-weight: 500;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-jinkou .shenshaLine {
height: 0.5px;
  background: var(--zd-line);
  margin-bottom: 8px;
}

.ppv-jinkou .shenshaTags {
display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 4px;
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--zd-text);
}

.ppv-jinkou .shenshaTags span {
white-space: nowrap;
}

.ppv-jinkou .shenshaEmpty {
color: rgba(0, 0, 0, 0.45);
}

.ppv-jinkou .shenShaItem {
display: inline-flex;
  align-items: baseline;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.ppv-jinkou .shenShaItem:active {
opacity: 0.72;
}

.ppv-jinkou .selected {
border-radius: 4px;
  background: rgba(255, 219, 206, 0.7);
  box-shadow: 0 0 0 1px var(--zd-accent);
}

.ppv-jinkou .chipRow {
display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 8px 16px 0;
}

.ppv-jinkou .chipScroll {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 13px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-jinkou .chipScroll::-webkit-scrollbar {
display: none;
}

.ppv-jinkou .switchChip {
display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 28px;
  padding: 5px 8px;
  border: 0.8px solid var(--zd-line);
  border-radius: 8px;
  background: transparent;
  font-family: var(--zd-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-jinkou .switchChip:disabled {
opacity: 0.55;
}

.ppv-jinkou .composerDock {
flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px calc(16px + var(--zd-safe-bottom));
}

.ppv-jinkou .composer {
flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 0.5px solid var(--zd-line);
  border-radius: var(--zd-radius-pill);
  background: var(--zd-surface);
  box-shadow: var(--zd-shadow-pill);
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}

.ppv-jinkou .composerPlus {
display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--zd-bg);
  color: var(--zd-accent);
  font-size: 18px;
  line-height: 1;
}

.ppv-jinkou .embedded {
height: 100%;
}

.ppv-jinkou .embedded .body {
padding-bottom: 24px;
}

.ppv-jinkou .selectionBar {
display: flex;
  align-items: center;
  gap: 10px;
}

.ppv-jinkou .selectionChips {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ppv-jinkou .selectionChips::-webkit-scrollbar {
display: none;
}

.ppv-jinkou .selectionChip {
display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 0.8px solid var(--zd-accent);
  border-radius: 8px;
  background: rgba(255, 219, 206, 0.35);
  font-family: var(--zd-font-sans);
  font-size: 13px;
  line-height: normal;
  color: #0a0a0a;
}

.ppv-jinkou .selectionChipText {
font-weight: 500;
  white-space: nowrap;
}

.ppv-jinkou .selectionChipRemove {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--zd-accent);
  font-size: 15px;
  line-height: 1;
}

.ppv-jinkou .composerIcon {
flex: none;
  width: 24px;
  height: 24px;
}

.ppv-jinkou .composerPlaceholder {
flex: 1;
  min-width: 0;
  color: #afafaf;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 搬自 src/h5/components/LiurenGestureReveal.module.css（作用域 .ppr-jinkou） ── */
.ppr-jinkou .overlay {
position: absolute;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: auto;
  background: var(--zd-bg, #faf9f5);
}

.ppr-jinkou .stage {
position: absolute;
  left: 50%;
  top: 50%;
  width: min(32vw, 140px);
  height: min(32vw, 140px);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

.ppr-jinkou .gesture {
position: absolute;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 120ms linear;
  will-change: opacity;
}

.ppr-jinkou .gestureActive {
opacity: 1;
}

.ppr-jinkou .caption {
position: absolute;
  left: 50%;
  top: 74.5%;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transform: translateX(-50%);
  color: var(--zd-muted, #8f6f4c);
  font-family: var(--zd-font-serif, serif);
  font-size: 14px;
  letter-spacing: 5px;
  white-space: nowrap;
}

.ppr-jinkou .caption i {
width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: ppr-jinkou-dotPulse 960ms ease-in-out infinite;
}

.ppr-jinkou .caption i:nth-child(3) {
animation-delay: 160ms;
}

.ppr-jinkou .caption i:nth-child(4) {
animation-delay: 320ms;
}

.ppr-jinkou .closing {
animation: ppr-jinkou-revealOut 520ms ease forwards;
}

@keyframes ppr-jinkou-dotPulse {
  0%,
  100% {
    opacity: 0.24;
  }

  35% {
    opacity: 1;
  }
}

@keyframes ppr-jinkou-revealOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
.ppr-jinkou .caption i {
animation: none;
}

.ppr-jinkou .gesture {
transition: opacity 180ms ease;
}

.ppr-jinkou .closing {
animation-duration: 220ms;
    filter: none;
}
}

/* ── 搬自 src/h5/routes/BaziAiSplitPage.module.css（作用域 .ppv-split，按类名挑选） ── */
.ppv-split .split {
position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--zd-bg);
  overflow: hidden;
  
  padding-top: var(--zd-safe-top);
}

.ppv-split .panes {
flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ppv-split .split.horizontal .panes {
position: relative;
  flex-direction: row;
}

.ppv-split .split.dragging {
user-select: none;
}

.ppv-split .split.dragging .topPane,
.ppv-split .split.dragging .bottomPane {
pointer-events: none;
}

.ppv-split .topPane {
position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.ppv-split .split.horizontal .topPane {
min-width: 40%;
}

.ppv-split .divider {
position: relative;
  flex: 0 0 auto;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zd-bg);
  border-top: 1px solid var(--zd-line);
  border-bottom: 1px solid var(--zd-line);
  touch-action: none;
  z-index: 5;
}

.ppv-split .dividerHandle {
width: 44px;
  height: 4px;
  border-radius: 100px;
  background: var(--zd-line);
}

.ppv-split .split.horizontal .divider {
width: 14px;
  height: auto;
  border-top: none;
  border-bottom: none;
  border-left: 1px solid var(--zd-line);
  border-right: 1px solid var(--zd-line);
}

.ppv-split .split.horizontal .dividerHandle {
width: 4px;
  height: 44px;
}

.ppv-split .divider:focus-visible {
outline: 2px solid var(--zd-accent);
  outline-offset: -2px;
}

.ppv-split .bottomPane {
position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--zd-bg);
  transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppv-split .split.horizontal .bottomPane {
min-width: var(--zd-desktop-ai-min-w, 360px);
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppv-split .split.horizontal .bottomPaneCollapsed {
position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  min-width: 0;
  height: max-content;
  min-height: 0;
  z-index: 6;
  transition: none;
}

.ppv-split .split.dragging .bottomPane {
transition: none;
}

@media (prefers-reduced-motion: reduce) {
.ppv-split .bottomPane {
transition: none;
}

.ppv-split .split.overlay,
.ppv-split .split.closing {
animation: none;
}
}

.ppv-split .split.overlay {
position: absolute;
  inset: 0;
  z-index: 30;
  animation: ppv-split-splitSlideUp 260ms cubic-bezier(0.22, 1, 0.36, 1);
  
  padding-bottom: var(--zd-keyboard-h);
}

.ppv-split .split.closing {
animation: ppv-split-splitSlideDown 220ms cubic-bezier(0.64, 0, 0.78, 0) forwards;
  pointer-events: none;
}

@keyframes ppv-split-splitSlideUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes ppv-split-splitSlideDown {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

/* ── 搬自 src/h5/routes/AskAiPage.module.css（作用域 .ppv-askai，按类名挑选） ── */
.ppv-askai .page {
position: relative;
  min-height: 100%;
  background: var(--zd-bg);
  color: var(--zd-text);
  overflow: hidden;
  
  padding-top: var(--zd-safe-top);
}

.ppv-askai .embedded {
position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: none;
  
  padding-top: 0;
  
  padding-bottom: var(--zd-keyboard-h);
}

.ppv-askai .embeddedScrollBody {
flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.ppv-askai .embedded.collapsed .embeddedScrollBody {
display: none;
}

.ppv-askai .embedded .header {
flex: none;
}

.ppv-askai .embedded .intro {
position: relative;
  left: auto;
  right: auto;
  top: auto;
  flex: none;
  padding: 12px 16px 0;
}

.ppv-askai .embedded .prompts {
position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  flex: none;
  flex-shrink: 0;
  padding: 0 16px 4px;
}

.ppv-askai .embedded .conversation {
position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  min-height: 0;
  
  padding: 18px 16px 16px;
}

.ppv-askai .embeddedScrollBody .conversation:not(.conversationFull) {
flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
}

.ppv-askai .embeddedScrollBody .conversation.conversationFull {
flex: 1 1 auto;
  overflow-y: auto;
}

.ppv-askai .embedded .composer {
position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  margin: 8px 12px 12px;
  flex: none;
  flex-shrink: 0;
  z-index: 3;
}

.ppv-askai .embedded.collapsed .conversation {
display: none;
}

.ppv-askai .embedded.collapsed {
justify-content: flex-end;
  height: auto;
}

.ppv-askai .dualToolbar {
flex: none;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--zd-bg);
}

.ppv-askai .dualToolbarButton {
width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--zd-text);
}

.ppv-askai .dualToolbarButton img {
width: 22px;
  height: 22px;
}

.ppv-askai .disclaimer {
flex: none;
  margin: 0;
  padding: 2px 12px 8px;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  
  color: #b49f87;
}

.ppv-askai .page:not(.embedded) .disclaimer {
position: absolute;
  left: 0;
  right: 0;
  bottom: calc(12px + var(--zd-safe-bottom));
  padding: 0 16px;
}

.ppv-askai .selectionBar {
display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 4px 12px 0;
}

.ppv-askai .selectionChips {
display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
}

.ppv-askai .selectionChips::-webkit-scrollbar {
display: none;
}

.ppv-askai .selectionChip {
display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--zd-accent);
  border-radius: 8px;
  background: rgba(236, 99, 31, 0.08);
  font-family: var(--zd-font-sans);
  font-size: 13px;
  line-height: normal;
  color: var(--zd-accent);
  white-space: nowrap;
}

.ppv-askai .selectionChipText {
font-weight: 500;
}

.ppv-askai .selectionChipRemove {
display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--zd-accent);
  font-size: 15px;
  line-height: 1;
}

.ppv-askai .suggestionsLoading .thinkingRing {
width: 14px;
  height: 14px;
}

.ppv-askai .conversation {
position: absolute;
  left: 20px;
  right: 20px;
  top: 240px;
  bottom: 130px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  overflow-y: auto;
  
  scroll-behavior: auto;
}

.ppv-askai .conversationFull {
top: 86px;
  bottom: 96px;
  padding-top: 18px;
  padding-bottom: 22px;
}

.ppv-askai .userBubble {
min-height: 44px;
  max-width: 286px;
  display: flex;
  align-items: center;
  padding: 8px 14px;

  
  border-radius: 8px 8px 0 8px;
  background: #f0e6dc;
  color: var(--zd-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
}

.ppv-askai .userRow {
align-self: flex-end;
  max-width: 286px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.ppv-askai .hasQuestionRail:not(.desktopEmbedded) .conversation {
padding-right: 36px;
}

.ppv-askai .bubbleSelection {
max-width: 286px;
  padding: 0 4px;
  font-family: var(--zd-font-sans);
  font-size: 11px;
  line-height: 15px;
  color: var(--zd-muted);
  text-align: right;
  word-break: break-word;
}

.ppv-askai .aiBlock {
align-self: flex-start;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.ppv-askai .steps {
display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
  width: 100%;
}

.ppv-askai .stepsToggle {
display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--zd-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.ppv-askai .stepsToggleChevron {
display: inline-block;
  font-size: 15px;
  line-height: 1;
  
  transform: rotate(90deg);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppv-askai .stepsToggleOpen .stepsToggleChevron {
transform: rotate(-90deg);
}

.ppv-askai .stepsList {
display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  margin-left: 7px;
  padding-left: 13px;
  border-left: 2px solid var(--zd-line);
}

.ppv-askai .stepRow {
display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  animation: ppv-askai-stepIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ppv-askai-stepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ppv-askai .stepIcon {
position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(190, 160, 120, 0.35);
  border-top-color: var(--zd-accent);
  animation: ppv-askai-stepSpin 900ms linear infinite;
}

@keyframes ppv-askai-stepSpin {
  to {
    transform: rotate(360deg);
  }
}

.ppv-askai .stepText {
font-size: 13px;
  font-weight: 500;
  color: var(--zd-muted);
  background: linear-gradient(
    90deg,
    var(--zd-muted) 0%,
    var(--zd-accent) 50%,
    var(--zd-muted) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ppv-askai-stepShimmer 1.8s linear infinite;
}

@keyframes ppv-askai-stepShimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.ppv-askai .stepDone .stepIcon {
border: none;
  background: none;
  animation: none;
}

.ppv-askai .stepDone .stepIcon::after {
content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--zd-accent);
  border-bottom: 2px solid var(--zd-accent);
  transform: rotate(45deg);
}

.ppv-askai .stepDone .stepText {
background: none;
  -webkit-text-fill-color: currentcolor;
  color: var(--zd-muted);
  animation: none;
}

.ppv-askai .stepPlain .stepIcon {
border: none;
  background: none;
  animation: none;
}

.ppv-askai .stepPlain .stepIcon::after {
content: none;
}

.ppv-askai .stepPlain .stepText {
background: none;
  -webkit-text-fill-color: currentcolor;
  color: var(--zd-muted);
  animation: none;
}

.ppv-askai .stepFailed .stepIcon {
border: none;
  background: none;
  animation: none;
}

.ppv-askai .stepFailed .stepIcon::after {
content: '×';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #c0392b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.ppv-askai .stepFailed .stepText {
background: none;
  -webkit-text-fill-color: currentcolor;
  color: #c0392b;
  animation: none;
}

.ppv-askai .thinking {
display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--zd-muted);
  font-size: 13px;
  font-weight: 500;
}

.ppv-askai .thinkingRing {
width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 40deg, var(--zd-accent) 320deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.4px));
  animation: ppv-askai-stepSpin 860ms linear infinite;
}

.ppv-askai .aiBubble {
width: 100%;
  color: var(--zd-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  text-align: left;
  word-break: break-word;
}

.ppv-askai .aiBubble p,
.ppv-askai .aiBubble ul,
.ppv-askai .aiBubble ol,
.ppv-askai .aiBubble blockquote,
.ppv-askai .aiBubble pre,
.ppv-askai .aiBubble table {
margin: 0 0 10px;
}

.ppv-askai .aiBubble > :last-child {
margin-bottom: 0;
}

.ppv-askai .aiBubble h1,
.ppv-askai .aiBubble h2,
.ppv-askai .aiBubble h3,
.ppv-askai .aiBubble h4,
.ppv-askai .aiBubble h5,
.ppv-askai .aiBubble h6 {
margin: 14px 0 8px;
  font-weight: 600;
  line-height: 1.5;
}

.ppv-askai .aiBubble > :first-child {
margin-top: 0;
}

.ppv-askai .aiBubble h1 {
font-size: 19px;
}

.ppv-askai .aiBubble h2 {
font-size: 18px;
}

.ppv-askai .aiBubble h3,
.ppv-askai .aiBubble h4,
.ppv-askai .aiBubble h5,
.ppv-askai .aiBubble h6 {
font-size: 17px;
}

.ppv-askai .aiBubble strong {
font-weight: 600;
}

.ppv-askai .aiBubble ul,
.ppv-askai .aiBubble ol {
padding-left: 1.5em;
}

.ppv-askai .aiBubble li {
margin: 2px 0;
}

.ppv-askai .aiBubble li::marker {
color: var(--zd-muted);
}

.ppv-askai .aiBubble a {
color: var(--zd-accent);
  text-decoration: underline;
  text-underline-position: from-font;
}

.ppv-askai .aiBubble code {
padding: 1px 5px;
  border-radius: 4px;
  background: rgba(190, 160, 120, 0.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.ppv-askai .aiBubble pre {
padding: 10px 12px;
  border-radius: 8px;
  background: rgba(40, 36, 30, 0.06);
  overflow-x: auto;
}

.ppv-askai .aiBubble pre code {
padding: 0;
  border-radius: 0;
  background: none;
}

.ppv-askai .aiBubble blockquote {
padding: 2px 0 2px 10px;
  border-left: 2px solid rgba(190, 160, 120, 0.55);
  color: var(--zd-muted);
}

.ppv-askai .aiBubble hr {
margin: 12px 0;
  border: none;
  height: 1px;
  background: var(--zd-line);
  opacity: 0.4;
}

.ppv-askai .aiBubble table {
display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 13px;
}

.ppv-askai .aiBubble th,
.ppv-askai .aiBubble td {
padding: 5px 10px;
  border: 1px solid rgba(190, 160, 120, 0.35);
  text-align: left;
}

.ppv-askai .aiBubble th {
background: rgba(240, 230, 220, 0.55);
  font-weight: 600;
}

.ppv-askai .tokenFade {
animation: ppv-askai-tokenFade 0.4s ease-out forwards;
}

@keyframes ppv-askai-tokenFade {
  0% {
    opacity: 0;
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

@media (prefers-reduced-motion: reduce) {
.ppv-askai .tokenFade {
animation: none;
}
}

.ppv-askai .embedded .quotaBanner {
position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0 12px 8px;
  border-radius: 12px;
  border: 1px solid rgba(214, 69, 65, 0.18);
}

.ppv-askai .composer {
position: absolute;
  left: 21px;
  right: 21px;
  
  bottom: calc(34px + var(--zd-safe-bottom));
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr 24px;
  
  align-items: end;
  column-gap: 12px;
  
  padding: 10px 12px;
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  box-shadow: 0 6px 40px rgba(0, 0, 0, 0.12);
}

.ppv-askai .composerInput {
min-width: 0;
  width: 100%;
  
  height: 20px;
  max-height: 60px;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--zd-text);
  font-family: var(--zd-font-sans);
  font-size: 14px;
  line-height: 20px;
  resize: none;
  overflow-y: hidden;
  
  align-self: stretch;
}

.ppv-askai .composerInput::placeholder {
color: #afafaf;
}

.ppv-askai .iconButton {
width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
}

.ppv-askai .iconButton img {
width: 24px;
  height: 24px;
}

.ppv-askai .iconButton svg {
width: 24px;
  height: 24px;
  display: block;
}

.ppv-askai .sendButton {
color: #afafaf;
}

.ppv-askai .sendButtonActive {
color: #0a0a0a;
}

.ppv-askai .emptyHint {
width: 100%;
  margin: 0;
  color: var(--zd-muted);
  font-family: var(--zd-font-serif);
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}

.ppv-askai .desktopEmbedded .intro,
.ppv-askai .desktopEmbedded .conversation,
.ppv-askai .desktopEmbedded .conversationEmpty,
.ppv-askai .desktopEmbedded .chipRow,
.ppv-askai .desktopEmbedded .selectionBar,
.ppv-askai .desktopEmbedded .prompts,
.ppv-askai .desktopEmbedded .disclaimer {
padding-left: 0;
  padding-right: 0;
}

.ppv-askai .desktopEmbedded .composer {
margin-left: 0;
  margin-right: 0;
}

.ppv-askai .desktopEmbedded .dualToolbar {
padding-left: 0;
  padding-right: 0;
}