/* ===========================================================
   四柱排盘 · 专业细盘
   -----------------------------------------------------------
   由原 chart-v3.css 更名而来（原文名 v3 只表示追加顺序，不表含义）。
   原先此文件里对 .result-tabs 列数的二次覆盖已回归 chart.css，
   页签列数现在只有一处定义。
   =========================================================== */

/* ---------- 大运 / 流年 / 流月 横排表 ---------- */
.dayun-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-line) transparent;
  /* 左右各留 3px：滚动框两侧让出一线，被切断的那一列会**露出边缘**，
     用户一眼就知道还有内容可以横滑。站长原话是「流月多出两个侧进行滑动查看」；
     流月 12 列 > 一屏 10 列，正是靠这个露边提示可滑。
     若改回 0，12 列会像被硬裁掉一样，看不出可滑。 */
  padding-inline: 3px;
  scroll-padding-inline: 3px;
}

.dayun-table {
  display: flex;
  min-width: max-content;
  gap: 5px;
  padding: 2px 2px 10px;
}

/* ---------- 列宽：目标是「一屏看见 10 步运」 ----------
   站长 2026-09-25 要求「在一个页面可以展现 10 个流年大运」。

   实测（1440px Chrome）：.chart-app 宽 880px，扣掉内边距后
   .dayun-scroll 可用宽 **808px**。10 列 + 9 个 gap 要塞进 808px：
     · gap 5px 时每列上限 (808 − 45) / 10 = 76.3px
   但「装得下」不等于「不溢出」—— 列宽必须 ≥ 列内最宽元素的自然宽。
   列内最宽的是 .dy-gz 里的 .gz-pair（干支字 + 十神**并排**，且 nowrap）。

   实测 .gz-pair 自然宽（十神缩写 + .62em 相对字号）：

     干支字号 | 全名「（正印）」 | 缩写「（印）」
        26px  |   130px → 5 列   |  104px → 6 列
        22px  |   110px → 6 列   |   88px → 8 列
        20px  |   100px → 7 列   |   80px → 8 列
        18px  |    90px → 7 列   |   72px → 9 列
        16px  |    80px → 8 列   |   64px → **10 列**  ← 采用
        15px  |    75px → 9 列   |   60px → 11 列

   取 16px + 缩写：pair 64px，加左右 padding 各 3px、边框各 1px = **72px**，
   10 列合计 72×10 + 5×9 = 765px ≤ 808px，不折行、不溢出、还留 43px 余量。

   ⚠ 这两个值是**绑定的取舍点**，不能单独改：
     · 只把十神改回全名 → 26px 时列宽要 138px，一屏掉到 5 列；
     · 只把字号升回 26px → 列宽要 112px，一屏掉到 6 列。
   除非同时把 .chart-app 放宽到 1100px 以上，否则不要动这两个值。
   改完必须跑 tools/verify-chart-ui.js 的【D】组（它量 scrollWidth > clientWidth，
   折行不会报错，但列会溢出边框，肉眼要盯很久才看得出来）。 */
.dayun-table .dy-col {
  flex: 0 0 auto;
  width: 40px;
  min-height: 118px;
  padding: 10px 3px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--paper-1);
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.dayun-table .dy-col:hover { transform: translateY(-1px); border-color: var(--gold-line); background: var(--gold-soft); }
.dayun-table .dy-col:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.dayun-table .dy-col.active,
.dayun-table.liunian .dy-col.cur,
.dayun-table.liuyue .dy-col.cur {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.dayun-table .dy-year,
.dayun-table .dy-age {
  display: block;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.5;
}

.dayun-table .dy-gz {
  display: block;
  margin: 5px 0 3px;
  font-size: var(--fs-xl);
  line-height: 1.3;
  letter-spacing: var(--ls-normal);
}

/* 干支竖排两行，每行「干支字 +（完整十神）」：
        甲（正印）
        戌（食神）
   站长 2026-09-23 指定此版式（参考图即如此），不是全横排。

   ⚠ 版式变迁（别再改回去）：
     初版 `.stem/.branch/.ss-gan/.ss-zhi { display: block }` —— 干支两行、
       十神**再另起一行**，一列四行，靠上下对位猜谁配谁（站长说不清）；
     二版 `.gz-pair { display: inline-flex }` 全横排「甲（印）戌（伤）」——
       治好了对位，但一柱四字在手机端要 90px 列宽，把列撑得过宽；
     现版：`.gz-pair` 回到 block（竖排），但十神在**各自那一行内**右跟，
       不再是单独的第三、四行。既一一对应，又不占横向宽度。

   ⚠ 关键是 display: block：两个 .gz-pair 各占一行。
   若改 inline/inline-flex，两行会并成一行，又变回全横排。 */
.dayun-table .dy-gz .gz-pair {
  display: block;
  white-space: nowrap;
}
.dayun-table .dy-gz .gz-ss {
  color: var(--ink-3);
  /* 极窄列（手机端 44px）下的兜底：十神允许被压缩到不溢出，
     但**不可见裁切** —— 宁可整列换行也不让字跑出列框。 */
  min-width: 0;
  overflow-wrap: anywhere;
  /* 相对干支字号，随各表字号自动缩放。
     2026-09-25 由 .62em 提到 .82em，又因手机端列宽吃紧收到 .72em。
     改这个值必须同步复核列宽：.82em 时一柱 35px（手机端 44px 列），
     .72em 时一柱 33px（手机端 42px 列）。 */
  font-size: .72em;
  font-weight: var(--fw-normal);
  letter-spacing: 0;
  margin-left: 1px;
}

/* 当前运标记。
   ⚠ 这里曾写作 color: var(--gold)，已于本轮删除，原因记录如下：
   gzCells() 把 gzClass(gan/zhi) 直接挂在 .dy-gz 上，故同一元素上同时存在
   .dy-gz 与 .wx-火 之类。本条选择器特异性 (0,3,0) 高于 .wx-火 的 (0,1,0)，
   一旦改 color 就会把五行本色盖成金色 —— 表现是「流月表里壬午、癸未莫名其妙
   变成金色」，站长反映的「大运流年怎么去又变了」即指此。
   干支的五行色是这张表的读数本身，不能被状态标记夺走；
   左右两侧的金色竖线（.dy-col.is-now::before）已足够标注当前所处。 */
.dayun-table .dy-col.is-now .dy-gz { font-weight: 600; }

/* 小运行 */
.dayun-table .dy-xy {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--line);
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.4;
}

/* 流年表略窄；流月表要容纳 12 列，最窄 */
.dayun-table.liunian .dy-col { width: 40px; }
.dayun-table.liunian .dy-gz { font-size: 17px; }
.dayun-table.liuyue .dy-col { width: 40px; }
.dayun-table.liuyue .dy-gz { font-size: 17px; }
.dayun-table.liuyue .dy-year { color: var(--ink); font-size: var(--fs-xs); }

/* 小运表沿用大运列宽，但条目更多、字略小 */
.dayun-table.xiaoyun .dy-col { width: 40px; }
.dayun-table.xiaoyun .dy-age { font-size: 11px; }

/* 行内的「今」标记 */
.dy-now {
  display: inline-block;
  margin-left: 3px;
  padding: 0 3px;
  border-radius: 4px;
  background: var(--gold);
  color: var(--ink-invert);
  font-size: 10px;
  font-style: normal;
  line-height: 1.5;
  vertical-align: 1px;
}

/* ---------- 干支关系连线图 ---------- */
.gz-switch,
.lq-switch,
.cls-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-4);
}

.gz-switch button,
.lq-switch button,
.cls-switch button {
  position: relative;
  padding: 5px var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.gz-switch button.active,
.lq-switch button.active,
.cls-switch button.active {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
}

/* 书名后的匹配条数角标。页签只列**有匹配**的书，故此处显示的是本次实际命中条数。 */
.cls-switch button .cls-n {
  margin-left: 5px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--line);
  color: var(--ink-3);
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
}

.cls-switch button.active .cls-n {
  background: var(--gold);
  color: var(--card);
}

/* 章节标题后的命中理由：说明该章为何被列出（如「十神『正官』」）。 */
.cls-entry h4 .cls-reason {
  margin-left: var(--sp-2);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: normal;
}

.gz-diagram-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gz-diagram {
  position: relative;
  min-width: 360px;
  padding: var(--sp-5) 0 var(--sp-2);
}

.gz-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.gz-diagram .gz-pillar-label {
  fill: var(--ink-2);
  font-size: 12px;
  text-anchor: middle;
}

/* 干支：纯彩色大字，**不套圆圈**（站长 2026-09-23 指定的参考图版式）。
   ⚠ 旧版这里是「.gz-node-disc 圆圈 + .gz-node-text」，每个字套一个
   r=21 的大圈。圆圈不承载任何信息，却比字本身更抢眼，四个字占满一行。
   去掉圆圈后 .gz-node-disc 这条规则也一并删除（已无元素使用）。
   字号改由 JS 按视口写入 font-size 属性（见 buildDiagram 的 GAN_FS/ZHI_FS）。 */
.gz-diagram .gz-node-text {
  text-anchor: middle;
  dominant-baseline: central;
  font-weight: var(--fw-medium);
}

.gz-diagram .gz-link {
  fill: none;
  stroke-width: 1.4;
}

/* 端点小牌：圈住连线的首尾那个字。
   参考图里小牌是**椭圆**（.gz-end-badge），不是正圆 —— 单字略窄，
   正圆会在字两侧留出多余的空白。填充取纸色以遮住穿过的线。

   ⚠ 小牌圆心 = 线端点 x（不是柱心 cx）。旧版取柱心，导致小牌画在
   (cx, 线y) 上、而它想指的字在 (cx, 字基线y)，两者 x 同 y 异 ——
   小牌带着线斜插进下一排字里。详见 chart.js buildDiagram 的注释。 */
.gz-diagram .gz-end-badge {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 1.2;
}

/* 端点引线：从线端直升到它所连那个字的底部，说明「这条线的这一端
   指的是这个字」。竖向细虚线，走字与字之间的空隙，不横穿任何字。

   ⚠ 这条引线是 2026-09-23 第二次重做时新增的。旧版没有引线，
   靠「把小牌挪到柱心」来表达归属，而挪过去的同时线也跟着斜了。
   引线让归属关系明确，同时线本身保持水平直线（不违背参照图版式）。

   stroke-width 取 1：比连线（1.4）细一档，视觉上属于辅助元素而非关系本身。
   dasharray 让它不喧宾夺主，也避免与连线混淆。 */
.gz-diagram .gz-end-lead {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: .75;
  pointer-events: none;
}

.gz-diagram .gz-end-text {
  fill: var(--ink-2);
  text-anchor: middle;
  dominant-baseline: central;
}

/* 关系名：居中压在线条**上方**（参考图如此），不再带背景块。
   ⚠ 旧版压在弧顶且衬一块 .gz-link-label-bg 白色圆角矩形 ——
   直线版式下线条是水平的，标签就在线正上方，背景块反而显得脏。
   .gz-link-label-bg 规则保留但已无元素使用，删掉以免误导。 */
.gz-diagram .gz-link-label {
  fill: var(--ink-2);
  text-anchor: middle;
  dominant-baseline: auto;
  font-size: 12px;
}

.gz-diagram g.links { fill: none; }

/* 单条连线可点击查看古籍原文 */
.gz-diagram .gz-link-item { cursor: pointer; }
.gz-diagram .gz-link-item:focus { outline: none; }

.gz-diagram .gz-link-item:hover .gz-link-mark,
.gz-diagram .gz-link-item:focus .gz-link-mark { stroke-width: 2.6; }

.gz-diagram .gz-link-mark {
  fill: none;
  stroke-width: 1.4;
}

/* 透明加粗的点击热区：细线也点得中 */
.gz-diagram .gz-link-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
}

.gz-diagram .gz-self-ring {
  fill: none;
  stroke-width: 1.4;
}

/* 关系类型配色：线色非文本，可用较亮色；取值见 tokens.css */
.gz-diagram .rel-he .gz-link-mark { stroke: var(--rel-he); }
.gz-diagram .rel-he .gz-link-label { fill: var(--rel-he); }
.gz-diagram .rel-chong .gz-link-mark { stroke: var(--rel-chong); }
.gz-diagram .rel-chong .gz-link-label { fill: var(--rel-chong); }
.gz-diagram .rel-xing .gz-link-mark { stroke: var(--rel-xing); }
.gz-diagram .rel-xing .gz-link-label { fill: var(--rel-xing); }
.gz-diagram .rel-hai .gz-link-mark { stroke: var(--rel-hai); }
.gz-diagram .rel-hai .gz-link-label { fill: var(--rel-hai); }
.gz-diagram .rel-other .gz-link-mark { stroke: var(--rel-other); stroke-dasharray: 3 3; }
.gz-diagram .rel-other .gz-link-label { fill: var(--rel-other); }

/* 图例 */
.gz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.gz-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.gz-legend i {
  display: inline-block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
}

.gz-legend i.lg-he { background: var(--rel-he); }
.gz-legend i.lg-chong { background: var(--rel-chong); }
.gz-legend i.lg-xing { background: var(--rel-xing); }
.gz-legend i.lg-hai { background: var(--rel-hai); }
.gz-legend i.lg-other { background: var(--rel-other); }

.gz-empty {
  padding: var(--sp-6) 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ---------- 干支关系文字提示 ---------- */
.rel-hint {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card-soft);
}

.rel-hint-line {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.rel-hint-line + .rel-hint-line { border-top: 1px dashed var(--line); }

.rel-hint-line b {
  flex: 0 0 64px;
  color: var(--gold);
  font-weight: var(--fw-normal);
}

.rel-hint-line span { color: var(--ink); }

.rel-hint-card { margin-top: var(--sp-4); }

/* ---------- 关系索引：连线的可点击替代品 ---------- */
.rel-index { margin-top: var(--sp-4); }

.rel-index h3 {
  margin: 0 0 var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}

.rel-index-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.rel-index-chip {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.rel-index-chip:hover { background: var(--gold-soft); }

.rel-index-chip.rel-he { border-color: var(--rel-he); color: var(--rel-he); }
.rel-index-chip.rel-chong { border-color: var(--rel-chong); color: var(--rel-chong); }
.rel-index-chip.rel-xing { border-color: var(--rel-xing); color: var(--rel-xing); }
.rel-index-chip.rel-hai { border-color: var(--rel-hai); color: var(--rel-hai); }
.rel-index-chip.rel-other { border-color: var(--rel-other); color: var(--rel-other); }

/* ---------- 五行流通图 ---------- */
.flow-diagram svg {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

.flow-diagram .flow-line {
  stroke-width: 2;
  opacity: .75;
}

.flow-diagram .flow-line.ke {
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  opacity: .6;
}

.flow-diagram .flow-arrow { opacity: .8; }

.flow-diagram .flow-node {
  fill: var(--card);
  stroke-width: 2;
}

/* 本命未出现的五行：空心虚边，一眼看出「缺」 */
.flow-diagram .flow-node.is-empty {
  fill: var(--paper-2);
  stroke-dasharray: 3 3;
  stroke-width: 1.4;
  opacity: .65;
}

.flow-diagram .flow-node-text {
  font-size: 19px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.flow-diagram .flow-count {
  fill: var(--ink-2);
  font-size: 11px;
  text-anchor: middle;
}

.flow-legend i.lg-sheng,
.flow-legend i.lg-ke,
.flow-legend i.lg-size {
  display: inline-block;
  width: 14px;
  height: 0;
  margin-right: 5px;
  border-top: 2px solid var(--gold);
  vertical-align: middle;
}

.flow-legend i.lg-ke {
  border-top-style: dashed;
  border-top-color: var(--ink-2);
}

.flow-legend i.lg-size {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--ink-2);
  border-radius: 50%;
}

/* ---------- 称骨 ---------- */
.chenggu-total {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.chenggu-total small {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.chenggu-total strong {
  color: var(--gold);
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
}

.chenggu-verse {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--gold-soft);
}

.chenggu-verse small {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.chenggu-verse p {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.9;
}

/* ---------- 命卦 · 东西四命 ---------- */
.minggua-main {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.minggua-main .mg-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--gold);
  font-size: var(--fs-lg);
}

.minggua-main .mg-gua {
  color: var(--ink);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-normal);
}

.minggua-main .mg-type {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 12.5px;
}

/* ---------- 人元司令分野 ---------- */
.ry-month {
  margin: 0 0 var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.ry-month b { color: var(--gold); font-weight: var(--fw-normal); }

.ry-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.ry-col {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card-soft);
}

.ry-col h4 {
  margin: 0 0 var(--sp-2);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: var(--fw-normal);
}

.ry-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}

.ry-item:last-child { border-bottom: 0; }
.ry-item b { color: var(--ink); font-weight: var(--fw-normal); }
.ry-item span { color: var(--ink-2); }

/* ---------- 宫位 · 六亲 · 社会关系 ---------- */
.lq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

.lq-card {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card-soft);
}

.lq-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: var(--sp-2);
}

.lq-head b {
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

.lq-head .lq-gz {
  color: var(--gold);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-normal);
}

.lq-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-2);
}

.lq-tag {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-size: 12.5px;
}

.lq-note {
  margin: 0;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.7;
}

.lq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.lq-table th {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: var(--fw-normal);
  text-align: left;
  white-space: nowrap;
}

.lq-table td {
  padding: 9px 10px;
  border-bottom: 1px dashed var(--line);
  line-height: 1.6;
}

.lq-table td.lq-gz-cell {
  color: var(--gold);
  letter-spacing: var(--ls-normal);
  white-space: nowrap;
}

/* ---------- 智能古籍参考 ---------- */
.cls-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 6px;
}

.cls-head b {
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.cls-head .cls-alias {
  color: var(--gold);
  font-size: var(--fs-sm);
}

.cls-head .cls-meta {
  color: var(--ink-2);
  font-size: 12.5px;
}

.cls-desc {
  margin: 0 0 var(--sp-1);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.cls-source {
  margin: 0 0 var(--sp-3);
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.cls-entry { margin-bottom: var(--sp-4); }

.cls-entry h4 {
  margin: 0 0 var(--sp-2);
  color: var(--gold);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.cls-text {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--gold-soft);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-base);
  line-height: 2;
  text-align: justify;
}

/* 长章的折叠呈现。折叠段与全文段是同一章的两段，样式保持一致，
   只有折叠段末尾多一个省略号提示「还有下文」。 */
.cls-text.cls-collapsed { margin-bottom: 0; }

.cls-text.cls-full { margin-top: var(--sp-2); }

.cls-text .cls-ellipsis {
  color: var(--ink-3);
  letter-spacing: .1em;
}

/* 展开全文 / 收起。做成低调的文字按钮，不抢正文的视觉重心。 */
.cls-more {
  display: block;
  margin: var(--sp-2) 0 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
}

.cls-more:hover { text-decoration: underline; }

.cls-doubt {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--card-soft);
}

.cls-doubt b {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
}

.cls-doubt p {
  margin: 0 0 var(--sp-1);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.75;
}

.cls-doubt p:last-child { margin-bottom: 0; }

/* ---------- 断事笔记 ---------- */
.note-input {
  width: 100%;
  min-height: 200px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--card-soft);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.85;
  resize: vertical;
}

.note-input:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.note-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* 吸顶保存条：笔记页很长，保存动作不能只在页尾够一次。
   sticky 挂在视口底部，跨页签切换不受影响（只在笔记页签内可见）。 */
.note-savebar {
  position: sticky;
  bottom: 0;
  z-index: calc(var(--z-sticky) + 1);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(251,250,246,.96);
  backdrop-filter: blur(6px);
}

.note-savebar .note-actions { margin-top: 0; flex-wrap: wrap; }

/* 四个主项的列表行：一行一标签 + 内容摘要 + 右箭头，点击展开成输入框 */
.note-rows { display: grid; }

.note-row {
  display: grid;
  grid-template-columns: 68px 1fr 18px;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  text-align: left;
  cursor: pointer;
}

.note-row:last-child { border-bottom: 0; }
.note-row:hover { background: var(--card-soft); }
.note-row-label { color: var(--ink-2); }
.note-row-value { color: var(--ink-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-row-arrow { color: var(--gold); font-size: var(--fs-lg); text-align: right; }

/* 健康与六亲始终行内展开，不占列表行的位置 */
.note-inline { display: grid; gap: 5px; padding: 9px 2px; }
.note-inline > span { color: var(--ink-2); font-size: var(--fs-sm); }

.note-status {
  color: var(--ink-2);
  font-size: 12.5px;
}

.note-summary {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-summary li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  line-height: 1.75;
}

.note-summary li:last-child { border-bottom: 0; }

/* ---------- 智能总结：古籍证据驱动的可视化仪表板 ---------- */
.insight-dashboard {
  display: grid;
  gap: 16px;
  padding-bottom: var(--sp-4);
}

.insight-hero,
.paid-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.insight-hero {
  min-height: 184px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(180,145,81,.34);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 12%, rgba(180,145,81,.18), transparent 30%),
    linear-gradient(135deg, rgba(9,66,57,.98), rgba(13,54,48,.94));
  color: #f6f0e4;
  overflow: hidden;
}

.insight-hero h2,
.paid-zone-head h2 { margin: 5px 0 9px; font-size: clamp(28px, 5vw, 44px); font-family: var(--serif); }
.insight-hero h2 { color: #f7f1e5; }
.insight-hero p { max-width: 620px; margin: 0; color: rgba(246,240,228,.72); line-height: 1.8; }
.insight-hero .section-kicker { color: #d5b574; }

.insight-seal {
  flex: 0 0 112px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border: 1px solid rgba(213,181,116,.66);
  border-radius: 50%;
  outline: 1px solid rgba(213,181,116,.2);
  outline-offset: 8px;
  text-align: center;
}
.insight-seal span { display: block; color: #e2c27e; font: 48px/1 var(--serif); }
.insight-seal small { margin-top: 8px; color: rgba(246,240,228,.72); letter-spacing: .12em; }

.insight-overview,
.insight-panel,
.paid-zone {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.58);
}

.insight-overview { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 28px; padding: 26px; }
.insight-orbit {
  width: 158px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#688b69 0 22%, #bd563f 22% 43%, #b59252 43% 62%, #8c9290 62% 79%, #456d88 79% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  position: relative;
}
.insight-orbit::before { content: ''; position: absolute; inset: 13px; border-radius: inherit; background: var(--paper-1); }
.insight-orbit > div { position: relative; text-align: center; }
.insight-orbit b { display: block; color: var(--ink); font: 40px/1 var(--serif); }
.insight-orbit span { display: block; margin-top: 7px; color: var(--ink-3); font-size: 12px; }
.overview-copy > small { color: var(--gold); letter-spacing: .12em; }
.overview-copy h3 { margin: 5px 0 8px; font: clamp(23px, 3.2vw, 34px)/1.3 var(--serif); }
.overview-copy p { margin: 0; color: var(--ink-2); line-height: 1.8; }
.overview-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.overview-pills span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: var(--paper-1); font-size: 12px; }

.insight-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.insight-panel { padding: clamp(18px, 3vw, 28px); }
.insight-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.insight-panel-head small { color: var(--gold); letter-spacing: .09em; }
.insight-panel-head h3 { margin: 4px 0 0; font: 24px/1.3 var(--serif); }
.insight-panel-head > span { color: var(--ink-3); font-size: 12px; }

.insight-wx-row { display: grid; grid-template-columns: 22px 1fr 48px 22px; align-items: center; gap: 10px; margin: 12px 0; }
.insight-wx-row > span { font-family: var(--serif); font-weight: 700; }
.insight-wx-row > b { font-size: 12px; font-weight: 600; text-align: right; }
.insight-wx-row > small { color: var(--ink-3); }
.insight-wx-track { height: 8px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.insight-wx-track i { display: block; height: 100%; border-radius: inherit; background: currentColor; transform-origin: left; animation: insight-grow .7s var(--ease-out) both; }
.insight-wx-row.wx-木 { color: #3d7b56; }.insight-wx-row.wx-火 { color: #b74735; }.insight-wx-row.wx-土 { color: #9c6d2d; }.insight-wx-row.wx-金 { color: #747b7a; }.insight-wx-row.wx-水 { color: #35678a; }
@keyframes insight-grow { from { transform: scaleX(.08); opacity: .2; } }

.radar-panel svg { display: block; width: min(100%, 260px); margin: -10px auto -4px; overflow: visible; }
.radar-axis line { stroke: var(--line); stroke-dasharray: 3 4; }
.radar-axis text { fill: var(--ink-2); font-size: 11px; text-anchor: middle; }
.radar-panel polygon { fill: rgba(180,145,81,.22); stroke: var(--gold); stroke-width: 1.5; }
.radar-panel circle { fill: var(--gold); }
.radar-panel > p { margin: 0; color: var(--ink-3); font-size: 12px; text-align: center; }

.use-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.use-path article { min-height: 138px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,var(--paper-1),rgba(244,239,228,.7)); }
.use-path i { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 16px; border-radius: 50%; background: var(--deep-green); color: var(--paper-1); font-style: normal; font-size: 12px; }
.use-path b,.use-path span,.use-path small { display: block; }
.use-path span { margin: 8px 0 4px; color: var(--ink-2); font-size: 13px; }
.use-path small { color: var(--ink-3); line-height: 1.55; }
.insight-caution { margin: 14px 0 0; padding: 12px 14px; border-left: 2px solid var(--gold); background: var(--gold-soft); color: var(--ink-2); font-size: 12.5px; line-height: 1.7; }
.overview-copy p b { color: var(--deep-green); }
.use-result { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.use-result article { min-height: 126px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-1); }
.use-result small,.use-result b,.use-result span { display: block; }
.use-result small { color: var(--ink-3); letter-spacing: .12em; }
.use-result b { margin: 12px 0 8px; font: 28px/1.1 var(--serif); }
.use-result span { color: var(--ink-2); font-size: 12px; }
.use-result .is-use { border-color: rgba(19,78,67,.45); background: rgba(19,78,67,.055); }.use-result .is-use b { color: var(--deep-green); }
.use-result .is-joy { border-color: rgba(180,145,81,.48); background: rgba(180,145,81,.07); }.use-result .is-joy b { color: var(--gold); }
.use-result .is-avoid { border-color: rgba(169,65,48,.3); background: rgba(169,65,48,.045); }.use-result .is-avoid b { color: #a94130; }
.use-verdict { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 10px; margin-top: 14px; padding: 13px 15px; border-left: 3px solid var(--gold); background: var(--gold-soft); }
.use-verdict > b { font-size: 13px; }.use-verdict > span { color: var(--deep-green); font-size: 17px; font-weight: 700; }.use-verdict p { margin: 0; color: var(--ink-3); font-size: 11.5px; }
.use-quote { margin: 12px 0 0; padding: 12px 15px; border: 0; border-top: 1px solid var(--line-soft); color: var(--ink-2); font: 13px/1.8 var(--serif); }

.character-map { display: flex; align-items: center; gap: 24px; }
.character-core { flex: 0 0 92px; aspect-ratio: 1; display: grid; place-content: center; border: 1px solid var(--gold-line); border-radius: 50%; text-align: center; }
.character-core b { font: 38px/1 var(--serif); }.character-core small { margin-top: 6px; color: var(--ink-3); }
.character-traits { display: flex; flex-wrap: wrap; gap: 9px; }
.character-traits span { padding: 9px 14px; border-radius: 999px; background: rgba(9,66,57,.07); color: var(--deep-green); font-weight: 600; }
.character-panel > p { color: var(--ink-2); line-height: 1.8; }
.ten-god-strip { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 13px; border-top: 1px solid var(--line-soft); }
.ten-god-strip span { color: var(--gold); font-size: 12px; }

.insight-sources { display: grid; gap: 0; }
.insight-source { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.insight-source:last-child { border-bottom: 0; }
.source-no { color: var(--gold); font: 16px var(--serif); }
.insight-source b,.insight-source small { display: block; }.insight-source small { margin-top: 3px; color: var(--ink-2); }
.insight-source p { margin: 4px 0 0; color: var(--ink-3); font-size: 12px; }
.insight-source > i { padding: 5px 8px; border-radius: 99px; background: rgba(47,112,74,.09); color: #2f704a; font-size: 11px; font-style: normal; }
.insight-source.is-muted { opacity: .55; }.insight-source.is-muted > i { background: var(--line-soft); color: var(--ink-3); }

/* 调候可视化：动画只承载“温度位置、取用次序、用字落盘”三类信息。 */
.climate-panel { overflow: hidden; background: linear-gradient(155deg,rgba(255,255,255,.76),rgba(245,238,222,.72)); }
.temperature-axis { display: grid; grid-template-columns: 22px 1fr 22px; align-items: center; gap: 12px; margin: 26px 4px 32px; color: var(--ink-3); font: 13px var(--serif); }
.temperature-line { position: relative; height: 6px; border-radius: 99px; background: linear-gradient(90deg,#466e8b 0%,#d8d0b4 50%,#ad4536 100%); box-shadow: inset 0 0 0 1px rgba(16,54,49,.08); }
.temperature-line::after { content: ''; position: absolute; left: 50%; top: -8px; bottom: -8px; border-left: 1px dashed rgba(18,65,58,.26); }
.temperature-line i { position: absolute; left: var(--heat); top: 50%; width: 36px; height: 36px; border: 1px solid rgba(180,145,81,.54); border-radius: 50%; background: rgba(253,250,243,.92); box-shadow: 0 7px 20px rgba(32,48,44,.14); transform: translate(-50%,-50%); animation: climate-slide 900ms cubic-bezier(.22,.75,.24,1) both; }
.temperature-line b { position: absolute; left: var(--heat); top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--deep-green); transform: translate(-50%,-50%); animation: climate-pulse 2.6s ease-in-out infinite; }
@keyframes climate-slide { from { left: 50%; opacity: .2; } }
@keyframes climate-pulse { 50% { box-shadow: 0 0 0 7px rgba(16,76,66,.1); } }
.climate-path { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.climate-path::before { content: ''; position: absolute; left: 7%; right: 7%; top: 26px; height: 1px; background: linear-gradient(90deg,transparent,var(--gold),transparent); transform-origin: left; animation: evidence-draw 750ms var(--ease-out) both; }
.climate-step { position: relative; min-width: 0; padding: 0 8px 14px; text-align: center; opacity: 0; animation: evidence-rise 560ms var(--ease-out) var(--delay) forwards; }
.climate-step i { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border: 1px solid var(--gold-line); border-radius: 50%; background: var(--paper-1); color: var(--gold); font: normal 20px var(--serif); box-shadow: 0 5px 16px rgba(42,52,47,.07); }
.climate-step b,.climate-step small { display: block; }.climate-step b { color: var(--ink); font: 18px/1.35 var(--serif); }.climate-step small { margin-top: 5px; color: var(--ink-3); font-size: 11px; line-height: 1.45; }
@keyframes evidence-draw { from { transform: scaleX(0); opacity: 0; } }
@keyframes evidence-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.wx-columns { display: grid; grid-template-columns: repeat(5,1fr); align-items: end; gap: 10px; min-height: 245px; padding: 10px 4px 0; }
.wx-column { display: grid; justify-items: center; gap: 5px; color: var(--ink-2); }
.wx-column-track { position: relative; width: min(34px,70%); height: 148px; border-radius: 99px; background: rgba(18,65,58,.055); overflow: hidden; }
.wx-column-track i { position: absolute; inset: auto 0 0; height: var(--level); border-radius: inherit; background: currentColor; transform-origin: bottom; animation: column-rise 800ms cubic-bezier(.22,.75,.24,1) both; }
@keyframes column-rise { from { transform: scaleY(.04); opacity: .25; } }
.wx-column b { font: 18px var(--serif); }.wx-column span { font-size: 11px; font-weight: 700; }.wx-column small { color: var(--ink-3); font-size: 11px; }
.wx-column.wx-木 { color:#3d7b56 }.wx-column.wx-火 { color:#b74735 }.wx-column.wx-土 { color:#9c6d2d }.wx-column.wx-金 { color:#747b7a }.wx-column.wx-水 { color:#35678a }
.chart-caption { margin: 18px 0 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.65; text-align: center; }

.use-order { padding: 14px 16px; border-left: 3px solid var(--gold); background: var(--gold-soft); }
.use-order small,.use-order b { display: block; }.use-order small { color: var(--ink-3); letter-spacing: .1em; }.use-order b { margin-top: 4px; color: var(--deep-green); font: 23px var(--serif); }
.presence-map { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 13px; }
.presence-node { position: relative; min-height: 84px; padding: 14px 12px 12px 54px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.58); animation: evidence-rise 520ms var(--ease-out) both; }
.presence-node b { position: absolute; left: 13px; top: 15px; font: 28px/1 var(--serif); }.presence-node span,.presence-node small { display:block; }.presence-node span { color: var(--ink); font-weight: 700; }.presence-node small { margin-top: 6px; color: var(--ink-3); font-size: 11px; line-height: 1.4; }
.presence-node.state-visible { border-color: rgba(47,112,74,.35); }.presence-node.state-visible b { color:#2f704a; }
.presence-node.state-hidden { border-color: rgba(180,145,81,.48); }.presence-node.state-hidden b { color:var(--gold); }
.presence-node.state-absent { opacity:.66; }.presence-node.state-absent b { color:var(--ink-3); }
.avoid-box { margin-top: 13px; padding: 13px 15px; border: 1px solid rgba(169,65,48,.18); border-radius: 12px; background: rgba(169,65,48,.035); }.avoid-box b { color:#9d3d31; font-size:12px; }.avoid-box p { margin:5px 0 0; color:var(--ink-2); font-size:12px; line-height:1.65; }

.evidence-chain { position: relative; display: grid; gap: 0; }
.evidence-chain::before { content:''; position:absolute; left:23px; top:26px; bottom:26px; width:1px; background:linear-gradient(var(--gold),rgba(180,145,81,.14)); animation:evidence-draw 900ms var(--ease-out) both; transform-origin:top; }
.evidence-chain-item { position:relative; display:grid; grid-template-columns:48px 1fr; gap:15px; padding:10px 0 24px; opacity:0; animation:evidence-rise 560ms var(--ease-out) var(--delay) forwards; }
.evidence-chain-item:last-child { padding-bottom:0; }
.evidence-index { z-index:1; display:grid; place-items:center; width:47px; height:47px; border:1px solid var(--gold-line); border-radius:50%; background:var(--paper-1); color:var(--gold); font:14px var(--serif); }
.evidence-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; padding:3px 0 11px; }.evidence-title b { color:var(--deep-green); font:21px var(--serif); }.evidence-title span { color:var(--ink-3); font-size:12px; }
.evidence-body dl { margin:0; border-top:1px solid var(--line-soft); }.evidence-body dl>div { display:grid; grid-template-columns:78px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); }.evidence-body dt { color:var(--gold); font-size:11px; letter-spacing:.06em; }.evidence-body dd { margin:0; color:var(--ink-2); font-size:13px; line-height:1.75; }.evidence-body dd.classic-quote { color:var(--ink); font-family:var(--serif); font-size:14px; }

.paid-zone { padding: clamp(20px, 4vw, 32px); background: linear-gradient(155deg,rgba(247,243,234,.94),rgba(237,230,215,.8)); }
.paid-zone-head h2 { font-size: clamp(25px, 4vw, 34px); }.paid-zone-head p { margin: 0; color: var(--ink-2); }
.member-mark { padding: 7px 11px; border: 1px solid var(--gold-line); border-radius: 99px; color: var(--gold); font-size: 12px; }
.paid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 16px; }
.insight-paid-card { position: relative; min-height: 230px; padding: 18px; border: 1px solid rgba(180,145,81,.38); border-radius: 16px; background: rgba(255,255,255,.66); overflow: hidden; }
.paid-preview { display: flex; align-items: flex-end; gap: 7px; height: 54px; margin-bottom: 20px; filter: blur(2.5px); opacity: .42; }
.paid-preview span { flex: 1; height: 35%; border-radius: 4px 4px 0 0; background: var(--gold); }.paid-preview span:nth-child(2){height:82%}.paid-preview span:nth-child(3){height:58%}
.paid-copy small { color: var(--gold); }.paid-copy h3 { margin: 4px 0 8px; font: 22px var(--serif); }.paid-copy p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.7; }
.paid-lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: linear-gradient(to bottom,transparent 20%,rgba(250,248,242,.91) 58%); }
.paid-lock span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--gold-line); border-radius: 50%; background: var(--paper-1); color: var(--gold); font-size: 12px; }
.paid-lock b { color: var(--deep-green); font-size: 13px; }
.paid-cta { width: 100%; text-align: center; }
.insight-disclaimer { margin: 0; padding: 0 8px; color: var(--ink-3); font-size: 11.5px; line-height: 1.7; text-align: center; }

@media (max-width: 620px) {
  .insight-dashboard { gap: 12px; }
  .insight-hero { min-height: 154px; padding: 22px 18px; border-radius: 18px; }
  .insight-hero p { font-size: 12.5px; }
  .insight-seal { flex-basis: 78px; }.insight-seal span { font-size: 34px; }.insight-seal small { font-size: 10px; }
  .insight-overview { grid-template-columns: 104px 1fr; gap: 16px; padding: 18px 14px; }
  .insight-orbit { width: 104px; }.insight-orbit::before { inset: 9px; }.insight-orbit b { font-size: 30px; }
  .overview-pills span:first-child { width: 100%; }
  .insight-grid { grid-template-columns: 1fr; gap: 12px; }
  .use-path { grid-template-columns: 1fr; }
  .use-path article { min-height: 0; display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; }
  .use-path i { grid-row: 1 / 4; margin: 0; }.use-path b,.use-path span,.use-path small { grid-column: 2; }.use-path span { margin: 3px 0; }
  .use-result { grid-template-columns: repeat(3,1fr); gap: 6px; }
  .use-result article { min-height: 108px; padding: 12px 9px; }.use-result b { font-size: 21px; }
  .use-verdict { grid-template-columns: 68px 1fr; }.use-verdict p { grid-column: 1 / -1; }
  .character-map { gap: 14px; }.character-core { flex-basis: 76px; }.character-core b { font-size: 31px; }
  .character-traits { gap: 6px; }.character-traits span { padding: 7px 9px; font-size: 12px; }
  .paid-zone-head { align-items: flex-start; }.member-mark { flex: 0 0 auto; }
  .paid-grid { grid-template-columns: 1fr; }.insight-paid-card { min-height: 168px; }
  .insight-source { grid-template-columns: 30px 1fr; }.insight-source > i { grid-column: 2; justify-self: start; }
  .climate-path { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px; }
  .climate-path::before { left: 8%; right: 8%; }.climate-step { padding-inline: 2px; }.climate-step i { width: 42px; height: 42px; font-size: 17px; }.climate-step b { font-size: 14px; }.climate-step small { font-size: 9.5px; }
  .temperature-axis { margin: 23px 0 27px; gap: 8px; }
  .wx-columns { min-height: 206px; gap: 5px; }.wx-column-track { height: 122px; width: 25px; }.wx-column b { font-size: 16px; }.wx-column span,.wx-column small { font-size: 9.5px; }
  .presence-map { grid-template-columns: 1fr 1fr; gap: 6px; }.presence-node { min-height: 78px; padding: 12px 8px 10px 43px; }.presence-node b { left:10px; top:13px; font-size:24px; }.presence-node span { font-size:12px; }.presence-node small { font-size:9.5px; }
  .evidence-chain::before { left:18px; }.evidence-chain-item { grid-template-columns:37px 1fr; gap:11px; }.evidence-index { width:37px; height:37px; font-size:12px; }.evidence-title b { font-size:18px; }.evidence-body dl>div { grid-template-columns:1fr; gap:4px; padding:9px 0; }.evidence-body dd { font-size:12px; }.evidence-body dd.classic-quote { font-size:13px; }
}

@media (prefers-reduced-motion: reduce) {
  .temperature-line i,.temperature-line b,.climate-path::before,.climate-step,.wx-column-track i,.evidence-chain::before,.evidence-chain-item { animation: none !important; opacity: 1; transform: none; }
}

.note-summary b {
  display: inline-block;
  min-width: 74px;
  color: var(--gold);
  font-weight: var(--fw-normal);
}

.note-role-tabs,
.setting-options {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--card-soft);
}

.note-role-tabs { margin-bottom: var(--sp-4); }
.note-role-tabs button,
.setting-options button {
  min-height: 38px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}

.note-role-tabs button.active,
.setting-options button.active {
  background: var(--jade);
  color: var(--ink-invert);
}

.note-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.note-fields label,
.event-editor label {
  display: grid;
  gap: 6px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.note-fields textarea,
.event-editor input,
.setting-row select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card-soft);
  color: var(--ink);
  font: inherit;
}

.event-editor {
  display: grid;
  grid-template-columns: minmax(140px, .6fr) minmax(220px, 1.4fr) auto;
  gap: var(--sp-3);
  align-items: end;
}

.event-list { margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.event-list li {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.event-list time { color: var(--gold); font-variant-numeric: tabular-nums; }
.event-list button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.event-list .event-empty { display: block; color: var(--ink-3); }

.setting-stack { display: grid; gap: 0; }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.setting-row > span { display: grid; gap: 3px; }
.setting-row small { color: var(--ink-3); }

#resultPanel[data-font="large"] .result-view { font-size: 17px; }
#resultPanel[data-font="large"] .pro-table { font-size: 16px; }
#resultPanel[data-density="compact"] .detail-card { margin-bottom: var(--sp-3); }
#resultPanel[data-density="compact"] .detail-card { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }

/* 设置页里的开关组与细盘开关同款，仅去掉标题重复感 */
#relSettings .panel-row,
#starFilterSettings .panel-row { margin-bottom: var(--sp-2); }

/* ---------- 窄屏：以「看得最清楚」为先，宁可横向滑动也不缩小字形 ---------- */
@media (max-width: 620px) {
  /* 与 mobile.css 的 #detailCyclesSlot 段保持一致：40px / 17px。
     该段特异性更高（带 id），是手机端实际生效的那条。 */
  .dayun-table .dy-col { width: 40px; padding: 7px 1px; }
  .dayun-table .dy-gz { font-size: 17px; }
  .dayun-table .dy-year,
  .dayun-table .dy-age { font-size: 10px; }

  /* 连线图：加宽画布并放大字号，保证每个干支清晰可辨 */
  .gz-diagram { min-width: 460px; }
  .gz-diagram .gz-node-text { font-size: 24px; }
  .gz-diagram .gz-link-label { font-size: 12px; }
  .gz-diagram .gz-link-mark { stroke-width: 1.8; }
  .gz-diagram .gz-link-hit { stroke-width: 18; }
  .gz-diagram .gz-pillar-label { font-size: 13px; }

  .rel-index-chip { padding: 5px 11px; font-size: var(--fs-sm); }
  .note-input { min-height: 160px; }
  .note-fields { grid-template-columns: 1fr; }
  .event-editor { grid-template-columns: 1fr; }
  .event-list li { grid-template-columns: 92px 1fr auto; gap: 8px; }
  .setting-row { align-items: flex-start; flex-direction: column; }
  .setting-options { width: 100%; }
  .setting-options button { flex: 1; }

  /* 图比屏幕宽，提示可以左右滑动 */
  .gz-diagram-scroll::after {
    content: '← 左右滑动查看 →';
    display: block;
    margin-top: 5px;
    color: var(--ink-2);
    font-size: 11px;
    text-align: right;
  }

  .ry-two { grid-template-columns: 1fr; }
  .chenggu-total strong { font-size: var(--fs-xl); }
  .lq-grid { grid-template-columns: 1fr; }
  .lq-table { font-size: 12.5px; }
  .lq-table th,
  .lq-table td { padding: 7px 6px; }
  .cls-switch button { padding: 4px 11px; font-size: 12.5px; }
  .cls-text { padding: 11px var(--sp-3); font-size: var(--fs-base); line-height: 1.95; }
}

/* ---------- 打印 ---------- */
@media print {
  .dayun-scroll,
  .gz-diagram-scroll { overflow: visible; }

  /* 打印时列宽回到 104px。
     屏幕上是「一屏 10 列」的取舍（76px），但纸上没有「一屏」这个概念——
     .dayun-scroll 打印时会 overflow:visible 把 12 列全铺开，纸宽够。
     76px 在纸上会让「甲（正印）」这类四字一柱折行、列高不齐。
     站长有「保存排盘」按钮，这是真实用例，不是理论情形。 */
  .dayun-table .dy-col,
  .dayun-table.liunian .dy-col,
  .dayun-table.liuyue .dy-col,
  .dayun-table.xiaoyun .dy-col { width: 104px; }

  .gz-switch,
  .lq-switch,
  .cls-switch,
  .note-actions { display: none; }

  .rel-index,
  .cls-entry { break-inside: avoid; }

  .gz-diagram .gz-link-item { cursor: default; }
}

/* ===========================================================
   双栏版式 · 专业细盘（PC 左右分栏，窄屏上下堆叠）
   -----------------------------------------------------------
   左栏＝专业细盘表，右栏＝运程（起运/大运/流年/流月/小运）。
   参考图里两栏各自独立滚动关系，右侧不随左侧位置变化，
   故用 Grid 而非浮动：两栏都是独立的块级流。
   =========================================================== */
.detail-split {
  display: grid;
  /* 实测：`auto minmax(0,1fr)` 在 8 列表（min-width:620px）下会把右栏压成 0px
     —— auto 轨道先按内容吃掉几乎全部宽度，1fr 只剩残渣。
     改用无单位 fr 定比例，两栏都按比例分，不会有一栏归零。
     左栏给得比右栏宽：8 列表在 1440 下约需 830px 才不裁字，
     而右栏的运程表本就是横滚的窄列，宽度弹性大。
     minmax(0, …) 的 0 下限仍是必需的：内部有横向滚动容器，
     若用默认的 auto 下限，栅格会被内容撑破、整页出现横向滚动条。 */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  margin-bottom: var(--sp-6);
}

/* 8 列表在双栏下要能撑满左栏；窄屏单栏时再放开横滚（见文末媒体查询） */
.detail-split .pro-table { min-width: 660px; }

.split-main { min-width: 0; }
.split-side { min-width: 0; display: grid; gap: var(--sp-4); }

/* 栏内小标题行：左侧标题 + 右侧控件（胎命身开关 / 「今」按钮） */
.split-head,
.split-head-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.split-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.split-head-inline { margin-bottom: var(--sp-2); }
.split-head-inline .method-note { margin: 0; }
.split-side .detail-card { margin-bottom: 0; }

/* 专业细盘单栏化后，「胎命身」开关仍留在页面顶部。
   桌面端必须显示（它控制细盘列数），只有窄屏才藏起来。 */
#view-detail > .split-head { margin-bottom: var(--sp-3); }

/* 神煞三段：四柱 / 大运 / 流年。内容由 shenShaGroupsHtml 与 yunShenShaHtml 产出，
   两处都不含 id，故可安全双写。 */
.shensha-sections {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}

.shensha-sections-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.shensha-sections-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.shensha-sections-head span { color: var(--ink-3); font-size: var(--fs-xs); }

.shensha-section + .shensha-section {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

.shensha-section > h3 {
  margin: 0 0 var(--sp-2);
  color: var(--gold);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* 岁运神煞：一步一行，「干支 + 年份范围」在左，神煞 chips 在右 */
.yun-star-row {
  display: grid;
  grid-template-columns: 116px 1fr;
  align-items: start;
  gap: var(--sp-3);
  padding: 5px var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
}

.yun-star-row:last-child { border-bottom: 0; }

/* 当前所选大运/流年：金色左边框 + 浅金底，一眼定位 */
.yun-star-row.is-current {
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
}

.yun-star-head { display: flex; flex-direction: column; gap: 1px; }
.yun-star-head b { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.yun-star-head small { color: var(--ink-3); font-size: var(--fs-xs); }
/* 大运神煞 / 流年神煞的胶囊排布。
   ⚠ 2026-09-28 修：这里原先**只**写了 justify-content ——
     没有 display:flex，也没有 gap。justify-content 对 block 容器无效，
     gap 的初始值是 normal（即 0），于是每枚胶囊紧贴下一枚、中间一个缝都没有，
     站长看到的「所有神煞都粘在一块」就是这个。
     对照四柱神煞（.shensha-line .chips）一直是 display:flex + gap:6px，所以那边没事。
   ⚠ 间距**取 6px，与 .shensha-line .chips 完全一致**：
     站长看过后说「两个空格有点多，跟上面的神煞区域一样的间隔就行」。
     全站神煞胶囊只有这一种间隔，两处对得上，就不再出现「上面疏、下面密」。
     （曾短暂用过 2em = 两字宽，太宽，已改回。） */
.yun-star-row .chips {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.scope-note { margin: 0 0 var(--sp-2); }


/* 专业细盘按「岁运在左、四柱在右」的阅读顺序组织（站长 2026-09-23 定，照问真版式）。 */
#detailChart .pro-table { min-width: 0; table-layout: fixed; }
#detailChart .pro-table th,
#detailChart .pro-table td { border-right: 0; }
#detailChart .pro-table tbody th { border-right: 1px solid var(--line-soft); }

/* ⚠ 分隔线必须单独写一条，且特异性要压过上面那条 `border-right: 0`。
   上面是 (0,2,0)（#id + 两个类），而 `.pro-table .sep-col` 也是 (0,2,0)，
   按源码顺序后者在前（chart-detail.css:1168 那一版）就会被这条清成 0px ——
   实测 borderRightWidth 为 "0px none"，分隔列退化成一根看不见的空隙，
   改完列序后整张表看起来还是「糊成一片」。
   这里再加一个 .sep-col 类把特异性提到 (0,2,0)→(0,3,0) 方能生效。

   ⚠ 线「一段一段的」而不是一条通到底（站长 2026-09-23 要求）。
   一条实线从表头贯到表尾显得生硬，且会从「藏干」「神煞」这些多行内容旁边
   直直穿过 —— 那两行的内容本就长短不一，线穿过去像是把字切断了。
   参考版式（问真八字）的做法是：**只在单行内容、且该行两组数据都有值的行上画线**，
   多行内容行（藏干 / 神煞）留空，视觉上就是一节一节的。
   故这里默认不画，由 .sep-draw 逐行开启（见下方 data-sep 规则）。 */
#detailChart .pro-table .sep-col { border-right: 0; }
/* 逐行开关：只有标了 .sep-draw 的行才落线。 */
#detailChart .pro-table tr.sep-draw .sep-col { border-right: 1px solid var(--line); }

/* ⚠ 桌面端把左段列宽钉死，曾经试过（`th.aux-col { width: 42px }` 加在本文件），
   结果是**把手机端也一起钉住了** —— chart-detail.css 在所有视口都加载，
   而 mobile.css 里 `has-aux:not(.has-extra-aux)` 那套只覆盖关态，
   手机端关态的「流年/大运」本是 53px 均分宽，被这条 (0,3,0) 的规则
   压到 42px，竖线位移反而从 20px 涨到 42px（四视口一致，实测）。
   故桌面端**不钉**：位移是「左段 2 列 vs 3 列」的算术结果，
   两态各自均分，竖线随开合让出一列宽度，四柱始终留在屏内。
   这已是本表能达到的最好状态，不再折腾。 */
#detailChart .pro-table thead th { border-bottom-color: var(--line); }
#detailChart .pro-table tbody tr:nth-child(4),
#detailChart .pro-table tbody tr:nth-child(7) { background: rgba(31,77,58,.025); }
#detailChart .pro-table thead th:nth-child(2),
#detailChart .pro-table thead th:nth-child(3) { color: var(--gold); }
#detailCyclesSlot .cycles-module { margin-top: var(--sp-4); }
.detail-relations { margin: var(--sp-4) 0; padding: var(--sp-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* 2026-10-14 站长要求：藏干一律一行一个竖排（基础盘列宽时原先会两个挤在一行，细盘因列窄才自然竖排）。
   两处共用同一渲染函数，这里固定为纵向，两盘版式一致。 */
.hidden-pair-list { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2px; }
.hidden-pair { display: inline-flex; align-items: baseline; white-space: nowrap; font-size: clamp(13px,1.15vw,15px); font-weight: 600; line-height: 1.45; }
.hidden-pair small { font-size: .84em; font-weight: 500; }
.hidden-empty { color: var(--ink-3); opacity: .45; }

/* ---------- 「胎命身」胶囊开关 ---------- */
/* 现有的 .switch-field 是方形 checkbox + accent-color，不是参考图里那种，
   故另写一套：胶囊底 + 圆形滑块，开＝金色。 */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.toggle-text { color: var(--ink-2); font-size: var(--fs-sm); }

/* 原生 checkbox 只作语义与键盘焦点载体，视觉由 .toggle-track 承担 */
.toggle input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.toggle-track {
  position: relative;
  display: inline-block;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: var(--line);
  transition: background var(--dur) var(--ease);
}

.toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform var(--dur) var(--ease);
}

.toggle input:checked + .toggle-track { background: var(--gold); }
.toggle input:checked + .toggle-track .toggle-knob { transform: translateX(18px); }
/* 键盘可达：焦点环画在胶囊上，隐藏的原生控件本身看不见 */
.toggle input:focus-visible + .toggle-track {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- 细盘表：辅助三列与四柱之间的竖分隔线 ---------- */
/* 分隔用一个独立的空格列实现，而非 border-right：
   表头是 th、表体是 td，用边框要分别写两套；且分隔列在两种单元格上都一致。
   .has-aux 只作钩子，便于将来按开/关两态微调。 */
.pro-table .sep-col {
  width: 1px;
  padding: 0;
  border-right: 1px solid var(--line);
  background: transparent;
}

/* 辅助三列的强调度略低于四柱：它们是参考项，四柱才是主体 */
.pro-table .aux-col { color: var(--ink-2); font-weight: var(--fw-normal); }

/* 十神着色：色值由 chart.js 按「十神相对日主的五行」现算后写成 wx-* 类。
   注意这里**不能**再写 `color: inherit` —— `.pro-table .ss`（两个类，特异性 0-2-0）
   会盖过 `.wx-火`（一个类，0-1-0），十神就全变墨色了（已踩坑）。
   本规则只调字号，颜色交给 wx-* 独占。 */
.pro-table .ss-main { font-size: var(--fs-sm); }

/* 「今」按钮：跳到当前流年 */
.btn-today {
  flex: 0 0 auto;
  min-width: 32px;
  padding: 3px 10px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--ink);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.btn-today:hover { background: var(--gold); }

/* 流月表的节气名下小字：交节的公历月/日 */
.dayun-table .dy-date {
  display: block;
  color: var(--ink-3);
  font-size: 10px;
}

/* 五行旺衰条的搬运槽位：节点从「基本信息」页搬来，此处只管占位 */
.wuxing-bar-slot { min-height: 56px; }

/* ---------- 窄屏：取消双栏，细盘在上、运程紧接其下 ---------- */
@media (max-width: 900px) {
  .detail-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  /* 单栏时左栏不再是「内容定宽」，表可自由横向滚动，
     与改版前手机端的观感一致。 */
  .split-main { width: 100%; }
  .split-head { flex-wrap: wrap; }
}

/* 打印时不分栏：纸面宽度有限，左右并排会把表挤坏 */
@media print {
  .detail-split { display: block; }
  .split-side { display: block; }
  .split-side .detail-card { margin-bottom: var(--sp-4); }
  .split-head .toggle,
  .split-head-inline .btn-today { display: none; }
}

/* ==========================================================================
   V3：细盘模块合并与限高
   站长要求：岁运三表、宫位六亲在手机端各占约 1/3 屏高，超出部分内部滚动，
   避免整页被单一模块撑长；命卦/人元/宫位六亲合并进一张卡的切换面板。
   ========================================================================== */

/* ---------- 辅助信息：同卡内分组切换（命卦／人元司令／宫位六亲） ---------- */
.aux-info-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}

.aux-info-tabs button {
  min-height: 34px;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.aux-info-tabs button:hover { border-color: var(--gold); color: var(--gold); }

.aux-info-tabs button.active {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: var(--fw-medium);
}

.aux-info-panel { display: none; }
.aux-info-panel.active { display: block; }

/* ---------- 岁运三表：手机端合计约占一屏的三分之一 ---------- */
/* 用 dvh 而非 vh：移动端浏览器地址栏收放时 vh 不会更新，会让限高时高时矮。 */
@media (max-width: 620px) {
  /* 站长的原话是「这三个功能在一起保持手机尺寸只占用三分之一的画面」。
     注意限的必须是**三张表的合计**，不是每张各占 1/3 屏 —— 后者会变成一整屏。 */
  /* ⚠ 这里曾经有一条 #cyclesModule { max-height: 33dvh; overflow: hidden }，
     已于本轮删除，原因记录在此以免后来者再犯：

     「三表合计占 1/3 屏」这条要求自提出起就没有真正成立过。模块内并不只有
     三张表 —— 实测六个直接子元素合计 557px：模块标题 53 + 起运说明 44 +
     分析回执 43 + 大运 129 + 流年 138 + 流月 150。而 33dvh 在 390×844 下
     只有 278px。上一轮把 --cycles-port 压到 64px 只治了滚动框，模块本体
     仍在溢出，归档说明第 535 行已记过一次「限高完全没生效」。

     最要命的是：一旦补上 overflow: hidden 让它「生效」，被裁掉的不是多余的
     空白，而是流年、流月两张整表 —— 站长会以为这两个功能没了。宁可让三张表
     按自然高度排布（首屏需下滑，与站上其它长表一致），也不能静默吞表。 */

  /* ⚠ 本块与文件末尾 1546 行附近的 @media (max-width: 620px) 块**曾经重复**
     （同一个 #cyclesModule .dayun-scroll 被定义两次、值还不一致，靠后定义者
     胜出，导致 overscroll-behavior 静默失效）。已于本轮合并到那一块，此处只留
     这段说明，规则一律写在末尾那一块里 —— 改岁运三表的手机端样式请去那里，
     勿在此处再写一份。 */

  /* 三张表的表头在滚动时留在可视区顶部，否则滑下去就不知道在看哪一行 */
  #cyclesModule .timeline-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--card);
  }

  /* 辅助信息面板同样限高，避免人元/六亲长表把整页撑开（站长要求六亲只占 1/3 屏） */
  .aux-info-panel {
    max-height: 33dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---------- 神煞：降低拥挤度 ---------- */
/* 此前每组标题 18px + 组间距 16px + 胶囊 68px 最小宽，
   在手机上四组叠起来非常厚重。改为更紧凑的标题与更小的胶囊。 */
.shensha-sections .shensha-group { margin-bottom: var(--sp-3); }

.shensha-sections .shensha-group > h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-base);
}

@media (max-width: 620px) {
  .shensha-group > h3 { font-size: var(--fs-base); }
  .shensha-group { margin-bottom: var(--sp-3); }
  .star-list { gap: 6px; }
  .star-chip { min-width: 0; padding: 4px 10px; font-size: var(--fs-xs); }
  /* 胶囊行距收紧，长名单不再一节一节地占满屏幕 */
  .shensha-sections .yun-star-row { padding: 8px 0; }
}

/* ==========================================================================
   V3：岁运三表的直观性改造
   原问题（站长反馈「不够直观」）：
     1. 大运/流年/流月三表外观完全一致，看不出层级；
     2. 「选中项」与「当前所处」用了相近的底色，分不清哪个是我选的、哪个是今天；
     3. 三表各自独立，看不出「选了这步大运 → 才有这些流年」的从属关系。
   对策：用左侧层级色条 + 序号徽标表达从属，把选中态与当前态用不同手段表达
        （选中=实心金边，当前=顶部金色标记与「今」字），干支字号加大一档。
   ========================================================================== */

/* ---------- 层级色条：三表各自一条，逐级变浅 ---------- */
.timeline-group { position: relative; }

.timeline-group > .timeline-heading h3::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 13px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--gold);
  vertical-align: -1px;
}

.timeline-group:nth-of-type(2) > .timeline-heading h3::before { opacity: .68; }
.timeline-group:nth-of-type(3) > .timeline-heading h3::before { opacity: .42; }

/* ---------- 选中态：实心金边 + 轻微抬起（与「当前」区分开） ---------- */
.dayun-table .dy-col.active {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold), 0 2px 8px rgba(28, 58, 46, .07);
  transform: translateY(-1px);
}

/* 流年/流月的「已选项」是 .cur，同样给实心边，语义与上一致 */
.dayun-table.liunian .dy-col.cur,
.dayun-table.liuyue .dy-col.cur {
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* ---------- 当前态：顶部金色横条（不用底色，避免与选中态混淆） ----------
   ⚠ 站长反映「大运流年怎么去又变了」，根因在此：
   「今年/本运」（is-now）与「用户所选」（active）本是两个独立状态，
   但两者都用金色 —— 用户点了第五步丁巳后，乙卯的金色横条照旧留着，
   于是同一张表里两列同时发金，看起来像选中态自己跳了。
   修法：当前态只在**未被选中**时才画横条。已被选中那一步，
   底色与「今」字标记已足够说明它既是所选、也恰是当前，不必再叠一条横条。 */
.dayun-table .dy-col.is-now {
  position: relative;
  border-color: var(--gold-line);
}

.dayun-table .dy-col.is-now.active::before { content: none; }

.dayun-table .dy-col.is-now::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--gold);
}

/* 「今」徽标：小圆点式，比原来的文字标记更省横向空间 */
.dy-now {
  display: inline-block;
  min-width: 14px;
  margin-left: 3px;
  padding: 0 3px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  line-height: 14px;
  text-align: center;
  vertical-align: 1px;
}

/* ---------- 干支字号：与上方列宽注释里的实测表绑定，动一个必须动另一个 ---------- */
.dayun-table .dy-gz { font-size: 17px; letter-spacing: 0; }
.dayun-table.liunian .dy-gz,
.dayun-table.liuyue .dy-gz { font-size: 17px; }

/* 十神小字压低对比度的规则已随 .dy-ss 一并删除 —— 并排后由 .gz-ss 承担，见上方。 */

/* ---------- 当前分析条：把「大运·流年·流月」三级写全，作为下钻结果的回执 ---------- */
.cycle-analysis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.cycle-analysis strong {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

@media (max-width: 620px) {
  /* 手机端列宽由 mobile.css 的 #detailCyclesSlot 段统一给（40px），
     字号 17px 与之配套（十神无括号后一柱仅 33px，40px 装得下）。 */
  .dayun-table .dy-gz { font-size: 17px; }
  .dayun-table.liunian .dy-gz,
  .dayun-table.liuyue .dy-gz { font-size: 17px; }
  /* 手机上三表都要限高，列的固定高度不再必要，改为内容自适应 */
  .dayun-table .dy-col { min-height: 0; padding: 8px 4px; }
}

/* 「当前分析」三级回执：每级一个胶囊，箭头表示从属下钻 */
.cycle-analysis .ca-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: var(--gold-soft);
}

.cycle-analysis .ca-cell i {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-style: normal;
}

.cycle-analysis .ca-cell b {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: .5px;
}

.cycle-analysis .ca-cell em {
  color: var(--ink-2);
  font-size: 11px;
  font-style: normal;
}

.cycle-analysis .ca-arrow { color: var(--gold); font-size: var(--fs-md); }

@media (max-width: 620px) {
  /* 手机端三级回执折行显示，避免撑破宽度 */
  .cycle-analysis .ca-cell { padding: 2px 7px; }
  .cycle-analysis .ca-cell em { display: none; }
  .cycle-analysis .ca-cell b { font-size: var(--fs-sm); }
}

/* ---------- 岁运柱：纳音 + 五行色条 —— 已于 2026-09-25 停用 ----------
   站长要求「屏幕里能看到 10 个大运流年」，并明确说「实在不行就把纳音删掉」。
   这两样一列合计占 17px（纳音行 14px + 色条 3px + 间距），是列高的第二、三大来源
   （第一大是小运行 37px，已删）。
   实现方式是把字号与高度压到 0 并隐藏，**不是删 DOM** ——
   gzCells() 仍照常输出 .dy-nayin 与 .dy-wxbar，将来站长要恢复只需删掉这一条。
   停用后列高从 168px 降到约 90px。 */
/* ⚠ 停用的那一条 display:none 写在文件**末尾**（见「岁运柱停用」一节），
   不能写在这里 —— 下方 .dy-nayin / .dy-wxbar 各自带 display:block/flex，
   特异性相同、位置更后，写在这里会被它们顶回去（实测踩过这个坑）。 */

/* 以下原样式保留备查。 */

/* 纳音是「这一柱是什么」，五行色条是「这一柱属什么」——
   两者都往 .dy-col 里加，列高会涨，故用极小的字号与 2px 的条，
   让「一眼看清」的收益远大于这十几个像素的代价。 */
.dayun-table .dy-nayin {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 色条：上下两段，上为天干五行、下为地支五行。
   gzClass() 已把干支映射成 wx-木/火/土/金/水 五类，这里只负责铺满。 */
.dayun-table .dy-wxbar {
  display: flex;
  width: 100%;
  max-width: 40px;
  height: 3px;
  margin: 4px auto 0;
  border-radius: var(--r-pill);
  overflow: hidden;
}

.dayun-table .dy-wxbar i {
  flex: 1 1 0;
  /* .wx-木 这类类只定义了 color（chart.css:453-457 是五行着色的唯一取值处），
     所以这里靠 currentColor 取色，不另开一组背景令牌 —— 否则五行配色就有了
     第二个来源，日后改一处忘一处就会色不对版。 */
  background: currentColor;
  opacity: .9;
}

/* 当前运的色条加粗并描金，与顶部金条呼应 */
.dayun-table .dy-col.is-now .dy-wxbar { height: 4px; box-shadow: 0 0 0 1px var(--gold); }

/* 当前运的纳音改墨色加粗，**不再用金色**。
   ⚠ 2026-09-25 改：五行「金」由 #7a5c14 换成站长指定的 #EF9205 后，
   实测它与状态色 --gold (#9a7132) **色相差 0°**（同一色相，只是明度更高），
   两者并排几乎分不出。于是「纳音是金（状态高亮）」与「这一柱属金（五行）」
   在同一个色系里撞了语义 —— 用户会以为纳音金色代表五行属金。
   状态标注本来就不该依赖颜色唯一的通道（见 .dy-col.is-now::before 的金色竖线
   与加粗字重），于是这里改用字重 + 墨色区分，不再动颜色。 */
.dayun-table .dy-col.is-now .dy-nayin {
  color: var(--ink);
  font-weight: var(--fw-medium);
}

/* 手机端三表合计只占约 1/3 屏，纳音在 68px 列宽里会挤成两行 —— 保持单行省略 */
@media (max-width: 620px) {
  .dayun-table .dy-nayin { font-size: 9px; margin-top: 2px; }
  .dayun-table .dy-wxbar { height: 2.5px; margin-top: 3px; max-width: 34px; }
  .dayun-table .dy-col.is-now .dy-wxbar { height: 3.5px; }
}

/* ---------- 手机端：岁运三表的滚动框限高 ---------- */

/* 站长的原话是「这三个功能在一起保持手机尺寸只占用三分之一的画面」。
   上一版只给滚动框加了 max-height，但列本身仍有 137px 高 —— 列撑破了框，
   .dayun-scroll 便永远不产生滚动（实测 scrollWidth === clientWidth），
   三表合计 584px，占掉 0.69 屏，等于这条要求没生效。
   这里把「框高」与「列高」对齐：列必须比框矮，裁剪与横滑才会真的发生。

   ⚠ 岁运三表的手机端样式**只此一处**。此前同一个选择器在本文件里被定义过
   两次、值还不一致，靠后定义者胜出，另一些属性（如 overscroll-behavior）
   因此静默失效。已于本轮合并至此，并删掉了上方那一份。 */
@media (max-width: 620px) {
  #cyclesModule .dayun-scroll {
    max-height: 104px;          /* 大运/流年：列高 98 + 上下 padding 6 */
    overflow-y: hidden;
    overflow-x: auto;
    overscroll-behavior: contain;   /* 横滑到头不要把整页带着一起滑 */
    -webkit-overflow-scrolling: touch;
    /* 吸附表头必须裁在这个框里。
       上一版只写了 sticky，没给此处建层叠上下文：.timeline-group 是
       position:relative 但不带 z-index，兄弟之间不产生隔离，于是吸附标题
       与下方照常绘制的干支进了同一个层叠层，两者的字直接叠在一起 ——
       就是站长说的「往下滑全乱码」。isolation 把这一层的绘制收进滚动框，
       表头不再溢出到框外的干支上。 */
    isolation: isolate;
  }
  /* 流月比大运/流年多一行节气名，列高 110px —— 框必须跟着长，
     否则流月表最后一行被切掉半截（截图里的「表被裁一半」）。 */
  #cyclesModule .timeline-group:nth-of-type(3) .dayun-scroll { max-height: 116px; }
  /* 列的固定 min-height:108px 是纵向被撑破的主因，手机端改为跟随内容。
     左右内边距留 2px：压到 0 会让干支两字贴着列线，干支与纳音都显得局促。 */
  #cyclesModule .dayun-table .dy-col,
  #cyclesModule .dayun-table.liunian .dy-col,
  #cyclesModule .dayun-table.liuyue .dy-col {
    min-height: 0;
    padding: 5px 2px;
  }
  /* 年龄行（「8岁」）已恢复显示 —— 原注释说「让位给纳音与色条」，
     但那两样 2026-09-25 已停用，让位的理由不存在了；
     且参考图里就有这一行，藏起来反而丢一个读数。 */
  #cyclesModule .dayun-table .dy-age { font-size: 9px; line-height: 1.3; }
  #cyclesModule .dayun-table .dy-year { font-size: 9px; line-height: 1.2; }
  /* 干支两字并排不换行是本表的骨架；一旦折行，列高从 42px 涨到 62px。
     注意这里只设字号与行高，**不设 color** —— 干支的五行色由 .wx-* 给出，
     见文件上方 .dy-col.is-now 处的说明。 */
  #cyclesModule .dayun-table .dy-gz {
    font-size: 16px;
    line-height: 1.15;
    margin: 3px 0 2px;
    white-space: nowrap;
  }
  #cyclesModule .dayun-table .dy-nayin { font-size: 8.5px; line-height: 1.2; margin-top: 2px; }
  #cyclesModule .cycle-analysis { padding: 6px 9px; }
  #cyclesModule .cycle-analysis strong { font-size: 12px; }
  #cyclesModule .timeline-group + .timeline-group { margin-top: 5px; padding-top: 5px; }
  #cyclesModule .timeline-heading { margin-bottom: 2px; }
}

/* ==========================================================================
   岁运柱停用：纳音 + 五行色条
   --------------------------------------------------------------------------
   站长 2026-09-25 要求「屏幕里能看到 10 个大运流年」，并明确说
   「实在不行你就把大运流年下面的纳音删掉」。

   这两样一列合计约 17px（纳音行 14px + 色条 3px），是列高的第二、三大来源
   （第一大是小运行 37px，已在 chart.js 里删掉）。停用后一屏列数：
     手机 390px：4.8 列 → 8 列；桌面 1440px：10 列 → 18 列。

   ⚠ 位置必须在文件最末：.dy-nayin / .dy-wxbar 的 display 在多处被设过
     （block / flex），本文件内靠后定义者胜出。写在中间会被下面的顶回去。

   实现是**隐藏而非删 DOM** —— gzCells() 仍照常输出这两个元素，
   站长日后要恢复，删掉这一节即可，JS 不用动。 */
.dayun-table .dy-nayin,
.dayun-table .dy-wxbar,
.dayun-table .dy-col.is-now .dy-nayin,
.dayun-table .dy-col.is-now .dy-wxbar { display: none !important; }
.detail-head-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.taiji-toolbar{display:flex;align-items:center;gap:7px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink,#18372f);font-size:13px;white-space:nowrap}
.taiji-toggle{gap:6px}.taiji-toggle .toggle-track{width:38px;height:22px}.taiji-toggle .toggle-knob{width:16px;height:16px}.taiji-toggle input:checked+.toggle-track .toggle-knob{transform:translateX(16px)}
.taiji-toolbar b{color:#9a722f}.taiji-toolbar button{min-height:32px;padding:0 10px;border:0;border-radius:999px;background:#b49354;color:#fff;font:inherit;cursor:pointer}
.taiji-toolbar button:focus-visible,.taiji-pick:focus-visible{outline:2px solid #b49354;outline-offset:2px}
.taiji-pick{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:2px 5px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;line-height:inherit;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease}
.taiji-pick:hover{background:rgba(180,147,84,.12)}.taiji-pick:active{transform:scale(.97)}
.taiji-pick.is-taiji{background:#b99758;color:#fff!important}.taiji-pick.is-taiji .stem,.taiji-pick.is-taiji .wx-mu,.taiji-pick.is-taiji .wx-huo,.taiji-pick.is-taiji .wx-tu,.taiji-pick.is-taiji .wx-jin,.taiji-pick.is-taiji .wx-shui{color:#fff!important}
.taiji-pick.is-taiji-origin{box-shadow:0 0 0 2px #8f6b2d,0 0 0 4px rgba(185,151,88,.2)}
.hidden-pair .taiji-pick{min-width:0;min-height:0!important;padding:2px 4px;line-height:1.35}.hidden-pair .taiji-pick.is-taiji{border-radius:7px}
@media(max-width:640px){.detail-head-actions{gap:6px}.taiji-toolbar{min-height:0;padding:0;font-size:12px}.taiji-toolbar button{min-height:28px;padding:0 8px}.taiji-pick{padding:2px 3px}.hidden-pair{font-size:12.5px;line-height:1.4}.hidden-pair small{font-size:11px}.hidden-pair .taiji-pick{padding:2px 3px}}

/* ---------- 串宫压运盘 ---------- */
.cg-toggle{white-space:nowrap}
.chuangong-panel{margin:var(--sp-4) 0;padding:clamp(16px,3vw,28px);border:1px solid rgba(176,139,73,.32);border-radius:22px;background:linear-gradient(145deg,rgba(255,253,247,.98),rgba(244,248,243,.96));box-shadow:0 10px 30px rgba(31,61,48,.07)}
.chuangong-details{margin:var(--sp-4) 0;padding:18px;border:1px solid rgba(176,139,73,.24);border-radius:18px;background:rgba(250,249,244,.78)}
.chuangong-details>h3{margin:18px 0 9px;font-size:15px;color:var(--ink)}
.chuangong-details>h3:first-child{margin-top:0}
.mode-swap-in{animation:cgSwapIn .38s cubic-bezier(.2,.75,.25,1) both}
@keyframes cgSwapIn{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}}
.cg-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cg-heading h2{margin:3px 0 0;font-family:var(--font-serif);color:var(--ink);font-size:clamp(22px,3.2vw,32px)}
.cg-heading p{margin:0;color:var(--muted);font-size:13px}
.chuangong-panel>h3{margin:24px 0 12px;font-size:17px;color:var(--ink)}
.cg-notice{display:grid;grid-template-columns:auto 1fr;gap:12px;margin:16px 0 4px;padding:13px 15px;border-left:3px solid var(--gold);border-radius:0 12px 12px 0;background:rgba(176,139,73,.075);font-size:13px;line-height:1.7}
.cg-notice b{color:var(--gold-dark)}
.cg-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cg-cycles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cg-cycle{overflow:hidden;border:1px solid rgba(176,139,73,.3);border-radius:15px;background:rgba(255,255,255,.75)}
.cg-cycle header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;background:rgba(176,139,73,.09)}
.cg-cycle header b{font-size:14px;color:var(--gold-dark)}.cg-cycle header span{font-size:10px;color:var(--muted)}
/* 「当前大运与流年」内层：横排改竖排（站长 2026-09-28）。
   原先是三列横排 —— 天干层标签 ｜ 干支 ｜ 地支层标签，
   宽屏下并排看着还行，一进手机就被压成两列窄条，干支和两块标签挤在一行看不出来谁对谁。
   改成单列后是自上而下四行，读法与串宫盘其余卡片一致：
     天干层 神 → 干
     地支层 神 → 支
   ⚠ 用 grid-template-columns:1fr 单列而不是 flex-direction:column：
     与 cg-items / cg-month 已有的单列 grid 卡片同一套版式，不引入第二种布局机制。 */
.cg-cycle>div{display:grid;grid-template-columns:1fr;justify-items:center;gap:6px;padding:10px}
/* 竖排后每层是「字在上、神在下」两行（站长 2026-09-28 第二轮修正）。
   上一版把十二神放在字**上面**、还带一个「天干层/地支层」标签，站长看过之后
   要求：删掉层名标签，十二神挪到它所属的那个字的下面。
   ⚠ 「天干层/地支层」不是被藏起来了，是整条 label 不再存在（见 chart.js 的 cycleCards）——
     这里的规则也随之从 label 改名为 .cg-line。 */
.cg-cycle .cg-line{display:flex;flex-direction:column;align-items:center;gap:2px}
/* 干支落到每一层各自一个单字：不能再吃 .cg-gz 的 27px —— 那个字号是给
   「干支两字并排」定的，单字用它会比整张卡片的标题还大。 */
.cg-cycle .cg-gz{font-size:22px;line-height:1}
.cg-stack{display:grid;grid-template-rows:auto auto auto;justify-items:center;align-items:center;gap:3px}
.cg-stack .cg-gz{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:.96}
.cg-stack>.cg-god:first-child{order:1}.cg-stack>.cg-gz{order:2}.cg-stack>.cg-god:last-child{order:3}
.cg-pillar{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.7)}
.cg-pillar header{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:rgba(31,77,58,.045);font-size:11px;color:var(--muted)}
.cg-pillar header em{font-style:normal;color:var(--gold-dark)}
.cg-pillar>div{display:grid;justify-items:center;gap:4px;padding:8px 5px}
.cg-gz{display:inline-flex;gap:3px;font-size:27px;font-family:var(--font-serif);font-weight:600;line-height:1}
.cg-gz i{font-style:normal}
.cg-god{display:inline-block;font-size:12px;font-weight:650;line-height:1.25}
.cg-god.is-good{color:#207345}.cg-god.is-warn{color:#ad332a}.cg-god.is-neutral{color:#a36e1f}
.cg-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.cg-item,.cg-month{display:grid;justify-items:center;gap:4px;padding:8px 4px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.62)}
.cg-item small,.cg-month small{color:var(--muted);font-size:11px}
.cg-month small time{display:block;margin-top:2px;color:#9a8260;font-size:10px;font-style:normal;line-height:1.15;white-space:nowrap}
.cg-item .cg-gz,.cg-month .cg-gz{font-size:23px}
.cg-wheel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(92px,auto));gap:8px}
.cg-palace{display:grid;align-content:center;justify-items:center;gap:3px;padding:7px 3px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.7)}
.cg-palace small{color:var(--muted)}
.cg-palace .cg-gz{font-size:21px}.cg-palace .cg-god{font-size:10.5px}
.cg-palace.p1{grid-area:1/1}.cg-palace.p2{grid-area:1/2}.cg-palace.p3{grid-area:1/3}.cg-palace.p4{grid-area:1/4}
.cg-palace.p5{grid-area:2/4}.cg-palace.p6{grid-area:3/4}.cg-palace.p7{grid-area:4/4}.cg-palace.p8{grid-area:4/3}.cg-palace.p9{grid-area:4/2}.cg-palace.p10{grid-area:4/1}.cg-palace.p11{grid-area:3/1}.cg-palace.p12{grid-area:2/1}
.cg-center{grid-area:2/2/4/4;display:grid;place-content:center;justify-items:center;gap:9px;border:1px solid rgba(176,139,73,.35);border-radius:18px;background:radial-gradient(circle,rgba(176,139,73,.14),rgba(255,255,255,.72));text-align:center}
.cg-center small{color:var(--muted)}.cg-center .cg-gz{font-size:36px}.cg-center span{font-size:13px;color:var(--gold-dark)}
.cg-center .cg-nine-star{font-family:var(--font-serif);font-size:clamp(25px,4vw,38px);line-height:1;color:#b92c24;letter-spacing:.08em}.cg-center em{font-size:12px;font-style:normal;color:#2484be}
.cg-month-scroll{overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:5px}
.cg-months{display:grid;grid-template-columns:repeat(12,minmax(52px,1fr));gap:4px;min-width:668px}
.cg-month{gap:3px;padding:7px 2px}.cg-month .cg-gz{flex-direction:column;gap:1px;font-size:19px;line-height:.92}.cg-month .cg-god{font-size:9.5px;white-space:nowrap}
.cg-focus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cg-focus{padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.62)}
.cg-focus header{display:flex;align-items:center;gap:9px}.cg-focus header b{font-size:14px}.cg-focus p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.cg-method{margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cg-method summary{padding:13px 2px;color:var(--ink);font-weight:650;cursor:pointer}.cg-method div{padding:0 2px 9px;color:var(--muted);font-size:13px;line-height:1.75}.cg-method p{margin:0 0 8px}
.cycles-module.is-chuangong .section-kicker::after{content:' · 十二神';color:var(--gold-dark);font-weight:700}
.cycles-module.is-chuangong>.module-heading,.cycles-module.is-chuangong>.yun-start,.cycles-module.is-chuangong>.cycle-analysis{display:none}
.is-chuangong-mode .cycles-module>.module-heading,.is-chuangong-mode .cycles-module>.yun-start,.is-chuangong-mode .cycles-module>.cycle-analysis{display:none}
.cycles-module.is-chuangong .dayun-table .dy-gz .gz-ss{font-size:.58em;font-weight:650;color:var(--gold-dark);overflow-wrap:normal}
.cycles-module.is-chuangong .liuyue-group{display:none}
.is-chuangong-mode .cycles-module .liuyue-group{display:none}
@media(max-width:640px){
  #view-detail>.split-head{align-items:flex-start;gap:8px}.detail-head-actions{width:100%;justify-content:flex-start}.cg-toggle .toggle-text{font-size:11px}
  .chuangong-panel{margin:12px 0;padding:14px 10px;border-radius:16px}.chuangong-details{margin:10px 0;padding:10px 8px;border-radius:14px}.chuangong-details>h3{margin:14px 0 7px;font-size:14px}.cg-heading{align-items:flex-start;flex-direction:column;gap:5px}.cg-heading p{font-size:11px}
  .cg-notice{grid-template-columns:1fr;gap:2px;padding:10px 11px}.cg-pillars{gap:5px}.cg-pillar header{padding:6px 4px;justify-content:center;gap:4px;flex-wrap:wrap}.cg-pillar>div{padding:10px 2px;gap:6px}.cg-gz{font-size:23px}.cg-god{font-size:10.5px}
  .cg-cycles{gap:4px}.cg-cycle header{display:grid;justify-content:center;text-align:center;padding:5px 3px}.cg-cycle header span{font-size:8.5px}.cg-cycle>div{grid-template-columns:1fr;padding:6px 2px;gap:3px}.cg-cycle label{grid-template-columns:auto auto;gap:3px;font-size:9px}.cg-cycle .cg-gz{font-size:23px}
  .cg-items{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.cg-item{padding:6px 2px}.cg-item .cg-gz{font-size:18px}.cg-item .cg-god{font-size:9px}
  .cg-months{grid-template-columns:repeat(12,52px);gap:4px;min-width:668px}.cg-month{padding:6px 1px}.cg-month small{font-size:10px}.cg-month small time{font-size:9px}.cg-month .cg-gz{font-size:18px}.cg-month .cg-god{font-size:9px}
  .cg-wheel{gap:4px;grid-template-rows:repeat(4,minmax(76px,auto))}.cg-palace{padding:4px 1px;border-radius:9px}.cg-palace .cg-gz{font-size:18px}.cg-palace .cg-god{font-size:9px}.cg-center{border-radius:12px}.cg-center .cg-gz{font-size:29px}
  .cg-focus-grid{grid-template-columns:1fr}.cg-focus{padding:12px}.chuangong-panel>h3{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){.taiji-pick{transition:none}.mode-swap-in{animation:none}}

/* 专业细盘神煞改为纯文字：保留 nature 对应的红/绿/金/特殊色，只移除胶囊框与底色。 */
#detailChart .pro-table .star-list{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px}
#view-detail .star-chip{width:fit-content;max-width:100%;min-width:0;min-height:0!important;margin:0;padding:1px 0;border:0;border-radius:0;background:transparent;box-shadow:none;font-weight:600;line-height:1.35}
#view-detail .star-chip:hover{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px}
#view-detail .star-chip:focus-visible{outline:1px solid currentColor;outline-offset:2px}
@media(max-width:620px){
  #detailChart .pro-table .star-list{align-items:center;gap:3px}
  #view-detail .star-chip{padding:1px 0;font-size:10.5px;font-weight:600;letter-spacing:-.1px}
  #detailChart .pro-table.has-extra-aux .star-chip{font-size:9.5px}
}

/* ===========================================================
   智能总结 v2（2026-10-14）：印章格局 + 五问五答 + 每问可视化
   类名统一 ss-*；颜色全部取自 tokens.css。
   =========================================================== */
.ss-wx { font-family: var(--serif); font-weight: 600; }
.ss-mu { --c: var(--wx-mu); --cs: var(--wx-mu-soft); }
.ss-huo { --c: var(--wx-huo); --cs: var(--wx-huo-soft); }
.ss-tu { --c: var(--wx-tu); --cs: var(--wx-tu-soft); }
.ss-jin { --c: var(--wx-jin); --cs: var(--wx-jin-soft); }
.ss-shui { --c: var(--wx-shui); --cs: var(--wx-shui-soft); }
.ss-wx[class*="ss-"] { color: var(--c, var(--ink)); }

/* 首屏印章 */
.ss-hero { text-align: center; padding: clamp(22px, 5vw, 40px) 16px 26px; background: var(--card); border: 1px solid var(--line-soft); border-radius: 20px; position: relative; overflow: hidden; }
.ss-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(156,43,34,.06), transparent 60%); pointer-events: none; }
.ss-kicker { display: block; font-size: 12px; letter-spacing: .16em; color: var(--gold); font-weight: 600; }
.ss-seal { position: relative; display: inline-grid; place-items: center; align-content: center; gap: 2px; min-width: 132px; min-height: 132px; padding: 12px 16px; margin: 14px 0 16px; border: 3px double var(--red); border-radius: 16px; color: var(--red); background: rgba(156,43,34,.035); transform: rotate(-3deg); font-family: var(--serif); animation: ssStamp .5s cubic-bezier(.2,.8,.2,1) both; }
.ss-seal-main { font-size: 42px; line-height: 1.05; letter-spacing: .04em; display: grid; justify-items: center; max-width: 3.2em; word-break: break-all; }
.ss-seal-main i { font-style: normal; }
.ss-seal.is-long .ss-seal-main { font-size: 32px; max-width: 4.4em; }
.ss-seal small { font-size: 13px; letter-spacing: .2em; margin-top: 4px; }
@keyframes ssStamp { from { opacity: 0; transform: rotate(-3deg) scale(1.25); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
.ss-hero h2 { font-family: var(--serif); font-size: clamp(18px, 3.4vw, 22px); line-height: 1.6; font-weight: 600; margin: 0 auto; max-width: 30em; }
.ss-hero > p { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.ss-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ss-tags span { font-size: 13px; padding: 3px 12px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); background: var(--card); }
.ss-tags .tone-good { border-color: rgba(37,107,58,.35); color: var(--green); background: var(--green-soft); }
.ss-tags .tone-warn { border-color: rgba(156,43,34,.3); color: var(--red); background: var(--red-soft); }
.ss-warn { color: var(--red) !important; }

/* 问答卡 */
.ss-q { background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px; padding: clamp(16px, 3vw, 24px); display: grid; gap: 14px; animation: ssRise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes ssRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ss-q-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.ss-no { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--gold-line); }
.ss-q-head small { font-size: 13px; color: var(--ink-3); }
.ss-q-head h3 { font-family: var(--serif); font-size: clamp(19px, 3.6vw, 23px); line-height: 1.45; font-weight: 600; margin: 2px 0 0; }
.ss-q-head h3 em { font-style: normal; color: var(--jade); background: linear-gradient(transparent 62%, var(--gold-soft) 62%); }
.ss-q-tag { font-size: 11px; color: var(--gold); border: 1px solid var(--gold-line); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.ss-grid { display: grid; gap: 12px; }
.ss-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-panel { background: var(--card-soft); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px; min-width: 0; }
.ss-panel h4 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 10px; display: flex; gap: 8px; align-items: baseline; }
.ss-panel h4 small { font-weight: 400; color: var(--ink-3); margin-left: auto; }
.ss-center { display: grid; justify-items: center; align-content: start; }
.ss-center h4 { justify-self: stretch; }
.ss-plain { font-size: 15px; line-height: 1.8; color: var(--ink-2); margin: 0; }
.ss-muted { font-size: 12px; color: var(--ink-3); margin: 0; line-height: 1.7; }
.ss-quote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--gold-line); background: rgba(241,232,215,.35); border-radius: 0 10px 10px 0; }
.ss-quote p { font-family: var(--serif); font-size: 14px; color: var(--ink); margin: 0; line-height: 1.75; }
.ss-quote cite { font-style: normal; font-size: 12px; color: var(--ink-3); }

/* Q1 定格流程 */
.ss-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ss-flow li { display: grid; text-align: center; padding: 6px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line-soft); animation: ssRise .4s both; animation-delay: calc(var(--d) * 90ms + 120ms); }
.ss-flow li small { font-size: 11px; color: var(--ink-3); }
.ss-flow li b { font-family: var(--serif); font-size: 16px; }
.ss-flow li.is-end { background: var(--red-soft); border-color: rgba(156,43,34,.25); color: var(--red); }
.ss-layers { display: grid; gap: 6px; margin-top: 12px; }
.ss-layer { display: grid; grid-template-columns: 3em 1.6em 3em 1fr; align-items: center; gap: 8px; font-size: 13px; padding: 6px 10px; border-radius: 10px; background: var(--card); border: 1px dashed var(--line); }
.ss-layer span, .ss-layer i { color: var(--ink-3); font-style: normal; }
.ss-layer i { text-align: right; }
.ss-layer b { font-size: 18px; }
.ss-layer em { font-style: normal; color: var(--ink-2); }
.ss-layer.is-tou { border-style: solid; border-color: var(--jade-line); background: var(--jade-soft); }
.ss-layer.is-tou i { color: var(--jade); font-weight: 600; }
.ss-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ss-feats li { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-soft); }
.ss-feats li > div { display: flex; justify-content: space-between; gap: 8px; }
.ss-feats li b { font-family: var(--serif); font-size: 16px; }
.ss-feats li small { font-size: 12px; color: var(--ink-3); }
.ss-feats .tone-good b { color: var(--green); }
.ss-feats .tone-warn b { color: var(--red); }
.ss-feats .ss-quote p { font-size: 13px; }

/* Q2 仪表与堆叠条 */
.ss-gauge { width: min(240px, 100%); height: auto; }
.ss-gauge-arc { animation: ssArc .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ssArc { from { stroke-dashoffset: 245; } }
.ss-gauge-label { font-family: var(--serif); font-size: 22px; display: grid; justify-items: center; }
.ss-gauge-label small { font-family: var(--sans); font-size: 12px; color: var(--ink-3); font-weight: 400; }
.ss-stack { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: var(--paper-2); gap: 2px; }
.ss-stack span { width: var(--w); background: var(--c); opacity: .45; transform-origin: left; animation: ssGrow .7s cubic-bezier(.2,.8,.2,1) both; }
.ss-stack span.is-help { opacity: 1; }
@keyframes ssGrow { from { transform: scaleX(0); } }
.ss-stack-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.ss-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--c); margin-right: 4px; }
.ss-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.ss-checks div { display: grid; gap: 2px; padding: 8px; border-radius: 10px; background: var(--card); border: 1px solid var(--line-soft); }
.ss-checks b { font-size: 14px; color: var(--ink-3); }
.ss-checks small { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.ss-checks .is-ok { border-color: rgba(37,107,58,.3); background: var(--green-soft); }
.ss-checks .is-ok b { color: var(--green); }

/* Q3 用喜忌 */
.ss-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-tile { border-radius: 14px; padding: 12px 14px; border: 1px solid var(--line-soft); background: var(--card-soft); }
.ss-tile small { font-size: 12px; letter-spacing: .12em; color: var(--ink-3); }
.ss-tile div { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0; }
.ss-tile .ss-wx { font-size: clamp(24px, 5vw, 32px); line-height: 1.3; }
.ss-tile p { font-size: 12px; color: var(--ink-2); margin: 0; }
.ss-tile.is-yong { background: var(--jade-soft); border-color: var(--jade-line); box-shadow: inset 0 0 0 1px var(--jade-line); }
.ss-tile.is-ji { background: var(--red-soft); }
.ss-ring { width: min(260px, 100%); height: auto; }
.ss-ring .ss-role-yong { color: var(--jade); }
.ss-ring .ss-role-xi { color: var(--green); }
.ss-ring .ss-role-ji { color: var(--red); }
.ss-temp { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.ss-temp div { flex: 1; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #9cc0ec, #efe9dd, #e9a99f); position: relative; }
.ss-temp i { position: absolute; left: var(--heat); top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ink); border: 3px solid var(--card); animation: ssSlide .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ssSlide { from { left: 50%; } }
.ss-order { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.ss-order li { display: grid; grid-template-columns: 2.6em 1.6em 3em 1fr; align-items: center; gap: 8px; font-size: 13px; padding: 6px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line-soft); animation: ssRise .4s both; animation-delay: calc(var(--d) * 90ms + 120ms); }
.ss-order li small { color: var(--ink-3); }
.ss-order li .ss-wx { font-size: 18px; }
.ss-order li em { font-style: normal; font-weight: 600; }
.ss-order li i { font-style: normal; color: var(--ink-3); font-size: 12px; text-align: right; }
.ss-order .state-tou em { color: var(--green); }
.ss-order .state-cang em { color: var(--gold); }
.ss-order .state-none em { color: var(--ink-3); }
.ss-relation { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); }
.ss-relation b { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--card); white-space: nowrap; }
.ss-relation p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.ss-relation.is-agree { background: var(--green-soft); }
.ss-relation.is-agree b { color: var(--green); }
.ss-relation.is-conflict { background: var(--red-soft); }
.ss-relation.is-conflict b { color: var(--red); }

/* Q4 性格 */
.ss-radar { width: min(300px, 100%); height: auto; overflow: visible; }
.ss-radar-shape { transform-origin: 100px 92px; animation: ssPop .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ssPop { from { transform: scale(.2); opacity: 0; } }
.ss-traits { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ss-traits span { font-family: var(--serif); font-size: 17px; padding: 6px 14px; border-radius: 99px; background: var(--jade-soft); color: var(--jade); animation: ssRise .4s both; animation-delay: calc(var(--d) * 70ms + 150ms); }
.ss-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ss-sources article { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 14px; background: var(--card-soft); border: 1px solid var(--line-soft); }
.ss-sources small { font-size: 12px; color: var(--gold); letter-spacing: .1em; font-weight: 600; }
.ss-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chips span { font-size: 13px; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--line); }

/* Q5 实用 */
.ss-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-tips article { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px; border-radius: 14px; background: var(--card-soft); border: 1px solid var(--line-soft); }
.ss-tip-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 18px; color: var(--c, var(--ink-3)); background: var(--cs, var(--paper-2)); }
.ss-tips b { font-family: var(--serif); font-size: 16px; }
.ss-tips p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.ss-xiang h4 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; }
.ss-xiang h4 small { font-weight: 400; color: var(--ink-3); }
.ss-xiang dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ss-xiang dl div { padding: 10px; border-radius: 12px; background: var(--cs); text-align: center; }
.ss-xiang dt { font-size: 12px; color: var(--ink-3); }
.ss-xiang dd { margin: 0; font-family: var(--serif); font-size: 16px; color: var(--c); font-weight: 600; }

/* 附：五行柱 */
.ss-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; height: 150px; align-items: end; }
.ss-bars div { display: grid; grid-template-rows: 1fr auto auto; height: 100%; justify-items: center; gap: 2px; }
.ss-bars em { align-self: end; width: min(42px, 100%); height: var(--h); min-height: 4px; border-radius: 8px 8px 3px 3px; background: var(--c); transform-origin: bottom; animation: ssUp .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ssUp { from { transform: scaleY(0); } }
.ss-bars b { font-family: var(--serif); font-size: 18px; color: var(--c); }
.ss-bars small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

@media (max-width: 760px) {
  .ss-grid-2, .ss-sources, .ss-tips { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .ss-q-head { grid-template-columns: auto 1fr; }
  .ss-q-tag { display: none; }
  .ss-tiles { gap: 6px; }
  .ss-tile { padding: 10px; }
  .ss-xiang dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-checks { grid-template-columns: 1fr; }
  .ss-seal-main { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-seal, .ss-q, .ss-flow li, .ss-gauge-arc, .ss-stack span, .ss-temp i, .ss-order li, .ss-radar-shape, .ss-traits span, .ss-bars em { animation: none !important; }
}

/* 智能总结入场动画只播一次：首次展示约 1.4s 后由 chart.js 加 .ss-done（见 showView 注释） */
.ss-done .ss-seal, .ss-done .ss-q, .ss-done .ss-flow li, .ss-done .ss-gauge-arc, .ss-done .ss-stack span,
.ss-done .ss-temp i, .ss-done .ss-order li, .ss-done .ss-radar-shape, .ss-done .ss-traits span, .ss-done .ss-bars em { animation: none !important; }

/* ---------- 智能古籍参考 · 精简版（2026-10-14）：调候 / 格局 / 用神 三卡 ---------- */
.cf-groups { display: grid; gap: 12px; }
.cf-group { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--card-soft); border: 1px solid var(--line-soft); }
.cf-group > header { display: flex; align-items: center; gap: 8px; }
.cf-group > header b { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.cf-tag { font-size: 12px; font-weight: 600; letter-spacing: .1em; padding: 2px 10px; border-radius: 99px; color: var(--card); background: var(--jade); }
.cf-geju .cf-tag { background: var(--red); }
.cf-yong .cf-tag { background: var(--gold); }
.cf-item { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-soft); }
.cf-src { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cf-why { margin: 0; font-size: 12px; color: var(--ink-3); }
.cf-quote { margin: 2px 0 0; padding: 4px 0 4px 10px; border-left: 2px solid var(--gold-line); font-family: var(--serif); font-size: 15px; line-height: 1.75; color: var(--ink); }
.cf-item .cls-more { justify-self: start; margin-top: 2px; padding: 4px 0; border: 0; background: none; font-size: 12px; color: var(--jade); cursor: pointer; }
.cf-item .cls-full { max-height: 50vh; overflow: auto; margin: 4px 0 0; font-size: 14px; }
@media (min-width: 900px) { .cf-groups { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; } }

/* 2026-10-15 站长：印章里“七杀格”的“格”字换行很突兀，改为整行横排不断行。
   原 .ss-seal-main 为 grid + max-width:3.2em + break-all，<i>格</i> 被排到下一行。 */
.ss-seal { min-width: 0; padding: 16px 20px 14px; }
.ss-seal-main { display: block; max-width: none; white-space: nowrap; word-break: keep-all; font-size: 40px; letter-spacing: .06em; }
.ss-seal-main i { display: inline; }
.ss-seal.is-long .ss-seal-main { max-width: none; font-size: 30px; letter-spacing: .02em; }
@media (max-width: 420px) {
  .ss-seal-main { font-size: 36px; }
  .ss-seal.is-long .ss-seal-main { font-size: 26px; }
}

/* 闲神 / 仇神（2026-10-15） */
.ss-ring .ss-role-xian { color: #8b928f; }
.ss-ring .ss-role-chou { color: #b5651d; }
.ss-rest { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-rest span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--card-soft); border: 1px solid var(--line-soft); }
.ss-rest i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: #8b928f; }
.ss-rest .is-chou i { background: #b5651d; }
.ss-rest .ss-wx { font-size: 18px; }
.ss-rest small { font-size: 12px; color: var(--ink-3); }

/* ---------- 智能总结 · 未登录锁定（2026-10-16） ---------- */
.ss-hero-locked { padding-bottom: 8px; }
.ss-locked { position: relative; margin-top: -4px; min-height: 420px; overflow: hidden; border-radius: 18px; }
.ss-locked-blur { filter: blur(5px); opacity: .85; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(#000 0, #000 18%, transparent 78%); mask-image: linear-gradient(#000 0, #000 18%, transparent 78%); }
.ss-locked-blur .ss-q { margin-top: 14px; }
.ss-locked-line { height: 12px; margin: 10px auto; border-radius: 6px; background: var(--paper-2, #ece6d8); }
.ss-locked-line.w90 { width: 90%; } .ss-locked-line.w80 { width: 80%; } .ss-locked-line.w70 { width: 70%; } .ss-locked-line.w60 { width: 60%; }
.ss-locked-tags { display: flex; justify-content: center; gap: 8px; margin: 12px 0; }
.ss-locked-tags span { width: 64px; height: 24px; border-radius: 99px; background: var(--paper-2, #ece6d8); }
.ss-locked-cta { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); padding: 22px 20px; border-radius: 18px; background: var(--card, #fff); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(20, 30, 28, .14); text-align: center; }
.ss-locked-cta b { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.ss-locked-cta p { margin: 8px 0 16px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.ss-locked-cta .button { width: 100%; justify-content: center; }