/* ============================================================
   pages.css —— 各页私有样式（高保真稿）
   移植约定：本文件 → web/assets/yh-pages.<hash>.css，与 yh-tokens 同机制。
   只放「页面级」规则；可复用组件一律在 tokens.css。
   ============================================================ */

/* ===== 首页 ===== */
.hero { padding: var(--s10) 0 var(--s9); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: center; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); letter-spacing: .2em; color: var(--gold); margin-bottom: var(--s5);
}
.hero-eyebrow::before { content: ""; width: var(--s6); height: 1px; background: var(--gold); }
.hero h1 {
  font-family: var(--serif); font-size: var(--t-hero); font-weight: 600;
  line-height: 1.14; margin: 0 0 var(--s5); letter-spacing: .01em;
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-sub { font-size: var(--t-h3); color: var(--fg-2); max-width: 30em; margin: 0 0 var(--s6); line-height: 1.9; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
/* 首屏价格带（ISS-4，B 方案）：hero 左栏最后一块；静态可见，无 JS 显隐。
   两个入口是 .tlink（弱化文字链），刻意不用 .btn —— 首屏唯一的金色实心按钮仍是 .hero-cta 的「免费排盘 →」。 */
.hero-price {
  margin-top: var(--s5); padding-left: var(--s4); max-width: 34em;
  border-left: 2px solid var(--gold-line);
}
.hero-price-line { margin: 0; font-size: var(--t-sm); line-height: 1.9; color: var(--fg-2); }
.hero-price-line [data-report-price] {
  color: var(--gold-2); font-family: var(--serif); font-size: var(--t-h3); font-weight: 600;
}
.hero-price-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin-top: var(--s1); }
/* 矮视口把 hero 的 144/96 大留白逐级收紧，保证价格带仍在首屏内（实测见 state/plan/ISS-4.md §4.4）。
   三档里没有任何 display:none —— 极端矮屏只缩字号与留白，不隐藏（可索引性优先）。 */
@media (max-height: 780px) {
  .hero { padding-top: var(--s8); padding-bottom: var(--s7); }
  .hero-sub { margin-bottom: var(--s5); }
  .hero-price { margin-top: var(--s4); }
}
@media (max-height: 700px) {
  .hero { padding-top: var(--s6); padding-bottom: var(--s5); }
  .hero-eyebrow { margin-bottom: var(--s3); }
  .hero h1 { margin-bottom: var(--s4); }
  .hero-sub { font-size: var(--t-sm); line-height: 1.75; margin-bottom: var(--s4); }
  .hero-cta { gap: var(--s2); }
  .hero-price { margin-top: var(--s3); }
}
@media (max-height: 530px) {
  .hero { padding-top: var(--s5); padding-bottom: var(--s4); }
  .hero-eyebrow { margin-bottom: var(--s1); font-size: 10px; }
  .hero h1 { font-size: 1.6rem; line-height: 1.16; margin-bottom: var(--s3); }
  .hero-sub { margin-bottom: var(--s2); line-height: 1.5; }
  .hero-cta { gap: var(--s2); }
  .hero-price { margin-top: var(--s3); padding-left: var(--s3); }
  .hero-price-line { line-height: 1.5; }
  .hero-price-links { margin-top: 0; gap: 0 var(--s4); }
}
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s7); font-size: var(--t-xs); color: var(--fg-3); }
.hero-meta b { color: var(--gold); font-weight: 600; font-family: var(--serif); font-size: var(--t-sm); margin-right: 4px; }

/* 背景装饰：极淡同心圆（纯装饰，aria-hidden） */
/* 罗盘底纹：整幅 Hero 的背景层，居中，让太极落在文字与卡片之间的空档。
   很淡（用户 2026-10-13：要「很淡很淡」），只在暗底上隐约可见。不转——
   罗盘是静止定向之物，自转会读成时钟。 */
/* 罗盘底纹：整幅 Hero 的中偏左背景，太极落在标题与卡片之间的空档；
   用户 2026-10-13 裁定「很淡很淡」，故 opacity 压到 .26，且不动（罗盘是静止定向之物）。 */
.hero-deco {
  position: absolute; top: 52%; left: 44%; transform: translate(-50%, -50%);
  width: min(840px, 84vw); height: min(840px, 84vw);
  opacity: .26; pointer-events: none; color: var(--ink-400);
  z-index: 0;
}
.hero-grid { position: relative; z-index: 1; }
.hero-deco svg { width: 100%; height: 100%; }

/* 样例命盘卡 */
.pillar-mini {
  background: var(--ink-700); border: 1px solid var(--ink-500); border-radius: var(--radius-lg);
  padding: var(--s5); position: relative;
}
.pillar-mini-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s4); }
.pillar-mini-head .ttl { font-size: var(--t-xs); letter-spacing: .16em; color: var(--fg-3); }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink-500); border: 1px solid var(--ink-500); }
.pillar-grid > div { background: var(--ink-700); padding: var(--s4) var(--s2); text-align: center; }
.pillar-grid .lbl { font-size: 10px; color: var(--fg-3); letter-spacing: .12em; margin-bottom: var(--s2); }
.pillar-grid .gan { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; font-weight: 600; }
.pillar-grid .zhi { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; font-weight: 600; margin-top: 2px; }
.pillar-grid .ss { font-size: 10px; color: var(--fg-3); margin-top: var(--s2); }
.pillar-grid .day { position: relative; }
.pillar-grid .day::before {
  content: ""; position: absolute; inset: -1px; border: 1px solid var(--gold); pointer-events: none;
}
.pillar-grid .day::after {
  content: "日主"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: .1em; background: var(--ink-700); color: var(--gold); padding: 0 5px;
}
.pillar-mini-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s4); font-size: var(--t-xs); color: var(--fg-3); }

/* 五行能量条 */
.wx { display: grid; gap: var(--s2); margin-top: var(--s4); }
.wx-row { display: grid; grid-template-columns: 2.2em 1fr 2.4em; align-items: center; gap: var(--s3); font-size: var(--t-xs); }
.wx-row .nm { color: var(--fg-2); font-family: var(--serif); }
.wx-bar { height: 3px; background: var(--ink-500); position: relative; overflow: hidden; }
.wx-bar i { position: absolute; inset: 0 auto 0 0; background: var(--c, var(--gold)); width: var(--w, 0); transition: width var(--dur-4) var(--ease-out); }
.wx-row .vl { color: var(--fg-3); text-align: right; font-family: var(--mono); font-size: 10px; }

/* 数据带 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink-500); border-radius: var(--radius-lg); overflow: hidden; }
.stats > div { padding: var(--s5) var(--s4); border-right: 1px solid var(--ink-500); background: var(--ink-700); }
.stats > div:last-child { border-right: 0; }
.stats .n { font-family: var(--serif); font-size: 2rem; color: var(--gold); line-height: 1.1; }
.stats .n sup { font-size: .5em; color: var(--fg-3); margin-left: 2px; }
.stats .l { font-size: var(--t-xs); color: var(--fg-2); margin-top: var(--s2); }

/* 三能力带 */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-500); border: 1px solid var(--ink-500); border-radius: var(--radius-lg); overflow: hidden; }
.cap { background: var(--ink-700); padding: var(--s6) var(--s5); position: relative; }
.cap-no { font-family: var(--serif); font-size: var(--t-sm); color: var(--gold); letter-spacing: .1em; }
.cap h3 { font-family: var(--serif); font-size: var(--t-h3); margin: var(--s3) 0 var(--s2); font-weight: 600; }
.cap p { color: var(--fg-2); font-size: var(--t-sm); margin: 0; line-height: 1.9; }
.cap-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s4); }
.cap::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
.cap:hover::after { transform: scaleX(1); }

/* 典籍库网格 */
.book {
  padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s3);
  background: var(--ink-700); border: 1px solid var(--ink-500); border-radius: var(--radius-lg);
  position: relative; overflow: hidden;
}
.book .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ink-400); transition: background var(--dur-2) var(--ease); }
.book:hover .spine { background: var(--gold); }
.book .nm { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; }
.book .au { font-size: var(--t-xs); color: var(--fg-3); }
.book .ds { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.85; flex: 1; }
.book .mt { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--fg-3); font-family: var(--mono); }
.book .mt b { color: var(--gold); font-weight: 400; }

/* 类目筛选条 */
.cat-strip { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.cat-strip button {
  border: 1px solid var(--ink-500); background: var(--ink-700); color: var(--fg-2);
  border-radius: var(--radius); padding: 7px var(--s4); font-size: var(--t-sm); cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease);
}
.cat-strip button:hover { border-color: var(--gold-line); color: var(--fg); }
.cat-strip button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 600; }
.cat-strip button small { opacity: .6; margin-left: 6px; font-size: 10px; }

/* 首页排盘入口卡 */
.demo-bar { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-bottom: var(--s5); }
.entry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--s4); align-items: end; }
@media (max-width: 900px) { .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .entry-grid > .btn { grid-column: 1 / -1; } }
@media (max-width: 520px) { .entry-grid { grid-template-columns: 1fr; } }

/* ===== 阅读器 ===== */
.rd-head { padding: var(--s8) 0 var(--s6); }
.crumb { font-size: var(--t-xs); color: var(--fg-3); letter-spacing: .08em; margin-bottom: var(--s5); }
.crumb a { color: var(--fg-3); }
.crumb a:hover { color: var(--gold); }
.rd-head h1 { font-family: var(--serif); font-size: var(--t-h1); font-weight: 600; margin: 0 0 var(--s3); }
.rd-head h1 small { font-size: .42em; color: var(--fg-3); letter-spacing: .12em; margin-left: var(--s4); font-weight: 400; }
.rd-head .sub { color: var(--fg-2); font-size: var(--t-sm); margin: 0; }
.rd-summary {
  margin-top: var(--s5); padding: var(--s4) var(--s5); border-left: 2px solid var(--gold);
  background: var(--gold-dim); font-size: var(--t-body); color: var(--fg); line-height: 1.95; max-width: var(--w-read);
}

/* 工具条：与正文同容器（.wrap 内），贴顶。左右边界与正文严格对齐 */
.rd-bar {
  margin: 0 0 var(--s6);
  position: sticky; top: 60px; z-index: 20;
  background: color-mix(in srgb, var(--ink-800) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--ink-500); border-bottom: 1px solid var(--ink-500);
  padding: var(--s2) 0;
}
/* 工具条三段：左＝对照方式＋字号，右＝三个开关。
   用 grid 三列而非 flex+margin-left:auto——后者在溢出容器里不生效，
   会让右侧工具组贴在中部、与正文右边缘对不齐。 */
.rd-bar-in { display: grid; grid-template-columns: auto auto 1fr; gap: var(--s3); align-items: center; }
.rd-bar .seg { flex: none; }
.rd-bar .seg button { padding: 6px var(--s3); font-size: var(--t-xs); min-height: 32px; white-space: nowrap; }
.rd-tools { justify-self: end; display: flex; gap: var(--s2); flex: none; }
.rd-tools button {
  border: 1px solid var(--ink-500); background: var(--ink-700); color: var(--fg-2);
  border-radius: var(--radius); min-height: 32px; padding: 0 var(--s3); font-size: var(--t-xs); cursor: pointer;
  white-space: nowrap; transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
                                    background var(--dur-2) var(--ease);
}
.rd-tools button:hover { border-color: var(--gold); color: var(--gold); }
.rd-tools button[aria-pressed="true"] { background: var(--gold-dim); border-color: var(--gold-line); color: var(--gold); }
/* 窄屏：三段退回横滑，避免挤压 */
@media (max-width: 760px) {
  .rd-bar-in { grid-template-columns: auto auto; row-gap: var(--s2); }
  .rd-tools { grid-column: 1 / -1; justify-self: stretch; overflow-x: auto; scrollbar-width: none; }
}

/* 阅读器版心：PC 用 --w-max 通栏（不是窄阅读栏），行宽靠字号与行距控制。
   工具条与正文同在 .wrap 内，左右边界严格对齐（不再各自设 max-width）。 */
.rd-summary { max-width: 74ch; }
.rd-foot { margin: var(--s8) 0 0; padding-top: var(--s6); border-top: 1px solid var(--ink-500); }

/* 亮主题：原文纸块用更浅的纸色，避免宣纸底上显脏 */
[data-theme="light"] .dui blockquote {
  background: color-mix(in srgb, var(--gold) 7%, var(--ink-700));
  border-left-color: var(--gold);
}

/* 上 / 下篇导航 */
.rd-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s7); }
.rd-pager-card {
  padding: var(--s5); border: 1px solid var(--ink-500); border-radius: var(--radius-lg);
  background: var(--ink-700); display: grid; gap: var(--s2);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.rd-pager-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.rd-pager-card .dir { font-size: var(--t-xs); color: var(--fg-3); letter-spacing: .1em; }
.rd-pager-card:hover .dir { color: var(--gold); }
.rd-pager-card .ttl { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; }
.rd-pager-card--next { text-align: right; }
@media (max-width: 640px) { .rd-pager { grid-template-columns: 1fr; } }

/* 字号切换（小/中/大）：三档不只改字号，**整套排版节奏跟着变**。
   小号 = 行距更紧、块内留白更小、段间距更窄 → 信息密度高、阅读效率优先；
   大号 = 行距松、留白大 → 舒适优先。默认中档。 */
html[data-fs="s"] {
  --rd-src: 1.0625rem; --rd-plain: .9375rem; --rd-line: 1.8;
  --rd-pad: var(--s3);      /* 原文块内距 */
  --rd-sec: var(--s4);      /* 段间距 */
  --rd-gap: var(--s3);      /* 层间距（白话→通俗理解→小注） */
}
html[data-fs="m"] {
  --rd-src: 1.1875rem; --rd-plain: 1.0625rem; --rd-line: 1.95;
  --rd-pad: var(--s4);
  --rd-sec: var(--s5);
  --rd-gap: var(--s4);
}
html[data-fs="l"] {
  --rd-src: 1.375rem; --rd-plain: 1.25rem; --rd-line: 2.1;
  --rd-pad: var(--s5);
  --rd-sec: var(--s6);
  --rd-gap: var(--s5);
}
.dui blockquote { font-size: var(--rd-src, 1.1875rem); line-height: var(--rd-line, 1.95); }
.dui .plain { font-size: var(--rd-plain, 1.0625rem); line-height: var(--rd-line, 1.95); }

/* 四层逐段对照。版心为 --w-max（1180px），靠字号与行距把每行汉字数压回舒适区。
   差异化**不用文字标签**（「原文」「白话」字样干扰阅读），全靠版式：
   原文 ＝ 暖纸色块 + 衬线 + 金色粗左边框 + 无引号
   白话 ＝ 无衬线 + 细灰左边框 + 「」引号 + 次级文字色
   通俗理解 ＝ 金淡底圆角块；术语小注 ＝ 灰字 + 「注」小章 */
.dui { padding: var(--rd-sec, var(--s5)) 0; border-bottom: 1px solid var(--ink-500); }
.dui:last-child { border-bottom: 0; }
/* 原文：暖纸色块（暗色下是「褪金纸」），衬线 19px，左金边 */
/* 左右两栏文字左边界必须严格对齐：
   原文 ＝ 金边 3px + padding-left 24px → 文字起 27px
   白话 ＝ 细线 1px + padding-left 26px → 文字起 27px
   （两者左边界同值，眼睛看才是齐的） */
.dui blockquote {
  margin: 0; font-family: var(--serif);
  color: var(--fg); padding: var(--rd-pad, var(--s4)); padding-left: var(--s5);
  background: color-mix(in srgb, var(--gold) 8%, var(--ink-700));
  border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0;
}
/* 白话：无衬线，细缩排、无底色，与原文的纸块形成明显反差 */
.dui .plain { margin: 0; color: var(--fg-2); padding-left: calc(var(--s5) + 2px); border-left: 1px solid var(--ink-500); }
.dui .plain::before, .dui .plain::after { color: var(--ink-400); }
.dui .gist { margin: var(--rd-gap, var(--s4)) 0 0; padding: calc(var(--rd-pad, var(--s4)) - var(--s1)) var(--s4); background: var(--gold-dim); border-radius: var(--radius); font-size: var(--t-body); color: var(--fg-2); line-height: 1.85; }
.dui .gist b { color: var(--gold); font-weight: 600; font-size: var(--t-xs); letter-spacing: .1em; margin-right: 6px; }
.dui .notes { list-style: none; margin: var(--rd-gap, var(--s4)) 0 0; padding: 0; display: grid; gap: var(--s2); }
.dui .notes li { font-size: var(--t-body); color: var(--fg-3); padding-left: var(--s5); position: relative; line-height: 1.8; }
.dui .notes li::before {
  content: "注"; position: absolute; left: 0; top: 2px; font-size: 10px; color: var(--ink-400);
  border: 1px solid var(--ink-500); padding: 0 3px; line-height: 1.5;
}
/* 左右对照：原文在左、白话在右，且**同段基线对齐**（尽量在一行）。
   DOM 顺序即视觉顺序：.dui-src(原文) ｜ .dui-body(白话) */
@media (min-width: 1080px) {
  body.side .dui {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 0 var(--s6);
    align-items: start;
  }
  body.side .dui-src,
  body.side .dui-body { min-width: 0; }
  /* 原文块贴左栏顶，白话贴右栏顶 ⇒ 首行天然对齐 */
  /* 原文块去掉右圆角、白话去掉左缩排，让两栏在中间缝上无缝相接 */
  body.side .dui blockquote {
    border-radius: 0 var(--radius) var(--radius) 0;
    height: 100%;
  }
  body.side .dui .plain { padding-left: var(--s5); }
  /* 中间发丝线，替代原先的 border-bottom 观感 */
  body.side .dui { border-bottom: 1px solid var(--ink-500); }
}

/* ===== 排盘页 ===== */
.ch-grid { display: grid; grid-template-columns: 400px 1fr; gap: var(--s7); padding: var(--s7) 0 var(--s9); align-items: start; }
.ch-form { position: sticky; top: 84px; }
.ch-card { padding: var(--s5); }
.ch-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s4); border-bottom: 1px solid var(--ink-500); }
.ch-card-head .ttl { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; display: flex; align-items: center; gap: var(--s2); }
.ch-card-head .ttl i { font-style: normal; color: var(--gold); }
.ch-card-head .sub { font-size: var(--t-xs); color: var(--fg-3); }
.ch-body { display: grid; gap: var(--s4); padding-top: var(--s4); }
.ch-row { display: grid; gap: var(--s3); }
.ch-row-2 { grid-template-columns: 1fr 1fr; }
.ch-geo { position: relative; }
.ch-geo-x {
  position: absolute; right: var(--s2); top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--ink-500); background: var(--ink-600); color: var(--fg-3);
  border-radius: var(--radius); cursor: pointer; font-size: 12px;
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.ch-geo-x:hover { border-color: var(--gold); color: var(--gold); }
.ch-dd {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: var(--ink-700); border: 1px solid var(--gold-line); border-radius: var(--radius);
  max-height: 260px; overflow: auto; padding: 4px;
}
.ch-dd[hidden] { display: none; }
.ch-dd button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  border: 0; background: transparent; color: var(--fg); cursor: pointer; text-align: left;
  padding: var(--s2) var(--s3); border-radius: 1px; font-size: var(--t-sm);
}
.ch-dd button:hover, .ch-dd button.hi { background: var(--gold-dim); }
.ch-dd .rg { display: block; font-size: 10px; color: var(--fg-3); margin-top: 2px; }
.ch-dd .lon { font-family: var(--mono); font-size: 10px; color: var(--gold); flex: none; }
.ch-dd .ai { font-size: 9px; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); padding: 0 4px; border-radius: 2px; margin-left: 4px; }
.ch-dd-empty { padding: var(--s4) var(--s3); font-size: var(--t-xs); color: var(--fg-3); text-align: center; line-height: 1.8; }
.ch-adv { padding: var(--s4); border: 1px dashed var(--ink-400); border-radius: var(--radius); display: grid; gap: var(--s3); }
.ch-adv[hidden] { display: none; }
.ch-adv-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-xs); color: var(--fg-3); }
.ch-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.ch-tz { padding: var(--s3); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: var(--radius); font-size: var(--t-xs); color: var(--fg-2); line-height: 1.8; }
.ch-tz[hidden] { display: none; }
.ch-tz b { color: var(--warn); font-family: var(--mono); font-weight: 400; }
.ch-tz button { border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); background: transparent; color: var(--warn); border-radius: var(--radius); padding: 2px 8px; font-size: 10px; cursor: pointer; margin: 0 4px; }
.ch-tz button:hover { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.ch-leap { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-xs); color: var(--fg-2); }
.ch-leap label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ch-leap input { accent-color: var(--gold); width: 15px; height: 15px; }
.ch-leap .echo { color: var(--gold); font-family: var(--mono); }
.ch-leap.off label { opacity: .45; cursor: not-allowed; }
.ch-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s2); }
.ch-submit { min-width: 190px; }
.ch-drafts { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--t-xs); color: var(--fg-3); }
.ch-drafts button {
  border: 1px solid var(--ink-500); background: var(--ink-700); color: var(--fg-2);
  border-radius: var(--radius); padding: 4px var(--s3); font-size: var(--t-xs); cursor: pointer;
  font-family: var(--mono); transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.ch-drafts button:hover { border-color: var(--gold); color: var(--gold); }
.ch-hint { font-size: var(--t-xs); color: var(--fg-3); line-height: 1.85; margin: 0; }
.ch-hint--err { color: var(--danger); }
.ch-quota { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* 结果区空态前的「会得到什么」引导 */
.ch-guide { border: 1px solid var(--ink-500); border-radius: var(--radius-lg); padding: var(--s5); background: var(--ink-700); }
.ch-guide-head { margin-bottom: var(--s4); }
.ch-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.ch-gcard { padding: var(--s4); }
.ch-gcard h4 { font-family: var(--serif); font-size: var(--t-sm); font-weight: 600; margin: 0 0 var(--s2); color: var(--gold); }
.ch-gcard p { margin: 0; font-size: var(--t-xs); color: var(--fg-2); line-height: 1.85; }
.ch-guide-foot {
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--ink-500);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
}
.ch-guide-foot p { margin: 0; font-size: var(--t-xs); color: var(--fg-3); flex: 1; min-width: 240px; line-height: 1.8; }
.ch-empty { padding: var(--s9) var(--s5); border: 1px dashed var(--ink-500); border-radius: var(--radius-lg); text-align: center; color: var(--fg-3); }
.ch-empty .big { font-family: var(--serif); font-size: var(--t-h2); color: var(--fg-2); margin-bottom: var(--s3); }
.ch-empty p { font-size: var(--t-sm); margin: 0 0 var(--s2); }

/* 排盘结果 */
.res-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.res-head h1 { font-family: var(--serif); font-size: var(--t-h2); font-weight: 600; margin: 0; }
.res-head .meta { font-size: var(--t-xs); color: var(--fg-3); font-family: var(--mono); }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.res-card { padding: var(--s5); }
.res-card.wide { grid-column: 1 / -1; }
.res-card h3 {
  font-size: var(--t-xs); letter-spacing: .14em; color: var(--gold); margin: 0 0 var(--s4);
  font-weight: 600; display: flex; align-items: center; gap: var(--s2);
}
.res-card h3 .r { margin-left: auto; font-family: var(--mono); letter-spacing: 0; color: var(--fg-3); font-size: 10px; }
.kv { display: grid; gap: var(--s3); }
.kv .row { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--t-sm); }
.kv .row dt { color: var(--fg-3); flex: none; }
.kv .row dd { margin: 0; text-align: right; }
.kv .row dd b { color: var(--gold); font-weight: 400; font-family: var(--mono); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.score { display: flex; align-items: center; gap: var(--s3); }
.score .bar { flex: 1; height: 4px; background: var(--ink-500); position: relative; border-radius: 2px; }
.score .bar i { position: absolute; inset: 0 auto 0 0; background: var(--gold); border-radius: 2px; }
.score .n { font-family: var(--mono); font-size: var(--t-sm); color: var(--gold); }
.yongshen { display: grid; gap: var(--s4); }
.ys-method { border-left: 2px solid var(--gold); padding-left: var(--s4); }
.ys-method .nm { font-size: var(--t-xs); color: var(--gold); letter-spacing: .08em; margin-bottom: var(--s2); }
.ys-method p { margin: 0; font-size: var(--t-sm); color: var(--fg-2); line-height: 1.9; }
.ys-quote { font-family: var(--serif); font-size: var(--t-sm); color: var(--fg-3); border-left: 1px solid var(--ink-500); padding-left: var(--s3); margin: var(--s3) 0 0; line-height: 1.95; }
.tabs { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.luck-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.luck { border: 1px solid var(--ink-500); border-radius: var(--radius); padding: var(--s3); text-align: center; }
.luck.now { border-color: var(--gold); background: var(--gold-dim); }
.luck .y { font-family: var(--mono); font-size: 10px; color: var(--fg-3); }
.luck .gz { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; margin: var(--s1) 0; }
.luck .tag { font-size: 10px; color: var(--fg-3); }
.luck.now .tag { color: var(--gold); }
.res-foot { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--ink-500); }

.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.term-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.book-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }

/* ===== 报告页 ===== */
.rp-head { padding: var(--s8) 0 var(--s6); }
.rp-head h1 { font-family: var(--serif); font-size: var(--t-h1); font-weight: 600; margin: 0 0 var(--s3); }
.rp-meta { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: var(--s4); }
.rp-grid { padding-bottom: var(--s9); }
.unlock {
  margin-bottom: var(--s6); padding: var(--s5) var(--s6); border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, var(--gold-dim), transparent); border-radius: var(--radius-lg);
  display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap;
}
.unlock .t { flex: 1; min-width: 220px; }
.unlock .t b { display: block; font-family: var(--serif); font-size: var(--t-h3); color: var(--gold); margin-bottom: 4px; }
.unlock .t span { font-size: var(--t-sm); color: var(--fg-2); }
.price { text-align: right; }
.price .n { font-family: var(--serif); font-size: 1.9rem; color: var(--fg); line-height: 1; }
.price .l { font-size: var(--t-xs); color: var(--fg-3); margin-top: 4px; }
.prog { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-xs); color: var(--fg-3); margin-bottom: var(--s5); }
.prog .bar { flex: 1; max-width: 220px; height: 2px; background: var(--ink-500); position: relative; }
.prog .bar i { position: absolute; inset: 0 auto 0 0; background: var(--gold); width: 11%; }
.report-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s7); align-items: start; }
.toc { position: sticky; top: 84px; font-size: var(--t-sm); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.toc a { display: flex; gap: var(--s3); padding: 7px var(--s3); color: var(--fg-2); border-radius: var(--radius); transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.toc a:hover { background: var(--ink-700); color: var(--fg); }
.toc a.on { background: var(--gold-dim); color: var(--gold); }
.toc a .no { font-family: var(--mono); font-size: 10px; color: var(--gold-3); padding-top: 2px; }
.toc a.on .no { color: var(--gold); }
.toc a.lock { color: var(--fg-3); }
.toc a.lock .no::after { content: "🔒"; font-size: 9px; margin-left: 2px; }
.toc a .t { flex: 1; }
.toc a .free { font-size: 10px; color: var(--ok); }
.toc-cap {
  display: none; width: 100%; align-items: center; justify-content: space-between;
  border: 1px solid var(--ink-500); background: var(--ink-700); color: var(--fg-2);
  border-radius: var(--radius); min-height: 40px; padding: 0 var(--s4);
  font-size: var(--t-xs); letter-spacing: .12em; cursor: pointer; margin-bottom: var(--s3);
}
.toc-cap i { font-style: normal; font-size: 9px; color: var(--fg-3); }
.toc-cap[aria-expanded="false"] i { transform: rotate(-90deg); }
@media (max-width: 1024px) {
  .toc-cap { display: flex; }
  .toc[data-fold="1"] ol { display: none; }
  .report-grid { grid-template-columns: minmax(0, 1fr); }
}
.chapter { padding: var(--s6) 0; border-bottom: 1px solid var(--ink-500); }
.chapter-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.chapter-no { font-family: var(--mono); font-size: var(--t-sm); color: var(--gold); }
.chapter-title { font-family: var(--serif); font-size: var(--t-h2); font-weight: 600; margin: 0; }
.chapter-body { color: var(--fg-2); line-height: 2.05; }
.chapter-body p { margin: 0 0 var(--s4); }
.chapter-body h4 { font-size: var(--t-body); color: var(--fg); margin: var(--s5) 0 var(--s3); font-weight: 600; }
.chapter-refs { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px dashed var(--ink-500); }
.chapter-refs summary { font-size: var(--t-xs); color: var(--gold); cursor: pointer; letter-spacing: .08em; list-style: none; }
.chapter-refs summary::-webkit-details-marker { display: none; }
.chapter-refs summary::before { content: "▸ "; }
.chapter-refs[open] summary::before { content: "▾ "; }
.chapter-refs ul { margin: var(--s3) 0 0; padding-left: var(--s4); display: grid; gap: var(--s2); font-size: var(--t-sm); color: var(--fg-3); }
sup.ref { font-family: var(--mono); font-size: 10px; color: var(--gold); cursor: pointer; }
.chapter--locked .chapter-body { position: relative; }
.lock-veil { position: relative; filter: blur(5px); opacity: .35; user-select: none; pointer-events: none; max-height: 150px; overflow: hidden; }
.lock-note {
  margin-top: var(--s4); padding: var(--s4); border: 1px dashed var(--gold-line);
  border-radius: var(--radius); display: flex; align-items: center; gap: var(--s4);
  flex-wrap: wrap; background: var(--gold-dim);
}
.lock-note .txt { flex: 1; min-width: 200px; font-size: var(--t-sm); color: var(--fg-2); }
.lock-note .txt b { color: var(--gold); display: block; font-family: var(--serif); font-size: var(--t-body); margin-bottom: 2px; }

/* ===== 术语库 ===== */
.sy-head { padding: var(--s8) 0 var(--s6); }
.sy-head h1 { font-family: var(--serif); font-size: var(--t-h1); font-weight: 600; margin: 0 0 var(--s4); }
.sy-head .lead { color: var(--fg-2); max-width: 56ch; font-size: var(--t-h3); line-height: 1.95; margin: 0; }
.sy-grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--s7); padding-bottom: var(--s9); align-items: start; }
.side { position: sticky; top: 84px; }
.side .grp { font-size: var(--t-xs); letter-spacing: .14em; color: var(--fg-3); margin: 0 0 var(--s3); }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side button {
  width: 100%; text-align: left; border: 0; background: transparent; color: var(--fg-2);
  padding: 8px var(--s3); font-size: var(--t-sm); cursor: pointer; border-radius: var(--radius);
  display: flex; justify-content: space-between; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.side button:hover { background: var(--ink-700); color: var(--fg); }
.side button[aria-pressed="true"] { background: var(--gold-dim); color: var(--gold); }
.side button small { color: var(--fg-3); font-family: var(--mono); font-size: 10px; }
.term-list { display: grid; gap: var(--s4); }
.term-item { padding: var(--s5); }
.term-item .q { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; margin: 0 0 var(--s2); }
.term-item .q em { font-style: normal; color: var(--gold); }
.term-item .a { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.95; margin: 0; }
.term-item .src { margin-top: var(--s4); font-size: var(--t-xs); color: var(--fg-3); display: flex; align-items: center; gap: 6px; }
.term-item .src::before { content: ""; width: 12px; height: 1px; background: var(--gold); }
.term-item .src a { color: var(--gold); }
.term { padding: var(--s5); }
.term .q { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; margin-bottom: var(--s2); }
.term .q em { font-style: normal; color: var(--gold); }
.term .a { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.9; }
.term .src { margin-top: var(--s4); font-size: var(--t-xs); color: var(--fg-3); display: flex; align-items: center; gap: 6px; }
.term .src::before { content: ""; width: 12px; height: 1px; background: var(--gold); }
@media (max-width: 900px) {
  .sy-grid { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; min-width: 0; }
  /* 横滚容器必须 min-width:0 + max-width:100%，否则内容宽度会撑破（2026-10-13 实测溢出 195px） */
  .side ul {
    grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; padding-bottom: var(--s2);
    min-width: 0; max-width: 100%;
  }
  .side button { white-space: nowrap; border: 1px solid var(--ink-500); }
  .side button[aria-pressed="true"] { border-color: var(--gold-line); }
}

/* ===== 奇人堂 ===== */
/* 奇人堂页头：撑满 wrap，不再限 760px（限宽会让标题挤在左侧一小块） */
.qr-head { padding: var(--s8) 0 var(--s7); }
.qr-head h1 { font-family: var(--serif); font-size: var(--t-h1); font-weight: 600; margin: 0 0 var(--s4); }
.qr-head .lead { color: var(--fg-2); font-size: var(--t-h3); line-height: 1.95; margin: 0; max-width: 56ch; }
.qr-note { margin-top: var(--s5); display: flex; gap: var(--s3); flex-wrap: wrap; }
.qr-list { padding-bottom: var(--s9); display: grid; gap: var(--s4); }
/* 命例行：编号+标题+摘要 ｜ 四柱 ｜ 印章 */
.qr-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s6); padding: var(--s5) var(--s6); align-items: center; }
.qr-main { min-width: 0; }
.qr-main .no { font-family: var(--mono); font-size: var(--t-xs); color: var(--gold); letter-spacing: .1em; }
.qr-main h2 { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; margin: var(--s1) 0 6px; line-height: 1.6; }
.qr-main .ds { font-size: var(--t-sm); color: var(--fg-2); margin: 0; line-height: 1.85; }
.qr-row .pillars { display: flex; gap: var(--s2); }
.qr-row .pillars span {
  font-family: var(--serif); font-size: var(--t-body); border: 1px solid var(--ink-500);
  padding: 2px 7px; border-radius: 2px; background: var(--ink-600);
}
.qr-row .go { color: var(--fg-3); transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.qr-row:hover .go { color: var(--gold); transform: translateX(4px); }
.case { padding: var(--s5); position: relative; }
.case .no { font-family: var(--mono); font-size: var(--t-xs); color: var(--gold); }
.case h3 { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; margin: var(--s2) 0 var(--s3); line-height: 1.6; }
.case .ds { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.9; }
.case .cert { margin-top: var(--s4); display: flex; gap: var(--s2); }
.seal {
  width: 46px; height: 46px; display: grid; place-items: center; text-align: center;
  border: 1.5px solid var(--gold); color: var(--gold); font-family: var(--serif);
  font-size: 11px; line-height: 1.15; letter-spacing: .02em; background: var(--gold-dim);
  border-radius: 2px; transform: rotate(-4deg);
}
.seal--warn { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
@media (max-width: 900px) {
  .qr-row { grid-template-columns: 1fr; gap: var(--s4); }
  .qr-row .pillars { order: 3; }
  .qr-row .seal { justify-self: start; }
}

/* ===== 账户页 ===== */
/* 未登录空态 */
.ac-empty {
  padding: var(--s9) var(--s5); border: 1px dashed var(--ink-500); border-radius: var(--radius-lg);
  text-align: center; background: var(--ink-700);
}
.ac-empty-icon { color: var(--fg-3); margin-bottom: var(--s5); }
.ac-empty-icon svg { width: 56px; height: 56px; margin: 0 auto; }
.ac-empty h2 { font-family: var(--serif); font-size: var(--t-h2); font-weight: 600; margin: 0 0 var(--s4); }
.ac-empty > p { color: var(--fg-2); font-size: var(--t-sm); line-height: 1.95; margin: 0 auto var(--s6); max-width: 46ch; }
.ac-empty-cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }
.ac-empty .hint { margin: var(--s5) auto 0; }
/* 示例区 */
.ac-demo { margin-top: var(--s6); }
.ac-demo-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.ac-demo .rp-list { gap: var(--s3); }
.ac-head { padding: var(--s8) 0 var(--s6); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.ac-head h1 { font-family: var(--serif); font-size: var(--t-h1); font-weight: 600; margin: 0; }
.ac-head .sub { color: var(--fg-2); font-size: var(--t-sm); margin: var(--s2) 0 0; }
.ac-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--s7); padding-bottom: var(--s9); align-items: start; }
.rp-list { display: grid; gap: var(--s3); }
.rp-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); }
.rp-row .nm { font-family: var(--serif); font-size: var(--t-body); font-weight: 600; }
.rp-row .mt { font-size: var(--t-xs); color: var(--fg-3); margin-top: 4px; display: flex; gap: var(--s3); flex-wrap: wrap; }
.rp-row .st { display: flex; gap: var(--s2); align-items: center; }
.side-card { padding: var(--s5); }
.side-card h3 { font-size: var(--t-xs); letter-spacing: .14em; color: var(--fg-3); margin: 0 0 var(--s4); font-weight: 600; }
.quota { display: grid; gap: var(--s4); }
.quota .row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-sm); }
.quota .row b { font-family: var(--serif); font-size: var(--t-h3); color: var(--gold); font-weight: 600; }
.quota .row span { color: var(--fg-2); }
.danger-zone { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px dashed var(--ink-500); }
.danger-zone button {
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: transparent;
  color: var(--danger); border-radius: var(--radius); min-height: 36px; padding: 0 var(--s4);
  font-size: var(--t-xs); cursor: pointer; transition: background var(--dur-2) var(--ease);
}
.danger-zone button:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.danger-zone p { font-size: var(--t-xs); color: var(--fg-3); margin: var(--s3) 0 var(--s4); line-height: 1.8; }
@media (max-width: 900px) { .ac-grid { grid-template-columns: 1fr; } }

/* ===== 典籍库 ===== */
.lib-head { padding: var(--s8) 0 var(--s7); }
.lib-head .crumb { font-size: var(--t-xs); color: var(--fg-3); letter-spacing: .1em; margin-bottom: var(--s5); }
.lib-head .crumb a { color: var(--fg-3); }
.lib-head .crumb a:hover { color: var(--gold); }
.lib-head h1 { font-family: var(--serif); font-size: var(--t-h1); font-weight: 600; margin: 0 0 var(--s4); }
.lib-head .lead { color: var(--fg-2); max-width: 56ch; font-size: var(--t-h3); line-height: 1.95; margin: 0; }
.lib-tools { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); align-items: center; }
.search { flex: 1; min-width: 240px; max-width: 420px; position: relative; }
.search input { padding-left: 34px; }
.search .ic { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--fg-3); font-size: 13px; }
.lib-cat { padding: var(--s7) 0; border-top: 1px solid var(--ink-500); }
.lib-cat-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s5); gap: var(--s4); flex-wrap: wrap; }
.lib-cat-head h2 { font-family: var(--serif); font-size: var(--t-h2); font-weight: 600; margin: 0; }
/* 2026-10-15 UX 审查 P2-7：类目页的类目链接是「整站最常用入口」，实测 390×844 下
   命中区只有 31px 高（WCAG 2.5.5 建议 44px）。只加行内 padding，字号/排版不变。 */
.lib-cat-head h2 > a { display: inline-flex; align-items: center; min-height: 44px; }
.lib-cat-head .n { font-size: var(--t-xs); color: var(--fg-3); font-family: var(--mono); }
.lib-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ink-500); border: 1px solid var(--ink-500); border-radius: var(--radius-lg); overflow: hidden; }
.lib-row {
  background: var(--ink-700); padding: var(--s4) var(--s5); display: flex; align-items: baseline;
  gap: var(--s4); transition: background var(--dur-2) var(--ease);
}
.lib-row:hover { background: var(--ink-600); }
.lib-row .nm { font-family: var(--serif); font-size: var(--t-body); font-weight: 600; flex: none; }
.lib-row .au { font-size: var(--t-xs); color: var(--fg-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-row .mt { font-size: var(--t-xs); color: var(--fg-3); font-family: var(--mono); flex: none; }
.lib-row .mt b { color: var(--gold); font-weight: 400; }
.lib-row .tag { font-size: 10px; color: var(--gold); border: 1px solid var(--gold-line); padding: 0 5px; border-radius: 2px; flex: none; }
@media (max-width: 720px) { .lib-list { grid-template-columns: 1fr; } }

/* ===== 全局断点（放在文件末尾：确保不被任何基础定义覆盖）===== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero-deco { display: none; }
  .book-grid, .term-grid, .case-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }
  .ch-grid { grid-template-columns: 1fr; }
  .ch-form { position: static; }
  .res-grid { grid-template-columns: 1fr; }
  .ch-guide-grid { grid-template-columns: repeat(2, 1fr); }
  .luck-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sec { padding: var(--s7) 0; }
  .hero { padding: var(--s8) 0 var(--s7); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(2n) { border-right: 0; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--ink-500); }
  .book-grid, .term-grid, .case-grid { grid-template-columns: 1fr; }
  .nav-link.hide-sm { display: none; }
  .pillar-grid .gan, .pillar-grid .zhi { font-size: 1.35rem; }
  .ch-row-2 { grid-template-columns: 1fr; }
  .ch-adv-grid { grid-template-columns: 1fr; }
  .ch-guide-grid { grid-template-columns: 1fr; }
  .ch-foot { flex-direction: column; align-items: stretch; }
  .ch-submit { width: 100%; }
}