/* ============================================================
   aixx.dehua.net · 设计系统 v1.0
   深墨 + 鎏金；暗/亮双主题；移动优先
   ============================================================ */

:root {
  --gold: #d8b56b;
  --gold-2: #b8924a;
  --gold-dim: rgba(216, 181, 107, .22);
  /* 实心强调：深琥珀底 + 橙黄字。原来是亮金底 + 近黑字，白底上看对比只有 3:1，发闷 */
  --solid: #8a5c16; --solid-2: #5f3c06; --solid-hi: #a06b1b;
  --solid-fg: #fff0c8; --solid-bd: #a8761f;  /* 原 #ffd98f 在 #8a5c16 上只有 4.3:1，13px 小字不达 4.5 */
  --ink: #0a0c11;
  --ink-2: #0f1219;
  --panel: #12161f;
  --panel-2: #161b26;
  --line: rgba(216, 181, 107, .18);
  --line-soft: rgba(255, 255, 255, .07);
  --text: #e8e6e1;
  --text-2: #a9a49b;
  --text-3: #8a8378;
  --ok: #7bc48c;
  --warn: #e0a35a;
  --bad: #d97b6c;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 32px rgba(0, 0, 0, .45);
  --fs-base: 15px;
  --maxw: 1180px;
  --serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

html[data-theme="light"] {
  /* 金色当文字用时的对比度：原 #a0711a 在米白底上是 3.9:1，13px 小字达不到 4.5:1，
     实测首页/历法等 21 个页面都在这一档上。压深到 #8a5f14 后约 5.2:1，
     仍是同一支暖金，只是不再「发飘」；边框、底纹另有 --gold-dim，不受影响。 */
  --gold: #8a5f14;
  --gold-2: #6b4410;
  --gold-dim: rgba(138, 95, 20, .16);
  --solid: #8a5a16; --solid-2: #6d4608; --solid-hi: #a06b1b;
  --solid-fg: #fff0c8; --solid-bd: #8a5a12;
  --ink: #f6f4ef;
  --ink-2: #efece4;
  --panel: #ffffff;
  --panel-2: #faf8f3;
  --line: rgba(160, 113, 26, .22);
  --line-soft: rgba(0, 0, 0, .08);
  --text: #1e1b16;
  --text-2: #5b554c;
  --text-3: #6f6759;
  --ok: #2f7d43;
  --warn: #9a6417;
  --bad: #b04a38;
  --shadow: 0 6px 24px rgba(52, 40, 18, .1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(900px 500px at 12% -8%, var(--gold-dim), transparent 62%),
    radial-gradient(700px 420px at 92% 8%, rgba(120, 150, 200, .07), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-2); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }

/* ---------------- 顶部 ---------------- */
.hd {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.hd-in { display: flex; align-items: center; gap: 16px; height: 62px; }
.logo { display: flex; align-items: center; min-height: 40px; gap: 10px; font-family: var(--serif); font-size: 17px; letter-spacing: .06em; color: var(--text); white-space: nowrap; }
.logo b { color: var(--gold); font-weight: 700; }
.logo .short { display: none; }
.logo i {
  width: 26px; height: 26px; border: 1px solid var(--gold); border-radius: 7px;
  display: grid; place-items: center; font-style: normal; font-size: 13px; color: var(--gold);
}
.nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  /* 导航项原来渲染高度 35px（6px 内边距 + 21px 行高 + 边框）。
     鼠标场景 35px 能用，但平板（pointer:coarse）与触摸本上也走这条规则，
     35px 已经偏小；统一抬到 40px，顶栏只长高 5px，命中率明显好转。 */
  min-height: 40px; display: inline-flex; align-items: center;
  padding: 6px 11px; border-radius: 8px; font-size: 13.5px; color: var(--text-2);
  white-space: nowrap; border: 1px solid transparent;
}
.nav a:hover { color: var(--text); background: var(--panel-2); }
.nav a.on {
  color: var(--gold); border-color: var(--gold-dim); background: var(--gold-dim);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold);
}
.hd-tools { display: flex; gap: 8px; align-items: center; }
.icon-btn {
  /* 触控下限 40px：顶栏的字号/夜间两个按钮原来是 32px，手机上点不中；
     38px 仍差一口气，且与导航项的 40px 不齐，统一到 40。 */
  width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line-soft);
  background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center;
  font-size: 14px; transition: .18s;
}
.icon-btn:hover { color: var(--gold); border-color: var(--line); }

/* ---------------- 主场 ---------------- */
.hero { padding: 54px 0 30px; }
.hero h1 {
  font-family: var(--serif); font-size: clamp(26px, 4.4vw, 44px); line-height: 1.24;
  margin: 0 0 14px; letter-spacing: .02em; font-weight: 700;
}
.hero h1 span { color: var(--gold); }
.hero p { color: var(--text-2); max-width: 620px; margin: 0 0 22px; font-size: 15px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 12px; padding: 4px 10px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--gold); background: var(--gold-dim);
}

/* ---------------- 卡片栅格 ---------------- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.card {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 20px; transition: .2s; position: relative; overflow: hidden;
}
.card:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: var(--shadow); }
.card:hover .card-t { color: var(--gold); }
.card-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.card-ico {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--gold-dim); color: var(--gold);
  display: grid; place-items: center; font-family: var(--serif); font-size: 16px;
}
/* 层级：h2.big 27 > 卡片标题 17 > 分区标题 15.5 ≈ 正文 15 > 卡片描述 13.5 > 注 12.5 > 免责 11.5 */
.card-t { font-family: var(--serif); font-size: 17px; font-weight: 600; margin: 0; letter-spacing: .02em; line-height: 1.35; }
.card-d { color: var(--text-2); font-size: 13.5px; margin: 7px 0 0; line-height: 1.7; }
.card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tag {
  font-size: 12px; padding: 2px 8px; border-radius: 5px;
  background: var(--panel-2); color: var(--text-3); border: 1px solid var(--line-soft);
}
.lv { font-size: 12px; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--gold); }
.card-link { display: block; }
/* 卡片整体可点：原来是 <a href="javascript:;">（右键「在新标签打开」会得到一张白页，
   读屏念「链接」却没有地址）。改成 <button> 后要把浏览器默认样式收干净。 */
button.card-link {
  width: 100%; text-align: left; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
button.card-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 12px; }

/* ---------------- 无障碍基础设施 ---------------- */
/* 只给读屏看的文字：肉眼看不到，但读屏能读到、且不占布局 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* 跳到正文：平时藏起来，Tab 到时浮到左上角。
   全站可聚焦元素 33–59 个，不给这条捷径，键盘用户每换一页都要按几十次 Tab。 */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  transform: translateY(-160%);
  padding: 9px 16px; border-radius: 10px;
  background: var(--solid); color: var(--solid-fg);
  border: 1px solid var(--solid-bd);
  font-size: 13.5px; text-decoration: none;
  transition: transform .16s;
}
.skip-link:focus { transform: translateY(0); }
/* 表格里的「打开明细」：视觉沿用链接样式，但语义是按钮 */
button.lnk {
  padding: 0; border: 0; background: none;
  color: var(--gold); font: inherit; text-align: left; cursor: pointer;
}
button.lnk:hover { color: var(--gold-2); }
button.lnk:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
/* 手机上图鉴表每行只有一个 22px 高的标题可点，手指按不准。
   只在小屏把这一格撑到 40px——桌面用鼠标点 22px 没问题，不必跟着变高。 */
@media (max-width: 700px) {
  button.lnk { display: flex; align-items: center; min-height: 40px; padding-right: 6px; }
}
main#main:focus { outline: none; }

/* ---------------- 表单 ---------------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12.5px; color: var(--text-2); letter-spacing: .04em; }
.field label em { color: var(--gold); font-style: normal; margin-left: 3px; }
input, select, textarea {
  width: 100%; padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  color: var(--text); font-size: 14.5px; font-family: var(--sans); outline: none;
  transition: .16s;
}
input:focus, select, textarea:focus { border-color: var(--line); }
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
textarea { min-height: 84px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid var(--gold);
  background: linear-gradient(180deg, var(--solid), var(--solid-2));
  color: var(--solid-fg); border-color: var(--solid-bd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 10px -6px rgba(0, 0, 0, .6);
  font-weight: 600; font-size: 14.5px;
  cursor: pointer; transition: .18s; font-family: var(--sans);
}
.btn:hover {
  background: linear-gradient(180deg, var(--solid-hi), var(--solid));
  border-color: var(--solid-hi); color: #fff2d4;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--gold); }
.btn.ghost:hover {
  background: var(--solid); color: var(--solid-fg); border-color: var(--solid-bd);
}
/* .sm 只是视觉上小一号，触控高度仍守 38px 下限（弹窗底栏实测 33px，手指点不准） */
.btn.sm { padding: 7px 13px; font-size: 13px; min-height: 38px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------------- 结果区 ---------------- */
.sec { margin-bottom: 18px; }
.sec-t {
  font-family: var(--serif); font-size: 15.5px; font-weight: 600; color: var(--gold); letter-spacing: .08em;
  margin: 0 0 11px; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 9px; line-height: 1.35;
}
.sec-t::before { content: ""; width: 3px; height: 15px; background: var(--gold); border-radius: 2px; flex: 0 0 3px; }

.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kv-i { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.kv-k { font-size: 12px; color: var(--text-3); letter-spacing: .05em; }
.kv-v { font-family: var(--serif); font-size: 16.5px; color: var(--text); margin-top: 3px; word-break: break-all; line-height: 1.45; }
.kv-v small { font-size: 12px; color: var(--text-3); font-family: var(--sans); margin-left: 4px; }

.pill-list { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
  font-size: 12.5px; padding: 5px 11px; border-radius: 100px;
  background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--text-2);
}
.pill b { color: var(--gold); font-weight: 600; }
/* 浅色主题下 pill 底色是 --panel-2（米白），金色压到 --gold(#8a5f14) 在米白上仍只有 4.38:1，
   差一点点够不到正文 4.5:1。这里单独降到 --gold-2，约 6.5:1，仍是同一支暖金。
   深色主题不动：深底上 --gold-2 反而更暗，会把强调数字压没。 */
html[data-theme="light"] .pill b { color: var(--gold-2); }

table.tb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tb th, table.tb td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
table.tb th { color: var(--text-3); font-weight: 500; font-size: 12px; letter-spacing: .05em; }
table.tb tr:last-child td { border-bottom: 0; }
.tb-wrap { overflow-x: auto; }

.note {
  font-size: 12.5px; color: var(--text-3); line-height: 1.75;
  background: var(--panel-2); border-left: 2px solid var(--line); border-radius: 0 8px 8px 0;
  padding: 10px 14px; margin-top: 12px;
}
.note li { margin: 3px 0; }
.disc { font-size: 12px; color: var(--text-3); margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }

/* ---- 结果页合规底注 ----
 * 所有结果页共用一条，放在报告编号下方。字号比正文低一档但不小于 12.5px：
 * 它是「不构成专业建议」这类必须被读到的信息，不能做成视觉噪音。 */
.crit {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-soft);
  font-size: 12.5px; line-height: 1.75; color: var(--text-3);
}

/* ---- 口径页「数据与隐私」清单：左标签右说明，窄屏堆叠 ---- */
.pv-list { margin: 6px 0 0; display: grid; gap: 12px; }
.pv-list > div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; }
.pv-list dt { font-size: 12.5px; color: var(--text-3); letter-spacing: .04em; line-height: 1.7; }
.pv-list dd { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
@media (max-width: 640px) {
  .pv-list > div { grid-template-columns: 1fr; gap: 3px; }
  .pv-list dt { color: var(--text-2); font-weight: 600; }
}

/* 卦象 / 爻 */
.hex { display: grid; gap: 5px; width: 96px; }
.hex .yao { height: 8px; border-radius: 2px; background: var(--text-2); display: flex; gap: 6px; }
.hex .yao.yin::before, .hex .yao.yin::after { content: ""; flex: 1; background: var(--text-2); border-radius: 2px; }
.hex .yao.yin { background: transparent; }
.hex .yao.mv { background: var(--gold); }
.hex .yao.mv::before, .hex .yao.mv::after { background: var(--gold); }
.hex-sym { font-size: 40px; line-height: 1; color: var(--gold); }

/* 抽牌 */
.drawn { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.dcard {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; position: relative;
}
.dcard.rev { border-style: dashed; }
.dcard .pos { font-size: 12px; color: var(--gold); letter-spacing: .08em; }
.dcard .nm { font-family: var(--serif); font-size: 15px; margin: 4px 0 2px; }
.dcard .en { font-size: 12px; color: var(--text-3); }
.dcard .kw { font-size: 12px; color: var(--text-2); margin-top: 7px; }
.dcard .ori { position: absolute; top: 10px; right: 10px; font-size: 12px; color: var(--text-3); }
.dcard .rd {
  font-size: 12px; color: var(--text-2); line-height: 1.75; margin-top: 9px;
  padding-top: 9px; border-top: 1px dashed var(--line-soft); white-space: pre-line;
}

/* 卢恩符库 */
.rgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.rune {
  display: grid; gap: 2px; justify-items: center; padding: 12px 8px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--sans); transition: .18s;
}
.rune:hover { border-color: var(--gold); transform: translateY(-2px); }
.rune .g { font-size: 24px; line-height: 1.15; color: var(--gold); }
.rune .n { font-family: var(--serif); font-size: 13.5px; }
.rune .e { font-size: 12px; color: var(--text-3); }
.rpanel {
  margin-top: 16px; padding: 16px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--line);
}

/* 签 */
.poem {
  font-family: var(--serif); font-size: 17px; line-height: 2.1; text-align: center;
  letter-spacing: .1em; color: var(--text); padding: 16px 0; white-space: pre-line;
}
.seal {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--gold); font-family: var(--serif); font-size: 15px;
}

/* 加载与空态 */
.loading { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 13.5px; padding: 22px 0; }
.spin { width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.empty { text-align: center; color: var(--text-3); padding: 46px 0; font-size: 14px; }
.err { color: var(--bad); font-size: 13.5px; padding: 12px 14px; border: 1px solid rgba(217, 123, 108, .3); border-radius: var(--radius-sm); background: rgba(217, 123, 108, .08); }

/* 分区标题 */
/* 页面主标题（h1.big）：全站唯一口径 = clamp(20,3vw,28) × 字号档。
   禁止再单独写 .big 的字号（历史上被 26px 硬值覆盖过，三档失效）。 */
.big {
  font-family: var(--serif);
  font-size: calc(clamp(20px, 3vw, 27px) * var(--fs-scale, 1));
  margin: 0 0 7px; letter-spacing: .02em; line-height: 1.28;
  font-weight: 600;
}
.sub { color: var(--text-2); font-size: 14px; margin: 0 0 22px; line-height: 1.72; max-width: 76ch; }
.page { padding: 30px 0 60px; min-height: 62vh; }
/* 面包屑：比副标题再低一级，但要看得见 */
.crumb { font-size: 13px; color: var(--text-3); margin-bottom: 14px; letter-spacing: .02em; }
.crumb a { color: var(--text-3); }
.crumb a:hover { color: var(--gold); }

.split { display: grid; gap: 16px; grid-template-columns: 360px 1fr; align-items: start; }
.split > .card { position: sticky; top: 78px; }

footer.ft { border-top: 1px solid var(--line-soft); padding: 26px 0 40px; color: var(--text-3); font-size: 12.5px; }
footer.ft a { color: var(--text-3); }
footer.ft .row { justify-content: space-between; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .split > .card { position: static; }
}
@media (max-width: 720px) {
  .m-hide { display: none !important; }
  /* backdrop-filter 会为 fixed 子元素创建包含块，移动端必须去掉，否则底部导航会被锁在顶栏内 */
  .hd { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ink); }
  :root { --fs-base: 14.5px; }
  .wrap { padding: 0 14px; }
  .hd-in { height: 56px; gap: 10px; }
  .logo { font-size: 15px; }
  .logo span.long { display: none; }
  .logo .short { display: inline; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--ink) 94%, transparent); border-top: 1px solid var(--line-soft);
    backdrop-filter: blur(14px); z-index: 50; justify-content: space-around; gap: 0; }
  .nav a { font-size: 12px; padding: 6px 8px; }
  .hero { padding: 30px 0 20px; }
  .grid, .grid-2 { grid-template-columns: 1fr; gap: 11px; }
  .card { padding: 15px; }
  .page { padding: 20px 0 78px; }
  .kv { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .drawn { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .poem { font-size: 15.5px; letter-spacing: .06em; }
  footer.ft { padding-bottom: 76px; }
}
@media (max-width: 390px) {
  .card-h { gap: 9px; }
  .kv-i { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   v1.1 · 白天默认 / 字号三档 / 推演动效 / 结果弹窗 / 报告版式
   ============================================================ */

/* ---- 字号三档：--fs-scale 只放大文字，不改变版面栅格 ---- */
html[data-fs="md"] { --fs-scale: 1; }
html[data-fs="lg"] { --fs-scale: 1.1; }
html[data-fs="xl"] { --fs-scale: 1.22; }

html[data-fs] .sub { font-size: calc(14px * var(--fs-scale, 1)); }
html[data-fs] .card-d { font-size: calc(13.5px * var(--fs-scale, 1)); }
html[data-fs] .card-t { font-size: calc(17px * var(--fs-scale)); }
html[data-fs] .sec-t { font-size: calc(15.5px * var(--fs-scale, 1)); }
html[data-fs] .big { font-size: calc(clamp(20px, 3vw, 27px) * var(--fs-scale, 1)); }
html[data-fs] .note { font-size: calc(12.5px * var(--fs-scale, 1)); }
html[data-fs] .disc { font-size: calc(12px * var(--fs-scale, 1)); }
html[data-fs] .kv-k { font-size: calc(12px * var(--fs-scale, 1)); }
html[data-fs] .kv-v { font-size: calc(16.5px * var(--fs-scale)); }
html[data-fs] .field label { font-size: calc(12.5px * var(--fs-scale, 1)); }
html[data-fs] .pill { font-size: calc(12.5px * var(--fs-scale, 1)); }
html[data-fs] .tb th, html[data-fs] .tb td { font-size: calc(13px * var(--fs-scale, 1)); }
html[data-fs] .dcard .nm { font-size: calc(15px * var(--fs-scale)); }
html[data-fs] .dcard .kw { font-size: calc(12px * var(--fs-scale)); }
html[data-fs] .dcard .rd { font-size: calc(12px * var(--fs-scale)); }
html[data-fs] .poem { font-size: calc(17px * var(--fs-scale)); }
html[data-fs] .hero p { font-size: calc(15px * var(--fs-scale)); }
html[data-fs] .tag { font-size: calc(12px * var(--fs-scale)); }
html[data-fs] .rune .n { font-size: calc(13.5px * var(--fs-scale, 1)); }
html[data-fs] input, html[data-fs] select, html[data-fs] textarea { font-size: calc(14.5px * var(--fs-scale)); }

.fs-btn { font-size: 12px; letter-spacing: -.02em; font-family: var(--sans); }

/* ---- 上次结果条 ---- */
.lastbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px auto 0; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--gold-dim); border: 1px solid var(--line);
  font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--text-2);
}
.lastbar b { color: var(--gold); font-weight: 600; }
.lastbar .sp { flex: 1; }

/* ---- 推演动效层 ---- */
.fx {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fxIn .18s ease-out both;
}
@keyframes fxIn { from { opacity: 0 } to { opacity: 1 } }
.fx-box {
  width: min(400px, 86vw); padding: 28px 26px 22px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  text-align: center;
}
.fx-ring { width: 74px; height: 74px; margin: 0 auto 16px; position: relative; }
.fx-ring svg { width: 100%; height: 100%; display: block; }
.fx-ring .spin-a { transform-origin: 50% 50%; animation: rot 2.6s linear infinite; }
.fx-ring .spin-b { transform-origin: 50% 50%; animation: rot 1.7s linear infinite reverse; }
.fx-ring .glyph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 26px; color: var(--gold);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes rot { to { transform: rotate(360deg) } }
@keyframes pulse { 0%, 100% { opacity: .55; transform: scale(.96) } 50% { opacity: 1; transform: scale(1.04) } }
.fx-t { font-family: var(--serif); font-size: calc(16px * var(--fs-scale)); margin: 0 0 4px; letter-spacing: .04em; }
.fx-s { font-size: calc(12px * var(--fs-scale)); color: var(--text-3); margin: 0 0 16px; }
.fx-steps { display: grid; gap: 7px; text-align: left; margin: 0 0 16px; }
.fx-step {
  display: flex; align-items: center; gap: 8px;
  font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--text-3);
  transition: color .3s;
}
.fx-step .dot {
  width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%;
  border: 1px solid var(--line-soft); display: grid; place-items: center;
  font-size: 9px; color: transparent; transition: .3s;
}
.fx-step.done { color: var(--text-2); }
.fx-step.done .dot { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }
.fx-step.now { color: var(--text); }
.fx-step.now .dot { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
.fx-bar { height: 4px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.fx-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width .16s linear; }

/* ---- 结果弹窗 ---- */
.ovl {
  position: fixed; inset: 0; z-index: 130; display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px 24px; overflow-y: auto;
  background: rgba(8, 9, 12, .5);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  animation: fxIn .16s ease-out both;
}
html[data-theme="light"] .ovl { background: rgba(40, 34, 22, .28); }
.sheet {
  width: min(880px, 100%); margin: auto; border-radius: 18px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  animation: shIn .32s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes shIn { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } }
.sh-hd {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft); background: var(--panel-2);
  position: sticky; top: 0; z-index: 2;
}
.sh-hd .t { font-family: var(--serif); font-size: calc(15px * var(--fs-scale)); letter-spacing: .04em; }
.sh-hd .id { font-size: 12px; color: var(--text-3); font-family: ui-monospace, monospace; }
.sh-hd .x {
  margin-left: auto; width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-soft); background: transparent; color: var(--text-2);
  font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.sh-hd .x:hover { color: var(--gold); border-color: var(--line); }
.sh-bd { padding: 20px; }

/* 取名：主角大字 + 逐字拆解 */
.hero-name { text-align: center; padding: 6px 0 14px; }
.hero-name .nm {
  font-family: var(--serif); font-size: calc(60px * var(--fs-scale)); line-height: 1.15;
  letter-spacing: .12em; color: var(--text); font-weight: 700;
}
.hero-name .py { font-size: calc(13px * var(--fs-scale, 1)); color: var(--text-3); letter-spacing: .28em; margin-top: 6px; text-transform: uppercase; }
/* 繁体写法：贴在名字大字下面，比拼音重一档、比名字轻一档 */
.hero-name .hant-nm {
  margin-top: 8px; display: inline-flex; align-items: baseline; gap: 8px;
  padding: 4px 14px; border-radius: 100px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.hero-name .hant-nm .k {
  font-size: calc(12px * var(--fs-scale, 1)); color: var(--text-3);
  letter-spacing: .22em; text-transform: uppercase;
}
.hero-name .hant-nm .v {
  font-family: var(--serif); font-size: calc(22px * var(--fs-scale));
  color: var(--gold); letter-spacing: .14em; font-weight: 600; line-height: 1.4;
}
.hero-name .hant-nm .t {
  font-size: calc(12px * var(--fs-scale, 1)); color: var(--text-3); letter-spacing: .08em;
  padding: 1px 7px; border-radius: 100px; border: 1px solid var(--line-soft);
}
/* 逐字卡里的繁体行：本体与释义区分色阶，别把它做成第二行释义 */
.ch dd.hant-dd { color: var(--gold); }
.ch dd.hant-dd em { font-style: normal; color: var(--text-3); font-size: .88em; margin-left: 2px; }
.ch .hant-sub {
  margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line-soft);
  font-size: calc(12px * var(--fs-scale, 1)); color: var(--text-3); line-height: 1.6; text-align: left;
}
td.hant-cell { font-family: var(--serif); font-size: calc(17px * var(--fs-scale)); color: var(--gold); letter-spacing: .06em; }
.hant-warn { color: var(--warn); }
em.wx-diff { font-style: normal; color: var(--text-3); font-size: .88em; }
.hero-name .sc { margin-top: 10px; }
.hero-name .sc span {
  display: inline-block; padding: 3px 11px; border-radius: 100px; margin: 0 4px;
  background: var(--gold-dim); border: 1px solid var(--line); color: var(--gold);
  font-size: calc(12px * var(--fs-scale));
}
.chars { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 18px; }
.ch {
  width: 164px; border-radius: 14px; padding: 15px 13px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  animation: chIn .42s cubic-bezier(.22, 1, .36, 1) both;
}
.ch:nth-child(2) { animation-delay: .07s; }
.ch:nth-child(3) { animation-delay: .14s; }
@keyframes chIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.ch .g { font-family: var(--serif); font-size: calc(40px * var(--fs-scale)); line-height: 1.1; color: var(--gold); }
.ch .p { font-size: 12px; color: var(--text-3); letter-spacing: .16em; margin-top: 4px; text-transform: uppercase; }
.ch dl { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12px; text-align: left; }
.ch dt { color: var(--text-3); white-space: nowrap; }
/* 释义常是整句（如「三金相叠，多用于商号，取积聚之义」），改独占整行，避免被挤成竖条。
   注意：原来写死的是第 3 行，那是「只有三行」时的写法；后来逐字卡加了「繁体」一行，
   第 3 行变成繁体，结果繁体的值被拉到整行、释义反而挤在窄列里。改成认最后一行。 */
.ch dd { margin: 0; color: var(--text-2); text-align: left; }
.ch dl dt:last-of-type, .ch dl dd:last-of-type { grid-column: 1 / -1; }
.ch dl dt:last-of-type { margin-top: 3px; }

/* 四柱 / 五行 */
.pillars { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 4px 0 16px; }
.pl {
  width: 104px; padding: 12px 8px; text-align: center; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  animation: chIn .4s cubic-bezier(.22, 1, .36, 1) both;
}
.pl .lb { font-size: 12px; color: var(--text-3); letter-spacing: .1em; }
.pl .gz { font-family: var(--serif); font-size: calc(28px * var(--fs-scale)); line-height: 1.3; color: var(--gold); writing-mode: vertical-rl; margin: 6px auto 0; height: 4.1em; letter-spacing: .06em; }
.wx { display: grid; gap: 8px; margin: 0 0 16px; }
.wx-row { display: grid; grid-template-columns: 44px 1fr 42px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.wx-row .bar { height: 7px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.wx-row .bar i { display: block; height: 100%; border-radius: 4px; background: var(--gold); width: 0; transition: width .7s cubic-bezier(.22, 1, .36, 1); }

/* 抽到的牌 / 符 */
.drawn2 { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 4px 0 16px; }
.dc2 {
  width: 148px; padding: 14px 12px; border-radius: 12px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  animation: chIn .4s cubic-bezier(.22, 1, .36, 1) both;
}
.dc2 .pos { font-size: 12px; color: var(--gold); letter-spacing: .1em; }
.dc2 .g { font-family: var(--serif); font-size: calc(22px * var(--fs-scale)); margin: 6px 0 2px; }
.dc2 .en { font-size: 12px; color: var(--text-3); }
.dc2 .kw { font-size: 12px; color: var(--text-2); margin-top: 6px; }

/* 卦象 */
.gua { text-align: center; margin: 2px 0 12px; }
.gua .sym { font-size: calc(64px * var(--fs-scale)); color: var(--gold); line-height: 1; }
.gua .nm { font-family: var(--serif); font-size: calc(20px * var(--fs-scale)); margin-top: 6px; }

/* 签诗 */
/* 签条：宣纸签面 + 左侧朱漆签标 + 顶部穿绳与红穗。
   真签是细长的，但签诗要能横着读，所以取「签平铺在桌上」的样子：
   左边那条朱漆是签的脊，正文才是签面。 */
.qian-hero {
  position: relative;
  text-align: center;
  padding: 28px 22px 22px 48px;
  max-width: 620px; margin: 0 auto;
  border-radius: 3px 12px 12px 3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, var(--q-fiber) 6px 6.6px),
    radial-gradient(122% 100% at 20% 0%, var(--q-paper-hi), var(--q-paper) 74%);
  border: 1px solid var(--q-edge);
  box-shadow:
    0 18px 36px -26px rgba(0, 0, 0, .58),
    0 2px 6px -4px rgba(0, 0, 0, .30),
    inset 0 0 48px -24px var(--q-shade);
  overflow: hidden;
}
/* 左侧朱漆签标 */
.qian-hero::before {
  content: '签';
  position: absolute; left: 0; top: 0; bottom: 0; width: 32px;
  display: grid; place-items: center;
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--serif); font-size: 17px; letter-spacing: .34em;
  color: var(--q-seal-ink);
  background: linear-gradient(180deg, var(--q-seal-hi), var(--q-seal) 58%, var(--q-seal-lo));
  border-right: 1px solid rgba(0, 0, 0, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset -3px 0 8px -4px rgba(0, 0, 0, .45);
}
/* 一条穿绳自顶而下的红穗 */
.qian-cord {
  position: absolute; left: 13px; top: 0; width: 5px; height: 30px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, var(--q-cord-hi), var(--q-cord));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 3px 6px -3px rgba(0, 0, 0, .4);
}
/* 绳头铜扣 */
.qian-cord::after {
  content: ''; position: absolute; left: -2.5px; bottom: -8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--cp-brass-2), var(--cp-brass-1) 62%, var(--cp-brass-3));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
:root {
  --q-paper-hi: #2b2318; --q-paper: #1e1811;
  --q-fiber: rgba(255, 255, 255, .020);
  --q-edge: rgba(216, 181, 107, .26);
  --q-shade: rgba(0, 0, 0, .60);
  --q-seal: #b8412f; --q-seal-hi: #d0573f; --q-seal-lo: #8e2c1e;
  --q-seal-ink: #fdf6e6;
  --q-cord: #a8331f; --q-cord-hi: #d05641;
}
html[data-theme="light"] {
  --q-paper-hi: #fdf8e9; --q-paper: #f3e8ce;
  --q-fiber: rgba(120, 88, 40, .030);
  --q-edge: rgba(74, 52, 16, .20);
  --q-shade: rgba(74, 52, 16, .30);
  --q-seal: #a83228; --q-seal-hi: #c04332; --q-seal-lo: #83241b;
  --q-seal-ink: #fdf6e6;
  --q-cord: #9c2d1c; --q-cord-hi: #c04a34;
}
.qian-hero .lv {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px;
  border-radius: 3px; font-family: var(--serif); font-size: 16px; letter-spacing: .08em;
  background: transparent; color: var(--q-seal);
  border: 1.5px solid var(--q-seal);
  box-shadow: inset 0 0 0 2px var(--q-paper-hi);
}
/* 上上/上：唯一需要强调的档，用淡金；中/下保持中性——四档全染红既无区分又扎眼 */
.qian-hero .lv.up { background: var(--q-seal); color: var(--q-seal-ink); border-color: var(--q-seal); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.qian-hero .ti { font-family: var(--serif); font-size: calc(19px * var(--fs-scale)); margin: 10px 0 2px; }
.qian-hero .qian-for { font-size: calc(12px * var(--fs-scale)); color: var(--text-3); letter-spacing: .06em; margin-bottom: 4px; }
/* 签条上的关键词用描边胶囊，白底贴在宣纸上像贴纸 */
.qian-hero .pill {
  background: transparent; border: 1px solid var(--q-edge); color: var(--q-seal);
  box-shadow: none;
}
.qian-hero .poem {
  font-family: var(--serif); font-size: calc(23px * var(--fs-scale)); line-height: 2.05;
  letter-spacing: .18em; white-space: pre-line; margin: 16px 0 10px;
  color: var(--text);
}
/* 字号档位的通用规则是 html[data-fs] .poem（17px），比 .qian-hero .poem 多一个属性选择器，
   会把签诗压回 17px；签条上签诗是主角，得用同级选择器再抬回来。 */
html[data-fs] .qian-hero .poem { font-size: calc(23px * var(--fs-scale)); line-height: 2.05; }

/* 摘要 */
.sh-sum { font-size: calc(14px * var(--fs-scale, 1)); line-height: 1.95; margin: 0 0 4px; color: var(--text); }
.sh-block { margin-top: 18px; }
.sh-block > h4 {
  font-family: var(--serif); font-size: calc(13px * var(--fs-scale, 1)); font-weight: 600;
  letter-spacing: .06em; margin: 0 0 10px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.sh-block > h4::before { content: ""; width: 3px; height: 12px; background: var(--gold); border-radius: 2px; }
details.raw { margin-top: 16px; }
details.raw > summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-3); list-style: none;
  padding: 8px 0; border-top: 1px dashed var(--line-soft);
}
details.raw > summary::-webkit-details-marker { display: none; }
details.raw > summary:hover { color: var(--gold); }

/* 报告工具条 */
.sh-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--line-soft); background: var(--panel-2);
}
.sh-bar .sp { flex: 1; }
.sh-bar .bar-grp { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sh-bar .btn {
  padding: 7px 13px; font-size: 12.5px;
  /* 弹窗底栏是触屏最常按的一排，手机上也走 38px 下限，避免点偏 */
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
}
.chip-note { font-size: 12px; color: var(--text-3); }

@media (max-width: 720px) {
  .ovl { padding: 16px 10px env(safe-area-inset-bottom); align-items: flex-start; }
  .sheet { border-radius: 16px; }
  .sh-bd { padding: 16px 14px; }
  .hero-name .nm { font-size: calc(46px * var(--fs-scale)); }
  .chars { gap: 10px; }
  .ch { width: calc(50% - 5px); min-width: 118px; }
  .drawn2 { gap: 8px; }
  .dc2 { width: calc(50% - 4px); min-width: 132px; }
  .pl { width: 82px; }
  .pl .gz { font-size: calc(23px * var(--fs-scale)); }
  .sh-bar .btn { flex: 1; min-width: 72px; text-align: center; justify-content: center; }
  /* 移动端底栏：第一排 4 个导出等分，第二排 PNG / 独立页 / 关闭 等分 */
  .sh-bar { padding: 9px 12px; gap: 6px; }
  .sh-bar .bar-grp { flex: 1 0 100%; gap: 6px; order: -1; flex-wrap: nowrap; }
  .sh-bar .bar-grp .btn { flex: 1 1 0; min-width: 0; padding: 8px 0; font-size: 12px; }
  .sh-bar > .btn { flex: 1 1 0; min-width: 0; padding: 8px 0; font-size: 12px; }
  .sh-bar .sp { display: none; }
}

/* ---- 打印（弹窗内 Cmd+P 只要报告本体） ---- */
@media print {
  .hd, .ft, .nav, .lastbar, .sh-bar, .ovl::before { display: none !important; }
  .ovl { position: static; background: #fff; padding: 0; overflow: visible; backdrop-filter: none; }
  .sheet { box-shadow: none; border: none; width: 100%; max-width: none; }
  .sh-hd { position: static; background: #fff; }
  .sh-hd .x { display: none; }
  body { background: #fff; color: #111; }
  .ch, .pl, .dc2 { break-inside: avoid; }
}

/* ---- 轻提示 ---- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 210;
  max-width: 86vw; padding: 10px 16px; border-radius: 10px; cursor: pointer;
  background: var(--bad); color: #fff; font-size: calc(13px * var(--fs-scale, 1));
  box-shadow: var(--shadow); animation: shIn .24s cubic-bezier(.22, 1, .36, 1) both;
}

/* 姓氏字未收录时的占位说明 */
.ch .sx { margin-top: 10px; font-size: 12px; color: var(--text-3); line-height: 1.6; }

/* 正文字号跟随档位（多数正文节点继承 body） */
html[data-fs] body { font-size: calc(var(--fs-base) * var(--fs-scale)); }

/* ============================================================
   v1.1.1 · 美化层：右列说明卡 / 焦点可见性
   ============================================================ */

/* ---- 未出结果时的右列说明卡（填补空白，替代 739px 矮页） ---- */
.intro {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px 22px;
  background:
    radial-gradient(120% 100% at 100% 0%, var(--gold-dim) 0%, transparent 58%),
    var(--panel-2);
  min-height: 380px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.intro::after {
  content: ""; position: absolute; right: -40px; bottom: -60px;
  width: 190px; height: 190px; border-radius: 50%;
  border: 1px solid var(--line); opacity: .5; pointer-events: none;
}

.intro-h { display: flex; gap: 13px; align-items: center; margin-bottom: 22px; }
.intro-ico {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: var(--gold-dim); border: 1px solid var(--line);
  color: var(--gold); font-family: var(--serif); font-size: calc(20px * var(--fs-scale));
  line-height: 1; padding-bottom: 1px;
}
.intro-t {
  font-family: var(--serif); font-size: calc(17px * var(--fs-scale));
  font-weight: 600; letter-spacing: .04em; line-height: 1.3;
}
.intro-tag {
  font-size: calc(12px * var(--fs-scale)); color: var(--text-3);
  letter-spacing: .1em; margin-top: 4px;
}

.intro-sec { margin-bottom: 20px; }
.intro-lb {
  font-size: calc(12px * var(--fs-scale, 1)); color: var(--gold);
  letter-spacing: .14em; margin-bottom: 9px;
}
.intro-list {
  margin: 0; padding: 0; list-style: none;
  font-size: calc(13px * var(--fs-scale, 1)); color: var(--text-2); line-height: 1.5;
}
.intro-list li {
  position: relative; padding-left: 15px; margin-bottom: 7px;
}
.intro-list li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-2); opacity: .75;
}

.intro-flow { display: flex; flex-wrap: wrap; gap: 7px; row-gap: 8px; }
.intro-flow span {
  font-size: calc(12px * var(--fs-scale, 1)); color: var(--text-2);
  padding: 4px 10px; border-radius: 100px;
  background: var(--panel); border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.intro-flow span + span::before {
  content: "→"; color: var(--text-3); margin-right: 7px; font-size: .92em;
}

.intro-note {
  margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--line-soft);
  font-size: calc(12px * var(--fs-scale, 1)); color: var(--text-3); line-height: 1.85;
}

@media (max-width: 900px) {
  .intro { min-height: 0; padding: 20px 18px; }
  .intro::after { display: none; }
}

/* ---- 键盘焦点可见（此前只有 hover 态，键盘操作无反馈） ---- */
.btn:focus-visible, .nav a:focus-visible, .card a:focus-visible,
.chip:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-dim);
  outline-offset: 1px;
  border-color: var(--gold);
}

/* ---- 页脚吸底：页面短于视口时把页脚压到底部，避免下方留白带 ---- */
#app { min-height: 100vh; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
/* 路由视图现在包在 <main> 里（读屏要靠它认正文），所以「撑满剩余高度」要从
   原来的 .page 挪到 main 上——否则内容少的页面页脚会浮在半空。 */
.app-shell > main { flex: 1 0 auto; }
.app-shell > .ft { margin-top: auto; }

/* ---- 空态卡（报告存档缺编号 / 读取失败） ---- */
.empty {
  max-width: 620px; margin: 10px auto 0; text-align: center;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background:
    radial-gradient(90% 120% at 50% 0%, var(--gold-dim) 0%, transparent 62%),
    var(--panel-2);
  padding: 44px 28px 38px;
}
.empty-ico {
  width: 56px; height: 56px; margin: 0 auto 18px; display: grid; place-items: center;
  border-radius: 16px; border: 1px solid var(--line); background: var(--panel);
  color: var(--gold); font-family: var(--serif);
  font-size: calc(24px * var(--fs-scale)); line-height: 1; padding-bottom: 2px;
}
.empty-t {
  margin: 0 0 12px; font-family: var(--serif); font-weight: 600;
  font-size: calc(19px * var(--fs-scale)); letter-spacing: .04em;
}
.empty-p {
  margin: 0 auto; max-width: 460px; color: var(--text-2); line-height: 1.95;
  font-size: calc(13.5px * var(--fs-scale, 1));
}
.empty-row {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px;
}
.empty-row .btn { text-decoration: none; }
@media (max-width: 720px) {
  .empty { padding: 32px 18px 28px; }
  .empty-row .btn { flex: 1 1 auto; justify-content: center; text-align: center; min-width: 96px; }
}

/* ---- 移动端底部导航「更多」与全模块面板 ----
 * 原来是 ≤720 才切「更多」，结果 721–900 的平板段把 17 个导航项全塞进一行，
 * .nav 要横向拖才能看到后面的模块 —— 没人会发现。所以平板段一并收进「更多」。 */
/* ---- 导航溢出与「更多」面板 ----
 * 断点史：原来 ≤720 才切「更多」，721–900 收进「更多」，901–1500 之间导航照样溢出；
 * 而 .nav 的横向滚动条是隐藏的，鼠标根本推不动 —— 实测 1440 宽下「数据集 / 牌库 / 口径」
 * 三项落在屏幕外，1280 宽再多丢一项，1024 宽连「取名」都点不到。
 * 所以三处一起改：
 *   ① 「更多」按钮从 .nav 里移出来，钉在右侧工具区，任何宽度都不会被挤走；
 *   ② 触发范围放宽到 1500px，对准导航真正需要的宽度；
 *   ③ 该区间内把导航项的字号与内边距收一档，能直接看见的项更多。 */
.nav-more {
  /* 原来撑出来只有 30px 高——比顶栏其他控件矮一截，鼠标点也有点抠。
     统一到 40px，与导航项、图标按钮对齐成一条水平线。 */
  display: none; white-space: nowrap; flex: 0 0 auto;
  min-height: 40px;
  font: inherit; font-size: 12px; font-weight: 500; line-height: 1;
  padding: 8px 11px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2);
  align-items: center;
}
.nav-more:hover { color: var(--text); border-color: var(--gold); }
@media (max-width: 1500px) {
  .nav-more { display: inline-flex; align-items: center; }
  .nav a { padding: 6px 9px; font-size: 12.5px; }
}

/* 全模块面板：默认底部抽屉（手机），≥901 改居中卡片，别在桌面铺满整屏 */
.m-menu {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end;
  background: rgba(0, 0, 0, .42); backdrop-filter: blur(3px);
  animation: mFade .18s ease both;
}
.m-menu-panel {
  width: 100%; background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow); animation: mUp .24s cubic-bezier(.22, 1, .36, 1) both;
}
.m-menu-bar { width: 40px; height: 4px; border-radius: 4px; background: var(--line-soft); margin: 2px auto 12px; }
.m-menu-h {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif); font-size: calc(15px * var(--fs-scale)); color: var(--text); margin-bottom: 14px;
}
.m-menu-x {
  background: none; border: none; color: var(--text-3); font-size: 22px; line-height: 1;
  padding: 0 4px; cursor: pointer;
}
.m-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.m-menu-grid a {
  text-align: center; padding: 12px 4px; border-radius: 10px; text-decoration: none;
  font-size: calc(13px * var(--fs-scale, 1)); color: var(--text-2);
  background: var(--panel-2); border: 1px solid var(--line-soft);
}
.m-menu-grid a.on { color: var(--gold); border-color: var(--line); background: var(--gold-dim); }
@keyframes mFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mUp { from { transform: translateY(24px) } to { transform: none } }

@media (min-width: 901px) {
  .m-menu { align-items: center; justify-content: center; }
  .m-menu-panel {
    width: min(780px, 92vw); border: 1px solid var(--line); border-radius: 18px;
    padding: 18px 22px 22px; animation: mPop .2s cubic-bezier(.22, 1, .36, 1) both;
  }
  .m-menu-bar { display: none; }
  .m-menu-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  @keyframes mPop { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } }
}
@media (min-width: 721px) and (max-width: 900px) {
  .m-hide { display: none !important; }
}

/* ============================================================
   v1.2 · 报告弹窗（不溢出 + 正文加大）/ 方言审查 / 意向识图 / 档案页
   ============================================================ */

/* ---- 弹窗：锁在视口内，内容区自己滚动 ---- */
.ovl { overflow: hidden; align-items: center; }
.sheet {
  max-height: calc(100vh - 72px); display: flex; flex-direction: column;
  overflow: hidden;
}
.sh-hd { flex: 0 0 auto; position: static; }
.sh-bd { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sh-bar { flex: 0 0 auto; }

/* ---- 正文字号加大（报告正文 ≈ 2 倍；表格适度放大以保证可读） ---- */
.sh-bd { font-size: calc(15px * 1.9 * var(--fs-scale)); line-height: 1.85; }
/* 总结段按约 50% 收小：原先 14px×1.9=26.6px 比表格(18.2px)还重，压过正文主次 */
/* .sh-sum 不只用在总结块，取名逐字拆解 / 方言判语 / 环境层解读都拿它当正文段落，
   所以基础字号保持 14px；只把 .sum-block 里的收小（见下）。 */
.sh-sum { font-size: calc(14px * 1.0 * var(--fs-scale)); line-height: 1.85; }
.sh-block > h4 { font-size: calc(13px * 1.55 * var(--fs-scale)); }
/* 「总结」是收尾说明，不是章节标题：整块压成次级信息，标题缩到约一半（20.15 → 10.5px），
   并去掉加粗与字距，避免和「现状判读」「行动建议」这些正文章节抢层级。
   选择器必须写成 .sh-block.sum-block 才压得住上面的 .sh-block > h4。 */
/* 全站总结统一标准：标题 24px、正文 20px（标准字号档下的绝对值，换档按 --fs-scale 等比）。
   弹窗 / 报告 / 页面级 / 相学四处共用这一组数，改这里就是改全站。 */
.sh-block.sum-block > h4 {
  font-size: calc(24px * var(--fs-scale));
  font-weight: 600; letter-spacing: .05em; line-height: 1.32;
  color: var(--gold); opacity: 1;
}
.sum-block .sh-sum, .sum-block > p {
  font-size: calc(20px * 1.0 * var(--fs-scale));
  line-height: 1.8; color: var(--text);
}
.sh-bd .tb { font-size: calc(13.5px * 1.35 * var(--fs-scale)); }
.sh-bd .tb th { font-size: calc(12px * 1.3 * var(--fs-scale)); }
.sh-bd .tb th, .sh-bd .tb td { padding: 10px 12px; }
.sh-bd .pill { font-size: calc(12.5px * 1.2 * var(--fs-scale)); }
.sh-bd .ch .g { font-size: calc(40px * 1.15 * var(--fs-scale)); }
.sh-bd .hero-name .nm { font-size: calc(60px * 1.1 * var(--fs-scale)); }
.h4x {
  font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--gold);
  border: 1px solid var(--line); border-radius: 100px; padding: 1px 8px;
}
.sum-block .sh-sum { margin-top: 2px; }

@media (max-width: 720px) {
  .sheet { max-height: calc(100vh - 18px); border-radius: 14px; }
  .sh-bd { font-size: calc(15px * 1.5 * var(--fs-scale)); }
  .sum-block .sh-sum, .sum-block > p { font-size: calc(20px * 1.0 * var(--fs-scale)); }
  .sh-block.sum-block > h4 { font-size: calc(24px * var(--fs-scale)); }
  .sh-bd .tb { font-size: 15px; }
  .sh-bd .tb th { font-size: 13px; }
}

/* ---- 方言审查 ---- */
.dl-chip { color: var(--gold); border-color: var(--line) !important; }
.dl-chip.v-not-recommended { color: var(--bad); border-color: rgba(217, 123, 108, .5) !important; }
.dl-chip.v-risky { color: var(--warn); }

.dl-top { display: flex; gap: 18px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.dl-score {
  flex: 0 0 auto; width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 2px;
  border: 2px solid var(--gold); background: var(--gold-dim); color: var(--gold);
}
.dl-score b { font-family: var(--serif); font-size: calc(34px * var(--fs-scale)); line-height: 1; }
.dl-score span { font-size: 12px; letter-spacing: .1em; color: var(--text-3); }
.dl-score.v-not-recommended { border-color: var(--bad); background: rgba(217, 123, 108, .12); color: var(--bad); }
.dl-score.v-risky { border-color: var(--warn); background: rgba(224, 163, 90, .12); color: var(--warn); }
.dl-say { flex: 1 1 240px; min-width: 0; }
.dl-verdict { font-family: var(--serif); font-size: calc(16px * var(--fs-scale)); line-height: 1.6; }
.dl-meta { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.8; }
.dl-meta b { color: var(--text); font-weight: 600; }
.dl-ai { font-size: 12px; color: var(--text-3); margin-top: 6px; }

.risks { margin-top: 14px; display: grid; gap: 8px; }
.risk {
  font-size: 13px; line-height: 1.75; color: var(--text-2);
  background: rgba(217, 123, 108, .07); border-left: 2px solid var(--bad);
  border-radius: 0 8px 8px 0; padding: 8px 12px;
}
.risk .rk-t {
  color: var(--bad); font-size: 12px; margin-right: 8px; letter-spacing: .06em;
  border: 1px solid rgba(217, 123, 108, .35); border-radius: 4px; padding: 1px 6px;
}
.risk em { font-style: normal; color: var(--text-3); margin-left: 8px; font-size: 12px; }

/* ---- 意向：文字 / 图片 / 识读结果 ---- */
.hint-line { font-size: 12px; color: var(--text-3); line-height: 1.7; margin-top: 6px; }
.up-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.up-btn {
  display: inline-block; cursor: pointer; font-size: 12.5px; padding: 8px 14px;
  border-radius: 9px; border: 1px dashed var(--line); color: var(--gold); background: var(--panel-2);
}
.up-btn:hover { background: var(--gold-dim); }
.up-nm { font-size: 12px; color: var(--text-3); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-prev {
  display: block; margin-top: 10px; width: 100%; max-height: 190px; object-fit: contain;
  border-radius: 10px; border: 1px solid var(--line-soft); background: var(--panel);
}
.read-out {
  margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
}
.ro-h { font-size: 12px; color: var(--gold); letter-spacing: .06em; margin-bottom: 6px; }
.ro-h span { color: var(--text-3); margin-left: 6px; letter-spacing: 0; }
.ro-t { font-size: 12.5px; color: var(--text-2); line-height: 1.8; margin-bottom: 8px; }
.ro-w { font-size: 12px; color: var(--text-3); }

/* ---- 报告档案页 ---- */
.rep-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 14px 0 16px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.rep-bar .sp { flex: 1; }
.rep-bar .btn { text-decoration: none; }
.rep-sum { font-size: calc(15px * var(--fs-scale)); line-height: 1.95; margin: 0; }
.poem-sm { white-space: pre-line; font-family: var(--serif); line-height: 2; letter-spacing: .1em; text-align: center; color: var(--text); }
.sh-bar a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================
   求签 · 所求之事（67 项）选择器 + 按事项详析卡
   ============================================================ */
.q-picked { color: var(--gold); font-weight: 600; margin-left: 4px; }
.q-grp { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.q-g {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2);
  font-size: 12.5px; color: var(--text-2); font-family: var(--sans);
  transition: border-color .16s, color .16s, background .16s;
}
.q-g i { font-style: normal; font-family: var(--serif); font-size: 13px; color: var(--gold); }
.q-g:hover { border-color: var(--gold); color: var(--gold); }
.q-g.on { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.q-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.q-chip {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  font-size: 12.5px; color: var(--text-2); font-family: var(--sans);
  transition: border-color .16s, color .16s, background .16s;
}
.q-chip:hover { border-color: var(--gold); color: var(--gold); }
.q-chip.on { background: var(--solid); border-color: var(--solid-bd); color: var(--solid-fg); font-weight: 600; }

/* 详析卡 */
.qr-card { margin-top: 14px; }
/* 求签：骨架已出、AI 深化还在路上时的说明条。低调但看得见，不用弹窗打断 */
.qr-deep {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px; padding: 7px 10px;
  font-size: calc(12.5px * var(--fs-scale, 1));
  color: var(--text-2);
  background: var(--panel-2);
  border: 1px dashed var(--line-soft);
  border-radius: 9px;
}
.qr-deep i {
  width: 7px; height: 7px; flex: 0 0 7px;
  border-radius: 50%; background: var(--gold);
  animation: qdPulse 1.1s ease-in-out infinite;
}
@keyframes qdPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.qr-top {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
}
.qr-score {
  flex: 0 0 auto; width: 66px; height: 66px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid var(--gold); background: var(--gold-dim);
}
.qr-score b { font-family: var(--serif); font-size: 25px; line-height: 1; color: var(--gold); }
.qr-score small { font-size: 9.5px; letter-spacing: .08em; color: var(--text-3); margin-top: 4px; }
.qr-meta { min-width: 0; }
.qr-verdict { font-size: calc(15px * var(--fs-scale)); font-weight: 600; color: var(--text); }
.qr-sub { font-size: calc(12px * var(--fs-scale, 1)); color: var(--text-3); margin-top: 4px; }
.qr-dims { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.qr-p { font-size: calc(13.5px * var(--fs-scale, 1)); line-height: 1.9; color: var(--text-2); margin: 0; }
.qr-var {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.75;
}
.qr-var:last-child { border-bottom: 0; }
.qr-var b { flex: 0 0 96px; color: var(--gold); font-weight: 600; }
.qr-var span { flex: 1; min-width: 0; color: var(--text-2); }
.qr-list { margin: 0; padding-left: 20px; font-size: calc(13.5px * var(--fs-scale, 1)); line-height: 1.9; color: var(--text-2); }
.qr-list li { margin: 5px 0; }
.qr-list li::marker { color: var(--gold); }
.qr-warn li::marker { color: var(--warn); }

@media (max-width: 720px) {
  .q-grp { gap: 5px; }
  .q-g { padding: 5px 8px; font-size: 12px; }
  .q-chip { padding: 5px 10px; font-size: 12px; }
  .qr-top { gap: 10px; padding: 10px 12px; }
  .qr-score { width: 58px; height: 58px; }
  .qr-score b { font-size: 22px; }
  .qr-var { flex-direction: column; gap: 3px; }
  .qr-var b { flex: none; }
}

/* ============================================================
   生肖 · 点选属相 + 逐类解读
   ============================================================ */
.sx-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 8px 0 8px;
}
.sx-cell {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px 8px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2);
  transition: border-color .16s, background .16s, transform .12s;
}
.sx-cell:hover { border-color: var(--gold); transform: translateY(-1px); }
.sx-cell .sx-e { font-size: 22px; line-height: 1.1; color: var(--text); }
.sx-cell .sx-n { font-family: var(--serif); font-size: 15px; color: var(--text); }
.sx-cell .sx-b { font-size: 12px; color: var(--text-3); letter-spacing: .1em; }
.sx-cell.on-a, .sx-cell.on-b { border-color: var(--gold); background: var(--gold-dim); }
.sx-cell.on-a .sx-n, .sx-cell.on-b .sx-n { color: var(--gold); font-weight: 700; }
.sx-badge {
  position: absolute; top: 4px; right: 5px;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--solid-fg); background: var(--solid);
  border: 1px solid var(--solid-bd);
}
.sx-one {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 12px; margin: 4px 0 8px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  font-size: 13px; color: var(--text-2);
}
.sx-one-e { font-size: 26px; }
.sx-one-t { color: var(--text-3); font-size: 12px; }
.sx-one-s { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.sx-date { margin-top: 12px; border-top: 1px dashed var(--line-soft); padding-top: 10px; }
.sx-date > summary { cursor: pointer; font-size: 12px; color: var(--text-3); }
.sx-date > summary:hover { color: var(--gold); }
.sx-verdict { font-size: 12px; color: var(--gold); margin-left: 8px; letter-spacing: 0; font-family: var(--sans); }
.sx-det { margin-top: 8px; font-size: 12.5px; color: var(--text-3); letter-spacing: .04em; }

.sx-item {
  padding: 12px 14px; margin-top: 10px; border-radius: 12px;
  background: var(--panel-2); border-left: 3px solid var(--line);
}
.sx-item.t-smooth { border-left-color: var(--gold); }
.sx-item.t-tension { border-left-color: var(--warn); }
.sx-item.t-neutral { border-left-color: var(--text-3); }
.sx-item-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sx-item-h b { font-family: var(--serif); font-size: calc(16px * var(--fs-scale)); color: var(--gold); }
.sx-item-h span { font-size: 12px; color: var(--text-3); }
.sx-p { font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.85; color: var(--text-2); margin: 4px 0; }
.sx-p i { font-style: normal; color: var(--gold); font-size: 12px; letter-spacing: .06em; margin-right: 6px; }
.sx-adv { color: var(--text); }

@media (max-width: 720px) {
  .sx-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .sx-cell { padding: 8px 2px 6px; border-radius: 10px; }
  .sx-cell .sx-e { font-size: 19px; }
  .sx-cell .sx-n { font-size: 13.5px; }
  .sx-one { gap: 9px; padding: 9px 10px; }
}

/* 弹窗内的生肖对照头 */
.sx-hero {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 22px 0 6px; padding: 16px 8px;
  border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-soft);
}
.sx-h-side { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; }
.sx-h-side .sx-h-e { font-size: 40px; line-height: 1.05; }
.sx-h-side b { font-family: var(--serif); font-size: calc(22px * var(--fs-scale)); color: var(--text); }
.sx-h-side small { font-size: 12px; color: var(--text-3); letter-spacing: .18em; }
.sx-h-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.sx-h-mid span { font-size: calc(14px * var(--fs-scale, 1)); color: var(--gold); font-weight: 600; }
.sx-h-mid em { font-style: normal; font-size: 12px; color: var(--text-3); }
@media (max-width: 720px) {
  .sx-hero { gap: 10px; padding: 12px 6px; }
  .sx-h-side { min-width: 62px; }
  .sx-h-side .sx-h-e { font-size: 32px; }
  .sx-h-side b { font-size: calc(18px * var(--fs-scale)); }
}

/* ---- 页面内总结段（非弹窗）：左侧鎏金竖线 + 浅底块 ---- */
.pg-sum {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--panel-2);
  color: var(--text);
  font-size: calc(20px * var(--fs-scale));
  line-height: 1.8;
  text-align: justify;
}
.pg-sum-t {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: calc(24px * var(--fs-scale, 1));
  font-weight: 600; letter-spacing: .05em; line-height: 1.32;
  color: var(--gold);
}
@media (max-width: 720px) {
  .pg-sum { padding: 14px 14px; font-size: calc(20px * var(--fs-scale, 1)); line-height: 1.8; }
  .pg-sum-t { font-size: calc(24px * var(--fs-scale, 1)); margin-bottom: 8px; }
}

/* ============================================================
   取名 v2：方向切换 / 名称预算 / 完整名称 / 合规提示 / 名字评估
   ============================================================ */
/* 分段控件（方向切换） */
.seg {
  display: flex; gap: 6px; padding: 4px; margin-bottom: 14px;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 12px;
}
.seg button {
  flex: 1 1 0; min-width: 0; padding: 9px 8px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text-2); cursor: pointer;
  font-family: inherit; font-size: calc(13.5px * var(--fs-scale, 1)); font-weight: 600;
  transition: background .18s, color .18s;
}
.seg button.on { background: var(--solid); color: var(--solid-fg); }
.seg button:not(.on):hover { background: var(--line-soft); color: var(--text); }
.seg-hint { margin: 0 2px 12px; font-size: 12px; line-height: 1.75; color: var(--text-3); }

/* 名称预算 */
.bd-box { padding: 12px 13px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--panel-2); }
.bd-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bd-hd b { font-family: var(--serif); font-size: calc(13.5px * var(--fs-scale, 1)); letter-spacing: .06em; }
.bd-hd .sw {
  border: 1px solid var(--line); background: transparent; color: var(--gold);
  border-radius: 100px; padding: 2px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.bd-hd .sw.on { background: var(--gold-dim); }
.bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
.bd-grid .field { margin: 0; }
.bd-grid .field label { font-size: 12px; }
.bd-tip { margin: 9px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-3); }

/* 完整名称示例 */
.nm-full { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nm-full-i {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2);
}
.nm-full-i b { font-family: var(--serif); font-size: calc(16px * var(--fs-scale)); letter-spacing: .05em; color: var(--text); }
.nm-full-i .tagx { font-size: 12px; color: var(--gold); border: 1px solid var(--line); border-radius: 100px; padding: 1px 8px; }
.nm-full-i em { font-style: normal; font-size: 12px; color: var(--text-3); letter-spacing: .04em; }

/* 合规 / 提示条 */
.cmp-list { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.cmp-i { display: flex; gap: 9px; font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.75; color: var(--text-2); }
.cmp-i .k {
  flex: 0 0 auto; font-size: 12px; color: var(--warn); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 7px; height: 20px; line-height: 18px; white-space: nowrap;
}
.cmp-i.bad .k { color: var(--bad); }
.cmp-i.ok .k { color: var(--ok); }

/* 名字评估 */
.ev-hero { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 0 2px; }
.ev-hero .nm { font-family: var(--serif); font-size: calc(30px * var(--fs-scale)); letter-spacing: .07em; color: var(--text); line-height: 1.25; }
.ev-hero .py { font-size: calc(13px * var(--fs-scale, 1)); letter-spacing: .16em; color: var(--text-3); }
.ev-hero .sc { margin-left: auto; display: flex; align-items: baseline; gap: 6px; }
.ev-hero .sc b { font-size: calc(26px * var(--fs-scale)); color: var(--gold); font-family: var(--serif); }
.ev-hero .sc span { font-size: 12px; color: var(--text-3); }
.ev-part { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ev-part i {
  font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 100px;
  border: 1px dashed var(--line); color: var(--text-2);
}
.ev-part i b { color: var(--gold); font-style: normal; }
.nm-back {
  border: 0; background: transparent; color: var(--text-3); font-family: inherit;
  font-size: 12px; cursor: pointer; padding: 0; margin-bottom: 10px; text-decoration: underline;
}

@media (max-width: 720px) {
  .seg button { font-size: calc(13px * var(--fs-scale, 1)); padding: 8px 4px; }
  .bd-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ev-hero .nm { font-size: calc(24px * var(--fs-scale)); }
  .ev-hero .sc { margin-left: 0; }
  .nm-full-i b { font-size: calc(14.5px * var(--fs-scale)); }
}

/* ============================================================
   v1.5 · PC + 移动端全站自适应精修
   目标：① 任何视口下不出现横向溢出 ② 窄屏触控目标 ≥44px
        ③ 平板（721–900）不再按桌面压缩 ④ 超窄屏（≤480）重排
   ============================================================ */

/* ---- 全局防溢出：媒体、代码、表格、长串 ---- */
img, svg, video, canvas, iframe { max-width: 100%; }
pre, table { max-width: 100%; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 中文长串（URL、连续英文、无空格长名）不允许撑破容器 */
.nm-full-i b, .ev-part i, .cmp-i, .kv-i, .sh-sum, .pg-sum, .lede, .hint {
  overflow-wrap: anywhere; word-break: break-word;
}
/* 弹性容器内的文字列默认允许收缩，否则中文不换行会顶出父级 */
.split > *, .grid > *, .grid-2 > *, .drawn > *, .kv > * { min-width: 0; }

/* ---- 平板（721–900）：单列但给足留白，不按桌面硬压 ---- */
@media (min-width: 721px) and (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .card { padding: 20px; }
  /* 平板段导航已收进「更多」，长 logo 还留着会把「更多」挤成两行 */
  .logo { font-size: 15px; }
  .logo span.long { display: none; }
  .logo .short { display: inline; }
  .kv { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .drawn { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .seg button { min-height: 42px; }
}

/* ---- 超窄屏（≤480）：表单与卡片重排，控件不挤压 ---- */
@media (max-width: 480px) {
  .wrap { padding: 0 12px; }
  .card { padding: 13px; }
  .seg button { font-size: calc(12.5px * var(--fs-scale, 1)); padding: 10px 4px; }
  .bd-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bd-grid input, .bd-grid select { padding: 9px 8px; font-size: calc(13px * var(--fs-scale, 1)); }
  .kv { grid-template-columns: 1fr; }
  .drawn { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .ev-hero { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ev-hero .sc { margin-left: 0; }
  .ev-part i { font-size: 12px; padding: 3px 7px; }
  .nm-full-i { padding: 8px 10px; }
  .hm-grid { grid-template-columns: repeat(4, 1fr); }
  .big { font-size: calc(clamp(20px, 4.6vw, 22px) * var(--fs-scale, 1)); }
}

/* ---- 触控设备 / 窄屏：所有可点元素不小于 44px 高 ----
 * 不用 pointer:coarse 单判（部分内嵌浏览器与模拟器不上报），窄屏一并放大 */
@media (max-width: 768px), (pointer: coarse) {
  .nav a { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 8px 6px; }
  .hd .logo, .hd .icon-btn, .hd .m-hide { min-height: 44px; display: inline-flex; align-items: center; }
  .seg button, .btn, .chip, .tab { min-height: 44px; }
  /* .btn.sm 的 min-height:38px 特异性高于 .btn，上面那条压不住它，
     于是报告工具条上的 A4 PDF / 打印 / DOC / TXT 在手机上仍是 38px。这里单独提。 */
  .btn.sm { min-height: 44px; }
  /* 报告弹窗的关闭按钮：38×38 太小，拇指容易点空 */
  .sh-hd .x { min-height: 44px; min-width: 44px; }
  .cmp-i, .sh-tab { min-height: 40px; }
  /* 触控下加大点击反馈面积，避免误触相邻项 */
  .nav a + a { margin-left: 0; }
  .ft a { display: inline-block; padding: 6px 0; min-height: 34px; }
}

/* ---- v1.5 补充：说明性小字与微型控件的移动端可读性 ---- */
@media (max-width: 768px), (pointer: coarse) {
  .bd-tip, .hint-line, .intro-lb, .seg-hint { font-size: calc(12.5px * var(--fs-scale, 1)); line-height: 1.72; }
  .intro-tag { font-size: 12px; }
  /* 名称预算开关 / 微型切换按钮：加大可点面积 */
  .bd-hd .sw { min-height: 32px; padding: 4px 12px; font-size: 12px; }
  /* 面包屑与页脚链接：落到可点尺寸。
     页脚实测只有 38px 高，拇指点「报告存档」这类相邻链接容易串行点到隔壁，
     统一抬到 44（Apple HIG 下限）；面包屑不必那么高，40 足够。 */
  .crumb a, .bc a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; }
  .ft a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; }
  /* 「更多」按钮同样按触控尺寸来：手机 40（页头只有 62px 高，44 会挤），桌面 34 够用 */
  .nav-more { min-height: 40px; }
  /* 求签等选项格 */
  .q-g { min-height: 44px; }
}
@media (max-width: 768px), (pointer: coarse) {
  .q-chip, .q-g { min-height: 40px; }
  .sh-x, .ovl-x, .close-x { min-width: 36px; min-height: 36px; }
}
/* 窄屏逐字卡片：两字名撑满、三字名两行，释义不再逐字断行 */
@media (max-width: 480px) {
  .chars { gap: 9px; }
  .ch { width: calc(50% - 5px); padding: 13px 10px; }
  .ch .g { font-size: calc(35px * var(--fs-scale)); }
  .ch dl { gap: 3px 8px; font-size: 12px; }
}

/* ============================================================
   v1.6 · 92 体系（/trad）
   总览：筛选条 + 卡片网格；单项：字段表单；弹窗：kv + 四类结构块
   ============================================================ */

/* ---- 筛选条 ---- */
.tr-bar { display: grid; gap: 10px; margin: 20px 0 14px; }
.tr-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.tr-tabs button {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .02em;
  padding: 7px 13px; border-radius: 100px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--text-2);
  transition: .16s; display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
}
/* 计数徽标：原来用 --text-3，在浅色主题的米白 chip 底上只有 4.38:1，差 0.12 够不到 4.5:1。换 --text-2 后浅色约 6.4:1、深色约 7:1，两边都更清楚。 */
.tr-tabs button b { color: var(--text-2); font-weight: 600; font-size: 12px; }
.tr-tabs button:hover { border-color: var(--line); color: var(--text); }
.tr-tabs button.on {
  background: var(--solid); border-color: var(--solid-bd); color: var(--solid-fg); font-weight: 600;
}
/* 选中态 chip 上的计数：原来 66% 透明度的淡金压在实心琥珀底上，实测 4.38:1。
  换成不透明的 --solid-fg，约 5.2:1，仍然是「次要于主标签」的层次。 */
.tr-tabs button.on b { color: var(--solid-fg); }
.tr-tabs.lvt button.on { background: var(--gold-dim); color: var(--gold); border-color: var(--gold); }
.tr-search input { padding: 10px 14px; font-size: 13.5px; }

/* ---- 命中计数 ---- */
.tr-count { font-size: 12.5px; color: var(--text-3); margin: 0 0 10px; letter-spacing: .04em; }
.tr-count b { color: var(--gold); font-size: 15px; }

/* ---- 卡片网格 ---- */
.tr-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.tr-card {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 15px 16px 13px; text-decoration: none; color: inherit;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  position: relative; overflow: hidden;
}
.tr-card::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--gold); opacity: 0; transition: .2s;
}
.tr-card:hover { transform: translateY(-2px); border-color: var(--line); box-shadow: var(--shadow); }
.tr-card:hover::after { opacity: 1; }
.tr-c-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tr-c-h b { font-family: var(--serif); font-size: calc(16.5px * var(--fs-scale)); color: var(--text); letter-spacing: .02em; }
.tr-c-en { font-size: 12px; color: var(--text-3); letter-spacing: .03em; }
.tr-c-b { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---- 徽标 ---- */
.badge {
  font-size: 12px; line-height: 1.5; padding: 2px 8px; border-radius: 100px;
  border: 1px solid var(--line-soft); color: var(--text-3); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
/* 三法：唯一的主标签，用极淡金底把它跟其它徽标区分开 */
.badge.bm { color: var(--text-2); background: var(--gold-dim); border-color: transparent; }
/* 文明圈 / 实现态：中性底，不抢主标签 */
.badge.bc { color: var(--text-3); background: var(--panel-2); border-color: transparent; }
.badge.bok { color: var(--text-3); background: var(--panel-2); border-color: transparent; }
.badge.boff { color: var(--text-3); border-style: dashed; background: transparent; }
/* 五级：文字全部中性，只用一个 5px 色点表意——四色文字并排会显脏 */
.badge[class*="lv-l"]::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-3); flex: 0 0 auto;
}
.badge.lv-l0::before { background: var(--ok); }
.badge.lv-l1::before { background: var(--gold); }
.badge.lv-l2::before { background: #8f9dd0; }
.badge.lv-l3::before { background: var(--warn); }
.badge.lv-l4::before { background: transparent; box-shadow: inset 0 0 0 1px var(--text-3); }
html[data-theme="light"] .badge.lv-l2::before { background: #55679f; }
html[data-theme="light"] .badge.lv-l3::before { background: #b07a33; }

.tr-c-p {
  font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--text-2); line-height: 1.65;
  margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tr-c-f {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  padding-top: 9px; border-top: 1px dashed var(--line-soft);
  font-size: 12px; color: var(--text-3);
}
.tr-c-f .sp { flex: 1; }
.tr-c-f em { font-style: normal; color: var(--gold); }
.tr-c-f em.dim { color: var(--text-3); }

/* ---- 单项 ---- */
.tr-back { margin: 20px 0 14px; }
.tr-detail { display: grid; gap: 16px; }
.tr-d-h {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 20px 22px;
}
.tr-d-h h2 {
  margin: 0; font-family: var(--serif); font-size: calc(26px * var(--fs-scale));
  font-weight: 600; letter-spacing: .03em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.tr-d-h h2 small { font-size: 12px; color: var(--text-3); font-family: var(--sans); letter-spacing: .04em; font-weight: 400; }
.tr-d-p { margin: 12px 0 0; font-size: calc(13.5px * var(--fs-scale, 1)); color: var(--text-2); line-height: 1.8; }
.tr-d-note {
  font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.8; color: var(--text-2);
  background: var(--panel-2); border-left: 2px solid var(--warn);
  border-radius: 0 8px 8px 0; padding: 12px 16px;
}
.tr-formwrap {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 20px 22px; display: grid; gap: 14px;
}
.tr-form-t {
  font-family: var(--serif); font-size: 13px; color: var(--gold); letter-spacing: .1em;
  padding-bottom: 9px; border-bottom: 1px solid var(--line-soft);
}
.tr-hint { font-size: 12px; color: var(--text-3); margin: 2px 0 0; line-height: 1.7; }
.tr-others {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 12.5px; color: var(--text-3);
}
.tr-others-t { color: var(--text-3); letter-spacing: .06em; margin-right: 2px; }
.tr-others a {
  color: var(--text-2); text-decoration: none; padding: 4px 11px; border-radius: 100px;
  border: 1px solid var(--line-soft); background: var(--panel-2); transition: .16s;
}
.tr-others a:hover { color: var(--gold); border-color: var(--line); }

/* ---- 弹窗内 ---- */
.tr-sh-h { border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; }
.tr-sh-n {
  font-family: var(--serif); font-size: calc(23px * var(--fs-scale)); color: var(--text);
  letter-spacing: .03em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.tr-sh-n span { font-size: 12px; color: var(--text-3); font-family: var(--sans); font-weight: 400; }
.tr-sh-lede {
  font-size: calc(13.5px * var(--fs-scale, 1)); color: var(--text); line-height: 1.85;
  margin: 12px 0 0; padding: 10px 14px; background: var(--panel-2);
  border-left: 2px solid var(--gold); border-radius: 0 8px 8px 0;
}
.tr-pairs { display: grid; gap: 8px; }
.tr-p {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px;
  font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.75;
  padding-bottom: 8px; border-bottom: 1px dashed var(--line-soft);
}
.tr-p:last-child { border-bottom: 0; padding-bottom: 0; }
.tr-p .k { color: var(--gold); font-weight: 500; }
.tr-p .v { color: var(--text-2); }
.tr-list { margin: 0; padding-left: 20px; font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.85; color: var(--text-2); }
.tr-list li { margin: 4px 0; }
.tr-list.tr-dim { color: var(--text-3); font-size: calc(12.5px * var(--fs-scale, 1)); }
.tr-text { margin: 0; font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.85; color: var(--text-2); white-space: pre-line; }

/* ---- 自适应 ---- */
@media (max-width: 900px) {
  .tr-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
}
@media (max-width: 640px) {
  .tr-grid { grid-template-columns: 1fr; gap: 10px; }
  .tr-card { padding: 14px 14px 12px; }
  .tr-tabs button { font-size: 12px; padding: 7px 11px; }
  .tr-d-h, .tr-formwrap { padding: 16px 15px; }
  .tr-d-h h2 { font-size: calc(22px * var(--fs-scale)); }
  .tr-p { grid-template-columns: 1fr; gap: 2px; }
  .tr-p .k { font-size: 12px; letter-spacing: .06em; }
  .tr-search input { font-size: 16px; } /* 防 iOS 聚焦缩放 */
}
@media (max-width: 480px) {
  .tr-c-p { -webkit-line-clamp: 3; }
  .tr-tabs button { min-height: 38px; }
}

/* ---- 首页 92 体系入口 ---- */
.feat {
  display: flex; align-items: center; gap: 16px; margin: 0 0 18px;
  padding: 18px 22px; border-radius: var(--radius); text-decoration: none; color: inherit;
  background: linear-gradient(100deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line); position: relative; overflow: hidden;
  transition: border-color .18s, transform .18s;
}
.feat:hover { border-color: var(--gold); transform: translateY(-1px); }
.feat-n {
  font-family: var(--serif); font-size: calc(38px * var(--fs-scale)); line-height: 1;
  color: var(--gold); letter-spacing: -.02em; flex: 0 0 auto;
}
.feat-b { flex: 1; min-width: 0; }
.feat-t { font-family: var(--serif); font-size: calc(16px * var(--fs-scale)); color: var(--text); letter-spacing: .04em; }
.feat-d { font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--text-3); margin-top: 4px; line-height: 1.65; }
.feat-go { font-size: 12.5px; color: var(--gold); flex: 0 0 auto; }
@media (max-width: 640px) {
  .feat { gap: 12px; padding: 14px 15px; flex-wrap: wrap; }
  .feat-n { font-size: calc(30px * var(--fs-scale)); }
  .feat-b { flex-basis: calc(100% - 60px); }
  .feat-go { margin-left: auto; }
}

/* v1.6 修正：窄屏/触控下「同类体系」与筛选按钮落到 38px 可点高度 */
@media (max-width: 768px), (pointer: coarse) {
  .tr-others a { min-height: 38px; display: inline-flex; align-items: center; }
  .tr-tabs button { min-height: 38px; }
}

/* ---- 引用数据集（/refs） ---- */
.ref-list { display: grid; gap: 10px; }
.ref-i {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden; transition: border-color .18s;
}
.ref-i.on { border-color: var(--line); }
.ref-h {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; cursor: pointer; min-height: 56px;
}
.ref-h:hover { background: var(--panel-2); }
.ref-t { flex: 1; min-width: 200px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ref-t b { font-family: var(--serif); font-size: calc(15px * var(--fs-scale)); color: var(--text); font-weight: 600; }
.ref-id { font-size: 12px; color: var(--text-3); font-family: ui-monospace, Menlo, Consolas, monospace; }
.ref-m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ref-x { font-size: 12px; color: var(--gold); min-width: 30px; text-align: right; }
.ref-b { padding: 0 16px 16px; display: grid; gap: 8px; }
.ref-src { font-size: 12px; color: var(--text-3); line-height: 1.7; }
.ref-b code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--gold); }
.ref-b table.tb td { font-size: 12.5px; }
@media (max-width: 640px) {
  .ref-h { padding: 12px 13px; gap: 8px; }
  .ref-b { padding: 0 13px 13px; }
  .ref-t { min-width: 100%; }
  .ref-m { width: 100%; }
  .ref-x { margin-left: auto; }
}

/* ---- 今日入口 + 三法分区 ---- */
.tr-daily {
  margin: 0 0 16px; padding: 16px 18px; border-radius: var(--radius);
  background: linear-gradient(100deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
}
.tr-daily-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tr-daily-h b { font-family: var(--serif); font-size: calc(15px * var(--fs-scale)); color: var(--gold); letter-spacing: .08em; }
.tr-daily-h span { font-size: 12px; color: var(--text-3); font-family: ui-monospace, Menlo, Consolas, monospace; }
.tr-daily-h em { font-style: normal; font-size: 12px; color: var(--text-3); }
.tr-daily-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.tr-daily-b {
  display: grid; gap: 3px; padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  transition: .16s; font-family: var(--sans); min-height: 58px;
}
.tr-daily-b:hover { border-color: var(--gold); transform: translateY(-1px); }
.tr-daily-b b { font-family: var(--serif); font-size: calc(14px * var(--fs-scale, 1)); color: var(--text); font-weight: 600; }
.tr-daily-b em { font-style: normal; font-size: 12px; color: var(--text-3); line-height: 1.5; }

.tr-sec { margin-bottom: 18px; }
.tr-sec-h {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.tr-sec-h b { font-family: var(--serif); font-size: calc(15px * var(--fs-scale)); color: var(--text); letter-spacing: .06em; }
.tr-sec-h span { font-size: 12px; color: var(--text-3); letter-spacing: .04em; }
.tr-sec-h em { font-style: normal; font-size: 12px; color: var(--gold); margin-left: auto; }

@media (max-width: 900px) {
  .tr-daily-g { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tr-daily { padding: 14px 14px; }
  .tr-daily-g { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tr-daily-b { min-height: 64px; }
}

/* ============================================================
   v1.7 · 结果收在一页 + 长块折叠
   ============================================================ */
/* 折叠按钮 */
.tr-more {
  margin: 6px auto 0; display: block; padding: 6px 12px; cursor: pointer;
  background: transparent; border: 0; border-radius: 100px; color: var(--gold);
  font-size: 12px; font-family: var(--sans); letter-spacing: .04em;
  transition: .16s; min-height: 32px;
}
.tr-more:hover { background: var(--gold-dim); }

/* 弹窗内纵向节奏收紧：同样的内容，少滚一屏 */
.sh-bd { padding: 17px 20px; }
.sh-block { margin-top: 14px; }
.sh-block > h4 { margin-bottom: 8px; padding-bottom: 6px; }
.sh-bd .pill-list { gap: 6px; }
.sh-bd .pill { padding: 4px 10px; }
.tr-p { padding-bottom: 6px; }
.tr-pairs { gap: 6px; }
.tr-list li { margin: 3px 0; }
.ref-src + .tb-wrap, .tr-text + .tr-more { margin-top: 8px; }

@media (max-width: 640px) {
  .sh-bd { padding: 14px 13px; }
  .sh-block { margin-top: 12px; }
  .tr-more { min-height: 38px; }
}

/* 打印：折叠按钮不出现，行高更紧，表格行不跨页断开 */
@media print {
  .tr-more { display: none !important; }
  tr, .tr-p, .ch, .dc2 { page-break-inside: avoid; }
  .sh-bd { padding: 0; }
}

/* ============================================================
   v1.8 定位与环境层
   .gp-*  定位选择器（嵌在各模块表单里）
   .ge-*  定位气候页
   ============================================================ */

.gp {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  padding: 12px 13px;
}

.gp-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.gp-t { font-size: 12.5px; color: var(--text-3); letter-spacing: .04em; }
.gp-cur { font-size: 13.5px; color: var(--text-3); flex: 1 1 auto; min-width: 120px; }
.gp-cur.on { color: var(--gold); }
.gp-loc {
  flex: 0 0 auto; min-height: 38px; padding: 0 14px;
  border-radius: 100px; border: 1px solid var(--line);
  background: var(--gold-dim); color: var(--gold);
  font-size: 12.5px; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center;
}
.gp-loc:disabled { opacity: .55; cursor: default; }
.gp-loc:hover:not(:disabled) { background: rgba(216, 181, 107, .3); }

.gp-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.gp-row select, .gp-row input {
  flex: 1 1 0; min-width: 0; min-height: 38px;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line-soft); background: var(--panel);
  color: var(--text); font-size: 13.5px; font-family: inherit;
}
.gp-row select:disabled { opacity: .5; }
.gp-num input { font-variant-numeric: tabular-nums; }
.gp-q { flex: 1.2 1 0 !important; }
.gp-go {
  flex: 0 0 auto; min-width: 42px; min-height: 38px;
  border-radius: 8px; border: 1px solid var(--line-soft);
  background: var(--panel); color: var(--text-2);
  font-size: 13px; cursor: pointer; font-family: inherit;
}
.gp-go:hover { color: var(--gold); border-color: var(--line); }

.gp-map {
  width: 100%; height: 220px; border-radius: 10px;
  overflow: hidden; margin: 4px 0 10px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
}

.gp-nomap {
  margin: 2px 0 8px; font-size: 12px; line-height: 1.6;
  color: var(--text-3);
}

.gp-cli { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gp-chip {
  font-size: 12px; padding: 2px 9px; border-radius: 100px;
  background: var(--panel); color: var(--text-2);
  border: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.gp-src { font-size: 12px; color: var(--text-3); }
.gp-err { margin: 8px 0 0; font-size: 12.5px; color: var(--warn); }

/* ---------- 定位气候页 ---------- */
.ge-grid {
  display: grid; gap: 12px; margin: 18px 0;
  grid-template-columns: repeat(4, 1fr);
}
.ge-card {
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--panel); padding: 14px 15px;
}
.ge-k { font-size: 12px; color: var(--text-3); letter-spacing: .05em; }
.ge-v {
  font-family: var(--serif); font-size: 26px; line-height: 1.3;
  color: var(--gold); font-variant-numeric: tabular-nums; margin: 2px 0 1px;
}
.ge-v em { font-size: 13px; font-style: normal; color: var(--text-2); margin-left: 2px; }
.ge-s { font-size: 12px; color: var(--text-3); }

.ge-panel {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--panel); padding: 16px 17px 14px; margin-bottom: 14px;
}
.ge-ph {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.ge-ph h2 {
  margin: 0; font-family: var(--serif); font-size: 16px;
  font-weight: 600; color: var(--text);
}
.ge-pn, .ge-leg { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--text-3); }

.ge-svg { width: 100%; height: 250px; display: block; }
.ge-gl { stroke: var(--line-soft); stroke-width: 1; }
.ge-line { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linejoin: round; }
.ge-dot { fill: var(--gold); }
.ge-bar { fill: rgba(216, 181, 107, .34); }
html[data-theme="light"] .ge-bar { fill: rgba(160, 113, 26, .30); }
.ge-lb { fill: var(--text-3); font-size: 12px; text-anchor: middle; }

.ge-leg { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ge-lg { position: relative; padding-left: 13px; }
.ge-lg::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 2px; background: var(--gold); }
.ge-lg-p::before { height: 8px; top: 5px; background: rgba(216, 181, 107, .34); }
html[data-theme="light"] .ge-lg-p::before { background: rgba(160, 113, 26, .30); }

.ge-ins-p { margin: 6px 0 10px; font-size: 14px; line-height: 1.85; color: var(--text); }
.ge-focus { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 9px; }
.ge-focus-t { font-size: 12px; color: var(--text-3); }
.ge-focus-i {
  font-size: 12.5px; padding: 3px 10px; border-radius: 100px;
  background: var(--gold-dim); color: var(--gold);
}
.ge-ins-m { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.ge-ins-m b { color: var(--warn); font-weight: 500; }
.ge-ins-b { margin: 0; font-size: 12px; color: var(--text-3); }
.ge-empty {
  margin: 22px 0; padding: 26px 18px; text-align: center;
  border: 1px dashed var(--line-soft); border-radius: var(--radius);
  color: var(--text-3); font-size: 13.5px;
}

@media (max-width: 760px) {
  .ge-grid { grid-template-columns: repeat(2, 1fr); }
  .ge-v { font-size: 22px; }
  .gp-map { height: 180px; }
  .gp-row { flex-wrap: wrap; }
  .gp-row select, .gp-row input { flex: 1 1 140px; }
  .gp-q { flex: 1 1 100% !important; }
  .ge-svg { height: 200px; }
}
@media (max-width: 400px) {
  .ge-grid { grid-template-columns: 1fr; }
}

/* 弹窗里的环境层块：左侧一道细金线，与「总结」区分开 */
.env-block {
  border-left: 2px solid var(--line);
  padding-left: 13px;
  margin-left: -2px;
}
.env-block h4 { color: var(--text-2); }
.env-block .btn.sm { margin-top: 4px; }

/* ============================================================
   术语速查（弹窗 / 独立报告页共用）
   目的：让「相冲」「相破」「十神」这类词在同一页里有处可查，
   不把读者推去搜索引擎。视觉上刻意低一档，不抢总结的注意力。
   ============================================================ */
.gl-block { border-left: 2px solid var(--line); padding-left: 13px; margin-left: -2px; }
.gl-block h4 { color: var(--text-2); }
.gl-n {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 9px; background: var(--panel-2); color: var(--text-3);
  font-size: 12px; line-height: 17px; text-align: center; vertical-align: 2px;
  font-variant-numeric: tabular-nums;
}
.gl-hint { margin: 0 0 10px; font-size: calc(12px * var(--fs-scale, 1)); line-height: 1.75; color: var(--text-3); }
.gl-list { margin: 0; }
.gl-row {
  display: grid; grid-template-columns: 108px 1fr; gap: 4px 14px;
  padding: 9px 0; border-top: 1px dashed var(--line-soft);
}
.gl-row:first-child { border-top: 0; padding-top: 0; }
.gl-row dt { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.gl-row dt b { font-weight: 600; font-size: calc(13.5px * var(--fs-scale, 1)); color: var(--text); letter-spacing: .01em; }
.gl-cat {
  font-size: 12px; line-height: 16px; padding: 0 5px; border-radius: 4px;
  background: var(--panel-2); color: var(--text-3); white-space: nowrap;
}
.gl-row dd { margin: 0; font-size: calc(12.5px * var(--fs-scale, 1)); line-height: 1.85; color: var(--text-2); }

@media (max-width: 600px) {
  .gl-row { grid-template-columns: 1fr; gap: 3px; }
  .gl-row dt b { font-size: calc(14px * var(--fs-scale, 1)); }
  .gl-row dd { font-size: calc(13px * var(--fs-scale, 1)); }
}

/* ============================================================
   历法页 · 一天的七重坐标
   月相卡走「左图右表」：一个 SVG 月亮 + 两行口径对比，
   目的是让「农历十五」和「当天满月」这两个概念一眼能分开看。
   ============================================================ */
.cal-moon-card {
  display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center;
  margin-bottom: 14px;
}
.cal-moon-l { display: flex; align-items: center; justify-content: center; }
.cal-moon-svg { width: 132px; height: 132px; display: block; }
.cal-moon-dark { fill: var(--panel-2); stroke: var(--line-soft); stroke-width: .02; }
.cal-moon-lit { fill: var(--gold); }
.cal-moon-ring { fill: none; stroke: var(--line); stroke-width: .022; }
.cal-moon-t {
  font-size: calc(19px * var(--fs-scale, 1)); font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
}
.cal-moon-pct { font-size: 13px; font-weight: 400; color: var(--gold); font-variant-numeric: tabular-nums; }
.cal-moon-lines { font-size: calc(12.5px * var(--fs-scale, 1)); line-height: 1.95; color: var(--text-2); }
.cal-moon-lines b { display: inline-block; min-width: 66px; color: var(--text-3); font-weight: 400; font-size: 12px; }
.cal-moon-tag {
  margin-top: 10px; display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-size: calc(12px * var(--fs-scale, 1)); line-height: 1.6;
}
.cal-moon-tag.ok { background: rgba(123, 196, 140, .13); color: var(--ok); }
.cal-moon-tag.warn { background: rgba(224, 163, 90, .14); color: var(--warn); }

/* 坐标表：四列，第三四列是等宽时间 */
.cal-sw td { vertical-align: top; }
.cal-sw-k { white-space: nowrap; font-weight: 600; color: var(--text); width: 1%; }
.cal-sw-v { min-width: 150px; }
.cal-sw-n { margin-top: 3px; font-size: calc(12px * var(--fs-scale, 1)); line-height: 1.7; color: var(--text-3); }
.cal-sw-t {
  white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(12px * var(--fs-scale, 1)); color: var(--text-2); font-variant-numeric: tabular-nums;
}
/* 桌面上表头已经有「这一格自 / 换到下一格」，行内标签不再重复 */
.cal-sw-lab { display: none; }

@media (max-width: 700px) {
  .cal-moon-card { grid-template-columns: 1fr; gap: 12px; justify-items: center; text-align: left; }
  .cal-moon-svg { width: 108px; height: 108px; }
  .cal-sw thead { display: none; }
  .cal-sw tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px dashed var(--line-soft); }
  .cal-sw td { border: 0; padding: 0; }
  .cal-sw-k { grid-column: 1; }
  .cal-sw-t:last-child { grid-column: 2; grid-row: 1; text-align: right; color: var(--text-3); }
  .cal-sw-t:not(:last-child) { display: none; }
  .cal-sw-v { grid-column: 1 / -1; }
  /* 表头隐藏后，右上角那个时刻得自带抬头，否则一个裸时间没人知道是「换到下一格」 */
  .cal-sw-lab { display: inline; margin-right: 5px; color: var(--text-3); font-size: 12px; }
}

/* 口径与自证：默认折叠。想验的人点开有算式，不想看的人不占版面。 */
.basis-fold { margin-top: 14px; }
.basis-fold > summary { font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--text-2); }
.basis-body {
  margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  font-size: calc(12.5px * var(--fs-scale, 1)); line-height: 1.9; color: var(--text-2);
}
.basis-body p { margin: 0 0 10px; }
.basis-body b { color: var(--text); font-weight: 600; margin-right: 8px; }
.basis-body ol, .basis-body ul { margin: 4px 0 10px; padding-left: 20px; }
.basis-body li { margin: 2px 0; }
.basis-body div:last-child ol, .basis-body div:last-child ul { margin-bottom: 0; }

/* ============================================================
   口径总表页（#/basis）—— 全站唯一「不产出结果」的页面
   版式目标：一屏能扫完 4 张卡的差异，而不是读 14 篇说明文。
   ============================================================ */
.bs-lead {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 4px 0 18px;
}
.bs-lead-i {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 14px 16px;
}
.bs-lead-i b {
  display: block; font-size: calc(24px * var(--fs-scale, 1));
  font-weight: 600; color: var(--gold); line-height: 1.2; font-variant-numeric: tabular-nums;
}
.bs-lead-i span { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); line-height: 1.6; }

.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.bs-card {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 18px 18px 16px;
  transition: border-color .18s, transform .18s;
}
.bs-card:hover { border-color: var(--line); transform: translateY(-1px); }
.bs-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bs-hd h3 { margin: 0; font-size: calc(15.5px * var(--fs-scale, 1)); font-weight: 600; color: var(--text); }
.bs-id { font-size: 12px; color: var(--text-3); letter-spacing: .07em; }
.bs-rule {
  margin: 0 0 12px; padding-left: 10px; border-left: 2px solid var(--gold);
  font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.9; color: var(--text);
}
.bs-row { margin-top: 10px; }
.bs-row > b {
  display: block; font-size: 12px; font-weight: 500; color: var(--text-3);
  letter-spacing: .05em; margin-bottom: 4px;
}
.bs-row ol, .bs-row ul {
  margin: 0; padding-left: 17px;
  font-size: calc(12.5px * var(--fs-scale, 1)); line-height: 1.8; color: var(--text-2);
}
.bs-row li { margin: 2px 0; overflow-wrap: anywhere; }
.bs-row li::marker { color: var(--gold); }

@media (max-width: 900px) {
  .bs-grid { grid-template-columns: 1fr; }
  .bs-lead { gap: 8px; }
  .bs-lead-i { padding: 11px 12px; }
}
@media (max-width: 480px) {
  .bs-lead { grid-template-columns: 1fr; }
  .bs-lead-i { display: flex; align-items: baseline; gap: 10px; }
  .bs-lead-i b { font-size: calc(19px * var(--fs-scale, 1)); }
  .bs-lead-i span { margin-top: 0; }
  .bs-card { padding: 15px 14px 14px; }
}

/* ============================================================
   线性图标（替换原来的单字方块）
   统一 24×24 视图、细描边、随主题色；不依赖图片，任意档字号都清晰
   ============================================================ */
.ico { width: 22px; height: 22px; display: block; }
.card-ico .ico { width: 20px; height: 20px; }
.intro-ico .ico { width: 23px; height: 23px; }
.card-ico, .intro-ico { overflow: hidden; }
/* 图标容器只在有 svg 时收紧行高，避免 1px 基线偏移 */
.card-ico > svg, .intro-ico > svg { display: block; }

/* ============================================================
   配图接入（v1.9）
   图源：宣纸底 + 水墨 + 金线的 WebP，与线性图标同一套语言
   hero 1536×1024 / 模块与三法 560×560，单张 5~62KB，全部 lazy
   ============================================================ */

/* ---- 首页主视觉：两列，右图左文；窄屏图下移并裁成横幅 ---- */
.hero-2 { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 34px; align-items: center; }
.hero-2 .hero-txt { min-width: 0; }
.hero-art {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--panel-2);
  box-shadow: var(--shadow);
}
.hero-art img { display: block; width: 100%; height: auto; }
/* 金线角标，让图片和卡片边框咬合 */
.hero-art::after {
  content: ""; position: absolute; inset: 8px; border-radius: calc(var(--radius) - 6px);
  border: 1px solid var(--gold-dim); pointer-events: none;
}
@media (max-width: 980px) {
  .hero-2 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hero-art { order: -1; }
  .hero-art img { width: 100%; height: 190px; object-fit: cover; object-position: 50% 8%; }
}
@media (max-width: 560px) {
  .hero-art img { height: 168px; object-position: 50% 4%; }
  .hero-art::after { inset: 5px; }
}

/* ---- 92 体系入口：右侧三法缩略图，窄屏隐藏（下面还有三法分区图） ---- */
.feat-arts { display: flex; gap: 8px; flex: 0 0 auto; }
.feat-arts img {
  width: 78px; height: 78px; object-fit: cover; border-radius: 11px;
  border: 1px solid var(--line-soft); display: block;
  transition: .2s;
}
.feat:hover .feat-arts img { border-color: var(--line); }
@media (max-width: 760px) { .feat-arts { display: none; } }

/* ---- 模块页右栏说明卡顶部横幅 ---- */
.intro-art {
  margin: -24px -22px 18px; height: 168px; overflow: hidden;
  border-bottom: 1px solid var(--line-soft); position: relative;
  background: var(--panel-2);
}
/* contain + multiply：方形配图不裁切，宣纸底相乘后与卡片底色融合，只剩墨与金线 */
.intro-art img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 42%; display: block; mix-blend-mode: multiply; }
/* 图底压一层纸色渐变，保证和卡片底色过渡不像贴上去的 */
.intro-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--line-soft); pointer-events: none; }
@media (max-width: 900px) {
  .intro-art { height: 148px; margin: -20px -18px 14px; }
}

/* ============================================================
   窄屏可点区下限 44px
   面包屑、表格内词条链接、页内次级链接、微型开关、92 体系筛选 chip、定位控件
   历史：这一块原来是 38px，按当时 40px 的判据线「刚好过」。但实测手机上
   38px 仍偏小（成年人指腹接触面约 45px），而且与 .btn / .chip / .seg 的 44px
   不统一 —— 同一屏里两种手感。所以整体提到 44，与 iOS HIG / Material 对齐。
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {
  .crumb a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 5px; margin: 0 -2px; }
  .tb td a { display: inline-block; padding: 13px 3px; margin: -13px -3px; }
  .sub a, .lede a, .note a { display: inline-block; padding: 12px 3px; margin: -12px -3px; }
  .bd-hd .sw { min-height: 44px; padding: 6px 13px; }
  .bc a { min-height: 44px; }
  /* 92 体系的「机制/层级」筛选 chip：34px 起步，实测渲染 38px */
  .tr-tabs button { min-height: 44px; }
  /* 定位控件：select / 输入框 / 定位按钮 / 查询按钮 */
  .gp-loc, .gp-go, .gp-row select, .gp-row input { min-height: 44px; }
  /* 站标：命中区 29px，是每页都会点到的「回首页」入口。
     用 padding 撑开、负 margin 收回，视觉尺寸不变，只是手指不再点空。 */
  .logo { padding: 8px 0; margin: -8px 0; }
}

/* ---- 首页 92 入口：窄屏下大数字与标题顶对齐，不再垂直居中错位 ---- */
@media (max-width: 640px) {
  .feat { align-items: flex-start; row-gap: 6px; }
  .feat-n { font-size: calc(31px * var(--fs-scale)); line-height: .95; margin-top: 2px; }
  .feat-t { font-size: calc(15px * var(--fs-scale)); line-height: 1.4; }
  .feat-d { font-size: calc(12.5px * var(--fs-scale, 1)); }
  .feat-go { padding-top: 1px; }
}

/* ---- 暗色主题下的配图：宣纸变墨纸，只留线条与金点（invert + screen） ---- */
[data-theme="dark"] .intro-art img,
[data-theme="dark"] .feat-arts img {
  mix-blend-mode: screen;
  filter: invert(1) hue-rotate(180deg) brightness(.62) contrast(1.18);
}
[data-theme="dark"] .intro-art::after { background: var(--line-soft); }
[data-theme="dark"] .hero-art { box-shadow: 0 18px 40px -22px #000; }
[data-theme="dark"] .hero-art img { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(1.06); }

/* ============================================================
   风水 · 宅相（#/trad/fengshui）
   步骤向导 / 采集网格 / 罗盘 / 观察确认 / 四类结构块
   ============================================================ */
.fs-card { padding: 22px; }
.fs-lede { color: var(--text-2); font-size: 13.5px; line-height: 1.8; margin: 8px 0 16px; max-width: 760px; }
.fs-hint { font-size: 12px; color: var(--text-3); line-height: 1.7; margin-top: 8px; }
.fs-notes { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); line-height: 1.85; }
.fs-caveat { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-soft); font-size: 12px; color: var(--text-3); line-height: 1.75; }

/* ---- 步骤条 ---- */
.fs-steps { display: flex; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
.fs-step {
  display: flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--line-soft); background: var(--panel); font-size: 12.5px; color: var(--text-3);
}
.fs-step .n {
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; border: 1px solid var(--line); color: var(--gold);
}
.fs-step.on { border-color: var(--gold); color: var(--text); background: var(--gold-dim); }
.fs-step.on .n { background: var(--solid); color: var(--solid-fg); border-color: var(--solid-bd); font-weight: 600; }
.fs-step.done { color: var(--text-2); }
.fs-step.done .n { border-color: var(--line); color: var(--gold); }

/* ---- S1 采集 ---- */
.fs-drop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.fs-drop-t { font-size: 12px; color: var(--text-3); }
.fs-as { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin: 14px 0; }
.fs-a {
  position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-soft);
  background: var(--panel-2); padding-bottom: 30px;
}
.fs-a img { width: 100%; height: 96px; object-fit: cover; display: block; }
.fs-a-n {
  position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(20,16,10,.62); color: #f6f4ef; font-size: 12px; display: grid; place-items: center;
}
.fs-a-x {
  position: absolute; right: 5px; top: 5px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(20,16,10,.62); color: #f6f4ef; font-size: 15px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.fs-a-x:hover { background: #b04a38; }
.fs-a-sel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px; border: none;
  border-top: 1px solid var(--line-soft); background: var(--panel); color: var(--text);
  font-size: 12px; padding: 0 6px;
}
.fs-priv {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--gold-dim);
  font-size: 12px; color: var(--text-2); line-height: 1.75;
}
.fs-priv b { color: var(--gold); margin-right: 8px; }

/* ---- S2 方位 ---- */
.fs-seg { display: inline-flex; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.fs-seg button {
  padding: 9px 18px; min-height: 40px; border: none; background: transparent; color: var(--text-2);
  font-size: 13px; cursor: pointer;
}
.fs-seg button.on { background: var(--gold-dim); color: var(--gold); font-weight: 600; }
.fs-cp { text-align: center; padding: 12px 0 4px; }
.fs-cp-val { font-family: var(--serif); font-size: 34px; color: var(--gold); margin: 6px 0 2px; letter-spacing: .02em; }
.fs-cp-val.dim { color: var(--text-3); }
.fs-cp-tip { font-size: 12px; color: var(--text-3); line-height: 1.7; max-width: 420px; margin: 4px auto 12px; }
.fs-manual .field { max-width: 320px; }
.fs-orient {
  margin-top: 16px; border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 14px 16px; background: var(--panel-2);
}
.fs-o-row { display: flex; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); }
.fs-o-row:last-child { border-bottom: none; }
.fs-o-row .k { flex: 0 0 76px; color: var(--text-3); font-size: 12px; }
.fs-o-row .v { color: var(--text-2); }
.fs-o-row .v b { color: var(--gold); font-family: var(--serif); font-size: 15px; }
.fs-o-warn {
  margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.7;
  background: rgba(154,100,23,.10); border: 1px solid rgba(154,100,23,.28); color: var(--text-2);
}
.fs-topo { margin-top: 16px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 0 14px; }
.fs-topo summary { cursor: pointer; padding: 12px 0; font-size: 13px; color: var(--gold); }
.fs-topo-b { padding: 4px 0 16px; display: grid; gap: 12px; }
.fs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-chip {
  padding: 7px 12px; min-height: 36px; border-radius: 100px; border: 1px solid var(--line-soft);
  background: var(--panel); color: var(--text-2); font-size: 12.5px; cursor: pointer;
}
.fs-chip.on { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }
.fs-rooms { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-room {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line-soft); background: var(--panel-2); font-size: 12.5px; position: relative;
}
.fs-room b { color: var(--text); font-weight: 600; }
.fs-room span { color: var(--text-3); }
.fs-room em { font-style: normal; color: var(--gold); }
.fs-ri {
  min-height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-soft);
  background: var(--panel); color: var(--text); font-size: 13px; max-width: 180px;
}

/* ---- S3 观察确认 ---- */
.fs-obs-sum { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fs-obs { display: grid; gap: 8px; }
.fs-o { border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.fs-o.conflict { border-color: rgba(176,74,56,.5); }
.fs-o.open { border-color: var(--line); }
.fs-o-h {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 13px 14px; min-height: 46px;
  border: none; background: transparent; cursor: pointer; text-align: left; color: var(--text);
}
.fs-o-h b { font-family: var(--serif); font-size: 14.5px; letter-spacing: .04em; min-width: 42px; }
.fs-o-h .sp { flex: 1; }
.fs-o-h em { font-style: normal; font-size: 12px; color: #b04a38; }
.fs-o-h em.dim { color: var(--text-3); }
.fs-o-b { padding: 4px 14px 14px; border-top: 1px dashed var(--line-soft); display: grid; gap: 12px; }
.fs-o-f label { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 5px; }
.fs-o-f select {
  width: 100%; max-width: 320px; min-height: 38px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line-soft); background: var(--panel); color: var(--text); font-size: 13px;
}
.fs-o-conf { display: grid; gap: 8px; padding: 8px 0; }
.fs-o-conf p { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.fs-o-cv { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-3); word-break: break-all; }

/* ---- 七类结构块：罗盘 ---- */
.fs-block h4 { margin-bottom: 12px; }
.fs-tb table.tb { font-size: 12.5px; }
.fs-tb table.tb td.mono { font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; color: var(--text-2); }
.fs-tb table.tb tbody tr:nth-child(even) { background: var(--bg-soft, rgba(0,0,0,.012)); }
.fs-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fs-pairs li {
  display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-soft, rgba(0,0,0,.015)); border: 1px solid var(--line-soft);
}
.fs-pairs li b {
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 600;
  color: var(--gold-ink, var(--gold)); letter-spacing: .01em;
}
.fs-pairs li span { font-size: 12.5px; color: var(--text-2); line-height: 1.8; }
.fs-text {
  margin: 0; font-size: 13.5px; line-height: 2; color: var(--text-2);
  padding: 14px 16px; border-radius: 12px;
  background: var(--bg-soft, rgba(0,0,0,.015)); border-left: 2px solid var(--gold);
}
.fs-compass { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 22px; align-items: center; }
.fs-c-big { font-family: var(--serif); font-size: 42px; color: var(--gold); line-height: 1; letter-spacing: .04em; }
.fs-c-big span { font-size: 15px; margin-left: 4px; color: var(--text-3); }
.fs-c-sub { font-size: 13px; color: var(--text-2); margin-top: 8px; letter-spacing: .06em; }
.fs-c-note { font-size: 12px; color: var(--text-3); line-height: 1.7; margin-top: 10px; }

/* ---- 图集 ---- */
.fs-gal-g { display: flex; gap: 8px; flex-wrap: wrap; }
.fs-gal-i {
  position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--panel-2); cursor: pointer; padding: 0;
}
.fs-gal-i.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dim); }
.fs-gal-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-gal-no { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-3); font-family: var(--serif); font-size: 22px; }
.fs-gal-r {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 12px; padding: 2px 0;
  background: rgba(20,16,10,.66); color: #f6f4ef; text-align: center;
}
.fs-gal-c {
  position: absolute; right: 4px; top: 4px; font-size: 12px; padding: 1px 5px; border-radius: 4px;
  background: var(--solid); color: var(--solid-fg); font-weight: 600;
}
.fs-gal-v { display: flex; gap: 14px; margin-top: 14px; align-items: flex-start; flex-wrap: wrap; }
.fs-gal-v img { max-width: 300px; width: 100%; border-radius: 10px; border: 1px solid var(--line-soft); }
.fs-gal-m { display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.fs-gal-m b { font-family: var(--serif); font-size: 15px; color: var(--text); }
.fs-gal-m .dim { color: var(--text-3); font-size: 12px; }
.fs-gal-tip { font-size: 12px; color: var(--text-3); margin-top: 10px; line-height: 1.7; }

/* ---- 候选方案 ---- */
.fs-plan-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.fs-plan-c {
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px;
  background: var(--panel-2); display: grid; gap: 9px;
}
.fs-plan-c.cur { border-color: var(--line); }
.fs-plan-c.top { border-color: var(--gold); background: linear-gradient(180deg, var(--gold-dim), transparent 60%), var(--panel-2); }
.fs-plan-h { display: flex; align-items: center; gap: 8px; }
.fs-plan-d { font-family: var(--serif); font-size: 20px; color: var(--text); letter-spacing: .04em; }
.fs-plan-gua { font-size: 12px; color: var(--text-3); }
.fs-plan-badge {
  font-size: 12px; padding: 2px 7px; border-radius: 5px; margin-left: auto;
  border: 1px solid var(--line); color: var(--gold);
}
.fs-plan-badge.cur { color: var(--text-3); border-color: var(--line-soft); }
.fs-plan-badge.top { background: var(--solid); color: var(--solid-fg); border-color: var(--solid-bd); font-weight: 600; }
.fs-plan-star { font-family: var(--serif); font-size: 15px; color: var(--gold); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.fs-plan-star i { font-style: normal; font-size: 12px; color: var(--text-3); }
.fs-plan-star em { font-style: normal; font-size: 12px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line-soft); color: var(--text-3); }
.fs-plan-rows { display: grid; gap: 6px; }
.fs-plan-r { display: grid; grid-template-columns: 68px minmax(0,1fr) 30px; gap: 8px; align-items: center; font-size: 12px; }
.fs-plan-r .k { color: var(--text-3); }
.fs-plan-r .bar { height: 6px; border-radius: 100px; background: var(--line-soft); overflow: hidden; }
.fs-plan-r .bar i { display: block; height: 100%; background: var(--gold); border-radius: 100px; }
.fs-plan-r .v { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fs-plan-t { font-size: 12.5px; color: var(--text-2); border-top: 1px dashed var(--line-soft); padding-top: 8px; }
.fs-plan-t b { font-family: var(--serif); font-size: 20px; color: var(--gold); margin: 0 2px; }
.fs-plan-t .dim { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.fs-plan-b { margin: 0; padding-left: 14px; display: grid; gap: 4px; }
.fs-plan-b li { font-size: 12px; color: var(--text-3); line-height: 1.6; }
.fs-plan-b em { font-style: normal; color: var(--gold); margin-right: 6px; font-family: ui-monospace, monospace; }
.fs-plan-w { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-soft); }
.fs-plan-wt { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-2); }
.fs-plan-wl { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin-top: 6px; }
.fs-plan-disc { font-size: 12px; color: var(--text-3); line-height: 1.7; margin-top: 8px; }

/* ---- 动线拓扑 ---- */
.fs-graph { display: grid; gap: 14px; }
/* 九宫格用表格单元格：同一行的 td 天然等高、顶部对齐，
   不受 flex/grid 对齐算法影响，这是唯一在三个断点下都稳定的写法 */
.fs-g-tb {
  border-collapse: separate; border-spacing: 6px; table-layout: fixed;
  width: 100%; max-width: 432px; margin: -6px;
}
.fs-g-tb td {
  width: 33.33%; height: 76px; vertical-align: top;
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 9px;
  background: var(--panel-2);
}
.fs-g-tb td.empty { background: transparent; border-style: dashed; }
.fs-g-tb td.gate { border-color: var(--gold); background: var(--gold-dim); }
.fs-g-zn { display: block; font-size: 12px; color: var(--text-3); letter-spacing: .06em; }
.fs-g-tb td.gate .fs-g-zn { color: var(--gold); }
.fs-g-zn i { font-style: normal; margin-left: 4px; font-size: 12px; padding: 0 4px; border-radius: 3px; background: var(--solid); color: var(--solid-fg); }
.fs-g-r { display: block; font-size: 12.5px; color: var(--text); margin-top: 3px; line-height: 1.4; }
.fs-g-f { display: grid; gap: 9px; }
.fs-g-fi { border: 1px solid var(--line-soft); border-left-width: 3px; border-radius: 8px; padding: 11px 13px; background: var(--panel-2); position: relative; }
.fs-g-fi.t-ok { border-left-color: var(--gold); }
.fs-g-fi.t-na { border-left-color: var(--line); opacity: .82; }
.fs-g-fh { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fs-g-fh b { font-family: var(--serif); font-size: 14px; color: var(--text); letter-spacing: .04em; }
.fs-g-fh span { font-size: 12px; color: var(--text-3); }
.fs-g-fi p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.75; }
.fs-g-fi p.fix em { font-style: normal; color: var(--gold); margin-right: 6px; font-size: 12px; }
.fs-g-fid { position: absolute; right: 10px; bottom: 8px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-3); opacity: .7; }
.fs-g-empty { font-size: 12.5px; color: var(--text-3); }
.fs-g-na {
  padding: 14px 16px; border-radius: 12px; margin-bottom: 12px;
  background: var(--bg-soft, rgba(0,0,0,.015));
  border: 1px dashed var(--line); border-left: 2px solid var(--warn, #9a6417);
}
.fs-g-na b { font-family: var(--serif); font-size: 13.5px; color: var(--text-1); letter-spacing: .02em; }
.fs-g-na p { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2); line-height: 1.85; }
.fs-g-na p.how { color: var(--text-3); font-size: 12px; padding-top: 6px; border-top: 1px dashed var(--line-soft); margin-top: 10px; }
.fs-g-th { font-size: 12px; color: var(--text-3); line-height: 1.7; }

/* ---- 玄空飞星九宫盘（拟物：木框 + 宣纸九格 + 朱印） ----
   布局用 3 列 grid：中列放盘，左右两列放「东 / 西」竖排方位字，方位字必须与盘同高居中。
   真飞星盘的读序是「每格左上角山星、右上角向星、盘中运星」，三层数都在格内，
   靠位置区分而不是靠表头，所以这里不设表头行。 */
.fs-g9-sub {
  font-size: 12px; color: var(--text-3); line-height: 1.7;
  margin: -4px 0 10px; max-width: 620px;
}
.fs-g9 {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 14px;
  align-items: center; justify-items: center;
  gap: 2px 0; margin-bottom: 2px;
  max-width: 520px;
}
.fs-g9-aw {
  font-family: var(--serif); font-size: 12px; color: var(--text-3);
  letter-spacing: .12em; line-height: 1; user-select: none;
}
.fs-g9-aw.t { grid-column: 2; grid-row: 1; padding-bottom: 6px; }
.fs-g9-aw.b { grid-column: 2; grid-row: 3; padding-top: 6px; }
.fs-g9-aw.l { grid-column: 1; grid-row: 2; writing-mode: vertical-rl; }
.fs-g9-aw.r { grid-column: 3; grid-row: 2; writing-mode: vertical-rl; }

/* 木托：斜向木色渐变 + 外阴影 + 上缘高光 / 下缘暗口，做出厚度 */
.fs-g9-board {
  grid-column: 2; grid-row: 2; justify-self: stretch;
  position: relative; padding: 11px; border-radius: 5px;
  background: linear-gradient(158deg, var(--g9-wood-hi), var(--g9-wood) 46%, var(--g9-wood-lo));
  box-shadow:
    0 16px 32px -20px rgba(0, 0, 0, .62),
    0 2px 6px -3px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .17),
    inset 0 -1px 0 rgba(0, 0, 0, .40);
}
.fs-g9-board::before {
  content: ''; position: absolute; inset: 0; border-radius: 5px; pointer-events: none;
  background: repeating-linear-gradient(97deg, transparent 0 9px, rgba(255, 255, 255, .042) 9px 10px);
  opacity: .45;
}

/* 宣纸九格：1px 墨线用 gap 露底色做出来，避免 border 叠加成双线 */
.fs-g9-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--g9-rule);
  border: 1px solid var(--g9-rule); border-radius: 2px; overflow: hidden;
  box-shadow: inset 0 0 22px -8px rgba(0, 0, 0, .45);
}
.fs-g9-c {
  position: relative; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(124% 104% at 32% 0%, var(--g9-paper-hi), var(--g9-paper) 72%);
  font-family: var(--serif);
  transition: background .25s ease;
}
.fs-g9-c::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(66deg, transparent 0 4px, var(--g9-fiber) 4px 4.6px);
}
.fs-g9-c.mid {
  background: radial-gradient(124% 104% at 50% 0%, var(--g9-mid-hi), var(--g9-mid) 74%);
}
.fs-g9-c.shan, .fs-g9-c.xiang { box-shadow: inset 0 0 0 2px var(--g9-seal); }

/* 左上 山星 / 右上 向星 */
.fs-g9-top {
  position: absolute; top: 4px; left: 7px; right: 7px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums;
}
.fs-g9-top .s { color: var(--g9-shan); }
.fs-g9-top .x { color: var(--g9-xiang); }

/* 居中 运星 */
.fs-g9-y {
  font-size: 31px; font-weight: 600; line-height: 1;
  color: var(--g9-ink); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 var(--g9-emboss);
}
.fs-g9-c.mid .fs-g9-y { color: var(--g9-seal); }

/* 底部宫名与方位 */
.fs-g9-bot {
  position: absolute; bottom: 4px; left: 0; right: 0;
  display: flex; justify-content: center; align-items: baseline; gap: 3px;
  font-size: 12px; color: var(--g9-ink-dim); letter-spacing: .06em;
}
/* 只有盖了朱印的格子才让位，否则宫名会被推偏、看着不像居中 */
.fs-g9-c.shan .fs-g9-bot, .fs-g9-c.xiang .fs-g9-bot { padding-right: 15px; }
.fs-g9-bot .p { color: var(--g9-ink); }
.fs-g9-bot .d { font-size: 9.5px; opacity: .8; }

/* 坐 / 向 朱印：小方章、微旋、内白边 */
.fs-g9-seal {
  position: absolute; right: 5px; bottom: 5px;
  width: 14px; height: 14px; line-height: 14px;
  font-size: 9.5px; text-align: center; letter-spacing: 0;
  color: #fdf6e6; background: var(--g9-seal); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .30);
  transform: rotate(-2deg);
}

.fs-g9-lg {
  grid-column: 1 / -1; grid-row: 4; justify-self: start;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12px; color: var(--text-3);
}
.fs-g9-lg .k { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto; }
.fs-g9-lg .k i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 2px; display: block; }
.fs-g9-lg .k.s i { background: var(--g9-shan); }
.fs-g9-lg .k.x i { background: var(--g9-xiang); }
.fs-g9-lg .k.y i { background: var(--g9-ink); }
.fs-g9-lg .k.st i { background: var(--g9-seal); }
.fs-g9-lg .tip { margin-left: auto; font-size: 12px; opacity: .85; }

/* ---- 进阶 · 玄空飞星入口 ---- */
.fs-xk { margin-top: 16px; border-color: var(--line); }
.fs-xk-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-xk-lede {
  font-size: 12.5px; color: var(--text-2); line-height: 1.95;
  margin: 10px 0 0; max-width: 760px;
}
.fs-xk-lede b { color: var(--text); font-weight: 500; }
.fs-xk-f {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-soft);
}
.fs-xk-l { display: grid; gap: 3px; font-size: 12px; color: var(--text-3); }
.fs-xk-l span { letter-spacing: .02em; }
.fs-xk-l input, .fs-xk-l select {
  font-family: var(--sans); font-size: 13px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 7px 9px; min-width: 96px;
}
.fs-xk-l input[type="number"] { width: 108px; }
.fs-xk-l i { font-style: normal; font-size: 12px; color: var(--text-3); opacity: .8; }
.fs-xk-hint { font-size: 12px; color: var(--text-3); }
.fs-xk-err {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
  color: var(--bad); background: rgba(217, 123, 108, .1); border-left: 3px solid var(--bad);
}
.fs-xk-na {
  display: grid; gap: 4px; margin-top: 14px; padding: 13px 15px;
  border-radius: 10px; border: 1px dashed var(--line); background: var(--bg-soft, rgba(0,0,0,.015));
  font-size: 12.5px; color: var(--text-2); line-height: 1.8;
}
.fs-xk-na b { font-family: var(--serif); font-size: 13px; color: var(--text); }
.fs-xk-lv {
  display: grid; gap: 3px; margin: 14px 0 0; padding: 12px 15px;
  border-radius: 10px; border: 1px solid var(--line-soft); border-left-width: 3px;
  background: var(--panel-2);
}
.fs-xk-lv b { font-family: var(--serif); font-size: 14.5px; letter-spacing: .03em; color: var(--text); }
.fs-xk-lv span { font-size: 12.5px; color: var(--text-2); line-height: 1.8; }
.fs-xk-lv.lv-exact { border-left-color: var(--ok); }
.fs-xk-lv.lv-jianshan { border-left-color: var(--gold); }
.fs-xk-lv.lv-stable { border-left-color: var(--gold); }
.fs-xk-lv.lv-ambiguous { border-left-color: var(--warn); }
.fs-xk-lv.lv-none { border-left-color: var(--line); }
.fs-xk .pill-list { margin-top: 12px; }
.fs-xk .pill i { font-style: normal; color: var(--text-3); font-size: 12px; margin-left: 5px; }
.fs-xk .sh-block:first-of-type { margin-top: 4px; }

/* ---- 结果区 ---- */
.fs-res-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-res-h .card-t { margin: 0; }
.fs-res-lede { font-size: 13.5px; color: var(--text-2); line-height: 1.85; margin: 10px 0 0; max-width: 820px; }

/* ---- 忙碌层 ---- */
.fs-busy {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(10,12,17,.34); backdrop-filter: blur(2px);
}
.fs-busy-b {
  display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  font-size: 13.5px; box-shadow: var(--shadow);
}

/* ---- 窄屏 ---- */
@media (max-width: 820px) {
  .fs-compass { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fs-c-side { text-align: center; }
  .fs-c-big { font-size: 32px; }
  .fs-card { padding: 16px 14px; }
  .fs-g-tb { max-width: none; }
  .fs-g-tb td { padding: 6px 7px; height: 66px; }
  .fs-g-zn { font-size: 12px; }
  .fs-g-r { font-size: 12px; }
  .fs-plan-g { grid-template-columns: minmax(0, 1fr); }
  .fs-g9-board { padding: 7px; }
  .fs-g9-y { font-size: 24px; }
  .fs-g9-top { font-size: 12px; top: 3px; left: 5px; right: 5px; }
  .fs-g9-bot { font-size: 9px; bottom: 3px; padding-right: 13px; }
  .fs-g9-bot .d { display: none; }
  .fs-g9-seal { width: 12px; height: 12px; line-height: 12px; font-size: 8.5px; right: 4px; bottom: 4px; }
  .fs-g9-lg { gap: 9px; font-size: 12px; }
  .fs-g9-lg .tip { margin-left: 0; }
  .fs-gal-i { width: 78px; height: 78px; }
  .fs-o-f select { max-width: none; }
}

/* ============================================================
   相学 · 掌相与面相
   ============================================================ */

/* ---- 拍摄建议 ---- */
.xg-advice {
  margin: 0 0 16px; padding: 14px 16px 14px 32px; border-radius: 12px;
  background: var(--bg-soft, rgba(0,0,0,.015)); border: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--text-2); line-height: 1.95;
}
.xg-advice li { margin: 0; }

/* ---- 标定进度条 ---- */
.xg-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px;
  align-items: center; margin-bottom: 14px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--bg-soft, rgba(0,0,0,.015)); border: 1px solid var(--line-soft);
}
.xg-bar-l { display: grid; gap: 2px; }
.xg-bar-l b { font-family: var(--serif); font-size: 13px; color: var(--text); letter-spacing: .02em; }
.xg-bar-l span { font-size: 12px; color: var(--text-3); font-family: ui-monospace, monospace; }
.xg-bar-p { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.xg-bar-p i { display: block; height: 100%; background: var(--gold); border-radius: 3px; transition: width .25s ease; }
.xg-bar-q { display: flex; align-items: center; gap: 8px; }
.xg-bar-q em { font-style: normal; font-size: 12px; color: var(--text-3); }

/* ---- 标定步骤标签 ---- */
.xg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.xg-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text-2);
  font-size: 12.5px; font-family: inherit; transition: all .18s ease;
}
.xg-tab i {
  font-style: normal; width: 17px; height: 17px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 12px;
  background: var(--line-soft); color: var(--text-3);
}
.xg-tab.on { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.xg-tab.on i { background: var(--solid); color: var(--solid-fg); }
.xg-tab.done i { background: var(--solid); color: var(--solid-fg); }
.xg-tip { margin: 0 0 12px; font-size: 12px; color: var(--text-3); line-height: 1.8; }

/* ---- 画布与锚点 ---- */
.xg-stage-wrap {
  border-radius: 14px; overflow: hidden; background: #12100c;
  border: 1px solid var(--line);
}
.xg-stage {
  position: relative; width: 100%; touch-action: none; user-select: none;
  max-height: 62vh; display: grid; place-items: center;
}
.xg-stage img {
  display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto;
  pointer-events: none;
}
.xg-pt {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; place-items: center; cursor: grab; touch-action: none;
  z-index: 2;
}
.xg-pt:active, .xg-pt.dragging { cursor: grabbing; z-index: 3; }
.xg-pt-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.55); border: 2px solid #d8b56b;
  box-shadow: 0 0 0 4px rgba(216,181,107,.22), 0 2px 6px rgba(0,0,0,.4);
  transition: transform .12s ease;
}
.xg-pt.set .xg-pt-dot { background: #d8b56b; }
.xg-pt.dragging .xg-pt-dot { transform: scale(1.35); }
.xg-pt-lb {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 12px; padding: 2px 7px; border-radius: 5px;
  background: rgba(10,12,17,.78); color: #f6f4ef; pointer-events: none;
  font-family: ui-monospace, monospace;
}

/* ---- 锚点清单 ---- */
.xg-ptlist { display: grid; gap: 6px; margin-top: 14px; }
.xg-pti {
  display: grid; grid-template-columns: 20px minmax(0, 96px) minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 7px 11px; border-radius: 9px;
  background: var(--bg-soft, rgba(0,0,0,.012)); border: 1px solid transparent;
  font-size: 12.5px; color: var(--text-2);
}
.xg-pti.set { border-color: var(--line-soft); }
.xg-pti b {
  font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-3);
  width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--line-soft);
}
.xg-pti.set b { background: var(--solid); color: var(--solid-fg); }
.xg-pti span { color: var(--text); }
.xg-pti em { font-style: normal; font-size: 12px; color: var(--text-3); }
.xg-pti i { font-style: normal; font-size: 12px; color: var(--text-3); font-family: ui-monospace, monospace; }
.xg-pti.set i { color: var(--gold); }

/* ---- AI 开关 ---- */
.xg-ai {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 14px;
  padding: 11px 13px; border-radius: 10px; cursor: pointer;
  background: var(--bg-soft, rgba(0,0,0,.012)); border: 1px solid var(--line-soft);
  font-size: 12px; color: var(--text-3); line-height: 1.75;
}
/* 全局表单样式把 input 拉成 width:100%，复选框也中招——这里必须显式收回，
   否则勾选框会被撑到 700 多像素，文字被挤到最右边 */
.xg-ai input { width: auto; flex: 0 0 auto; margin-top: 2px; accent-color: var(--gold); }

/* ---- 测量表 ---- */
.xg-mw { display: grid; gap: 6px; }
.xg-mrow {
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--panel-2); overflow: hidden;
}
.xg-mrow.folded { opacity: .55; }
.xg-mh {
  display: grid; grid-template-columns: minmax(0, 1fr) 152px 70px 44px 56px;
  gap: 10px; align-items: center; width: 100%; padding: 10px 12px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 12.5px; color: var(--text);
}
.xg-mrow.folded .xg-mh { cursor: default; }
.xg-mn { color: var(--text); }
.xg-mv { font-family: ui-monospace, monospace; font-size: 13px; color: var(--gold); text-align: right; white-space: nowrap; }
.xg-mv em { font-style: normal; font-size: 12px; color: var(--text-3); }
.xg-mc { height: 5px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.xg-mc i { display: block; height: 100%; background: var(--gold); }
.xg-mrow.weak .xg-mc i, .xg-mrow.bad .xg-mc i { background: var(--warn, #9a6417); }
.xg-mp { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-3); text-align: right; }
.xg-b-good { color: var(--gold); }
.xg-mb {
  padding: 10px 12px 12px; border-top: 1px dashed var(--line-soft);
  display: grid; gap: 8px; font-size: 12px; color: var(--text-2); line-height: 1.8;
}
.xg-mb b { display: block; font-size: 12px; color: var(--text-3); letter-spacing: .06em; margin-bottom: 2px; font-weight: 600; }

/* ---- 三停分布 ---- */
.xg-gauge { display: grid; gap: 12px; }
.xg-g-bar {
  position: relative; height: 62px; border-radius: 10px; overflow: hidden;
  background: var(--bg-soft, rgba(0,0,0,.02)); border: 1px solid var(--line-soft);
}
.xg-g-seg {
  position: absolute; top: 0; bottom: 0; display: grid; align-content: center; gap: 3px;
  padding: 0 10px; border-right: 1px solid var(--panel);
}
.xg-g-seg:last-of-type { border-right: 0; }
.xg-g-seg b { font-family: var(--serif); font-size: 12.5px; color: var(--text); letter-spacing: .03em; }
.xg-g-seg em { font-style: normal; font-family: ui-monospace, monospace; font-size: 13px; color: var(--gold); }
.xg-g-seg.s0 { background: rgba(160,113,26,.16); }
.xg-g-seg.s1 { background: rgba(160,113,26,.10); }
.xg-g-seg.s2 { background: rgba(160,113,26,.05); }
.xg-g-ideal {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--text-3); opacity: .55; pointer-events: none;
}
.xg-g-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.xg-g-legend span { display: inline-flex; align-items: center; gap: 6px; }
.xg-g-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line); }
.xg-g-legend i.s0 { background: rgba(160,113,26,.32); }
.xg-g-legend i.s1 { background: rgba(160,113,26,.18); }
.xg-g-legend i.s2 { background: rgba(160,113,26,.08); }
.xg-g-legend em { font-style: normal; font-family: ui-monospace, monospace; font-size: 12px; }
.xg-g-note { margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.8; }

/* ---- 块容器 ---- */
.xg-block { margin-bottom: 12px; }
.xg-block > h4 { margin: 0 0 10px; }
/* 文献对照：解读单元格是 A / B 两行，必须保留换行，否则 A、B 会挤成一句话 */
.xg-block .fs-tb table.tb td { white-space: pre-line; line-height: 1.75; }
.xg-block .fs-tb table.tb td:nth-child(1) { min-width: 92px; }
.xg-block .fs-tb table.tb td:nth-child(3) { min-width: 260px; }
.xg-block .fs-tb table.tb td:nth-child(4) { min-width: 180px; color: var(--text-3); font-size: 12px; }

/* ---- 总结 ---- */
.xg-sum {
  margin: 0; font-size: calc(20px * var(--fs-scale, 1)); line-height: 1.8; color: var(--text);
  padding: 2px 0 0;
}
/* 非弹窗结果页里的「总结」标题，与 .sum-block > h4 / .pg-sum-t 同档 */
.sum-h { font-size: calc(24px * var(--fs-scale, 1)) !important; letter-spacing: .05em; line-height: 1.32; color: var(--gold); }
/* 报告存档页的总结正文（.qr-p / .rep-sum）也要吃同一档 24px，它们各自的字号更具体，故加 !important */
.sum-p { font-size: calc(20px * var(--fs-scale, 1)) !important; line-height: 1.8; color: var(--text); }

/* ---- 窄屏 ---- */
@media (max-width: 820px) {
  .xg-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .xg-bar-p { grid-column: 1 / -1; order: 3; }
  .xg-mh { grid-template-columns: minmax(0, 1fr) 104px 38px 46px; gap: 6px; padding: 10px; font-size: 12px; }
  .xg-mc { display: none; }
  .xg-mv { font-size: 12px; white-space: normal; line-height: 1.4; }
  .xg-pti { grid-template-columns: 20px minmax(0, 1fr); gap: 4px 9px; }
  .xg-pti em { grid-column: 2; }
  .xg-pti i { grid-column: 2; }
  .xg-stage, .xg-stage img { max-height: 52vh; }
  .xg-g-bar { height: 56px; }
  .xg-g-seg b { font-size: 12px; }
  .xg-g-seg em { font-size: 12px; }
}

/* ============================================================
   仿真罗盘 · 三合盘（FsDial）
   外方木托 + 内圆铜盘 + 360° 三档刻度 + 二十四山 + 后天八卦 + 天池磁针
   仿实物：木纹渐变、铜圈高光、盘面内阴影、玻璃反光、磁针微摆
   ============================================================ */
:root {
  --cp-wood-hi: #4b3a26; --cp-wood: #2e2417; --cp-wood-lo: #150f08;
  --cp-brass-1: #6a5127; --cp-brass-2: #d8b56b; --cp-brass-3: #3b2c12;
  --cp-face: #1a1510; --cp-face-hi: #261e16;
  --cp-pool: #0a0f14; --cp-pool-hi: #17222d;
  --cp-ink: #e6cd92; --cp-ink-dim: #a98f5c;
  --cp-yang: #e0857a; --cp-yin: #c2b191;
  --cp-tick: rgba(216, 181, 107, .55);
  --cp-tick-2: rgba(216, 181, 107, .34);
  --cp-n: #d4503f; --cp-s: #2a2f36;
  --cp-fish: rgba(212, 80, 63, .62);
  /* 飞星盘 */
  --g9-wood-hi: #4b3a26; --g9-wood: #2e2417; --g9-wood-lo: #150f08;
  --g9-paper-hi: #2a231a; --g9-paper: #1d1812;
  --g9-mid-hi: #35291d; --g9-mid: #241d15;
  --g9-rule: rgba(216, 181, 107, .34);
  --g9-fiber: rgba(255, 255, 255, .024);
  --g9-ink: #e6cd92; --g9-ink-dim: #a98f5c;
  --g9-emboss: rgba(0, 0, 0, .55);
  --g9-shan: #8fb4de; --g9-xiang: #8ec9a3;
  --g9-seal: #b8412f;
}
html[data-theme="light"] {
  --cp-wood-hi: #bb9160; --cp-wood: #8b6639; --cp-wood-lo: #533718;
  --cp-brass-1: #a67e2c; --cp-brass-2: #f3dda4; --cp-brass-3: #6a4c15;
  --cp-face: #f5ecd6; --cp-face-hi: #fdf8e9;
  --cp-pool: #aec7d9; --cp-pool-hi: #dceaf4;
  --cp-ink: #49330f; --cp-ink-dim: #7c5c22;
  --cp-yang: #a83228; --cp-yin: #3b2f1c;
  --cp-tick: rgba(74, 52, 16, .62);
  --cp-tick-2: rgba(74, 52, 16, .38);
  --cp-n: #b02a22; --cp-s: #2a2f36;
  --cp-fish: rgba(176, 42, 34, .55);
  --g9-wood-hi: #bb9160; --g9-wood: #8b6639; --g9-wood-lo: #533718;
  --g9-paper-hi: #fdf8e9; --g9-paper: #f3e9d3;
  --g9-mid-hi: #f8f0dc; --g9-mid: #e9ddc1;
  --g9-rule: rgba(74, 52, 16, .42);
  --g9-fiber: rgba(120, 88, 40, .026);
  --g9-ink: #49330f; --g9-ink-dim: #7c5c22;
  --g9-emboss: rgba(255, 255, 255, .55);
  --g9-shan: #2f6ea8; --g9-xiang: #2f7d43;
  --g9-seal: #a83228;
}

.dl { width: 100%; max-width: 400px; margin: 0 auto; line-height: 0; }
.dl-svg { width: 100%; height: auto; display: block; touch-action: none; cursor: grab; user-select: none; }
.dl-svg:active { cursor: grabbing; }

.dl-wood-edge { fill: none; stroke: rgba(0, 0, 0, .38); stroke-width: 1.4; }
.dl-wood-in { fill: none; stroke: rgba(255, 255, 255, .10); stroke-width: 1; }

.dl-brass-hi { fill: none; stroke: rgba(255, 255, 255, .30); stroke-width: 1.2; }
.dl-face-edge { fill: none; stroke: rgba(0, 0, 0, .46); stroke-width: 1.6; }
.dl-ring { fill: none; stroke: var(--cp-tick-2); stroke-width: .9; }
.dl-pool-edge { fill: none; stroke: rgba(0, 0, 0, .5); stroke-width: 1.4; }

.dl-tk-t { stroke: var(--cp-tick-2); stroke-width: .55; }
.dl-tk-m { stroke: var(--cp-tick); stroke-width: .85; }
.dl-tk-b { stroke: var(--cp-ink); stroke-width: 1.35; }

.dl-degn {
  font-family: var(--sans); font-size: 8px; fill: var(--cp-ink-dim);
  letter-spacing: .02em; font-variant-numeric: tabular-nums; opacity: .92;
}
.dl-shan {
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  fill: var(--cp-yang); letter-spacing: 0;
}
.dl-shan.yin { fill: var(--cp-yin); }
.dl-shan.cand { fill: var(--warn, #e0a35a); opacity: .8; }
.dl-shan.on {
  fill: var(--cp-n); font-size: 16px; font-weight: 700;
}
.dl-yao { fill: var(--cp-ink); opacity: .84; }
.dl-fish line { stroke: var(--cp-fish); stroke-width: .9; }
.dl-needle { transform-box: view-box; transform-origin: 200px 200px; animation: dlSway 7.5s ease-in-out infinite; }
@keyframes dlSway {
  0%, 100% { transform: rotate(-1.25deg); }
  50% { transform: rotate(1.25deg); }
}
.dl-nn { fill: var(--cp-n); }
.dl-ns { fill: var(--cp-s); }
.dl-pin { fill: #c9a24d; stroke: rgba(0, 0, 0, .45); stroke-width: .8; }
.dl-pin-hi { fill: rgba(255, 255, 255, .72); }

.dl-mark { fill: var(--cp-n); }
.dl-mark-in { fill: var(--cp-n); opacity: .5; }
.dl-glare { pointer-events: none; }
.dl-glare2 { fill: none; stroke: rgba(255, 255, 255, .10); stroke-width: 6; pointer-events: none; }

/* 结果页侧栏补充 */
.fs-c-kv { margin-top: 12px; display: grid; gap: 6px; }
.fs-c-kv div { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.fs-c-kv b { font-family: var(--serif); font-size: 17px; color: var(--gold); min-width: 62px; font-variant-numeric: tabular-nums; }
.fs-c-tip {
  font-size: 12px; color: var(--text-3); line-height: 1.7; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed var(--line-soft);
}

/* 测量页的实时罗盘 */
.fs-cp .dl { max-width: 300px; }
.fs-cp-val i { font-style: normal; font-size: 14px; color: var(--text-3); margin-left: 6px; letter-spacing: .08em; }

@media (max-width: 700px) {
  .fs-compass .dl { max-width: 340px; }
  .fs-cp .dl { max-width: 268px; }
  .dl-shan { font-size: 14px; }
  .dl-shan.on { font-size: 16px; }
  .dl-degn { font-size: 6.5px; }
}

.dl-grain { opacity: 1; }
.dl-grain path { fill: none; stroke: rgba(255, 255, 255, .085); stroke-width: 1.6; }
html[data-theme="light"] .dl-grain path { stroke: rgba(60, 38, 10, .16); }

/* ---- 五格：五个方格里是数理，下面的注释说明为什么不评吉凶 ----
 * 五格是数理结构，不是评分条：数字用等宽数位对齐，格名与五行压小一档，
 * 让「天 17 / 人 24 / 地 21 / 外 14 / 总 37」一眼能横向比较。 */
.wg-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 4px; }
.wg-i {
  padding: 9px 4px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 10px;
}
.wg-i .k { display: block; font-size: calc(12px * var(--fs-scale, 1)); color: var(--text-3); letter-spacing: .08em; }
.wg-i b {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: calc(22px * var(--fs-scale, 1)); line-height: 1.25;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.wg-i .wx { display: block; font-size: calc(11.5px * var(--fs-scale, 1)); color: var(--text-2); }
@media (max-width: 640px) {
  .wg-row { gap: 5px; }
  .wg-i { padding: 7px 2px; border-radius: 8px; }
  .wg-i b { font-size: calc(18px * var(--fs-scale, 1)); }
  .wg-i .k, .wg-i .wx { font-size: calc(10.5px * var(--fs-scale, 1)); }
}

/* 表单里的复选框：全局 `input { width:100% }` 会把勾选框拉成整行宽，
   文字被挤到右边。与 .xg-ai 同一个坑，这里同样显式收回。 */
.field label.chk {
  display: flex; gap: 8px; align-items: flex-start;
  cursor: pointer; line-height: 1.65; font-size: 12.5px; color: var(--text-2);
}
/* 复选框原来吃浏览器默认的 13×13，手机上是全站最小的可点元素（实测 13×13）。
   视觉放大到 18px、可点区域由整个 label 承接；窄屏再抬到 20px / 40px 行高，
   让「点得到」不依赖手指精准度。 */
.field label.chk input {
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; padding: 0;
  accent-color: var(--gold);
}
@media (max-width: 640px) {
  .field label.chk { min-height: 40px; align-items: center; }
  .field label.chk input { width: 20px; height: 20px; flex-basis: 20px; margin-top: 0; }
}