/* 六爻页：起卦方式四格 ＋ 摇卦／随机共用的六爻表（对齐设计稿 摇卦界面_v5 / _v3） */

/* 问事（可不填，用户 2026-10-18 去掉了「不写不发盘」的闸）：四格入口上方的白卡片，比其它输入框大一档 */
.ask {
  padding: calc(22 * var(--rp)) calc(26 * var(--rp)) calc(24 * var(--rp)); margin-bottom: calc(24 * var(--rp));
  background: var(--card); border: calc(2 * var(--rp)) solid var(--line); border-radius: calc(20 * var(--rp));
  box-shadow: var(--shadow);
}
/* 问事：**标签与输入同一行**（用户 2026-10-16「问事二字后面可直接接问题」）。
   标签是行内前缀（定宽、不缩），输入框吃掉剩余宽度 ⇒ 638 − 标签(2 字 @calc(33 * var(--rp)) ＋ 字距 ≈ 74) − 间距 16 ≈ calc(548 * var(--rp))。 */
.ask-row { display: flex; align-items: flex-start; }
.ask-k { flex: 0 0 auto; margin-right: calc(16 * var(--rp)); font-size: calc(33 * var(--rp)); font-weight: 600; color: var(--accent); letter-spacing: calc(4 * var(--rp)); }
/* 问事框：textarea ＋ auto-height —— 长问题自动换行，最多四行（calc(205 * var(--rp)) ＝ 4 × calc(32 * var(--rp)) × 行高 1.6），
   再长就在框内滚动，不会把卡片顶变形 */
.ask-i {
  flex: 1; min-width: 0; box-sizing: border-box; padding: 0;
  min-height: calc(53 * var(--rp));            /* 一行（32 × 1.6 ≈ 51）—— 行内后不再是 calc(76 * var(--rp)) 的独立块 */
  max-height: calc(205 * var(--rp));           /* 四行（32 × 1.6 × 4 ≈ 205），再长在框内滚动 */
  font-size: calc(32 * var(--rp)); line-height: 1.6; color: var(--ink);
}
.ask-ph { font-size: calc(33 * var(--rp)); color: #c9c1b4; letter-spacing: calc(1 * var(--rp)); }
/* 起卦时间：与问事同一张卡里的第二行 —— 起卦时间不一定是现在，可改 */
.etime { margin-top: calc(22 * var(--rp)); padding-top: calc(20 * var(--rp)); border-top: calc(1 * var(--rp)) solid var(--line-2); display: flex; align-items: center; }
/* 起卦时间：用户 2026-10-16 要求「重点显示」⇒ 标签改赭色加粗，日期/时间做成浅赭底＋赭边胶囊。
   ⚠️ 这一行的宽度最紧（实测 ~610/calc(638 * var(--rp))）：只加颜色与 calc(1 * var(--rp)) 边框，不再加内边距或字号。 */
.etime-k { flex-shrink: 0; margin-right: calc(18 * var(--rp)); font-size: calc(28 * var(--rp)); color: var(--accent); font-weight: 600; letter-spacing: calc(1 * var(--rp)); }
.etime-v { flex: 1; display: flex; align-items: center; min-width: 0; }
.et-pick {
  margin-right: calc(12 * var(--rp)); padding: calc(10 * var(--rp)) calc(20 * var(--rp));
  background: var(--accent-soft); border: calc(1 * var(--rp)) solid rgba(156, 90, 44, .3); border-radius: calc(12 * var(--rp));
  font-size: calc(30 * var(--rp)); color: var(--accent); font-weight: 600;
}
.et-now { margin-left: auto; font-size: calc(26 * var(--rp)); color: var(--accent); }

/* 起卦方式：分段胶囊 */
.entry { display: flex; background: #ebe6dd; border-radius: calc(999 * var(--rp)); padding: calc(6 * var(--rp)); margin-bottom: calc(28 * var(--rp)); }
/* 四格的「摇卦／随机／手录／卦名」都加粗（用户 2026-10-16）；选中态另有白底与赭色区分 */
.entry-item { flex: 1; text-align: center; padding: calc(16 * var(--rp)) 0; font-size: calc(30 * var(--rp)); font-weight: 600; color: var(--ink-2); border-radius: calc(999 * var(--rp)); }
.entry-item.on { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 calc(2 * var(--rp)) calc(10 * var(--rp)) rgba(43, 38, 33, .08); }

/* 卡片：比 app.wxss 的通用卡片收窄内边距，好放下六列表格 */
.card { padding: calc(30 * var(--rp)) calc(24 * var(--rp)) calc(26 * var(--rp)); }
.hd { display: flex; align-items: baseline; justify-content: space-between; }
.hd .t { font-size: calc(30 * var(--rp)); color: var(--ink-2); letter-spacing: calc(1 * var(--rp)); }
.hd .n { font-size: calc(27 * var(--rp)); color: var(--ink-3); }

/* 铜钱区：高度恒定（calc(128 * var(--rp))），摇卦过程中卡片不跳 */
.note {
  margin-top: calc(24 * var(--rp)); background: #fbf9f5; border-radius: calc(20 * var(--rp)); padding: calc(22 * var(--rp)) calc(28 * var(--rp));
  display: flex; align-items: center; justify-content: space-between;
  /* 高度写死（不是 min-height）：三枚铜钱那一行本身内容 calc(128.78 * var(--rp))，
     用 min-height 会让「铜钱区 ↔ 已定文字条」差 0.39px，卡片底边照样会轻微上下动 */
  height: calc(130 * var(--rp)); box-sizing: border-box; overflow: hidden;
}
/* ⚠️ 已定态的文字条高度必须与铜钱区一致（量过：原来是 36px 对 64px，差 28px ⇒
   随机页从「摇动中」切到「已定」时卡片底边会往上跳一截）。 */
/* 「可整体重随」那一行按用户要求删掉（2026-10-16）⇒ 这里只剩一行字；高度**仍然写死 calc(130 * var(--rp))**：
   卡片高度不许跟着文案变（铜钱区也是 calc(130 * var(--rp))），删掉一行不代表这一条可以变矮。 */
.note.plain { height: calc(130 * var(--rp)); font-size: calc(26 * var(--rp)); color: var(--ink-2); letter-spacing: calc(1 * var(--rp));
  flex-direction: column; align-items: flex-start; justify-content: center; }

/* 铜钱的「背／字」两面都是图片（_dev/tools/make_coins.py 生成，透明底）：
   背＝满文面（赭石实心钱），字＝「乾隆通宝」四字面（米白钱）。
   ⚠️ 图片里铜钱直径＝画布的 96.8%，所以这里给 calc(84 * var(--rp))（与改前「calc(76 * var(--rp)) 内容＋calc(4 * var(--rp)) 边框」的外径一致），
      铜钱区总宽 3×84＋2×22 ＝ calc(296 * var(--rp))，与改前逐位相同。 */
.coins { display: flex; align-items: center; }
.coin { width: calc(84 * var(--rp)); height: calc(84 * var(--rp)); display: block; flex: 0 0 auto; margin-right: calc(22 * var(--rp)); }
.coin:last-child { margin-right: 0; }
/* 未摇的空钱仍是虚线圆（不占图片资源） */
.coin.idle {
  box-sizing: border-box; border-radius: 50%; border: calc(4 * var(--rp)) dashed #ded6c9; background: #fbf9f5;
  display: flex; align-items: center; justify-content: center;
}
.coin.idle::after { content: ''; width: calc(28 * var(--rp)); height: calc(28 * var(--rp)); border-radius: calc(4 * var(--rp)); display: block; background: #ece7de; }
/* 摇动中：三枚各自倾角 ＋ 轻微模糊，静图也看得出在转 */
.coin.toss { filter: blur(calc(1.4 * var(--rp))); opacity: .92; }
.coin.t1 { transform: rotate(-26deg) scale(.94); }
.coin.t2 { transform: rotate(17deg) scale(.90); }
.coin.t3 { transform: rotate(-8deg) scale(.97); }

.res { text-align: right; display: flex; flex-direction: column; }
.res .r1 { font-size: calc(33 * var(--rp)); font-weight: 600; letter-spacing: calc(2 * var(--rp)); }
.res .r1.on { color: var(--accent); }
.res .r1.dim { color: var(--ink-3); font-weight: 400; }
.res .r2 { font-size: calc(28 * var(--rp)); color: var(--ink-3); letter-spacing: calc(1 * var(--rp)); margin-top: calc(8 * var(--rp)); }

/* 六爻表：五列宽 68/168/40/186/112 ＋ 四处列距 calc(16 * var(--rp)) = calc(636 * var(--rp))
   （卡片内容宽 = 750 − wrap 32×2 − 卡片 24×2 = calc(638 * var(--rp))）
   ⚠️ 2026-10-15 去掉「和值」列（44＋16）；多出的 calc(60 * var(--rp)) 全给了「三枚铜钱」列（124→186），
      这样「爻位／爻线／动标」与「爻性」（右对齐）的位置都和改前逐位相同。 */
.yl-head, .yl-row { display: flex; align-items: center; justify-content: center; }
/* v58（用户 2026-10-16）：「爻位／爻线／三枚铜钱的字背／待摇待定」太松散 ⇒ 列宽收紧 ＋ 整行居中（两边往中间聚）。
   列宽预算（卡片内容宽 calc(638 * var(--rp)) ＝ 750 − wrap 64 − 卡片 48）：
   62+14 ／ 168+14 ／ 40+14 ／ 132+14 ／ 100 ＝ calc(558 * var(--rp)) ⇒ 居中后左右各余 calc(40 * var(--rp))。
   三处关键宽度都复核过：「三枚铜钱」表头 4 字 @calc(24 * var(--rp)) ＋ 字距 ≈ calc(99 * var(--rp)) ＜ 132 ✓；
   「背 背 字」@calc(28 * var(--rp)) ＋ 字距 ＋ 两个空格 ≈ calc(116 * var(--rp)) ＜ 132 ✓；「待摇／少阴」2 字 @calc(29 * var(--rp)) ＝ 58 ＋ 右内边距 24 ＝ 82 ＜ 100 ✓。
   ⚠️ 改列宽必须同时看 `.yao` 的爻线宽度（calc(168 * var(--rp))，与 .c-yao 同宽）—— 爻线靠列宽撑满，改列宽就得一起改。 */
.yl-head {
  margin-top: calc(28 * var(--rp)); font-size: calc(24 * var(--rp)); color: var(--ink-3); letter-spacing: calc(1 * var(--rp));
  padding-bottom: calc(12 * var(--rp)); border-bottom: calc(1 * var(--rp)) solid var(--line-2);
}
/* ⚠️ 行高写死 calc(76 * var(--rp))（不是 padding 撑）：量过未摇 34.59px／已摇 36.19px／动爻行 37.8px ——
   随「和值」列（空 ↔ 数字）与「动标」列（空 ↔ ○/×）的内容变化，卡片底边就会上下动。
   钉死后六行等高，卡片高度恒定。 */
.yl-row {
  height: calc(76 * var(--rp)); box-sizing: border-box; padding: 0 calc(12 * var(--rp)); margin: 0 calc(-12 * var(--rp));
  border-bottom: calc(1 * var(--rp)) solid var(--line-2);
}
.yl-row:last-child { border-bottom: none; }
.yl-row.now { background: var(--accent-soft); border-radius: calc(16 * var(--rp)); border-bottom-color: transparent; }

.c-pos { width: calc(62 * var(--rp)); margin-right: calc(14 * var(--rp)); font-size: calc(27 * var(--rp)); color: var(--ink-3); }
.yl-row.now .c-pos { color: var(--accent); font-weight: 600; }
.c-yao { width: calc(168 * var(--rp)); margin-right: calc(14 * var(--rp)); display: flex; align-items: center; }
.c-mk { width: calc(40 * var(--rp)); margin-right: calc(14 * var(--rp)); text-align: center; font-size: calc(31 * var(--rp)); font-weight: 600; color: var(--accent); }
/* 25 → calc(28 * var(--rp))（用户 2026-10-16：「背」「字」字体加大）。v58 列宽 186 → calc(132 * var(--rp))（收紧）：宽度复核「背 背 字」@calc(28 * var(--rp)) ＋ 字距 calc(4 * var(--rp)) ≈ calc(116 * var(--rp)) ＜ calc(132 * var(--rp)) ✓ */
.c-coin { width: calc(132 * var(--rp)); margin-right: calc(14 * var(--rp)); font-size: calc(28 * var(--rp)); color: var(--ink-2); letter-spacing: calc(4 * var(--rp)); white-space: nowrap; }
.c-coin.last { color: var(--ink); font-weight: 600; }
.c-coin.dim { color: #c9c1b4; letter-spacing: calc(2 * var(--rp)); }
/* 爻性列：右对齐 ＋ 右内边距 calc(28 * var(--rp))（用户 2026-10-16 要求「爻性往左挪」）。
   ⚠️ padding 必须配 box-sizing: border-box —— 否则该列实宽变 calc(140 * var(--rp))，整行超出 calc(638 * var(--rp)) 的列宽预算。 */
/* 26 → calc(29 * var(--rp))（用户 2026-10-16：「少阴／少阳」与「待摇／待定」字体加大）。v58 列宽 112 → calc(100 * var(--rp))、右内边距 28 → calc(24 * var(--rp))（收紧）：2 字 @calc(29 * var(--rp)) ＝ 58 ＋ 24 ＝ 82 ＜ 100 ✓ */
.c-lab { width: calc(100 * var(--rp)); box-sizing: border-box; padding-right: calc(24 * var(--rp)); text-align: right; font-size: calc(29 * var(--rp)); color: var(--ink-2); white-space: nowrap; }
.c-lab.on { color: var(--accent); font-weight: 600; }
.c-lab.dim { color: #c9c1b4; }

/* 爻线：阳＝一条整线／阴＝两条断线／未定＝虚线占位 */
.yao { display: flex; align-items: center; width: calc(168 * var(--rp)); }
.yao .bar { height: calc(12 * var(--rp)); border-radius: calc(6 * var(--rp)); background: var(--ink); }
.yao.y .bar { width: calc(168 * var(--rp)); }
.yao.x { justify-content: space-between; }
.yao.x .bar { width: calc(70 * var(--rp)); }
.yao.moving .bar { background: var(--accent); }
.yao.todo .bar { width: calc(168 * var(--rp)); height: 0; border-top: calc(4 * var(--rp)) dashed #ded6c9; border-radius: 0; background: none; }

/* 底部：左侧说明 ＋ 右侧文字链。
   ⚠️ 高度钉死（calc(44 * var(--rp))）：右侧文字链是 wx:if 出现的、左侧文案也会变（摇满后换文案），
      不定高就会出现「卡片底边上下动」——左侧文字改成不换行（超长省略）。 */
.foot {
  margin-top: calc(26 * var(--rp)); height: calc(48 * var(--rp));
  display: flex; align-items: center; justify-content: space-between;
}
.foot .mut {
  flex: 1; min-width: 0; margin-right: calc(16 * var(--rp));
  font-size: calc(26 * var(--rp)); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.foot .lk { flex: 0 0 auto; font-size: calc(28 * var(--rp)); color: var(--accent); white-space: nowrap; }
.foot .lk.off { color: #c9c1b4; }

/* 主按钮：本页为矩形通栏（覆盖 app.wxss 的胶囊按钮） */
.btn {
  display: flex; align-items: center; justify-content: center;
  height: calc(92 * var(--rp)); padding: 0; margin-top: calc(22 * var(--rp));
  border: none; border-radius: calc(20 * var(--rp));
  background: var(--accent); color: #fff; font-size: calc(35 * var(--rp)); letter-spacing: calc(2 * var(--rp));
}
.btn.dis { background: #d8bc9f; color: #fffaf5; }
.btn.ghost { background: #fff; border: calc(1 * var(--rp)) solid var(--accent); color: var(--accent); }

.next { margin-top: calc(26 * var(--rp)); text-align: center; font-size: calc(26 * var(--rp)); color: var(--ink-3); letter-spacing: calc(1 * var(--rp)); }

/* 手动录入（设计稿 v6）：行内 爻位 | 爻线 | 阳／阴 | 静／动
   列宽 68/120/1fr/calc(88 * var(--rp))、列距 calc(16 * var(--rp))（＝设计稿 34/60/1fr/44px × 2） */
.mrow {
  display: flex; align-items: center;
  padding: calc(16 * var(--rp)) calc(12 * var(--rp)); margin: 0 calc(-12 * var(--rp));
  border-bottom: calc(1 * var(--rp)) solid var(--line-2);
}
.mlist .mrow:last-child { border-bottom: none; }
.mpos { width: calc(68 * var(--rp)); margin-right: calc(16 * var(--rp)); font-size: calc(27 * var(--rp)); color: var(--ink-3); }
/* 爻线列：爻线缩到 calc(88 * var(--rp)) 把宽度让给右边四格（用户 2026-10-16）；
   右侧仍挂着动爻的 ○/× —— 列宽 ＝ 88 ＋ 6（间隙）＋ ~30（标记）。 */
.myao { width: calc(124 * var(--rp)); margin-right: calc(16 * var(--rp)); display: flex; align-items: center; }
/* 手录行的爻线比六爻表窄：整线 calc(88 * var(--rp))、断线 calc(36 * var(--rp))（原 120/48 —— 缩短以腾宽给四格） */
.myao .yao { width: calc(88 * var(--rp)); }
.myao .yao.y .bar { width: calc(88 * var(--rp)); }
.myao .yao.x .bar { width: calc(36 * var(--rp)); }
/* 没选过的爻：虚线占位（与摇卦页 .yao.todo 同一套观感，宽度按手录行的 calc(88 * var(--rp))） */
.myao .yao.todo .bar { width: calc(88 * var(--rp)); height: 0; border-top: calc(4 * var(--rp)) dashed #ded6c9; border-radius: 0; background: none; }

/* 硬币口径切换（手录页专有）：两格分段 —— 默认「乾隆通宝 背／字」（与摇卦页同一条口径），
   可切「现代硬币 字／花」。⚠️ 两套里「字」的计法正好相反（铜钱的字＝2、硬币的字＝3），
   当前用的是哪一套只能靠这两格自己说清楚（用户 2026-10-16 要求删掉下面那行计法小字）。
   高度写死（.cs calc(56 * var(--rp))）：切换时卡片底边不许动。 */
.cswitch { display: flex; margin: calc(24 * var(--rp)) 0 calc(12 * var(--rp)); padding: calc(4 * var(--rp)); background: #f2eee6; border-radius: calc(14 * var(--rp)); }
.cs { flex: 1; height: calc(56 * var(--rp)); display: flex; align-items: center; justify-content: center; border-radius: calc(12 * var(--rp)); }
.cs.on { background: #fff; box-shadow: 0 calc(2 * var(--rp)) calc(10 * var(--rp)) rgba(43, 38, 33, .08); }
.cs-a { font-size: calc(29 * var(--rp)); color: var(--ink-2); letter-spacing: calc(1 * var(--rp)); }
.cs-b { margin-left: calc(12 * var(--rp)); font-size: calc(25 * var(--rp)); color: var(--ink-3); }
.cs.on .cs-a { color: var(--accent); font-weight: 600; }
.cs.on .cs-b { color: var(--accent); }
/* 逐爻解锁（用户 2026-10-16「选完初爻才能选二爻，以此类推」）：
   .current ＝ 当前该选的那一爻（整行浅赭底 + 爻位转赭）；
   .locked  ＝ 还没轮到（点了没反应这件事在 pickKind 里拦，不靠样式）。
   ⚠️ 置淡**只有这一处**（用户 2026-10-16 口径：「初爻不变，未轮到的爻 30% 透明」）——
      别再往 .mopt 里写 opacity：那样当前该选的那一行（初爻）也会跟着淡。 */
.mrow.current { background: var(--accent-soft); border-radius: calc(14 * var(--rp)); }
.mrow.current .mpos { color: var(--accent); font-weight: 600; }
.mrow.locked .mopt { opacity: .3; }
.mrow.locked .mpos { color: #c9c1b4; }

/* 手录四选一：四格**直接铺开**（用户 2026-10-16：不要弹层里滑动选），点一下即选中。
   每格两行：爻性（上）＋ 当前口径的说法「几背几字／几字几花」（下）。
   宽度复核：行内 68 + 16 + 146 + 16 + 392（mopts）＝ calc(638 * var(--rp))；每格 (392−3×6)/4 ≈ calc(93.5 * var(--rp))，
   「1背2字」@calc(20 * var(--rp)) ≈ calc(64 * var(--rp)) ＋ 内边距 ⇒ 放得下（改字号前跑 _dev/tools/width-check.cjs 复核）。 */
.mopts { flex: 1; min-width: 0; display: flex; }
.mopt {
  flex: 1; min-width: 0; margin-right: calc(6 * var(--rp)); padding: calc(8 * var(--rp)) calc(2 * var(--rp));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fbf9f5; border: calc(1 * var(--rp)) solid var(--line); border-radius: calc(12 * var(--rp));
}
.mopt:last-child { margin-right: 0; }
.mopt.on { border-color: var(--accent); background: var(--accent-soft); }
/* 格内两级（用户 2026-10-16）：「少阴／少阳」等爻性作小字，「几背几字／几字几花」作大字 */
.mo-l { font-size: calc(20 * var(--rp)); line-height: 1.3; color: var(--ink-3); letter-spacing: calc(1 * var(--rp)); }
.mopt.on .mo-l { color: var(--accent); }
.mo-n { margin-top: calc(2 * var(--rp)); font-size: calc(26 * var(--rp)); line-height: 1.3; color: var(--ink); white-space: nowrap; }
.mopt.on .mo-n { color: var(--accent); font-weight: 600; }
/* 动爻的 ○/× 跟在爻线右侧（传统排法） */
.mymark { margin-left: calc(6 * var(--rp)); font-size: calc(26 * var(--rp)); font-weight: 600; color: var(--accent); }

/* 卦名起卦（设计稿 v4）：两槽位 ／ 搜索 ／ 宫筛选 ／ 卦名网格 ／ 已选区 */
.slots { display: flex; margin-top: calc(24 * var(--rp)); }
/* 槽位：标签在**左**、卦名在右（用户 2026-10-16）＝ flex row；align-items: center 让标签竖向居中。
   ⚠️ 槽宽是固定的（两格各 calc(311 * var(--rp))，flex:1 平分）——「方框再大一点」只能加内边距把框撑高撑厚，不能加宽。 */
.slot {
  flex: 1; position: relative; margin-right: calc(16 * var(--rp));
  display: flex; align-items: center;
  border: calc(1 * var(--rp)) solid var(--line); border-radius: calc(18 * var(--rp));
  padding: calc(22 * var(--rp)) calc(24 * var(--rp)) calc(20 * var(--rp)); background: #fbf9f5;
}
.slot:last-child { margin-right: 0; }
/* 槽位标签「本卦／变卦」：**竖排两字、贴在卦名左边**（用户 2026-10-16；竖排的是这两个标签字，
   不是卦名内容）+ 比卦名小一档。竖排＝flex column 逐字排（静态文案，直接写两个 <text>），
   ⚠️ 不用 writing-mode —— 小程序对它支持不稳。 */
.slot .k {
  flex: 0 0 auto; margin-right: calc(16 * var(--rp));
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: calc(19 * var(--rp)); color: var(--ink-3);
}
.slot .k .kc { display: block; line-height: 1.15; }
/* 槽位卦名：**横排** ＋ 页面里最大的一档字（36 → 44 → calc(50 * var(--rp))，用户 2026-10-16 两次要求加大）。
   宽度复核（内边距加宽到 calc(24 * var(--rp)) 后槽内可用 311 − 48 ＝ calc(263 * var(--rp))）：标签 19 ＋ 间距 16 ＋
   4 字卦名（calc(50 * var(--rp)) ＋ 字距 calc(2 * var(--rp))×3 ≈ 206）≈ calc(241 * var(--rp)) ＜ calc(263 * var(--rp)) —— 最长卦名「泽风大过」也放得下。
   右下角「▾」是 absolute，不占位、不重叠（卦名右端 ≈265 ＜ 箭头左缘 ≈293）。 */
.slot .v { display: block; font-size: calc(50 * var(--rp)); line-height: 1.2; color: var(--ink-2); letter-spacing: calc(2 * var(--rp)); white-space: nowrap; }
.slot .cv { position: absolute; right: calc(18 * var(--rp)); bottom: calc(16 * var(--rp)); font-size: calc(23 * var(--rp)); color: var(--ink-3); line-height: 1; }
.slot.empty .v { color: var(--ink-3); }
.slot.on { border-color: var(--accent); background: var(--accent-soft); }
.slot.on .v { color: var(--accent); font-weight: 600; }
.slot.on .cv { color: var(--accent); }

.search {
  margin-top: calc(24 * var(--rp)); height: calc(68 * var(--rp)); padding: 0 calc(22 * var(--rp));
  background: #f7f5f0; border-radius: calc(16 * var(--rp));
  display: flex; align-items: center;
}
.search .mag {
  width: calc(20 * var(--rp)); height: calc(20 * var(--rp)); border: calc(3 * var(--rp)) solid var(--ink-3); border-radius: 50%;
  position: relative; margin-right: calc(14 * var(--rp)); flex: 0 0 auto;
}
.search .mag::after {
  content: ''; position: absolute; right: calc(-8 * var(--rp)); bottom: calc(-6 * var(--rp));
  width: calc(10 * var(--rp)); height: calc(3 * var(--rp)); background: var(--ink-3);
  transform: rotate(45deg); border-radius: calc(2 * var(--rp));
}
.search .ipt { flex: 1; font-size: calc(28 * var(--rp)); color: var(--ink); }
.search .ph { font-size: calc(28 * var(--rp)); color: var(--ink-3); letter-spacing: calc(1 * var(--rp)); }

.chips { display: flex; flex-wrap: wrap; margin-top: calc(22 * var(--rp)); }
/* ⚠️ 9 个胶囊（全部＋八宫）在字号放到 calc(26 * var(--rp)) 后总宽正好卡 calc(638 * var(--rp)) 边界，「兑」会被挤到第二行
   ⇒ padding 16→12、margin 10→8，总宽回到 ~calc(548 * var(--rp))（改字号时用 _dev/tools/width-check.cjs 复核）。 */
.chip {
  height: calc(56 * var(--rp)); padding: 0 calc(12 * var(--rp)); margin: 0 calc(8 * var(--rp)) calc(8 * var(--rp)) 0;
  border-radius: calc(14 * var(--rp)); background: #f7f5f0;
  font-size: calc(28 * var(--rp)); color: var(--ink-2); letter-spacing: calc(1 * var(--rp));
  display: flex; align-items: center;
}
.chip.on { background: var(--accent); color: #fff; font-weight: 600; }

.whorow {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: calc(12 * var(--rp)); font-size: calc(25 * var(--rp)); color: var(--ink-3); letter-spacing: calc(1 * var(--rp));
}
.whorow .lk { font-size: calc(27 * var(--rp)); color: var(--accent); }

/* 卦名网格：两列（各 calc(311 * var(--rp))）；高度由页面按行数算出（最多 4 行＝calc(320 * var(--rp))，超出滚动） */
.guagrid { margin-top: calc(16 * var(--rp)); }
.ggwrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
.gg {
  width: calc(311 * var(--rp)); height: calc(68 * var(--rp)); margin-bottom: calc(16 * var(--rp));
  border: calc(1 * var(--rp)) solid var(--line); border-radius: calc(16 * var(--rp));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(29 * var(--rp)); color: var(--ink-2); letter-spacing: calc(2 * var(--rp));
}
.gg.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.tip { margin-top: calc(14 * var(--rp)); text-align: center; font-size: calc(24 * var(--rp)); color: var(--ink-3); letter-spacing: calc(1 * var(--rp)); }

/* 底部历史入口的 .hisbar 三条规则随按钮一起删（v56：历史记录进了底部 tabBar）。 */