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

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

/*
 * 令牌挂在 .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="keChuanRow zdHairline"`，规则照抄
 * src/shared/styles/global.css，一个字节没改。
 *
 * 原理：叠一层 1.6px 边框的伪元素再整体 scale(.5) 压成 0.8px，绕开 0.5px 在低 DPR 上被
 * 取整回 1px 的问题。
 */
.ppz .zdHairline {
  position: relative;
  border: none;
  overflow: hidden;
}

.ppz .zdHairline::after {
  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;
}

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

/*
 * 整页排盘。
 *
 * 不画外框：浮层本身已经是一块托起来的面，再套一圈边就成了「框里的框」。这里只铺应用的
 * 纸面底色，页眉与正文直接落在上面——看到的就是那一页，不是那一页的截图。
 *
 * 宽度随容器走而不是钉死 362px（应用的内容宽）：浮层在宽屏上有 30rem，钉死会在两边
 * 留下空边。九门的盘面因此必须是流式的——栅格用 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;
}

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

/* 五行配色。应用里是按字符查表写进 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); }

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

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

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

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

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

.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/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 .palaceGrid:has([data-gloss]) {
grid-template-columns: minmax(0, 1fr);
}

.ppv-bazi .palaceGrid:has([data-gloss]) .palaceItem {
flex-wrap: wrap;
  align-items: baseline;
}

.ppv-bazi .palaceReading {
margin-left: 3px;
  font-size: 0.72em;
  color: var(--zd-muted);
}

.ppv-bazi .palaceGrid:has([data-gloss]) .palaceNayin {
margin-left: 6px;
}

.ppv-bazi .palaceGrid:has([data-gloss]) .palaceLabel {
margin-right: 4px;
}

.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;
  line-height: 1.15;
  color: #0a0a0a;
  text-align: center;
  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;
  min-width: 0;
  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 .hiddenCell:has([data-gloss]) {
gap: 6px;
  padding: 4px 0 8px;
}

.ppv-bazi .hiddenItem:has([data-gloss]) {
display: flow-root;
  width: 100%;
  padding: 1px 2px;
  text-align: right;
  white-space: normal;
}

.ppv-bazi .hiddenItem:has([data-gloss]) .hiddenStem {
float: left;
  margin-right: 2px;
}

.ppv-bazi .hiddenItem:has([data-gloss]) .hiddenGod {
display: block;
}

.ppv-bazi .hiddenGod [data-gloss] {
display: contents;
}

.ppv-bazi .hiddenGod [data-gloss] > * {
display: block;
  
  overflow-wrap: normal;
  word-break: normal;
}

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

.ppv-bazi html:not([lang^='zh']) .shenshaCells {
grid-template-rows: repeat(var(--ss-rows, 1), auto);
  row-gap: 2px;
}

.ppv-bazi html:not([lang^='zh']) .shenshaCells .cellWrap {
grid-row: 1 / span var(--ss-rows, 1);
  display: grid;
  grid-template-rows: subgrid;
  justify-items: center;
  align-items: start;
  padding-top: 6px;
  padding-bottom: 6px;
}

.ppv-bazi html:not([lang^='zh']) .shenshaCell {
display: contents;
}

.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 html:not([lang^='zh']) .shenshaToggleSmall {
flex-direction: column;
  gap: 3px;
  max-width: 100%;
  padding: 2px 0;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.ppv-bazi html:not([lang^='zh']) .shenshaHeadLabel {
align-self: flex-start;
  padding-left: 8px;
}

.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 html:not([lang^='zh']) .cellWrap:has(> .textCell [data-gloss]),
.ppv-bazi html:not([lang^='zh']) .row:has(.textCell [data-gloss]) .cellWrap:has(> .dayMasterTag) {
align-items: stretch;
}

.ppv-bazi html:not([lang^='zh']) .textCell:has([data-gloss]) {
justify-content: flex-start;
}

.ppv-bazi html:not([lang^='zh']) .row:has(.textCell [data-gloss]) .dayMasterTag {
padding-top: 3px;
}

.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 .noteGz {
white-space: nowrap;
}

.ppv-bazi .noteReading {
margin-left: 3px;
  font-size: 11px;
  opacity: 0.85;
}

.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;
}

.ppv-bazi .gzGloss {
display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -2px;
  font-family: var(--zd-font-sans);
  font-size: 8px;
  font-weight: 400;
  line-height: 10px;
  white-space: nowrap;
  opacity: 0.85;
}

/* ── 搬自 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: 400;
  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/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/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 html:not([lang^='zh']:not([lang='ja']):not([lang='ko'])) .scopeModeBar {
grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.ppv-ziwei html:not([lang^='zh']:not([lang='ja']):not([lang='ko'])) .scopeModeBtn {
font-size: clamp(7px, 2.2vw, 9px);
  line-height: 12px;
  padding: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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);
}

.ppv-ziwei .plateGloss {
aspect-ratio: auto;
  grid-template-rows: repeat(4, auto);
}

.ppv-ziwei .plateGloss .palace {
display: flex;
  flex-direction: column;
  min-height: 150px;
}

.ppv-ziwei .plateGloss .palaceStars {
position: static;
  order: 0;
  padding: 3px 3px 4px;
  gap: 3px 5px;
}

.ppv-ziwei .plateGloss .horoscopeTagGrid {
position: static;
  order: 1;
  transform: none;
  padding: 0 3px 2px;
}

.ppv-ziwei .plateGloss .palaceBadges {
position: static;
  order: 2;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  padding: 0 3px 2px;
}

.ppv-ziwei .plateGloss .soulBadge,
.ppv-ziwei .plateGloss .bodyBadge,
.ppv-ziwei .plateGloss .originBadge {
writing-mode: horizontal-tb;
  min-height: 0;
  padding: 1px 3px;
}

.ppv-ziwei .plateGloss .palaceFooter {
position: static;
  order: 3;
  margin-top: auto;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2px;
  padding: 0 3px 3px;
}

.ppv-ziwei .plateGloss .palaceMetaColumn,
.ppv-ziwei .plateGloss .palaceCorner {
position: static;
}

.ppv-ziwei .plateGloss .palaceGz {
flex-direction: row;
  gap: 2px;
}

.ppv-ziwei .starGlossed {
display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  border-radius: 3px;
}

.ppv-ziwei .starGlossedHan {
display: flex;
  align-items: baseline;
  gap: 1px;
  white-space: nowrap;
}

.ppv-ziwei .starGlossedName {
font-size: 10px;
  line-height: 12px;
}

.ppv-ziwei .starGlossedText {
font-size: 6px;
  line-height: 7px;
  color: #8f6f4c;
  white-space: normal;
}

.ppv-ziwei .plateGloss .palaceFooter {
flex-wrap: wrap;
}

.ppv-ziwei .plateGloss .palaceCorner {
margin-left: auto;
}

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

.ppv-ziwei .plateGloss .centerSihua {
flex-wrap: wrap;
  white-space: normal;
  row-gap: 0;
}

.ppv-ziwei html:not([data-layout-mode='desktop']) .sheetOverlay {
align-items: flex-end;
  padding: calc(var(--zd-modal-gutter-y) + var(--zd-safe-top)) 0 0;
}

.ppv-ziwei html:not([data-layout-mode='desktop']) .sheetPanel {
border-radius: 16px 16px 0 0;
  height: min(72dvh, 100%);
  max-height: none;
  padding-bottom: calc(20px + var(--zd-safe-bottom));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
}

.ppv-ziwei html:not([data-layout-mode='desktop']) .sheetPanelIn {
animation: ppv-ziwei-sheet-slide-up 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppv-ziwei html:not([data-layout-mode='desktop']) .sheetPanelLeaving {
animation: ppv-ziwei-sheet-slide-down 240ms ease-in forwards;
}

@keyframes ppv-ziwei-sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes ppv-ziwei-sheet-slide-down {
  from { transform: translateY(var(--sheet-drag, 0px)); }
  to { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
.ppv-ziwei html:not([data-layout-mode='desktop']) .sheetPanelIn,
.ppv-ziwei html:not([data-layout-mode='desktop']) .sheetPanelLeaving {
animation: none;
}
}

/* ── 搬自 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/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 .pillarStemDay:has([data-gloss])::after,
.ppv-qimen .pillarStemHour:has([data-gloss])::after {
bottom: -3px;
  height: 1px;
}

.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: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  row-gap: 4px;
}

.ppv-qimen .centerTop,
.ppv-qimen .centerBottom {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  min-width: 0;
}

.ppv-qimen .centerTop {
align-self: end;
}

.ppv-qimen .centerBottom {
align-self: start;
}

.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 .cellFoot {
display: contents;
}

.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 .legendGanBox small,
.ppv-qimen .legendChip small {
margin-top: 1px;
  line-height: 8px;
}

.ppv-qimen .legendGanBox:has([data-gloss]) .legendGanDivider {
align-self: stretch;
  height: auto;
}

.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 .sheetSymbolItem {
display: block;
}

.ppv-qimen .sheetComboGloss {
margin-left: 0.6em;
  font-family: var(--zd-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--zd-muted);
}

.ppv-qimen .sheetSectionSymbolLine [data-gloss] > small {
white-space: normal;
}

.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 .sheetSectionClampTall {
display: -webkit-box;
  -webkit-line-clamp: 5;
  -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 .strengthBadgeRow {
display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ppv-qimen .strengthBadge {
gap: 5px;
}

.ppv-qimen .strengthBadgeName {
font-weight: 600;
}

.ppv-qimen .strengthStrong {
color: var(--zd-accent);
  background: rgba(236, 99, 31, 0.1);
  border-color: rgba(236, 99, 31, 0.4);
}

.ppv-qimen .strengthMid {
color: #595959;
  background: rgba(89, 89, 89, 0.08);
  border-color: rgba(89, 89, 89, 0.35);
}

.ppv-qimen .strengthWeak {
color: #8c8c8c;
  background: rgba(140, 140, 140, 0.08);
  border-color: rgba(140, 140, 140, 0.35);
}

.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, var(--zd-safe-bottom, 0px));
}

.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 .bwStemCircle:has(small) {
width: auto;
  min-width: 21px;
  height: auto;
  padding: 3px 2px 2px;
  border-radius: 11px;
}

.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;
}

.ppv-qimen .nineGridWrapGloss .nineGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: auto;
  aspect-ratio: auto;
}

.ppv-qimen .nineGridWrapGloss .cell:not(.centerCell) {
display: grid;
  
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'marks gan gan gan'
    'core core core core'
    'foot foot foot foot';
  gap: 1px 3px;
  min-width: 0;
  padding: 3px;
}

.ppv-qimen .nineGridWrapGloss .cell:not(.centerCell)::before {
content: '';
  grid-area: 1 / 1 / -1 / -1;
  padding-top: 100%;
  pointer-events: none;
}

.ppv-qimen .nineGridWrapGloss .cellMarks {
position: static;
  grid-area: marks;
  align-self: start;
  flex-direction: row;
  gap: 2px;
}

.ppv-qimen .nineGridWrapGloss .markLetter {
width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
}

.ppv-qimen .nineGridWrapGloss .cellGanBox {
position: static;
  grid-area: gan;
  align-self: start;
  justify-self: end;
  max-width: 100%;
  gap: 2px;
  padding: 1px 2px;
  font-size: 10px;
  line-height: 12px;
}

.ppv-qimen .nineGridWrapGloss .cellGanDivider {
align-self: stretch;
  height: auto;
}

.ppv-qimen .nineGridWrapGloss .cellCore {
position: static;
  grid-area: core;
  align-self: center;
  justify-self: start;
  align-items: flex-start;
  transform: none;
  gap: 1px;
  max-width: 100%;
  min-width: 0;
}

.ppv-qimen .nineGridWrapGloss .cellGod,
.ppv-qimen .nineGridWrapGloss .cellStar,
.ppv-qimen .nineGridWrapGloss .cellDoor {
max-width: 100%;
  white-space: normal;
}

.ppv-qimen .nineGridWrapGloss .cellGod {
font-size: 12px; line-height: 14px;
}

.ppv-qimen .nineGridWrapGloss .cellStar {
font-size: 13px; line-height: 15px;
}

.ppv-qimen .nineGridWrapGloss .cellDoor {
font-size: 15px; line-height: 17px;
}

.ppv-qimen .nineGridWrapGloss .cellCore small {
white-space: normal;
  line-height: 1.15;
  text-align: left;
}

.ppv-qimen .nineGridWrapGloss .cellFoot {
grid-area: foot;
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) auto auto;
  grid-template-rows: auto auto;
  min-width: 0;
}

.ppv-qimen .nineGridWrapGloss .cellFoot::before {
content: '';
  grid-row: 1;
  grid-column: 1;
  width: 18px;
}

.ppv-qimen .nineGridWrapGloss .cellGua {
position: static;
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  align-self: end;
  justify-self: start;
  min-width: 0;
  margin-right: 4px;
  line-height: 15px;
}

.ppv-qimen .nineGridWrapGloss .cellFootEarthPair .cellGua {
grid-column: 1;
}

.ppv-qimen .nineGridWrapGloss .cellGua [data-gloss],
.ppv-qimen .nineGridWrapGloss .cellStems [data-gloss] {
flex-wrap: wrap;
  row-gap: 0;
}

.ppv-qimen .nineGridWrapGloss .cellStems {
position: static;
  grid-row: 1 / 3;
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  
  justify-items: start;
  font-size: 13px;
  line-height: 14px;
}

.ppv-qimen .nineGridWrapGloss .cellStemsCompact {
font-size: 12px;
  line-height: 13px;
}

.ppv-qimen .nineGridWrapGloss .cellHeavenRow,
.ppv-qimen .nineGridWrapGloss .cellEarthRow {
grid-column: 2;
  display: flex;
}

.ppv-qimen .nineGridWrapGloss .cellHeavenRow {
grid-row: 1;
  align-self: end;
}

.ppv-qimen .nineGridWrapGloss .cellEarthRow {
grid-row: 2;
  align-self: end;
}

.ppv-qimen .nineGridWrapGloss .cellStemPair {
grid-column: 1 / 3;
  display: grid;
  grid-template-columns: subgrid;
  justify-items: start;
  gap: 0;
}

.ppv-qimen .nineGridWrapGloss .cellStemPair > :first-child {
margin-right: 4px;
}

.ppv-qimen .nineGridWrapGloss .centerCell {
padding: 6px 4px;
  
  container-type: inline-size;
}

.ppv-qimen .nineGridWrapGloss .ringCol {
width: 36px;
}

.ppv-qimen .nineGridWrapGloss .ringRow {
padding: 0 38px;
  align-items: start;
}

.ppv-qimen .nineGridWrapGloss .ringCell {
align-items: flex-start;
  padding: 2px 0;
}

.ppv-qimen .nineGridWrapGloss .ringCellV {
align-items: center;
  justify-content: center;
  gap: 3px;
}

.ppv-qimen .nineGridWrapGloss .ringChip {
padding: 2px 3px;
  white-space: normal;
}

.ppv-qimen .nineGridWrapGloss .ringCellV .ringChip {
max-width: 36px;
}

.ppv-qimen .nineGridWrapGloss .ringChip {
flex-shrink: 0;
  overflow: visible;
}

.ppv-qimen .nineGridWrapGloss .centerLine {
font-size: min(11px, 13cqi);
  line-height: 13px;
  text-align: center;
  white-space: nowrap;
}

.ppv-qimen html:not([data-layout-mode='desktop']) .sheetOverlay {
align-items: flex-end;
  padding: calc(var(--zd-modal-gutter-y) + var(--zd-safe-top)) 0 0;
}

.ppv-qimen html:not([data-layout-mode='desktop']) .sheetPanel {
border-radius: 16px 16px 0 0;
  height: min(72dvh, 100%);
  max-height: none;
  padding-bottom: calc(20px + var(--zd-safe-bottom));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
}

.ppv-qimen html:not([data-layout-mode='desktop']) .sheetPanelIn {
animation: ppv-qimen-sheet-slide-up 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppv-qimen html:not([data-layout-mode='desktop']) .sheetPanelLeaving {
animation: ppv-qimen-sheet-slide-down 240ms ease-in forwards;
}

@keyframes ppv-qimen-sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes ppv-qimen-sheet-slide-down {
  from { transform: translateY(var(--sheet-drag, 0px)); }
  to { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
.ppv-qimen html:not([data-layout-mode='desktop']) .sheetPanelIn,
.ppv-qimen html:not([data-layout-mode='desktop']) .sheetPanelLeaving {
animation: none;
}
}

/* ── 搬自 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/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 .shenShaListGloss {
grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 10px;
}

.ppv-liuren .shenShaListGloss > span {
min-width: 0;
}

.ppv-liuren .shenShaListGloss .shenShaItem {
display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-width: 0;
  text-align: left;
  white-space: normal;
}

.ppv-liuren .shenShaItemHan {
white-space: nowrap;
}

.ppv-liuren .shenShaItemGloss {
display: block;
  max-width: 100%;
  font-family: var(--zd-font-sans);
  font-size: 9px;
  line-height: 1.3;
  color: var(--zd-text-muted, #8a8378);
  overflow-wrap: anywhere;
}

.ppv-liuren .shenShaItemReading {
margin-left: 0.4em;
}

.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 .keChuanRowGloss {
flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 10px 0;
}

.ppv-liuren .keChuanRow.keChuanRowGloss::after {
height: calc(200% - 4px);
}

.ppv-liuren .keChuanRowGloss .sanChuan {
width: 100%;
  flex: none;
  height: auto;
  gap: 6px;
}

.ppv-liuren .keChuanRowGloss .chuanRow {
grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  justify-items: center;
  align-items: start;
  gap: 0 8px;
  height: auto;
  white-space: normal;
}

.ppv-liuren .keChuanRowGloss .chuanRow .relation,
.ppv-liuren .keChuanRowGloss .chuanRow .tianJiang,
.ppv-liuren .keChuanRowGloss .chuanRow .chuanName,
.ppv-liuren .keChuanRowGloss .chuanRow .chuanGz {
align-self: start;
  width: auto;
  max-width: 100%;
  line-height: 20px;
}

.ppv-liuren .keChuanRowGloss .chuanRow [data-gloss] > :first-child,
.ppv-liuren .keChuanRowGloss .keCol [data-gloss] > :first-child {
line-height: 20px;
}

.ppv-liuren .keChuanRowGloss .chuanRow .relation {
font-size: 15px;
}

.ppv-liuren .keChuanRowGloss .chuanRow .tianJiang {
font-size: 14px;
}

.ppv-liuren .keChuanRowGloss .chuanRow .chuanName {
font-size: 14px;
}

.ppv-liuren .keChuanRowGloss .chuanGz {
align-items: flex-start;
  gap: 4px;
}

.ppv-liuren .keChuanRowGloss .dunGan {
font-size: 13px;
}

.ppv-liuren .keChuanRowGloss .siKe {
grid-auto-columns: minmax(0, 1fr);
  height: auto;
  padding: 10px 0 0;
  border-left: none;
  border-top: 0.5px solid #cab49f;
}

.ppv-liuren .keChuanRowGloss .keCol {
justify-content: flex-start;
  height: auto;
  gap: 3px;
}

.ppv-liuren .plateGloss {
aspect-ratio: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(78px, auto));
}

.ppv-liuren .cellKongLetter {
width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
}

.ppv-liuren .plateGloss .cellMingGong {
max-width: 100%;
}

.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 .stage:not([data-ready='true']) {
visibility: hidden;
}

.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/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: stretch;
  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;
  margin-top: auto;
  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 html:not([lang^='zh']) .metaCol p > span {
display: inline-block;
  white-space: nowrap;
}

.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 .clickable .guaHeadSub:has([data-gloss]),
.ppv-liuyao .clickable .derivedGuaName:has([data-gloss]) {
text-decoration: none;
}

.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;
}

.ppv-liuyao .yaoTextGloss {
font-size: 7px;
  line-height: 9px;
  opacity: 0.8;
}

.ppv-liuyao .guaHeadGloss {
max-width: 100%;
  font-family: var(--zd-font-sans);
  font-size: 8px;
  line-height: 10px;
  color: var(--zd-text);
  opacity: 0.8;
  text-align: center;
  white-space: normal;
}

.ppv-liuyao .guaSectionGloss {
--liuyao-fushen-col: 52px;
  display: grid;
  grid-template-columns: 38px var(--liuyao-fushen-col) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto repeat(6, auto);
  grid-auto-flow: column;
  gap: 12px 4px;
  align-items: center;
}

.ppv-liuyao .guaSectionGlossNoFushen {
--liuyao-fushen-col: 18px;
}

.ppv-liuyao .guaSectionGloss .guaCol {
display: contents;
}

.ppv-liuyao .guaSectionGloss .guaHead {
align-self: start;
  max-width: 100%;
  min-height: 0;
}

.ppv-liuyao .guaSectionGloss .guaHeadName,
.ppv-liuyao .guaSectionGloss .guaHeadSub {
max-width: 100%;
  white-space: normal;
  text-align: center;
}

.ppv-liuyao .guaSectionGloss .guaColLiushen > .guaHead,
.ppv-liuyao .guaSectionGloss .guaColFushen > .guaHead {
justify-self: start;
  align-items: flex-start;
}

.ppv-liuyao .guaSectionGloss .guaColFushen > .guaHead {
justify-self: center;
  align-items: center;
}

.ppv-liuyao .guaSectionGlossNoFushen .guaColFushen > .guaHead {
visibility: hidden;
}

.ppv-liuyao .guaSectionGloss .liushenCell,
.ppv-liuyao .guaSectionGloss .fushenCell,
.ppv-liuyao .guaSectionGloss .yaoRow,
.ppv-liuyao .guaSectionGloss .yaoText,
.ppv-liuyao .guaSectionGloss .yaoBars,
.ppv-liuyao .guaSectionGloss .yaoMark,
.ppv-liuyao .guaSectionGloss .yaoDash {
height: auto;
}

.ppv-liuyao .guaSectionGloss .liushenCell {
width: 100%;
  min-height: 28px;
  white-space: normal;
}

.ppv-liuyao .guaSectionGloss .fushenCell {
min-height: 28px;
  min-width: 0;
  gap: 1px;
  text-align: center;
}

.ppv-liuyao .guaSectionGloss .fushenRelation,
.ppv-liuyao .guaSectionGloss .fushenGanzhi {
white-space: nowrap;
}

.ppv-liuyao .guaSectionGloss .fushenGanzhi {
font-size: 10px;
  line-height: 12px;
}

.ppv-liuyao .guaSectionGloss .fushenNayin {
font-size: 8px;
  line-height: 10px;
}

.ppv-liuyao .guaSectionGloss .fushenCell small {
max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ppv-liuyao .guaSectionGloss .yaoRow {
width: 100%;
  min-width: 0;
  min-height: 28px;
  gap: 3px;
}

.ppv-liuyao .guaSectionGloss .yaoText {
flex: 1 1 0;
  min-width: 0;
  gap: 1px;
  white-space: normal;
  text-align: center;
}

.ppv-liuyao .guaSectionGloss .yaoTextMain {
font-size: 11.5px;
}

.ppv-liuyao .guaSectionGloss .yaoTextGloss {
font-size: 6.5px;
  line-height: 8px;
}

.ppv-liuyao .guaSectionGloss .yaoTextNayin {
line-height: 9px;
}

.ppv-liuyao .guaSectionGloss .yaoTextNayin [data-gloss] {
justify-content: center;
}

.ppv-liuyao .guaSectionGloss .yaoTextNayin small {
white-space: normal;
}

.ppv-liuyao .guaSectionGloss .yaoBars {
flex-shrink: 0;
  gap: 5px;
}

.ppv-liuyao .guaSectionGloss .yaoBarYang {
width: clamp(26px, 8.5vw, 36px);
}

.ppv-liuyao .guaSectionGloss .yaoBarYin {
width: calc((clamp(26px, 8.5vw, 36px) - 5px) / 2);
}

.ppv-liuyao .guaSectionGloss .yaoMark {
flex-shrink: 0;
  min-width: 16px;
  align-items: center;
}

.ppv-liuyao .guaSectionGloss .yaoMarkText {
font-size: 9px;
  line-height: 11px;
}

/* ── 搬自 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 .stage:not([data-ready='true']) {
visibility: hidden;
}

.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/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: stretch;
  column-gap: 4px;
  overflow: visible;
}

.ppv-meihua .guaRowStagger {
display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  justify-items: center;
  align-items: stretch;
  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;
  margin-top: auto;
  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 .clickable .guaName:has([data-gloss]) {
text-decoration: none;
}

.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;
}

.ppv-meihua .tiYongMark:has(small) {
left: auto;
  right: calc(100% + 4px);
  width: auto;
  text-align: right;
}

.ppv-meihua .metaCol p:has([data-gloss]) {
white-space: normal;
}

.ppv-meihua .metaCol p.metaTiYongGlossLine {
white-space: normal;
}

.ppv-meihua .metaTiYongGlossLine .metaTiYongItem {
display: inline-block;
  white-space: nowrap;
}

.ppv-meihua .metaTiYongGloss {
margin-left: 0.3em;
  font-size: 0.62em;
  opacity: 0.85;
}

/* ── 搬自 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/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: stretch;
  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;
  margin-top: auto;
  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 .clickable .guaHeadSub:has([data-gloss]),
.ppv-shifa .clickable .derivedGuaName:has([data-gloss]) {
text-decoration: none;
}

.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: stretch;
  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;
  
  flex: 1 0 auto;
}

.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;
}

.ppv-shifa .guaHeadSub:has([data-gloss]) {
overflow: visible;
}

/* ── 搬自 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/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 .shenshaTagsGloss {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  font-family: var(--zd-font-sans);
}

.ppv-jinkou .shenshaTagsGloss .shenShaItem {
display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.ppv-jinkou .shenShaItemHan {
white-space: nowrap;
}

.ppv-jinkou .shenShaItemGloss {
display: block;
  max-width: 100%;
  font-family: var(--zd-font-sans);
  font-size: 9px;
  line-height: 1.3;
  color: var(--zd-text-muted, #8a8378);
  overflow-wrap: anywhere;
}

.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;
}

.ppv-jinkou .posGloss {
display: block;
  font-family: var(--zd-font-sans);
  font-size: 8px;
  font-weight: 400;
  line-height: 11px;
  opacity: 0.8;
  white-space: nowrap;
}

.ppv-jinkou .positionsRowGloss {
padding: 0 4px 0 12px;
}

.ppv-jinkou .positionsRowGloss .positionsLeft {
gap: 14px;
}

.ppv-jinkou .positionsRowGloss .positionsRight {
gap: 10px;
}

.ppv-jinkou .positionsRowGloss .posLabelCol {
width: auto;
  align-items: flex-end;
}

.ppv-jinkou .positionsRowGloss .posElementCol {
width: auto;
  align-items: flex-end;
}

.ppv-jinkou .positionsRowGloss .posLabelCol span,
.ppv-jinkou .positionsRowGloss .posValueCol p,
.ppv-jinkou .positionsRowGloss .posElementCol span,
.ppv-jinkou .positionsRowGloss .posStatusRow {
height: 34px;
}

.ppv-jinkou .positionsRowGloss .posLabelCol > span,
.ppv-jinkou .positionsRowGloss .posElementCol > span {
display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 20px;
}

.ppv-jinkou .positionsRowGloss .posLabelCol small,
.ppv-jinkou .positionsRowGloss .posElementCol small {
margin-top: 0;
  font-size: 8px;
  line-height: 11px;
}

.ppv-jinkou .positionsRowGloss .posStatusRow {
align-items: flex-start;
}

.ppv-jinkou .positionsRowGloss .posStatusRow .yinyangIcon {
margin-top: 5px;
}

/* ── 搬自 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 .stage:not([data-ready='true']) {
visibility: hidden;
}

.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;
}
}