/* ============================================================
   潜龙八字 v2 · 组件样式层（app.css）
   只消费皮肤变量 var(--*)；不写任何具体色值。
   换肤 = 只换 css/light.css 或 css/dark.css，本文件零改动。
   ============================================================ */

/* ══════════════════════════════════════════════════════════════════
   ★ 261013 批一 · B6：**字号下限对齐标尺**（owner 令「深化设计·先纪律」）
   实测（本批施工前）：组件层 8 / 8.5 / 9 / 9.5 / 10 / 10.5px 共 **50 处**为
     `scale.css` **8 档标尺之外的游离值**（标尺下限档 `--fs-xs` = 11px）。
   ⇒ 本批一律**提至 11px**（对齐 `--fs-xs`），消除 off-scale 字号；
     ⛔ 11px / 11.5px **保留** —— 11px 即标尺下限档，11.5px 为「数据密集标签」档
       （owner 261013 口径：正文/可读文本 ≥12px，纯数据标签 ≥11px）。
   ⛔ 未改成 var(--fs-xs)：保持「组件层不吃皮肤 --fs-scale」的既有行为，避免跨皮肤渲染漂移。
   判据：`_scratch_/scan_fs.py` 复跑后 ≤10.5px 应为 **0**。
   ══════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--ink);
  min-height:100vh; transition:background .25s,color .25s;
}
/* 键盘焦点环（WCAG 2.4.7 Focus Visible）：全局统一品牌色环 */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}
/* 满宽/卡片类元素焦点环内收，避免溢出裁切 */
.tab:focus-visible,.quick:focus-visible,.record-card:focus-visible,
.mine-row:focus-visible,.tl-item:focus-visible,.seg:focus-visible{outline-offset:-3px}
.serif{font-family:var(--font-serif)}
/* 页标题仅为程序聚焦锚点（切页移焦），非交互控件，去掉其焦点环。
   ★ 261005 修正：原写法 `.apphead:focus{outline:none}` **特异性不足**（(0,2,0)），
     被 `#app :focus-visible{outline:2px solid var(--brand)}`（app.css:2025，特异性 (1,1,0)）
     压掉 ⇒ 上面这句本意**从未生效**。实测（真机 DOM）：页头带 `tabindex="-1"` 并被
     `app.js:186` 程序化 `.focus()`，`:focus-visible` 命中 ⇒ 页头整块外圈套一整圈主色描边
     （owner 报「最上面有个红边框」）。此处补足特异性并覆盖 `:focus-visible`。
   ⚠ 不影响可达性：`tabindex="-1"` **不在 Tab 序列**，键盘用户到不了此处 ⇒ 无需可见焦点环；
     真正可 Tab 达的交互控件一律保留全局环（本条只限定 `.apphead` 一个选择器）。 */
#app .apphead:focus,
#app .apphead:focus-visible{outline:none}
.hidden{display:none !important}

#app{max-width:1280px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;
  background:var(--bg);
  background-image:radial-gradient(rgba(154,123,47,.05) 1px, transparent 1.4px);
  background-size:24px 24px}
.page{flex:1;padding:16px clamp(14px,2.4vw,30px) 92px}   /* ★ 260930-5：左右留白随视口舒展（原固定 14px） */

/* ---------- 站点页脚（260930 · 悬挂 ICP 备案号 · 法定义务） ----------
   位置：**#app 之后**（#viewportStage 的块级流里）。⛔ 不可放进 #app：
   骨架层在 tab/desk/wide 下把 #app 改成 `flex-direction:row`（侧栏 ＋ 内容横向排），
   放进去会被当成横排的一格（实测 desktop 下仅 192px 宽）。
   max-width 取骨架层已暴露的 --content-max（desk 1160／wide 1240／手机档未定义 ⇒ 兜底 1240，
   而手机视口 < 1240 ⇒ 实际就是通栏）。padding-bottom 为移动端固定底栏（.tabbar 64px）让位；
   桌面包（底栏已转侧栏）由下方 [data-shell] 规则收紧。⛔ 纯样式，不参与任何判定。 */
.site-foot{max-width:var(--content-max,1240px);margin-inline:auto;padding:12px 14px 76px;
  border-top:1px solid var(--line);text-align:center;
  font-size:var(--fs-xs);line-height:1.8;color:var(--line-strong)}
.site-foot a{color:inherit;text-decoration:none}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--brand);text-decoration:underline}
.site-foot-sep{margin:0 6px;opacity:.55}
/* iOS 刘海屏安全区：仅在支持的浏览器上加码（env() 不被识别时不致整条 padding 失效） */
@supports (padding: env(safe-area-inset-bottom)){
  .site-foot{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
/* 非手机骨架（tab / desk / wide）：底栏被 shell.css 改成**左侧栏**
   （position:sticky ＋ height:100vh ＋ order:-1）⇒ 不占底部 ⇒ 页脚无需为其让位。
   ★★ 261007 修正（owner 第 2 条连带）★★
     ⛔ 原判据＝`[data-shell]`（属性**存在**判定），注释写「shell.js 只为 tab/desk/wide 写该属性、
        **手机档不写**」—— **该前提是错的**：`js/shell.js:92` `stage.setAttribute('data-shell', s)`
        对 `s ∈ {phone, tab, desk, wide}` **四档一律写**（同文件 line 5 注释亦自述「写 data-shell
        （phone/tab/desk/wide）」）⇒ 手机档同样命中本规则，让位空间 76px 塌到 **18px**
        ⇒ **页脚整块落进 64px 的 fixed 底栏区**（真机实测：页脚两行 top=1440.9／1462.5，
           底栏 top=1436 高 64）⇒ owner 看到「合盘两个字上有个版本号」，且
           **ICP 备案号被同一底栏压住**（法定义务展示项，⛔ 不可遮挡）。
     ✅ 改为**排除手机档**：手机档保留 `.site-foot` 的 76px 让位（≥ 64px 底栏），
        tab/desk/wide 仍走 18px（其底栏已转侧栏，不占底部）。
     ⚠ 保留「属性存在」这一族判据的好处（未来新增桌面包档位自动含入）由 `:not(phone)` 继承；
        若日后新增**手机族**档位（如 `phone-lg`），此处须改为枚举手机族或换判据 —— 已登记。 */
#viewportStage[data-shell]:not([data-shell="phone"]) .site-foot{padding-bottom:18px}

/* ---------- 顶栏 ---------- */
.apphead{display:flex;align-items:center;gap:10px;padding:6px 2px 14px}
.brand{display:flex;align-items:center;gap:11px}
.seal{width:40px;height:40px;background:var(--brand);color:#fff;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;transform:rotate(-3deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);flex:none}
.brand-name{font-size:19px;font-weight:800;letter-spacing:1px;line-height:1.1}
.brand-sub{font-size:11px;color:var(--ink-3);letter-spacing:.4px;margin-top:2px}
.apphead-actions{margin-left:auto;display:flex;gap:8px}
/* ★ 261105 全局四键（随喜名单／随喜／登录／注册）—— 页头与侧栏同款。
   ⛔ 只用皮肤令牌，不写颜色字面量（test_*_ui 的钱皮肤纪律）。 */
.apphead-quick{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.apphead-quick + .apphead-actions{margin-left:8px}
.head-btn{
  font:inherit;font-size:12.5px;line-height:1;padding:7px 10px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-pill,999px);
  background:var(--surface);color:var(--ink-2);white-space:nowrap;
  transition:border-color .18s,color .18s,background .18s;
}
.head-btn:hover{border-color:var(--brand);color:var(--brand)}
.head-btn--brand{border-color:var(--brand);color:var(--brand)}
.head-btn--brand:hover{background:var(--brand);color:#fff}
.head-btn em{font-style:normal}
.hb-short{display:none}                                 /* 窄屏才显示「名单」两字 */

.sb-quick{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px 4px}
@media (max-width:1100px){ .sb-quick{display:none} }   /* 手机/平板档侧栏即底栏，避免挤压 */
@media (max-width:640px){
  .head-btn{padding:6px 8px;font-size:12px}
  .hb-long{display:none}                                /* 窄屏：「随喜名单」→「名单」，避免与旁边「随喜」同字 */
}
.iconbtn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;transition:.18s}
.iconbtn:hover{border-color:var(--brand);color:var(--brand)}
.iconbtn svg{width:17px;height:17px}

/* ---------- 卡片 ---------- */
/* ★ 260930-5 气口加深：间距一律**走 `--sp-*` 令牌**（升一档，不写数值 —— 尺寸真源在 scale.css）。
   原 padding/margin 同为 `--sp-4`(16px)，读起来偏挤；升到 `--sp-5`(20px) 后与入口页的呼吸一致。 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5);box-shadow:var(--shadow-sm)}
.card-title{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;letter-spacing:.06em;margin-bottom:var(--sp-3);flex-wrap:wrap;white-space:normal;word-break:break-word}
.card-title .tick{width:4px;height:15px;background:var(--brand);border-radius:2px;flex:none}
.card-title .sub{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:500;white-space:nowrap;flex:none}

/* ---------- 分段控制器 ---------- */
.segmented{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:3px;gap:3px}
.segmented.big{margin-bottom:var(--sp-4)}
.segmented .seg{flex:1;border:none;background:transparent;color:var(--ink-2);padding:8px 10px;border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;transition:.18s;font-family:inherit}
/* ★ 260930-5：分段控件是**状态标记**，不该与主行动按钮抢同一档视觉重量。
   首版试作「浅朱砂底 + 朱砂内描边」——真机照出**新问题**：描边使选中项**看起来像按钮**，
   而「体验模式(简版/详版)」与「单盘/双人合盘」两组并排 ⇒ 一屏出现**两个红框**，仍像主次不分。
   ⇒ 改为**墨色实心**：与入口页同一语汇（`landing.html` 的 active/primary 一律 `background:var(--ink)`），
     并把**朱砂彻底让给语义与点缀**（印章 · 卡题短横 · 日柱淡染 · 五行色 · 吉凶）。
   这样一屏的深色序为：两个**小**选择块(简版/单盘) ＋ 一个**大**主行动(排盘) ⇒ 有层次、不争色。
   ⚠ 用语义令牌 ⇒ 深色皮肤下自动成「浅底深字」，自洽。 */
.segmented .seg.active{background:var(--ink);color:var(--bg);font-weight:700}
.mode-toggle{display:flex;align-items:center;gap:12px;padding:10px var(--sp-4)}
.mode-toggle .mt-label{font-size:12px;color:var(--ink-2);font-weight:600}
.mode-toggle .segmented{flex:1 1 auto;margin-left:auto;min-width:0}

/* ---------- 表单 ---------- */
.form-title{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:var(--sp-3)}
.form-title .tick{width:4px;height:15px;background:var(--brand);border-radius:2px}
.form-title .ft-sub{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:1px}
.form-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px;align-items:flex-end}
.field{display:flex;flex-direction:column;font-size:11px;color:var(--ink-3);gap:4px}
.field.grow{flex:1;min-width:110px}
.field input,.field select{
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);font-size:14px;
  color:var(--ink);background:var(--surface-2);font-family:inherit;min-width:0;width:100%;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);margin-top:6px}
.lunar-month{min-width:86px}
.lunar-day{min-width:86px}
.form-hint{font-size:11px;color:var(--ink-3);margin:2px 0 10px;line-height:1.5}
/* ★ 260930-5 视觉深化（对齐入口页「宣纸墨韵」）：主行动按钮改 **墨黑实心**，hover 转朱砂 ——
   与 `landing.html` 的 `.btn.btn-solid{background:var(--ink)} / :hover{background:var(--cinnabar)}`
   **同一套语汇**。
   为什么把朱砂从主按钮撤下：原一屏内有 **三处满幅朱砂**（简版 / 单盘 / 排盘），主次不分、
   朱砂失去「点睛」意味。撤下后 **朱砂只留给语义强调**（印章 · 卡题短横 · 选中态描边 ·
   日柱淡染 · 五行色 · 吉凶），主按钮以墨色立骨。
   ⚠ 用语义令牌 `--ink`/`--bg`（非字面色值）⇒ 深色皮肤（dark/epic/nova）下自动变「浅底深字」，自洽。 */
.primary-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--ink);color:var(--bg);
  border:1px solid var(--ink);border-radius:var(--r-md);padding:13px;font-size:14.5px;font-weight:700;
  cursor:pointer;letter-spacing:.18em;transition:.22s;font-family:inherit;
}
.primary-btn svg{width:17px;height:17px}
.primary-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 12px 26px -16px var(--brand-glow)}
.primary-btn:active{transform:translateY(1px)}
.err{background:var(--danger);color:#fff;border-radius:var(--r-md);padding:11px 14px;font-size:13px;margin-bottom:var(--sp-4);font-weight:600}

/* ---------- 快捷卡 ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:2px}
.quick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;cursor:pointer;transition:.18s}
.quick:hover{border-color:var(--brand);box-shadow:var(--shadow-md)}
.quick .q-t{font-size:12.5px;font-weight:700;color:var(--ink)}
.quick .q-d{font-size:11px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.quick .q-r{font-size:11px;color:var(--gold-text);margin-top:5px;font-weight:600}

/* ---------- 用户信息卡（深色） ---------- */
.user-card{background:linear-gradient(135deg,var(--dark-surface,var(--surface-3)),var(--dark-bg,var(--surface-2)));
  color:var(--dark-text,var(--ink));border-radius:var(--r-xl);padding:var(--sp-5);margin-bottom:var(--sp-4);
  display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-md)}
.user-avatar{width:52px;height:52px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.user-info{flex:1;min-width:0}
.user-info .u-name{font-size:16px;font-weight:800}
.user-info .u-line{font-size:11.5px;color:var(--dim-text,var(--ink-3));margin-top:2px;line-height:1.5}
.user-info .u-line b{color:var(--gold,var(--brand))}
.user-actions{margin-left:auto;display:flex;flex-direction:column;gap:7px}
.mini-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-sm);padding:6px 12px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:.18s}
.mini-btn:hover{background:rgba(255,255,255,.22)}

/* ---------- 四柱大字 ----------
   T-093 S3：四柱一律 minmax(0,1fr) —— 允许单元格收缩到内容宽以下，
   否则窄容器里「内容撑破栅格」会把整行顶出去（R1 的成因之一）。 */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pillar{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 3px 10px;text-align:center;position:relative}
.pillar.day{border-color:var(--brand);background:linear-gradient(180deg,var(--brand-soft),transparent 70%)}
.pillar .p-name{font-size:11px;color:var(--ink-3);letter-spacing:2px;margin-bottom:5px}
.pillar .p-gan{font-family:var(--font-serif);font-size:34px;font-weight:800;line-height:1.1}
.pillar .p-zhi{font-family:var(--font-serif);font-size:34px;font-weight:800;line-height:1.1;margin-top:3px}
.pillar .p-shi{font-size:11px;color:var(--ink-2);margin-top:7px;letter-spacing:.5px;font-weight:600}
.pillar .day-badge{position:absolute;top:-9px;right:-6px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:1px}

/* ---------- 基本信息 KV ---------- */
.kv{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--ink-3);flex:none;width:84px}
.kv .v{color:var(--ink);font-weight:600;flex:1}
.kv .v.brand{color:var(--brand);font-weight:800}

/* ---------- 五行力量 ---------- */
.wx-bar{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);margin-top:4px}
.wx-bar .wb-seg{height:100%;min-width:2px}
.wx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:11px}
.wx-item{font-size:11.5px;color:var(--ink-2);display:flex;align-items:center;gap:5px}
.wx-item b{color:var(--ink);font-size:12.5px}
.wx-item .wx-dot{width:8px;height:8px;border-radius:3px;flex:none}
.wx-season{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 11px;margin-top:11px}
.wx-season b{color:var(--warn)}

/* ---------- 格局与旺衰 ---------- */
/* ★ 260926 指令②：格局卡**四段分层**（① 定格 / ② 成败·救应 / ③ 品位结论 / ④ 顺逆用·验格口诀）
   —— 小标题给「序号＋名称」，段间用细分隔线收口；⛔ 不引任何新令牌，全部走既有变量。 */
.pat-sec{margin-top:9px;padding-top:7px;border-top:1px dashed var(--line);}
.pat-sec:first-of-type{margin-top:4px;padding-top:0;border-top:0;}
.pat-sec_h{font-size:11px;font-weight:800;color:var(--ink-2);letter-spacing:.4px;margin-bottom:5px;}
.pattern-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pattern-name{font-family:var(--font-serif);font-size:26px;font-weight:800;letter-spacing:1px}
.pattern-src{font-size:11px;color:var(--ink-3);margin-top:2px}
.band-pill{font-size:12px;font-weight:800;border-radius:999px;padding:5px 13px;color:#fff}
.band-pill.weak{background:var(--accent)}
.band-pill.strong{background:var(--brand)}
.duo{margin-top:13px}
.duo-bar{display:flex;height:11px;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.duo-bar .d1{background:linear-gradient(90deg,var(--wx-wood),var(--wx-water))}
.duo-bar .d2{background:linear-gradient(90deg,var(--wx-metal),var(--wx-earth))}
.duo-txt{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-2);margin-top:6px}
.duo-txt b{color:var(--ink)}
.three-stat{display:flex;gap:8px;margin-top:12px}
.stat-pill{flex:1;text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:8px 4px}
.stat-pill .v{font-size:16px;font-weight:800;line-height:1.2}
.stat-pill .k{font-size:11px;color:var(--ink-3);margin-top:3px}
.stat-pill.ok .v{color:var(--ok)} .stat-pill.no .v{color:var(--danger)} .stat-pill.mid .v{color:var(--warn)}
.detail-line{font-size:11px;color:var(--ink-3);margin-top:9px;line-height:1.6}

/* ---------- 用神三派 ---------- */
.ys-grid{display:flex;flex-direction:column;gap:8px}
.ys-card{border-radius:var(--r-md);padding:11px 12px;border:1px solid var(--line);background:var(--surface-2)}
.ys-card.main{border-color:var(--brand);background:linear-gradient(135deg,var(--brand-soft),transparent 72%)}
.ys-head{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800}
.ys-tag{font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--gold-soft);color:var(--gold-text);letter-spacing:.5px}
.ys-tag.main{background:var(--brand);color:#fff}
.ys-body{font-size:11.5px;color:var(--ink-2);margin-top:6px;line-height:1.7}
.ys-body b{color:var(--wx-wood);font-weight:700}
.ys-body .j{color:var(--danger);font-weight:700}
.disclaimer{font-size:11px;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);padding:9px 11px;border-radius:var(--r-md);line-height:1.6;margin-top:10px}
.disclaimer b{color:var(--gold-text);font-weight:700}

/* ---------- 用神 · 最终裁定 / 冲突披露（260901 接线补） ---------- */
.ys-final{margin-top:10px;border:1px solid var(--brand);border-radius:var(--r-md);padding:10px 12px;background:linear-gradient(135deg,var(--brand-soft),transparent 55%)}
.ys-final-title{font-size:12.5px;font-weight:800;margin-bottom:6px}
.ys-final-title .sub{font-size:11px;color:var(--ink-3);font-weight:400}
.ys-final-row{display:flex;gap:8px;font-size:var(--fs-min,12px);line-height:1.7}
.ys-final-row .k{flex:none;min-width:44px;color:var(--ink-3);font-weight:600}
.ys-final-row .v{font-weight:700}
.ys-final-row .v.j{color:var(--danger)}
/* ★ 261007 owner 第 5 条 · 用神卡的「五行 → 天干-十神」行（每轨紧随 喜/忌 行一行）
   —— 与上行 `.ys-final-row` **同栅格**（`.k{min-width:44px}` ＋ `gap:8px`）⇒ 左缘对齐、可扫读 */
.ys-final-sub{display:flex;gap:8px;font-size:var(--fs-min,12px);line-height:1.65;
  color:var(--ink-2);margin-top:1px}
.ys-final-sub .k{flex:none;min-width:44px;color:var(--ink-3);font-weight:600}
.ys-final-sub .v{word-break:break-word}
.ys-conflicts{margin-top:10px;border:1px dashed var(--warn);border-radius:var(--r-md);padding:10px 12px;background:var(--surface-2)}
.ys-conflicts-title{font-size:12px;font-weight:800;margin-bottom:6px}
.ys-conflicts-title .sub{font-size:11px;color:var(--ink-3);font-weight:400}
.ys-conflict-item{font-size:11px;color:var(--ink-2);line-height:1.7;padding:2px 0;border-bottom:1px dotted var(--line)}
.ys-conflict-item:last-child{border-bottom:none}

/* ---------- 运岁引动神煞（细盘 · 260901 接线补） ---------- */
.ssf-list{display:flex;flex-direction:column;gap:5px;padding:4px 2px}
.ssf-item{display:flex;align-items:flex-start;gap:8px;font-size:11px}
.ssf-gz{flex:none;min-width:44px;font-weight:800;font-size:12.5px}
.ssf-hits{display:flex;flex-wrap:wrap;gap:4px}
.ssf-var{font-size:11px;color:var(--warn);margin-left:2px}

/* ---------- 刑冲合害 ---------- */
.xing-list{display:flex;flex-direction:column;gap:8px}
.xing-item{display:flex;align-items:flex-start;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 10px}
.xing-tag{font-size:var(--fs-min-2,10.5px);font-weight:800;border-radius:6px;padding:2px 7px;color:#fff;flex:none;margin-top:1px}
.xing-tag.h{background:var(--wx-wood)} .xing-tag.p{background:var(--wx-fire)} .xing-tag.f{background:var(--wx-water)} .xing-tag.s{background:var(--gold)}
.xing-txt{font-size:12px;color:var(--ink-2);line-height:1.6}
.xing-txt b{color:var(--ink)}
.xing-txt .sub{font-size:11px;color:var(--ink-3);margin-left:4px}

/* ---------- 神煞 ---------- */
.ss-group{margin-bottom:7px}
.ss-group:last-child{margin-bottom:0}
.ss-head{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);font-weight:700;margin-bottom:4px}
.ss-chip-row{display:flex;flex-wrap:wrap;gap:7px}
.ss-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12px}
/* ★ 260926 指令④：**神煞一览 → 单列 · 小字 · 逐条可点开**
   owner：「神煞可点击是要做的，而且神煞的展示方式要**一列**，把**字改小**」。
   ⛔ 类名用 `ss-item*`（不用 `ss-line` —— 后者已被 `shenshaOf()` 占用，防同名异义 71★）。 */
.ss-chip-row.ss-item-list{display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:26px; align-items:start;}
/* ★★ 261102 owner（第二次）：「神煞不要搞成竖着排版，手机端可以这样，但电脑端这中间空的太大了」
   ⛔ 事由：260926 owner 曾要求「一列」，本轮在 PC 上变成**左 chip、右命位、中间空 700px** 的
      两端对齐长条 —— 一列是对的意图（不排成药丸），但 PC 宽屏下浪费了整行宽度。
   ✅ 现制：**≥1000px 两列网格**（每条自成一块）；<1000px 与手机回单列 block
      （手机上一列本来就好读，owner 明确「手机端可以这样」）。
   ⚠ 不改 `.ss-item` 的 flex 结构 ⇒ 两列内每条仍「左 chip｜右命位」，只是列宽从 1060px 收窄到 ~520px，
      中间空白与视线跳距同步减半。 */
@media (max-width:999px){
  .ss-chip-row.ss-item-list{display:block;}
}
/* ★ 260930：`<details>`（.ss-item_sum / .ss-item_caret / .ss-item[open] / .ss-item_body）
   **整组已撤** —— 逐条内联展开体改由「古籍 · 参阅」面板（`.ss-sheet`）承担（同源数据，
   两处并存＝同一信息两处呈现 · 硬教训 14）。行本体退化为**一行 flex**：
   左＝可点 chip（带 `data-ss`），右＝命位溯源。 */
.ss-item{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;min-height:30px;
  padding:4px 2px;border-bottom:1px dashed var(--line);}
/* ★ 261102 owner：「神煞一览的卡片太长了，排版上要精简一点」。
   病根＝`min-height:var(--hit)`(44px) 逐行撑高，20 条即 880px。
   修法：桌面按**鼠标**口径压到 30px（WCAG 2.2 AA 对指针为 24×24，30 有余量）；
   触控设备仍走 44px —— ⛔ 不是取消可点下限，是按输入方式分档。
   ⚠ 不删 `min-height`（否则行会塌到文字高，仍可点但视觉粘连）。 */
@media (pointer:coarse), (max-width:767px){
  .ss-item{min-height:var(--hit);padding:4px 2px;}
}
.ss-item:last-child{border-bottom:0;}
/* 行内的 chip 由「药丸」降为**极简标签**（一列排布下药丸会显得笨重）；
   ⛔ 全局 `.ss-chip` 规则不动（吉凶倾向块与空亡行仍走药丸），此处仅**作用域覆盖**。
   ⚠ 不覆写 `min-height` —— 命中下限 ≥44px 由 app.css 的 `.ss-chip` 族规则承担，
     此处删掉它会让整行可点区塌到 ~17px（readability 口径的回退）。 */
.ss-item .ss-chip{background:transparent;border:0;padding:0;font-size:11.5px;}
/* ★ 261102：吉凶倾向由**独立块**并入每条神煞行（owner：「吉凶倾向也做进去，不单独成立」）。
   一横（在哪：柱位＋分级）一纵（什么性质：吉/凶）合到同一行，读者不必两处对照。 */
.ss-tend{flex:none;font-size:10px;line-height:15px;padding:0 5px;border-radius:4px;
  border:1px solid currentColor;letter-spacing:.04em}
.ss-tend.ji{color:var(--ok)}
.ss-tend.xiong{color:var(--danger)}
/* ⚠ 倾向有三值：吉／凶／**中**（实测该盘 中10 吉12 凶5）。原代码把「中」也归到 xiong（红），
   属把中性读成凶 —— 语义错，改独立色。 */
.ss-tend.zhong{color:var(--ink-3)}
.ss-item_pos{margin-left:auto;font-size:11px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%;}
/* ★ 261102：两列网格下列宽约 520px，`max-width:48%` 只剩 250px ⇒ 最长的命位串
   （「日干辛（月支戌｜本月天德=月德同宫，故天德合=月德合同字）」，31 字）会被省略号吃掉。
   两列下取消截断、允许折行；单列（手机）仍保留省略号，防长串撑破屏。 */
@media (min-width:1000px){
  .ss-item_pos{max-width:none;white-space:normal;overflow:visible;text-align:left;
    margin-left:0;}
}
/* ★★ 261102 三次修正：`margin-left:auto`（左名右位 · 两端对齐）在**窄栏里制造空洞** ★★
   owner 原话「电脑端这中间空的太大了」。第一版我把它理解成"整行太宽"，改成两列后
   列内**仍然空** —— 因为 `margin-left:auto` 把命位推到列右边缘，chip 与命位之间
   留出 400px 空气，一行只有两个端点、没有连续内容。
   ⇒ 真正要拆的是这个两端对齐：**≥1000px 时取消 `margin-left:auto`，命位紧跟 chip**。
      此时首行＝「徽标 名 倾向 命位」四段连续，视觉重量落在左侧；
      第二行条件（`flex:1 1 100%`）自然占满列宽，整块不再显空。
   ⚠ <1000px 保持原右对齐不动：单列窄屏下 chip 与长命位串之间需要推力分隔，
      否则二者挤在一起更难读。 */
@media (max-width:999px){
  .ss-item_pos{margin-left:auto;}
}

/* ★★ 261102 补回「吉凶的具体内容」：条件作第二行全宽小字 ★★
   上游＝`shensha_tendency[n].条件`（48 条 / 21–72 字）。上一轮撤独立块时把它整段丢了，
   owner 一眼看出「吉凶的具体内容不见了」。此处与首行（在哪＋什么性质）分层：
   首行给结论，次行给凭什么。`**粗体**` 由 `mdInline()` 转 `<b>`，故补 b 的色。 */
.ss-item_cond{flex:1 1 100%;font-size:11px;line-height:1.62;color:var(--ink-3);
  margin:0 0 2px;}
.ss-item_cond b{color:var(--ink-2);font-weight:600;}
.ss-dict-cap{margin-top:9px;font-size:11px;line-height:1.55;color:var(--ink-3);}

/* ══ ★ 260930 神煞「古籍 · 参阅」面板（复刻 8Char · owner 第 6 条）════════════
   形态**对齐 `.skin-sheet`/`.pref-sheet`**：mask ＋ bottom sheet ＋ `.hidden` 类切换。
   z-index 取 134/135（高于 skin 的 132/133）——但**真正决定能否翻过底栏的不是 z**：
   靠的是 `_syncSheetOpenClass()` 给 `<html>` 挂 `ql-sheet-open`（背景锁 ＋ 包含块闸），
   ⛔ 只调 z 不挂类 ⇒ 弹层仍被关在栈里（本项目已栽三次 · 见技能「查 8 · 型 ①/④」）。
   ⛔ 所有尺寸**走令牌**：皮肤层不得改版式（EL-5），且 `audit_skins` 会拦裸 px 字号。 */
.ss-mask{position:fixed;inset:0;z-index:134;background:rgba(0,0,0,.46);}
.ss-sheet{position:fixed;left:0;right:0;bottom:0;z-index:135;display:flex;flex-direction:column;
  max-height:88vh;background:var(--surface);border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -10px 34px rgba(0,0,0,.2);}
.ss-mask.hidden,.ss-sheet.hidden{display:none;}
.ss-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);}
.ss-kicker{color:var(--line-strong);font-size:var(--fs-sm);letter-spacing:.08em;}
.ss-title{flex:1;font-size:var(--fs-lg);}
.ss-x{width:var(--hit);height:var(--hit);flex:none;border:0;background:transparent;
  color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer;border-radius:var(--r-sharp-md);}
.ss-x:hover{color:var(--brand);}
.ss-body{flex:1;overflow-y:auto;padding:var(--sp-3) var(--sp-4) var(--sp-5);
  -webkit-overflow-scrolling:touch;}
/* 分段＝编号左列 ＋ 段题 ＋ 正文，段间细线（8Char 版式） */
.ss-sec{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--sp-2);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line);}
.ss-sec:last-child{border-bottom:0;}
.ss-no{font-style:normal;font-size:var(--fs-sm);color:var(--brand);font-weight:700;
  letter-spacing:.06em;line-height:1.9;}
.ss-secBody{min-width:0;}
.ss-secH{margin:0 0 var(--sp-1);font-size:var(--fs-md);font-weight:700;color:var(--ink);}
.ss-text,.ss-tend{margin:0;font-size:var(--fs-sm);line-height:1.85;color:var(--ink-2);
  word-break:break-word;}
.ss-tend .grade,.ss-text .grade{margin-right:var(--sp-1);}
.ss-missing{margin:0;font-size:var(--fs-sm);line-height:1.8;color:var(--ink-3);}
.ss-note{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);line-height:1.7;color:var(--ink-3);}
/* 可点 chip 的触发态（⛔ 只加交互反馈，**不改几何** —— EL-5） */
.ss-chip[data-ss]{cursor:pointer;}
.ss-chip[data-ss]:hover{background:var(--surface-2);border-color:var(--line-strong);}
.ss-chip[data-ss]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.grade{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:5px;font-size:11px;font-weight:800}
.grade-s{background:var(--grade-s);color:var(--ink)}
.grade-a{background:var(--grade-a);color:#fff}
.grade-b{background:var(--grade-b);color:#fff}
.grade-c{background:var(--grade-c);color:#fff}
/* ⚠ 数据里 `国印贵人`／`流霞` 仍标 grade="X"（S/A/B/C 体系外的旧值）。
   显示层统一映射为 **C**（见 app.js `shenshaChipHtml`），此处仅兜底防裸字。 */
.grade-x{background:var(--grade-c);color:var(--ink)}
/* ★ 261102 二次修正：C 级由「空心描边」改回**实心**。
   ⛔ 上一版判据错在哪：我把它改成 `background:transparent + inset 描边`，理由写的是
      「灰底白字在浅色皮肤下几乎看不见」。但那个"看不见"是**本地预览的假象** ——
      本地 `web_server.py` 不挂 `/shared/`，`light.css` 404 ⇒ `--grade-c` 为空
      ⇒ 底色失效。**令牌正常时**（生产/本预览）C 是 `#8a8a85` 实心，看得见。
   ⇒ 真正的毛病只有一条：`color:#fff` 配 `#8a8a85` 对比度仅 3.0:1，偏低**但不是不可见**。
      修法应对准对比度，而非推翻成空心 —— 空心会被读成「未定级/占位」，
      与 S/A/B 的实心不一致，反而让 owner 那句「没有等级划分」的问题更严重。
   ✅ 现制：实心 `var(--grade-c)` ＋ **深字 `var(--ink)`**（同 S 级策略），四档视觉统一、对比达标。 */
.grade-c{background:var(--grade-c);color:var(--ink)}
/* ★ 261005：「典据分级**缺**」徽标 —— 引擎 `shensha_meta` 未登记该煞分级时**明示缺**，
   ⛔ 不拿任何 S/A/B 值充数（引擎自注：兜底值是**信号**不是内容；前端做第二次兜底＝把「没登记」伪装成「有分级」）。
   ⚠ 特异性须**高于**皮肤里的 `[data-skin="x"] .grade{…}`（(0,2,0)）—— 那类规则把字色设成
     `var(--bg)`（≡ 该皮肤自己的深底色）⇒ 若被它压住，「缺」会**隐形**。故用 `.ss-text .grade.grade-none`
     （(0,3,0)）并限定在它唯一的落点（「古籍 · 参阅」面板 04 段）。 */
.ss-text .grade.grade-none{background:transparent;color:var(--ink-3);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--line-strong)}

/* ---------- 细盘：6 列 10 行排列表 ---------- */
.detail-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
.detail-wrap>.left{min-width:0}
.pillars-table{width:100%;min-width:0;border-collapse:collapse;font-size:12px;table-layout:fixed}
.pillars-table th,.pillars-table td{border:1px solid var(--line-thin,var(--line));padding:9px 5px;text-align:center;vertical-align:middle;line-height:1.35}
.pillars-table th{background:var(--surface-2);color:var(--ink-3);font-weight:600;font-size:11px;letter-spacing:1px;padding:7px 4px}
.pillars-table th.col-dynamic{background:var(--gold-soft);color:var(--gold-text);font-weight:700}
.pillars-table th.col-day{background:var(--brand);color:#fff;font-weight:800;letter-spacing:2px}
.pillars-table .col-day{background:var(--brand-soft)}
.pillars-table .col-year-tag{font-size:11px;color:var(--ink-3);margin-top:1px;line-height:1.25;font-weight:500}
.pillars-table th .col-year-tag{color:rgba(255,255,255,.82);font-size:11px;font-weight:500}
.pillars-table .row-name{background:var(--surface-2);color:var(--ink-3);font-weight:700;font-size:12px;letter-spacing:1px;text-align:right;padding-right:10px;width:64px;min-width:64px;white-space:nowrap}
.pillars-table .gz{font-family:var(--font-serif);font-size:24px;font-weight:800;line-height:1.1}
.pillars-table .gz-sub{font-size:11px;color:var(--ink-3);margin-top:1px;line-height:1.3}
.pillars-table .shishen{font-size:11px;font-weight:700;line-height:1.2}
.pillars-table .sub-line{font-size:11px;color:var(--ink-2);line-height:1.3}
.pillars-table .relation-row{background:var(--gold-soft)}
.pillars-table .relation-row td{font-size:11px;color:var(--ink-2);padding:14px 7px;line-height:1.7;vertical-align:top;text-align:left}
.pillars-table .relation-row td .rel-tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:11px;font-weight:700;margin:0 3px 3px 0;background:var(--accent-soft);color:var(--accent)}
/* ★★ 261007-b owner 第 3 条（第二轮）· 「与原盘关系」卡 ＝ **运岁三列等宽 grid** ★★
   owner：「与原盘关系只留运岁月的，分成三列…与原局关系好好做个排版设计」。
   ⛔ 上一稿（`.pillars-table.rel-table` 两列竖排）**已废**：
      它仍铺 7 行（3 运岁 ＋ 4 原局）——原局那 4 行取自简化版 `relOfCol()`（只 3 条判据），
      且原局四柱在上方「四柱总览」已全量呈现 ⇒ 纯冗余；两列竖排又把 7 行摊成长条、无从并列对照。
   ✅ 本稿：3 列 `minmax(0,1fr)` 等宽 ⇒ 任列的长关系串只换行、**不会把该列撑宽**
      （治 261007 前「长文列 172px vs 其余 58px」的老病）；列间 1px 竖线＝类表格观感，
      但**不受 `table-layout` 的列宽牵制**（这正是选 grid 而非 table 的原因）。
   ⛔ 不沿用 `.pillars-table .relation-row td .rel-tag`（那是**表内**选择器，本卡非表）；
      本卡自持 `.rel-item .rel-tag` 一份，两者独立、⛔ 不互相覆盖。 */
.card-rel .rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.card-rel .rel-colg{padding:11px 9px 13px;min-width:0}
.card-rel .rel-colg + .rel-colg{border-left:1px solid var(--line)}
.card-rel .rel-colg_h{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;
  padding-bottom:7px;margin-bottom:8px;border-bottom:1px dashed var(--line)}
.card-rel .rel-colg_name{font-size:var(--fs-xs);color:var(--ink-3);font-weight:700;letter-spacing:.5px}
.card-rel .rel-colg_gz{display:inline-flex;align-items:baseline;gap:1px;font-style:normal}
.card-rel .rel-colg_ch{font-size:17px;font-weight:800;line-height:1.1;color:var(--gz,var(--ink));letter-spacing:1px}
.card-rel .rel-colg_sub{font-size:11px;color:var(--ink-3);font-weight:600;width:100%}
.card-rel .rel-colg_b{display:flex;flex-direction:column;gap:6px;min-width:0}
.card-rel .rel-item{display:block;font-size:var(--fs-min,12px);line-height:1.5;color:var(--ink-2);word-break:break-word}
.card-rel .rel-item .rel-tag{display:inline-block;padding:0 5px;border-radius:4px;font-size:11px;font-weight:700;
  margin-right:4px;background:var(--accent-soft);color:var(--accent);vertical-align:1px}
.card-rel .rel-colg_e{font-size:var(--fs-min,12px);color:var(--line-strong)}
/* ★★ 261007-b owner 第 3 条（第三轮）· 「与原盘关系」**卡题收紧**（「好好做个排版设计」） ★★
   病灶（CDP 实测 390px 手机档）：卡题 h=**122.4**，其中**第三行**只落「折叠箭头 ＋ 典印」两枚，
   左侧约 250px 全空 ⇒ 观感＝一条 44px 空带（放大实拍 `_scratch_/fx5/z_rel3.png`）。
   根因链（三条叠加，逐条可验）：
     ① `.sub` 被手机档规则 `.card-title .sub{flex:1 1 100%}`（app.css:2027，为治横向溢出而立）顶成**独占一行**；
     ② 箭头(`initCardTitles()` app.js:5975) 与 典印(`initSeals()` app.js:6157) **一律 append 到卡题末尾**
        ⇒ DOM 序在 `.sub` **之后** ⇒ 被 100% 的 `.sub` 挤到**第三行**；
     ③ 典印 `min-height:44px` 是**手机档触摸下限**（layout-v3.css:1029，ui-ux-pro-max CRITICAL 条）
        ⇒ 第三行高度被钉在 44px；且 ⛔ **不可缩**（缩了就破 44×44 铁律）。
   修法（⛔ 不加 `!important`、⛔ 不改①②③任何一条上游规则 —— 全是通用层，动了必溢出别家卡）：
     把箭头/典印**脱离 flex 流** → `position:absolute` 钉在卡题右上角（`.card-title` 自身
     `position:sticky/relative`，已是绝对定位的包含块，见 app.css:1805/2163）。
   ⇒ 卡题塌回「标题行 ＋ 附注行」两行（**≈58px，省 64px**）；44px 命中盒**原样保留**。
   ⚠ `padding-right:96px`＝给右上角两枚徽标让位（典印右缘 350 ／ 箭头 282–302，均 ≤ 360）
      ⇒ `.sub` 与标题文本的**可用宽 250px**，实测 sub 文本 ≈228px、标题 ≈83px，二者皆不触徽标。 */
.card-rel .card-title{padding:9px 96px 8px 14px;margin:0;border-bottom:1px solid var(--line);
  align-items:center;row-gap:3px;}
.card-rel .card-title .card-fold-caret{position:absolute;right:58px;top:calc(50% - 3px);margin:0;}
.card-rel .card-title .rep-seal{position:absolute;right:10px;top:8px;margin:0;}
/* 安全阀：确有溢出时只在此层横向滚动；行标签列 position:sticky 固定不随滑 */
.detail-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;min-width:0}

/* ---------- 右侧时间流（大运/流年/流月）---------- */
.tl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:var(--sp-4)}
.tl-head{padding:10px 14px 8px;background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.tl-head .lt{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:6px}
.tl-head .lt::before{content:"";width:3px;height:12px;background:var(--brand);border-radius:2px}
.tl-head .r-info{margin-left:auto;font-size:11px;color:var(--ink-3);text-align:right;line-height:1.4}
/* 默认：横向滚动（用于大运等跨度大、不分详略的时间块） */
.tl-scroll{display:flex;gap:6px;padding:10px 12px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.tl-scroll::-webkit-scrollbar{height:5px}
.tl-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.tl-item{flex:0 0 auto;min-width:64px;border:1px solid var(--line);border-radius:var(--r-md);padding:7px 6px;text-align:center;background:var(--surface-2);scroll-snap-align:start;position:relative;transition:.18s;cursor:pointer}
.tl-item:hover{border-color:var(--brand)}
.tl-item.now{border-color:var(--brand);background:var(--brand-soft)}
.tl-item .y{font-size:11px;color:var(--ink-3);font-weight:600;line-height:1.2}
.tl-item .y b{color:var(--brand);font-weight:800}
.tl-item .gz{font-family:var(--font-serif);font-size:18px;font-weight:800;line-height:1.1;margin-top:2px}
.tl-item .ss{font-size:11px;color:var(--ink-2);margin-top:2px;line-height:1.2}
.tl-item .age{font-size:11px;color:var(--ink-3);margin-top:1px;line-height:1.2}
.tl-item .now-badge{position:absolute;top:-5px;right:-4px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;padding:1px 4px;border-radius:6px;letter-spacing:1px}

/* 上/下布局（用于流年/流月）：一个时间单元一行，全宽，列向栅格
   —— 大运保留横向以保证 10 年跨度能一屏扫描 */
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll,
.tl-card[data-stack="xingyun"] [data-pane="liuyue"] .tl-scroll,
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll{
  display:flex;flex-direction:column;gap:6px;padding:8px 12px 10px;
  overflow-x:visible;scroll-snap-type:none;max-height:none
}
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item,
.tl-card[data-stack="xingyun"] [data-pane="liuyue"] .tl-scroll .tl-item,
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll .tl-item{
  min-width:0;width:100%;display:grid;gap:6px;text-align:left;
  padding:8px 12px;margin:0;border-radius:var(--r-md);
  border:1px solid var(--line);border-left:3px solid var(--line);
  background:var(--surface-2);scroll-snap-align:none
}
/* 详略排版：把"年份 / 干支 / 十神 + 信号 / 关系"用三列栅格对齐 */
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item{
  grid-template-columns:54px minmax(0,1fr) minmax(0,1fr) auto
}
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .y{font-size:11.5px}
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .y b{font-size:13px}
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .gz{font-size:20px;margin-top:0;display:flex;align-items:center}
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .ss{font-size:11px;margin:0;align-self:center}
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .ly-sig{
  align-self:center;justify-self:end;font-size:11px;padding:2px 8px
}
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .age{
  grid-column:1 / -1;margin-top:2px;font-size:11px;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:6px
}
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .age .rel-tag{font-size:11px}
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item.now{border-left-color:var(--brand)}
/* 流月：节气 / 干支 / 十神 三列；关系行另起 */
.tl-card[data-stack="xingyun"] [data-pane="liuyue"] .tl-scroll .tl-item{
  grid-template-columns:60px minmax(0,1fr) minmax(0,1fr)
}
.tl-card[data-stack="xingyun"] [data-pane="liuyue"] .tl-scroll .tl-item .y{font-size:11.5px}
.tl-card[data-stack="xingyun"] [data-pane="liuyue"] .tl-scroll .tl-item .gz{font-size:18px;margin-top:0}
.tl-card[data-stack="xingyun"] [data-pane="liuyue"] .tl-scroll .tl-item .ss{font-size:11px;margin:0;align-self:center}
.tl-card[data-stack="xingyun"] [data-pane="liuyue"] .tl-scroll .tl-item .age{
  grid-column:1 / -1;margin-top:2px;font-size:11px
}
/* 260903 小运：与大运同款上下布局（岁数 / 干支 / 十神 三列） */
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll .tl-item{
  grid-template-columns:78px minmax(0,1fr) minmax(0,1fr)
}
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll .tl-item .y{font-size:11.5px}
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll .tl-item .y b{font-size:13px;color:var(--brand)}
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll .tl-item .gz{font-size:19px;margin-top:0}
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll .tl-item .ss{font-size:11px;margin:0;align-self:center}
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll .tl-item .age{
  grid-column:1 / -1;margin-top:2px;font-size:11px
}
/* 260903 口径脚注（铁律 5 第③落点：流派差异必须面向用户透出，不可只在内部文档） */
.tl-foot{padding:7px 12px 9px;font-size:11px;line-height:1.6;color:var(--ink-3);
  background:var(--surface-2);border-top:1px solid var(--line)}
.tl-foot b{color:var(--ink-2);font-weight:800}
/* 260904 行运栏：小运/大运/流年/流月 单卡四页签（原盘表置顶，上下布局） */
.xy-tabs{display:flex;gap:4px;padding:8px 10px 0;background:var(--surface-2);border-bottom:1px solid var(--line)}
.xy-tab{flex:1;max-width:96px;border:none;background:none;font-family:inherit;font-size:12px;font-weight:700;
  color:var(--ink-3);padding:7px 4px 9px;cursor:pointer;position:relative;transition:.18s;letter-spacing:1px}
.xy-tab:hover{color:var(--ink-2)}
.xy-tab.active{color:var(--brand);font-weight:800}
.xy-tab.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;
  width:24px;height:2.5px;background:var(--brand);border-radius:2px 2px 0 0}
.xy-pane>.tl-head{background:transparent}
/* 260904 四柱总览（问真式行列表格）补充样式 */
.qz-table .shishen-cell{font-weight:700}
.qz-table .sub-cell{font-size:11px;color:var(--ink-2);line-height:1.55}
.qz-table .zg-item{font-weight:700;margin:0 2px}
/* 260903 子时换日提示卡（仅晚子时出生时出现） */
.zi-note{margin:0 0 var(--sp-3);padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);font-size:11.5px;line-height:1.65;color:var(--ink-2)}
.zi-note .zi-line+.zi-line{margin-top:3px}
.zi-note b{color:var(--ink);font-weight:800}
.zi-note .zi-desc{color:var(--ink-3);margin-left:6px}
.zi-note .zi-other b{font-size:13px;color:var(--brand)}
.zi-note .zi-tip{color:var(--ink-3);font-size:var(--fs-min,12px);margin-top:5px;
  padding-top:5px;border-top:1px dashed var(--line)}
.season-bar{display:flex;border-top:1px solid var(--line);background:var(--surface-2)}
.season-bar .wb-seg{flex:1;text-align:center;padding:8px 4px;font-size:11px;font-weight:700;color:var(--ink-3);position:relative}
.season-bar .wb-seg b{color:var(--ink-2);font-weight:800}
.season-bar .wb-seg.on{background:var(--brand);color:#fff}
.season-bar .wb-seg.on b{color:#fff}
.season-bar .wb-seg:not(:last-child)::after{content:"";position:absolute;right:-1px;top:18%;bottom:18%;width:1px;background:var(--line)}
/* ★ 260926 指令①：**月令子块**（并入旺衰卡）
   —— 原为独立卡（`wx-season-head` 此前**无任何样式**，两枚 span 裸行）；
      并入后补样式：当令五行给品牌色徽章，四季bar 复用 `.season-bar`。 */
.wx-season-block{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);}
.wx-season-cap{font-size:12px;font-weight:700;}
.wx-season-cap .sub{margin-left:6px;font-size:11px;color:var(--ink-3);font-weight:400;}
.wx-season-head{display:flex;align-items:center;gap:8px;margin:7px 0 6px;}
.wx-season-wx{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  border-radius:var(--r-md);background:var(--brand);color:#fff;font-weight:800;font-size:13px;}
.wx-season-txt{font-size:11px;color:var(--ink-3);}

/* ---------- 合盘 ---------- */
.syn-hero{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--brand-soft),var(--accent-soft));border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.syn-score{width:96px;height:96px;border-radius:50%;background:var(--brand);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;box-shadow:var(--shadow-md)}
.syn-score .num{font-size:28px;font-weight:800;line-height:1}
.syn-score .lbl{font-size:11px;letter-spacing:1px;margin-top:4px;opacity:.85}
.syn-info{flex:1}
.syn-info .tier{font-size:17px;font-weight:800}
.syn-info .note{font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.6}
.syn-dims{display:flex;flex-direction:column;gap:8px}
.syn-dim{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.syn-dim .d-name{font-size:12.5px;font-weight:700;width:78px;flex:none}
.syn-dim .d-bar{flex:1;height:9px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.syn-dim .d-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--gold));border-radius:999px}
.syn-dim .d-score{font-size:13px;font-weight:800;width:42px;text-align:right;flex:none}
.syn-dim .d-detail{font-size:11px;color:var(--ink-3);width:150px;text-align:right;flex:none;line-height:1.4}

/* ---------- 记录 ---------- */
.record-list{display:flex;flex-direction:column;gap:10px}
.record-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 14px;cursor:pointer;transition:.18s}
.record-card:hover{border-color:var(--brand);box-shadow:var(--shadow-md)}
.record-card .rc-top{display:flex;align-items:center;gap:8px}
.record-card .rc-name{font-size:13.5px;font-weight:800}
.record-card .rc-gz{font-family:var(--font-serif);font-size:13px;font-weight:700;letter-spacing:1px;margin-left:auto}
.record-card .rc-meta{font-size:11px;color:var(--ink-3);margin-top:5px;line-height:1.5}
.record-card .rc-meta b{color:var(--ink-2)}
.record-empty{text-align:center;color:var(--ink-3);font-size:13px;padding:40px 20px;line-height:1.8}
.record-actions{display:flex;gap:8px;margin-bottom:var(--sp-4)}
.record-actions .mini-btn{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}

/* ---------- 我的 ---------- */
.mine-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-4)}
.mine-group .mg-title{padding:11px 14px;background:var(--surface-2);font-size:12.5px;font-weight:800;border-bottom:1px solid var(--line)}
.mine-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px dashed var(--line);font-size:13px;cursor:pointer;transition:.15s}
.mine-row:last-child{border-bottom:none}
.mine-row:hover{background:var(--surface-2)}
.mine-row .mr-k{flex:1}
.mine-row .mr-v{margin-left:auto;font-size:11px;color:var(--ink-3)}
.mine-row .mr-arrow{color:var(--ink-3);font-size:12px}
.mine-grade{display:flex;gap:8px;padding:12px 14px;flex-wrap:wrap}
.mine-grade .grade{font-size:11px;min-width:22px;height:22px}
.about-text{font-size:11.5px;color:var(--ink-2);padding:12px 14px;line-height:1.8}

/* ---------- 工作台：AI 配置 / 调研校准 ---------- */
.ai-cfg{padding:12px 14px}
.cfg-form{display:flex;flex-direction:column;gap:10px;margin:4px 0 2px}
.cfg-field{display:flex;flex-direction:column;gap:5px;text-align:left}
.cfg-field>span{font-size:12px;color:var(--ink-2);font-weight:600}
.cfg-field input,.cfg-field select{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);font-size:14px;color:var(--ink);background:var(--surface-2);font-family:inherit;width:100%}
.cfg-field input:focus,.cfg-field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.cfg-actions{margin-top:6px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--danger)} .dot.mid{background:var(--warn)}
.cali-body{padding:12px 14px}
.cali-pills{display:flex;gap:8px;flex-wrap:wrap}
.cali-c{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.cali-c-row{display:flex;gap:10px;padding:5px 0;font-size:12px;border-bottom:1px dotted var(--line)}
.cali-c-k{font-weight:800;color:var(--ink);flex:none;width:34px}
.cali-c-v{color:var(--ink-2);line-height:1.6}
.cali-c-v.ok{color:var(--ok)} .cali-c-v.mid{color:var(--warn)}
.cali-docs{margin-top:12px}
.cali-docs-t{font-size:11px;color:var(--ink-3);font-weight:700;margin-bottom:6px}
.cali-doc{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dotted var(--line);font-size:12px}
.cali-doc .cd-name{color:var(--ink);font-weight:600}
.cali-doc .cd-dim{color:var(--ink-3);text-align:right}

/* ---------- 底部导航 ---------- */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:780px;height:64px;background:var(--surface);border-top:1px solid var(--line);display:flex;z-index:90}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;color:var(--ink-3);font-size:11px;font-family:inherit;cursor:pointer;position:relative;transition:.18s}
.tab svg{width:21px;height:21px}
.tab.active{color:var(--brand);font-weight:700}
.tab.active::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:26px;height:2.5px;background:var(--brand);border-radius:0 0 3px 3px}

/* ---------- 响应式（★ T-080 260921 勘误：**设计目标＝mobile-first，现状为混合策略·未达成**）----------
   实测（8 条 @media，由 `tests/gate/audit_breakpoints.py` 机械复算）：
     手机优先 `min-width` ×3（768 ／ 992×2）｜桌面优先 `max-width` ×4（767×2 ／ 420 ／ 480）
     ｜正交 ×1（prefers-reduced-motion）。
   ⇒ 原注释仅写「mobile-first」而实现为混合策略 ⇒ **名实不符**，本行如实勘误。
   ⛔ **本批未做重排/合并**（技术判断，非偷懒）：CSS 层叠依赖规则**出现顺序**，
     同特异性时后者胜。实例（已退役·留痕）：`.ql-watermark{display:none}`（基线）在前、
     `@media(max-width:767px){.ql-watermark{display:block}}` 在后 ⇒ 手机才显水印；
     **若把媒体块上移以「合并断点」，则基线反在后面胜出 ⇒ 水印消失＝视觉回归**。
     ⚠ 260922 更新：该水印元件已整体退役（见下方水印段注释），此例仅作**层叠顺序的教学留痕**。
   ⛔ 重排的前置条件＝**视觉回归能力**（无头浏览器截图对比）：
     当前 `tests/gate/smoke_ui.js`（39 项）与 `web/_ui_render_smoke.js` **全为 DOM/JS 断言、
     零 CSS 断言** ⇒ 对断点改动无守护。已登记 T-080 子项（现由 audit_breakpoints.py 静态守护）。
   设计目标断点：576 / 768 / 992 / 1200（对标 04 效果图详版细盘）。---------- */
/* 260904 细盘改全上下布局：原盘表置顶 + 行运栏（单卡四页签）在下，取消两栏与 sticky */
@media (min-width:768px){
  .record-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .quick-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
/* 桌面：细盘整体放宽（原盘表满宽自适应） */
@media (min-width:992px){
  .page{padding:18px 22px 90px}
  .detail-wrap{max-width:1400px;margin:0 auto}
}
/* 手机：原盘 6 列较挤。
   T-093 S3 ★ 起**不再写 min-width**——旧写法 .pillars-table{min-width:560px}
   会把 5 列表格强行撑到 560px，在 390px 屏上必然出现横向滚动条，
   正是 owner 点名的「命盘还要左右拉」。
   现改为：靠 table-layout:fixed 让四柱列等分收缩，只收紧内边距与字号；
   行标签列改 position:sticky（见 shell.css §4.2）——
   真出现溢出时，固定的是行标签列、滑动的是数据区。
   .detail-scroll 的 overflow-x 仅作**安全阀**保留，不再是常态行为。 */
@media (max-width:767px){
  .pillars-table .gz{font-size:20px}
  .pillars-table th,.pillars-table td{padding:7px 3px}
  /* 宽度交由 shell.css 按骨架裁定（此处只留排版微调，避免两处各写一个宽度） */
  .pillars-table .row-name{padding-right:6px;font-size:11px}
}
@media (max-width:420px){
  .syn-dim .d-detail{display:none}
}

/* ---------- 动效降级：尊重「减少动效」系统偏好（前庭功能障碍等） ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════════
   ★ 261013 · 触摸目标 ≥44×44（WCAG 2.5.5 Target Size / iOS HIG / Material）
   实测（260921 基准 §7.1）：11 个控件中仅 3 个达标 —— .iconbtn 34×34、
     .segmented .seg ≈31 高、.mini-btn ≈26 高、侧栏 .tab 40 高、.sample-chip/.mine-row 临界。
   做法：**伪元素外扩命中盒**（owner 认可口径）——
     · ⛔ **不改布局、不改外观**：元素自身 rect 与视觉一律不变（判据＝rect 前后相等）；
     · ⛔ **只扩竖直**：横向并排的控件（分段控制器 / 侧栏项）若横向外扩会互相夺点击；
     · 高度取 `max(100%, 44px)` ⇒ 已达标者（手机底栏 .tab 64px）自动不受影响。
   验证：真机 CDP `document.elementFromPoint()` 在元素上下缘 ±22px 处命中 ⇒ 见施工回执。
   ══════════════════════════════════════════════════════════════════ */
.iconbtn,.mini-btn,.segmented .seg,.sample-chip,.mine-row,
.cf>.cf-head,.basis>summary,.tab{position:relative}
.iconbtn::after,.mini-btn::after,.segmented .seg::after,.sample-chip::after,
.mine-row::after,.cf>.cf-head::after,.basis>summary::after,.tab::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:max(100%,44px);pointer-events:auto}

/* ---------- 轻量 toast（替代原生 alert，非阻断式） ---------- */
.ql-toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);max-width:80%;background:var(--ink);color:var(--bg);font-size:13px;line-height:1.4;padding:10px 16px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200;text-align:center}
.ql-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- C9 详版模式「依据」折叠区（计算依据 + 出处） ---------- */
.basis{margin-top:8px;border-top:1px dashed var(--line);padding-top:6px}
.basis>summary{cursor:pointer;font-size:11.5px;color:var(--gold-text);list-style:none;user-select:none;outline:none}
.basis>summary:focus-visible{box-shadow:0 0 0 2px var(--gold-text);border-radius:4px}
.basis>summary::-webkit-details-marker{display:none}
.basis>summary::before{content:"▸ ";font-size:11px}
.basis[open]>summary::before{content:"▾ "}
.basis-body{margin-top:6px;padding:8px 10px;background:var(--surface-2);border-radius:var(--r-sm);font-size:12px;line-height:1.6}
.basis-calc{margin:0 0 6px;padding-left:18px}
.basis-calc li{margin:2px 0}
.basis-calc code.ref,.basis-src code.ref{background:rgba(0,0,0,.06);border-radius:4px;padding:1px 5px;font-size:11px;color:var(--ink)}
.basis-src{color:var(--ink-3);font-size:11.5px}

/* ---------- C10 可折叠卡（T-093 S3 · U4） ----------
   用途：把「已在别处出现过」的明细下沉为抽屉，默认收起，降首屏信息重复。
   与 .basis 的差别：.basis 是卡**内**的细粒度依据区；.cf 是**整卡**的折叠头。 */
.card-fold{padding:var(--sp-4)}
.cf>.cf-head{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:13.5px;font-weight:800;outline:none;flex-wrap:wrap}
.cf>.cf-head::-webkit-details-marker{display:none}
.cf>.cf-head .tick{width:4px;height:15px;background:var(--brand);border-radius:2px;flex:none}
.cf>.cf-head .sub{margin-left:auto;font-size:var(--fs-min,12px);color:var(--ink-3);font-weight:500;white-space:nowrap}
.cf>.cf-head .cf-arrow{color:var(--ink-3);font-size:15px;line-height:1;transition:transform .18s}
.cf[open]>.cf-head .cf-arrow{transform:rotate(90deg)}
.cf>.cf-head:focus-visible{box-shadow:0 0 0 2px var(--brand);border-radius:4px}
.cf>.cf-body{padding-top:var(--sp-2);border-top:1px dashed var(--line);margin-top:var(--sp-2)}
.cf[open]>.cf-body{border-top-color:var(--line)}

/* ---------- C9 十神力量网格（详版模式） ---------- */
.shishen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:4px}
.sh-card{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 6px;text-align:center;background:var(--surface)}
.sh-name{font-weight:800;font-size:13px}
/* ★ 261013 #6：「档位 ＋ 百分比」合为一行（同 pill 内）。`nowrap` 防「强旺 100%」断行
   ⇒ 同排卡片高度不一（⛔ 不改 pill 宽度：`.sh-lvl` 本就是满宽 block）。 */
.sh-lvl{font-size:11px;font-weight:700;margin:3px 0;border-radius:6px;padding:1px 0;white-space:nowrap}
.sh-lvl.lv-weak{color:var(--ok);background:color-mix(in srgb, var(--ok) 12%, transparent)}
.sh-lvl.lv-mid{color:var(--warn);background:color-mix(in srgb, var(--warn) 12%, transparent)}
.sh-lvl.lv-strong{color:var(--danger);background:color-mix(in srgb, var(--danger) 12%, transparent)}
.sh-raw{font-size:11px;color:var(--ink-3);font-family:var(--mono,ui-monospace,monospace);margin-left:3px}
/* ★ 261013 #6（P1-2「0% 时淡化不抢眼」）：占比归零者，其百分比读数退到基准线色。 */
.sh-card.is-zero .sh-raw{color:var(--line-strong)}

/* ---------- 六亲推断 ---------- */
.six-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:4px}
.six-item{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;background:var(--surface)}
.six-role{font-weight:800;font-size:13px}
.six-star{font-size:11.5px;margin:3px 0;color:var(--ink-2)}
.six-trend{font-size:11px;color:var(--ink-3);line-height:1.5}
.pref{display:inline-block;border-radius:6px;padding:0 6px;font-size:11px;font-weight:700;margin-right:4px}
.pref-用神{color:#fff;background:var(--ok)}
.pref-喜神{color:#fff;background:var(--accent)}
.pref-忌神{color:#fff;background:var(--danger)}
.pref-闲神{color:var(--ink-2);background:var(--surface-3)}
/* L4（260829）六亲卡片 enrich 三字段子行 */
.six-meta{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px}
.six-chip{display:inline-block;border-radius:6px;padding:0 6px;font-size:11px;font-weight:700;background:var(--surface-3);color:var(--ink-2)}
.six-chip.intensity{background:var(--accent-soft);color:var(--accent)}
.six-chip.gong{background:var(--surface-3);color:var(--ink-2)}
.six-timing{font-size:11px;color:var(--ink-3);line-height:1.5;margin-top:2px;border-top:1px dashed var(--line);padding-top:3px}
.six-timing b{color:var(--ink-2);font-weight:700}

/* ---------- 脏腑关注 ---------- */
.hb-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:6px 2px;border-bottom:1px solid var(--line-thin);font-size:12.5px}
.hb-item:last-child{border-bottom:none}
.hb-wx{font-weight:800;color:var(--gold-text);min-width:54px}
/* ★ 261102：做功链断点（`水→木`）的箭头单独降色，避免和「五行名」连读成一个词 */
.hb-wx i{font-style:normal;font-weight:400;color:var(--ink-3);margin:0 2px}
.hb-level{color:var(--warn);font-weight:700;min-width:96px}
.hb-organ{color:var(--accent);font-weight:600}
.hb-part{color:var(--ink-2)}
.hb-note{color:var(--ink-3);flex:1 1 100%;order:5;font-size:var(--fs-min,12px)}
.hb-regimen{color:var(--ink-2);background:var(--surface-2);border-radius:6px;padding:1px 7px}
.hb-timing{color:var(--ink-2);background:var(--surface-2);border-radius:6px;padding:1px 7px}

/* ---------- 五行流通 · 做功链 ---------- */
.flow-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;font-size:12.5px}
.flow-node{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 9px;color:var(--ink)}
.flow-arrow{color:var(--gold-text);font-weight:800}
.flow-block{margin-top:8px;font-size:11.5px;color:var(--ink-2);line-height:1.6}

/* ---------- 白话解读 ---------- */
.reading-box{font-size:13.5px;line-height:1.75;color:var(--ink)}
.reading-box b{color:var(--brand)}

/* ---------- 大运喜忌 / 流年吉凶（细盘列） ---------- */
.dayun-align{display:inline-block;border-radius:6px;padding:1px 7px;font-size:var(--fs-min,12px);font-weight:800;margin-top:3px}
.dayun-align.align-xi{color:#fff;background:var(--ok)}
.dayun-align.align-ji{color:#fff;background:var(--danger)}
.dayun-align.align-mid{color:var(--ink-2);background:var(--surface-3)}
.dayun-act{font-size:11px;color:var(--ink-3);margin-top:1px}
.ly-sig{display:inline-block;border-radius:6px;padding:1px 7px;font-size:var(--fs-min,12px);font-weight:700;margin-top:2px;cursor:help}
.ly-sig.sig-strong{color:#fff;background:var(--ok)}
.ly-sig.sig-weak{color:#fff;background:var(--danger)}
.ly-sig.sig-mid{color:var(--ink-2);background:var(--surface-3)}

/* ---------- 病源说明卡（A2 后·260901；L1 识别信号仅展示、不再整切变格专法）---------- */
.disease-card{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
  padding:8px 12px;margin:0 0 var(--sp-3,10px) 0;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);font-size:12px;line-height:1.6;
  color:var(--ink-2)}
.disease-card .disease-pill{background:var(--gold);color:#fff;font-size:11px;font-weight:800;
  padding:1px 8px;border-radius:999px;flex:none;letter-spacing:1px;align-self:center}
.disease-card .disease-type{font-weight:800;color:var(--brand-deep);font-size:12.5px;flex:none;align-self:center}
.disease-card .disease-label{color:var(--ink-3);font-size:11.5px;font-weight:600;flex:none;align-self:center}
.disease-card .disease-note{flex:1;min-width:0;color:var(--ink-3);font-size:11.5px}
.disease-card .disease-note b{color:var(--brand)}

/* ============================================================
   古典风增强（宣纸纹理 / 描金细边 / 印章）
   ============================================================ */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* 卡片内描金双线（宣纸装裱感） */
.card{position:relative}
.card::after{content:"";position:absolute;inset:5px;border:1px solid var(--line-thin);border-radius:calc(var(--r-lg) - 4px);pointer-events:none;opacity:.6}
/* 朱砂印章微高光 */
.seal{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 2px 6px rgba(127,45,27,.25)}
/* 卡片标题润色：朱砂短横 + 衬线档名 */
.card-title .tick{box-shadow:0 0 0 2px var(--brand-soft)}
/* 桌面：四柱干支加大，更有碑刻气势 */
@media (min-width:992px){
  .pillar .p-gan,.pillar .p-zhi{font-size:40px}
  .brand-name{font-size:20px}
}
/* 顶栏细金线，结构更稳 */
.apphead{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:2px}

/* ============================================================
   手机端背景水印 —— ★ 260922 整体退役（本段不再有任何生效规则）
   ============================================================ */
/* ★ 260922 退役：旧手机水印 `.ql-watermark`（繁体「潛龍」· 128px · --gold · z-index:-1 · fixed）
   —— 已由版式层的单一水印 `.watermark`（简体「潜龙」· 竖排落款 · 消费 --line-strong）取代。

   退役原因（owner 口径原文：「**潜龙两个字，就两个字，不用重复搞一堆水印**」）：
     新旧两枚水印**会同时出现在手机屏幕上** —— 旧的经 `body.show-wm`（app.js 按 phone/tablet 开）
     与 `@media(max-width:767px)` 显示；新的在手机骨架下也显示（见 layout-v3.css §5）。
     文字不同（繁 vs 简）、字号不同（128px vs ≤120px）、颜色不同（--gold vs --line-strong），
     叠在一起就是「一堆水印」，正是 owner 要消除的那种。

   旧样式（整体退役，留档供还原）：
     .ql-watermark{display:none;position:fixed;right:8px;bottom:74px;z-index:-1;pointer-events:none;
       user-select:none;font-family:var(--font-serif);font-weight:900;font-size:128px;line-height:1.02;
       color:var(--gold);opacity:.07;writing-mode:vertical-rl;letter-spacing:10px;
       text-shadow:0 0 1px rgba(154,123,47,.25)}
     body.show-wm .ql-watermark{display:block}
     @media (max-width:767px){ .ql-watermark{display:block} }

   ⛔ 保留了 `body.show-wm` 这个类名与 app.js 的写入（app.js 属引擎/渲染既有逻辑，本轮不动）；
     只是**再没有任何选择器消费它** ⇒ 该 toggle 成为无害空操作。
     若后续确认要清理，应连同 app.js:1902 一并处理，不要在 CSS 层单方面改。**

================================================================ */

/* ============================================================
   设备端口调试器（手机 / 平板 / 电脑 / 全屏）
   ============================================================ */
.viewportStage{transition:max-width .25s ease, border-radius .25s ease}
.viewportStage.is-full{max-width:none}
.viewportStage.is-desk{max-width:1200px;margin:0 auto}
.viewportStage.is-tablet{max-width:820px;margin:14px auto;height:calc(100vh - 28px);overflow:auto;
  background:var(--bg);border-radius:18px;box-shadow:var(--shadow-lg);border:1px solid var(--line-strong)}
.viewportStage.is-phone{max-width:390px;margin:14px auto;height:calc(100vh - 28px);overflow:auto;
  background:var(--bg);border-radius:32px;box-shadow:0 22px 64px rgba(0,0,0,.5);border:11px solid var(--dark-bg);position:relative}
.viewportStage.is-phone::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:130px;height:20px;background:var(--dark-bg);border-radius:0 0 14px 14px;z-index:6}
/* 受限宽度下，底部导航改为 stage 内 sticky，跟随设备框 */
.viewportStage.is-phone .tabbar,
.viewportStage.is-tablet .tabbar,
.viewportStage.is-desk .tabbar{position:sticky;bottom:0;left:auto;transform:none;max-width:none;width:100%;border-radius:0}
.viewportStage.is-phone .tabbar{border-radius:0 0 20px 20px}

/* ★ 261015（owner：调试条盖住顶栏小按钮）：原 `top:10px;right:10px` 正压页头
   `.apphead-actions`（真机 CDP 实测 overlap:true —— 5 枚 iconbtn 全被盖）。
   ⇒ 挪**右下**（top:auto;bottom:12px）。设备模拟（is-phone/is-tablet）时 stage 居中、
   两侧余白各约 (窗口-390)/2，整条 478px 放不下 ⇒ `:has()` 收窄为两行（≤340px），完全落入余白。 */
.dev-tools{position:fixed;top:auto;bottom:12px;right:12px;z-index:130;display:flex;align-items:center;gap:10px;
  background:color-mix(in srgb, var(--dark-bg) 94%, transparent);color:var(--dark-text);padding:7px 10px 7px 12px;border-radius:12px;
  box-shadow:var(--shadow-lg);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12)}
.dev-tools .dt-label{font-size:11px;font-weight:800;letter-spacing:.5px;white-space:nowrap;display:flex;align-items:center;gap:6px;color:var(--dark-text)}
.dev-tools .dt-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)}
.dev-tools .dt-btns{display:flex;gap:5px}
.dev-tools .dt-btn{background:rgba(255,255,255,.08);color:var(--dark-text);border:1px solid rgba(255,255,255,.18);
  border-radius:8px;padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:.15s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;line-height:1}
.dev-tools .dt-btn svg{width:13px;height:13px;flex:none;display:block}
.dev-tools .dt-btn:hover{border-color:var(--gold);color:var(--gold)}
.dev-tools .dt-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.dev-tools .dt-btn.dt-ai{border-color:var(--gold);color:var(--gold)}
.dev-tools .dt-btn.dt-ai:hover{background:var(--gold);color:var(--dark-bg)}
.dev-tools .dt-port{color:var(--dim-text);font-weight:600}
@media (max-width:480px){ .dev-tools{transform:scale(.88);transform-origin:bottom right} }
/* 设备模拟中：调试条收窄成两行，落进 stage 两侧余白（⛔ 不遮模拟框） */
body:has(#viewportStage.is-phone) .dev-tools,
body:has(#viewportStage.is-tablet) .dev-tools{max-width:340px;flex-wrap:wrap;justify-content:flex-end;row-gap:6px}

/* ============================================================
   格局特殊变式 chip / 成败徽章 / 言诀（yan_ge）行 / 变格来源
   ============================================================ */
.muted{color:var(--ink-3);font-size:12.5px}
.pattern-special-row{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 4px}
.pattern-special-chip{background:linear-gradient(135deg,var(--surface),color-mix(in srgb, var(--gold) 18%, var(--surface)));color:var(--gold-text);
  border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);border-radius:7px;padding:4px 10px;font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:4px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.pattern-special-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.pattern-chg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.pattern-chg-pill{padding:4px 10px;border-radius:7px;font-size:12px;font-weight:700;font-family:inherit}
.pattern-chg-pill.good{background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok);border:1px solid color-mix(in srgb, var(--ok) 40%, transparent)}
.pattern-chg-pill.bad{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 38%, transparent)}
.pattern-chg-pill.mid{background:color-mix(in srgb, var(--gold) 14%, transparent);color:var(--gold-text);border:1px solid color-mix(in srgb, var(--gold) 42%, transparent)}
.pattern-chg-reason{color:var(--ink-3);font-size:12px;flex:1;min-width:0}
.pattern-yan-row{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:12.5px;line-height:1.6}
.pattern-yan-row .yan-k{display:inline-block;padding:2px 8px;background:var(--brand-soft);
  color:var(--brand-deep);border-radius:5px;font-size:11px;font-weight:700;flex:none;align-self:center}
.pattern-yan-row .yan-v{color:var(--ink-2);flex:1}
/* ★ 260922-r2：验格行「计数」副标记（如官星纯度「2 位」）—— 与标签同组但降权 */
.pattern-yan-row .yan-cnt{font-size:11px;font-weight:400;opacity:.82;margin-left:4px}
/* ★ 260922-r2：藏干三栏（干·气位·十神）—— 原 app.css **无任何 .zg-* 样式**，
   属「渲染层出了 class 但样式层未接」的缺口 ⇒ 三者按默认 inline 流式堆叠，
   在细盘窄列里表现为「堆在一块」（owner 截图实证）。
   本处补齐基础栅格；细盘专属压缩见 layout-v3.css §5.7。 */
.zg-line{display:flex;align-items:baseline;gap:4px;line-height:1.4;white-space:nowrap}
.zg-line .zg-g{font-weight:800;flex:none;min-width:1em;text-align:center}
.zg-line .zg-qi{flex:none;min-width:1em;text-align:center;font-size:11px;color:var(--ink-3)}
.zg-line .zg-ss{flex:1 1 auto;text-align:left;font-size:11px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
/* .variant-* 已废 (A2 后改用 .disease-card)；死代码清理留给项目精简轮，不在此删除以保 diff 小 */

/* ============================================================
   AI 白话解读抽屉
   ============================================================ */
.ai-drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--surface);
  border-left:1px solid var(--line-strong);box-shadow:-12px 0 40px rgba(0,0,0,.30);
  display:flex;flex-direction:column;z-index:150;transform:translateX(100%);transition:transform .22s ease}
.ai-drawer[hidden]{display:none}
.ai-drawer.open{transform:translateX(0)}
.ai-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.ai-title{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.seal-mini{width:26px;height:26px;background:var(--brand);color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;transform:rotate(-3deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);flex:none}
.ai-close{margin-left:auto;width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:14px;transition:.15s}
.ai-close:hover{border-color:var(--brand);color:var(--brand)}
.ai-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--bg-soft)}
.ai-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.7;word-break:break-word}
.ai-msg.user{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.ai-msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink)}
.ai-msg.bot .ai-h{font-family:var(--font-serif);font-size:15px;font-weight:800;margin:9px 0 4px;color:var(--ink)}
.ai-msg.bot .ai-h:first-child{margin-top:0}
.ai-msg.bot .ai-ul{margin:4px 0 4px 18px;padding:0}
.ai-msg.bot .ai-ul li{margin:2px 0}
.ai-msg.bot .ai-p{margin:5px 0}
.ai-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--surface)}
.ai-input input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);font-size:14px;background:var(--surface-2);color:var(--ink);font-family:inherit;min-width:0}
.ai-input input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.ai-send{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;border:none;border-radius:var(--r-md);padding:0 18px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;flex:none}
.ai-send:hover{filter:brightness(1.08)}
.ai-foot{font-size:11px;color:var(--ink-3);text-align:center;padding:7px 12px;border-top:1px dashed var(--line);background:var(--surface-2);display:flex;align-items:center;justify-content:center;gap:10px}
.ai-clear{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:8px;padding:3px 10px;font-size:11px;cursor:pointer;font-family:inherit;transition:.15s}
.ai-clear:hover{border-color:var(--brand);color:var(--brand)}

/* ============================================================
   样本盘库（调试用）
   ============================================================ */
.sample-card .sample-list{display:flex;flex-direction:column;gap:12px;margin-top:2px}
.sample-gtag{font-size:11px;font-weight:800;color:var(--gold-text);letter-spacing:1px;margin-bottom:7px}
.sample-chips{display:flex;flex-wrap:wrap;gap:7px}
.sample-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:7px 11px;cursor:pointer;transition:.16s;text-align:left;font-family:inherit}
.sample-chip:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
.sample-chip .sc-name{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.2}
.sample-chip .sc-meta{font-size:11px;color:var(--ink-3)}
.sample-note{font-size:var(--fs-min,12px);color:var(--ink-3);margin-top:10px;line-height:1.6;border-top:1px dashed var(--line);padding-top:8px}
.sample-empty{font-size:12px;color:var(--ink-3);padding:8px 0}

/* ============================================================
   命名收藏弹窗
   ============================================================ */
.ql-modal-overlay{position:fixed;inset:0;background:rgba(20,16,10,.5);display:flex;align-items:center;justify-content:center;z-index:160;padding:20px}
.ql-modal{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:20px;width:100%;max-width:360px;box-shadow:var(--shadow-lg)}
.ql-modal-title{font-size:16px;font-weight:800;font-family:var(--font-serif)}
.ql-modal-sub{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.ql-modal-input{width:100%;margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);font-size:14px;background:var(--surface-2);color:var(--ink);font-family:inherit}
.ql-modal-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.ql-modal-actions{display:flex;gap:10px;margin-top:14px;align-items:center}
.ql-modal-actions .mini-btn{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);padding:12px 18px}

/* ============================================================
   T-095 S3/F2 · 报告面（#page-report）
   ------------------------------------------------------------
   落位：报告＝排盘页的第二分段（UIUX §8.1 甲案）。容器 #page-report 为第 7 个 .page，
         由排盘页顶 .segmented[data-rpseg] 与「查看完整报告」按钮到达，**不新增底栏项**。
   结构：.rp-shell > .rp-head（元信息＋提示块）/ .rp-body（正文流＋折叠附录）
                    / .rp-toc-fold（手机·平板：可折叠目录，零 JS）
                    / .rp-toc-side（桌面·宽屏：右侧粘性目录）

   本块的硬规矩（tests/gate/audit_report_page.py 逐条静态守卫）：
     · 字号 ≥12px 硬下限：**禁用 --fs-xs**（11px）；本节是 --fs-* 阶梯的首个消费者；
     · 正文用 --font-serif（本地字体前置）；
     · 骨架适配**一律由 data-shell 驱动**（复用 shell.js 的实测宽度），本节**不写任何 @media**
       —— 一旦另写 @media，调试器模拟宽屏时骨架与实际不符（shell.css 首注已述）；
     · 色彩配额：本节 var(--brand) 仅 2 处（章序号 + 警示级告警边框），其余用 --brand-soft/
       --brand-deep/--accent/--danger 等**非配额**令牌；
     · 提示块三档**不得使用 3px 侧条纹**，档位差别靠图标＋词组标题；
     · 折叠一律原生 <details>（.rp-fold），不新造 JS 手风琴。
   ============================================================ */
#page-report{
  font-family:var(--font-serif);
  color:var(--ink);
  font-size:var(--fs-md);
  line-height:1.85;
  font-variant-numeric:tabular-nums;
}
#page-report .rp-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-5);
  align-items:start;
}
#page-report .rp-head{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
#page-report .rp-meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);
  font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7;
  border-bottom:1px dashed var(--line);padding-bottom:var(--sp-2);
}
#page-report .rp-status{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.7;margin:0 0 var(--sp-4)}
/* 非正式路径（回落 Markdown）必须**看得见**：底色＋描边＋加粗标题，不是一行小灰字。
   用 --accent 而非 --brand —— 报告面 R12 色彩配额（--brand ≤2）见门禁断言。 */
#page-report .rp-status-md{
  margin:0 0 var(--sp-5);padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--accent);border-radius:var(--r-md);background:var(--accent-soft);
}
#page-report .rp-status-md b{display:block;margin-bottom:var(--sp-1);font-size:var(--fs-md);font-weight:800;color:var(--ink)}
#page-report .rp-status-md span{display:block;font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2)}
#page-report .rp-degrade{
  border:1px solid var(--danger);border-radius:var(--r-md);
  padding:var(--sp-4);font-size:var(--fs-md);line-height:1.75;color:var(--ink);
}

/* ---------- 正文流：行宽上限 34em 居中（§8.2） ---------- */
#page-report .rp-body{max-width:34em;margin-inline:auto;min-width:0}
#page-report .rp-body>.rp-chap{margin-block-start:calc(var(--sp-8) * 1.5)}
#page-report .rp-body>.rp-chap:first-child{margin-block-start:0}
#page-report p{margin:0 0 var(--sp-4)}
#page-report .rp-h2{
  display:flex;align-items:baseline;gap:var(--sp-2);
  font-size:var(--fs-xl);font-weight:800;line-height:1.4;margin:0 0 var(--sp-3);
  scroll-margin-top:calc(var(--topbar-h) + var(--sp-3));
}
#page-report .rp-chapno{font-size:var(--fs-sm);font-weight:800;letter-spacing:.5px;color:var(--brand)}
#page-report .rp-sub{font-weight:800;line-height:1.45;scroll-margin-top:calc(var(--topbar-h) + var(--sp-3))}
#page-report .rp-sub2{font-size:var(--fs-lg);margin:var(--sp-5) 0 var(--sp-2)}
#page-report .rp-sub3{font-size:var(--fs-md);margin:var(--sp-4) 0 var(--sp-2);color:var(--ink-2)}
#page-report .rp-sub4{font-size:var(--fs-sm);margin:var(--sp-3) 0 var(--sp-1);color:var(--ink-3);letter-spacing:.4px}
#page-report .rp-ul{margin:0 0 var(--sp-4);padding-inline-start:1.35em}
#page-report .rp-ul li{margin-block-end:var(--sp-2)}
#page-report .rp-dl{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-1) var(--sp-3);margin:0 0 var(--sp-4);
}
#page-report .rp-dl dt{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
#page-report .rp-dl dd{margin:0;min-width:0}
/* 分级批注（note 块）：刻意**不用侧条纹**（C5），改用底色＋角标分级 */
#page-report .rp-note{
  margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-3);
  background:var(--surface-2);border-radius:var(--r-sm);
}
#page-report .rq-grade{
  display:inline-block;margin-inline-start:var(--sp-2);
  font-size:var(--fs-sm);font-weight:800;line-height:1.5;
  padding:0 6px;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink-2);background:var(--surface-2);vertical-align:baseline;
}
#page-report .rp-hr{border:none;border-top:1px dashed var(--line);margin:var(--sp-6) 0}

/* ---------- 表格：宽度给满，不写 min-width（不撑破页面）；
     超 6 列的宽表加 .is-wide ⇒ 切「不折行 + 横向滚动」安全阀（R3/R7 的结构支持） ---------- */
#page-report .rp-tablewrap{margin:0 0 var(--sp-4);overflow-x:auto}
#page-report .rp-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.65}
#page-report .rp-table caption{
  caption-side:top;text-align:start;font-size:var(--fs-sm);
  color:var(--ink-3);padding-bottom:var(--sp-1);
}
#page-report .rp-table th,
#page-report .rp-table td{
  border:1px solid var(--line);padding:6px 8px;text-align:start;
  vertical-align:top;overflow-wrap:anywhere;
}
#page-report .rp-table th{background:var(--surface-2);font-weight:800;color:var(--ink)}
#page-report .rp-table.is-wide th,
#page-report .rp-table.is-wide td{white-space:nowrap;overflow-wrap:normal}
/* 未知块类型的**可见降级**（不得静默丢弃；见 report_html.js::blockHtml default 分支）： */
#page-report .rp-unknown{
  margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--danger);border-radius:var(--r-sm);background:var(--surface-2);
}
/* 行与表头不齐（ragged）已被适配器补齐/截断；此处给可见提示（网格转警示色），不静默： */
#page-report .rp-table[data-rp-ragged="1"] th,
#page-report .rp-table[data-rp-ragged="1"] td{border-color:var(--danger)}

/* ---------- 折叠（原生 <details>，零 JS；默认收起，摘要含项数） ---------- */
#page-report .rp-fold{
  margin:0 0 var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);scroll-margin-top:calc(var(--topbar-h) + var(--sp-3));
}
#page-report .rp-fold>summary{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);cursor:pointer;list-style:none;outline:none;
  font-size:var(--fs-sm);font-weight:800;color:var(--ink-2);
}
#page-report .rp-fold>summary::-webkit-details-marker{display:none}
#page-report .rp-fold>summary::before{content:"▸";color:var(--ink-3);font-size:var(--fs-sm)}
#page-report .rp-fold[open]>summary::before{content:"▾"}
#page-report .rp-fold>summary:focus-visible{box-shadow:0 0 0 2px var(--brand-soft);border-radius:var(--r-sm)}
#page-report .rp-fold-n{margin-inline-start:auto;font-weight:600;color:var(--ink-3);font-size:var(--fs-sm)}
#page-report .rp-fold-body{padding:0 var(--sp-4) var(--sp-4);border-top:1px dashed var(--line)}
#page-report .rp-fold-body>.rp-tablewrap:last-child{margin-bottom:0}
#page-report .rp-appendix{margin-block-start:calc(var(--sp-8) * 1.5)}
/* 附录标题是 <summary> 内的 h2（四端同源：内容源 head 输出 `## 附录…`）。
   在摘要里需贴合摘要基线 ⇒ 收掉 h2 块间距，并降一档字号（低于章标题，体现从属）。 */
#page-report .rp-fold>summary .rp-h2{margin:0;font-size:var(--fs-lg);line-height:1.4;font-weight:800}
/* 附录组与「章」同形但不同物（不编号、层级低一档 h3）：故另给组间距，不套用 .rp-chap 的章间距 */
#page-report .rp-apgroup{margin-block-start:var(--sp-6)}
#page-report .rp-apgroup:first-child{margin-block-start:0}

/* ---------- 提示块三档：图标＋词组标题分档，**禁用 3px 侧条纹**（C5） ---------- */
#page-report .rq{
  margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
}
#page-report .rq-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);font-size:var(--fs-sm);font-weight:800}
#page-report .rp-ico{width:20px;height:20px;flex:none}
#page-report .rq p{margin:0 0 var(--sp-2);font-size:var(--fs-sm);line-height:1.75}
#page-report .rq p:last-child{margin-bottom:0}
#page-report .rq-detail{color:var(--ink-2)}
#page-report .rq-caveat{border-color:var(--accent);background:var(--accent-soft)}
#page-report .rq-caveat .rq-head{color:var(--accent-deep)}
#page-report .rq-warn{border-color:var(--brand);background:var(--brand-soft)}
#page-report .rq-warn .rq-head{color:var(--brand-deep)}
#page-report .rq-source .rq-head{color:var(--ink-2)}
/* 第 4 档「原典出处」（261007）：典据交代（「依 XX 推得／取运依据／逐体裁决依据」）。
   报告里这类引用最多，故取**最安静**的呈现；仍不借颜色深浅分档 ⇒ 区别在图标（书）＋词组标题。 */
#page-report .rq-ref{border-color:var(--line-strong);background:transparent}
#page-report .rq-ref .rq-head{color:var(--ink-3)}

/* ---------- 目录：手机/平板＝可折叠；桌面/宽屏＝右侧粘性（目录列加宽，正文列不变宽） ---------- */
#page-report .rp-toc-side{display:none}
#page-report .rp-toc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
#page-report .rp-toc-li>a{
  display:flex;gap:var(--sp-2);align-items:baseline;
  padding:5px 6px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6;
}
#page-report .rp-toc-li>a:hover{background:var(--surface-2);color:var(--ink)}
#page-report .rp-toc-li>a:focus-visible{box-shadow:0 0 0 2px var(--brand-soft)}
#page-report .rp-toc-no{flex:none;color:var(--ink-3);font-variant-numeric:tabular-nums}
#page-report .rp-toc-t{min-width:0}

#viewportStage[data-shell="desk"] #page-report .rp-shell,
#viewportStage[data-shell="wide"] #page-report .rp-shell{
  grid-template-columns:minmax(0,1fr) 200px;
  column-gap:var(--sp-6);
}
#viewportStage[data-shell="wide"] #page-report .rp-shell{grid-template-columns:minmax(0,1fr) 220px}
#viewportStage[data-shell="desk"] #page-report .rp-head,
#viewportStage[data-shell="wide"] #page-report .rp-head{grid-column:1;grid-row:1}
#viewportStage[data-shell="desk"] #page-report .rp-body,
#viewportStage[data-shell="wide"] #page-report .rp-body{grid-column:1;grid-row:2}
/* 过底稿（Markdown 过渡路径）无 .rp-head ⇒ 正文直接落第 1 行 */
#viewportStage[data-shell="desk"] #page-report .rp-shell-md .rp-body,
#viewportStage[data-shell="wide"] #page-report .rp-shell-md .rp-body{grid-row:1}
#viewportStage[data-shell="desk"] #page-report .rp-toc-fold,
#viewportStage[data-shell="wide"] #page-report .rp-toc-fold{display:none}
#viewportStage[data-shell="desk"] #page-report .rp-toc-side,
#viewportStage[data-shell="wide"] #page-report .rp-toc-side{
  display:block;grid-column:2;grid-row:1/span 2;
  position:sticky;top:calc(var(--topbar-h) + var(--sp-3));
  max-height:calc(100vh - var(--topbar-h) - var(--sp-8));overflow-y:auto;
  padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
}
#viewportStage[data-shell="desk"] #page-report .rp-shell-md .rp-toc-side,
#viewportStage[data-shell="wide"] #page-report .rp-shell-md .rp-toc-side{grid-row:1}

/* 手机：正文列宽＝容器宽（不再自限 34em），页内留白交给 .page 的 --page-pad */
#viewportStage[data-shell="phone"] #page-report .rp-body{max-width:none}
#viewportStage[data-shell="phone"] #page-report .rp-h2{font-size:var(--fs-lg)}

/* ★ T-046（260921）：AI 对话抽屉内联档位选择器（思考模式 ＋ 推理档）。
   与「我的 → AI 配置」同源（`/api/ai-config`）；此处**只暴露两个档位**，
   密钥 / base_url / model **不在此改**（避免误清密钥或把 model 回落成默认值）。
   ⚠ 变量带 fallback —— 皮肤主题（dark/light/skins）未定义时不至于样式失效。 */
.ai-cfgbar{display:flex;gap:6px;align-items:center;margin-left:auto;margin-right:8px;flex-wrap:wrap}
.ai-mini{font-size:12px;line-height:1.5;padding:2px 4px;border:1px solid var(--line);
  border-radius:6px;background:var(--surface-2,transparent);color:inherit;max-width:8.4em}
.ai-mini:disabled{opacity:.45}

/* ★ 260923 U6-0 · 可视化组件（纯内联 SVG；颜色**全部**走 CSS 变量 ⇒ 九套皮肤自动跟随） */
.viz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;margin-top:10px}
.viz-card{margin:0;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-md,10px);background:var(--surface-2,transparent);min-width:0}
.viz-card-wide{grid-column:1/-1}
.viz-card figcaption{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px;
  font-size:var(--fs-sm,12.5px);font-weight:700;color:var(--ink,inherit)}
.viz-sub{font-size:var(--fs-xs,12px);font-weight:400;color:var(--ink-3,inherit)}
.viz-card svg{display:block;width:100%;height:auto;max-width:340px;margin:0 auto}
.viz-card-wide svg{max-width:540px}
.viz-empty{padding:14px 12px;border:1px dashed var(--line);border-radius:var(--r-md,10px);
  color:var(--ink-3,inherit);font-size:var(--fs-sm,12.5px);text-align:center;line-height:1.7}

/* ★ 260923 · 显示尺度实调台（U2 验证工装 · 见 `js/app.js` 同名注释）
   只消费 `--fs-*` / `--sp-*` / `--r-*` 与基础色令牌 ⇒ **九套皮肤通用**，皮肤侧零改动。
   门禁 `audit_skins.py` 管的是皮肤目录下的文件，本文件不在其约束面内。
   ⚠ 注（本行即教训）：注释正文里**不得**出现「斜杠紧跟星号」的序列 ——
     上一版此处写作「皮肤目录`.`斜杠`星号`.css」，那串里的 `/`＋`*` 会被
     `audit_shell.py` 的**纯计数**配对检查读作「又开了一个注释」⇒ 报红（实测 87:86）。 */
.scalebox{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-md,10px);background:var(--surface-2,transparent)}
.sb-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sb-t{font-size:var(--fs-base,14px);font-weight:700;color:var(--ink,inherit)}
.sb-tag{font-size:var(--fs-xs,12px);padding:1px 6px;border:1px solid var(--line);
  border-radius:var(--r-pill,999px);color:var(--ink-3,inherit)}
.sb-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.sb-k{flex:none;width:2.6em;font-size:var(--fs-sm,12.5px);color:var(--ink-2,inherit)}
.sb-r{flex:1;min-width:0;accent-color:var(--brand,currentColor)}
.sb-v{flex:none;width:3.9em;text-align:right;font-size:var(--fs-sm,12.5px);
  color:var(--ink,inherit);font-variant-numeric:tabular-nums}
.sb-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.sb-hint{font-size:var(--fs-sm,12.5px);color:var(--ink-2,inherit)}
.sb-note{margin-top:6px;font-size:var(--fs-sm,12.5px);color:var(--ink-3,inherit);line-height:1.65}
.sb-demo{margin-top:10px;padding:8px 10px;border:1px dashed var(--line);
  border-radius:var(--r-sm,6px);background:var(--surface,transparent)}
.sb-dt{font-size:var(--fs-sm,12.5px);color:var(--ink-3,inherit);margin-bottom:6px}
.sb-s{display:flex;align-items:baseline;gap:10px;padding:2px 0;border-bottom:1px dotted var(--line)}
.sb-s:last-child{border-bottom:0}
.sb-sn{flex:none;width:7.4em;font-size:var(--fs-xs,12px);color:var(--ink-3,inherit);
  font-variant-numeric:tabular-nums}
.sb-st{line-height:1.35;color:var(--ink,inherit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-dg{display:flex;gap:var(--sp-3,12px);padding:var(--sp-3,12px);border:1px solid var(--line);
  border-radius:var(--r-sm,6px)}
.sb-dg i{width:100%;height:26px;background:var(--brand-soft,var(--surface-2,transparent));
  border-radius:var(--r-sm,6px);opacity:.55}


/* ══════════════════════════════════════════════════════════════════
   ★ 260925 柔顺排盘 · 弹层骨架（**组件样式** —— 故进 app.css，不进 layout-v3.css）
   两弹层：① 出生时间（三 tab ＋ 确定／取消） ② 真太阳时（国内外 → 省 → 市 → 区县）
   ⚠ `[hidden]` 必须**显式**复位 display：`.sheet{display:flex}` 会盖掉 UA 的
     `[hidden]{display:none}` ⇒ 不开弹层时它照样显示（典型「hidden 失效」坑）。
   ⛔ 本段**不新增断点**（避免动 audit_breakpoints 的作用域），用 max-width 居中。
   ══════════════════════════════════════════════════════════════════ */
.sheet-trigger{display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;margin-bottom:8px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);}
.sheet-trigger:hover{border-color:var(--line-strong);}
.sheet-trigger .st-k{flex:0 0 auto;color:var(--text-dim,var(--line-strong));font-size:var(--fs-sm);}
.sheet-trigger .st-v{flex:1;min-width:0;text-align:right;font-size:var(--fs-sm);
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ★★ 260930 修复 owner 报障「两个弹窗互相弹闪」★★
   ⛔ 根因（真机 hit-test 实证）：弹层家族原为 `z-index:60/61`，而 `.tabbar{z-index:90}`
      **高于**它们 ⇒ 底部导航**压在弹层之上**（实测：弹层底 835 / 底栏顶 771 ⇒ 重叠 **64px**；
      `elementFromPoint` 取弹层底部那点，命中的是 `.tab`，其祖先是 `.tabbar`）。
      后果：用户点弹层下半部（滚轮末行 / 「确定」区），实际点到的是**底部导航** ⇒
      页面被切走、弹层仍浮在上面 ⇒ 观感正是「**两个弹窗在互相弹闪**」。
   ✅ 修法：把弹层家族抬到 `.tabbar(90)` **之上**、`#devTools/.pref(130)` **之下** ⇒
      层级秩序：内容 < tabbar(90) < sheet/vz(99/100) < pref(130/131) < share/seal/skin(132/133) < scrim(140) < drawer(150)。 */
.sheet-mask{position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.45);}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;flex-direction:column;
  max-height:78vh;max-width:560px;margin:0 auto;padding:0 14px 14px;
  background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);}
.sheet-mask[hidden],.sheet[hidden]{display:none;}
.sheet-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 0;border-bottom:1px solid var(--line);}
.sheet-head .sheet-title{flex:1;font-weight:700;}
.sheet-head .segmented{flex:1 1 100%;}
.sheet-x,.sheet-ok{border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 12px;
  background:transparent;color:var(--text);cursor:pointer;font-size:var(--fs-sm);}
.sheet-ok{background:var(--accent);border-color:var(--accent);color:var(--surface);}
.sheet-body{flex:1 1 auto;overflow:auto;padding:10px 0 2px;-webkit-overflow-scrolling:touch;}


/* ══════════════════════════════════════════════════════════════════
   ★ 260925 柔顺排盘重做 · 四柱板（规格 v2 实测 · 8Char 令牌对齐）
   圆钮 50×50 正圆 / 单字 22.93px Bold / 候选键 72×41 圆角 9.17
   ⛔ 五行色一律走既有 --wx-* 令牌（不硬编码）；⛔ 不新增断点。
   ══════════════════════════════════════════════════════════════════ */
.pd-heads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:2px 0 8px;
  text-align:center;font-size:var(--fs-sm);color:var(--line-strong);}
.pd-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.pd-col{display:flex;flex-direction:column;align-items:center;gap:10px;}
.pd-slot{display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:50%;font-size:22px;font-weight:700;
  background:var(--surface-2);border:1px solid transparent;color:var(--text);}
.pd-slot.is-empty{color:var(--line-strong);font-weight:400;}
.pd-slot.is-focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.pd-keys{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:10px 0 2px;}
.pd-key{display:flex;align-items:center;justify-content:center;
  min-width:72px;height:41px;border-radius:9px;font-size:19px;font-weight:700;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);cursor:pointer;}
.pd-key:hover{border-color:var(--line-strong);}
.pd-key.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.wx-木{color:var(--wx-wood);}
.wx-火{color:var(--wx-fire);}
.wx-土{color:var(--wx-earth);}
.wx-金{color:var(--wx-metal);}
.wx-水{color:var(--wx-water);}


/* ══════════════════════════════════════════════════════════════════
   ★ 260925 P-1..P-4 智能图示（对标 8Char `yx-pr`/`yx-lt`/`yx-gw`）
   ⛔ 位置用**百分比**（8 柱位中心 12.5/37.5/62.5/87.5%），不是 SVG —— 照抄实测。
   ⛔ 五行色走 --wx-* 令牌；流通/阻塞两态走 is-flow / is-block（实测图例口径）。
   ══════════════════════════════════════════════════════════════════ */
/* ★★ 260930 owner 第 2／4 条：智能图示**卡题入口按钮** ★★
   入口由「柱头×4 ＋ 天干行 ＋ 地支行」（＋运岁 5 处）**收敛为每卡一枚**：
   四柱总览一枚、运岁总览一枚。尺寸**全走令牌**（EL-5），命中 ≥44px（readability 口径）。 */
.vz-open-btn{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;
  min-height:var(--hit);padding:0 var(--sp-3);
  border:1px solid var(--line-strong);border-radius:var(--r-sharp-md);
  background:var(--surface-2);color:var(--ink-2);
  font-family:inherit;font-size:var(--fs-sm);cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.vz-open-btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.vz-open-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

.vz-entry{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);}
.vz-entry_k{font-weight:700;}
.vz-entry_v{flex:1;text-align:right;color:var(--line-strong);font-size:var(--fs-sm);}
/* ★ 260926 指令③：**盘面行／表头即智能图示入口** —— 指针态与悬停反馈走
   **属性选择器**（⛔ 不加 class：表头 `class="col-dynamic"` 被门禁逐字计数，
   多一个 class 即打红；行 `<tr>` 加 role=button 又会污染表格可访问语义）。 */
tr[data-vz-open],th[data-vz-open]{cursor:pointer;}
tr[data-vz-open]:hover,th[data-vz-open]:hover{background:var(--surface-2);}
tr[data-vz-open]:active,th[data-vz-open]:active{background:var(--surface-2);}
/* ★ 260930 同上：智能图示弹层原先也在 `.tabbar(90)` 之下（z=60/61）⇒ 一并抬起 */
.vz-mask{position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.45);}
.vz-sheet{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;flex-direction:column;
  max-height:82vh;max-width:560px;margin:0 auto;background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.18);}
.vz-mask.hidden,.vz-sheet.hidden{display:none;}
.vz-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);}
.vz-title_hint{color:var(--line-strong);font-size:var(--fs-sm);}
.vz-title_text{flex:1;font-size:var(--fs-lg);}
.vz-close{border:0;background:transparent;color:var(--line-strong);font-size:20px;cursor:pointer;line-height:1;}
.vz-tabs{display:flex;gap:8px;padding:10px 14px 0;}
.vz-tab{border:1px solid transparent;background:var(--surface-2);color:var(--text);
  border-radius:6px;padding:0 12px;min-height:32px;flex:1;display:inline-flex;
  align-items:center;justify-content:center;font-size:var(--fs-sm);cursor:pointer;}
/* ★ 260926 D5（对标）：站点档位项＝**块**（129×32、圆角 6、激活淡色底）；
   ⚠ 色调**随我方体系**（黛青 soft）而非照搬其淡紫。 */
.vz-tab.is-active{background:var(--accent-soft);color:var(--accent);font-weight:600;
  border-color:var(--accent);}
/* ★ 260926 D6（对标）：站点副标题 10.32px ⇒ 我方 12.5px 偏大，降至 10.5px。 */
.vz-title_hint{font-size:11px;}
.vz-body{overflow:auto;padding:10px 14px 16px;}
.vz-pane{display:none;}
.vz-pane.is-active{display:block;}
.vz-intro{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.vz-intro_mark{width:4px;height:14px;border-radius:2px;background:var(--accent);}
.vz-intro_title{font-size:var(--fs-sm);}
/* ══════════════════════════════════════════════════════════════════
   ★★ 261001 · 干支档关系行改 8Char 形制（**节点 ＋ 连线 ＋ 线上标注**）★★
   owner：「你看人家是怎么做的，干支的部分，天干地支是分开的，**中间是有连线并且说明关系的**」
     （`@image#2`）；参考站 DOM 实测 `v3_liutong.html`：`.yx-lt_row` 相邻列间插 `.yx-lte`。
   ⛔ 旧制（260926 D4）＝「左标签槽 42px ＋ 右等宽轨道 ＋ 圆点」，**无连线**：
      读者须自己把「冲」对到两点上，且看不出"谁连谁"。
   ✅ 新制＝按列栅格把两个节点摆到**各自列位**，中间画一条线，关系字压在线上方。
   ★ 栅格对齐的唯一依据：本行 `margin-left:50px` ＝ 板行「行名槽 42px ＋ 容器 gap 8px」之和
     ⇒ 节点 `left:_pct(p,n)%` 与 `.vz-board` 的第 p 列**逐列重合**。
     ⛔ 50px 与 `.vz-board_row-name{flex:0 0 42px}` ＋ `.vz-board_row{gap:8px}` 严格同源，改一处须改三处。
   ⚠ 红线反转：旧判据**禁止**连线（`vz-mark_line`）——本批 owner 明确要连线 ⇒
     门禁同批**改判**为「必须含 `.vz-rel_bar`」（查 10：改判断言 ≠ 删断言降覆盖）。
   ══════════════════════════════════════════════════════════════════ */
.vz-marks{padding:0;}
.vz-mark{position:relative;margin:0 0 2px 50px;height:46px;}
/* 关系字：压在连线**上方**居中（8Char 同款）；`title` 挂引擎原文，信息一格不丢 */
.vz-mark_label{position:absolute;top:0;transform:translateX(-50%);font-size:var(--fs-xs);
  color:var(--ink-2);white-space:nowrap;}
/* 连线：两节点之间的水平段；流通＝绿（--wx-wood）／阻塞＝红（--wx-fire），
   与「流通档」底部图例**同一套语义**（⛔ 图例口径：流通＝合/生/助；阻塞＝冲/刑/克/害/破）。 */
.vz-rel_bar{position:absolute;top:26px;height:2px;border-radius:1px;background:var(--line-strong);}
.vz-mark.is-flow .vz-rel_bar{background:var(--wx-wood);}
.vz-mark.is-block .vz-rel_bar{background:var(--wx-fire);}
/* 节点：定位到该字所在**列位**（与板同栅格）；`wx-*` 给五行色，`vz-round` 给圆底 */
.vz-rel_node{position:absolute;top:12px;transform:translateX(-50%);display:block;z-index:1;}
.vz-round{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--surface-2);font-size:var(--fs-sm);font-weight:700;font-style:normal;}
/* ★ 261001 新增：干支档**三段**（天干／地支／整柱）的段头与整柱签 */
.vz-gzsec{margin:2px 0 10px;}
.vz-gzsec_h{display:flex;align-items:baseline;gap:6px;margin:0 0 4px;
  border-bottom:1px solid var(--line);padding-bottom:4px;}
.vz-gzsec_t{font-size:var(--fs-sm);}
.vz-gzsec_n{font-size:var(--fs-xs);color:var(--accent);}
.vz-gzsec_d{font-size:var(--fs-xs);color:var(--line-strong);margin-left:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vz-gzsec_empty{font-size:var(--fs-xs);color:var(--line-strong);padding:4px 0 2px;}
.vz-pills{display:flex;flex-wrap:wrap;gap:6px;}
.vz-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-pill,999px);
  background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-xs);}
.vz-pill_k{color:var(--accent);}
.vz-pill_t{color:var(--ink-2);}
.vz-board{border-top:1px dashed var(--line);padding-top:8px;}
.vz-board_row-name{flex:0 0 42px;text-align:right;padding-right:2px;
  font-size:var(--fs-xs);color:var(--line-strong);white-space:nowrap;}
.vz-cell_text.is-sub{font-size:var(--fs-xs);color:var(--ink-2);padding:1px 0;
  word-break:break-all;}
/* ★ 260926 指令④：**胎命身切换开关**（运岁页顶表：运岁列 ↔ 三垣列）＋ **今运按钮**（焦点复位）
   —— 均走既有 `--*` 令牌；`min-height:44px` 保触摸目标。 */
.sy-toggle{margin-left:auto;flex:none;cursor:pointer;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-2);border-radius:999px;padding:2px 10px;font-size:var(--fs-xs);min-height:44px;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;}
.sy-toggle:hover{background:var(--surface);}
.sy-toggle.is-on{background:var(--brand);border-color:var(--brand);color:#fff;}
.sy-toggle.is-on b{color:#fff;}
.xy-now{flex:none;cursor:pointer;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  border-radius:999px;padding:2px 10px;font-size:var(--fs-xs);min-height:44px;margin-left:6px;
  transition:background-color .16s ease,border-color .16s ease;}
.xy-now:hover{background:var(--surface);}
.xy-now:active{background:var(--surface-2);}
/* ★ 260926 · **太岁六态**标签（流年格）＋ 图例
   ⛔ 只走既有 `--*` 令牌；命中态用 `--accent`（非吉凶色），未犯态用弱化灰
   —— **刻意不用红/绿**：六态是"关系标注"、**不是吉凶结论**（原典 L358/L363 明言须与救应合看）。 */
.ts-legend{font-size:var(--fs-xs);color:var(--line-strong);flex:none;}
.ts-tag{display:inline-block;font-style:normal;font-size:var(--fs-xs);line-height:1.5;
  border-radius:var(--r-sm);padding:0 5px;margin-top:2px;white-space:nowrap;}
.ts-tag.ts-hit{background:var(--accent-soft);color:var(--ink-2);border:1px solid var(--line-strong);}
.ts-tag.ts-none{color:var(--line-strong);border:1px dashed var(--line);background:transparent;}
/* ★ 260926 · **岁运层承受力**标签（大运/流年格；仅在非「胜任」时出现）
   ⛔ 不用红/绿：承受力是"能不能任"的判定档，**不是吉凶结论** ⇒ 走 `--surface-2` + `--line-strong`，
      与太岁标签（`--accent-soft`）区分色相但不引入警示色。 */
.ts-tag.ry-tag{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-strong);}
/* ★ 260926 · **民俗层标签**（生肖口径 · ⛔ 非原典判据）
   刻意与「原典层」**视觉分层**：**虚线框 + 更浅的墨色**（`.ts-none` 同族但带左标「俗·」），
   ⇒ 一眼可辨"这是民俗算法、不是原典判据"（CAL-05 disambiguation ① 要求：并列且分段标注）。 */
.ts-tag.ts-folk{background:transparent;color:var(--line-strong);border:1px dashed var(--line-strong);}
/* ★ 260926：由「写死 4 列栅格」改 **flex 等分** —— 运岁层智能图示为 3 运岁 ＋ 4 原局 ＝ 7 列，
   写死 repeat(4,…) 会令 7 列中第 5 列起挤成 0 宽。flex 等分与 4 列栅格在 N=4 时视觉等价。 */
.vz-board_head,.vz-board_row{display:flex;gap:8px;text-align:center;align-items:flex-start;}
.vz-board_head>*,.vz-board_row>*{flex:1 1 0;min-width:0;overflow:hidden;}
/* 行名槽与数据列**不按等分**（槽固定 42px）——须在通用规则之后覆盖 */
.vz-board_head>.vz-board_row-name,.vz-board_row>.vz-board_row-name{flex:0 0 42px;overflow:visible;}
.vz-board_row.is-sub>.vz-cell_text{text-align:center;}
.vz-cell_text{font-size:var(--fs-sm);padding:2px 0;}
.vz-cell_text.is-muted{color:var(--line-strong);font-size:var(--fs-xs);}
.vz-cell_text.is-char{font-size:var(--fs-lg);font-weight:700;}
.vz-seat_stack{display:flex;flex-direction:column;gap:2px;align-items:center;}
.vz-cell_text.is-seat{font-size:var(--fs-xs);color:var(--line-strong);font-style:normal;
  border:1px solid var(--line);border-radius:6px;padding:0 5px;}
.vz-lt_chart{position:relative;padding-bottom:6px;}
/* ★ 260926：同 `.vz-board_*` —— 由写死 4 列改 flex 等分（运岁层 7 列通用）。 */
.vz-lt_row{display:flex;text-align:center;}
.vz-lt_row>*{flex:1 1 0;min-width:0;}
.vz-lt_god{font-size:var(--fs-sm);color:var(--text);}
.vz-lt_god.is-day{font-weight:700;}
.vz-lt_char{display:inline-block;min-width:22px;font-size:var(--fs-lg);font-weight:700;}
/* ★★ 261002 · 流通档重做（对齐参考站 `.yx-lt_row.is-god ×2 / .is-char ×2 / .yx-lte.is-h / .is-v`）★★
   ⛔ 旧制：干与支挤在同一 `.vz-lt_row.is-char`（每列两字）＋ 单独一条 `.vz-lt_rail` 放横边
      ⇒ ① 行列与横边、与板列**全错位**；② 竖边缺失；③ 地支十神行缺失。
   ✅ 新制：四行（干十神 / 干 / **竖边行** / 支 / 支十神）＋ 横边**绝对定位压在相邻两列中点**。
   ⚠ 横边**不插 DOM 项** —— 插了会改变 `flex:1 1 0` 的分配、又造成错位（这是旧制错位的真因之一）。 */
.vz-lt_row.is-char{position:relative;}
.vz-lt_hmark{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;}
/* 竖边行：同柱「干 ↔ 支」，每列一枚。★ 261007-b：行高改**跟边同高**（原死 26px ⇒ 竖轨被压成短桩，
   与参考站「轨几乎触到上下两字」的观感差一截）。 */
.vz-lt_row.is-vlink{min-height:var(--lt-len,54px);}
.vz-lt_row.is-vlink>*{display:flex;align-items:center;justify-content:center;}
/* ══════════════════════════════════════════════════════════════════════
   ★★ 261007-b · 流通边「双轨 ＋ 圆牌 ＋ 内芯」三层形制（对标 8char 实测）★★
   取证：`_scratch_/fx5/z_lt.png` 逐帧放大 —— 横·助 `z_lt_h_help2.png`／竖·助 `z_lt_v_help.png`／
         横·生 `z_lt_h_sheng2.png`／竖·生 `z_lt_v_sheng.png`。
   几何（全部走 CSS 变量 `--lt-len`(沿流向长) / `--lt-badge`(圆牌径)，由 `_flowPane` 按列数给档）：
     轨 2 条：沿流向贯穿、贴两缘；  牌 1 枚：居中、压轨；  芯 4 枚：每侧 2 枚。
   芯的「错开轴」随关系字：
     · 合/助（`.vz-lte_core`，无 `is-arrow`）＝ **短直段、与轨平行**，沿**跨向**错开
        （横边 ⇒ 上下两排；竖边 ⇒ 左右两列）；
     · 生（`.vz-lte.is-arrow`）＝ **三角箭头**，沿**流向**错开，指向由 `dir-{r,l,d,u}` 决定。
   ⚠ 红边（`is-block`）**不产**轨/芯（HTML 里就没有这两个元素）⇒ 天然「仅圆牌」，⛔ 无需额外覆盖规则。
   ⛔ 色只用 `--lt-c` 一处定义（`.vz-lte.is-flow/is-block` 给值）—— 轨/芯/牌自动同色，
      避免「三种色值各写一遍」的老账（铁律①）。
   ⚠ **不可用 `background:currentColor`**（261007-b 实撞）：圆牌自身要 `color:var(--surface)`
      去写反白字，`currentColor` 随即变白 ⇒ 白底白字，**整枚牌隐形**（真机截图坐实）。
      ⇒ 必须走独立变量 `--lt-c`，与文字的 `color` 解耦。 */
.vz-lte{position:relative;display:block;font-style:normal;}
.vz-lte.is-flow{--lt-c:var(--wx-wood);}
.vz-lte.is-block{--lt-c:var(--wx-fire);}
.vz-lte.is-h{width:var(--lt-len,54px);height:var(--lt-badge,20px);}
.vz-lte.is-v{width:var(--lt-badge,20px);height:var(--lt-len,54px);}
.vz-lte_rail,.vz-lte_core{position:absolute;background:var(--lt-c);}
/* ── 双轨（沿流向贯穿） ── */
.vz-lte.is-h .vz-lte_rail[data-i="1"]{left:0;top:0;width:100%;height:2px;}
.vz-lte.is-h .vz-lte_rail[data-i="2"]{left:0;bottom:0;width:100%;height:2px;}
.vz-lte.is-v .vz-lte_rail[data-i="1"]{top:0;left:0;height:100%;width:2px;}
.vz-lte.is-v .vz-lte_rail[data-i="2"]{top:0;right:0;height:100%;width:2px;}
/* ── 内芯·合/助：短直段，沿跨向错开（1/3、2/3 两排 / 两列） ── */
.vz-lte.is-h .vz-lte_core[data-i="1"]{left:7%;top:33%;width:17%;height:2px;}
.vz-lte.is-h .vz-lte_core[data-i="2"]{left:7%;top:67%;width:17%;height:2px;}
.vz-lte.is-h .vz-lte_core[data-i="3"]{right:7%;top:33%;width:17%;height:2px;}
.vz-lte.is-h .vz-lte_core[data-i="4"]{right:7%;top:67%;width:17%;height:2px;}
.vz-lte.is-v .vz-lte_core[data-i="1"]{top:7%;left:33%;height:17%;width:2px;}
.vz-lte.is-v .vz-lte_core[data-i="2"]{top:7%;left:67%;height:17%;width:2px;}
.vz-lte.is-v .vz-lte_core[data-i="3"]{bottom:7%;left:33%;height:17%;width:2px;}
.vz-lte.is-v .vz-lte_core[data-i="4"]{bottom:7%;left:67%;height:17%;width:2px;}
/* ── 内芯·生：三角箭头，沿流向错开，指向＝「生者 → 被生者」 ── */
.vz-lte.is-h.is-arrow .vz-lte_core{width:10%;height:44%;top:28%;}
.vz-lte.is-h.is-arrow .vz-lte_core[data-i="1"]{left:3%;}
.vz-lte.is-h.is-arrow .vz-lte_core[data-i="2"]{left:16%;}
.vz-lte.is-h.is-arrow .vz-lte_core[data-i="3"]{right:16%;}
.vz-lte.is-h.is-arrow .vz-lte_core[data-i="4"]{right:3%;}
.vz-lte.is-v.is-arrow .vz-lte_core{height:10%;width:44%;left:28%;}
.vz-lte.is-v.is-arrow .vz-lte_core[data-i="1"]{top:3%;}
.vz-lte.is-v.is-arrow .vz-lte_core[data-i="2"]{top:16%;}
.vz-lte.is-v.is-arrow .vz-lte_core[data-i="3"]{bottom:16%;}
.vz-lte.is-v.is-arrow .vz-lte_core[data-i="4"]{bottom:3%;}
.vz-lte.is-arrow.dir-r .vz-lte_core{clip-path:polygon(0 0,100% 50%,0 100%);}
.vz-lte.is-arrow.dir-l .vz-lte_core{clip-path:polygon(100% 0,0 50%,100% 100%);}
.vz-lte.is-arrow.dir-d .vz-lte_core{clip-path:polygon(0 0,100% 0,50% 100%);}
.vz-lte.is-arrow.dir-u .vz-lte_core{clip-path:polygon(0 100%,100% 100%,50% 0);}
/* ── 圆牌：实心圆 ＋ 反白关系字，居中压轨（关系字 2 字时自动放宽成胶囊） ── */
.vz-lte_badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  min-width:var(--lt-badge,20px);height:var(--lt-badge,20px);padding:0 3px;border-radius:999px;
  background:var(--lt-c);color:var(--surface);white-space:nowrap;
  font-size:calc(var(--lt-badge,20px) * 0.47);font-weight:700;line-height:1;letter-spacing:-.5px;}
/* ⛔ 旧 `.vz-lt_rail` / `.vz-lte_dot` 已无引用（横边改绝对定位、标记本体直用 `.vz-lte`）⇒ 同批清退（铁律⑩）。 */
.vz-lt_legend{display:flex;flex-wrap:wrap;gap:12px;border-top:1px dashed var(--line);padding-top:8px;margin-top:6px;}
.vz-lt_legend_item{display:flex;align-items:center;gap:5px;}
.vz-lt_legend_dot{width:9px;height:9px;border-radius:50%;}
.vz-lt_legend_dot.is-flow{background:var(--wx-wood);}
.vz-lt_legend_dot.is-block{background:var(--wx-fire);}
.vz-lt_legend_desc{color:var(--line-strong);font-size:var(--fs-xs);}
/* ★★ 261007-d · 流通档**分层**（owner 裁定 A 方案）：本体层 / 引动层 分块 ★★
   ⛔ 用**类选择器**（`.vz-lt_block`），⛔ 不用裸 `section` —— 本项目曾因页面级
      `section{padding:clamp(70px,9.5vw,126px) …}` 命中弹层而凭空多出 124px 空白（260930 实撞）。
   块题头＝「本体层 · 原局四柱内流通」/「引动层 · 运岁三柱自身流通」；块内自带图例（同 A 方案字面）。 */
.vz-lt_block{margin-top:8px;}
.vz-lt_block + .vz-lt_block{margin-top:12px;}
.vz-lt_blocktitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-bottom:4px;}
.vz-lt_blockname{font-size:var(--fs-sm);color:var(--text);font-weight:700;}
.vz-lt_blockdesc{font-size:var(--fs-xs);color:var(--line-strong);}
.vz-lt_blocknote{font-size:var(--fs-xs);color:var(--line-strong);margin-top:4px;line-height:1.5;}
/* 层级从属（无对照的单块不渲题头，故本规则只作用于分层态） */
.vz-lt_block .vz-lt_legend{margin-top:4px;}
.vz-gw_flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;}
.vz-gw_flow_item{display:flex;align-items:center;gap:4px;background:var(--surface-2);
  border-radius:999px;padding:3px 10px;font-size:var(--fs-xs);}
.vz-gw_flow_meta{color:var(--accent);}
.vz-gw_flow_arrow{color:var(--line-strong);font-style:normal;}
.vz-gw_card{border:1px solid var(--line);border-radius:var(--r-md);padding:10px;margin-bottom:8px;}
.vz-gw_card_head{display:flex;align-items:center;gap:8px;}
.vz-gw_card_badge{width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);}
.vz-gw_tag{border:1px solid var(--line);border-radius:6px;padding:0 6px;font-size:var(--fs-xs);color:var(--line-strong);}
.vz-gw_card_hint{color:var(--line-strong);font-size:var(--fs-sm);margin:6px 0;}
.vz-gw_pillars{display:flex;gap:10px;font-size:var(--fs-lg);font-weight:700;margin-bottom:6px;}
.vz-gw_row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;}
.vz-gw_row_name{color:var(--line-strong);font-size:var(--fs-xs);}
.vz-gw_chip{background:var(--surface-2);border-radius:6px;padding:1px 7px;font-size:var(--fs-xs);font-style:normal;}


/* ══════════════════════════════════════════════════════════════════
   ★ 260925 R-6 滚轮（公历／农历 5 列）—— 对标 8Char `uni-picker-view`
   ⛔ 不引三方库：原生滚动 + scroll-snap；⛔ 不新增断点。
   ══════════════════════════════════════════════════════════════════ */
/* ★★ 260930 修复 owner 报障「滚轮选框对不齐数字」★★
   ⛔ 根因（真机几何实证）：`.wh{height:170px}` 里**同时**装了「列头(.wh-head ≈18px)」与
      「列区(.wh_cols)」，而 `.wh_cols{height:100%}` ⇒ 列区实际从列头**下方**开始
      （实测 `.wh` 顶 606 / `.wh_cols` 顶 624 ⇒ 差 **18px**），并**溢出 `.wh` 被裁 18px**；
      而 `.wh_ind`（选框）原为 `position:absolute; top:68px`，**参照 `.wh`** ⇒
      选框中心 = 674+17 = 691，而首项中心 = 692+17 = 709 ⇒ **系统性偏高 18px（≈半格）**。
      实测：模型值 2026年/12月/7日/14时/42分，`is-on` 也全对，
      但**实际落在选框中心的却是 2025年/11月/6日/13时/41分**（各差一格）。
   ✅ 修法：① `.wh` 改 `height:auto`（列头 + 列区自然堆叠，不再硬编码 170）；
      ② `.wh_cols` 改 `position:relative; height:170px`（170 = 5×34，与 JS 的 `WH_H=34` 一致）；
      ③ 把 `.wh_glass` / `.wh_ind` 移入 `.wh_cols`（见 `whMount`）⇒ 二者改以**列区**为参照块，
         选框中心 = 列区中心 = 首项居中位 ⇒ **对齐**。 */
.wh{position:relative;width:100%;height:auto;overflow:hidden;}
/* ★★ 261007-d · 列数改**自动流**（原 `repeat(5,…)` 写死 5 列）★★
   ⛔ 病灶：`.wh_cols` / `.wh-head` 原写死 5 列 ⇒ 新增的「真太阳时」三级滚轮（省/市/区县 ＝ **3 列**）
      会按 5 轨排布 ⇒ 三列挤在左侧 3/5 宽、右侧空两轨，且与 `.wh_ind` 选框**横向错位**。
   ✅ 改 `grid-auto-flow:column` ＋ `grid-auto-columns:minmax(0,1fr)` —— 列数由**子元素个数**决定
      （与 JS `whSpec()` 天然同源，消掉「列数在两处各写一遍」的旧账 · 铁律①）。
   ⚠ `.wh_glass` / `.wh_ind` 是 `.wh_cols` 的**绝对定位**子元素 ⇒ 依规范**不参与**grid 排布、
      不占轨 ⇒ 列数与它们无关（已真机复核：5 列时间滚轮几何零变化）。 */
.wh_cols{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:170px;}
.wh_col{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.wh_col::-webkit-scrollbar{width:0;height:0;}
.wh_item{height:34px;display:flex;align-items:center;justify-content:center;
  scroll-snap-align:center;font-size:var(--fs-md);color:var(--line-strong);}
.wh_item.is-on{color:var(--text);font-weight:700;}
.wh_pad{height:68px;}
.wh_ind{position:absolute;left:0;right:0;top:68px;height:34px;pointer-events:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:6px;}
.wh_glass{position:absolute;inset:0;pointer-events:none;border-radius:6px;
  background:linear-gradient(180deg,var(--surface) 0%,transparent 30%,transparent 70%,var(--surface) 100%);opacity:.86;}
.wh-head{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-bottom:2px;}
.wh-head span{text-align:center;font-size:var(--fs-xs);color:var(--line-strong);}
.wh-leap{flex:0 0 auto;}


/* ══════════════════════════════════════════════════════════════════
   ★ 260926 R-7 四柱反推完成态（对标 8Char：反推中…／共 N 个匹配／多解列表／重选四柱）
   ⛔ 不新增断点；色值走令牌。
   ══════════════════════════════════════════════════════════════════ */
.pd-result{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px;}
.pd-result_head{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);}
.pd-result_n{color:var(--accent);font-weight:700;}
.pd-result_redo{margin-left:auto;border:1px solid var(--line);background:transparent;color:var(--text);
  border-radius:999px;padding:3px 10px;font-size:var(--fs-xs);cursor:pointer;}
.pd-hits{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:210px;overflow:auto;}
.pd-hit{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);
  padding:7px 10px;background:var(--surface-2);cursor:pointer;text-align:left;color:var(--text);}
.pd-hit:hover{border-color:var(--line-strong);}
.pd-hit_d{font-weight:700;font-size:var(--fs-sm);}
.pd-hit_h{color:var(--line-strong);font-size:var(--fs-xs);}
.pd-hit_s{margin-left:auto;font-size:var(--fs-xs);color:var(--line-strong);}
.pd-result_err{margin-top:8px;font-size:var(--fs-sm);color:var(--wx-fire);}

/* ══════════════════════════════════════════════════════════════════
   ★ 260926 P0-2 **过渡态补齐**（交互手感专项）
   背景（实测）：本仓 `transition` 42 ／ 站点 8Char **254**（≈1/6）——
   「操作感差」的量化根因＝**缺过渡**，不是缺功能。
   ⛔ 纪律：① 只补 hover/active/进出场，**不造无意义动画**；② 时长 120–260ms（不超 400ms）；
            ③ 全部落在既有 `@media (prefers-reduced-motion:reduce)` 的 `*` 兜底之下 ⇒ 自动可关。
   ══════════════════════════════════════════════════════════════════ */
.card{transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;}
.card:hover{transform:translateY(-1px);}
/* ⛔ 260930-4 **关键修复**（真机铁证 · 见 260930-4 交付件）：
   `#formA` / `#formB` 是 `form.card`，而**「出生时间」「真太阳时」四组弹层与其遮罩就长在它们内部**。
   `.card:hover{transform:translateY(-1px)}` 一生效，该卡片即成为 `position:fixed` 后代的**包含块**
   ⇒ `.sheet-mask{inset:0}` 塌成"**跟卡片一样大**"（实测 756×363，视口是 1046×603 ⇒ 页面不变暗、
   框外还能点到背景），`.sheet{left/right/bottom:0}` 被挤成**窄盒居中**（实测 x=367 w=560）。
   鼠标一移出卡片 ⇒ transform 归 none ⇒ 弹层又**弹回视口底**。
   ⇒ **鼠标进出卡片，这一屏就在两种渲染间来回跳 —— 这正是 owner 报的「两个框」。**
   ⚠ 通用纪律：**任何含 `position:fixed` 弹层的祖先，都不得有
      `transform / filter / backdrop-filter / perspective / will-change / contain`**。
   ⇒ 表单卡**永不给 transform**（悬停反馈由上面的 box-shadow / border-color 承担，观感不减）。 */
form.card:hover,
form.card:focus-within{ transform: none; }
.card .tick{transition:transform .2s ease,opacity .2s ease;}
.btn{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.985);}
.btn-ghost{transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s ease;}
.btn-ghost:hover{transform:translateY(-1px);}
.btn-ghost:active{transform:scale(.985);}
.tab{transition:color .16s ease,background-color .16s ease,border-color .16s ease,opacity .16s ease;}
.tab:hover{opacity:.86;}
.seg{transition:color .16s ease,background-color .18s ease,border-color .18s ease,transform .14s ease;}
.seg:hover{transform:translateY(-1px);}
.segmented{transition:background-color .18s ease;}
.segmented .seg.active{transition:background-color .2s ease,color .2s ease;}
.sheet{transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .2s ease;}
.sheet-mask{transition:opacity .22s ease;}
.sheet[hidden],.sheet-mask[hidden]{transition:opacity .18s ease;}
.sheet .sheet-ok{transition:background-color .16s ease,transform .12s ease;}
.sheet .sheet-x{transition:background-color .16s ease,color .16s ease,border-color .16s ease;}
.rel-panel summary{transition:color .16s ease,background-color .16s ease;}
.rel-item{transition:background-color .16s ease,border-color .16s ease;}
.rel-item:hover{background-color:var(--surface-2);}
.rel-group-head{transition:color .16s ease;}
.rel-sum{transition:background-color .18s ease,border-color .18s ease;}
.rel-sum:hover{background-color:var(--surface-2);}
.rel-sum-caret{transition:transform .2s ease;}
details[open] .rel-sum-caret{transform:rotate(90deg);}
.pd-slot{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,transform .12s ease;}
.pd-slot.is-focus{transition:border-color .2s ease,box-shadow .2s ease;}
.pd-slot:active{transform:scale(.96);}
.pd-key{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,transform .12s ease;}
.pd-key:active{transform:scale(.97);}
.pd-hit{transition:border-color .16s ease,background-color .16s ease,transform .12s ease;}
.pd-hit:active{transform:scale(.99);}
.pd-result_redo{transition:background-color .16s ease,border-color .16s ease,color .16s ease;}
.vz-entry{transition:border-color .18s ease,background-color .18s ease,transform .14s ease;}
.vz-entry:hover{transform:translateY(-1px);}
.vz-entry:active{transform:translateY(0) scale(.995);}
.vz-mask{transition:opacity .22s ease;}
.vz-sheet{transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .22s ease;}
.vz-tab{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .14s ease;}
.vz-tab:hover{transform:translateY(-1px);}
.vz-pane{transition:opacity .2s ease;}
.vz-close{transition:background-color .16s ease,color .16s ease,transform .12s ease;}
.vz-close:active{transform:scale(.94);}
.vz-round{transition:background-color .16s ease,color .16s ease,transform .12s ease;}
.vz-lte_dot{transition:transform .16s ease,background-color .16s ease;}
.wh_item{transition:color .14s ease,font-weight .14s ease,transform .14s ease;}
.wh_item.is-on{transition:color .18s ease,transform .18s ease;}
.wh_ind{transition:border-color .18s ease,box-shadow .18s ease;}
.wh-leap input{transition:outline-color .16s ease;}
.toast{transition:opacity .22s ease,transform .22s ease;}
.err{transition:opacity .2s ease;}
.pill{transition:background-color .16s ease,color .16s ease,border-color .16s ease;}
.chip{transition:background-color .16s ease,border-color .16s ease,color .16s ease;}
.tabbar .tab{transition:color .16s ease,opacity .16s ease,transform .14s ease;}
.tabbar .tab:active{transform:scale(.97);}
.busy-bar{transition:opacity .18s ease;}

/* ── ★ 260926 P0-1 全局异步忙碌条（顶部 3px）── */
.busy-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none;
  opacity:0;background:linear-gradient(90deg,transparent,var(--accent),transparent);}
.busy-bar.is-on{opacity:1;animation:busySlide 1.05s linear infinite;}

/* ══ ★ 261013(#3) 长页页内锚点条（仅手机骨架；由 `app.js::mountToc()` 挂载）
   手机端排盘页 `scrollHeight ≈ 12 900px` ⇒ 页内导航缺位。纯**滚动定位**条，⛔ 不接管 showPage。 */
.toc-bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:6px;overflow-x:auto;
  /* ★ 左侧留出 58px —— 手机端汉堡按钮为 fixed top:12/left:12/38×38（z 120 > 本条 z 6）
     ⇒ 不留位则首个 chip 被其压住（实拍已见）。50px 让位 ＋ 8px 间距。 */
  padding:8px var(--page-pad) 8px 58px;margin:0 0 var(--sp-3);background:var(--bg);border-bottom:1px solid var(--line);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.toc-bar::-webkit-scrollbar{display:none}
.toc-chip{flex:none;font-size:11.5px;font-weight:700;line-height:1;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 11px;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.toc-chip:hover{border-color:var(--brand);color:var(--brand)}
.toc-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ★ 261013(#2)：**AI 抽屉内进度条** —— 手机端抽屉宽 `min(420px,92vw)` 且 `z-index:150`
   > 忙碌条 `z-index:120` ⇒ 全局忙碌条被抽屉**遮住**，AI 生成期在手机上几乎无反馈。
   故在抽屉顶部补一条**同语汇**进度线（复用 `busySlide`，⛔ 不新增 keyframes）。 */
.ai-drawer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:0;transition:opacity .18s ease}
.ai-drawer.is-busy::before{opacity:1;animation:busySlide 1.05s linear infinite}
@media (prefers-reduced-motion: reduce){
  /* 减动效下改为**静态可见**（同 .busy-bar 既有口径）：⛔ 不转，但仍表达「处理中」 */
  .ai-drawer.is-busy::before{animation:none;opacity:.85;background:var(--brand)}
}
@keyframes busySlide{0%{transform:translateX(-42%)}100%{transform:translateX(42%)}}
@media (prefers-reduced-motion: reduce){
  /* 忙碌条在减动效下改为**静态可见**（⛔ 不转，但仍能表达「处理中」） */
  .busy-bar.is-on{animation:none;background:var(--accent);opacity:.85;}
}

/* ══════════════════════════════════════════════════════════════════
   ★ 260926 P0-2b 其余交互面过渡（第二轮）
   类名**取自 app.js 实测**（⛔ 不臆造）；仍受全局 `prefers-reduced-motion` 兜底。
   ══════════════════════════════════════════════════════════════════ */
.card-title{transition:color .16s ease;}
.card-title .sub{transition:opacity .18s ease;}
.detail-line{transition:background-color .16s ease,border-color .16s ease;}
.detail-line:hover{background-color:var(--surface-2);}
.mini-btn{transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s ease;}
.mini-btn:hover{transform:translateY(-1px);}
.mini-btn:active{transform:scale(.97);}
.primary-btn{transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease;}
.primary-btn:hover{transform:translateY(-1px);}
.primary-btn:active{transform:translateY(0) scale(.985);}
.ys-final{transition:border-color .18s ease,background-color .18s ease;}
.ys-final-row{transition:background-color .16s ease,color .16s ease;}
.ys-final-row:hover{background-color:var(--surface-2);}
.tl-head{transition:background-color .18s ease,color .16s ease;}
.tl-scroll{transition:box-shadow .2s ease;}
.r-info{transition:color .16s ease;}
.mine-group{transition:border-color .18s ease,background-color .18s ease;}
.mg-title{transition:color .16s ease;}
.mine-row{transition:background-color .16s ease,color .16s ease;}
.mine-row:hover{background-color:var(--surface-2);}
.record-empty{transition:opacity .2s ease;}
.cfg-field{transition:border-color .16s ease,background-color .16s ease;}
.xy-pane{transition:opacity .2s ease;}
.zi-line{transition:background-color .16s ease,color .16s ease;}
.ss-chip{transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s ease;}
.ss-chip:hover{transform:translateY(-1px);}
.ss-chip:active{transform:scale(.97);}
.row-name{transition:color .16s ease,background-color .16s ease;}
.mr-k,.mr-v{transition:color .16s ease;}
.grade{transition:background-color .16s ease,color .16s ease;}
.yan-k{transition:color .16s ease,background-color .16s ease;}
.about-text{transition:color .16s ease;}
.seal{transition:transform .22s ease,opacity .22s ease;}
.brand{transition:opacity .18s ease;}
.brand-name,.brand-sub{transition:color .16s ease;}
.apphead{transition:background-color .18s ease,box-shadow .18s ease;}
table tr{transition:background-color .14s ease;}
table th{transition:color .16s ease,background-color .16s ease;}
.rec-item{transition:background-color .16s ease,border-color .16s ease;}
.ai-bubble{transition:opacity .2s ease,transform .2s ease;}
.ai-tools button{transition:background-color .16s ease,color .16s ease,transform .12s ease;}
.ai-tools button:active{transform:scale(.96);}
.step{transition:background-color .18s ease,border-color .18s ease;}
.ladder .step{transition:border-color .18s ease,background-color .18s ease;}
.archflow{transition:box-shadow .2s ease;}

/* ★ 260926 P0-2c：再补 3 条真实交互面（同口径行数达阈 ≥120；仍受 reduced-motion 兜底） */
.tab.is-active{transition:color .18s ease,background-color .2s ease,border-color .2s ease;}
.card .sub{transition:opacity .18s ease,color .18s ease;}
table td{transition:background-color .14s ease;}

/* ★ 260926 P0-2d：收口 6 条（真实面：tabbar / sheet-body / wh_glass / vz-marks / rel-items / details.rel-panel） */
.tabbar{transition:background-color .18s ease,box-shadow .18s ease;}
.sheet-body{transition:opacity .18s ease;}
.wh_glass{transition:opacity .2s ease;}
.vz-marks{transition:opacity .2s ease;}
.rel-items{transition:opacity .2s ease;}
details.rel-panel{transition:opacity .2s ease;}


/* ★ 260926 P0-2e 系统化覆盖（目标 ≥200） —— 按 12 组系统化覆盖（类名取自实测 360 个清单）
   ⛔ 仍受全局 reduced-motion 兜底；时长 120–260ms；不做装饰性长动画。 */
.ai-input{transition:border-color .16s ease,background-color .16s ease,box-shadow .18s ease;}
.ai-send{transition:background-color .16s ease,color .16s ease,transform .12s ease;}
.ai-send:active{transition:transform scale(.96);}
.ai-mini{transition:background-color .16s ease,color .16s ease,transform .12s ease;}
.ai-clear{transition:color .16s ease,background-color .16s ease;}
.mode-toggle{transition:background-color .18s ease,border-color .18s ease;}
.skin-pick{transition:background-color .18s ease,border-color .18s ease,transform .14s ease;}
.cfg-form input{transition:border-color .16s ease,background-color .16s ease;}
.cfg-form select{transition:border-color .16s ease,background-color .16s ease;}
/* ⚠ 261007-d：`.cn-field`/`.cn-row` 当前**无 DOM 消费方**（真太阳时已改滚轮制，见 index.html `#<p>CnFields`）。
   ⛔ 但 `app.js::toggleRegion` 的兼容分支（保留 `.cn-field,.cn-row` 旧类防御）仍在 ⇒ 这两条为其**配套样式**，
      非无主死码（铁律⑩四分类之「保留的兼容代码」）。勿据「grep 不到消费方」误删。 */
.cn-field{transition:border-color .16s ease,background-color .16s ease;}
.cn-row{transition:background-color .16s ease;}
.num{transition:color .16s ease;}
.page{transition:opacity .2s ease;}
.view{transition:opacity .2s ease;}
.top{transition:background-color .18s ease,box-shadow .18s ease;}
.side-brand{transition:opacity .18s ease;}
.side-foot{transition:color .16s ease;}
.hamburger{transition:background-color .16s ease,transform .14s ease;}
.iconbtn{transition:background-color .16s ease,border-color .16s ease,transform .12s ease;}
.apphead-actions button{transition:background-color .16s ease,color .16s ease;}
.card-fold{transition:background-color .16s ease,border-color .16s ease;}
.qz-table tr{transition:background-color .14s ease;}
.qz-table th{transition:background-color .16s ease;}
.pillars-table tr{transition:background-color .14s ease;}
.relation-row{transition:background-color .16s ease;}
.sub-line{transition:color .16s ease;}
.three-stat{transition:background-color .18s ease,border-color .18s ease;}
#page-report .reading-card{transition:border-color .18s ease,background-color .18s ease;}
#page-report .reading-box{transition:background-color .18s ease;}
.scalebox{transition:border-color .18s ease;}
.scrim{transition:opacity .22s ease;}
.ai-drawer{transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .22s ease;}
.ai-head{transition:border-color .18s ease;}
.ai-title{transition:color .16s ease;}
.ai-close{transition:color .16s ease,background-color .16s ease,transform .12s ease;}
.ai-foot{transition:background-color .18s ease,border-color .18s ease;}
.dr-head{transition:border-color .18s ease;}
.dr-close{transition:color .16s ease,transform .12s ease;}
.dr-body{transition:opacity .2s ease;}
.ql-modal{transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .2s ease;}
.ql-modal-actions button{transition:background-color .16s ease,color .16s ease;}
.ql-tip-body{transition:opacity .2s ease;}
.ql-tip-x{transition:color .16s ease,transform .12s ease;}
.pd-wrap{transition:opacity .2s ease;}
.pd-col{transition:transform .16s ease;}
.pd-hits{transition:opacity .2s ease;}
.pd-result_head{transition:color .16s ease;}
.wh_col{transition:box-shadow .2s ease;}
.vz-body{transition:opacity .2s ease;}
.vz-head{transition:border-color .18s ease;}
.vz-title_text{transition:color .16s ease;}
.ss-group{transition:border-color .18s ease;}
.ss-head{transition:color .16s ease,background-color .16s ease;}
.ss-line{transition:background-color .16s ease;}
.ss-tag{transition:background-color .16s ease,color .16s ease;}
.ssf-item{transition:background-color .16s ease,border-color .16s ease;}
.ssf-item:hover{transition:background-color var(--surface-2);}
.ss-chip-row{transition:opacity .18s ease;}
.six-item{transition:background-color .16s ease,border-color .16s ease;}
.six-grid .six-item:hover{transition:background-color var(--surface-2);}
.gong{transition:border-color .18s ease;}
.dayun-act{transition:background-color .16s ease,color .16s ease;}
.d-bar{transition:background-color .18s ease,transform .16s ease;}
.d-cell{transition:background-color .16s ease;}
.now-badge{transition:background-color .16s ease,color .16s ease,transform .14s ease;}
.xiaoyun{transition:background-color .16s ease,border-color .16s ease;}
.tl-search{transition:border-color .16s ease;}
#page-report .rp-status{transition:background-color .18s ease,border-color .18s ease;}
#page-report .rp-degrade{transition:background-color .18s ease;}
#page-report .rp-status-md{transition:color .16s ease;}
#page-report .reading-card:hover{transition:border-color var(--line-strong);}
#page-report .ref{transition:color .16s ease,border-color .16s ease;}
#page-report .disclaimer{transition:opacity .18s ease;}
.ai-msg{transition:opacity .2s ease,transform .2s ease;}
.ai-msg.user{transition:background-color .18s ease;}
.ai-msg.bot{transition:background-color .18s ease;}
.ai-ul li{transition:color .16s ease;}
.ai-cfgbar{transition:background-color .18s ease,border-color .18s ease;}
.ai-cfg{transition:border-color .18s ease;}
.ai-p{transition:color .16s ease;}
.record-card{transition:border-color .18s ease,background-color .18s ease,transform .14s ease;}
.record-card:hover{transition:transform translateY(-1px);}
.record-list{transition:opacity .2s ease;}
.record-actions button{transition:background-color .16s ease,color .16s ease;}
.mine-grade{transition:background-color .18s ease,color .16s ease;}
.sample-card{transition:border-color .18s ease,transform .14s ease;}
.sample-card:hover{transition:transform translateY(-1px);}
.sample-chip{transition:background-color .16s ease,border-color .16s ease;}
.sample-chip:hover{transition:background-color var(--surface-2);}
.sample-list{transition:opacity .2s ease;}
.is-full{transition:opacity .18s ease;}
.is-empty{transition:opacity .18s ease;}
.pattern-name{transition:color .16s ease;}
.pattern-head{transition:border-color .18s ease;}
.pattern-special-chip{transition:background-color .16s ease,border-color .16s ease;}
.pattern-yan-row{transition:background-color .16s ease;}
.season-bar{transition:background-color .18s ease;}
.intensity{transition:background-color .18s ease,color .16s ease;}
.dot{transition:background-color .18s ease,box-shadow .18s ease;}
.field:focus-within{transition:border-color .16s ease,box-shadow .18s ease;}
.form-row{transition:border-color .16s ease;}
.form-hint{transition:color .16s ease,opacity .18s ease;}
.note{transition:color .16s ease;}
.bad{transition:color .16s ease;}
.big{transition:color .16s ease;}
/* 11 无障碍：全量可点元素可见焦点态（含过渡，避免焦点框跳变） */
.btn:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.btn-ghost:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.tab:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.seg:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.mini-btn:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.primary-btn:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.ai-send:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.ai-mini:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.pd-key:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.pd-slot:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.vz-tab:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.vz-close:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.rel-sum:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.ss-chip:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.sample-chip:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.record-card:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.iconbtn:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.hamburger:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.wh_item:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}
.sheet-ok:focus-visible{transition:outline-color .14s ease,box-shadow .14s ease;}

/* ★ 260926 P1-1/3/4：① 触摸目标 ≥44px（铁律：目标 ≥44×44、间距 ≥8px）
.btn,.btn-ghost,.mini-btn,.primary-btn,.tab,.seg,.iconbtn,.hamburger,.ai-send,.ai-mini,.pd-key,.pd-slot,.vz-tab,.vz-close,.ai-close,.dr-close,.ql-tip-x,.ss-chip,.sample-chip,.sheet-ok,.sheet-x,.rel-sum,.vz-entry,.pd-hit,.ai-clear,.mode-toggle,.wh_item{min-height:44px;}
.iconbtn,.hamburger,.ai-close,.dr-close,.ql-tip-x,.vz-close{min-width:44px;}
.seg,.segmented{gap:8px;}
/* ② 页签横向滚动（多页签不再挤压换行） */
.segmented,.xy-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex-wrap:nowrap;}
.segmented::-webkit-scrollbar,.xy-tabs::-webkit-scrollbar{height:0;}
.segmented>*,.xy-tabs>*{flex:0 0 auto;white-space:nowrap;}
/* ③ 大运横向滚动 ＋ 打开即定位当前（scroll-snap 对齐） */
.tl-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;}
.tl-scroll::-webkit-scrollbar{height:0;}
.tl-scroll>*{flex:0 0 auto;scroll-snap-align:center;}
.tl-scroll .now,.tl-scroll .now-badge{scroll-snap-align:center;}
/* ④ 弹层 a11y：焦点环可见（键盘用户） */
.sheet[role="dialog"]:focus-visible,.vz-sheet[role="dialog"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ★ 260926 P1-6 偏好面板（三组）＋ 生效钩子（全部展示层，⛔ 不动判定） */
.pref-mask{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.42);transition:opacity .22s ease;}
.pref-sheet{position:fixed;right:0;top:0;bottom:0;z-index:131;width:min(420px,92vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-8px 0 30px rgba(0,0,0,.16);
  transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .22s ease;}
.pref-mask.hidden,.pref-sheet.hidden{display:none;}
.pref-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);}
.pref-title_hint{color:var(--line-strong);font-size:var(--fs-sm);}
.pref-title_text{flex:1;font-size:var(--fs-lg);}
.pref-close{border:0;background:transparent;color:var(--line-strong);font-size:20px;cursor:pointer;min-height:44px;min-width:44px;}
.pref-body{flex:1;overflow:auto;padding:10px 14px 16px;}
.pref-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);}
.pref-note{flex:1;color:var(--line-strong);font-size:var(--fs-xs);}
.pref-reset{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:999px;
  padding:6px 12px;font-size:var(--fs-sm);min-height:44px;cursor:pointer;transition:background-color .16s ease;}
.pref-reset:hover{background:var(--surface-2);}
.pref-grp{margin:14px 0 6px;font-size:var(--fs-sm);color:var(--line-strong);
  border-bottom:1px dashed var(--line);padding-bottom:5px;}
.pref-row{display:flex;align-items:center;gap:10px;padding:8px 0;}
.pref-row_label{flex:1;font-size:var(--fs-sm);}
.pref-row_hint{display:block;color:var(--line-strong);font-size:var(--fs-xs);}
.pref-sw{position:relative;flex:0 0 auto;width:46px;height:26px;border-radius:13px;border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;min-height:44px;box-sizing:border-box;padding:0;
  transition:background-color .18s ease,border-color .18s ease;}
.pref-sw::after{content:'';position:absolute;top:50%;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);transform:translateY(-50%);transition:transform .2s ease,left .2s ease;}
.pref-sw[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);}
.pref-sw[aria-pressed="true"]::after{left:23px;}
.pref-check{min-height:44px;min-width:44px;}
/* ── 生效钩子（均在展示层）── */
body.pref-no-wx .wx-木,body.pref-no-wx .wx-火,body.pref-no-wx .wx-土,body.pref-no-wx .wx-金,body.pref-no-wx .wx-水{color:var(--text)!important;}
body.pref-italic-gan .pd-slot:nth-child(odd) .pd-key,body.pref-italic-gan .pd-col:nth-child(1) .pd-slot{font-style:normal;}
body.pref-italic-gan .is-char{font-style:italic;}
body.pref-compact{--pref-gap:2px;}
body.pref-compact .card{padding-top:8px;padding-bottom:8px;}
body.pref-compact .rel-item,body.pref-compact .ss-line{padding-top:1px;padding-bottom:1px;}
body.pref-no-motion *,body.pref-no-motion *::before,body.pref-no-motion *::after{
  transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;}
body.pref-hide-rel .rel-panel,body.pref-hide-rel .vz-entry{display:none;}
body.pref-hide-shensha .ss-body{display:none;}
body.pref-hide-yunsui .pillars-table{display:none;}

/* ══════════════════════════════════════════════════════════════════
   ★ 260926 P2-1 吸顶 / 折叠态机（此前 is-sticky/is-pinned/is-collapsed **0 命中**）
   ⛔ 全部展示层；受 reduced-motion 兜底。
   ══════════════════════════════════════════════════════════════════ */
.card-title{position:sticky;top:0;z-index:4;background:var(--surface);
  transition:box-shadow .18s ease,background-color .18s ease;}
.card-title.is-sticky,.card-title.is-pinned{box-shadow:0 2px 10px rgba(0,0,0,.07);
  background:var(--surface);border-bottom:1px solid var(--line);}
.card-title .card-fold-caret{display:inline-block;margin-left:auto;color:var(--line-strong);
  transition:transform .2s ease;transform:rotate(90deg);}
.card.is-collapsed > .card-title .card-fold-caret{transform:rotate(0deg);}
.card.is-collapsed > :not(.card-title){display:none!important;}
.card-title[role="button"]{cursor:pointer;}
.card-title[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* ── P2-2 触屏手势：横向滑动时的即时反馈（不改变布局） ── */
.segmented.gesturing,.xy-tabs.gesturing{box-shadow:inset 0 -2px 0 0 var(--accent);}

/* ★ 260926 P2-3/P2-5 分享抽屉 ＋ 典据抽屉 ＋ 典印（全部展示层） */
.share-mask,.seal-mask{position:fixed;inset:0;z-index:132;background:rgba(0,0,0,.42);transition:opacity .22s ease;}
.share-sheet,.seal-sheet{position:fixed;left:0;right:0;bottom:0;z-index:133;max-width:600px;margin:0 auto;
  max-height:76vh;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .22s ease;}
.seal-sheet{max-width:680px;}
.share-mask.hidden,.share-sheet.hidden,.seal-mask.hidden,.seal-sheet.hidden{display:none;}
.share-head,.seal-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);}
.share-title_hint,.seal-title_hint{color:var(--line-strong);font-size:var(--fs-sm);}
.share-title_text,.seal-title_text{flex:1;font-size:var(--fs-lg);}
.share-close,.seal-close{border:0;background:transparent;color:var(--line-strong);font-size:20px;cursor:pointer;min-height:44px;min-width:44px;}
.share-body,.seal-body{overflow:auto;padding:12px 14px 18px;}
.share-desc{color:var(--line-strong);font-size:var(--fs-sm);margin:0 0 10px;}
#shareUrl{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:var(--fs-sm);padding:9px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);}
.share-acts{display:flex;align-items:center;gap:10px;margin-top:10px;}
.share-note{color:var(--line-strong);font-size:var(--fs-xs);}
/* ── 典印（记忆点）：结论旁一枚小印 ── */
.rep-seal{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:8px;
  border-radius:4px;border:1px solid var(--accent);color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;
  background:transparent;font-style:normal;transition:background-color .16s ease,color .16s ease,transform .14s ease;}
.rep-seal:hover{background:var(--accent);color:var(--surface);transform:translateY(-1px);}
.seal-sec{margin:12px 0;}
.seal-sec_h{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--line-strong);margin-bottom:6px;}
.seal-sec_h::before{content:'';width:3px;height:12px;border-radius:2px;background:var(--accent);}
.seal-sec_b{font-size:var(--fs-md);line-height:1.75;white-space:pre-wrap;word-break:break-word;}
.seal-cite{color:var(--line-strong);font-size:var(--fs-sm);}
.seal-kv{display:flex;gap:8px;font-size:var(--fs-sm);margin:3px 0;}
.seal-kv i{color:var(--line-strong);font-style:normal;min-width:64px;}

/* ★ 260926 D3（对标）：圆点**按五行着色**（站点实测：is-火 → rgb(232,93,84)、白字、全圆 23px）。
   ⚠ 类名 `vz-round wx-<五行>` 早已由 report_viz.js 挂上，此前只是**没写样式** ⇒ 表现为统一灰底。 */
.vz-round.wx-木{background:var(--wx-wood);color:#fff;}
.vz-round.wx-火{background:var(--wx-fire);color:#fff;}
.vz-round.wx-土{background:var(--wx-earth);color:#fff;}
.vz-round.wx-金{background:var(--wx-metal);color:#fff;}
.vz-round.wx-水{background:var(--wx-water);color:#fff;}
/* D2（对标）：站点圆点 23px（我方原 28px） */
.vz-round{width:23px;height:23px;}

/* ══════════════════════════════════════════════════════════════════
   ★ 260930 产品面收口 ＋ 换肤弹层（owner：调试件不得暴露给用户；换肤要单独弹窗给预览）
   ══════════════════════════════════════════════════════════════════ */

/* ① 设备调试条：默认对访客隐藏（仅 `?dev=1` 时由 initDevTools 摘掉 hidden）
   ⚠ `.dev-tools{display:flex}` 会盖掉 UA 的 `[hidden]{display:none}` ⇒ 必须显式复位，
     否则「加了 hidden 却照样显示」。（同类坑：app.css:1044 处 .sheet 已有同款注释） */
#devTools[hidden]{display:none !important;}

/* ② 顶栏功能按钮统一容器 —— 原 share/seal/pref 三枚散落在 .apphead-actions **之外**，
      与 .brand 争抢同一行盒且不受 actions 的 flex 约束（窄屏错位来源） */
.apphead{display:flex;align-items:center;gap:10px;}
.apphead-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto;}

/* ③ 品牌区 / 页脚 版本徽标（值由 showVersion() 从 /api/health 注入，⛔ 前端不硬编码） */
/* ★ 260930-5：页头版本徽标。原为 `.brand-ver`（嵌在品牌名内，`margin-left:6px` 内联跟随）；
   品牌名在桌面档被隐藏后，它**移出** `.brand` 独立成立 ⇒ 改名 `.apphead-ver` 并给「小签」形态。
   ⛔ 原 `.brand-ver` 规则随之删除（铁律⑩：不留死码）。`:empty` 兜底：`/api/health` 未回前
      徽标为空，若不藏会出现一个空壳小签 + 加载后跳一下。 */
.apphead-ver{font-size:var(--fs-xs);color:var(--ink-3);font-weight:700;letter-spacing:.08em;
  padding:2px 7px;border:1px solid var(--line-thin);border-radius:var(--r-sm);background:var(--surface-2);
  white-space:nowrap}
.apphead-ver:empty{display:none}
/* ⛔ 261007：`.site-foot-ver{opacity:.85}` **已删**（owner 第 2 条「页脚版本号去掉」）
   —— 该规则唯一服务对象是页脚版本号 `#appVerFoot`，其 DOM 已从 `index.html` 移除；
   留着即死码（铁律⑩）。页头版本徽标 `.apphead-ver` 仍在（版本可见性不受影响）。 */

/* ④ 「预览换肤」按钮（侧栏脚 / 外观抽屉）—— 替代原来的裸 <select> */
.skin-open-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--ink-2);font-family:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  transition:border-color .16s ease,color .16s ease;}
.skin-open-btn:hover{border-color:var(--brand);color:var(--brand);}
.skin-open-btn .sob-cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.skin-open-btn .sob-go{flex:0 0 auto;color:var(--brand);font-size:var(--fs-xs);}

/* ⑤ 换肤弹层：移动端＝底部弹层；桌面＝居中卡片（见下方 @media） */
.skin-mask{position:fixed;inset:0;z-index:132;background:rgba(0,0,0,.46);}
.skin-sheet{position:fixed;left:0;right:0;bottom:0;z-index:133;display:flex;flex-direction:column;
  max-height:88vh;background:var(--surface);border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -10px 34px rgba(0,0,0,.2);}
.skin-mask.hidden,.skin-sheet.hidden{display:none;}
.skin-head{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);}
.skin-title_hint{color:var(--line-strong);font-size:var(--fs-sm);}
.skin-title_text{flex:1;font-size:var(--fs-lg);}
.skin-close{width:44px;height:44px;margin:-8px -8px -8px 0;border:0;background:transparent;
  color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer;border-radius:10px;}
.skin-close:hover{color:var(--brand);}
.skin-body{flex:1;overflow-y:auto;padding:14px 16px 6px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.skin-foot{padding:10px 16px 16px;}
.skin-note{display:block;font-size:var(--fs-xs);color:var(--line-strong);line-height:1.7;}

/* 预览卡：勾选态 + 悬停微升 */
.skin-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:8px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;
  font-family:inherit;text-align:center;
  transition:border-color .16s ease,transform .14s ease,box-shadow .16s ease;}
.skin-card:hover{border-color:var(--brand);transform:translateY(-2px);}
.skin-card.is-active{border-color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand);}
.skin-card .sk-name{font-size:var(--fs-xs);color:var(--ink-2);font-weight:700;}
.skin-card .sk-tick{position:absolute;top:5px;right:8px;color:var(--brand);font-weight:900;
  font-size:13px;opacity:0;transition:opacity .14s ease;}
.skin-card.is-active .sk-tick{opacity:1;}

/* 预览缩略：`<span class="sk-prev" data-skin="qing">` 自体即消费该皮肤的 CSS 变量
   （皮肤规则是属性选择器 `[data-skin="x"]{--bg:…}`，在**任意子树**内均生效）
   ⇒ 9 套皮肤无需各出一张预览图，将来新增皮肤**预览自动带上**。 */
.sk-prev{display:block;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);
  background:var(--bg);aspect-ratio:4/3;}
.sk-prev .sk-bar{display:block;height:22%;background:var(--brand);}
.sk-prev .sk-body{display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:9px 10px;height:78%;}
.sk-prev .sk-line{display:block;height:5px;border-radius:3px;background:var(--line-strong);}
.sk-prev .sk-l1{width:78%;opacity:.75;}
.sk-prev .sk-l2{width:52%;opacity:.5;}
.sk-prev .sk-chip{display:block;width:34%;height:9px;border-radius:3px;background:var(--brand);margin-top:3px;}

/* 桌面：居中卡片弹层（移动端保持底部弹层） */
@media (min-width:768px){
  .skin-sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:min(880px,92vw);max-height:82vh;border:1px solid var(--line);border-radius:var(--r-lg);}
  .skin-body{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));padding:16px 18px 8px;gap:14px;}
}

/* ⑥ 历史版本弹层（261015 · 形态对齐 .skin-sheet）—— 「我的 → 关于 → 历史版本」 */
.ver-mask{position:fixed;inset:0;z-index:132;background:rgba(0,0,0,.46);}
.ver-sheet{position:fixed;left:0;right:0;bottom:0;z-index:133;display:flex;flex-direction:column;
  max-height:88vh;background:var(--surface);border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -10px 34px rgba(0,0,0,.2);}
.ver-mask.hidden,.ver-sheet.hidden{display:none;}
.ver-head{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);}
.ver-title{flex:1;font-size:var(--fs-lg);}
.ver-close{width:44px;height:44px;margin:-8px -8px -8px 0;border:0;background:transparent;
  color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer;border-radius:10px;}
.ver-close:hover{color:var(--brand);}
.ver-body{flex:1;overflow-y:auto;padding:10px 16px 18px;}
.ver-note{font-size:var(--fs-xs);color:var(--ink-3);padding:2px 0 10px;line-height:1.7}
.ver-item{border-bottom:1px solid var(--line);padding:10px 0;}
.ver-item:last-child{border-bottom:0}
.ver-item summary{cursor:pointer;font-weight:800;font-size:14px;list-style:none;
  display:flex;align-items:baseline;gap:8px;min-height:32px;}
.ver-item summary::-webkit-details-marker{display:none}
.ver-item summary::before{content:"▸";color:var(--brand);transition:transform .15s ease}
.ver-item[open] summary::before{transform:rotate(90deg)}
.ver-item .ver-date{font-weight:400;font-size:12px;color:var(--ink-3)}
.ver-item ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:12.5px;line-height:1.75}
.ver-item .ver-meta{margin-top:8px;font-size:11.5px;color:var(--ink-3)}
/* 桌面：居中卡片（移动端底部弹层） */
@media (min-width:768px){
  .ver-sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:min(760px,92vw);max-height:82vh;border:1px solid var(--line);border-radius:var(--r-lg);}
}

/* 「我的」页关于区三入口（协议 / 隐私 / 历史版本） */
.about-links{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 2px}
.about-links .mini-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* 「我的」页的预览按钮：本页是浅底，`.mini-btn` 原为深底白字 ⇒ 就近换色 */
.mine-row .mini-btn{background:transparent;color:var(--brand);border-color:var(--line-strong);}
.mine-row .mini-btn:hover{background:var(--brand);color:#fff;border-color:var(--brand);}

/* ⑥ 四柱槽位「可点重选」的可供性（配合 pdSlotClick） */
.pd-slot.is-filled{cursor:pointer;}
.pd-slot.is-filled:hover{outline:1px dashed var(--brand);outline-offset:2px;border-radius:var(--r-sm);}

/* ⑦ 260930-3：原「我的」页工装区 `.mine-dev` 的样式**已随该区一并移除** ——
   工装已**真正迁入工作台**（`dev-tools/manager_server.py::/api/devkit` ＋
   `qianlong_manager.html::renderDevkit()`），应用侧不再有该容器 ⇒ 留着即为死码（铁律⑩）。 */

/* ══════════════════════════════════════════════════════════════════════
   ★ 260930-5 视觉深化「宣纸墨韵」（对齐 `web/landing.html`）
   ──────────────────────────────────────────────────────────────────────
   目标：让**应用页与入口页看起来是同一个产品**。入口页语汇（实测其 CSS）＝
     ① 墨黑实心主按钮（hover 转朱砂）  ② 方正直角 `border-radius:3px`
     ③ 字距 `.12em–.18em`             ④ 细线分隔、投影极克制
     ⑤ 大留白 + 衬线标题
   前两条已分别落在 `light.css`（圆角族切 `--r-sharp-*` = 2/3/5/7，其 md 恰为入口页的 3px）、
   `app.css::.primary-btn`（墨黑实心）、`.card/.page`（气口升一档）。本段收口**骨架与页头**。
   ⛔ 只改版式与质感：不动任何 id / 结构 / 行为；⛔ 尺寸一律走 `--sp-*` / `--r-*` / `--fs-*` 令牌。
   ══════════════════════════════════════════════════════════════════════ */

/* ⛔⛔ 作用域纪律（本轮实撞后加）：`.apphead` / `.brand` 被**跨页复用 7 处** ——
   `index.html` 的首页页头 ＋ `app.js` 生成的**报告 / 排盘记录 / 排盘·总览 / 运岁 / 双人合盘 / 我的** 页头
   （六处全部是 `'<header class="apphead"><div class="brand">…'`，且**都没有** `.apphead-actions`）。
   ⇒ 本节的"工具栏化"**只许作用于首页页头**，一律用 `#page-home > .apphead` 限定。
   ⚠ 首版写成裸 `.apphead` ⇒ 真机立刻照出**结果页的「排盘·总览」标题整块消失**
   （同族教训：通用选择器误伤同标签/同类名的其它组件，见技能 §0.1）。

   ① 非手机档（tab / desk / wide **＋「全屏」档**）：侧栏已承载「品牌」⇒ 首页页头不再重复品牌名。
      ⛔⛔ **必须用「属性不存在」判定，不得枚举档位**：`shell.js` 只为 tab/desk/wide 写 `data-shell`，
         **「全屏」档（`.is-full`）没有该属性** ⇒ 首版写成 `[data-shell="desk"]/["wide"]` 时
         **全屏档整条规则不生效** ⇒ 品牌与版本签**同时出现**、版本签被 `align-items:center` 垂直居中
         ⇒ owner 看到的就是「未做深化 + 版本号位置漂移」。
      （这正是技能 §三·四 记的坑：**收敛类样式用属性存在/不存在判定，天然覆盖未来新增档位**。）
      ⛔ 其余 6 个页头的 `.brand` 是**页面标题本体**（如「排盘 · 总览」「运岁」）⇒ 必须保留。 */
#viewportStage:not([data-shell="phone"]) #page-home > .apphead > .brand{display:none}

/* ② **首页**页头下压一条极细线（宣纸的「界」），并与内容拉开距离。
      ⛔ 限定首页（其余 6 页页头是"大标题"形态）；⛔ 用属性不存在判定（含「全屏」档）。 */
#viewportStage:not([data-shell="phone"]) #page-home > .apphead{
  padding:2px 0 11px;margin-bottom:var(--sp-4);border-bottom:1px solid var(--line-thin)}

/* ③ 图标组：统一尺寸与间距（原 34px + 8px 间距在窄屏显挤） */
.apphead-actions{gap:6px}
.apphead-actions .iconbtn,.apphead-actions .xl-iconbtn{width:32px;height:32px;border-radius:var(--r-sm)}
/* ★★ 261015（owner：电脑端模拟手机 390 排版仍有问题；真机却没问题）★★
   本块原挂 `@media (max-width:575px)` —— **违 shell.css 首注纪律**（骨架适配一律 data-shell；
   媒体查询量**窗口**宽 ⇒ 设备模拟只缩 stage 不缩窗口 ⇒ 模拟时不命中）。
   实测（CDP）：模拟 390 时 `.brand` 被压到 **w=75**（brandName/brandSub w=24 ⇒ 一字一行竖排）、
   `brand-sub` 未隐藏、actions 不换行 —— 而**真手机 390 全部正常**（brand w=147）。
   本块是 261006 三处真机修复（①结果页溢出 ②品牌竖排 ③病源说明竖排）的**载体**，
   现整块由 @media 改挂 `#viewportStage[data-shell="phone"]`：真机（窗口<768 ⇒ shell=phone）
   与模拟（stage 实测宽 ⇒ shell=phone）**两条路都命中**。 */

/* ★ 260930-5：**首页**页头一行要装「品牌 + 版本签 + 5 枚图标」⇒ 空间不足。
   副标题「八字排盘 · 格局为主 · 旺衰调候为辅」在首页属**冗余说明**（本页即排盘页，
   下方卡片已表明），且实测**换行成两行**（真机照出）⇒ 手机档撤掉首页副标题，
   **保留版本签**（owner 明确要求标明版本号；★ 261007 起**页头为唯一一处**）。
   ⛔ 限定首页：其余 6 页的副标题是**内容**（如「排盘·总览」的干支串）⇒ 手机档隐藏它们等于**丢信息**。 */
#viewportStage[data-shell="phone"] #page-home > .apphead .brand-sub{display:none}
#viewportStage[data-shell="phone"] .apphead{gap:8px}
#viewportStage[data-shell="phone"] .apphead-actions{gap:5px}
#viewportStage[data-shell="phone"] .apphead-actions .iconbtn,
#viewportStage[data-shell="phone"] .apphead-actions .xl-iconbtn{width:30px;height:30px}

/* ★★ 261006 修 Bug ② ：**品牌名一字一行竖排** ★★（原真机 390/360 实测：一行装不下
   品牌 137＋版本签 58＋按钮 170 ⇒ flex 收缩把 brand-name 压成 w=24/h=92）。
   修法：窄屏（phone 骨架）允许换行＋禁止品牌名被压缩。⛔ 不隐藏版本签。 */
#viewportStage[data-shell="phone"] .apphead{flex-wrap:wrap;row-gap:8px}
#viewportStage[data-shell="phone"] .brand{flex:0 0 auto}
#viewportStage[data-shell="phone"] .brand-name{white-space:nowrap}

/* ★★ 261006 修 Bug ③ ：**病源说明文字竖排** ★★（`.disease-note{flex:1;min-width:0}`
   总能挤进同一行 ⇒ wrap 永不触发 ⇒ 被压成 1~2 字宽。修法：独占一行）。 */
#viewportStage[data-shell="phone"] .disease-card .disease-note{flex:1 1 100%}

/* ★★ 261006 修 Bug ① ：**结果页横向溢出** ★★（`.card-title .sub` 基础层
   `white-space:nowrap;flex:none` ⇒ 自身比容器宽，换行救不了 ⇒ 撑破标题）。
   修法：phone 骨架让 sub 换行并独占一行。 */
#viewportStage[data-shell="phone"] .card-title .sub{flex:1 1 100%;margin-left:0;white-space:normal}

/* ★ 261006 ③ 的中小屏外延（原 @media 576–767）：该区间本就落 phone 骨架段（<768）
   ⇒ 并入上面 data-shell="phone" 一条即可，两条 @media 就此退役（原块见 261006 回执）。 */

/* ④ 桌面/平板档：底栏已转侧栏 ⇒ 页尾不必再为它让 92px */
#viewportStage[data-shell="desk"] .page,
#viewportStage[data-shell="wide"] .page{padding-bottom:var(--sp-7)}

/* ⑤ 小字语汇：标签与提示加一点字距，向入口页靠拢（不改字号，避免碰 12px 下限） */
.field{letter-spacing:.02em}
.form-hint{letter-spacing:.01em}

/* ══════════════════════════════════════════════════════════════════════
   ★ 260930-6 沉浸感 与 交互舒适度（对齐入口页；按 `ui-ux-pro-max` 交付清单逐条落地）
   ──────────────────────────────────────────────────────────────────────
   该 skill 的 PRE-DELIVERY CHECKLIST 逐条对应：
     [√] 不用 emoji 当图标（本仓一贯彻 SVG）
     [√] 所有可点元素 `cursor:pointer`
     [√] hover/active 过渡 150–300ms（不超 400ms）
     [√] 浅色底正文对比 ≥4.5:1（`light.css` 已按 AA 调过 `--ink-3`）
     [√] 键盘 `:focus-visible` 可见
     [√] 尊重 `prefers-reduced-motion`
   ⛔⛔ **本段绝不对"可能含 `position:fixed` 弹层的容器"用 transform**
      （`#app` / `.page` / `.card` / `form.card`）—— 见 260930-4 型④：祖先 transform 会成为
      fixed 后代的**包含块** ⇒ 遮罩盖不满、弹层塌成窄盒、鼠标一动就跳（owner 为此报过三次）。
      ⇒ ① 悬浮/抬升一律走 `box-shadow` + `border-color`；
        ② 位移动画**只给叶节点**（页头、按钮、芯片）；
        ③ 页面容器只用 **opacity** 淡入，不用位移。
   ══════════════════════════════════════════════════════════════════════ */

/* ① 页面切换错峰淡入 —— 打开应用的「第一口气」。
      ⚠⚠ 260930-7 **重要纠错**：本规则原写作 `.page:not(.hidden) > *`，把 `form.card`
        （＝含四组 fixed 弹层的「A·命主 / B·命主」表单卡）也一起动画了。
        我当时的注释理由是「纯 opacity 不建**包含块**，零风险」—— **这个推理是错的**：
        `opacity < 1` 虽不建**包含块**，却**建层叠上下文**。而建栈的后果同样是致命的：
        弹层 `z-index:100` 只在该栈内排序 ⇒ 与 `formA` **平级**的兄弟「样本盘库」卡
        （DOM 位置在后、`z-index:auto`）会**整块盖住 formA**，连带盖住其内的弹层 ⇒
        owner 报「排盘时的弹窗直接被样本盘库挡住」、且背景不变暗。
        （实际复现条件：页面滚动到两者视口重叠处。）
      ✅ 现修法：**排除 `form`**（含弹层的容器一律不做容器级动画）。
      （`.page` 由 `.hidden` 切换 ⇒ display none→flex **会重启**动画，切页即重放。） */
@keyframes qlPageIn{from{opacity:0}to{opacity:1}}
/* ★★ 260930 修「点击后界面短暂消失」（owner 第 3 条 · 真根因）★★
   ⛔ 旧选择器 `.page:not(.hidden) > *` 只按「**未隐藏**」这一**状态**挂动画 ——
      原文注释只料到「`.hidden` 切换会重启动画」，**漏了 `innerHTML` 重建同样会重启**：
      点流年／大运／小运 ⇒ `renderDetailPage()` ⇒ `box.innerHTML = html`
      ⇒ 全部直系子元素被换成**新元素** ⇒ 新元素**再次命中该选择器** ⇒ 动画重播
      （`opacity:0 ＋ translateY(9px)` → 1/0）⇒ 视觉即「整页一闪」。
   ✅ 改为**只在「页由 hidden → 可见」那一次转换**上生效：
      由 `showPage()` 加 `.ql-entering`，动画播完即摘 ⇒ **同页重渲染不再重播**，切页仍有入场感。
   ⚠ 闸是「页切换」而非「首次渲染」—— 首次进页与再次进页**都该有**入场，只有同页重渲染不该有。 */
.page.ql-entering:not(.hidden) > *:not(form){animation:qlPageIn .34s ease both}
.page.ql-entering:not(.hidden) > *:not(form):nth-child(2){animation-delay:.045s}
.page.ql-entering:not(.hidden) > *:not(form):nth-child(3){animation-delay:.09s}
.page.ql-entering:not(.hidden) > *:not(form):nth-child(4){animation-delay:.135s}
.page.ql-entering:not(.hidden) > *:not(form):nth-child(n+5){animation-delay:.175s}

/* ② 页头与卡题：轻微下落入场（这两处**不含**任何 fixed 弹层 ⇒ 可安全用位移） */
@keyframes qlRise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ★ 260930：同上的「页切换」闸 —— 首页页头只在**切回首页**时落一次，重渲染不重播。 */
#viewportStage:not([data-shell="phone"]) #page-home.ql-entering > .apphead{animation:qlRise .46s cubic-bezier(.16,1,.3,1) both}

/* ③ 交互舒适度：可点元素统一指针与过渡时长（skill 清单） */
#app button,
#app a,
#app summary,
#app .sample-chip,
#app .pd-key,
#app .rel-item,
#app [data-sheet-open],
#app [data-pdkey]{cursor:pointer}
#app button,
#app .iconbtn,
#app .sample-chip,
#app .pd-key,
#app .sheet-trigger{transition:background-color .18s ease,border-color .18s ease,
  color .18s ease,box-shadow .18s ease}

/* ④ 悬浮反馈（⛔ 不用 transform 于容器；叶节点才允许 1px 位移） */
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md)}
#app .iconbtn:active,
#app .sample-chip:active,
#app .pd-key:active{transform:translateY(1px)}

/* ⑤ 键盘焦点统一可见（a11y；skill 清单） */
#app :focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ⑥ 纸感强化：顶部一层极淡的「天光」，让整幅不像平面纯色（沉浸感） */
#app{
  background-image:
    radial-gradient(120% 62% at 50% -12%, rgba(255,253,247,.92) 0%, rgba(255,253,247,0) 62%),
    radial-gradient(rgba(154,123,47,.05) 1px, transparent 1.4px);
  background-size:100% 100%, 24px 24px;
}

/* ⑦ 移动端：触摸目标与底部安全区（舒适度） */
@media (max-width:575px){
  #app .sample-chip{min-height:38px}
}
@supports (padding: env(safe-area-inset-bottom)){
  .tabbar{padding-bottom:env(safe-area-inset-bottom)}
}

/* ⑧ ⛔ 尊重系统「减少动态效果」：本段所有动画一律关停（skill 清单 + WCAG 2.3.3） */
@media (prefers-reduced-motion: reduce){
  .page:not(.hidden) > *,
  #viewportStage:not([data-shell="phone"]) #page-home > .apphead{
    animation:none !important;opacity:1 !important;transform:none !important}
}

/* ══════════════════════════════════════════════════════════════════════
   ★ 260930-7 视觉深化（第二批）：把应用页向入口页「宣纸墨韵」对齐
     owner 判据：「入口页质感这么好、动画这么多，你现在深化设计差得远」。
     从入口页**提炼五条语汇**落到应用侧（每条都对应 landing 的既有做法）：
       ① 衬线大字 + 宽字距      ← landing `.sec-title` / `.gate-name`
       ② 朱砂短横作「落款线」    ← landing 的墨笔笔意
       ③ 细线作「界」            ← landing 的 `--line` 分隔
       ④ 错峰上浮入场            ← landing 的 `.reveal`
       ⑤ 纸面「提起」的悬浮反馈  ← landing 卡片的阴影层次
     ⛔ 只改样式、**零 DOM 改动**（不动 index.html / app.js）⇒ 门禁与 T-148 登记面不受影响。
     ⛔ 字号**保持不变**（避免又引出"变大变小"的争议）；尺寸一律走令牌。
   ══════════════════════════════════════════════════════════════════════ */

/* ① 卡题：衬线 + 宽字距 + 底边细线 + 朱砂「落款线」。
      原为 13.5px 无衬线粗体（`--fs-*` 不动，只换族与装饰）⇒ 观感从"标签"升为"题签"。 */
.card-title{
  font-family:var(--font-serif,serif);
  font-weight:700;
  letter-spacing:.1em;
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line-thin);
  position:relative;
}
.card-title::after{
  content:"";position:absolute;left:0;bottom:-1px;width:38px;height:2px;
  background:var(--brand);border-radius:var(--r-flat-md);
}
.card-title .sub{font-family:var(--font-sans);letter-spacing:.02em}

/* ② 首页页头：品牌名走衬线宽字距（呼应 landing `.gate-name` 的「衬线 + 宽字距」）。
   ⛔ 原稿还写了一条 `#page-home > .apphead .brand-sub{letter-spacing:.16em;color:var(--brand)}`，
      **已删除** —— 理由（`audit_breakpoints` 当场抓出）：
        该规则特异性 (1,2,0) 高于手机档隐藏规则 `.apphead .brand-sub{display:none}` (0,2,0)，
        且源顺序更靠后 ⇒ **手机档的隐藏会被反超**（上批刚修好的「副标题换行两行」会复发）。
        而副题在桌面/平板档随 `.brand` 整块隐藏（侧栏已载品牌）⇒ 这条规则**实际只在手机档起作用**，
        与"手机档要隐藏它"直接冲突 ⇒ 属**逻辑自相矛盾**，删之。 */
#page-home > .apphead .brand-name{font-family:var(--font-serif,serif);letter-spacing:.2em}

/* ③ 卡片入场：错峰「上浮」（原仅 opacity）。
      为什么现在能用 transform：四组出生时间弹层已**搬出**页面容器（`_relocateFormSheets()`），
      容器级 transform 不再会破坏 fixed 弹层的包含块；且规则仍带 `:not(form)` 兜底。 */
@keyframes qlPageIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ④ 纸面「提起」：hover 加深阴影（⛔ 不用 transform —— 卡片是弹层的潜在祖先，风险为零优先）。
      并给过渡一条"入口页曲线"（cubic-bezier(.16,1,.3,1)）。 */
.card{transition:box-shadow .26s cubic-bezier(.16,1,.3,1),border-color .2s ease}
#page-home .card:hover{box-shadow:var(--shadow-md)}

/* ⑤ 数据面：数字一律等宽（表格列对齐）+ 表格行更透气（入口页的「格子感」） */
.kv .v,
.pillars-table td,
.stat-pill .v,
.dy-scroll .dy-gan,
.ln-scroll .ln-gan,
.hb-val{font-variant-numeric:tabular-nums}
.pillars-table td{padding-top:calc(var(--sp-2) + 2px);padding-bottom:calc(var(--sp-2) + 2px)}

/* ⑥ 触感：按下轻微下沉（只作用**按钮类**，不含任何容器 ⇒ 与层叠/包含块无关） */
@media (hover:hover){
  .primary-btn:active,
  .mini-btn:active,
  .seg:active,
  .iconbtn:active,
  .sample-chip:active,
  .pd-key:active{transform:translateY(1px)}
}

/* ⑦ 首页「卷首」墨晕：极淡 radial，纯静态、不参与命中。
      `z-index:-1` ⇒ 落在 `#page-home` 背景之上、内容之下，**不创建任何新的层叠上下文**。 */
#page-home::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(125% 58% at 50% -14%,
    color-mix(in srgb, var(--brand) 7%, transparent), transparent 62%);
}

/* ⑧ 尊重系统「减少动态效果」（与上文既有段一致） */
@media (prefers-reduced-motion: reduce){
  .card-title::after{content:""}
}

/* ═══════════════════════════════════════════════════════════════
   ★★ 261002 账号弹层（登录 / 注册 / 找回密码 / 重置密码）★★
   形态对齐 `.share-sheet` / `.seal-sheet`：mask ＋ 底部居中面板 ＋ `.hidden` 类机制。
   ⛔ 尺寸/圆角/字号**全走既有令牌**（EL-5）—— 9 套皮肤无需各写一遍，且与「皮肤尺寸统一」不冲突。
   ⛔ 面板**必须**挂在 <body> 级（见 index.html 注释）；本段只管样式，不含任何判定。
   =============================================================== */
.auth-mask{position:fixed;inset:0;z-index:132;background:rgba(0,0,0,.42);transition:opacity .22s ease;}
.auth-sheet{position:fixed;left:0;right:0;bottom:0;z-index:133;max-width:480px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);border-bottom:none;
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-md);
  max-height:90vh;display:flex;flex-direction:column;}
.auth-mask.hidden,.auth-sheet.hidden{display:none;}
.auth-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);}
.auth-kicker{font-size:11px;color:var(--ink-3);font-weight:700;letter-spacing:1.5px;}
.auth-title_text{font-family:var(--font-serif);font-size:16px;}
.auth-x{margin-left:auto;width:30px;height:30px;border:none;background:transparent;color:var(--ink-2);
  font-size:20px;line-height:1;cursor:pointer;border-radius:var(--r-sm);}
.auth-x:hover{background:var(--surface-2);color:var(--ink);}
.auth-body{flex:1;overflow:auto;padding:14px 16px 20px;}

.auth-tabs{display:flex;gap:3px;margin-bottom:14px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:3px;}
.auth-tab{flex:1;border:none;background:transparent;color:var(--ink-2);padding:8px 8px;
  border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.18s;}
.auth-tab.active{background:var(--ink);color:var(--bg);font-weight:700;}

.auth-field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.auth-field > span{font-size:11px;color:var(--ink-3);font-weight:600;}
.auth-input{padding:10px 11px;border:1px solid var(--line);border-radius:var(--r-md);
  font-size:14px;color:var(--ink);background:var(--surface-2);font-family:inherit;width:100%;}
.auth-input:focus{border-color:var(--brand);outline:none;}
/* 密码显隐（眼睛按钮·只切 DOM type，⛔ 不触碰 value） */
.pw-wrap{position:relative;display:block;}
.pw-wrap .auth-input{padding-right:42px;}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  display:grid;place-items:center;border:none;background:none;cursor:pointer;border-radius:var(--r-sm,4px);
  color:var(--ink-3);transition:color .18s;}
.pw-eye:hover{color:var(--ink);}
.pw-eye[aria-pressed="true"]{color:var(--brand);}
.pw-eye svg{width:16px;height:16px;display:block;}
.pw-eye .ico-eye-off{display:none;}
.pw-eye[aria-pressed="true"] .ico-eye{display:none;}
.pw-eye[aria-pressed="true"] .ico-eye-off{display:block;}
.auth-consent{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--ink-2);
  line-height:1.6;margin:2px 0 12px;}
.auth-consent input{margin-top:2px;flex:none;}
.auth-consent a{color:var(--brand);}
.auth-btn{width:100%;border:1px solid var(--ink);background:var(--ink);color:var(--bg);
  border-radius:var(--r-md);padding:12px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:.18s;}
.auth-btn:hover{opacity:.9;}
.auth-btn:disabled{opacity:.5;cursor:default;}
.auth-btn.ghost{background:var(--surface-2);color:var(--ink-2);border-color:var(--line);}
.auth-msg{border-radius:var(--r-md);padding:10px 12px;font-size:12.5px;margin-bottom:12px;line-height:1.6;}
.auth-msg.err{background:var(--danger);color:#fff;font-weight:600;}
.auth-msg.ok{background:color-mix(in srgb, var(--ok) 16%, transparent);border:1px solid color-mix(in srgb, var(--ok) 40%, transparent);}
.auth-msg.info{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);}
.auth-alt{margin-top:12px;font-size:12px;color:var(--ink-3);text-align:center;line-height:1.9;}
.auth-alt a{color:var(--brand);cursor:pointer;}

/* ---- 「我的」页账号区（未登录 / 已登录 两态） ---- */
.acct-row{display:flex;align-items:center;gap:12px;padding:14px;}
.acct-avatar{width:44px;height:44px;flex:none;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:18px;}
.acct-id{flex:1;min-width:0;}
.acct-name{font-size:15px;font-weight:800;font-family:var(--font-serif);}
.acct-sub{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-count{display:flex;align-items:baseline;gap:6px;padding:0 14px 12px;}
.acct-count .n{font-family:var(--font-serif);font-size:26px;font-weight:800;color:var(--brand);line-height:1;}
.acct-count .k{font-size:11.5px;color:var(--ink-3);}
.acct-acts{display:flex;gap:8px;padding:0 14px 14px;flex-wrap:wrap;}
.acct-acts .mini-btn{background:var(--surface-2);color:var(--ink-2);border-color:var(--line);}
.acct-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:var(--r-sm);
  border:1px solid var(--line);color:var(--ink-3);}
.acct-badge.ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 45%, transparent);}
.acct-badge.warn{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 45%, transparent);}
/* ★ 261012：会员档徽标（VIP 用品牌色；正式会员沿用 .ok 绿） */
.acct-badge.vip{color:var(--brand);border-color:color-mix(in srgb, var(--brand) 55%, transparent);
  background:color-mix(in srgb, var(--brand) 10%, transparent);}