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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 右侧垂直居中的跳转指引。卡片在应用里是可点的，这里只是把那个记号照画下来。 */
.ppc-chev {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zd-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

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

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

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

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

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

/*
 * 盘面替身整体。
 *
 * 宽度随容器走而不是钉死 362px（应用的内容宽）：这一页的盘面栏在宽屏上有四百多像素，
 * 钉死会在栏里留下两条空边。九门的盘面因此必须是流式的——栅格用 minmax(0, 1fr)，
 * 字号照抄应用的固定值。这条是九门共同的约束，不是建议。
 */
.ppv {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--zd-bg);
  border-radius: 14px;
  border: 1px solid var(--zd-line);
  overflow: hidden;
  /* 是一幅「界面的画」，不是可操作的界面：整块不接收指针事件，里面也没有可聚焦元素。 */
  pointer-events: none;
  user-select: none;
}

/* 页眉：返回箭头、标题、右侧占位点，照应用的页眉摆。 */
.ppv-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--zd-line);
  background: var(--zd-bg);
}

.ppv-back,
.ppv-dots {
  flex: none;
  width: 20px;
  color: var(--zd-muted);
  font-size: 18px;
  line-height: 1;
}

.ppv-dots {
  text-align: right;
  font-size: 14px;
}

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

/* 分栏标签：选中项下面一条短横，与应用一致。 */
.ppv-tabs {
  display: flex;
  flex: none;
  gap: 24px;
  padding: 0 16px;
  border-bottom: 1px solid var(--zd-line);
  background: var(--zd-bg);
}

.ppv-tab {
  position: relative;
  padding: 10px 0 9px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-tab-on {
  color: var(--zd-text);
  font-weight: 600;
}

.ppv-tab-on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  border-radius: 2px;
  background: var(--zd-accent);
}

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

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

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

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

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

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

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

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

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

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

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

/* ── charting/bazi.css ── */
/*
 * 八字盘面替身的样式，照 src/h5/routes/BaziChartPage.module.css 抄。
 *
 * 字号、行高、线宽（0.8px / 0.5px）、交替行底色 #f8f6f0 都取应用的原值——这张图要让人相信
 * 「打开应用看到的就是这个」，差一档字号就露馅了。
 *
 * 唯一放宽的是宽度：应用的内容宽固定 362px，官网这一栏在宽屏上有四百多，所以列宽一律
 * minmax(0, 1fr)，藏干那种可能撑宽的内容也被锁在轨道里——不锁的话各行的列边界会互相错开，
 * 第六列那条竖线就成了锯齿。
 */

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

/* 八字卡的行距比别门宽一档（应用里 gap 是 14px 不是 10px）：它有四柱和大运两块盘。 */
.ppv-bazi .ppc {
  gap: 14px;
}

/* 四柱四等分。应用刻意用 flex 而不是 grid：部分安卓 WebView 会把 grid 挤在左侧。 */
.ppv-bazi .pp-bazi-cpillars,
.ppv-bazi .pp-bazi-cluck {
  display: flex;
  width: 100%;
}

.ppv-bazi .pp-bazi-cluck {
  gap: 2px;
}

.ppv-bazi .pp-bazi-ccol,
.ppv-bazi .pp-bazi-clcol {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.ppv-bazi .pp-bazi-ccol {
  gap: 6px;
}

.ppv-bazi .pp-bazi-ccol i {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--zd-muted);
}

.ppv-bazi .pp-bazi-ccol b {
  font-family: var(--zd-font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.5px;
}

/* 大运十等分：年份、岁数各一行小字，干支两行大字。 */
.ppv-bazi .pp-bazi-clcol {
  gap: 3px;
}

.ppv-bazi .pp-bazi-clcol i {
  font-style: normal;
  font-size: 8px;
  line-height: 1;
  color: var(--zd-muted);
  white-space: nowrap;
}

.ppv-bazi .pp-bazi-clcol i:nth-child(2) {
  margin-bottom: 2px;
}

.ppv-bazi .pp-bazi-clcol b {
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.5px;
}

/* 当值的那一步：干支加重，年份岁数转主色——一眼看出现在走到哪。 */
.ppv-bazi .pp-bazi-clon b {
  font-weight: 800;
}

.ppv-bazi .pp-bazi-clon i {
  font-weight: 700;
  color: var(--zd-accent);
}

/* ── 个人信息块 ─────────────────────────────────────────────────────────── */

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

.ppv-bazi .pp-bazi-name {
  margin: 0;
  /* 含人名的动态文案，应用里刻意用非衬线避开宋体子集缺字。 */
  font-family: var(--zd-font-sans);
  font-size: 20px;
  line-height: 24px;
}

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

.ppv-bazi .pp-bazi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
  font-size: 14px;
  line-height: 18px;
}

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

/* 展开/收起的箭头，应用里是用两条边框转 45 度画的，不是字符。 */
.ppv-bazi .pp-bazi-caret {
  width: 7px;
  height: 7px;
  border-right: 1.2px solid var(--zd-muted);
  border-bottom: 1.2px solid var(--zd-muted);
  transform: translateY(1px) rotate(-135deg);
}

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

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

/* 四宫两列：按内容宽对齐，而不是等分——干支长度一致，等分反而把两列推得很开。 */
.ppv-bazi .pp-bazi-palace {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 12px;
  row-gap: 2px;
  margin-top: 2px;
}

.ppv-bazi .pp-bazi-palace span {
  display: flex;
  align-items: center;
}

.ppv-bazi .pp-bazi-palace i {
  font-style: normal;
}

.ppv-bazi .pp-bazi-palace b {
  font-size: 12px;
  font-weight: 600;
}

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

/* ── 主表 ───────────────────────────────────────────────────────────────── */

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

/*
 * 行首 42px + 四柱 + 大运/流年/流月，共八轨。
 * minmax(0, 1fr) 是必须的：默认的 1fr 等于 minmax(auto, 1fr)，藏干那三行的内容一旦比别行宽，
 * 那一行的列边界就会整体偏移，第六列的竖线于是对不上。
 */
.ppv-bazi .pp-bazi-row {
  display: grid;
  grid-template-columns: 42px repeat(7, minmax(0, 1fr));
  align-items: stretch;
  min-height: 34px;
  border-bottom: 0.5px solid var(--zd-line);
}

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

/* 天干与地支之间不划线：两行合起来才是一柱。 */
.ppv-bazi .pp-bazi-stem {
  border-bottom: none;
}

/* 四柱与大运/流年/流月之间那条竖线，贯穿每一行的第六列左沿。 */
.ppv-bazi .pp-bazi-row > *:nth-child(6) {
  border-left: 0.8px solid var(--zd-line);
}

.ppv-bazi .pp-bazi-head,
.ppv-bazi .pp-bazi-alt {
  background: #f8f6f0;
}

.ppv-bazi .pp-bazi-head {
  min-height: 35px;
}

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

.ppv-bazi .pp-bazi-rowhead {
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: 13px;
  color: #0a0a0a;
  min-width: 0;
}

.ppv-bazi .pp-bazi-th {
  font-family: var(--zd-font-serif);
  font-size: 14px;
  color: #0a0a0a;
}

.ppv-bazi .pp-bazi-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 2px;
  min-width: 0;
}

/* 藏干整块顶对齐：多条藏干要从格子顶上依次往下排，居中会让两条与三条的行对不齐。 */
.ppv-bazi .pp-bazi-tall .pp-bazi-cell {
  justify-content: flex-start;
}

.ppv-bazi .pp-bazi-big {
  font-family: var(--zd-font-serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 30px;
}

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

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

/* 三字纳音（钗钏金）在这个列宽下差半像素就要折行，横向内边距收到 2px。 */
.ppv-bazi .pp-bazi-sm {
  font-size: 11px;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-bazi .pp-bazi-two {
  gap: 1px;
}

.ppv-bazi .pp-bazi-two i {
  font-style: normal;
  font-size: 11px;
  line-height: 15px;
  color: #0a0a0a;
  white-space: nowrap;
}

.ppv-bazi .pp-bazi-hidden {
  gap: 2px;
  width: 100%;
}

/* 藏干逐条：天干靠左、十神靠右，两端对齐。宽度封顶 43px（应用的原值），窄栏下随格收缩。 */
.ppv-bazi .pp-bazi-hitem {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px;
  width: 100%;
  max-width: 43px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.ppv-bazi .pp-bazi-hitem b {
  font-size: 12px;
  font-weight: 600;
}

.ppv-bazi .pp-bazi-hitem i {
  font-style: normal;
  font-size: 10px;
  color: #0a0a0a;
}

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

/* ── 排盘卡片 ───────────────────────────────────────────────────────────── */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── charting/jinkou.css ── */
/*
 * 金口诀盘面替身的样式。
 *
 * 四位竖着堆成一叠——人元在上、地分在下，这是金口诀立课的样子，不是列表。所以每一位
 * 给足高度、主字给到 22px：一课只有四个字，它们就该占满版面。
 */

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

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

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

/*
 * 四位左右两栏：位名与值在左、五行与旺衰在右，一位一行。四列各自是一叠等高的行
 * （行高钉死 18px），四行才横向对得齐——用四个 grid 行会因为内容宽窄不同而错位。
 */
.ppv-jinkou .pp-jinkou-cpos {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.ppv-jinkou .pp-jinkou-cleft,
.ppv-jinkou .pp-jinkou-cright {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.ppv-jinkou .pp-jinkou-cleft {
  gap: 18px;
}

.ppv-jinkou .pp-jinkou-cright {
  gap: 12px;
}

.ppv-jinkou .pp-jinkou-clab,
.ppv-jinkou .pp-jinkou-cval,
.ppv-jinkou .pp-jinkou-cel,
.ppv-jinkou .pp-jinkou-cst {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ppv-jinkou .pp-jinkou-clab i,
.ppv-jinkou .pp-jinkou-cval b,
.ppv-jinkou .pp-jinkou-cel i,
.ppv-jinkou .pp-jinkou-cst i {
  height: 18px;
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.ppv-jinkou .pp-jinkou-clab {
  width: 26px;
  text-align: right;
}

.ppv-jinkou .pp-jinkou-clab i {
  font-weight: 400;
}

.ppv-jinkou .pp-jinkou-cval {
  min-width: 62px;
}

.ppv-jinkou .pp-jinkou-cval b {
  font-weight: 600;
}

.ppv-jinkou .pp-jinkou-cel {
  width: 13px;
  text-align: right;
}

.ppv-jinkou .pp-jinkou-cst {
  min-width: 58px;
}

.ppv-jinkou .pp-jinkou-cst i {
  font-weight: 400;
}

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

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

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

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

/* 用爻的取法是这一课怎么断的前提，单独一行、给个胶囊。 */
.ppv-jinkou .pp-jinkou-rule {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--zd-selected-bg);
  box-shadow: inset 0 0 0 0.8px var(--zd-accent);
  color: var(--zd-accent);
  font-size: 10px;
}

/* ── 四位 ───────────────────────────────────────────────────────────────── */

.ppv-jinkou .pp-jinkou-seats {
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  overflow: hidden;
}

/*
 * 一位一行，四列：位名、主字、属性、神煞。位名与主字定宽，属性与神煞吃余量——
 * 神煞条数不定，让它去伸缩，主字那一列才不会随内容左右漂。
 */
.ppv-jinkou .pp-jinkou-seat {
  display: grid;
  grid-template-columns: 44px 46px minmax(0, 1fr);
  grid-template-areas:
    "name main attr"
    "name main gods";
  align-items: center;
  gap: 1px 8px;
  padding: 7px 10px;
  border-bottom: 0.5px solid var(--zd-line);
}

.ppv-jinkou .pp-jinkou-seat:last-child {
  border-bottom: none;
}

/* 用爻这一位是断课的落点，整行点一下底色，比在角上加个小标记醒目。 */
.ppv-jinkou .pp-jinkou-use {
  background: var(--zd-selected-bg);
}

.ppv-jinkou .pp-jinkou-name {
  grid-area: name;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--zd-muted);
}

.ppv-jinkou .pp-jinkou-name em {
  font-style: normal;
  font-size: 9px;
  font-weight: 400;
  color: var(--zd-accent);
}

.ppv-jinkou .pp-jinkou-main {
  grid-area: main;
  font-family: var(--zd-font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.ppv-jinkou .pp-jinkou-attr {
  grid-area: attr;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  font-size: 10px;
}

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

.ppv-jinkou .pp-jinkou-attr b {
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 700;
}

/* 旺衰是这一位有没有力量，加个方框与其余属性拉开。 */
.ppv-jinkou .pp-jinkou-attr u {
  padding: 0 4px;
  border: 0.8px solid var(--zd-line);
  border-radius: 3px;
  text-decoration: none;
  font-size: 9px;
  color: #4a3a2c;
}

.ppv-jinkou .pp-jinkou-gods {
  grid-area: gods;
  font-size: 9px;
  line-height: 1.5;
  color: var(--zd-muted);
}

/* ── 五动与战情 ─────────────────────────────────────────────────────────── */

.ppv-jinkou .pp-jinkou-h {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 5px;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 700;
}

.ppv-jinkou .pp-jinkou-h::after {
  content: "";
  flex: 1 1 auto;
  height: 0.8px;
  background: var(--zd-line);
}

.ppv-jinkou .pp-jinkou-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11px;
}

.ppv-jinkou .pp-jinkou-moves span {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

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

.ppv-jinkou .pp-jinkou-war {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
}

.ppv-jinkou .pp-jinkou-war b {
  margin-right: 5px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(183, 63, 66, 0.12);
  color: var(--wx-fire);
  font-size: 10px;
  font-weight: 700;
}

.ppv-jinkou .pp-jinkou-war i {
  font-style: normal;
  font-size: 9px;
  color: var(--zd-muted);
}

/* ── charting/liuren.css ── */
/*
 * 大六壬盘面替身的样式。
 *
 * 三块自上而下：四课、三传、天地盘。四课横排四格、从右往左读，三传竖排三行、自初至末，
 * 天地盘是十二支方图——三块的方向各不相同，正是六壬课式的样子，统一成一个方向反而失真。
 */

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

/* 三传占左半、四课占右半，中间一道竖线——与排盘页的课传区同口径。 */
.ppv-liuren .pp-liuren-kc {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.ppv-liuren .pp-liuren-sc {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

/* 四列定宽：六亲、遁干地支、天将、传位。等分会让一字的六亲和两字的天将排不齐。 */
.ppv-liuren .pp-liuren-cr {
  display: grid;
  grid-template-columns: 20px 30px 26px 14px;
  align-items: center;
  gap: 12px;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  line-height: 1;
}

.ppv-liuren .pp-liuren-crel {
  font-style: normal;
  font-size: 11px;
  color: var(--zd-accent);
  text-align: center;
}

.ppv-liuren .pp-liuren-cb2 {
  display: inline-flex;
  justify-content: center;
  gap: 1px;
}

.ppv-liuren .pp-liuren-cb2 b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ppv-liuren .pp-liuren-cj {
  font-family: var(--zd-font-sans);
  font-style: normal;
  font-size: 11px;
  text-align: center;
}

.ppv-liuren .pp-liuren-cn {
  font-family: var(--zd-font-sans);
  font-style: normal;
  font-size: 11px;
  color: var(--zd-muted);
  text-align: center;
}

.ppv-liuren .pp-liuren-sk {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: space-evenly;
  min-width: 0;
  padding-left: 12px;
  border-left: 0.5px solid var(--zd-line);
}

.ppv-liuren .pp-liuren-kcol {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ppv-liuren .pp-liuren-kcol i {
  font-family: var(--zd-font-sans);
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  color: var(--zd-muted);
}

.ppv-liuren .pp-liuren-ku {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
}

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

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

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

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

.ppv-liuren .pp-liuren-info b {
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 700;
}

/* 小节标题：一条短横加一个名字，比留白分节更省高度。 */
.ppv-liuren .pp-liuren-h {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 5px;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--zd-text);
}

.ppv-liuren .pp-liuren-h::after {
  content: "";
  flex: 1 1 auto;
  height: 0.8px;
  background: var(--zd-line);
}

.ppv-liuren .pp-liuren-h i {
  flex: none;
  order: 1;
  font-style: normal;
  font-size: 9px;
  font-weight: 400;
  color: var(--zd-muted);
}

/* ── 四课 ───────────────────────────────────────────────────────────────── */

.ppv-liuren .pp-liuren-kes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8px;
  background: var(--zd-line);
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  overflow: hidden;
}

.ppv-liuren .pp-liuren-ke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 2px 6px;
  background: var(--zd-surface);
}

.ppv-liuren .pp-liuren-ke i {
  font-style: normal;
  font-size: 9px;
  color: var(--zd-muted);
}

.ppv-liuren .pp-liuren-ke u,
.ppv-liuren .pp-liuren-seat u {
  font-family: var(--zd-font-serif);
  font-size: 10px;
  text-decoration: none;
  color: #4a3a2c;
}

/* 上神是这一课的主角，下神是它所乘之位——所以上大下小。 */
.ppv-liuren .pp-liuren-up {
  font-size: 21px;
  line-height: 1.15;
}

.ppv-liuren .pp-liuren-low {
  font-size: 14px;
  line-height: 1.2;
  opacity: 0.72;
}

.ppv-liuren .pp-liuren-ke em {
  font-style: normal;
  font-size: 9px;
  color: var(--zd-accent);
}

/* ── 三传 ───────────────────────────────────────────────────────────────── */

.ppv-liuren .pp-liuren-chuans {
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  overflow: hidden;
}

/* 五列固定：传名、遁干、地支、六亲、天将。等宽会让两字的六亲和一字的遁干看起来不齐。 */
.ppv-liuren .pp-liuren-chuan {
  display: grid;
  grid-template-columns: 34px 26px minmax(0, 1fr) 40px 40px;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-bottom: 0.5px solid var(--zd-line);
}

.ppv-liuren .pp-liuren-chuan:last-child {
  border-bottom: none;
}

.ppv-liuren .pp-liuren-chuan i {
  font-style: normal;
  font-size: 10px;
  color: var(--zd-muted);
}

.ppv-liuren .pp-liuren-dun b {
  font-size: 13px;
}

.ppv-liuren .pp-liuren-cb {
  font-size: 20px;
  line-height: 1.3;
}

.ppv-liuren .pp-liuren-chuan em {
  font-style: normal;
  font-size: 10px;
  color: var(--zd-text);
}

.ppv-liuren .pp-liuren-chuan u {
  font-family: var(--zd-font-serif);
  font-size: 11px;
  text-decoration: none;
  color: #4a3a2c;
}

/* ── 天地盘 ─────────────────────────────────────────────────────────────── */

/*
 * 十二支方图：巳午未申在上、寅丑子亥在下、辰卯在左、酉戌在右。这是地盘的固定方位，
 * 写成 grid-template-areas 而不是逐格算行列号，摆错一位一眼就能看出来。
 */
.ppv-liuren .pp-liuren-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "si   wu   wei  shen"
    "chen mid  mid  you"
    "mao  mid  mid  xu"
    "yin  chou zi   hai";
  gap: 0.8px;
  background: var(--zd-line);
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  overflow: hidden;
}

.ppv-liuren .pp-liuren-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 52px;
  padding: 3px 2px;
  background: var(--zd-surface);
}

.ppv-liuren .pp-liuren-sky {
  font-size: 17px;
  line-height: 1.2;
}

/* 地盘支是格子的坐标，退到最淡的一档，免得和头上的天盘支抢。 */
.ppv-liuren .pp-liuren-seat i {
  font-style: normal;
  font-size: 9px;
  color: var(--zd-muted);
}

/* 空亡的位子：加一圈虚线，与应用一致——空亡是「有位无实」，不适合用实线框。 */
.ppv-liuren .pp-liuren-empty {
  background: #f8f6f0;
  box-shadow: inset 0 0 0 1px rgba(202, 180, 159, 0.9);
}

.ppv-liuren .pp-liuren-mid {
  grid-area: mid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--zd-surface);
  font-size: 10px;
}

.ppv-liuren .pp-liuren-mid span {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

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

.ppv-liuren .pp-liuren-mid b {
  font-size: 14px;
}

/* ── charting/liuyao.css ── */
/*
 * 六爻纳甲盘面替身的样式。
 *
 * 一行是一爻，五列固定：六神｜本卦六亲纳甲｜卦画｜世应｜变卦。列宽写死而不是等分，
 * 因为这五列的内容宽度天差地别——六神恒两字、卦画恒一根、世应恒一字，只有纳甲那两列
 * 需要余量。等分会让卦画那一列空出一大片，六爻的阶梯感就散了。
 */

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

.ppv-liuyao .pp-liuyao-cline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}

.ppv-liuyao .pp-liuyao-cname {
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 600;
}

.ppv-liuyao .pp-liuyao-carrow {
  font-style: normal;
  font-size: 12px;
  color: var(--zd-muted);
}

.ppv-liuyao .pp-liuyao-cbadge {
  font-style: normal;
  font-size: 11px;
  color: var(--zd-muted);
  white-space: nowrap;
}

/* 卦宫挤到最右：它是这一卦的归属，不与卦名争位。 */
.ppv-liuyao .pp-liuyao-cpalace {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: var(--zd-accent);
}

.ppv-liuyao .pp-liuyao-ctable {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

/*
 * 四列 0.5 : 0.5 : 1.5 : 1.5。六神与伏神只有两字，本卦变卦要装下六亲、干支、爻画与标记，
 * 所以左窄右宽——等分会把爻画压得没法看。
 */
.ppv-liuyao .pp-liuyao-chead,
.ppv-liuyao .pp-liuyao-crow {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr);
  gap: 4px;
  width: 100%;
  align-items: center;
}

.ppv-liuyao .pp-liuyao-chead {
  font-size: 10px;
  color: var(--zd-muted);
}

.ppv-liuyao .pp-liuyao-chead > span {
  text-align: center;
}

.ppv-liuyao .pp-liuyao-crow {
  font-family: var(--zd-font-serif);
  font-size: 12px;
  line-height: 1.1;
}

.ppv-liuyao .pp-liuyao-cgod {
  font-family: var(--zd-font-sans);
  font-style: normal;
  font-size: 11px;
  text-align: center;
}

.ppv-liuyao .pp-liuyao-cfu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 11px;
}

.ppv-liuyao .pp-liuyao-cacc {
  font-style: normal;
  color: var(--zd-accent);
}

.ppv-liuyao .pp-liuyao-ccell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

/* 六亲与干支各占固定宽：两者宽度一浮动，六行的爻画就纵向对不齐。 */
.ppv-liuyao .pp-liuyao-crel {
  flex: none;
  min-width: 2em;
  font-style: normal;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.ppv-liuyao .pp-liuyao-cgz {
  display: inline-flex;
  flex: none;
  justify-content: center;
  min-width: 2em;
}

.ppv-liuyao .pp-liuyao-cgz b {
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* 世应与动爻的槽：固定两字宽，空着也占位。 */
.ppv-liuyao .pp-liuyao-cslot {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  width: 1.8em;
  font-style: normal;
}

.ppv-liuyao .pp-liuyao-cshi {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--zd-accent);
}

/* 动爻标记用暗红，与世应的主色橙分开——一个说位置，一个说变化。 */
.ppv-liuyao .pp-liuyao-cmv {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #c0392b;
}

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

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

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

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

.ppv-liuyao .pp-liuyao-gua b {
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 700;
}

/* 「之」是本卦到变卦的那一下，字小一档、退到底色，两个卦名才是主角。 */
.ppv-liuyao .pp-liuyao-gua i {
  font-size: 11px;
}

.ppv-liuyao .pp-liuyao-head,
.ppv-liuyao .pp-liuyao-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 52px 18px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.ppv-liuyao .pp-liuyao-head {
  padding: 0 8px 4px;
  font-size: 9px;
  color: var(--zd-muted);
}

.ppv-liuyao .pp-liuyao-body {
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  overflow: hidden;
}

.ppv-liuyao .pp-liuyao-row {
  min-height: 38px;
  padding: 2px 8px;
  border-bottom: 0.5px solid var(--zd-line);
}

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

.ppv-liuyao .pp-liuyao-god {
  font-family: var(--zd-font-serif);
  font-size: 10px;
  color: #4a3a2c;
}

.ppv-liuyao .pp-liuyao-main,
.ppv-liuyao .pp-liuyao-var {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  white-space: nowrap;
}

.ppv-liuyao .pp-liuyao-main i,
.ppv-liuyao .pp-liuyao-var i {
  font-style: normal;
  font-size: 10px;
  color: var(--zd-text);
}

.ppv-liuyao .pp-liuyao-main b,
.ppv-liuyao .pp-liuyao-var b {
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 700;
}

/* 变卦那一列整体淡一档：它是「动了以后变成什么」，不该和本卦争。 */
.ppv-liuyao .pp-liuyao-var {
  opacity: 0.78;
}

/* 伏神缩在六亲前面，字最小——它藏在本卦底下，本来就不在明面上。 */
.ppv-liuyao .pp-liuyao-main em {
  font-style: normal;
  font-size: 8px;
  line-height: 1.2;
  color: var(--zd-muted);
}

/* ── 卦画 ───────────────────────────────────────────────────────────────── */

.ppv-liuyao .pp-liuyao-pic {
  display: flex;
  align-items: center;
  gap: 3px;
}

/*
 * 阳一根整条、阴两根短条。用方块画而不是 ⚊ ⚋ 字符：那两个字在不少系统字体里缺字，
 * 一缺整卦就是六个豆腐块。
 */
.ppv-liuyao .pp-liuyao-bar {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
}

.ppv-liuyao .pp-liuyao-bar u {
  flex: 1 1 0;
  height: 6px;
  border-radius: 1px;
  background: #2e2519;
  text-decoration: none;
}

.ppv-liuyao .pp-liuyao-half {
  flex: 1 1 0;
}

/* 动爻标记：老阳画圈、老阴打叉，占一个固定宽度，不动的爻留空位保持列对齐。 */
.ppv-liuyao .pp-liuyao-mv {
  flex: none;
  width: 9px;
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  color: var(--zd-accent);
}

/* 世应：一个字，套一个圈，是这一卦的落点。 */
.ppv-liuyao .pp-liuyao-mk {
  font-family: var(--zd-font-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--zd-accent);
  text-align: center;
}

/* ── charting/meihua.css ── */
/*
 * 梅花易数盘面替身的样式。
 *
 * 主体是三卦并排。三列等分而不是按内容宽：本互变是同一件事的三个阶段，宽度一有差别，
 * 读起来就像有主有次，而梅花恰恰是三卦同看。
 *
 * 卦画用方块画，不用 ⚊ ⚋ 字符——那两个字在不少系统字体里缺字，一缺整卦变豆腐块。
 */

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

.ppv-meihua .pp-meihua-cline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}

.ppv-meihua .pp-meihua-cname {
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 600;
}

.ppv-meihua .pp-meihua-carrow {
  font-style: normal;
  font-size: 12px;
  color: var(--zd-muted);
}

.ppv-meihua .pp-meihua-crel2 {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: var(--zd-accent);
}

.ppv-meihua .pp-meihua-cgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  /* 体用记号与动爻圈要探出卦画的盒子，这一层不能裁。 */
  overflow: visible;
}

.ppv-meihua .pp-meihua-cg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: visible;
}

.ppv-meihua .pp-meihua-clabel {
  font-style: normal;
  font-size: 10px;
  color: var(--zd-muted);
}

.ppv-meihua .pp-meihua-ctitle {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppv-meihua .pp-meihua-cglyph {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 36px;
  overflow: visible;
}

.ppv-meihua .pp-meihua-crow {
  position: relative;
  display: block;
  width: 36px;
  height: 5px;
}

/* 体／用贴在经卦左侧、动爻圈贴在爻的右侧，都用绝对定位，不撑宽 36px 的卦画。 */
.ppv-meihua .pp-meihua-cmk {
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  color: var(--zd-accent);
  text-align: center;
}

.ppv-meihua .pp-meihua-cmv {
  position: absolute;
  left: calc(100% + 3px);
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 8px;
  line-height: 1;
}

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

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

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

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

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

.ppv-meihua .pp-meihua-info i,
.ppv-meihua .pp-meihua-numrow i,
.ppv-meihua .pp-meihua-tyrow i {
  font-style: normal;
  color: var(--zd-muted);
}

.ppv-meihua .pp-meihua-info b {
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 700;
}

/* ── 三卦并排 ───────────────────────────────────────────────────────────── */

.ppv-meihua .pp-meihua-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8px;
  background: var(--zd-line);
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  overflow: hidden;
}

.ppv-meihua .pp-meihua-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 9px 6px 10px;
  background: var(--zd-surface);
}

.ppv-meihua .pp-meihua-col p {
  margin: 0;
}

.ppv-meihua .pp-meihua-t {
  font-size: 10px;
  color: var(--zd-muted);
}

.ppv-meihua .pp-meihua-n {
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 700;
}

/* 上下经卦：两行，上卦在上——与卦画的方向一致，不能按阅读顺序改成一行。 */
.ppv-meihua .pp-meihua-s {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: var(--zd-font-serif);
  font-size: 10px;
  color: var(--zd-muted);
}

/* 体／用的标记，是这一节的重点，用主色点出来。 */
.ppv-meihua .pp-meihua-s em {
  margin-left: 3px;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--zd-selected-bg);
  box-shadow: inset 0 0 0 0.8px var(--zd-accent);
  color: var(--zd-accent);
  font-style: normal;
  font-size: 9px;
}

/* ── 卦画 ───────────────────────────────────────────────────────────────── */

.ppv-meihua .pp-meihua-pic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 76px;
}

.ppv-meihua .pp-meihua-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ppv-meihua .pp-meihua-line u {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 1px;
  background: #2e2519;
  text-decoration: none;
}

.ppv-meihua .pp-meihua-half {
  flex: 1 1 0;
}

/* 动爻标记占一个固定宽度，不动的爻留空位，六根线才左右对齐。 */
.ppv-meihua .pp-meihua-line i {
  flex: none;
  width: 8px;
  font-style: normal;
  font-size: 9px;
  line-height: 1;
  color: var(--zd-accent);
}

/* ── 体用与起卦数 ───────────────────────────────────────────────────────── */

.ppv-meihua .pp-meihua-h {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 5px;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 700;
}

.ppv-meihua .pp-meihua-h::after {
  content: "";
  flex: 1 1 auto;
  height: 0.8px;
  background: var(--zd-line);
}

.ppv-meihua .pp-meihua-tyrow,
.ppv-meihua .pp-meihua-numrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: 11px;
}

.ppv-meihua .pp-meihua-tyrow span,
.ppv-meihua .pp-meihua-numrow span {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.ppv-meihua .pp-meihua-tyrow b {
  font-family: var(--zd-font-serif);
  font-size: 16px;
  font-weight: 700;
}

.ppv-meihua .pp-meihua-tyrow u {
  font-size: 10px;
  text-decoration: none;
  color: var(--zd-muted);
}

.ppv-meihua .pp-meihua-tyrow em {
  font-style: normal;
  font-size: 9px;
  color: var(--zd-muted);
}

.ppv-meihua .pp-meihua-rel {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--zd-selected-bg);
  box-shadow: inset 0 0 0 0.8px var(--zd-accent);
  color: var(--zd-accent);
  font-size: 10px;
}

/* 起卦口诀与体用取法：是「这盘为什么这么排」的依据，字最小、颜色最淡。 */
.ppv-meihua .pp-meihua-note {
  margin: 5px 0 0;
  font-size: 9px;
  line-height: 1.6;
  color: var(--zd-muted);
}

/* ── charting/qimen.css ── */
/*
 * 奇门遁甲盘面替身的样式。
 *
 * 一宫之内的读法是固定的：八神与九星在上、天地盘干在中、八门与宫位在下，暗干隐干缩在
 * 右侧。所以这里用「上中下三段 + 一个绝对定位的角标」，而不是九宫格里再套九宫格——
 * 后者在窄栏上每一段都会被压到读不出字。
 *
 * 符号一律按自身五行上色（数据里 `九天（金）` 那个括号就是五行），与应用一致：奇门一宫
 * 里挤着神星门干四层，不上色就是一团黑字。
 */

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

/*
 * 卡上的简易九宫比排盘页那张轻得多：没有暗干隐干与格局，只留神星门与天地盘干。
 * 格线用「上边框 + 左边框」加每格的「右边框 + 下边框」拼出来，不靠外层底色——
 * 这张卡是透明底，浮在对话流上。
 */
.ppv-qimen .pp-qimen-mgrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  border-top: 0.5px solid var(--zd-line);
  border-left: 0.5px solid var(--zd-line);
  border-radius: 6px;
}

.ppv-qimen .pp-qimen-mc {
  position: relative;
  display: block;
  min-height: 58px;
  border-right: 0.5px solid var(--zd-line);
  border-bottom: 0.5px solid var(--zd-line);
  overflow: hidden;
}

.ppv-qimen .pp-qimen-mcore {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--zd-font-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  text-align: center;
  white-space: nowrap;
}

.ppv-qimen .pp-qimen-mk {
  position: absolute;
  left: 3px;
  top: 3px;
  font-style: normal;
  font-size: 8px;
  line-height: 1;
  color: var(--zd-muted);
}

.ppv-qimen .pp-qimen-mgua {
  position: absolute;
  left: 3px;
  bottom: 3px;
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-size: 9px;
  line-height: 1;
  color: var(--zd-muted);
}

/* 天盘干在上、地盘干在下，贴右下角右对齐。 */
.ppv-qimen .pp-qimen-mst {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-family: var(--zd-font-serif);
  font-size: 9px;
  line-height: 11px;
}

/* 中宫只报遁局：四柱已经挪到标题下面横排了。 */
.ppv-qimen .pp-qimen-mmid {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ppv-qimen .pp-qimen-mmid i {
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--zd-accent);
}

/* ── 排盘页：局面信息 ───────────────────────────────────────────────────── */

.ppv-qimen .pp-qimen-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--zd-text);
}

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

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

.ppv-qimen .pp-qimen-info-r b {
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 700;
}

/* 格局名（反吟局）是这条信息里唯一要提醒的东西，给它一个主色胶囊。 */
.ppv-qimen .pp-qimen-info-r em {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--zd-selected-bg);
  box-shadow: inset 0 0 0 0.8px var(--zd-accent);
  color: var(--zd-accent);
  font-style: normal;
  font-size: 10px;
}

/* ── 九宫 ───────────────────────────────────────────────────────────────── */

.ppv-qimen .pp-qimen-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 缝里透出来的就是格线；逐格加 border 会在相邻两宫之间叠成双线。 */
  gap: 0.8px;
  background: var(--zd-line);
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  overflow: hidden;
}

.ppv-qimen .pp-qimen-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
  min-height: 92px;
  padding: 5px 5px 4px;
  background: var(--zd-surface);
}

.ppv-qimen .pp-qimen-top,
.ppv-qimen .pp-qimen-bot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3px;
  font-family: var(--zd-font-serif);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

/* 旺相休囚：跟在星名门名后面缩一档，是状态不是名字。 */
.ppv-qimen .pp-qimen-top u,
.ppv-qimen .pp-qimen-bot u {
  margin-left: 1px;
  font-size: 9px;
  text-decoration: none;
  color: var(--zd-muted);
}

.ppv-qimen .pp-qimen-top i,
.ppv-qimen .pp-qimen-bot i {
  font-style: normal;
}

/* 宫名与宫数是坐标不是内容，退到底色一档。 */
.ppv-qimen .pp-qimen-pos {
  color: var(--zd-muted);
  font-size: 10px;
}

/* 天地盘干是盘眼，字号压过其余三层。 */
.ppv-qimen .pp-qimen-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.ppv-qimen .pp-qimen-core b {
  font-family: var(--zd-font-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
}

/* 地盘干在下、缩一档：天盘加地盘是一组「谁临谁」的关系，等大就分不出上下。 */
.ppv-qimen .pp-qimen-earth {
  font-size: 15px;
}

/* 暗干隐干贴右缘，是备注不是盘面主体，所以脱离流、不占中间那列的宽度。 */
.ppv-qimen .pp-qimen-side {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-46%);
  font-size: 8px;
  line-height: 1.35;
  color: var(--zd-muted);
  text-align: right;
  white-space: nowrap;
}

/* 格局角标贴左下，与右下的宫位分列两端。 */
.ppv-qimen .pp-qimen-tag {
  position: absolute;
  left: 4px;
  top: 4px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(202, 180, 159, 0.22);
  font-size: 8px;
  line-height: 13px;
  color: var(--zd-muted);
  white-space: nowrap;
}

/* 中宫无门无星，改放符头与值符值使——奇门的中宫本来就不参与门星的分布。 */
.ppv-qimen .pp-qimen-mid {
  justify-content: center;
  gap: 4px;
  background: #f8f6f0;
}

.ppv-qimen .pp-qimen-mid-t {
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 700;
  color: var(--zd-muted);
  text-align: center;
}

.ppv-qimen .pp-qimen-mid-r {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap;
}

.ppv-qimen .pp-qimen-mid-r i {
  font-style: normal;
  color: var(--zd-muted);
}

.ppv-qimen .pp-qimen-mid-r b {
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 700;
}

/* ── charting/shifa.css ── */
/*
 * 大衍筮法盘面替身的样式。
 *
 * 三段：本卦之卦并排、十八变的策数表、变占与所占爻辞。策数表是筮法独有的东西——
 * 六七八九四个数决定哪一爻要变——所以给它整整一块，而不是缩成卦画旁边的角标。
 */

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

.ppv-shifa .pp-shifa-cline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}

.ppv-shifa .pp-shifa-cname {
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 600;
}

.ppv-shifa .pp-shifa-carrow {
  font-style: normal;
  font-size: 12px;
  color: var(--zd-muted);
}

.ppv-shifa .pp-shifa-cbadge {
  font-style: normal;
  font-size: 11px;
  color: var(--zd-muted);
  white-space: nowrap;
}

/* 变占结论挤到最右：卡片上一眼就能看到「主占哪条辞」，不必点进去。 */
.ppv-shifa .pp-shifa-czhan {
  margin-left: auto;
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-size: 12px;
  line-height: 18px;
  color: var(--zd-accent);
  text-align: right;
}

.ppv-shifa .pp-shifa-ctable {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

/* 四列 0.8 : 0.4 : 1.4 : 1.4——策数只有一位数，爻画要留足宽。 */
.ppv-shifa .pp-shifa-chead,
.ppv-shifa .pp-shifa-crow {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.4fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
  gap: 4px;
  width: 100%;
  align-items: center;
}

.ppv-shifa .pp-shifa-chead {
  font-size: 10px;
  color: var(--zd-muted);
}

.ppv-shifa .pp-shifa-chead > span {
  text-align: center;
}

.ppv-shifa .pp-shifa-ctitle {
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-size: 11px;
  text-align: center;
}

.ppv-shifa .pp-shifa-ccode {
  font-style: normal;
  font-size: 11px;
  color: var(--zd-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ppv-shifa .pp-shifa-ccell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

/*
 * 只有本卦那一列（行内第三个格）在右边挂动爻标记，所以给它左边补一个等宽的空槽，
 * 爻画才在列内居中、与表头「本卦」对齐。之卦列没有标记，不需要补。
 */
.ppv-shifa .pp-shifa-crow > .pp-shifa-ccell:nth-child(3)::before {
  content: "";
  flex: none;
  width: 1.2em;
}

.ppv-shifa .pp-shifa-cslot {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-start;
  width: 1.2em;
  font-style: normal;
}

.ppv-shifa .pp-shifa-cmv {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #c0392b;
}

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

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

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

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

.ppv-shifa .pp-shifa-info b {
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 700;
}

/* ── 本卦 / 之卦 ────────────────────────────────────────────────────────── */

.ppv-shifa .pp-shifa-guas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 11px;
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
}

.ppv-shifa .pp-shifa-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ppv-shifa .pp-shifa-col p {
  margin: 0;
}

.ppv-shifa .pp-shifa-t {
  font-size: 10px;
  color: var(--zd-muted);
}

.ppv-shifa .pp-shifa-n {
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 700;
}

.ppv-shifa .pp-shifa-s {
  font-family: var(--zd-font-serif);
  font-size: 10px;
  color: var(--zd-muted);
}

/* 两卦之间的「之」：本卦之卦的连接词，古书里就这么写。 */
.ppv-shifa .pp-shifa-arrow {
  flex: none;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  color: var(--zd-muted);
}

.ppv-shifa .pp-shifa-pic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 86px;
}

.ppv-shifa .pp-shifa-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 方块画卦，不用 ⚊ ⚋ 字符：那两个字在不少系统字体里缺字。 */
.ppv-shifa .pp-shifa-line u {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 1px;
  background: #2e2519;
  text-decoration: none;
}

.ppv-shifa .pp-shifa-half {
  flex: 1 1 0;
}

.ppv-shifa .pp-shifa-line i {
  flex: none;
  width: 8px;
  font-style: normal;
  font-size: 9px;
  line-height: 1;
  color: var(--zd-accent);
}

/* ── 策数表 ─────────────────────────────────────────────────────────────── */

.ppv-shifa .pp-shifa-h {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 5px;
  font-family: var(--zd-font-serif);
  font-size: 12px;
  font-weight: 700;
}

.ppv-shifa .pp-shifa-h::after {
  content: "";
  flex: 1 1 auto;
  height: 0.8px;
  background: var(--zd-line);
  order: 2;
}

.ppv-shifa .pp-shifa-h i {
  flex: none;
  order: 1;
  font-style: normal;
  font-size: 9px;
  font-weight: 400;
  color: var(--zd-muted);
}

.ppv-shifa .pp-shifa-stalks {
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  background: var(--zd-surface);
  overflow: hidden;
}

/* 四列固定宽：爻题两字、策数一位、老少两字、变一字，等分会把「变」推到很远。 */
.ppv-shifa .pp-shifa-srow {
  display: grid;
  grid-template-columns: 40px 30px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 10px;
  border-bottom: 0.5px solid var(--zd-line);
  font-size: 11px;
}

.ppv-shifa .pp-shifa-srow:last-child {
  border-bottom: none;
}

.ppv-shifa .pp-shifa-srow i {
  font-family: var(--zd-font-serif);
  font-style: normal;
  font-weight: 600;
}

.ppv-shifa .pp-shifa-srow b {
  font-family: var(--zd-font-serif);
  font-size: 15px;
  font-weight: 700;
}

.ppv-shifa .pp-shifa-srow em {
  font-style: normal;
  color: var(--zd-muted);
}

.ppv-shifa .pp-shifa-srow u {
  text-decoration: none;
  font-size: 10px;
  color: var(--zd-accent);
  text-align: right;
}

/* 老阴老阳那两行就是要变的爻，整行点一下底色，与卦画上的 ○ × 呼应。 */
.ppv-shifa .pp-shifa-on {
  background: var(--zd-selected-bg);
}

.ppv-shifa .pp-shifa-on b,
.ppv-shifa .pp-shifa-on em {
  color: var(--zd-accent);
}

/* ── 变占 ───────────────────────────────────────────────────────────────── */

.ppv-shifa .pp-shifa-rule {
  margin: 0;
  font-size: 10px;
  line-height: 1.7;
  color: var(--zd-muted);
}

.ppv-shifa .pp-shifa-rule i {
  margin-left: 4px;
  font-style: normal;
}

.ppv-shifa .pp-shifa-texts {
  margin-top: 7px;
  padding: 8px 10px;
  border-left: 2px solid var(--zd-accent);
  background: #f8f6f0;
}

.ppv-shifa .pp-shifa-texts p {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.75;
}

.ppv-shifa .pp-shifa-texts p:last-child {
  margin-bottom: 0;
}

/* 爻题领起爻辞，小象传缀在后面淡一档——与古籍页同一套排法。 */
.ppv-shifa .pp-shifa-texts b {
  margin-right: 5px;
  font-family: var(--zd-font-serif);
  font-weight: 700;
}

.ppv-shifa .pp-shifa-texts i {
  margin-left: 4px;
  font-style: normal;
  font-size: 10px;
  color: var(--zd-muted);
}

/* ── charting/ziwei.css ── */
/*
 * 紫微斗数盘面替身的样式。
 *
 * 十二宫沿四乘四的边排一圈，当中两乘两留给命主信息——这个「回」字形是紫微一眼可辨的地方。
 * 用 grid-template-areas 而不是逐格算行列号：十二地支的方位是固定的（巳午未申在上、
 * 寅丑子亥在下、辰卯在左、酉戌在右），把它写成一张图，改版时一眼就能看出哪一宫摆错了。
 */

.ppv-ziwei .pp-ziwei-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "si   wu   wei  shen"
    "chen mid  mid  you"
    "mao  mid  mid  xu"
    "yin  chou zi   hai";
  /* 缝里透出来的就是格线，比逐格加 border 少一半线宽误差（相邻两格会叠成双线）。 */
  gap: 0.8px;
  background: var(--zd-line);
  border: 0.8px solid var(--zd-line);
  border-radius: var(--zd-radius-card);
  overflow: hidden;
}

.ppv-ziwei .pp-ziwei-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  min-width: 0;
  min-height: 76px;
  padding: 4px 4px 3px;
  background: var(--zd-surface);
}

.ppv-ziwei .pp-ziwei-stars {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 5px;
  min-height: 0;
}

/* 主星与辅星靠字号与深浅分层，不靠颜色——盘上颜色已经让给四化了。 */
.ppv-ziwei .pp-ziwei-major {
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.ppv-ziwei .pp-ziwei-minor {
  font-family: var(--zd-font-serif);
  font-size: 11px;
  line-height: 1.4;
  color: #4a3a2c;
  white-space: nowrap;
}

/* 庙旺得利平陷：跟在星名后面缩一档，是星的状态而不是星本身。 */
.ppv-ziwei .pp-ziwei-major i,
.ppv-ziwei .pp-ziwei-minor i {
  margin-left: 1px;
  font-style: normal;
  font-size: 9px;
  font-weight: 400;
  color: var(--zd-muted);
}

/* 四化标记：一个小方块贴在星名右上，四色各表一化。 */
.ppv-ziwei .pp-ziwei-hua {
  display: inline-block;
  margin-left: 2px;
  padding: 0 2px;
  border-radius: 3px;
  font-family: var(--zd-font-sans);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 13px;
  color: #fff;
  vertical-align: 1px;
}

.ppv-ziwei .pp-ziwei-hua-禄 { background: var(--wx-wood); }
.ppv-ziwei .pp-ziwei-hua-权 { background: var(--wx-water); }
.ppv-ziwei .pp-ziwei-hua-科 { background: var(--wx-metal); }
.ppv-ziwei .pp-ziwei-hua-忌 { background: var(--wx-fire); }

.ppv-ziwei .pp-ziwei-misc {
  font-size: 9px;
  line-height: 1.4;
  color: var(--zd-muted);
  word-break: break-all;
}

/* 宫底一行：大限区间在左、宫名居中、宫干支在右，与应用同一排法。 */
.ppv-ziwei .pp-ziwei-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px;
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap;
}

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

.ppv-ziwei .pp-ziwei-foot b {
  font-family: var(--zd-font-serif);
  font-size: 11px;
  font-weight: 600;
}

/* 身宫等标记跟在宫名后面，用主色点一下，不另起一行。 */
.ppv-ziwei .pp-ziwei-foot em {
  margin-left: 1px;
  font-style: normal;
  font-size: 9px;
  color: var(--zd-accent);
}

.ppv-ziwei .pp-ziwei-foot u {
  font-family: var(--zd-font-serif);
  font-size: 10px;
  text-decoration: none;
  color: var(--zd-muted);
}

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

/* 摘要两列。命宫那条通常最长（宫干支后面还跟着主星），让它独占一行才不至于挤成两截。 */
.ppv-ziwei .pp-ziwei-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 8px;
  width: 100%;
  font-family: var(--zd-font-serif);
  font-size: 13px;
  line-height: 1.4;
}

.ppv-ziwei .pp-ziwei-sumwide {
  grid-column: 1 / -1;
}

.ppv-ziwei .pp-ziwei-sum b {
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ── 中宫 ───────────────────────────────────────────────────────────────── */

.ppv-ziwei .pp-ziwei-mid {
  grid-area: mid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 8px;
  background: var(--zd-surface);
  font-size: 10px;
  line-height: 1.5;
  color: var(--zd-muted);
}

.ppv-ziwei .pp-ziwei-mid p {
  margin: 0;
}

.ppv-ziwei .pp-ziwei-mid-t {
  font-family: var(--zd-font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--zd-text);
}

.ppv-ziwei .pp-ziwei-mid-t i {
  margin-left: 6px;
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
  color: var(--zd-muted);
}

/* 字段名：跟在上一段值后面另起一项，靠一点间距分开，不画竖线也不换行。 */
.ppv-ziwei .pp-ziwei-k {
  margin-right: 3px;
  color: var(--zd-muted);
}

.ppv-ziwei .pp-ziwei-k:not(:first-child) {
  margin-left: 8px;
}

/* 四柱：一柱一组，柱内两字紧挨、柱间留空，逐字按五行上色。中宫里唯一的重点。 */
.ppv-ziwei .pp-ziwei-mid-gz {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-top: 1px;
}

.ppv-ziwei .pp-ziwei-mid-gz b {
  font-family: var(--zd-font-serif);
  font-size: 13px;
  font-weight: 700;
}