/* =========================================================
   十六型人格测试 · 纸墨版 UI（v2）
   方向：暖纸底 + 墨字 + 朱砂（唯一强调色）+ 四族油墨
   原则：方角、硬阴影、无光晕、层级靠线不靠卡、单一主 CTA、触控 >=44
   1 令牌 2 头部 3 通用 4 首页 5 答题 6 结果 7 百科 8 成长 9 星座
   ========================================================= */

/* ---------- 1. 令牌 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x 裁剪层级放在视口：hero 用 100vw 全出血时才不会被 1080 容器截断。
   clip 优先（不创建滚动容器，不影响 sticky 导航）；不支持的旧浏览器降级为 hidden */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

:root {
  /* ---- 纸墨令牌（v2）----
     底色是暖纸白，不是冷白：纯白配墨字在长时间阅读时会发青，
     暖 2% 的黄能把它拉回纸的观感，同时不影响任何对比度判定。 */
  --bg: #F6F2EA;          /* 页面底 */
  --surface: #FFFDF8;     /* 卡面（比底略亮） */
  --surface-2: #FAF6EE;   /* 次级块 */
  --line: #DCD5C7;        /* 分隔线 */
  --rule: var(--line);
  --rule-2: #C9C0AE;      /* 输入框等需要更实的线 */

  --ink: #1A1917;         /* 主文字 */
  --ink-2: #57544D;       /* 次要正文，纸底 6.8:1 */
  /* 2026-10-26：var(--ink-3) 在纸底只有 3.21:1，低于 WCAG AA 的 4.5:1，
     而它主要用在 11–12px 的图注、统计数字这类小字上，小字反而最需要对比度。
     沿原色相压深到 #6D695E（纸底 4.91:1 / 卡面 5.39:1），比 --ink-2 浅一档，
     图注与正文的层次仍在。 */
  --ink-3: #6D695E;       /* 只放图注，不承载正文 */

  /* --muted 是历史别名，仍然指向次要正文；图注请直接用 --ink-3 */
  --muted: var(--ink-2);

  /* 唯一强调色：朱砂。填充用 --primary，正文里的链接用 --primary-soft
     （#B03A21 在纸底 5.42:1；实心朱原本 var(--primary) 只有 4.33:1，2026-10-26
     压深到 #BC4128 → 4.79:1，正文小字也够用了，肉眼几乎看不出色差） */
  --primary: #BC4128;
  --primary-hover: #A8321E;
  --primary-soft: #B03A21;
  --primary-soft-bg: #F1DAD2;

  /* 语义色 */
  --success: #3C6B52;
  --warning: #8F5A28;
  /* --gold：--warning 的提亮版（同色相、H≈30），**只给深色会员卡用**。
     深色卡上 #8F5A28 只有 3.3:1，读不清；提亮后约 6:1，够 WCAG AA。
     纸白底的地方继续用 --warning，不要拿 --gold 去替换。 */
  --gold: #C79A4B;
  --error: #A8321E;
  --ok: var(--success);
  --warn: var(--warning);
  --danger: var(--error);

  /* 进度条填充色（与 MBTI 入门页一致） */
  --bar: var(--primary);

  /* 四族油墨（纸底 4.6–6.5:1，可做小字文字色）。
     JS 的 CAT_COLOR 与这里必须一致，否则同一族会出现两种颜色。 */
  --t-nt: #2F5A8A;
  --t-nf: #8E3A5A;
  --t-sj: #3C6B52;
  --t-sp: #8F5A28;

  --sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --wrap: 1080px;
  --read: 660px;           /* 长文版心：17px 字约 38 字/行 */
  --r-card: 4px;           /* 圆角几乎为零，方角才像纸 */
  --r-btn: 2px;
  --r-tag: 2px;

  --hero-sub: #57544D;       /* banner 副文案色（纸底 6.8:1） */
  --hero-blue: var(--primary);      /* banner 主按钮（沿用变量名，值已随体系） */
  --hero-blue-hover: #A8321E;

  --accent: var(--primary); /* 答题进度条与卡片描边 */

  /* 纸墨的两个物理约定：阴影是硬的（丝网错版），动效只走 160/240 */
  --shadow-hard: 2px 2px 0 var(--ink);
  --ease: cubic-bezier(.2,.7,.3,1);

  /* 悬停/浅衬底（2026-11-03 收编成变量）：原来是写死的 #F3EEE3，
     白底模板下会显出Dirty的米黄，跟着模板走 */
  --tint: #F3EEE3;
}

/* ---------- 模板 2「素白」（2026-11-03） ----------
   白底版本：把纸味的底、面、线三族换成中性冷灰，墨色/朱砂/族色/金全部沿用
   （品牌色不跟模板变，变的是"纸"）。插画是米纸底不透明，白底上像贴纸，
   有 1px 线框兜着，不破。切模板 = html[data-theme] 换一组变量，组件零改动。
   ⚠️ :root 里新加颜色变量时想一句：它在白底下是什么？需要变的放这里，别写死。 */
html[data-theme="snow"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F6F5F2;
  --line: #E4E3DE;
  --rule-2: #CFCEC8;
  --tint: #F4F4F1;
}

/* ---------- 模板 3「雾绿」（2026-11-03） ----------
   第三套：冷雾绿。跟「素白」不同，这是**完整重设计**——不只换纸，
   强调色从朱砂换成雾绿、族色也按这套的冷调走、硬阴影改成墨绿。
   切模板 = html[data-theme="mist"] 换一组变量，组件零改动。
   插画是米纸透明底，浅绿底上正常，不用反相。 */
html[data-theme="mist"] {
  --bg: #EBF0EC;
  --surface: #FAFCFB;
  --surface-2: #E6EDE9;
  --line: #D2DCD6;
  --rule-2: #C0CCC5;
  --tint: #E3EBE6;

  --ink: #1C2421;
  --ink-2: #50605A;
  --ink-3: #6A7A74;

  --primary: #2F8A6B;
  --primary-hover: #26745A;
  --primary-soft: #2C7F62;
  --primary-soft-bg: #DCECE4;
  --bar: #2F8A6B;
  --accent: #2F8A6B;

  --hero-sub: #50605A;
  --hero-blue: #2F8A6B;
  --hero-blue-hover: #26745A;

  --t-nt: #3F6B8A;
  --t-nf: #7A5A82;
  --t-sj: #4C7A63;
  --t-sp: #9A7040;

  --shadow-hard: 2px 2px 0 #1C2421;
}

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -.02em; }
h1 { font-size: clamp(30px, 4.6vw, 44px); font-weight: 700; }
h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
p { color: var(--muted); }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--primary-soft); text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; color: var(--ink); }

/* 类型代码 */
.code { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }

/* ---------- 2. 头部 / 页脚 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);   /* 跟着模板走（2026-11-03） */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
/* 十六点环形标（内联 SVG）：四个大点＝四组 NT/NF/SJ/SP，外圈十二点＝其余十二型。
   矢量画在深色底上不带白边，也不多一次请求。 */
.brand-ico { width: 26px; height: 26px; flex: none; display: block; }
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-tag);
  background: var(--primary); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--r-tag); transition: color .15s ease, background .15s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); background: var(--surface); }
/* 「MBTI 与星座的羁绊」比原来的「MBTI × 星座」宽约 50px，窄屏会把导航挤成两行，
   所以备一个四字短名：宽屏用全名，≤800 自动换成「星座羁绊」 */
.nav .n-abbr { display: none; }

main#app { flex: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px 80px; }

/* 页脚（2026-10-27 重做）：不再 sticky / fixed。原来「一屏内贴在视口底」的设计
   会被新加的固定底栏 .tabbar 压住，且链接全与顶部导航重复、已删到只剩隐私条款。
   现在一律跟随文档流；padding-bottom 里那 68px 是给固定底栏留的位置
   （底栏 58px 高 + 上边距余量。2026-10-29 深夜底栏加图标，从 52 长到 58，
   这里和 .zx-foot 的 bottom 一起跟着挪，否则页脚末两行会被压住），
   safe-area 拼给 iPhone 的home indicator。 */
.site-footer { position: static; z-index: 40;
  border-top: 1px solid var(--line); padding: 13px 24px calc(68px + env(safe-area-inset-bottom, 0px));
  background: none; }
.footer-inner { max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-bottom: 0; }
.footer-nav a { color: var(--muted); text-decoration: none; font-size: 13px; }
.footer-nav a:hover { color: var(--ink); }
.site-footer p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
/* 备案号（2026-10-26）：号码没下来时元素带 hidden，不占位 */
.footer-icp { font-size: 11.5px; }
.footer-icp a { color: var(--ink-3); text-decoration: none; }
.footer-icp a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- 3. 通用 ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.panel + .panel { margin-top: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  border-radius: var(--r-btn); cursor: pointer; text-decoration: none;
  border: 1px solid transparent; background: var(--primary); color: #fff;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .16s var(--ease), box-shadow .16s var(--ease);
}
/* hover 用「位移 + 硬阴影」表达，不用颜色变深：纸面体系里颜色一变就像按钮在呼吸 */
.btn:hover { background: var(--primary-hover); transform: translate(-1px,-1px); box-shadow: var(--shadow-hard); }
.btn:active { transform: translate(1px,1px); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--rule-2); }
/* 赭石实心：整行只给「最想让用户点」的那一个按钮用（购买 / 进付费内容）。
   用单色不用渐变：纸面体系里渐变会显出「软件感」。白字在 #8F5A28 上 5.6:1。 */
.btn.amber { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn.amber:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-hard); }
.btn.text { background: transparent; border: none; color: var(--primary-soft); padding: 0; min-height: 0; }
.btn.text:hover { background: none; color: var(--ink); text-decoration: underline; transform: none; }
.btn.wide { display: flex; width: 100%; }
/* 禁用态不能只降透明度：主按钮白字落在半透明粉底上会糊成一片，读不出写了什么 */
.btn:disabled, .btn[aria-disabled="true"] { background: var(--surface-2); color: var(--ink-3);
  border-color: var(--line); cursor: not-allowed; transform: none; box-shadow: none; opacity: 1; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; }

.page-title { margin-bottom: 6px; }
.page-sub { margin-bottom: 24px; max-width: var(--read); }
/* 居中大标题的分区头 */
.section-head { text-align: center; scroll-margin-top: 84px; }
.section-title { font-size: clamp(24px, 3.6vw, 34px); font-weight: 700; letter-spacing: -.03em; margin-bottom: 10px; }
.section-sub { font-size: 15px; color: var(--muted); max-width: 40em; margin: 0 auto 28px; }
.prose { max-width: var(--read); }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
/* 结果页操作区 2026-10-25 定稿：五个入口全部是 .btn.ghost，一条 .actions 排完。
   曾试过「三个主按钮 + 一行小链接」的主次分层，用户否了——要的就是格式完全一致。
   这里混用 <button>（保存/复制/重测/配对）和 <a>（星座羁绊），
   两者的浏览器默认样式不同，靠 .btn 自己的样式抹平，不再单独写一套小链接样式。 */
.actions .btn.ghost { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* 结果页五个入口的固定排班（2026-11-03 用户定稿）：第一行两个、第二行三个。
   原来是 flex + wrap 自然换行，容器宽度一变就成了 2+2+1，第三行只挂「MBTI×星座」。
   这里用 6 列网格把行次钉死：前两个各占 3 列（半宽），第 3 个起各占 2 列（三分之一宽）。
   用 nth-child 而不是派类名，是为了以后增删按钮时公式一眼能看懂。
   只挂在 .acts-5 上——.actions 全站还有十来处用途，不能动通用规则。
   ⚠️ 列宽必须写 minmax(0,1fr)：写 1fr 时列的最小宽度是 auto（按钮内容宽度），
   390 宽视口下六列会被内容顶开、整组横向溢出，右边两个按钮直接被裁掉。 */
.actions.acts-5 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.actions.acts-5 > * { min-width: 0; }
.actions.acts-5 > :nth-child(-n+2) { grid-column: span 3; }
.actions.acts-5 > :nth-child(n+3) { grid-column: span 2; }
/* 第二行把三个入口挤进各 1/3 宽，「MBTI×星座」6 个字最容易顶到边框。
   窄屏收内边距、字号降 1px；「比较」前的双心也跟着缩一号，否则心把字挤歪。
   white-space: nowrap 是必须的：不加的话「MBTI×星座」会在「座」前折行，
   第二行三个按钮被撑高 4px，和第一行对不齐（2026-11-03 实测）。 */
.actions.acts-5 > :nth-child(n+3) { white-space: nowrap; }
@media (max-width: 480px) {
  .actions.acts-5 > :nth-child(n+3) { padding-inline: 8px; font-size: 13px; }
  .actions.acts-5 > :nth-child(n+3).cmp-heart { gap: 5px; }
  .actions.acts-5 > :nth-child(n+3).cmp-heart .heart-duo { width: 17px; height: 15px; }
}
@media (max-width: 360px) {
  .actions.acts-5 > :nth-child(n+3) { padding-inline: 4px; font-size: 12.5px; letter-spacing: -.03em; }
  .actions.acts-5 > :nth-child(n+3).cmp-heart { gap: 3px; }
  .actions.acts-5 > :nth-child(n+3).cmp-heart .heart-duo { width: 14px; height: 12px; }
}
/* 320（iPhone SE 一代、部分小安卓）：第一行两个半宽只有 114px，
   15px 的「保存结果图片」会折成两行，第二行也跟着看着不齐。 */
@media (max-width: 340px) {
  .actions.acts-5 > :nth-child(-n+2) { padding-inline: 6px; font-size: 13px; letter-spacing: -.02em; }
}

.block { margin-top: 26px; }
.block h3 { margin-bottom: 10px; }
.block ul { list-style: none; }
.block li { display: flex; gap: 10px; font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.block li:last-child { border-bottom: none; }
.block li::before { content: "—"; color: var(--primary-soft); font-family: var(--mono); }

.mini-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-tag); padding: 16px 18px; }
.mini-card h4 { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.mini-card ul { list-style: none; }
.mini-card li { font-size: 13.5px; color: var(--muted); padding: 5px 0; }
.mini-card p { font-size: 13.5px; }

.tag {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--muted); border: 1px solid var(--line); background: var(--surface-2);
  padding: 3px 9px; border-radius: var(--r-tag); margin: 0 6px 6px 0;
}

/* 图标容器 */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico svg { display: block; }

.pay {
  margin-top: 26px; border: 1px solid var(--line); border-left: 3px solid var(--primary);
  border-radius: var(--r-card); padding: 20px; background: var(--surface-2);
}
.pay .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pay h3 { margin-bottom: 3px; }
.pay p { font-size: 13px; }
.pay.done { border-left-color: var(--success); }
/* 等宽字体里 ¥ 是全角宽，不加这个会显示成「¥4 . 9」——数字之间凭空多出两个空格 */
.pay .price { font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pay-ways { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pay-ways .way { min-width: 120px; }
/* 合盘收银台：和结果页的付费墙同一套语言——虚线框 + 斜贴纸，不用实线框 + 淡底。
   两处付费只隔一次点击，样式不一致会让人以为是两种东西。 */
.pay.pair-pay { position: relative; margin-top: 30px; padding: 26px 22px 18px;
  border: 1px dashed var(--rule-2); border-radius: var(--r-card); background: transparent; }
.pay.pair-pay::before { content: "深读解锁"; position: absolute; top: -11px; left: 18px;
  transform: rotate(-2.5deg); padding: 3px 10px 4px;
  background: var(--primary); color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  box-shadow: 2px 2px 0 var(--ink); }

/* 合盘的两档按钮等宽，别一长一短 */
.pay-ways .way[data-sku^="zodiac"] { flex: 1 1 0; justify-content: center; }
/* 合盘的两档按钮：左右并排、都做主按钮色，靠通票上的「省 ¥x」标志分主次 */
.zx-ways { gap: 10px; margin-top: 0; }
/* 两档按钮不五五分：左侧要放「类型（代码）与星座的羁绊 / 爱情 / 相处」这种长句，
   五五分时字会贴到边框上。1.45 : 1 让左侧拿到能舒展的宽度，右侧通票本来就短。 */
.zx-ways .way { flex: 1 1 0; min-width: 0; }
.zx-ways .way.zx-one { flex-grow: 1.45; }
/* 长文案允许折行，高度跟着长，别把字挤出去 */
.zx-ways .way.zx-one { gap: 9px; padding: 11px 14px; height: auto; min-height: 46px;
  white-space: normal; text-align: left; line-height: 1.5; font-weight: 600; font-size: 13px; }
.zx-ways .zx-one-t { flex: 1 1 auto; min-width: 0; }
/* 价格角标：跟在文案右边，竖线隔开；蓝底上用半透明白，不去抢字号 */
.zx-ways .zx-price { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: rgba(255, 255, 255, .74); padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, .28); }
/* 通票的档位标志（全站共用：合盘付费块、结果页提示条……）：
   一枚小圆冠，不写金额——价差讲不清口径，冠只表态「最高一档」。 */
.zx-crown { flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #8F5A28; color: var(--surface); }
.zx-crown svg { display: block; }
@media (max-width: 760px) {
  .zx-ways { flex-direction: column; }
}
.pay-tip { font-size: 12px; margin-top: 12px; }
.pay .btn.text { margin-top: 10px; font-size: 13px; }
.paid { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  padding: 4px 10px; border-radius: 99px; }

/* ---------- 全站通票 ----------
   一行式：左边一句话说清「包含了什么」，右边价格 + 一个按钮。
   四项单价不再摊成表格，压成「单买 ¥79.6 · 省 ¥39.7」一行小字。 */
.pass-item { color: #3A3730; }

.pass-owned { font-size: 12.5px; color: var(--success); line-height: 1.7; }

.pass-checkout .pay-ways { margin-top: 0; gap: 8px; }
.pass-checkout .pay-ways .way { min-width: 96px; min-height: 38px; padding: 0 14px; font-size: 13px; flex: 0 0 auto; }
.pass-checkout .btn.text { margin-top: 6px; font-size: 12.5px; }

.pass-card.is-owned { border-color: color-mix(in srgb, var(--success) 26%, #E3C6BB); }

/* 页内升级提示：一条带分隔线的行，克制到不跟主按钮争注意力 */
.pass-hint { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.ph-txt { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.ph-txt b { font-size: 13px; font-weight: 600; color: var(--ink); }
.ph-txt span { font-size: 11.5px; color: var(--muted); }
.pass-hint .ph-btn { min-height: 34px; padding: 0 15px; font-size: 13px; }
.ph-box { width: 100%; }
.ph-box:empty { display: none; }

@media (max-width: 760px) {
}
@media (max-width: 560px) {
  .ph-txt { flex: 1 1 100%; }
  .pass-hint .ph-btn { width: 100%; }
}

/* 解锁后的深度内容 */
.locked-zone:empty { display: none; }
.pro { margin-top: 18px; border: 1px solid var(--line); border-top: 3px solid var(--success);
  border-radius: var(--r-card); padding: 24px; background: var(--surface-2); }
.pro-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pro-head h3 { font-size: 18px; }
.pro .block h4 { font-size: 14px; color: var(--ink); margin-bottom: 8px; }
.kw { display: flex; align-items: baseline; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-tag); padding: 10px 12px; }
.kw b { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.kw span { font-size: 13px; color: var(--muted); }
.kw i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: auto; }

/* 轻提示（非弹窗） */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 12px);
  max-width: min(90vw, 520px); z-index: 90;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 12px 22px; font-size: 13.5px; text-align: center;
  box-shadow: 0 6px 0 rgba(26,25,23,.10);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 4. 首页 ---------- */
/* banner：普通高度横幅块（非满屏），全出血宽度 + 底部一条分界线。
   v2 去掉了左下的琥珀光晕：纸面体系里「光」是唯一不能出现的东西。 */
.hero {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  /* 上下留白取同一个值：之前上 46 / 下 38，视觉上重心偏移，用户要求上下相等 */
  padding: clamp(16px, 1.8vh, 26px) 24px;
  /* 一屏以内，但不满屏：内容约 450 高，若让 banner 吃掉整屏，上下各空 175px（用户嫌太空）。
     所以高度封顶 580，屏幕再高也就上下各留 40 左右，下一屏内容会露出来，滚动提示更明显。
     内容比视口高时（手机横屏、超矮窗口）照样撑开，不压缩文字。 */
  min-height: min(calc(100vh - 104px), 580px);
  min-height: min(calc(100svh - 104px), 580px);
  /* 全出血：突破 1080 容器铺满视口（配合 html 的 overflow-x 裁剪） */
  margin-inline: calc(50% - 50vw);
  /* 底色比页面 --bg 略亮，纵向微渐变（纸叠起来的那点层次），底部以 1px 线收边 */
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.hero-copy { max-width: 760px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(30px, 4.9vw, 52px); font-weight: 700; /* 站点字体最高权重为 700，900 会降级 */
  letter-spacing: -.03em; line-height: 1.18; margin-bottom: clamp(12px, 1.9vh, 20px);
}
.hero h1 .highlight { color: var(--primary); white-space: nowrap; }
/* 副标题分两级：第一句是情绪（大），第二句是解释（小一号、更淡、居中折行）。
   原来三行同字号，读者分不清哪句是主句。第一句再放大到 19px；第二句在 720 以上
   由 app.js 里的 <br> 明确断成两行，窄屏去掉 br 交给浏览器自然折。 */
.hero-sub {
  /* 第一句是整屏的第一声（用户要求加粗）：站点字体最高权重 700，副标题用 600 才不像标题 */
  color: var(--hero-sub); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.75;
  font-weight: 600;
  max-width: 720px; margin: 0 auto 8px;
}
.hero-sub-sm {
  color: var(--ink-2); font-size: clamp(13.5px, 1.06vw, 15px); line-height: 1.9;
  max-width: 700px; margin: 0 auto clamp(18px, 3vh, 32px);
  text-wrap: pretty;
}
/* 「MBTI 入门」落在这里（2026-10-27）。刻意做成一行小字链而不是第二个按钮：
   hero 的「开始测试」是整页唯一的主决定，再并排一颗按钮就会互相稀释。 */
.hero-alt { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.hero-alt a { color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, var(--ink-3));
  padding-bottom: 1px; white-space: nowrap; }
.hero-alt a:hover { color: var(--primary); border-bottom-color: var(--primary); }
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* 19px / 700：达到 WCAG「大号粗体文本」阈值（>=18.66px bold），对比按 3:1 判定，
   参考稿的亮蓝与橙渐变因此可原样合规使用（实测 4.3:1 / 3.8:1） */
.hero-cta .btn {
  min-height: 54px; padding: 0 46px;
  font-size: 18px; font-weight: 700; border-radius: var(--r-btn);
  transition: background .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.hero-cta .btn-primary { background: var(--primary); color: #fff; }
.hero-cta .btn-primary:hover { background: var(--primary-hover); }
/* 首个 CTA 常驻一枚硬阴影：它是整页唯一的「一次决定」，静止时就该比别的东西重 */
.hero-cta .btn { box-shadow: 3px 3px 0 var(--ink); }
.hero-cta .btn:hover { box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px,-2px); }
/* 2026-10-31：「MBTI 与星座的羁绊」从页中横幅搬进 hero，跟主按钮并排、左右居中。
   做成描边小卡而不是第二颗实心按钮：hero 只认一个主决定（开始测试），
   再并排一颗同重的实心按钮两者互相稀释。高度跟按钮对齐（54），两行字。
   窄屏放不下会自动折到按钮下面一行（.hero-cta 本来就 flex-wrap）。 */
.hero-zx {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 54px; padding: 8px 15px 8px 22px; box-sizing: border-box;
  border: 1px solid var(--rule-2); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ink); text-decoration: none; text-align: left;
  transition: border-color .16s var(--ease), background .16s var(--ease),
              transform .16s var(--ease);
}
/* min-width: 0 是给窄屏兜底：300px 容器里两行字都不许把右边的 > 挤出去 */
.hero-zx-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* 标题行高收到 1.25：继承 body 的 1.7 时两行合计 43px，卡片会被顶到 61px，
   比旁边的按钮（54）高出一截。收到 18.75 + 16.7 + 1 ≈ 36.5，加留白正好 54。 */
.hero-zx b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.hero-zx-t > span { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
/* 右侧那个 > ：跟两行字一样高、贴右边。
   用 SVG 不用字符，理由写在 app.js 的 zxCardHTML 里（字符 > 要撑到这么高
   得 60px 字号，卡片会被顶高）。36px 是量着两行（36.5）给的，
   净跨 32px，看起来就是「两行一个箭头」。stroke 2.2 再粗就比标题还重了——
   它只是「可以点」的提示，不是主张。 */
.hero-zx-go {
  flex: 0 0 auto; align-self: center;
  display: flex; align-items: center;
  color: var(--ink-3);
  transition: color .16s var(--ease), transform .16s var(--ease);
}
.hero-zx-go svg { display: block; }
.hero-zx:hover { border-color: var(--primary); background: #fff; transform: translate(-1px,-1px); }
.hero-zx:hover .hero-zx-go { color: var(--primary); transform: translateX(2px); }

/* ---------- 首页 hero 下的 16 型形象带 ----------
   一条横向传送带：自动循环、可拖、可点。这里只负责「长得对」，
   滚动/拖拽逻辑在 app.js 的 initFaceBand（要拿 scrollWidth 算循环点）。
   2026-10-28：两端渐隐已删，理由见下面 .faces 里那一段。 */
.faces {
  position: relative; align-self: stretch; width: 100%;
  margin-top: clamp(20px, 3.2vh, 38px);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; cursor: grab;
  /* 2026-10-28：两端渐隐（mask-image，各 56px）已删。
     它想解决「边缘那半个人看着像渲染错了」，但实测没做到——每格 92px、
     图宽约 50px 居中，两侧各约 21px 留白，56px 渐隐区前一半压在留白上，
     淡的是空气不是人，效果随轮播位置**时有时无**。
     而它另一个作用「暗示这一行能滑」也不成立：带子是自动轮播的
     （约 33px/秒，45 秒走完 16 型），用户不滑也能看完。
     所以删掉：少一层遮罩，边缘该什么样就什么样。
     ⚠ 什么时候该加回来：**关掉自动轮播改成纯手动滑**的时候——那时
     渐隐是唯一的可滚动性提示，而且要按整格宽度（92–110px）给，别再用 56px。 */
}
.faces::-webkit-scrollbar { display: none; }
.faces:active { cursor: grabbing; }
.faces-track { display: flex; width: max-content; padding: 4px 0 2px; }
/* 每格宽度跟着视口走：一屏必须装不下完整 16 个，否则会同时看到两份同样的形象 */
.face {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px;
  width: clamp(100px, 8.6vw, 176px); flex: none; padding-bottom: 2px;
  text-decoration: none; color: var(--muted);
  -webkit-user-select: none; user-select: none;
}
.face img {
  height: clamp(58px, 8.6vh, 80px); width: auto; opacity: .88;
  transition: transform .18s ease, opacity .18s ease;
}
/* 四字母 + 中文名两行：外层 gap 只管「图↔文字」，两行小字之间由 .face-txt 自己收紧到 3px，
   否则 9px 会把名字推得太远，格子在垂直方向散掉 */
.face-txt { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.15; }
.face b {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .06em;
  color: var(--ink-3); transition: color .15s ease;
}
/* 中文名比字母亮一档：它才是大多数人用来认这一型的字（INTJ／建筑师） */
.face-name {
  font-size: 11px; letter-spacing: .04em; white-space: nowrap;
  color: var(--ink-3); transition: color .15s ease;
}
.face:hover img, .face:focus-visible img { transform: translateY(-4px); opacity: 1; }
.face:hover b, .face:hover .face-name,
.face:focus-visible b, .face:focus-visible .face-name { color: var(--ink); }
.face:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--r-tag); }
@media (max-width: 640px) {
  .faces { margin-top: 22px; }
  .face { width: 92px; }
  .face img { height: 62px; }
  .face-name { font-size: 10.5px; letter-spacing: .02em; }
}

/* 版本卡：三档（200 题精准版已下线）。列数交给 auto-fit 按卡片数自动排，
   卡片少的时候不会在右边留一格空位；≤720 仍然整列堆叠 */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* 测试版本卡（参考图结构：角标 + 小标 + 巨大标题 + 分隔线 + 勾选列表 + 整宽按钮） */
.vcard { position: relative; background: var(--surface); border: 1px solid #E3C6BB; border-radius: var(--r-card);
  padding: 32px 20px 22px; display: flex; flex-direction: column; overflow: hidden; }
/* 一句话差异：四列排版放不下三条勾选清单，压成一行（原来那句「是否含职场建议」并进来） */
.t-one { flex: 1; margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.ribbon { position: absolute; top: 0; right: 0; padding: 9px 16px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; color: #fff; background: var(--primary); border-bottom-left-radius: 12px; }
.v-head { display: flex; flex-direction: column; }
.t-sub { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 22px; white-space: nowrap; }
/* 手机端专用的时长小字：桌面端由下面那行巨型标题里的 <small> 承担，这枚一直藏着，
   只在 ≤720 替换巨型标题时露出来（同一份 DOM，不重复写内容） */
.t-time { display: none; }
.t-title { display: flex; align-items: baseline; gap: 10px; white-space: nowrap;
  font-size: clamp(30px, 3.8vw, 42px); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 0; }
.t-title small { font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.t-rule { height: 1px; background: var(--line); margin: 22px 0; }
.t-list { list-style: none; display: flex; flex-direction: column; gap: 16px; flex: 1; margin: 0; padding: 0; }
.t-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.t-list li::before { content: "✓"; width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1;
  color: var(--success); background: color-mix(in srgb, var(--success) 20%, transparent); }

/* ---------- 首页「继续探索」两个板块（2026-10-26 重做） ----------
   参考同类站的版式（16 型网格 + 星座横幅），配色仍走本站纸墨令牌：
   参考站那两套是深色渐变加光晕，本站禁用，所以底色一律卡面白、边框细线，
   只把「星座」这块用族色 --t-nf 点一下图标和小标签。 */

/* 板块一：人格百科 —— 16 型网格 */
.eb { margin-top: 16px; }
.eb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin-bottom: 14px; }
.eb-copy { min-width: 0; }
.eb-copy h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 5px; }
.eb-copy p { font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 46em; }
/* 2026-10-27 深夜十一：首页「继续探索」大标题删掉（用户要求），
   这块不再需要自己的页级标题，改成「人格百科 + 右上角更多 >」的板块头。
   样式与「精选测评」那颗「查看更多 >」同一套语言，只是字更小、不描边。 */
.eb-more {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--ink-2); text-decoration: none;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-tag);
  background: var(--surface); white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.eb-more:hover { border-color: var(--primary); color: var(--primary); }
.tgrid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.tcell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px 9px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-card);
  text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tcell:hover { border-color: var(--rule-2); background: var(--surface); transform: translateY(-1px); }
.tcell img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; }
.tcell b { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
.tcell span { font-size: 11px; color: var(--ink-3); }

/* 板块二：MBTI 与星座的羁绊 —— 横幅卡（左文右按钮）
   2026-10-27 深夜十二：原版堆了五层信息（小标签／标题／两行描述／三组大数字／
   竖线／★／「选一个星座就能开始」），窄屏挤成一行时按钮被逼着折成两行断字。
   这里砍掉标签、★、备注小字与竖线，规模数据压成一行小字，按钮给 nowrap。 */
/* 2026-10-27：从人格百科那个 .panel 里拆出来，自己占一个 .panel。
   边框/底色/内边距都由 .panel 给，这里只管左右两栏的排布。 */
.zx-banner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px; align-items: center;
}
.zx-b-main { min-width: 0; }
.zx-b-main h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 5px; }
.zx-b-main p { font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 32em; }
.zx-b-stats { display: flex; flex-wrap: wrap; align-items: center; margin-top: 9px;
  font-size: 11.5px; color: var(--ink-3); }
.zx-b-stats span + span::before { content: "·"; margin: 0 8px; color: var(--line); }
.zx-b-stats b { font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); margin-right: 3px; }
.zx-banner > .btn { white-space: nowrap; }
/* 「继续探索」里的通票卡已下线（首页不卖货），下面这几条暂时没有元素使用，
   留着是为了将来若恢复入口不用重画样式；.entry-pay 同理（首页那个空收银台已删） */
.entry-pass { width: 100%; text-align: left; font: inherit; cursor: pointer; appearance: none; }
/* 通票标题「解锁本站全部付费内容」用橙色点出来，和其它入口的黑白标题区分 */
.entry-pass .e-t { color: var(--warning); }
.entry-pass.is-owned { cursor: default; opacity: .72; }
.entry-pass:not(.is-owned):hover { border-color: var(--primary); }
.entry-pay { margin-top: 14px; }
.entry-pay:empty { display: none; }

/* ---------- 5. 答题 ---------- */
.intro { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 40px 28px; text-align: center; }
.intro h1 { font-size: clamp(24px, 3.4vw, 32px); margin: 10px 0 0; }
.intro .lead { max-width: 32em; margin: 10px auto 0; }
.meta-list { list-style: none; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin: 24px 0 28px; }
.meta-list li { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* 边框三个 longhand 分开写，不用 border 简写：少数老内核（含 iOS 9 的 Safari）
   在简写里遇到 var() 会把整条声明一起丢掉，卡片会连灰边都没有。
   拆开后 var 只出现在 border-color 上，最差也只是退回中性灰边。
   线宽 2px（2026-10-26 由 1px 加粗，用户试看效果）：1px 在手机上太细，
   维度色几乎看不出来；2px 才让人一眼分辨「这题换主题了」。 */
.scale { background: var(--surface); border-width: 2px; border-style: solid;
  border-color: var(--sc, var(--line));
  border-radius: var(--r-card); padding: 28px 24px 24px;
  display: flex; flex-direction: column;
  min-height: calc(100vh - 200px);
  /* iOS Safari 地址栏没收起时 100vh 比可视区高，量表会被推到折叠线以下，几乎每题都要滚一下。
     svh 是「最小可视高度」，认它的浏览器用这一条，不认的（老机型）用上一行 vh 兜底。 */
  min-height: calc(100svh - 200px); }

/* ---------- 四维换色 ----------
   题卡**只换外边框**，卡面恒定纸白（2026-10-26 用户先后两次定的）：
   先是整张卡连底带边一起变色，用户反馈「变的颜色太多，有点晃眼」——每题一次大面积跳变，
   读题时被颜色抢注意力，所以底色、描边以外的部分全撤；随后又要求「外边框颜色随题目类型变化」，
   于是边框单独放回来，线宽从 1px 加到 2px（1px 在手机上几乎看不出颜色差别）。
   现在带维度色的一共三处，全是细线和小点，没有一块面：
     · 卡片 2px 外边框（下面 .scale 的 border，唯一“整块”级别的变化）
     · 顶上那条 4px 进度条
     · 被选中的那颗圆点（默认态五颗都是中性灰，不会一起冒颜色）
   颜色照旧取自四族油墨（--t-nt / -nf / -sj / -sp 同源），在纸底上 4.6–6.5:1。
   改这里只需要动下面四行的 --sc；**卡面底色不要再加回来**。 */
.scale.dim-EI { --sc: #2F5A8A; }
.scale.dim-SN { --sc: #3C6B52; }
.scale.dim-TF { --sc: #8E3A5A; }
.scale.dim-JP { --sc: #8F5A28; }
/* 进度条跟着换色；轨道底仍走纸面中性色 */
.scale .track span { background: var(--sc, var(--accent)); }
/* 选中的圆点用维度色 */
.scale .dots input:checked + .dot-hit .knob,
.scale .dot-hit:hover .knob { background: var(--sc, var(--primary)); border-color: var(--sc, var(--primary)); }
/* 题目 + 量表作为一组，在卡片内上下左右居中 */
.quiz-center { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.scale .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.track { position: relative; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.track span { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 2px; transform-origin: left center; transition: width .35s ease; }
.scale .q {
  font-size: clamp(20px, 3.2vw, 26px); font-weight: 600; color: var(--ink);
  line-height: 1.5; letter-spacing: -.01em; max-width: 26em; margin: 26px auto 34px; text-align: center;
}

/* 量表：视觉圆点小，热区一律 44×44 */
.dots { position: relative; display: flex; justify-content: space-between; align-items: center; }
.dots input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dot-hit {
  width: 74px; height: 74px; flex: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%;
}
.knob {
  display: block; border: 2px solid var(--c, #B9AF9C); background: transparent; border-radius: 50%;
  position: relative;
  transition: transform .24s ease, background-color .2s ease, border-color .2s ease, box-shadow .24s ease;
}
.knob::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 28%; height: 50%;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translate(-52%, -58%) rotate(45deg) scale(.4);
  opacity: 0; transition: opacity .16s ease, transform .22s ease;
}
.dot-hit:hover .knob,
.dots input:checked + .dot-hit .knob { background: var(--c, var(--primary)); border-color: var(--c, var(--primary)); transform: scale(1.12); }
.dot-hit:hover .knob::after,
.dots input:checked + .dot-hit .knob::after { opacity: 1; transform: translate(-52%, -58%) rotate(45deg) scale(1); }
.dots input:focus-visible + .dot-hit .knob { outline: 2px solid var(--primary-soft); outline-offset: 3px; }
/* 五档量表（2026-10-26 由七档改来）：两端最大、中点最小，形状本身就在说强度。
   档数常量在 app.js 的 SCALE_MAX，改档数时这里要一起改（k6/k7 已随七档删除）。
   同日再放大一档（52/36/22 → 64/46/26）：五档比七档少两个点，横向富余，
   圆点大一些既好点、也让「强度」的落差更明显。 */
.knob.k1, .knob.k5 { width: 64px; height: 64px; }
.knob.k2, .knob.k4 { width: 46px; height: 46px; }
.knob.k3 { width: 26px; height: 26px; }

/* 收缩量表的横向宽度，让五个圆圈排得紧凑、标签贴住两端 */
.dots { max-width: 500px; margin-left: auto; margin-right: auto; }

/* 同意 / 圆圈 / 不认同：同一行，两端贴边。
   2026-10-26：圆点放大后这一行要更长，把上限从 660 放到 820 —— 两端文字跟着挪到
   卡片更外侧，省出来的宽度全给五个圆点；垂直改用 center 对齐，圆点再改尺寸也不会错位
   （原来靠 padding-top 手调，一改尺寸就得重算）。 */
.scale-row { display: flex; align-items: center; gap: 16px; max-width: 820px; margin: 0 auto; }
.scale-main { flex: 1; min-width: 0; }
.scale-main .dots { max-width: none; margin: 0; }
.end-label { flex: none; padding-top: 0; font-family: var(--mono); font-size: 17.5px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
/* 答题页小字与按钮同步放大 */
.scale .top .label { font-size: 13.5px; }
.scale .btn { font-size: 18.5px; }

/* ---------- 6. 结果 ---------- */
.report { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px 28px; }
.report.has-dock { margin-bottom: 86px; }

/* =========================================================
   结果页（#/result / #/preview / #/s）· 2026-10-20 与详解页统一：
   全出血身份带（家族色辉光，--tc 由 reportHTML 注入）→ 内容卡。
   四维刻度移入身份带信息列，与形象左右排列；文字风格对齐详解页。
   ========================================================= */
.rep-top { position: relative; overflow: hidden;
  margin-inline: calc(50% - 50vw);
  padding: 30px 24px 28px;
  /* 前一行给不认 color-mix 的老内核（国内 X5 / 旧 WebView）兜底：
     它们会把含 color-mix 的整条声明判无效，不兜就等于整块背景消失。
     v2 去掉了族色辉光，改成「族色只染 4% 的纸」+ 底部一道 2px 族色线：
     颜色退到几乎看不见，族的身份由那道线来标记。 */
  background: var(--surface-2);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tc, var(--primary)) 4%, var(--surface)) 0%,
    var(--surface-2) 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tc, var(--primary)) 55%, transparent); }
/* 身份带内宽对齐内容卡的正文列（--wrap 1080 − 24×2 卡片内距 − 24×2 页面边距 = 984），
   早先固定 720，两块并排时被压得又挤又和下方卡片不对齐 */
.rep-top-in { max-width: calc(var(--wrap) - 96px); margin: 0 auto; }

/* 顶部状态条：先给确定性 */
.rep-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.rep-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex: none; }
.rep-status span { font-family: var(--mono); font-size: 11px; color: color-mix(in srgb, var(--tc, var(--primary)) 75%, var(--ink));
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }

/* 两块左右排列：左「形象 + 身份文字」、右四维刻度卡。
   左边整体收紧凑（形象 148、字号降一档），两边高度才接近，不会一边高一边空。 */
.rep-hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 20px; align-items: center; }
.rep-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* 人物形象是一整只低多边形小人（透明底），底光按家族色晕在脚下 */
.portrait { position: relative; width: 132px; height: 132px; flex: none; }
/* v2 撤掉脚底光：深底上它是一圈柔光，纸底上就是一块擦不掉的灰斑。
   人物与纸面靠 .pt-img 自身的 drop-shadow 分离，足够。 */
.portrait::before { content: none; }
.portrait svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
/* 位图形象：画布 800 里人物占 ~700 且底部已对齐。
   放大倍数必须满足「上移量 = 放大倍数 - 100%」，否则底部会溢出容器被裁掉脚。
   114% / -14% 正好让图片底边贴住容器底边，全身完整且顶满高度。 */
.portrait .pt-img { position: relative; display: block; width: 114%; height: 114%;
  margin: -14% -7% 0 -7%; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(26, 25, 23, .22)); }
/* bust 用 viewBox 裁到头部，必须 hidden，否则全身会溢出 40px 的小框 */
.portrait.bust svg { overflow: hidden; }
.portrait.bust::before { content: none; }
.rep-hero .portrait { width: 190px; height: 190px; margin: 0; flex: none; }
/* 半栏宽度下代码与名字降一档，一行放得下；缩写行与标签自动折行 */
.rep-hero .rep-id .bigcode { font-size: 42px; }
.rep-hero .rep-id .tname { font-size: 21px; }
.rep-hero .rep-id .thook { font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.rep-hero-txt { min-width: 0; }
.rep-q { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  color: color-mix(in srgb, var(--tc, var(--primary)) 72%, var(--ink)); margin-bottom: 8px; }
.rep-name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.report .bigcode { font-size: 44px; line-height: 1; }
.report .tname { font-size: 22px; font-weight: 700; }
.report .thook { font-size: 14px; color: var(--muted); margin-top: 5px; }
.type-tags { margin-top: 9px; }

/* 四维刻度：身份带里的嵌套卡，比带面亮一档，占右半栏 */
.rep-hero .bars-card { margin: 0; }
.rep-hero .bars-head { margin-bottom: 6px; }
.rep-hero .bars-head b { color: var(--ink); }
/* 尾注从卡底搬到卡头（用户要求）：说明紧跟标题，横线也随之上移到「标题区 / 四条刻度」
   之间，卡底不再留一条孤零零的分隔线。说明变长后最多两行，字号收一档、行高放紧。 */
.rep-hero .bars-head { padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.rep-hero .bars-head span { flex: 1 1 auto; min-width: 0; font-size: 10.5px; line-height: 1.6; }

/* 刻度卡尽量与人物形象同高（用户要求）：min-height 190，内容（新的两行尾注）
   放得下时正好齐平；窄一点的桌面端尾注会折到三行，这时宁可让卡略高于形象，
   也不压扁四条轨道。 */
.rep-hero .bars-card { min-height: 190px; display: flex; flex-direction: column; padding: 10px 14px; }
.rep-hero .bars-card .slider-group { flex: 1; display: flex; flex-direction: column;
  justify-content: space-evenly; gap: 4px; }
/* 单行刻度：维度名+短码占固定宽（四条轨道左右对齐），两极贴轨道两侧 */
.rep-hero .bars-card .slider-item { flex-direction: row; align-items: center; gap: 10px; }
.rep-hero .bars-card .sl-dim { flex: none; width: 92px; }
.rep-hero .bars-card .sl-pole { flex: none; }
.rep-hero .bars-card .slider-track { flex: 1 1 auto; width: auto; }
/* 卡内已无尾注（说明移到 .bars-head），旧 .bars-note 规则随之删除 */

/* 四维刻度（极简版：维度名 + 两极 + 轨道，单行；.rep-hero 里固定卡高与形象对齐） */
.bars-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 14px 16px 14px; margin-bottom: 16px; }
.bars-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.bars-head b { font-size: 13px; }
.bars-head span { font-size: 11px; color: var(--muted); }
.share-note { font-size: 12px; color: var(--muted); margin-top: 18px; text-align: center; }

/* 两栏在 760 以下会挤（每栏不足 300px，代码+名字要折行），提前堆叠 */
@media (max-width: 760px) {
  .rep-hero { grid-template-columns: 1fr; gap: 16px; }
  .rep-hero .portrait { width: 128px; height: 128px; }
  /* 堆叠后不再需要跟形象对齐高度，刻度卡回到自然高 */
  .rep-hero .bars-card { height: auto; }
  .rep-hero .bars-card .slider-group { justify-content: flex-start; gap: 10px; }
}

/* 四维刻度：v2 从「进度条」改成「指针 + 刻度」
   旧版是一条 4px 的填充轨 + 一个白点，读起来像加载进度：看不出哪一端是你。
   新版把语义拆成三件事：
   · 轨道 14px 高，只有一条 1px 基线 —— 它是一条轴，不是一个容器；
   · 50% 一道 14px 中线 —— 唯一的参照（2026-10-26 撤掉原来的 25% / 75% 两道短刻度：
     与保存图卡不一致，且四等分刻度像在暗示「只有 25/50/75 三档」，而落点是连续的）；
   · 色条 2px、从中线画到指针，指针是墨色圆点 —— 位置 = 立场，长度 = 立场有多硬。 */
.slider-group { display: flex; flex-direction: column; gap: 11px; }
.slider-item { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.sl-dim { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sl-dim i { font-family: var(--mono); font-size: 11px; font-style: normal; color: var(--ink-3); letter-spacing: .06em; margin-left: 5px; }
.sl-pole { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-3); flex: none;
  display: inline-flex; flex-direction: row; align-items: baseline; gap: 4px; line-height: 1; }
/* 字母紧跟两个中文字：让「E/I」这种黑话当场有解；不选中时压淡，不抢刻度的注意力 */
.sl-pole i { font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 11px;
  color: var(--ink-3); letter-spacing: 0; white-space: nowrap; }
.sl-pole.on i { color: var(--ink-2); }
.sl-pole.on { color: var(--ink); }
.slider-labels { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.slider-labels .active { color: var(--ink); }
.slider-track { width: 100%; height: 14px; position: relative; background: transparent; }
/* 基线：一条贯穿的 1px 线，两端淡出，避免和卡片描边连成一片。
   颜色直接写 #A79E8B 而不是 --rule-2：分割线用的浅棕在 1px 宽度下等于看不见，
   轴线必须比分割线实一档，否则整条刻度像悬空的一条色块。 */
.slider-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, #A79E8B 10%, #A79E8B 90%, transparent); }
/* 只画中线，画在背景里，不加 DOM。
   2026-10-26：原来还有 25% / 75% 两道短刻度，撤掉了——
   ①「保存结果图片」的图卡只画中线，两边对不上；
   ② 四等分短刻度容易被读成「刻度就是 25 / 50 / 75 三档」，可落点其实是连续的，
      那两道线等于在暗示一个不存在的档位。留中线一个参照就够了。
   不用 color-mix：老内核整条声明会失效，中线会一起消失。 */
.slider-track::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--ink-2), var(--ink-2));
  background-size: 1px 14px;
  background-position: 50% center;
  background-repeat: no-repeat; }
.slider-fill { position: absolute; top: calc(50% - 1px); height: 2px; background: var(--tc, var(--primary)); }
.slider-fill.left { right: 50%; }
.slider-fill.right { left: 50%; }
/* 色条只有两侧两种形态：右半（left:50%）/ 左半（right:50%），
   长度＝指针离中线的距离。完全居中时不画条（长度为零），只留指针压在中线上。 */
/* 2026-10-26：指针从「2×14 竖杠」改成圆点，与「保存结果图片」图卡上的画法逐项对齐：
   外沿 9px＝墨色实心 5px + 2px 卡底描边（原先 11px 偏粗，按用户要求收细一档）。
   为什么是圆点不是竖杠：轨道上还有一道 14px 的竖中线，竖杠和它同形，
   落点靠近中间时会糊在一起、看不出指针在哪；圆和线不同形，一眼能分开。
   ⚠ 图卡那一份画在 app.js 的 buildResultCard() 里（canvas，取不到 CSS 变量），
   **改这一处必须同步改那一处**——轨道 / 色条 / 中线 / 圆点，四项规格都要相同：
   轨道＝无底色，只有一条 1px 基线（#A79E8B，两端淡出）；
   中线＝1px 宽 × 14px 高（--ink-2）；色条＝2px 高、直角（--tc）；
   圆点＝外沿 9px（实心 5 + 描边 2，描边用卡底色）。 */
.slider-thumb { position: absolute; top: 50%; width: 9px; height: 9px;
  background: var(--ink); border: 2px solid var(--surface-2); border-radius: 50%; z-index: 2;
  transform: translate(-50%, -50%); }

/* 六章报告目录：章节头带家族色短线，与详解页小节标题同一套标记 */
.rep-sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 26px 0 14px; }
/* 2026-10-27：标题下那道 30px 短横删掉——这一行的标题已经很长
   （「人格属性 · 性格 · 恋爱 · 人际 · 职业 · 生活完整报告」），
   再压一道装饰线只会让它更像一段被硬拆开的句子。 */
.rep-sec-head h2 { font-size: 18px; }
.rep-sec-head span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.rep-chapters { display: flex; flex-direction: column; gap: 11px; }
.ch { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 15px 17px; }
.ch.locked { border-style: dashed; }
.ch-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ch-no { font-family: var(--mono); font-size: 11px; color: var(--primary-soft); letter-spacing: .08em; flex: none; }
/* keep-all：章名现在是「人格属性 · 性格 · 恋爱 · 人际 · 职业 · 生活」，
   窄屏折行时默认会从「人」和「际」之间断开（CJK 任意字符间都能断），
   读起来像把一个词砍了。keep-all 只允许在空格处断，折行就落在中点两侧。 */
.ch-head h3 { font-size: 14.5px; flex: 1; min-width: 0; word-break: keep-all; }
/* 章头只剩状态标记时（合并章，见 chapterHTML 的 ch-head-bare）：
   去掉那 9px 下边距，标记右对齐，别让它孤零零撑出一行空白 */
.ch-head-bare { justify-content: flex-end; margin-bottom: 0; }
.ch-badge { flex: none; font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); }
.ch-badge.free { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--line)); }
/* 评传折叠：后几节收进原生 details。summary 要给足点击区（≥40px），
   展开三角用伪元素画，顺手去掉 Chrome 自带的 marker。 */
.rep-essay .essay-more { margin-top: 2px; }
.rep-essay .essay-more > summary { list-style: none; cursor: pointer; display: flex;
  align-items: center; gap: 6px; min-height: 44px; padding: 8px 0;
  font-size: 13px; font-weight: 600; color: var(--tc, var(--primary-soft)); }
.rep-essay .essay-more > summary::-webkit-details-marker { display: none; }
/* 三角带文字比较少，这里只用箭头旋转表状态，文案由 summary 自己说 */
.rep-essay .essay-more > summary::before { content: ""; flex: none; width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; transition: transform .15s ease; }
.rep-essay .essay-more[open] > summary::before { transform: rotate(90deg); }
.rep-essay .essay-more > summary:hover { opacity: .8; }

.cp { font-size: 13px; line-height: 1.8; color: var(--muted); padding: 3px 0; max-width: 56em; }
/* 融合付费章里的场景小标题（恋爱里的你 / 和人相处 / 工作这件事 / 日子怎么过）。
   字号比章标题小一号、比正文重，靠族色和上方留白把长章切成能扫的四段。 */
.ch-body .ch-sub { font-size: 13.5px; font-weight: 600; color: var(--tc, var(--primary-soft));
  margin: 22px 0 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.ch-body > .ch-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cp-li { position: relative; padding-left: 14px; }
.cp-li::before { content: ""; position: absolute; left: 0; top: 12px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--primary-soft); }
/* 付费章遮罩（2026-10-25）已于 2026-10-26 深夜按用户要求整体删除：
   锁定章现在只露章头 + 「解锁全文」按钮，正文区不再放灰杠占位。
   （旧的 .ch-body.faded 渐隐已随预览文案一起废掉，别再加回来。） */
.ch-cta { margin-top: 10px; background: none; border: none; padding: 8px 0; min-height: 40px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--primary-soft); cursor: pointer; }
.ch-cta:hover { color: #B03A21; }

/* 价格区（付费墙 · v2）：虚线框 + 斜贴纸
   不用灰蒙层——灰蒙层的效果是「这块坏了」，虚线框才是「这块还没拆封」。
   贴纸是纯 CSS 伪元素，不占 DOM，也不用改 JS。 */
.rep-price { position: relative; margin-top: 32px; padding: 26px 22px 18px;
  border: 1px dashed var(--rule-2); border-radius: var(--r-card); background: transparent; }
.rep-price::before { content: "全篇解锁"; position: absolute; top: -11px; left: 18px;
  transform: rotate(-2.5deg); padding: 3px 10px 4px;
  background: var(--primary); color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  box-shadow: 2px 2px 0 var(--ink); }
/* 合盘那段是「深读」不是「六章」，贴纸换字，其余同一套 */
.rep-price.pair-price::before { content: "深读解锁"; }
.rep-price .pay { margin-top: 14px; background: transparent; border: 0;
  border-top: 1px solid var(--line); border-radius: 0; padding: 14px 0 0; }
.rep-price.flash { animation: payFlash 1.3s ease; }
@keyframes payFlash {
  0% { box-shadow: 0 0 0 0 rgba(200,69,43,0); }
  25% { box-shadow: 0 0 0 3px rgba(200,69,43,.45); }
  100% { box-shadow: 0 0 0 0 rgba(200,69,43,0); }
}
/* 档位标签：虚线框上的斜贴纸已经写明「全篇解锁 / 深读解锁」，
   框内再挂一枚「完整版」就是同一句话说两遍。v2 起只在没有贴纸的场合用。 */
.price-tag { display: none; }
.rep-price .price-head h3 { font-size: 19px; letter-spacing: -.01em; margin: 10px 0 6px; }
.rep-price .price-head p { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
/* 付费墙里的「解锁后你会看到」：把抽象的「一章」翻译成具体的内容清单。
   章号用族色，和上面章目录里的编号是同一套语言。 */
.price-what { margin: 12px 0 0; padding: 0; list-style: none; }
.price-what li { display: flex; gap: 9px; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.price-what li:first-child { border-top: 0; }
.pw-no { flex: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--tc); padding-top: 2px; }
.pw-txt b { font-weight: 600; color: var(--ink); margin-right: 6px; }
.price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.price-num { font-family: var(--mono); font-size: 28px; font-weight: 500; color: var(--ink); line-height: 1; }
.price-note { font-size: 11.5px; color: var(--muted); }
.rep-price .pay { margin-top: 12px; background: var(--surface); }
.rep-price .pay-ways { margin-top: 0; }
.rep-price .btn.wide { margin-top: 10px; }
.price-foot { font-size: 11.5px; color: var(--ink-3); margin-top: 12px; }
/* 底部常驻条会盖住页脚，留出同样高度 */
.rep-unlocked { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--success);
  border: 1px dashed color-mix(in srgb, var(--success) 40%, var(--line));
  border-radius: var(--r-card); padding: 12px; }
/* 结果页 / 预览页的页脚与解锁条 .rep-dock 的间距规则，
   2026-10-27 已并入下方 .tabbar 段（result/preview 同时隐藏底栏、页脚留 104px）。 */

/* 底部常驻解锁条（未解锁时才出现） */
.rep-dock { position: fixed; left: 50%; transform: translateX(-50%); z-index: 40;
  /* 底部要躲开 iPhone 的横条手势区，否则按钮压在 home indicator 上，点不到 */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(700px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,253,248,.97); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 9px 10px 9px 18px; box-shadow: 0 8px 0 rgba(26,25,23,.10); }
.dock-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dock-l b { font-size: 13.5px; }
/* 2026-10-25 深夜：这一行现在是六个部分的全名，窄一点的窗里会折成两行把悬浮条撑高；
   超宽就省略，宁可少看两个字也不让它变高。 */
.dock-l span { font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-dock .btn { flex: none; min-height: 42px; padding: 0 18px; font-size: 14px; }

/* 结果页身份带在窄屏堆叠：形象居上，四维刻度通栏 */
@media (max-width: 620px) {
  .rep-top { padding: 22px 18px 20px; }
  .rep-hero { grid-template-columns: 1fr; gap: 16px; }
  .rep-hero .portrait { width: 120px; height: 120px; }
  .report .bigcode { font-size: 36px; }
  .report .tname { font-size: 19px; }
  .interp { margin-top: 12px; padding-top: 10px; font-size: 12px; }
}

/* ---------- 7. 人格百科（4 × 4） ---------- */
/* ===== 人格百科页头：左标题 / 右一个「去测试」出口 =====
   无底色、无边框——整块透明，靠留白与居中排版立住，视觉重量压得比大标题轻。
   按钮用主色胶囊：本站已有蓝/琥珀/四族色三套强调色，参考站的紫色会是第五种。 */
.wiki-hero { display: grid; grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px 30px; align-items: center; margin-bottom: 26px; }
.wiki-hero .page-sub { margin-bottom: 0; text-wrap: pretty; }
/* 页头引导：一行提示 + 主按钮。
   提示语「第一次来？」只负责提醒新访客该测一次，字号与颜色都比按钮轻，
   绝不能像原来那样做成 16.5px 粗体大标题——那样它会和左边 h1 抢视线。
   原来按钮下的「查看已有结果」小字链已删（本页底部已有入口）。 */
.start-card { background: none; border: 0; padding: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.start-card h2 { font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .01em; margin: 0 0 -2px; }
.start-btn { display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: 999px; background: var(--primary); color: #fff;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background .15s ease, transform .15s ease; }
.start-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
.start-arrow { font-size: 14px; line-height: 1; }
/* 窄屏堆叠：引导区落到标题下方、仍居中 */
@media (max-width: 860px) {
  .wiki-hero { grid-template-columns: 1fr; gap: 16px; }
  .wiki-hero .page-sub { margin-bottom: 2px; }
}

/* 百科页收尾：不摆价格，只把「去测一次」讲清楚 */
.wiki-cta { display: flex; align-items: center; justify-content: space-between; gap: 22px;
  margin-top: 34px; padding: 20px 22px; border: 1px solid var(--line);
  border-radius: var(--r-card); background: rgba(26,25,23,.02); }
.wiki-cta p { margin: 0; font-size: 14px; line-height: 1.7; max-width: 46em; }
@media (max-width: 700px) {
  .wiki-cta { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.fam-row { margin-bottom: 30px; }
.fam-head { margin-bottom: 14px; }
.fam-head h2 { font-size: 19px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fam-head .fam-en { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .08em; font-weight: 400; }
.fam-head p { font-size: 13.5px; max-width: var(--read); margin-top: 2px; }

.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* 卡片 = 上方人物形象 + 下方文字；形象区用家族色铺一层很淡的底光 */
.tcard {
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 0; overflow: hidden; text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tcard:hover { background: var(--surface-2); border-color: var(--tc, var(--primary)); transform: translateY(-2px); }
.tcard:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; }
.tc-fig {
  position: relative; flex: none; height: 162px;
  display: flex; align-items: flex-end; justify-content: center;
  /* 同 .rep-top：先给一条不带 color-mix 的底，老内核也不会丢掉整块背景。
     形象区只留一层「族色 6% 的纸」，中间那一圈辉光在纸底上会变成一块脏斑。 */
  background: var(--surface-2);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tc, #2F5A8A) 3%, var(--surface)) 0%,
    color-mix(in srgb, var(--tc, #2F5A8A) 9%, var(--surface)) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.tc-fig .portrait { width: 136px; height: 136px; margin-bottom: 0; transition: transform .22s ease; }
/* 卡片底已经有一层家族色，头像自带的光再压一档，避免糊成一片 */
.tc-fig .portrait::before { opacity: .55; }
.tcard:hover .tc-fig .portrait { transform: translateY(-3px) scale(1.035); }
.tc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 14px 14px; }
.tc-top { display: flex; align-items: center; gap: 6px; }
.tc-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--tc, var(--primary)); }
.tc-code { font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.tc-name { font-size: 14px; font-weight: 600; }
.tc-nick { font-size: 12px; color: var(--muted); }
.tc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tc-tags i { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-tag); padding: 2px 7px; }

/* 类型详情页头部的人物形象 */

/* ---------- 9. MBTI 与星座的羁绊 ---------- */
.pick-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 24px 0 12px; }

/* ---------- 9. MBTI 与星座的羁绊：左右两栏紧凑选择器 ----------
   原先是上下两大块（16 张大卡 + 12 张大卡，各 76px 高），一屏放不下、空白又多。
   现在左侧 16 型压成 4×4 小格、右侧 12 星座压成 3×4 小格并列，左右各 200 出头的高度。 */
.zx-page .page-sub { margin-bottom: 18px; }
.zx-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.zx-col { min-width: 0; }

.zx-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.zx-n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; }
.zx-head b { font-size: 14px; font-weight: 600; color: var(--ink); }
.zx-hint { min-width: 0; margin-left: auto; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.zx-grid { display: grid; gap: 8px; }
.zx-grid-t { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zx-grid-s { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.zx-tile { display: flex; align-items: center; gap: 8px; min-width: 0; height: 50px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: var(--r-tag); background: var(--surface-2);
  color: var(--muted); cursor: pointer; text-align: left; font-family: var(--sans);
  transition: background .14s ease, border-color .14s ease, transform .14s ease; }
.zx-tile:hover { border-color: var(--rule-2); background: var(--tint); transform: translateY(-1px); }
.zx-ico { flex: none; display: inline-flex; align-items: center; }
.zx-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zx-tile b { font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zx-tile em { font-style: normal; font-size: 10.5px; line-height: 1.2; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zx-tile.on { background: var(--primary); border-color: var(--primary); }
.zx-tile.on b { color: #fff; }
.zx-tile.on em { color: rgba(255, 255, 255, .82); }
.zx-tile.on .ico { color: #fff !important; }
.zx-tile:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; }

.zx-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.zx-meta { margin-left: auto; font-size: 11.5px; color: var(--muted); }
/* 入口按钮里挂价格：用户点进去之前就知道要花钱、花多少、买到什么。
   放在按钮内而不是按钮旁，是因为窄屏会隐藏 zx-meta，价格不能跟着一起消失。 */
.zx-foot .btn.amber .zx-price { font-size: 11.5px; font-weight: 500; opacity: .78;
  margin-left: 9px; padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, .28); }

@media (max-width: 980px) {
  .zx-cols { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 620px) {
  .zx-grid { gap: 6px; }
  .zx-tile { height: auto; min-height: 46px; padding: 7px 6px; flex-direction: column; gap: 3px; text-align: center; }
  .zx-tile b { font-size: 11.5px; }
  .zx-tile em { font-size: 11px; }
  .zx-el { display: none; }
  .zx-head b { font-size: 13px; }
  .zx-hint, .zx-meta { display: none; }
  .zx-foot .btn { flex: 1 1 auto; }
  /* 16 型 + 12 星座两屏网格，选完还得滚到底才看见按钮（A18）。
     窄屏把这一行钉在视口底部：底部对齐底栏的高度 58px，正好压在底栏上沿。
     两个 ghost 次要出口在窄屏收起——它们都在顶栏与页脚里有一份。 */
  .zx-foot { position: sticky; z-index: 45;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    margin-top: 14px; padding: 9px 10px;
    background: color-mix(in srgb, var(--bg) 96%, transparent); border: 1px solid var(--line); border-radius: var(--r-card);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 6px 0 rgba(26,25,23,.10); }
  .zx-foot > .btn { flex: 1 1 100%; justify-content: center; }
  .zx-foot > .btn.ghost { display: none; }
}

.combo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 16px; }
.combo-list a {
  text-decoration: none; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-tag); padding: 12px 14px;
  font-size: 13px; font-weight: 500; transition: all .15s ease;
}
.combo-list a:hover { color: var(--ink); border-color: var(--rule-2); }

.combo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; }

/* ---------- 合盘页：双面卡 ----------
   宽度跟阅读列（--read）走而不是居中收窄：段落都限宽在 --read 且左对齐，
   卡片自己缩窄居中会让左边缘跟下面每一段都错开，看着像没排进去。
   渐变和光晕全站禁用——两侧本来就各有自己的色（类型族色 / 星座元素色），
   淡染 8% 已经够区分，再叠渐变两个色都会糊。 */
/* ---------- 合盘页：双面卡（2026-10-27 傍晚七重做） ----------
   上一版是一张淡底大卡里并排两个 76px 圆、中间一个 × 悬空、四周大片留白，
   被用户点名「不好看」。这一版改的是**结构**，不是换颜色：
   · 左右各占一半，分别用族色 / 元素色淡染（8%），中间一条分界线；
   · 图标缩到 42px 并推到两侧外缘，文字朝中间靠——视线从两边流向中心；
   · × 做成骑在分界线上的小圆徽，读起来是「两边 + 一个关系」，
     而不是「两个孤零零的圆 + 一个飘着的乘号」。
   渐变仍然禁用（全站纸墨体系），两色淡染足够区分左右。 */
.zx-dual { position: relative; display: grid; grid-template-columns: 1fr 1fr;
  max-width: var(--read); margin: 0 0 2px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.zd-side { display: flex; align-items: center; gap: 11px; padding: 17px 20px; min-width: 0; }
.zd-side-t { justify-content: flex-start;
  background: color-mix(in srgb, var(--tc) 8%, transparent); }
/* 右半边镜像：图标在外侧、文字朝里，与左边共用一条中线 */
.zd-side-z { justify-content: flex-end; text-align: right;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--ec) 8%, transparent); }
.zd-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zd-side-z .zd-txt { align-items: flex-end; }
/* 两侧同构：族色符号 / 元素色符号。试过头像（avatarSVG 的 bust 徽章）——
   徽章自带一圈环，缩到 42px 后环和字叠成一团，索性统一用符号，两边对称。 */
.zd-face { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; color: var(--tc);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--tc) 26%, transparent); }
.zd-face svg { display: block; }
.zd-face-z { color: var(--ec); border-color: color-mix(in srgb, var(--ec) 26%, transparent); }
.zd-code { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.zd-sub { font-style: normal; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.zd-dates { font-style: normal; }
/* × 徽：绝对定位压在中线上，白底 + 细边，从分界线上「盖」过去 */
.zd-x { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; line-height: 1;
  font-size: 12px; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line); }

/* 2026-10-27 深夜：卡片下面那段总结 + 爱情 / 事业 / 健康三节被整块删掉，
   .zd-sec / .zd-h / .zd-p / .zd-line 四条样式随之作废（免费段已无正文）。
   ⚠️ 若以后要在合盘页恢复免费试读，标题那套「左侧 3px 朱线」可照
      .combo .pro .block h4::before 的写法重建，别直接复活旧类名。 */
.zd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; list-style: none; padding: 0; }
.zd-chips li { padding: 5px 13px 5px 11px; font-size: 12.5px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.zd-chips li::before { content: "✓"; margin-right: 6px; font-size: 11px; color: var(--primary); }
/* 双面卡收尾接付费墙（2026-10-27 深夜：中间那段免费正文删掉后，
   卡片直接贴付费墙，.pay 自带的 30px 略紧，加一点） */
.combo .zx-dual + .pay { margin-top: 34px; }
/* 付费段的小标题也加一道朱线（2026-10-27 傍晚八，用户要求）：
   与百科页「左侧 3px 朱线」同一套栏目语言，读起来是同一本书。
   ⚠️ 只加在合盘页（.combo）：别的 .pro（深度报告等）没被要求改，
      真要全站统一，把 .combo 前缀去掉即可。 */
.combo .pro .block h4 { position: relative; padding-left: 12px; }
.combo .pro .block h4::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em;
  width: 3px; border-radius: 2px; background: var(--primary); }
/* 综合特质胶囊挪进付费段后要换底色：.pro 的卡面本身就是 --surface-2，
   胶囊再用同一个色会直接看不见，改成纸白。 */
.combo .pro .zd-chips li { background: var(--surface); }
@media (max-width: 560px) {
  /* 390 宽下每半边只有 163px：图标缩到 36、日期隐掉，否则「火象 · 3.21-4.19」
     会被省略号吃掉半截。日期是装饰信息，专门留给宽屏。 */
  .zd-side { padding: 14px 13px; gap: 9px; }
  .zd-face { width: 36px; height: 36px; }
  .zd-face svg { width: 19px; height: 19px; }
  .zd-dates { display: none; }
  .zd-code { font-size: 14px; }
  .zd-sub { font-size: 10.5px; }
  /* 手机上一条优势就占满一行（最长的 12 个字），缩小内边距至少别让五行太松散 */
  .zd-chips { gap: 7px; }
  .zd-chips li { padding: 4px 10px 4px 9px; font-size: 12px; }
}

/* ---------- 10. 什么是 MBTI（全部限定在 .mbti-page 内） ----------
   v2 重排。这一页是「读 MBTI 是什么」，不是「从一堆卡里挑一个」，
   所以把原来那堆浅米填充盒全部拆掉——填色的结果是整页变成一排排卡片目录，
   而这一页要的是连续阅读。层级改由线来承担：
   · 栏目标题：左侧 3px 朱线（大字栏目在上时改上方一条 44px 短线）
   · 正文栏：与标题共用那条竖线，缩进 13px 对齐，文字直接落在纸面上
   · 对比卡：唯一保留填充的对象——它有编号和四条刻度，是「物件」，需要和文字分开
   刻度条不再自带一套：本页的 .slider-* 定制全部删除，继承全局的「指针 + 刻度」，
   全站只剩一种刻度语言。 */
body[data-route="mbti"] { background: var(--bg); }
.mbti-page { max-width: 1000px; margin: 0 auto; padding: 60px 0 20px; }

/* 栏目标题：上方一条 44px 朱短线 + 紧字距大字，杂志栏目的做法 */
.mbti-page .page-title { text-align: center; margin-bottom: 52px; }
.mbti-page .page-title h1 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800;
  letter-spacing: -.03em; color: var(--ink); margin-bottom: 12px; line-height: 1.25; }
.mbti-page .page-title h1::before { content: ""; display: block; width: 44px; height: 3px;
  background: var(--primary); margin: 0 auto 18px; }
.mbti-page .page-title p { font-size: 14.5px; color: var(--ink-2); }

/* 两栏知识：标题一道朱线统住整栏，正文缩进对齐，不再各自一个盒子 */
.mbti-page .knowledge-section { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 34px; margin-bottom: 64px; }
.mbti-page .knowledge-block { display: flex; flex-direction: column; }
.mbti-page .knowledge-title { font-size: 16.5px; font-weight: 700; color: var(--ink); margin-bottom: 12px;
  padding-left: 10px; border-left: 3px solid var(--primary); line-height: 1.35; }
/* 13px = 3px 线宽 + 10px 标题缩进，两者左边对齐 */
.mbti-page .knowledge-content { padding-left: 13px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.95; flex: 1; }

.mbti-page .dimension-section { margin-bottom: 64px; }
.mbti-page .dim-header { text-align: center; margin-bottom: 36px; }
.mbti-page .dim-header h2 { font-size: clamp(24px, 2.8vw, 30px); font-weight: 800;
  letter-spacing: -.03em; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.mbti-page .dim-header p { font-size: 14.5px; color: var(--ink-2); }
.mbti-page .dimension-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 34px; }
.mbti-page .dim-group { display: flex; flex-direction: column; gap: 12px; }
.mbti-page .dim-group-title { font-size: 16.5px; font-weight: 700; color: var(--ink);
  padding-left: 10px; border-left: 3px solid var(--primary); line-height: 1.35; }
.mbti-page .dim-group-box { padding-left: 13px; flex: 1; }
.mbti-page .unified-text { font-size: 14.5px; color: var(--ink-2); line-height: 1.95; font-weight: 400; }
.mbti-page .unified-text p { margin-bottom: 18px; }
.mbti-page .unified-text p:last-child { margin-bottom: 0; }

.mbti-page .compare-header { text-align: center; margin-bottom: 28px; }
.mbti-page .compare-header h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.mbti-page .compare-header p { font-size: 14px; color: var(--ink-2); }

/* 前置概念：用中性线，不用朱线——它是说明，不是栏目标题，不该和栏目抢注意力。
   不收窄版心：它只有三行，收窄后右边缘会和下方的满宽对比卡错开一截。 */
.mbti-page .concept-box { padding: 2px 0 2px 13px; border-left: 3px solid var(--rule-2);
  margin-bottom: 36px; }
.mbti-page .concept-text p { font-size: 14.5px; color: var(--ink-2); line-height: 1.95; text-align: left; }
.mbti-page .concept-text strong { font-weight: 700; color: var(--ink); }

.mbti-page .compare-container { display: flex; gap: 24px; justify-content: center; align-items: stretch; }
/* 对比卡：两张卡都是 INFP，所以刻度用 NF 绛而不是全局朱砂——这是族的身份色 */
.mbti-page .card { flex: 1; --tc: var(--t-nf); background: var(--surface);
  border: 1px solid var(--rule-2); border-radius: var(--r-card); padding: 30px 26px; }
.mbti-page .card-top { text-align: center; margin-bottom: 26px; }
.mbti-page .card-tag { display: inline-block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--primary-soft); background: var(--primary-soft-bg);
  padding: 3px 10px 4px; border-radius: var(--r-tag); margin-bottom: 14px; }
.mbti-page .card-type { font-size: 42px; font-weight: 800; letter-spacing: .02em;
  margin-bottom: 10px; line-height: 1; color: var(--ink); }
.mbti-page .card-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; min-height: 44px; }

/* 刻度条：形态全部继承全局（指针 + 25/75 刻度 + 中线到指针的色条），
   这里只调本页的疏密——卡片里四条并排，间距要比结果页松一点。 */
.mbti-page .slider-group { gap: 20px; }
.mbti-page .slider-item { gap: 6px; }
.mbti-page .slider-labels { font-size: 12.5px; }
.mbti-page .slider-labels .active { color: var(--ink); }

@media (max-width: 960px) {
  .mbti-page .dimension-grid { grid-template-columns: 1fr; }
  .mbti-page .knowledge-section { grid-template-columns: 1fr; }
  .mbti-page .knowledge-section, .mbti-page .dimension-section { margin-bottom: 48px; }
}
@media (max-width: 768px) {
  .mbti-page { padding: 36px 0 12px; }
  .mbti-page .compare-container { flex-direction: column; }
  .mbti-page .page-title { margin-bottom: 36px; }
  .mbti-page .card { padding: 26px 20px; }
}

/* ---------- 人格对比 ---------- */
.cmp-people { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.cmp-chip { display: flex; align-items: center; gap: 10px; position: relative;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 12px 8px 8px; }
.cmp-chip.self { border-color: #E3C6BB; background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); }
.cmp-chip-pt { display: block; width: 40px; height: 40px; flex: none; }
.cmp-chip-pt .portrait { width: 40px; height: 40px; }
.cmp-chip-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cmp-chip-txt b { font-size: 13.5px; }
.cmp-chip-txt em { font-family: var(--mono); font-size: 11px; font-style: normal; color: var(--muted); }
.cmp-chip-txt em i { font-style: normal; font-weight: 500; }
.cmp-del { width: 26px; height: 26px; flex: none; margin-left: 2px;
  background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer; }
.cmp-del:hover { color: var(--ink); border-color: var(--rule-2); }

.cmp-empty { background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-card);
  padding: 28px 22px; text-align: center; margin-bottom: 18px; }
.cmp-empty h3 { font-size: 15px; margin-bottom: 6px; }
.cmp-empty p { font-size: 13.5px; color: var(--muted); max-width: 34em; margin: 0 auto; }

.cmp-card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2);
  padding: 18px 18px 16px; margin-bottom: 16px; }
.cmp-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
/* 「我 · INFP（调停者） vs 张 · INTJ（建筑师）」：姓名在前，类型代码与中文名跟在后面 */
.cmp-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cmp-nm { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.cmp-nm b { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.cmp-nm .dot { font-size: 13px; color: var(--ink-3); }
.cmp-nm em { font-family: var(--mono); font-style: normal; font-size: 15px; font-weight: 500;
  letter-spacing: .02em; color: var(--primary-soft); }
.cmp-nm .paren { font-size: 12.5px; color: var(--muted); }
.cmp-vs { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.cmp-tags { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.cmp-rel { font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(176,58,33,.32); background: rgba(176,58,33,.06); color: var(--primary-soft); }
.cmp-same { flex: none; font-size: 11.5px; font-family: var(--mono); padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); }
.cmp-same.s4, .cmp-same.s3 { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--line)); }
.cmp-same.s2 { color: var(--primary-soft); border-color: color-mix(in srgb, var(--primary-soft) 45%, var(--line)); }
.cmp-same.s1, .cmp-same.s0 { color: #8F5A28; border-color: color-mix(in srgb, #8F5A28 45%, var(--line)); }

/* 全员四维对比表：一行一个维度、一列一个人，每人一条独立轨道（2 人 / 3 人 / 4 人同一套） */
.cmpx { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2);
  padding: 15px 18px 11px; margin-bottom: 16px; }
.cmpx-head, .cmpx-row { display: grid; gap: 10px; align-items: center;
  grid-template-columns: 68px repeat(var(--n, 2), minmax(0, 1fr)); }
.cmpx-head { padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.cmpx-corner { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.cmpx-who { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.cmpx-who b { max-width: 100%; font-size: 12px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmpx-who em { font-family: var(--mono); font-size: 11px; font-style: normal;
  color: var(--tc, var(--muted)); letter-spacing: .04em; }
.cmpx-row { padding: 8px 0; border-bottom: 1px solid rgba(26,25,23,.06); }
.cmpx-row:last-of-type { border-bottom: none; }
.cmpx-dim b { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.cmpx-dim em { font-family: var(--mono); font-size: 11px; font-style: normal; color: var(--muted); letter-spacing: .05em; }
.cmpx-cell { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 3px 4px 2px; border-radius: var(--r-tag); }
.cmpx-cell.me { background: rgba(26,25,23,.05); }
.cmpx-track { position: relative; width: 100%; height: 6px; border-radius: 3px; background: rgba(26,25,23,.11); }
.cmpx-track::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px;
  background: rgba(26,25,23,.30); transform: translateX(-50%); z-index: 1; }
.cmpx-fill { position: absolute; top: 0; bottom: 0; background: var(--tc); opacity: .5; z-index: 2; }
.cmpx-fill.l { right: 50%; border-radius: 3px 0 0 3px; }
.cmpx-fill.r { left: 50%; border-radius: 0 3px 3px 0; }
.cmpx-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--tc);
  z-index: 3; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface-2); }
.cmpx-cell.me .cmpx-dot { background: var(--ink); }
.cmpx-val { font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--muted); white-space: nowrap; }
.cmpx-val b { color: var(--ink); font-weight: 600; margin-right: 3px; }
.cmpx-val i { font-style: normal; }
.cmpx-note { font-size: 11px; color: var(--muted); line-height: 1.65; margin: 8px 0 2px; }

.cmp-summary { font-size: 13.5px; color: var(--ink); margin: 14px 0 14px; padding-left: 12px;
  border-left: 2px solid var(--primary); }
.cmp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cmp-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tag); padding: 14px 16px; }
.cmp-col h4 { font-size: 12.5px; color: var(--primary-soft); margin-bottom: 8px; }
.cmp-col.warn h4 { color: #8F5A28; }
.cmp-col ul { list-style: none; }
.cmp-col li { font-size: 13px; line-height: 1.75; color: var(--muted); padding: 6px 0; border-top: 1px solid var(--line); }
.cmp-col li:first-child { border-top: none; }
.cmp-col li b { display: inline-block; margin-right: 6px; color: var(--ink); font-weight: 600; font-size: 12px; }
.cmp-cat { margin-top: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-tag); padding: 14px 16px; }
.cmp-cat h4 { font-size: 12.5px; margin-bottom: 6px; }
.cmp-cat p { font-size: 13px; color: var(--muted); line-height: 1.75; }
.cmp-hint { margin-top: 12px; font-size: 11.5px; color: var(--muted); opacity: .85; }
.cmp-card-actions { margin-top: 16px; }

.cmp-add { margin-top: 22px; border: 1px dashed var(--line); border-radius: var(--r-card); padding: 16px 16px 14px; }
.cmp-add .pick-label { margin-top: 0; }
.cmp-input { width: 100%; max-width: 320px; min-height: 44px; padding: 0 14px; margin-bottom: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-tag);
  /* 16px 是 iOS 的分界线：小于它，聚焦时 Safari 会把整页放大 */
  color: var(--ink); font-family: var(--sans); font-size: 16px; }
.cmp-input::placeholder { color: var(--muted); }
.cmp-input:focus { outline: none; border-color: var(--primary); }
.cpick-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.cmp-selfpick { margin-top: 18px; text-align: left; }
.cpick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
  min-height: 54px; cursor: pointer; border-radius: var(--r-tag);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--sans); transition: all .15s ease; }
.cpick b { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.cpick span { font-size: 10.5px; white-space: nowrap; }
.cpick:hover { border-color: var(--tc, var(--primary)); color: var(--ink); }
.cpick.on { background: color-mix(in srgb, var(--tc, var(--primary)) 16%, var(--surface-2));
  border-color: var(--tc, var(--primary)); color: var(--ink); }
.cpick.on b { color: var(--tc, var(--ink)); }
.cmp-add-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cmp-add-row .btn:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--line); opacity: 1; }
.cmp-tip { margin-top: 10px; font-size: 11.5px; color: var(--muted); line-height: 1.7; }
/* 加满人数后的提示态 */
.cmp-add.is-full { border-style: solid; border-color: rgba(143,90,40,.26);
  background: linear-gradient(180deg, rgba(143,90,40,.05), transparent 70%); }
.cmp-add.is-full .cmp-tip { color: #8F5A28; }
.cmp-empty .cmp-empty-tip { margin-top: 10px; font-size: 12px; color: var(--ink-3); }

/* ================= 多人整组分析（3 人及以上） ================= */
.grp { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.grp-kicker { display: inline-block; margin-bottom: 8px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; color: var(--primary-soft); text-transform: uppercase; }
.grp-head h3 { font-size: 20px; font-weight: 700; line-height: 1.45; letter-spacing: .01em; }
.grp-head p { margin-top: 9px; max-width: 64em; font-size: 13.5px; line-height: 1.85; color: var(--muted); }
.grp-head .grp-hint { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }

.grp-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.grp-dim { padding: 14px 16px 12px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-card); }
.gd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.gd-head b { font-size: 13.5px; font-weight: 600; }
.gd-tag { flex: none; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line);
  font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.gd-tag.same { color: #3C6B52; border-color: rgba(60,107,82,.32); background: rgba(60,107,82,.07); }
.gd-tag.split { color: #B03A21; border-color: rgba(176,58,33,.32); background: rgba(176,58,33,.07); }
.gd-tag.wide { color: #8F5A28; border-color: rgba(143,90,40,.32); background: rgba(143,90,40,.08); }
.gd-range { position: relative; height: 6px; margin: 2px 0 14px; border-radius: 3px; background: rgba(26,25,23,.09); }
.gd-range::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px;
  background: rgba(26,25,23,.18); }
.gd-span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: rgba(176,58,33,.32); }
.gd-pt { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--tc);
  z-index: 2; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface-2); }
.gd-pt.me { background: var(--ink); }
.gd-text { font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.gd-ends { margin-top: 8px; font-family: var(--mono); font-size: 11px; line-height: 1.6;
  color: var(--ink-3); letter-spacing: .01em; }

.grp-sec { margin-top: 24px; }
.grp-sec h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 13px; font-weight: 600; color: var(--ink); }
.grp-sec h4::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--primary); }
.grp-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.grp-role { position: relative; overflow: hidden; padding: 12px 13px 12px 15px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-tag); }
.grp-role::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px; background: var(--tc); }
.gr-title { margin-bottom: 6px; font-size: 10.5px; letter-spacing: .06em; color: var(--muted); }
.gr-who { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.gr-who b { font-size: 14px; font-weight: 600; color: var(--ink); }
.gr-who em { font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: .05em; color: var(--tc); }
.grp-role p { font-size: 12px; line-height: 1.75; color: var(--muted); }
.grp-note { margin-top: 10px; font-size: 11px; line-height: 1.7; color: var(--ink-3); }

.grp-couple { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.gc { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.gc.ok { border-color: rgba(60,107,82,.26);
  background: linear-gradient(180deg, rgba(60,107,82,.055), var(--surface-2) 70%); }
.gc.warn { border-color: rgba(143,90,40,.26);
  background: linear-gradient(180deg, rgba(143,90,40,.055), var(--surface-2) 70%); }
.gc h4 { margin-bottom: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; }
.gc.ok h4 { color: #3C6B52; }
.gc.warn h4 { color: #8F5A28; }
.gc.wide { grid-column: 1 / -1; }
.gc-who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 7px;
  font-size: 15px; font-weight: 600; color: var(--ink); }
.gc-who em { font-family: var(--mono); font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted); }
.gc p { font-size: 12.5px; line-height: 1.8; color: var(--muted); }

.grp-rules ol { list-style: none; counter-reset: gr; display: grid; gap: 8px; }
.grp-rules li { counter-increment: gr; position: relative; padding: 11px 14px 11px 44px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-tag);
  font-size: 12.5px; line-height: 1.75; color: var(--muted); }
.grp-rules li::before { content: counter(gr, decimal-leading-zero); position: absolute; left: 15px; top: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--primary-soft); }
.rl-tag { display: inline-block; margin-right: 8px; padding: 1px 6px; border-radius: 4px; vertical-align: 1px;
  font-family: var(--mono); font-size: 11px; color: var(--ink); background: rgba(26,25,23,.07); }

@media (max-width: 900px) {
  .grp-dims, .grp-couple { grid-template-columns: 1fr; }
  .grp-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grp-roles { grid-template-columns: 1fr; }
  .grp-head h3 { font-size: 18px; }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 900px) {
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .tc-fig { height: 178px; }
  .tc-fig .portrait { width: 152px; height: 152px; }
}
@media (max-width: 720px) {
  .tiers { grid-template-columns: 1fr; }
  /* 「继续探索」两个板块在窄屏的排法：
     16 型网格从 8 列降到 4 列（再窄每格就只剩 70px，形象和字都看不清了）；
     星座横幅从「左文右按钮」改成上下两栏，竖分隔线换成横线。 */
  .tgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  /* 2026-10-27 深夜十一：「继续探索」大标题删掉后，板块头多了「更多 >」按钮。
     这里原来 `flex-wrap: wrap` 会让按钮掉到描述下面、还左对齐（很丑），
     改成不换行：标题与描述在左、按钮固定右端，描述窄一点、折成三行可以接受。 */
  .eb-head { gap: 10px; }
  .eb-copy h3 { font-size: 16px; }
  .eb-more { padding: 4px 9px; font-size: 12px; }
  /* 窄屏不再把按钮和备注塞进一行（原来按钮被挤成两行断字），
     按钮独占一行、拉满宽度，视觉焦点只落在这一处。 */
  .zx-banner { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .zx-banner > .btn { width: 100%; }
  .zx-b-main h3 { font-size: 16.5px; }
  /* 手机端三档版本原来一行一张、每张约 260px，三张就把首屏吃光了。
     改成「三行式」：版本名 + 时长在左、一句话说明在左下、按钮在右侧，
     横向排一张约 84px，三张一共不到 280px。巨型标题与两条分隔线在窄屏
     只有装饰作用，这里收掉；时长改由 .t-time 接住。 */
  .tiers { gap: 10px; }
  .vcard {
    padding: 13px 14px; display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
  }
  .ribbon { display: none; } /* 角标与 .t-sub 里的「速测版」是同一句话 */
  .vcard { text-align: left; } /* 卡内原来跟着 .section-head 居中，名字贴左、说明居中，两种对齐打架 */
  .v-head { grid-column: 1; grid-row: 1; min-width: 0; }
  .t-sub { font-size: 15px; margin: 0; }
  /* 2026-10-27 深夜十一：时长原来跟版本名挤在同一行（inline），
     「48题速测版 约 3 分钟」在 390 宽下要 182px，而按钮右侧一占、老版名那列只剩 170 左右，
     nowrap 的文字直接溢到按钮底下（用户截图：按钮压在「分钟」上）。
     改成独占一行的小字：版本名永远一行，时长另起一行，两者都不再和按钮抢宽度。 */
  .t-time { display: block; margin: 3px 0 0; font-size: 11.5px; font-weight: 500;
    letter-spacing: 0; color: var(--ink-3); }
  .t-title, .t-rule { display: none; }
  /* 一句话说明铺满整行：跟按钮挤在同一列里只剩 130px 宽，
     每张卡都会折成「…先看 / 一眼」这种断在词中间的残行 */
  .t-one { grid-column: 1 / -1; grid-row: 2; flex: none; font-size: 12px; line-height: 1.5; }
  .vcard > .btn.wide { grid-column: 2; grid-row: 1; width: auto;
    padding: 8px 12px; font-size: 12.5px; }
  /* 「换个角度看看自己」的头部：标题必须独占一行。跟「查看更多 + 暂停」挤在同一行时，
     标题只剩 200px 宽，8 个字的标题会折成「换个角度看看 / 自己」，比之前更难看。
     所以窄屏让标题与副标题占满一行，控件簇落到下一行靠右。 */
  /* 2026-10-27 深夜十一：原来为了给副标题腾位置，窄屏把标题压成独占一行、
     「查看更多」落到第二行；副标题早已删掉，这一行只剩「精选测评 + 查看更多」，
     合计不到 200px，390 宽绰绰有余。改回同一行、垂直居中（用户截图点名）。 */
  .qz-tease-head { flex-wrap: nowrap; gap: 12px; align-items: center; }
  .qz-tease-copy { flex: 1 1 auto; min-width: 0; }
  .qz-tease .qz-tease-tools { margin-top: 0; margin-left: auto; }
  .qz-tease .section-sub { margin-bottom: 12px; }
  .report { padding: 20px 16px 22px; }
  .report .bigcode { font-size: 34px; }
  .rep-hero { gap: 14px; padding-bottom: 16px; margin-bottom: 14px; }
  .portrait { width: 104px; height: 104px; }
  .rep-hero .portrait { width: 126px; height: 126px; margin-top: -8px; margin-bottom: -10px; }
  .rep-hero-txt .tname { font-size: 17px; }
  .report .thook { font-size: 12.5px; }
  .bars-card { padding: 12px 13px; }
  .slider-group { gap: 10px; }
  .sl-dim { font-size: 11.5px; }
  .cmp-card-head { gap: 10px; }
  .cmp-line { gap: 4px 8px; }
  .cmp-nm b { font-size: 15px; }
  .cmp-nm em { font-size: 14px; }
  .cmp-nm .paren { font-size: 11.5px; }
  .cmp-tags { margin-left: 0; width: 100%; }
  /* 对比表在窄屏不能再压字号：10.5px 的维度名和 9px 的字母缩写已经看不清了。
     改成「保住 12px + 允许横向滑动」——2 人正好放下，3 人才需要滑一下。 */
  .cmpx { padding: 13px 12px 9px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmpx-head, .cmpx-row { gap: 8px; grid-template-columns: 56px repeat(var(--n, 2), 100px); }
  .cmpx-dim b { font-size: 12px; }
  .cmpx-dim em { font-size: 11px; }
  .cmpx-who b { font-size: 12px; }
  .cmpx-who em { font-size: 10.5px; }
  .cmpx-val { font-size: 11px; }
  .cmpx-cell { padding: 3px 2px 2px; gap: 4px; }
  .cmpx-track { height: 7px; }
  .cmpx-dot { width: 10px; height: 10px; }
  .cmpx-fill { opacity: .7; }
  .cmpx-val { font-size: 11px; }
  .cmpx-val b { margin-right: 2px; }
  .cmpx-note { font-size: 10.5px; }
  .cmp-people { gap: 8px; }
  .cmp-chip { padding: 6px 10px 6px 6px; }
  .cmp-chip-pt, .cmp-chip-pt .portrait { width: 32px; height: 32px; }
  .cmp-chip-txt b { font-size: 12.5px; }
  .cmp-chip-txt em { font-size: 11px; }
  .cpick-grid { grid-template-columns: repeat(4, 1fr); }
  .cmp-card { padding: 15px 14px 13px; }
  .cmp-cols { grid-template-columns: 1fr; }
  .cmp-input { max-width: none; }
  .slider-group { gap: 11px; }
  .ch { padding: 13px 13px; }
  .rep-price { padding: 15px 13px 13px; }
  .price-num { font-size: 25px; }
  .rep-dock { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 8px 8px 8px 14px; gap: 10px; }
  .dock-l span { display: none; }
  .pay .row { align-items: flex-start; }
  .pay .btn { width: 100%; }
  .hero { padding: 16px 20px; }
  /* 这句标题在 30px + 1px 字距下长 364px，而 376 屏容器 336px、400 屏 360px，
     两边都要折行（微信只差 4px）。字距归零省 15px，字号收到 27 再省 35px：
     实测 315px，最窄的 336 容器还剩 21px（6%），换安卓字体也扛得住。
     上限留 30px，612–720 区间平滑长回去，不在 720 处硬跳。 */
  .hero h1 { font-size: clamp(27px, 4.9vw, 30px); letter-spacing: 0; margin-bottom: 13px; }
  .hero-sub { font-size: 17.5px; margin-bottom: 7px; }
  .hero-sub-sm { font-size: 14px; margin-bottom: 22px; }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 300px; margin-inline: auto; }
  .hero-cta .btn { width: 100%; padding: 0 24px; }
  .scale { padding: 20px 12px 18px; }
  .scale-row { gap: 8px; }
  .end-label { font-size: 11.5px; letter-spacing: 0; padding-top: 0; }
  /* 热区要顶到手指尺寸：375 宽下 7 个点原先只有 32px，中间还夹着 8px 间隙，
     实际触点又比圆点大，很容易点到相邻档。把两侧标签的横向占用压到最小，
     再给每个点 44px 的热区。
     2026-10-26 改为五档后每档左右各多出约 30px，圆点相应放大（32/23/15 → 38/27/17）。
     手机内宽按 342 算：两个标签约 70、间隙 16，留给五个点的约 256，44×5＝220 放得下。 */
  .dot-hit { width: 44px; height: 44px; }
  .knob.k1, .knob.k5 { width: 38px; height: 38px; }
  .knob.k2, .knob.k4 { width: 27px; height: 27px; }
  .knob.k3 { width: 17px; height: 17px; }
}

@media (max-width: 480px) {
  /* 窄屏放不下 21 字一行，撤掉手写换行，交给浏览器自然折 */
  .hero-sub-sm br { display: none; }
  .tcard { min-height: 0; }
  .tc-fig { height: 142px; }
  .tc-fig .portrait { width: 118px; height: 118px; }
  .tc-body { padding: 10px 12px 12px; }
}
@media (max-width: 380px) {
  .scale { padding: 18px 10px 16px; }
  .scale-row { gap: 6px; }
  .end-label { font-size: 10.5px; letter-spacing: 0; padding-top: 0; }
  .dot-hit { width: 38px; height: 38px; }
  .knob.k1, .knob.k5 { width: 31px; height: 31px; }
  .knob.k2, .knob.k4 { width: 22px; height: 22px; }
  .knob.k3 { width: 14px; height: 14px; }
}

/* ================= 长按保存浮层（微信 / iOS 用） =================
   微信内置浏览器会忽略 <a download>，iOS Safari 只会把图存进「文件」。
   这两处改成把图铺满屏，让用户长按存进相册——比弹一句「已保存」诚实，也真的管用。 */
body.sheet-lock { overflow: hidden; }
.img-sheet { position: fixed; inset: 0; z-index: 210; background: rgba(20,18,15,.94);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
.img-sheet-in { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 520px; }
.img-sheet-tip { margin: 0; font-size: 13.5px; color: #E7EEF5; letter-spacing: .02em; }
.img-sheet-img { display: block; width: 100%; height: auto; border-radius: var(--r-card);
  box-shadow: 0 10px 0 rgba(0,0,0,.35); }
.img-sheet .btn { flex: none; }

/* ================= 添加对比对象的弹窗 ================= */
body.pm-lock { overflow: hidden; }.pm-mask { position: fixed; inset: 0; z-index: 200; background: rgba(20,18,15,.55);
  display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pm-box { position: relative; width: 100%; max-width: 560px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px 22px;
  box-shadow: 0 12px 0 rgba(26,25,23,.12); max-height: calc(100vh - 48px); overflow-y: auto; }
.pm-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: var(--r-btn);
  background: transparent; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.pm-x:hover { background: rgba(26,25,23,.07); color: var(--ink); }
/* 轻量提示弹窗：只有一句话 + 一个「知道了」 */
.alert-box { max-width: 430px; padding-bottom: 18px; }
.alert-text { margin: 10px 0 20px; font-size: 13.5px; line-height: 1.85; color: var(--muted); }
.alert-actions { display: flex; justify-content: flex-end; }
.alert-actions .btn { min-width: 108px; }
/* 底部工具行：返回 / 上一题都靠左，主按钮在右侧 */
.pm-foot { margin-top: 14px; align-items: center; justify-content: flex-start; }
.pm-prev { background: none; border: 0; color: var(--muted); font-size: 13px; padding: 11px 4px;
  cursor: pointer; font-family: inherit; flex: 0 0 auto; line-height: 1.4; }
.pm-prev:hover { color: var(--ink); }
.pm-title { font-size: 19.5px; font-weight: 600; line-height: 1.45; color: var(--ink); margin: 0 0 8px; padding-right: 28px; }
.pm-sub { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.pm-field { display: block; margin: 16px 0 0; }
.pm-field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.pm-select { width: 100%; appearance: none; -webkit-appearance: none; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--ink); font-size: 15px;
  padding: 14px 40px 14px 16px; cursor: pointer; font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%2393A1AE' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.pm-select:focus { outline: none; border-color: var(--primary); }
.pm-input { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-btn);
  color: var(--ink); font-size: 15px; padding: 12px 14px; font-family: inherit; }
.pm-input:focus { outline: none; border-color: var(--primary); }
.pm-opts { display: flex; flex-direction: column; gap: 10px; }
.pm-opt { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-tag);
  border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.pm-opt:hover { border-color: var(--rule-2); }
.pm-opt input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none; margin: 2px 0 0;
  border-radius: 50%; border: 1.5px solid #B9AF9C; background: transparent; cursor: pointer; }
.pm-opt input:checked { border-color: var(--primary); background: var(--primary);
  box-shadow: inset 0 0 0 3px var(--surface-2); }
.pm-opt:has(input:checked) { border-color: var(--primary); background: rgba(200,69,43,.07); }
.pm-opt span { display: block; min-width: 0; }
.pm-opt b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.pm-opt em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 3px; }
.pm-link { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); background: var(--surface-2);
  border: 1px dashed var(--line); border-radius: var(--r-card); padding: 12px 14px; word-break: break-all; line-height: 1.6; }
/* 进度条移到「上一题」上方：左对齐、只占三分之一、橙色，不跟标题抢头部 */
.pm-prog { width: 33%; height: 5px; border-radius: 99px; background: rgba(26,25,23,.10);
  margin: 0; overflow: hidden; }
.pm-prog i { display: block; height: 100%; background: #8F5A28; border-radius: 99px; transition: width .3s ease; }
/* 题干：比标题小一档、换色区分（标题白、题干蓝），压成一行 */
.pm-q { font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--primary-soft);
  text-align: center; margin: 4px auto 24px; text-wrap: balance; }
.pm-scale { display: flex; align-items: center; gap: 10px; padding: 4px 0 18px; }
.pm-end { font-size: 11.5px; color: var(--muted); flex: none; }
.pm-dots { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pm-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; background: transparent;
  border: 1.5px solid #B9AF9C; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s, transform .15s; }
.pm-dot i { width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: background .15s; }
.pm-dot:hover { border-color: var(--primary); }
.pm-dot.on { border-color: var(--primary); background: var(--primary); transform: scale(1.06); }
.pm-dot.on i { background: #fff; }
.pm-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pm-type { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px;
  border-radius: var(--r-btn); border: 1px solid var(--line); background: var(--surface-2); cursor: pointer;
  color: var(--ink); font-family: inherit; transition: border-color .15s, background .15s; }
.pm-type b { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.pm-type span { font-size: 10.5px; color: var(--muted); }
.pm-type:hover { border-color: var(--tc, var(--primary)); }
.pm-type.on { border-color: var(--tc, var(--primary)); background: rgba(200,69,43,.10); }
.pm-result { border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; background: var(--surface-2);
  text-align: center; margin: 4px 0 4px; }
.pm-result .portrait { margin: 0 auto 10px; }
.pm-rtype { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.pm-code { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: .08em; color: var(--ink); }
.pm-rtype span { font-size: 14px; color: var(--ink-2); }
.pm-rdesc { font-size: 12.5px; color: var(--muted); line-height: 1.65; margin: 8px 0 0; }
.pm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.pm-actions .btn { flex: 1 1 auto; min-width: 120px; }
.cmp-rel { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--ink-2); margin-left: 4px; vertical-align: 1px; }
.pair-price { margin-top: 20px; }
.pd-block { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.pd-block:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.pd-block h4 { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.pd-list { margin: 0 0 14px; padding-left: 18px; }
.pd-list li { font-size: 13px; color: var(--ink-2); line-height: 1.75; margin-bottom: 7px; }
.pd-conf { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pd-c { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; }
.pd-c b { display: block; font-size: 12.5px; font-weight: 600; color: #26241F; margin-bottom: 4px; }
.pd-c p { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0; }
.pd-plan h5 { font-size: 12.5px; font-weight: 600; color: #26241F; margin: 0 0 8px; }
.pd-plan ol { margin: 0; padding-left: 18px; }
.pd-plan li { font-size: 12.5px; color: var(--muted); line-height: 1.8; }

@media (max-width: 640px) {
  .pm-mask { align-items: flex-end; padding: 0; }
  .pm-box { max-width: none; border-radius: var(--r-card) var(--r-card) 0 0; max-height: 92vh;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
  .pm-title { font-size: 16.5px; }
  .pm-prog { width: 38%; height: 5px; margin: 0; }
  .pm-q { font-size: 16px; line-height: 1.55; margin: 4px auto 20px; }
  .pm-dot { width: 32px; height: 32px; }
  .pm-dot i { width: 9px; height: 9px; }
  .pm-types { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .pm-type { padding: 8px 2px; }
  .pm-type b { font-size: 12px; }
  .pm-type span { font-size: 11px; }
  .pm-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
  .pm-foot { margin-top: 10px; }
  .pm-code { font-size: 23px; }
  .pm-select, .pm-input { font-size: 16px; }
}

/* 本地预览角标：只有 dev 模式才注入（见 app.js mountDevBadge），
   一眼确认「付费内容已展开」是否生效；不接收指针事件，绝不挡点击。
   2026-10-29：底栏加图标后长到 58px，原来 bottom:14px 正好压在第一格「首页」上，
   把图标和字糊成一片 → 抬到底栏之上。 */
#dev-badge { position: fixed; left: 14px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .02em;
  background: rgba(200,69,43,.10); border: 1px solid rgba(176,58,33,.42);
  color: #B03A21; pointer-events: none; }

/* ================= 顶部导航：人格百科下拉（16 型按四大家族分列） ================= */
.nav-item { position: relative; display: flex; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; }
.nav .caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor;
  margin-top: 3px; transition: transform .18s ease; opacity: .75; }
.nav-item.open .caret, .nav-item:hover .caret { transform: rotate(180deg); }
.nav-drop { position: absolute; top: calc(100% + 10px); right: 0; left: auto;
  width: 640px; padding: 16px 18px 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 10px 0 rgba(26,25,23,.10); z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s; }
/* 链接和面板之间的 10px 空隙也要能接住鼠标，否则一移上去就收起 */
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop, .nav-item.open .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
/* 点了菜单里的链接就锁死收起：跳转后鼠标往往还悬在导航上（:hover）、
   焦点还留在被点的链接上（:focus-within），光靠去掉 .open 关不掉。
   nav-lock 优先级更高，压住这三个条件；JS 侧只在鼠标移开（mouseleave）
   或焦点真正离开导航时才解锁——点击时那次 blur() 不算（见 wireNavItem 的
   suppress 标记），否则锁会被自己擦掉。 */
.nav-item.nav-lock .nav-drop { opacity: 0; visibility: hidden; pointer-events: none; }
.nd-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nd-fam { display: flex; align-items: baseline; gap: 6px; padding: 2px 8px 7px; margin-bottom: 3px;
  border-bottom: 1px solid var(--line); color: var(--tc); font-size: 12.5px; font-weight: 600;
  text-decoration: none; letter-spacing: .02em; }
.nd-fam em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: .04em; }
.nd-fam:hover { color: var(--tc); opacity: .82; }
.nd-t { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-tag);
  text-decoration: none; transition: background .13s ease; }
.nd-t b { flex: none; width: 38px; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--ink); letter-spacing: .02em; }
.nd-t span { min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.nd-t:hover { background: var(--surface-2); }
.nd-t:hover span { color: var(--ink); }

@media (max-width: 1040px) {
  .nav-drop { width: min(560px, calc(100vw - 32px)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nav-drop { display: none; }
  .nav .caret { display: none; }
}

/* 星座下拉：一行一星座（图标 + 名称 + 日期） */
.nd-z { gap: 9px; padding: 5px 8px; }
.nd-zico { flex: none; display: inline-flex; align-items: center; }
.nd-ztxt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nd-ztxt b { font-size: 12px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.nd-ztxt em { font-style: normal; font-size: 11px; color: var(--muted);
  font-family: var(--mono); letter-spacing: .02em; line-height: 1.2; }
.nd-z:hover .nd-ztxt em { color: var(--ink-2); }

/* ================= 人格百科下拉：每个家族一块（家族名 / 描述 / 四色块） ================= */
/* 结构：.nd-group > .nd-head(名称+描述) + .nd-grid(4 个 .nd-tile)，四块纵向堆叠 */
.nav-drop-stack { display: block; width: 700px; padding: 15px 18px 17px;
  max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; }
/* 面板可滚动后，::before 的透明桥接会被 overflow 裁掉，改用 nav-item 上的桥接 */
.nav-item::after { content: ""; position: absolute; left: -24px; right: -24px; top: 100%; height: 12px; }
.nav-drop-stack::before { display: none; }
.nav-drop-stack::-webkit-scrollbar { width: 8px; }
.nav-drop-stack::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.nav-drop-stack::-webkit-scrollbar-track { background: transparent; }

.nd-group + .nd-group { margin-top: 15px; }
.nd-head { position: relative; padding-left: 12px; margin-bottom: 8px; }
.nd-head::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
  border-radius: 2px; background: var(--tc); }
.nd-gname { display: block; font-size: 15px; font-weight: 700; line-height: 1.35;
  color: var(--ink); letter-spacing: .04em; }
.nd-gdesc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--muted); }

.nd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nd-tile { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: 44px; border-radius: var(--r-tag); text-decoration: none; overflow: hidden;
  /* 旧版是「族色 60% 实心块 + 白字」：十六个色块铺开像调色盘。
     v2 改成纸面 + 左侧 3px 族色条——族的身份是一条边，不是一整块颜色。 */
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--tc), inset 0 0 0 1px rgba(26,25,23,.07);
  transition: background .14s ease, box-shadow .14s ease; }
.nd-tile b { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); letter-spacing: .03em; }
.nd-tile em { font-style: normal; font-size: 11px; line-height: 1.2; color: var(--ink-3);
  font-family: var(--mono); letter-spacing: .08em; }
.nd-tile:hover { background: color-mix(in srgb, var(--tc) 10%, var(--surface-2));
  box-shadow: inset 4px 0 0 var(--tc), inset 0 0 0 1px rgba(26,25,23,.07); }
.nd-tile:hover em { color: var(--ink-2); }
.nd-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 星座下拉：四元素各 3 个，色块里是「图标 + 名称」+ 日期 */
.nd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nd-tile-z { height: 46px; gap: 1px; }
.nd-zrow { display: inline-flex; align-items: center; gap: 5px; }
.nd-tile-z .nd-zico { display: inline-flex; align-items: center; color: var(--tc); }
.nd-tile-z em { font-size: 11px; letter-spacing: .04em; }

/* 测试下拉：分类块 + 底部一行「全部测试」入口 */
.nd-all { display: block; margin-top: 11px; padding-top: 10px; text-align: center;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--primary-soft);
  text-decoration: none; transition: color .14s ease; }
.nd-all:hover { color: var(--ink); }

@media (max-width: 1120px) {
  /* 窄屏收起描述；宽度跟视口走，避免「人格百科」在最左时面板顶出屏幕左侧 */
  .nav-drop-stack { width: min(700px, 68vw); }
  .nd-gdesc { display: none; }
  .nd-head { margin-bottom: 7px; }
}
@media (max-width: 640px) {
  /* 与其它下拉一致：小屏直接不展开 */
  .nav-drop-stack { display: none; }
}

/* =========================================================
   更多测试（脱单 / 桃花 / 心理年龄 / IQ / EQ）
   与全站同一套令牌：卡片 surface 底、1px 描边、单一主色。
   每个测试只拿一个 --qc 作为图标块与刻度的颜色，卡片本身不染色，
   否则首页会同时出现五种强调色，把「一个主 CTA」的原则冲掉。
   ========================================================= */
/* 「更多测试」入口不再占卡带里的一格，改成标题右侧那颗「查看更多」按钮：
   卡带里四格全是真测试，不用拿一格去放入口。 */
/* 「换个角度看看自己」的头部（2026-10-26）：标题与副标题收进同一列左对齐，
   「查看更多」挂在标题那一行的右端。2026-10-27 傍晚按用户要求删掉了副标题
   （「除了人格类型，还有一组更轻的测试…」），标题独占一列，右侧按钮靠 flex 收边。 */
.qz-tease { text-align: left; }
.qz-tease-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; }
.qz-tease-copy { min-width: 0; }
/* 没有副标题了，标题自己的下边距归零，间距交给 .qz-tease-head 的 margin-bottom */
.qz-tease-head .section-title { margin-bottom: 0; }
/* 控件簇与标题那一行视觉居中：标题 34px 时行框约 41px、按钮 30px，故下推 6px；
   窄屏标题降到 24px，偏移跟着收，别让按钮浮在标题上方 */
.qz-tease .qz-tease-tools { margin-top: clamp(1px, .55vw, 6px); }

/* ---------- 首页「换个角度看看自己」：左图右文的静态列表卡（2026-10-26 改版） ----------
   原来是「一次四张、每 3 秒自动换一组」的轮播：格子窄（每张约 170px），
   一句话要折三四行；而且读到一半内容就被跳走，只能靠暂停钮治标。
   现在改成同类站那种列表卡：左边一块彩色方图、右边三行文字，静态铺开，
   桌面两列、手机一列。（轮播那套 .qz-car / .qz-car-stage / .qz-car-page / 暂停钮
   的元素都已撤掉，对应样式也一并删除，见下面「已删」注释。） */
.qz-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
/* 标题右侧的「查看更多」：入口不放卡里了，改成这颗按钮 */
.qz-more-link {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  font-size: 12.5px;
}
.qz-more-link:hover { border-color: var(--primary); color: var(--primary); }
/* 标题右侧那一簇控件：现在只剩「查看更多」。
   暂停钮随轮播一起撤了（没有自动播放，它就没有存在理由，WCAG 2.2.2 也只约束会自动动的内容）。 */
.qz-tease-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.qz-tease-tools .qz-more-link { margin-top: 0; }
/* 「查看更多」按钮。类名里的 qz-car 是轮播时代留下的，元素还在用，名字就不动了。 */
.qz-car-btn {
  flex: none; padding: 5px 12px; font: inherit; font-size: 12px; line-height: 1.5;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-tag); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.qz-car-btn:hover { border-color: var(--primary); color: var(--primary); }
.qz-car-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 18禁专区入口（2026-10-27）：吊在精选测评卡列表下面的一条虚线框。
   它不是一个测试，是一条「去专区」的路，所以刻意不跟上面那些卡长一样：
   虚线边 + 淡朱砂底，标题整句带箭头，右端再给一枚 →。 */
.qz-adult { display: flex; align-items: center; gap: 14px; margin-top: 16px;
  padding: 13px 18px; text-decoration: none;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--primary) 4%, transparent); }
/* 左端圆形小图标（2026-11-02）：恋爱入口用情侣图、18禁入口用调情图，
   两条对称各一枚。object-fit:cover + 圆形裁切，图片居中取主体。 */
.qz-adult-ico { flex: none; width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: center;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.qz-adult-main { min-width: 0; }
.qz-adult-t { display: block; font-size: 15px; font-weight: 600; color: var(--primary); }
.qz-adult-t i { font-style: normal; margin: 0 2px; }
.qz-adult-d { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.qz-adult-go { margin-left: auto; flex: none; font-size: 15px; color: var(--primary); }
.qz-adult:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.qz-adult:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 左图右文：图是一块带该测试家族色的圆角方块（本站没有插画，用大号图标顶上），
   右边是 标题 → 一句话 → 元信息。align-items 用 flex-start，图块保持正方，
   不被卡片高度拉成长方形。 */
.qz-card {
  display: flex; flex-direction: row; align-items: flex-start; gap: 14px; text-align: left;
  padding: 14px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card); text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.qz-fig {
  flex: none; width: 74px; height: 74px; border-radius: var(--r-tag);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--qc); background: color-mix(in srgb, var(--qc) 14%, transparent);
}
.qz-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qz-card:hover { border-color: color-mix(in srgb, var(--qc) 55%, var(--line)); background: var(--tint); transform: translateY(-1px); }
.qz-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-tag); color: var(--qc);
  background: color-mix(in srgb, var(--qc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--qc) 26%, transparent);
}
.qz-ico-lg { width: 46px; height: 46px; border-radius: var(--r-tag); }
/* 2026-10-27：插画版趣测图（数据里配了 art 才出现）。
   图标版是「家族色浅底 + 线稿图标」，插画版要反过来：去掉底色、图片铺满，
   只用同一支线色收边，避免插画的米底与家族色底叠成两层。
   尺寸比图标版大一档（图标 74→88、20→64）：插画缩到 54px 时就退化成一块彩色，
   人物细节全丢，放大后「花树 / 鹿 / 伞」这些线索才认得出。 */
.qz-fig.has-art { width: 88px; height: 88px; padding: 0; overflow: hidden;
  background: none; border: 1px solid var(--line); }
.qz-fig.has-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qz-ico.has-art { width: 64px; height: 64px; padding: 0; overflow: hidden;
  background: none; border: 1px solid var(--line); }
.qz-ico.has-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 详情页头部（2026-10-27）：原来只有 46px 的家族色图标块，换成插画后要放大 ——
   68px 约等于右侧「标签 + 大标题」两行的高度，左下角对齐看着才稳。
   必须写在 .qz-ico.has-art 之后：两者特异性相同（.qz-ico-lg 在 1831 行），
   顺序在前会被 64px 盖掉。 */
.qz-ico-lg.has-art { width: 68px; height: 68px; }
.qz-card-t { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.qz-card-d { font-size: 12.5px; color: var(--muted); line-height: 1.6; flex: 1; }
.qz-card-m { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.qz-card-m i { font-style: normal; }
/* 2026-10-27 深夜十一：`.qz-done`（「· 已测 36 分」）按用户要求整块撤掉，
   卡片与列表行都不再输出这枚标记，对应的两条样式（含 "· " 前缀）一并删除。 */
/* 人气：人形图标 +「XX.XXW 人已测」，位置照参考站放在卡片底部左侧。
   比旁边那行稍大一点，才看得出是主要信息。
   2026-10-31 起这个数字是**真的**（云端 quiz_stats 计数，做完一份 +1），
   拿不到数字时整条不显示——不再有示意值。 */
.qz-card-m .qz-heat { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-2); }
.qz-card-m .qz-heat svg { flex: none; opacity: .55; }
.qz-card-m .qz-heat i { font-style: normal; letter-spacing: .02em; }

/* 中心页 */
/* 「更多测试」小节头 2026-10-27 傍晚七整块删除（用户要求）：
   版本卡本来就是这一页的标题，紧跟其后再来一个「更多测试 + 不替代 MBTI…」，
   等于一段话起两次头。分组自己的小标题足够分段。
   所以现在：分类列表自己带顶距（接版本卡 / 接工具栏都一样）。 */
.qz-hub #versions { margin-top: 34px; }
.qz-cat { margin-top: 34px; }
/* 筛选 chip + 搜索框并成一条工具栏（2026-10-27 用户要求：搜索框挪到这行 chip
   的后面、右对齐，整行提到页面最上面）。chip 在左、搜索框顶到右端，
   把原来 chip 右侧那一大片空白用起来。
   这一行现在是 #/quizzes 的第一块，所以自己不带上下外边距，
   与下一块（版本卡 / 小节头）的间距交给它们自己的 margin-top。
   ⚠️ 窄屏必须折成两行：390 宽下 5 个 chip 自己就要占一行半，
      再挤一个 320px 的搜索框会横向溢出。 */
.qz-tool { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 24px 0 0; }
/* 两条子块原来各带外边距（.qz-filter 下 22px、.qz-search 下 16px），进工具栏后清零 */
.qz-tool .qz-filter { margin: 0; }
.qz-tool .qz-search { margin: 0 0 0 auto; width: 320px; max-width: 320px; }
/* 测试列表页：18禁整组收成一个入口块（2026-10-27） */
.qz-cat-adult { margin-top: 22px; }
.qz-adult-entry { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 20px; text-decoration: none;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--primary) 4%, transparent); }
.qz-ae-main { flex: 1 1 220px; min-width: 0; }
.qz-ae-t { display: block; font-size: 16px; font-weight: 700; color: var(--primary); }
.qz-ae-d { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.qz-ae-btn { flex: none; white-space: nowrap; }
.qz-adult-entry:hover { border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent); }
.qz-adult-entry:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 窄屏折成上下两段（2026-10-30 修）：`.qz-ae-main` 的 `flex: 1 1 220px` 在**列方向**下
   basis 作用在高度上，文字块被硬撑到 220px 高，描述与按钮之间于是空出一大块。
   折列时必须把 basis 归零，让它按内容高度走。 */
@media (max-width: 560px) {
  .qz-adult-entry { flex-direction: column; align-items: stretch; gap: 14px; }
  .qz-ae-main { flex: 0 0 auto; }
  .qz-ae-btn { justify-content: center; }
}
.qz-note { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--r-card); background: rgba(26,25,23,.02); }
.qz-note b { font-size: 12.5px; color: var(--ink); }
.qz-note p { font-size: 12px; line-height: 1.8; margin-top: 5px; max-width: 62em; }

/* ---------- 18禁趣味专区 #/adult（2026-10-27 建框架，深夜填内容） ----------
   版式照参考图：3 列卡，每张顶部一道 3px 色条、**左侧 60px 插画缩略图 + 右侧名称与一句话**。
   ⚠️ 类名必须用 aq- 前缀：ad- 早就被站长后台（#/admin 的 .ad-grid / .ad-cell /
      .ad-row …）占了，2026-10-27 撞过一次——那一页的 .ad-grid 是 5 列，
      把这里的 3 列覆盖成了五列小格。
   2026-10-27 深夜：18 套全部做完，卡片全是 <a> 链到 #/quiz/<id>。
   深夜八按用户要求：删掉底部那行「约 N 分钟 · M 题」，图标由上方改到文字前面。
   深夜九：18 套都配了扁平矢量插画（`assets/quizzes/<id>.webp`），左侧那格改用
   缩略图；没有 art 的仍退回色底图标圆，两条分支都留着。
   `.is-soon` / `.aq-soon` 灰卡样式已删（不再有占位卡）。 */
.aq-tag { display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  padding: 2px 9px; border-radius: var(--r-tag); }
.aq-title { margin: 12px 0 0; }
.aq-note { margin-top: 14px; font-size: 12.5px; line-height: 1.75; color: var(--ink-3); max-width: 46em; }
.aq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.aq-card { position: relative; display: flex; align-items: center; gap: 10px;
  padding: 15px 14px; background: var(--surface); color: inherit; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
/* 顶条用 ::before 而不是 border-top：卡片有圆角，border 会跟着圆角弯，色条要平直 */
.aq-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--qc); }
a.aq-card { transition: border-color .15s ease, transform .15s ease; }
a.aq-card:hover { border-color: color-mix(in srgb, var(--qc) 42%, var(--line)); transform: translateY(-2px); }
/* 2026-10-27 深夜八：图标从「文字上方」改成「文字前面」（横排）。
   原来卡片是 flex-column，34px 圆顶在最上面，名称和一句话被压到第二、三行，
   三列网格里每张卡都白白多出一行高度。现在圆在左、右侧竖排名称 + 一句话。 */
.aq-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 12px;
  color: var(--qc); background: color-mix(in srgb, var(--qc) 11%, transparent); }
/* 2026-10-27 深夜九：18 套都配了扁平矢量插画，卡片左侧那格改放缩略图。
   尺寸给到 60px 而不是原来的 34px——插画缩到 34px 会糊成一块颜色，
   与首页 88px / 列表 64px / 详情页 68px 同一个道理。没 art 的仍退回色底图标。 */
/* 2026-11-03 插画改透明底（用户方案 C）：容器一律不要再垫底色，
   否则透明图等于白抠 —— 卡面是什么色就该透出什么色。线框保留，框色跟 --line 走。 */
.aq-ico.has-art { padding: 0; overflow: hidden; background: none; }
.aq-ico.has-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aq-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aq-name { font-size: 14px; font-weight: 600; color: var(--ink); }
/* 2026-10-27 深夜十：一句话描述一律一行（用户点名「你被哪种方式击中…」折成了两行）。
   实测三列时卡片 319px、图标 60px，留给文字只有 217px，而那句 20 个全宽字要 220px，
   差不到 3px 就折行。所以：卡片横距收紧（padding 16→14、gap 12→10），描述 11.5→11px，
   再加 -.02em 字距（11px 下每字 0.22px，肉眼无感），余量约 4px。
   white-space + 省略号是兜底——以后真出现更长的句子，宁可截断也不把卡片撑高。 */
.aq-desc { font-size: 11px; line-height: 1.65; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; }
.aq-foot { display: flex; gap: 10px; margin-top: 24px; }
@media (max-width: 900px) { .aq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aq-grid { grid-template-columns: 1fr; gap: 10px; } }

/* 2026-10-27 深夜：原来那里还有一条「18禁目录索引」（.aq-index / .aq-mini），
   18禁成了 QUIZ_CATS 里的正式分类后，中心页会像其它分类一样整段列表渲染，
   索引条多余，样式随之删除。 */

/* 介绍页 */
.qz-intro-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.qz-tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  color: var(--qc); border: 1px solid color-mix(in srgb, var(--qc) 34%, transparent);
  background: color-mix(in srgb, var(--qc) 11%, transparent);
  padding: 2px 8px; border-radius: var(--r-tag); margin-bottom: 6px; }
/* keep-all：窄屏下「SCL-90 心理状态自评」原来会折成「心理状 / 态自评」，
   中文词被切成两半。只在空格处换行，变成「SCL-90」/「心理状态自评」两行；
   break-word 兜住「你在喜欢的人面前装到第几层」这类超长标题，不至于溢出。 */
.qz-intro-head > div { min-width: 0; }
.qz-intro-head h1 { margin: 0; font-size: clamp(26px, 3.6vw, 34px);
  word-break: keep-all; overflow-wrap: anywhere; }
/* 介绍页「这份测什么」：SCL-90 / DISC / 九型这类名字不解释任何东西，
   这里补一段人话。用左侧竖条而不是卡片，免得和下面的类型表抢层次。 */
.qz-about { margin: 16px 0 0; padding: 12px 0 12px 14px;
  border-left: 2px solid color-mix(in srgb, var(--qc, var(--primary)) 45%, transparent); }
/* 2026-11-02：原来是 11px 等宽灰字，和下面 13.5px 的正文挤在同一档灰里，
   读起来就是一整段——用户直接指出「这个字样式和旁边的字体一模一样」。
   改成小标签：朱砂浅底 + 600 字重 + 拉开字距，和正文一眼分得开，
   样式语言与 .qz-tag 一致，不新造第二套。 */
.qz-about-t { display: inline-block; margin-bottom: 8px; padding: 2px 8px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--primary-soft); background: var(--primary-soft-bg); border-radius: var(--r-tag); }
.qz-about p { font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
/* 「开始测试」按钮里的价格：比主文案轻一档，但不藏——点之前就该知道要多少钱 */
.cta-price { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 500;
  margin-left: 8px; opacity: .82; }
.qz-points { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 16px 0 18px; }
.qz-points li { display: flex; gap: 9px; font-size: 13.5px; color: var(--muted); }
.qz-points li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 9px;
  border-radius: 1px; background: var(--qc); opacity: .8; }
/* 九型这类「分类型」的测评：介绍页铺一张类型表，替代三条通用说明 */
.qz-typelist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 16px 0 0; }
.qz-tl { display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13.5px; color: var(--ink); line-height: 1.35;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-tag); padding: 8px 10px; }
.qz-tl b { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--qc, var(--primary)); }
.qz-tl-note { margin: 10px 0 18px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 400px) {
  .qz-typelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.qz-prev { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding: 13px 16px; border-radius: var(--r-tag);
  background: var(--surface-2); border: 1px solid var(--line); }
.qz-prev > div { display: flex; flex-direction: column; gap: 3px; }
.qz-prev b { font-size: 14px; }
.qz-prev em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.qz-intro-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
/* 介绍页第二个按钮是「会员免费」金色徽章（2026-10-27 照参考图改，原为描边款「会员 ¥39.9 + 小冠」）。
   皇冠在左、文案在右。⚠️ 金色是营销色，白字落在 --gold 上只有 2.2:1，
   所以字和冠都用深墨（--ink 在 --gold 上约 5.4:1）。
   它仍然是付费入口（点了进会员收银台），「免费」指开通后这一项不再单收费。 */
.qz-pass { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--gold); border-color: var(--gold); color: #24180A; font-weight: 600; }
.qz-pass:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-hard); }
/* 支付通道没接时这枚按钮是 disabled，但**不能变灰**：
   它是这一页的第二卖点，灰掉就完全读不出「会员免费」这层意思了。
   用淡金底 + 深墨字（#3A2C12 在 #E8D3AB 上约 8:1），一眼看得出是会员徽章、
   又明显比右边可点的状态弱一档。 */
.qz-pass:disabled { background: #E8D3AB; border-color: #DCC291; color: #3A2C12; }
.qz-crown-ico { flex: none; display: block; width: 17px; height: 17px; }
.qz-disc { font-size: 11.5px; line-height: 1.75; color: var(--ink-3); margin-top: 16px; max-width: 64em; }

/* 答题页：一屏一题，选项纵向铺满，触控高度 52 */
.qz-run { max-width: 720px; margin: 26px auto 0; padding: 26px 24px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.qz-run .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
/* 进度条是这一页唯一的进度指示：不再写「第几题 / 共几题」，
   题量不提前暴露，长度由轨道自己说话。 */
.qz-run .track { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.qz-run .track > span { display: block; height: 100%; background: var(--qc); border-radius: 999px;
  transition: width .28s cubic-bezier(.4, 0, .2, 1); }
.qz-center { padding: 30px 0 8px; }
.qz-q { font-size: 21px; line-height: 1.65; font-weight: 600; color: var(--ink);
  letter-spacing: -.015em; margin-bottom: 22px; min-height: 2.4em; }
.qz-opts { display: flex; flex-direction: column; gap: 9px; }
.qz-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 12px 15px; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-btn);
  color: var(--ink); font-family: var(--sans); font-size: 14.5px; line-height: 1.55;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.qz-opt:hover { border-color: color-mix(in srgb, var(--qc) 60%, var(--line)); background: var(--tint); }
.qz-opt:active { transform: scale(.995); }
.qz-opt:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; }
.qz-k { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--r-tag); font-family: var(--mono); font-size: 11px;
  color: var(--muted); border: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.qz-opt:hover .qz-k { color: var(--qc); border-color: color-mix(in srgb, var(--qc) 50%, transparent); }
.qz-ot { flex: 1; }
.qz-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 14px; text-align: center; }
.qz-run-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.qz-quit { font-size: 12.5px; color: var(--muted); text-decoration: none; }
.qz-quit:hover { color: var(--ink); }

/* 结果页 */
.qz-report { max-width: 820px; margin: 26px auto 0; }
.qz-rhead { padding: 26px 26px 22px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); border-top: 2px solid var(--qc); }
.qz-rmeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qz-rmeta .qz-tag { margin-bottom: 0; }
.qz-when { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.qz-rtitle { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; letter-spacing: -.025em; margin-bottom: 8px; }
.qz-rsub { font-size: 14px; line-height: 1.75; color: var(--muted); max-width: 42em; }
.qz-rscore { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.qz-rscore b { font-family: var(--mono); font-size: 52px; font-weight: 500; line-height: 1;
  color: var(--qc); letter-spacing: -.03em; }
.qz-unit { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.qz-rscore em { font-style: normal; font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; margin-left: 4px; }
.qz-rbar { height: 5px; margin-top: 14px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.qz-rbar > i { display: block; height: 100%; background: var(--qc); border-radius: 999px; }

.qz-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px;
  margin-top: 16px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); }
.qz-dim-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qz-dim-top b { font-size: 13px; font-weight: 600; }
.qz-dim-top span { font-family: var(--mono); font-size: 12px; color: var(--qc); }
.qz-bar { height: 5px; margin: 7px 0 6px; background: #EDE7D9; border-radius: 999px; overflow: hidden; }
.qz-bar > i { display: block; height: 100%; background: var(--qc); border-radius: 999px; }
.qz-dim p { font-size: 11.5px; line-height: 1.65; color: var(--muted); }

/* ---------- 分数制结果页的两种壳（2026-11-03） ----------
   gauge（仪表盘，4 维）：大数字 + 一条带 25/50/75 刻度的整体位置尺 + 单列刻度条。
     ⚠ 尺子上画的是「整体位置」不是总分：心理年龄是「29 岁」、SCL-90 是「180 分」，
       把它们硬按 0–100 摆位置是假精确，所以非 /100 的量表用分项均值定位并标注。
   sheet（体检单，6 维以上）：左侧小方块结论分 + 带序号、横线的分项表。
     九因子的 SCL-90 用 2×2 卡片会拉成一长条，表格才读得出「哪几项偏高」。 */
.qz-sreport { max-width: 720px; }
.qz-gauge { position: relative; height: 8px; margin-top: 16px; border: 1px solid var(--line);
  border-radius: 2px; overflow: hidden; background-color: var(--surface-2);
  background-image: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(25% - 1px),
    #D8D0BF calc(25% - 1px), #D8D0BF 25%); }
.qz-gauge > i { display: block; height: 100%; background: var(--qc); }
.qz-gauge-cap { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }

/* 分项行：两种壳共用结构，靠排法区分 */
.qz-srows { list-style: none; margin-top: 16px; padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); }
.qz-srow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qz-srow-top b { font-size: 13px; font-weight: 600; }
.qz-srow-top i { font-family: var(--mono); font-style: normal; font-size: 12px; color: var(--qc); }
.qz-srow-bar { height: 5px; margin: 7px 0 6px; background: #EDE7D9; border-radius: 999px; overflow: hidden; }
.qz-srow-bar > i { display: block; height: 100%; background: var(--qc); border-radius: 999px; }
.qz-srow p { font-size: 11.5px; line-height: 1.65; color: var(--muted); }

/* 仪表盘：单列。四条并排就变成表格了，单列才像一排小表盘 */
.qz-shell-gauge .qz-srow + .qz-srow { margin-top: 16px; }

/* 体检单：结论条 + 表格。行间实线、序号在左，读起来像一张化验单 */
.qz-sheet-top { display: flex; align-items: flex-start; gap: 18px; }
.qz-sheet-score { flex: none; width: 96px; padding: 10px 4px 9px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-tag); }
.qz-sheet-score b { display: block; font-family: var(--mono); font-size: 30px; font-weight: 500;
  line-height: 1.15; letter-spacing: -.03em; color: var(--qc); }
.qz-sheet-score i { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--muted); }
.qz-sheet-score em { display: block; margin-top: 5px; font-style: normal; font-size: 11px;
  letter-spacing: .04em; color: var(--ink); }
.qz-sheet-txt { min-width: 0; }
.qz-shell-sheet .qz-rtitle { font-size: clamp(21px, 3vw, 27px); margin-bottom: 6px; }
.qz-shell-sheet .qz-srows { padding: 4px 22px; }
.qz-shell-sheet .qz-srow { position: relative; padding: 16px 0 16px 30px; }
.qz-shell-sheet .qz-srow + .qz-srow { border-top: 1px solid var(--line); }
.qz-srow-no { position: absolute; left: 0; top: 19px; font-family: var(--mono);
  font-size: 10.5px; color: var(--qc); opacity: .75; }


.qz-sec { margin-top: 20px; padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); }.qz-sec h2 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.qz-sec > p { font-size: 14px; line-height: 1.9; color: var(--muted); }
/* 结果段落扩到 8 段后，段间距放宽一档，否则读起来像墙 */
.qz-sec > p + p { margin-top: 13px; }
.qz-tips { list-style: none; counter-reset: qztip; display: flex; flex-direction: column; gap: 10px; }
.qz-tips li { counter-increment: qztip; display: flex; gap: 12px; font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.qz-tips li::before { content: "0" counter(qztip); flex: none; font-family: var(--mono); font-size: 11px;
  color: var(--qc); padding-top: 2px; }
.qz-sec-tips { background: var(--surface-2); }
.qz-foot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ---------- 类型报告（2026-11-02） ----------
   用户给的四份外部报告作范文，拍板趣味测评改「纯类型制」：
   眉标 → 巨型类型名 → 英文名 → 副标题 → 总述卡 → 长文卡
   （段落 + ✓标签 + 爱情/友谊/亲情/事业四场景 + 人际/成长）→ 更多细节 + 建议 + 收尾。
   纸墨里不放彩色 emoji，层次全靠字号、留白与 --qc 一处竖线/圆点。 */
.qz-treport { max-width: 720px; }
.qz-t-head { text-align: center; padding: 32px 20px 24px; }
/* 头部插画（2026-11-02）：33 份类型制结果页原来是「眉标 + 巨型类型名」，
   做到第三份就认不出是哪份测试了，截图发出去更没有辨识度。直接复用该测评
   列表卡/详情页那张图（不新画），缩到 96px 当一页报告的封面用。
   没有 art 的退回线性图标，`currentColor` 会吃 --qc，颜色照样跟测试走。 */
.qz-t-face { display: inline-flex; width: 96px; height: 96px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: var(--r-tag); overflow: hidden;
  background: var(--surface-2); }
/* 有插画的那一版不垫底（插画已透明）；没插画的图标版仍用 --surface-2 当色块 */
.qz-t-face.has-art { background: none; }
.qz-t-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qz-t-face:not(.has-art) { align-items: center; justify-content: center; color: var(--qc); }
.qz-t-eyebrow { font-size: 12px; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px; }
.qz-t-name { font-size: clamp(38px, 7vw, 64px); font-weight: 700; line-height: 1.1;
  letter-spacing: .04em; color: var(--qc); margin-bottom: 7px; }
.qz-t-en { font-family: var(--mono); font-size: 12.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.qz-t-sub { font-size: 14.5px; line-height: 1.7; color: var(--muted); max-width: 30em; margin: 0 auto;
  /* 副标题折行时常常只剩一两个字（「…的样子」折成「样/子」），balance 让两行长度接近。
     旧 WebView 不认这个属性，退化成普通折行，不影响显示。 */
  text-wrap: balance; }
.qz-t-card { margin-top: 16px; padding: 24px 26px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); }
.qz-t-lead { border-left: 3px solid var(--qc); }
.qz-t-lead p { font-size: 14.5px; line-height: 1.95; color: var(--ink); text-wrap: pretty; }
.qz-t-card > p, .qz-t-paras > p { font-size: 14px; line-height: 1.95; color: var(--muted); }
.qz-t-card > p + p, .qz-t-paras > p + p { margin-top: 14px; }
.qz-t-h { font-size: 14px; font-weight: 600; color: var(--ink); margin: 26px 0 12px;
  padding-left: 10px; border-left: 2px solid var(--qc); line-height: 1.4; }
.qz-t-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-t-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  line-height: 1.5; padding: 6px 11px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
.qz-t-tag i { font-style: normal; color: var(--qc); font-size: 11px; }
.qz-t-scene { margin-top: 22px; }
.qz-t-scene h4 { font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
.qz-t-scene h4::before { content: ""; display: inline-block; width: 6px; height: 6px;
  background: var(--qc); border-radius: 50%; margin-right: 8px; vertical-align: 2px; }
.qz-t-scene p { font-size: 13.5px; line-height: 1.9; color: var(--muted); }
.qz-t-line { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }
.qz-t-line b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.qz-t-line p { font-size: 13.5px; line-height: 1.9; color: var(--muted); }
.qz-t-more { background: var(--surface-2); }
.qz-t-tips { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.qz-t-tips li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.8; color: var(--muted); }
.qz-t-tips li::before { content: "\2713"; flex: none; color: var(--qc); font-size: 12px; padding-top: 2px; }
.qz-t-closing { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.8; color: var(--ink); }

/* ---------- 三种节奏（2026-11-02 第三档） ----------
   同一份类型数据换排法，不换内容：
     .qz-shell-flow   段落连排（self / mind）
     .qz-shell-duo    先场景后总述，优点/注意左右两栏对照（relation）
     .qz-shell-strip  正文逐段编号成签条，标签改方章（fun / adult）
   只动顺序、间距与标签形状，字号/颜色仍由上面那套统一控制。
   ⚠ 外壳类名必须与内层容器分开（qz-shell-* / qz-t-*）：第一版给根节点也写
     qz-t-duo，和内层两栏容器同名，结果整页被 `display:grid` 拆成左右两栏、
     标题和总述并排跑了。 */
.qz-t-life { margin-top: 4px; }
.qz-t-paras { margin-top: 4px; }
.qz-shell-duo .qz-t-life, .qz-shell-strip .qz-t-life { margin-top: 0; }

/* 关系类：两栏对望。左边「我这样」，右边「对面会怎样」。
   两栏里标签不做药丸——并排药丸在 150px 栏宽里会折成三行，
   改成竖排清单（小勾 + 一行一条），两栏才立得住。 */
.qz-t-duo { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px;
  padding-top: 18px; border-top: 1px solid var(--line); }
.qz-t-duo-col { min-width: 0; padding-right: 18px; }
.qz-t-duo-col + .qz-t-duo-col { padding: 0 0 0 20px; border-left: 1px dashed var(--line); }
.qz-t-duo .qz-t-h { margin-top: 0; }
.qz-t-duo .qz-t-tags { flex-direction: column; gap: 8px; }
.qz-t-duo .qz-t-tag { border: 0; background: transparent; border-radius: 0;
  padding: 0 0 0 14px; position: relative; }
.qz-t-duo .qz-t-tag i { position: absolute; left: 0; top: 0; }
/* 关系类第一场景（爱情/首要场景）放大成首卡：读者先看关系里的具体表现 */
.qz-shell-duo .qz-t-scene.is-first { margin-top: 18px; padding: 14px 16px;
  background: var(--surface-2); border-left: 3px solid var(--qc); border-radius: var(--r-tag); }
.qz-shell-duo .qz-t-scene.is-first h4 { font-size: 14px; }
.qz-shell-duo .qz-t-scene.is-first p { font-size: 14.5px; line-height: 1.95; color: var(--ink); }
.qz-shell-duo .qz-t-paras { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

/* fun / adult：一段一张「签条」。编号放左侧栏，段间虚线。
   原来五段是一整块灰字，滑到第三段就失去位置感，也没法单独截图。 */
.qz-shell-strip .qz-t-paras { counter-reset: qzp; margin-top: 0; }
.qz-shell-strip .qz-t-paras > p { position: relative; padding-left: 30px; }
.qz-shell-strip .qz-t-paras > p + p { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--line); }
.qz-shell-strip .qz-t-paras > p::before {
  counter-increment: qzp; content: counter(qzp, decimal-leading-zero);
  position: absolute; left: 0; top: 4px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; color: var(--qc); opacity: .8; }
/* 方章标签：圆角是「标签」，方角是「盖章」 */
.qz-shell-strip .qz-t-tag { border-radius: var(--r-tag); background: transparent;
  border-color: var(--qc); padding: 5px 10px; }
/* 场景标题变成带横线的条目名，像账簿上的目 */
.qz-shell-strip .qz-t-scene h4 { display: flex; align-items: center; gap: 10px; }
.qz-shell-strip .qz-t-scene h4::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

@media (max-width: 640px) {
  .qz-t-head { padding: 24px 14px 20px; }
  .qz-t-face { width: 84px; height: 84px; margin-bottom: 14px; }
  .qz-t-name { font-size: clamp(30px, 11vw, 46px); }
  .qz-t-card { padding: 19px 17px; }
  .qz-t-card > p, .qz-t-paras > p, .qz-t-lead p { font-size: 13.5px; line-height: 1.9; }
  /* 两栏在 390 上各剩约 150px：缩内边距、标签缩 12px，仍并排——
     并排才是「对望」，堆起来就跟连排版一样了。 */
  .qz-t-duo { column-gap: 0; }
  .qz-t-duo-col { padding-right: 12px; }
  .qz-t-duo-col + .qz-t-duo-col { padding-left: 13px; }
  /* 栏宽只有 ~130px：标题「你身上最值钱的地方」在 14px 下会折成两行，
     竖线跟着拉长一块，两栏就不齐了。缩到 12.5px 刚好一行。 */
  .qz-t-duo .qz-t-h { font-size: 12.5px; padding-left: 8px; margin-bottom: 10px; }
  .qz-t-duo .qz-t-tag { font-size: 12px; line-height: 1.6; }
  .qz-shell-duo .qz-t-scene.is-first { padding: 12px 13px; }
  .qz-shell-strip .qz-t-paras > p { padding-left: 26px; }
}

@media (max-width: 900px) {
  .qz-dims { grid-template-columns: 1fr; gap: 13px; }
}
@media (max-width: 640px) {
  /* 手机双列竖卡（2026-10-31 深夜，用户指定）。
     ---------------------------------------------------------
     原先这里是一列横卡，理由写在旧注释里：双列时每张只剩约 147px，
     左图右文的话文字区只有 45px——一行放三个字，等于不能用。
     不是「双列」不行，是「双列 + 横卡」不行。
     所以改成竖卡：图占满卡宽、文字在下面，147px 下标题一行 9 个字，
     一句话两行截断，读得通。
     ⚠️ 桌面（>640px）仍是两列横卡，那一段一个字没动。
     ⚠️ .qz-cat .qz-list（#/quizzes 中心页）用的是行式列表，
        特异性比 .qz-list 高，不受这里影响。 */
  .qz-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .qz-card { flex-direction: column; align-items: stretch; gap: 8px; padding: 9px; }
  /* 图块在竖卡里撑满宽度：有插画的走 .has-art（原 88px 方图），
     没插画的走家族色图标块。两者都要跟着卡宽走。
     2026-11-01 用户要求改成 4:3（原 1:1），每张省约 32px。
     ⚠️ 插画本身是 512 方图、满构图（人物从头顶一直到脚，或树冠顶到脚底），
        4:3 必然裁掉上下各 12.5%。object-position 偏上是**先保头**——
        这批图里头顶普遍比脚底更靠近边缘（single 头顶在 22% 处、脚底在 89%）。
        真觉得裁得难看，把 aspect-ratio 改回 1 / 1 即可，别去调 object-position。 */
  .qz-fig, .qz-fig.has-art { width: 100%; height: auto; aspect-ratio: 4 / 3; min-height: 88px; }
  .qz-fig.has-art img { object-position: 50% 42%; }
  /* 图标版本来是按 32px 画的 SVG，卡放大后不跟着放就成了小邮票 */
  .qz-fig:not(.has-art) svg { width: 42%; height: 42%; }
  .qz-card-t { font-size: 13.5px; line-height: 1.36;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* 桌面靠 flex:1 把元信息推到底；竖卡里那样会让整个卡被拉长，
     改成固定两行 + 元信息 margin-top:auto 贴底（grid 会把同一行卡片拉齐） */
  .qz-card-d { font-size: 11.5px; line-height: 1.45; flex: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .qz-card-m { margin-top: auto; gap: 2px 8px; }
  .qz-card-m .qz-heat { font-size: 11px; }
  .qz-run { margin-top: 16px; padding: 18px 14px 16px; }
  .qz-center { padding: 20px 0 4px; }
  .qz-q { font-size: 18px; line-height: 1.6; min-height: 0; margin-bottom: 16px; }
  .qz-opt { min-height: 50px; font-size: 14px; padding: 11px 12px; gap: 10px; }
  .qz-rhead { padding: 20px 16px 18px; }
  .qz-rscore b { font-size: 42px; }
  .qz-sec, .qz-dims { padding: 17px 16px; }
  .qz-srows { padding: 16px; }
  .qz-shell-sheet .qz-srows { padding: 2px 16px; }
  .qz-sheet-top { gap: 13px; }
  .qz-sheet-score { width: 82px; padding: 9px 3px 8px; }
  .qz-sheet-score b { font-size: 26px; }
  .qz-sec > p { font-size: 13.5px; line-height: 1.85; }
  .qz-intro-foot .btn, .qz-foot .btn { flex: 1 1 auto; }
  /* 手机上两个按钮改上下两行：并排时「全站通票 ¥39.9」+ 冠正好卡在折行边缘，
     字体一换（安卓默认字体比苹方宽）就跳成两行、高度还不齐；干脆整行，
     主按钮在上仍是实心，通票在下描边，主次不靠宽窄也分得清 */
  .qz-intro-foot { flex-direction: column; }
  .qz-intro-foot .btn { width: 100%; }
  .qz-prev { align-items: flex-start; }
  .qz-prev .btn { width: 100%; }
}

/* 中心页：行式列表。五张卡按 3 列排会空出两个洞，列表一行一件事更干净。
   ⚠️ 必须限定在 .qz-cat 里（2026-10-27 修）：首页「换个角度看看自己」也用了 .qz-list，
   原来这条无条件规则把首页那排两列 grid 改成了单列，六张卡竖着排成一条长龙。 */
.qz-cat .qz-list { display: flex; flex-direction: column; gap: 8px; }
/* 五列 → 四列（2026-10-27 深夜十一）：原来有一列专给「已测 N 分」，
   那枚标记删掉后整列空着、还要多吃一个 gap，所以列定义一起收掉。 */
.qz-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 16px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.qz-row:hover { border-color: color-mix(in srgb, var(--qc) 50%, var(--line)); background: var(--surface-2); transform: translateX(2px); }
.qz-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qz-row-t { display: flex; align-items: baseline; gap: 9px; font-size: 15px; font-weight: 600; }
.qz-row-t em { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--qc); }
.qz-row-d { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.qz-row-dims { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 260px; }
.qz-row-dims i { font-style: normal; font-size: 11px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--rule-2);
  border-radius: var(--r-tag); padding: 2px 7px; white-space: nowrap; }
.qz-row-go { font-family: var(--mono); font-size: 14px; color: var(--muted); }
.qz-row:hover .qz-row-go { color: var(--qc); }

/* 介绍页：单栏，主面板限宽，与答题页同宽 */
.qz-intro-wrap { margin-top: 24px; }
.qz-intro { max-width: 720px; margin-left: auto; margin-right: auto; }

/* 窄屏四维刻度：单行时「维度名 92 + 两极 80 + 间隙 30」吃掉 200px，
   轨道只剩 100px，四条线的差异根本看不出来。620 以下拆两行：
   第一行维度名，第二行「左极 — 轨道 — 右极」，轨道拿到整宽。 */
@media (max-width: 620px) {
  .rep-hero .bars-card .slider-item { flex-wrap: wrap; gap: 5px 8px; align-items: center; }
  .rep-hero .bars-card .sl-dim { width: 100%; }
  .rep-hero .bars-card .slider-track { flex: 1 1 auto; min-width: 0; }
  .rep-hero .bars-card .sl-pole { font-size: 10.5px; }
  .rep-hero .bars-card .sl-pole i { font-size: 10.5px; }
}

@media (max-width: 760px) {
  .qz-intro-wrap { margin-top: 16px; }
  .qz-row { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 13px 14px; }
  .qz-row-dims { display: none; }
  .qz-row-t { font-size: 14px; }
  .qz-row-d { font-size: 11.5px; }
  .qz-row-go { display: none; }
}

/* ---------- 底部固定导航 .tabbar（2026-10-27） ----------
   傍晚删掉「人格百科」那一格，深夜又把「MBTI 入门」从底栏挪回结果页；
   2026-10-29 加回一格「恋爱大挑战」，现在是四格：
   首页 / 测试列表 / 恋爱大挑战 / 我的。
   全站 fixed，以下路由隐藏：
   · result / preview —— 结果页底部有悬浮操作条 .rep-dock（fixed），叠两层没法看；
   · test —— MBTI 答题中，防止误触跳出；
   · quiz 且 sub=run —— 趣味测评答题中（2026-10-27：介绍页与结果页改回显示底栏，
     以前整个 quiz 路由一起藏，用户点进九型介绍页发现没有底栏）；
   · s —— 分享页保持沉浸。
   「测试列表」落点就是 #/quizzes，选中态跟着 quizzes 走。
   ⚠️ 删掉的那一格同时把 types / type 的选中态规则删了——那两页现在底栏三格都不亮，
   这是删格子的必然后果，别再补一条「types 高亮首页」的假规则。 */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar a { flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; padding: 6px 2px; color: var(--muted);
  text-decoration: none; font-size: 11px; line-height: 1.2;
  /* 四格之后单格只剩约 90px，「恋爱大挑战」五个字带拉丁字母都放得下，
     但仍不许折行——折了图标和文字就挤成一坨 */
  white-space: nowrap; -webkit-tap-highlight-color: transparent; }
/* 图标线宽、颜色都由这一处控制：stroke 走 currentColor，
   所以 `.on` 那条文字色一变，图标自动跟着变，不用另写一套。 */
.tabbar svg { width: 21px; height: 21px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.65;
  stroke-linecap: round; stroke-linejoin: round; }
/* 不做 stroke-width 过渡：0.35px 的差在 21px 图标上本来就看不出，
   加了 transition 反而会在切页时留半帧细线（headless 里能测到停在旧值）。 */
/* 选中格图标再实一点。⚠️ 这里必须照抄下面那组 data-route 选择器：
   `.on` 类在底栏是历史遗留、JS 从来没加过，写 `.tabbar a.on svg` 等于死代码
   （2026-10-29 实测 strokeWidth 始终 1.65，才发现）。改选中态时两处一起改。
   2026-10-30 补上真正缺的几处：答题/结果页（#/quiz/*）与 18 禁（#/adult）
   都属于「测试列表」这一格；推广中心（#/partner）只能从「我的」进，跟「我的」亮。
   `.tb-mbti` 那两条一起删掉——那一格 10-27 傍晚就删了，规则留着是死代码。 */
body[data-route="home"] .tabbar .tb-home svg,
body[data-route="quizzes"] .tabbar .tb-quiz svg,
body[data-route="quiz"] .tabbar .tb-quiz svg,
body[data-route="adult"] .tabbar .tb-quiz svg,
body[data-route="love"] .tabbar .tb-love svg,
body[data-route="account"] .tabbar .tb-account svg,
body[data-route="partner"] .tabbar .tb-account svg,
body[data-route="dealer"] .tabbar .tb-account svg { stroke-width: 2; }
.tabbar a:active { background: rgba(26,25,23,.04); }
body[data-route="home"] .tabbar .tb-home,
/* 2026-10-27：三档版本卡从首页挪到 #/quizzes 后，「测试列表」这一格终于有了自己的落点，
   选中态跟着 quizzes 走（以前它滚到首页，只能让「首页」亮，所以这格一直不亮）。 */
body[data-route="quizzes"] .tabbar .tb-quiz,
body[data-route="quiz"] .tabbar .tb-quiz,
body[data-route="adult"] .tabbar .tb-quiz,
/* 2026-10-29：「恋爱大挑战」四格里的第三格。love 的八个子路由
   共用 route.name="love"，所以一条规则够。 */
body[data-route="love"] .tabbar .tb-love,
body[data-route="account"] .tabbar .tb-account,
body[data-route="partner"] .tabbar .tb-account,
body[data-route="dealer"] .tabbar .tb-account { color: var(--primary); font-weight: 600; }
body[data-route="result"] .tabbar,
body[data-route="preview"] .tabbar,
body[data-route="test"] .tabbar,
body[data-route="quiz"][data-quiz-sub="run"] .tabbar,
body[data-route="ops"] .tabbar,
body[data-route="s"] .tabbar { display: none; }
/* 隐藏了底栏的路由，页脚不用给它留位 */
body[data-route="result"] .site-footer,
body[data-route="preview"] .site-footer,
body[data-route="test"] .site-footer,
body[data-route="quiz"][data-quiz-sub="run"] .site-footer,
body[data-route="ops"] .site-footer,
body[data-route="s"] .site-footer { padding-bottom: 14px; }
body[data-route="result"] .site-footer,
body[data-route="preview"] .site-footer { padding-bottom: 104px; }

/* 四格之后 375 及以下单格只剩 90px 上下，「恋爱大挑战」五个字是全场最长的，
   宁可缩字也不许折行（父级已 nowrap，折不了就会挤到隔壁格子）。
   加图标后文字基准从 13 降到 11，这里再压半档，图标也小一号，免得窄屏上下太挤。 */
@media (max-width: 374px) {
  .tabbar a { font-size: 10.5px; letter-spacing: -.01em; gap: 2px; }
  .tabbar svg { width: 20px; height: 20px; }
}

/* 「MBTI 与星座的羁绊」太长，从 800 往下就换四字短名，导航仍是一行 */
@media (max-width: 800px) {
  .nav .n-full { display: none; }
  .nav .n-abbr { display: inline; }
}

/* 2026-10-28：顶栏只剩 logo + 品牌文字（.nav 整条 2026-10-27 已删），
   「谜鹿 MELLOW」很短，窄屏不再隐藏品牌名——旧规则是导航还在的时代
   为给导航让位写的，导航没了就该一起删。 */
@media (max-width: 680px) {
  .header-inner { padding: 12px 16px; }
}

/* 375–430 是 iPhone 的主场，上面那档仍会折行：四项导航按字宽约 442px，
   而 375 宽只剩 343px 可用。再压一档——字号 12.5、内边距 7px、去掉下拉箭头、
   间距归零，四项约 340px，能稳稳放一行，sticky 头不会从 50px 长到 95px。 */
@media (max-width: 430px) {
  .header-inner { padding: 10px 12px; gap: 8px; }
  .nav { gap: 0; }
  .nav a { font-size: 12.5px; padding: 7px; }
  .nav-link { gap: 3px; }
  .nav .caret { display: none; }
}

/* 2026-10-27 深夜十一：窄屏那条「已测」栏（去左分隔线）随标记一起删了。 */

/* IQ 逐题解析：默认收起，避免结果页被 15 条解析撑长 */
.qz-review { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.qz-review summary { display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 17px 22px; font-size: 14px; font-weight: 600; list-style: none; }
.qz-review summary::-webkit-details-marker { display: none; }
.qz-review summary::before { content: "＋"; font-family: var(--mono); font-weight: 400; color: var(--qc); }
.qz-review[open] summary::before { content: "－"; }
.qz-rvlist { list-style: none; padding: 0 22px 16px; }
.qz-rvlist li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.qz-rvn { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--muted); padding-top: 3px; }
.qz-rvb { min-width: 0; }
.qz-rvb b { display: block; font-size: 13px; font-weight: 600; line-height: 1.6; }
.qz-rvc { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.qz-rvlist li.ok .qz-rvc { color: var(--success); }
.qz-rvlist li.no .qz-rvc { color: var(--warning); }
.qz-rve { font-size: 12px; line-height: 1.7; color: var(--ink-3); margin-top: 4px; }

@media (max-width: 640px) {
  .qz-review summary { padding: 15px 16px; }
  .qz-rvlist { padding: 0 16px 12px; }
  .qz-rvlist li { gap: 10px; }
}

/* 2026-10-27：页脚已全局跟随文档流（见 .site-footer 主规则），
   原来这里 ≤640 单独转 static 的覆盖随之作废。 */

/* =========================================================
   测试目录的扩展层（2026-10-19）
   目标：份数从 5 涨到几十份也不改页面。
   - 首页一排 5 格，多了就用一张「还有 N 份」填满最后一格；
   - 中心页分类分组 + 筛选 chip，长列表也能扫；
   - 付费测试是低价单品（¥1.9），畅玩包只在「单买确实更贵」时出现。
   ========================================================= */

/* 目录统计与筛选（stats 已随顶部标题区一起删除，2026-10-27） */
.qz-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.qz-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--muted); text-decoration: none; font-size: 12.5px;
  transition: color .15s ease, border-color .15s ease, background .15s ease; }
.qz-chip i { font-style: normal; font-family: var(--mono); font-size: 11px; opacity: .65; }
.qz-chip:hover { border-color: var(--rule-2); color: var(--ink); }
.qz-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.qz-chip.on i { opacity: .85; }

/* 分类分组 */
.qz-cat + .qz-cat { margin-top: 26px; }
.qz-cat-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px 2px; }
.qz-cat-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.qz-cat-head > span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.qz-cat-head p { flex: 1 1 100%; margin: -2px 0 0; font-size: 11.5px; color: var(--muted); }

/* 价格签：付费测试才出现，免费的不加任何标记 */
.qz-price { font-style: normal; font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  color: #8F5A28; border: 1px solid rgba(143,90,40,.32); border-radius: 4px;
  padding: 1px 6px; white-space: nowrap; }
.qz-price.is-owned { color: var(--success); border-color: color-mix(in srgb, var(--success) 34%, transparent); }
.qz-card-m .qz-price { margin-left: auto; }
.qz-row-t .qz-price { align-self: center; }

/* 畅玩包横幅：一行，和通票横幅同一套克制程度 */
.qz-pack { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 14px 18px; border-radius: var(--r-card);
  border: 1px solid rgba(143,90,40,.30); background: rgba(143,90,40,.055); }
.qz-pack-main { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.qz-pack-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .11em; color: #8F5A28; }
.qz-pack-main b { font-size: 14px; }
.qz-pack-main span { font-size: 11.5px; color: var(--muted); }
.qz-pack-buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qz-pack-buy .pay-ways { margin: 0; gap: 8px; }
.qz-pack-buy .pay-ways .way { min-height: 38px; padding: 0 16px; font-size: 13px; }
.qz-pack-buy .pay-tip { flex: 1 1 100%; margin: 0; }
.qz-pack-owned { font-family: var(--mono); font-size: 12px; color: var(--success); }

/* 结果页锁定区：分数与四维照常给，长文与解析锁住 */
.qz-lock { margin-top: 20px; padding: 22px 24px; background: var(--surface);
  border: 1px dashed var(--rule-2); border-radius: var(--r-card); }
.qz-lock-head h2 { font-size: 17px; margin: 8px 0 7px; letter-spacing: -.015em; }
.qz-lock-head p { font-size: 13px; line-height: 1.85; color: var(--muted); max-width: 54em; }
.qz-lock .pay { margin-top: 16px; background: var(--surface-2); }
.qz-lock .pay h3 { font-size: 14px; }

@media (max-width: 640px) {
  .qz-filter { gap: 6px; margin-bottom: 16px; }
  /* 工具栏在窄屏折成两行：chip 一行、搜索框整行 */
  .qz-tool { gap: 10px; }
  .qz-tool .qz-filter { margin: 0; }
  .qz-tool .qz-search { width: 100%; max-width: none; margin-left: 0; }
  .qz-chip { padding: 5px 10px; font-size: 12px; }
  .qz-cat + .qz-cat { margin-top: 20px; }
  .qz-pack { padding: 13px 14px; }
  .qz-pack-main b { font-size: 13px; }
  .qz-pack-buy { width: 100%; }
  .qz-pack-buy .btn { flex: 1 1 auto; }
  .qz-lock { padding: 17px 16px; }
  .qz-lock-head h2 { font-size: 15.5px; }
}

/* =========================================================
   人格详解页（#/type/CODE）· 左对齐档案版式（2026-10-20 二排）
   二排修正：删场景条与章节脊柱（左出右进的装饰线太乱），
   层级改由「宽窄」单独承担——
   结构层一律铺满 720 且同轴：身份带 / 点睛句 / 付费墙 / 去处卡；
   文本层收窄到 38em：引言 / 导语 / 章节正文。
   ========================================================= */
.td-page { max-width: 720px; margin: 0 auto; }

/* ① 身份带：全出血深面板，突破 1080 容器（html 的 overflow-x:clip 兜底） */
.td-hero { position: relative; overflow: hidden;
  margin-inline: calc(50% - 50vw);
  padding: 46px 24px 42px;
  /* 与结果页身份带同一套：族色只染 4% 的纸 + 底部一道 2px 族色线，不再有辉光 */
  background: var(--surface-2);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tc, var(--primary)) 4%, var(--surface)) 0%,
    var(--surface-2) 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tc, var(--primary)) 55%, transparent); }
/* 带内回到 720 阅读列：身份文字与下方正文同一条左轴 */
.td-hero-in { max-width: 720px; margin: 0 auto;
  display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 30px; align-items: center; }
.td-fig { width: 184px; height: 184px; display: flex; align-items: flex-end; justify-content: center; }
.td-fig .portrait { width: 184px; height: 184px; margin: 0; }
.td-head { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.td-code { font-family: var(--mono); font-size: 13px; letter-spacing: .24em; color: var(--tc, var(--primary-soft)); }
.td-name { font-size: 42px; line-height: 1.12; margin: 8px 0 6px; letter-spacing: .5px; }
.td-nick { margin: 0; font-size: 14px; color: var(--muted); }
.td-tagline { margin: 16px 0 0; font-size: 17px; line-height: 1.8; font-weight: 500;
  color: #3A3730; max-width: 30em; }
.td-head .type-tags { margin-top: 16px; }

/* ② 名言题铭：左对齐，家族色粗竖线锚定阅读列 */
.td-quote { margin: 54px 0 46px; padding-left: 22px; text-align: left;
  border-left: 3px solid color-mix(in srgb, var(--tc, var(--primary)) 55%, transparent); }
.td-quote blockquote { margin: 0; max-width: 34em;
  font-size: 24px; line-height: 1.85; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.td-quote figcaption { margin-top: 16px; font-size: 13px; color: var(--muted); letter-spacing: .04em; }

/* 阅读列：段落收窄到 38em（列中有列），引言首段升一档作导语 */
.td-main > p, .td-sec p { font-size: 17px; line-height: 2.05; color: #3A3730; margin: 20px 0; max-width: 38em; }
.td-main > p#td-intro { font-size: 18.5px; line-height: 2.0; color: #26241F; font-weight: 500;
  max-width: 35em; }
.td-sec { margin-top: 52px; }
.td-sec h2 { font-size: 22px; line-height: 1.4; margin: 0 0 18px; letter-spacing: .3px; }

/* 点睛句：铺满 720 结构层的加大重点句，左缘与正文同轴，
   靠「比文本宽一档 + 家族色粗边 + 深面」从段落里跳出来 */
.td-pullout { margin: 30px 0 !important; padding: 18px 22px !important;
  max-width: none !important;
  background: var(--surface);
  border-left: 4px solid color-mix(in srgb, var(--tc, var(--primary)) 72%, transparent);
  border-radius: 0 var(--r-tag) var(--r-tag) 0;
  font-size: 18px !important; line-height: 1.8 !important; font-weight: 600;
  color: var(--ink) !important; }

/* 优势与弱点：两列对照卡。左右两栏共用一套骨架，
   只靠标题色区分（优势＝家族色、弱点＝warning），不做红绿对撞 */
.td-sw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 26px; }
.td-sw-col { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 18px 20px 6px; }
.td-sw-col h3 { display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .08em; margin-bottom: 6px; }
.td-sw-col h3::before { content: ""; width: 3px; height: 13px; border-radius: 2px;
  background: currentColor; }
.td-sw-col.is-plus h3 { color: var(--tc, var(--primary)); }
.td-sw-col.is-minus h3 { color: var(--warning); }
.td-sw .td-sw-item { padding: 12px 0; border-top: 1px solid var(--line); }
.td-sw .td-sw-item:first-of-type { border-top: 0; }
.td-sw .td-sw-item b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 5px; }
.td-sw .td-sw-item p { font-size: 14px; line-height: 1.85; color: var(--muted);
  margin: 0; max-width: none; }
.td-sw .td-sw-lead { margin-top: 0; }
@media (max-width: 760px) {
  .td-sw-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ===== 档案体（?td=file）：四维倾向 2×2 小卡 + 条列 =====
   档案体不写长文，靠「坐标 + 条目」回答「这一型是什么样」，
   所以卡片比正文窄不了多少，但每张只承载一句解释。 */
.td-dim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 22px; }
.td-dim { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 15px 17px; }
.td-dim .d-name { display: flex; align-items: baseline; gap: 7px;
  font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.td-dim .d-name i { font-family: var(--mono); font-size: 10.5px; font-style: normal; opacity: .7; }
.td-dim b { display: block; margin: 7px 0 5px; font-size: 16px; color: var(--ink); }
.td-dim p { font-size: 13.5px; line-height: 1.8; margin: 0; max-width: none; color: var(--muted); }
.td-list { list-style: none; margin: 6px 0 0; padding: 0; }
.td-list li { position: relative; padding: 9px 0; font-size: 16px; line-height: 1.9;
  color: #3A3730; }
@media (max-width: 760px) {
  .td-dim-grid { grid-template-columns: 1fr; }
}

/* 付费墙：与免费内容之间留一道过渡，标出「到此为止」 */
.td-main > #pay-report { margin-top: 58px; }

/* ③ 去处卡：主出口加宽 + 家族色淡染，两张次出口收小（2026-10-27 起只剩两张） */
.td-exits { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; margin-top: 52px; }
.td-exit { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  text-decoration: none; color: var(--ink); transition: border-color .15s ease, background .15s ease; }
.td-exit:first-child { background: color-mix(in srgb, var(--tc, var(--primary)) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--tc, var(--primary)) 30%, transparent); }
.td-exit:first-child b { color: var(--ink); }
.td-exit:hover { border-color: var(--rule-2); background: var(--surface-2); }
.td-exit:first-child:hover { border-color: color-mix(in srgb, var(--tc, var(--primary)) 46%, transparent); }
.td-exit b { font-size: 14.5px; }
.td-exit span { font-size: 12.5px; color: var(--muted); }

/* ④ 结果页正文里的评传体长文（与详解页同源）：
   段落照抄详解页的阅读列，名言 / 分节 / 点睛句直接复用 .td-* 三件套。
   结果页的卡片底是 --surface，点睛句改用 --surface-2 才看得出那是一张卡。 */
.rep-essay { margin: 26px 0 6px; --read: 720px; }
.rep-essay > p { font-size: 17px; line-height: 2.05; color: #3A3730; margin: 20px 0; }
.rep-essay > p:first-of-type { font-size: 18.5px; line-height: 2.0; color: #26241F; font-weight: 500; }
.rep-essay .td-quote { margin: 8px 0 36px; }
.rep-essay > .td-sec:first-of-type { margin-top: 44px; }
.rep-essay .td-pullout { background: var(--surface-2); }

/* 散文层只留一条宽度：720（＝详解页 .td-page 的阅读列），左缘对齐卡片内缘。
   改前同屏四条右边缘：段落 38em=646、首段 35em=648、名言 34em=816 且额外缩进 25px、
   点睛句被 max-width:none !important 顶到 982。根因是这一列最早按 720 页设计，
   页面加宽到 1080 后像素值变了、em 值没变（字号没动，em 就是死的）。
   六章 / 名人仍是满宽——那是盒子层，和散文层不同层，宽窄不同不等于没对齐。 */
.rep-essay > p,
.rep-essay > p:first-of-type,
.rep-essay .td-sec p,
.rep-essay .td-sec h2 { max-width: var(--read); }
.rep-essay .td-pullout { max-width: var(--read) !important; }
/* 名言的族色竖线挂进左侧留白（-23px），文字左缘才能和段落齐平；
   竖线本身是页边标记，不参与阅读列的左右边界 */
.rep-essay .td-quote { margin-left: -23px; padding-left: 20px; max-width: calc(var(--read) + 23px); }
.rep-essay .td-quote blockquote { max-width: none; }
/* ≤720 时 .report 内距收到 16px，-23px 的挂线会跑到卡片外面，改回贴着文字的缩进 */
@media (max-width: 720px) {
  .rep-essay .td-quote { margin-left: 0; padding-left: 15px; max-width: none; }
}

/* ⑤ 同型名人：长文读完往下，给一组「和你同类的人」，再进章节目录。
   卡片左侧一道族色细条，是这一整块唯一的彩色——名单本身保持素净。 */
.rep-famous { margin: 34px 0 4px; padding-top: 26px; border-top: 1px solid var(--line); }
.rep-famous .fm-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rep-famous .fm-head h2 { font-size: 18px; color: var(--ink); }
.rep-famous .fm-head em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.rep-famous .fm-lead { font-size: 12.5px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; max-width: 40em; }
.fm-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.fm-item { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--tc, var(--primary));
  border-radius: var(--r-btn); padding: 12px 14px; }
.fm-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.fm-top b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.fm-top span { font-size: 10.5px; line-height: 16px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.fm-why { font-size: 12.5px; line-height: 1.7; color: var(--muted); margin: 0; }
@media (max-width: 640px) { .fm-list { grid-template-columns: 1fr; } }

@media (max-width: 680px) {
  .td-hero { padding: 34px 20px 32px; }
  .td-hero-in { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }
  .td-fig, .td-fig .portrait { width: 140px; height: 140px; }
  .td-name { font-size: 34px; }
  .td-tagline { font-size: 16px; }
}
@media (max-width: 620px) {
  .td-hero { padding: 28px 18px 26px; }
  .td-hero-in { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  .td-fig, .td-fig .portrait { width: 104px; height: 104px; }
  .td-name { font-size: 28px; }
  .td-nick { font-size: 13px; }
  .td-tagline { font-size: 15px; margin-top: 12px; }
  .td-quote { margin: 40px 0 34px; padding-left: 16px; }
  .td-quote blockquote { font-size: 20px; line-height: 1.8; }
  .td-main > p, .td-sec p, .rep-essay > p { font-size: 16.5px; max-width: none; }
  .td-main > p#td-intro { font-size: 17.5px; }
  .rep-essay > p:first-of-type { font-size: 17.5px; }
  .td-sec { margin-top: 40px; }
  .td-sec h2 { font-size: 20px; }
  .td-pullout { padding: 15px 18px !important; font-size: 17px !important; }
  .td-main > #pay-report { margin-top: 44px; }
  .td-exits { grid-template-columns: 1fr; margin-top: 36px; }
}

/* ---------- 支付等待浮层（payment.js 注入） ---------- */
.pay-float { position: fixed; right: 20px; bottom: 20px; width: 300px; z-index: 90;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 16px 14px;
  box-shadow: 0 8px 0 rgba(26,25,23,.12); }
.pay-float .pf-head { font-size: 12px; font-weight: 600; color: #B03A21; letter-spacing: .04em; margin-bottom: 10px; }
.pay-float .pf-body { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pay-float .pf-body b { font-size: 13.5px; color: var(--ink); font-weight: 500; line-height: 1.4; }
.pay-float .pf-body span { font-size: 15px; color: #8F5A28; font-weight: 600; flex: none; }
.pay-float .pf-tip { font-size: 11.5px; line-height: 1.65; color: var(--ink-3); margin: 10px 0 12px; }
.pay-float .pf-acts { display: flex; gap: 8px; }
.pay-float .pf-btn { flex: 1; display: flex; align-items: center; justify-content: center;
  height: 36px; border-radius: var(--r-btn); font-size: 12.5px; font-weight: 600; text-decoration: none;
  background: var(--primary); color: #fff; border: 1px solid transparent; cursor: pointer; }
.pay-float .pf-btn.ghost { background: transparent; border-color: #E3C6BB; color: #B03A21; }
.pay-float .pf-x { position: absolute; top: 8px; right: 10px; width: 24px; height: 24px;
  background: none; border: 0; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; }
@media (max-width: 560px) {
  .pay-float { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* ---------- 结果页「配对测试」：透明底 + 粉色双心 ---------- */
.btn.cmp-heart { display: inline-flex; align-items: center; gap: 7px; }
.heart-duo { flex: none; display: block; }


/* ---------- 老内核兜底：不支持 color-mix 的浏览器 ----------
   国内安卓 X5 / 旧 WebView 会把「含 color-mix 的整条声明」判为无效，
   于是一条 border-color 消失就等于没有描边。这里给几处关键位置补上静态色。
   全站 43 处 color-mix 里，只有这两类会「整条消失还看得出来」，其余只是色偏。 */
@supports not (color: color-mix(in srgb, red, blue)) {
  .cmp-same.s4, .cmp-same.s3 { border-color: rgba(60,107,82,.42); }
  .cmp-same.s2 { border-color: rgba(176,58,33,.42); }
  .cmp-same.s1, .cmp-same.s0 { border-color: rgba(143,90,40,.42); }
  .cmp-chip.self { background: var(--tint); }
  .qz-card:hover { border-color: #E3C6BB; }
  .nd-tile:hover { background: var(--tint); }
  .cpick.on { background: #EDE7D9; }
  .paid { border-color: rgba(60,107,82,.42); background: rgba(60,107,82,.12); }
  .ch-badge.free { border-color: var(--line); }
}

/* ---------- 账号页（2026-10-26 新增） ----------
   复用纸墨令牌：卡面 = surface-2 + 1px 线 + 4px 直角，
   输入框沿用配对弹窗 .pm-input 的观感，不另起一套。 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.acct-page { max-width: 640px; margin: 0 auto; }
.acct-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px 20px; margin-top: 20px; }
.acct-label { display: block; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 6px; }
.acct-input { width: 100%; height: 44px; box-sizing: border-box; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-btn); padding: 0 12px;
  font-family: inherit; font-size: 15px; color: var(--ink); }
.acct-input:focus { outline: none; border-color: var(--primary); }
.acct-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.acct-row .acct-input { flex: 1 1 auto; min-width: 0; }
.acct-send { flex: 0 0 auto; height: 44px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
.acct-go { width: 100%; height: 46px; margin-top: 6px; }
.acct-msg { min-height: 18px; margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--primary); }
.acct-tip { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.acct-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px;
  font-size: 12px; color: var(--ink-3); }
.acct-or::before, .acct-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.acct-wx { width: 100%; height: 44px; }
.acct-who { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--ink); }
.acct-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.acct-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.acct-owned { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.acct-owned li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.acct-owned li b { font-weight: 500; }
.acct-owned li span { flex: 0 0 auto; font-size: 12px; color: var(--success); }
.acct-empty { margin: 14px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--ink-3); }
@media (max-width: 720px) {
  .acct-card { padding: 18px 16px; }
  .acct-input, .acct-send, .acct-wx { height: 46px; }
}

/* ---------- 邀请（2026-10-26） ----------
   结果页那句提示 + 账号页的邀请卡。两处都只用已有令牌，
   不引入新颜色：强调走朱砂，进度条复用答题进度条的观感（4px 直角）。 */
.ref-note { max-width: 720px; margin: 14px 0 0; font-size: 13px; line-height: 1.85; color: var(--ink-3); }
.ref-note a { color: var(--primary-soft); text-decoration: underline; text-underline-offset: 3px; }

.iv-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.iv-lead { margin: 0; font-size: 13px; line-height: 1.85; color: var(--ink-3); }
.iv-code-row { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px;
  padding-bottom: 13px; border-bottom: 1px dashed var(--line); }
.iv-label { font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.iv-code { font-family: var(--mono); font-size: 19px; font-weight: 600;
  letter-spacing: .18em; color: var(--primary); }
.iv-mini { flex: 0 0 auto; margin-left: auto; height: 30px; padding: 0 12px; font-size: 12.5px; }
.iv-stat { margin: 14px 0 6px; font-size: 13px; color: var(--ink-2); }
.iv-bar { height: 4px; background: var(--line); overflow: hidden; }
.iv-bar i { display: block; height: 100%; background: var(--primary); transition: width 240ms var(--ease); }
.iv-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--success); }

@media (max-width: 720px) {
  .iv-code { font-size: 17px; }
  .acct-row .acct-input#iv-link { font-size: 12px; }
}

/* ---------- 推广中心 / 经销商后台（2026-10-26 建，2026-10-29 接分销数据） ----------
   2026-10-26 那一版刻意不含任何金额（支付没接，写「佣金 ¥8.97」是空话）。
   2026-10-29 云端分销表建好之后，这里开始显示**实际发生的**金额：
   全部来自 agent_dashboard() 的聚合，页面自己不算钱，也不显示任何比例承诺。
   复用纸墨令牌，不引入新颜色；二维码白底黑码，任何底色下都能扫。 */
.pt-page { max-width: 640px; margin: 0 auto; }
/* 2026-10-31 深夜：「成为代理」整页只剩一张卡，所以不要 .panel 那层白底外壳——
   卡中卡会让人以为页面还没加载完。间距改由容器承担（.pt-card 自带的 16px 归零，
   否则和这里的 24px 叠成 40px，卡片离页头太远）。 */
.pt-page.pt-solo { padding-top: 24px; }
.pt-solo .pt-card { margin-top: 0; }
.pt-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px 20px; margin-top: 16px; }
.pt-h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.pt-note { margin: 0; font-size: 13px; line-height: 1.85; color: var(--ink-3); }
.pt-tip { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }

/* 三格统计：数字用 tabular-nums，换数字时宽度不跳 */
.pt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.pt-stat { display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 8px; text-align: center; }
.pt-num { font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.pt-num small { margin-left: 2px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.pt-got { font-size: 17px; font-weight: 600; line-height: 1.6; color: var(--primary); }
.pt-cap { margin-top: 6px; font-size: 12px; letter-spacing: .03em; color: var(--ink-3); }

/* 金额格：¥14.95 比「3 人」宽得多，26px 会撑出格子，单给一档小字号。
   负数是退款冲正（clawback），页面照实显示，不藏。 */
.pt-money { font-size: 19px; letter-spacing: -.01em; }

/* 漏斗四格：点击 → 注册 → 完测 → 成交。四列在 560 以下会挤，降到 2×2 */
.pt-flow { grid-template-columns: repeat(4, 1fr); }
.pt-flow .pt-stat { padding: 13px 6px; }
.pt-flow .pt-num { font-size: 21px; }

/* 提现 */
.pt-wd-card { margin-top: 12px; }
.pt-wd-avail { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); }
/* 2026-11-01：可提现金额从 18px 提到 26px。收入页的主角就是这一个数，
   之前没绑支付宝时这一整块不显示，用户以为「没赚到钱」。 */
.pt-wd-avail b { font-size: 26px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.pt-wd-row { display: flex; gap: 10px; align-items: center; }
.pt-wd-row .acct-input { flex: 1 1 auto; min-width: 0; }

/* 最近提现（2026-11-01）：三列对齐——哪天、多少、什么状态。
   被拒/失败的那条下面多一行原因，不然代理只会看到钱回来了、不知道为什么。 */
.wd-list { margin: 4px 0 0; padding: 0; list-style: none; }
.wd-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.wd-item:last-child { border-bottom: 0; padding-bottom: 2px; }
.wd-line { display: grid; grid-template-columns: 1fr auto 76px; gap: 10px;
  align-items: baseline; }
.wd-when { font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.wd-amt { font-size: 14px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.wd-st { font-size: 12px; color: var(--ink-3); text-align: right; }
.wd-st.is-ok { color: var(--success); }
.wd-st.is-bad { color: var(--error); }
.wd-why { margin: 6px 0 0; font-size: 12px; line-height: 1.65; color: var(--ink-2); }
/* 收入流水：多一列「商品」，四列挤在一行。日期固定宽（等宽数字不跳），
   商品名占剩余、超长省略，金额与状态靠右。 */
.lg-line { grid-template-columns: 76px 1fr auto 58px; gap: 8px; }
.lg-sku { font-size: 13px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-wd-row .btn { flex: 0 0 auto; }
/* 手续费那行：用户要求界面只显示可提现金额、不显示到账金额，
   但《消法》要求明示收费，所以这一行必须留（11px 灰字，不占视觉）。 */
.pt-fee { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: var(--ink-3); }
/* 推广收入页（#/income，2026-10-31 晚）：从「我的」进来，得有一条能回去的路。
   用文字链接而不是按钮——这一页只有一个动作（提现），返回不该跟它抢重量。 */
.inc-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;
  font-size: 13px; color: var(--ink-3); text-decoration: none; }
.inc-back:hover { color: var(--primary); }
/* 「还有 ¥xx 在结算中」：比正文轻、比提示重，放在可提现金额上面一行 */
.inc-pending { margin: 16px 0 0; padding: 9px 12px; font-size: 12.5px; line-height: 1.7;
  color: var(--ink-2); background: var(--surface-2);
  border-left: 2px solid var(--primary); border-radius: 0 3px 3px 0; }
.pt-note-ok { margin-top: 10px; color: var(--ink-2); }
.pt-field { margin-bottom: 12px; }
.pt-field .pt-label { display: block; margin-bottom: 6px; }
.pt-field .acct-input { width: 100%; box-sizing: border-box; }

/* 名下代理列表：三列对齐（谁 / 近 30 天成交 / 我获得的） */
.pt-sub-head, .pt-sub { display: grid; grid-template-columns: 1fr 88px 96px; gap: 8px;
  align-items: center; }
.pt-sub-head { margin-top: 14px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; letter-spacing: .03em; color: var(--ink-3); }
.pt-sub-head span:nth-child(2), .pt-sub-head span:nth-child(3) { text-align: right; }
.pt-subs { margin: 0; padding: 0; list-style: none; }
.pt-sub { padding: 9px 0; border-bottom: 1px solid var(--line); }
.pt-sub:last-child { border-bottom: 0; }
.pt-sub-nick { font-size: 13.5px; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-sub-num { font-size: 13px; color: var(--ink-2); text-align: right;
  font-variant-numeric: tabular-nums; }
.pt-sub-earn { font-size: 13px; font-weight: 600; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; }
.pt-badge { display: inline-block; margin-left: 6px; padding: 1px 5px; font-size: 10.5px;
  line-height: 1.5; color: var(--ink-3); border: 1px solid var(--line); border-radius: 2px;
  vertical-align: 1px; }

/* 名下代理改成两排（2026-11-01，#/dealer）。
   一行塞五列（昵称 / 费率 / 成交 / 他赚 / 我赚），390 宽的手机上会挤成一团；
   拆成「上排：昵称 + 我获得的」「下排：码 · 费率 · 成交 · 他赚 · 加入时间」。 */
.pt-sub2 { display: block; }
.dl-head { display: flex; justify-content: space-between; margin-top: 14px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; letter-spacing: .03em; color: var(--ink-3); }
.dl-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dl-row2 { margin-top: 4px; font-size: 12px; line-height: 1.7; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.pt-sub-code { font-style: normal; letter-spacing: .04em; color: var(--ink-2); }
.dl-joined::before { content: " · "; }
/* 佣金明细的副行：这笔是哪位代理哪一单来的（#/dealer 的「我的佣金记录」） */
.dl-meta { display: block; margin-top: 3px; font-style: normal; font-size: 12px;
  line-height: 1.6; color: var(--ink-3); }

/* ---- 改费率 / 加代理（2026-11-01）----
   费率放开到 0–80% 之后，经销商要能按人填数，所以是 number 输入而不是下拉。
   编辑行默认 hidden、点「改费率」才展开：一直挂着的话，十个人的团队
   就是十条输入框，列表会变成一张表单。
   ⚠️ 下面给了 .dl-row3 { display:flex }，它会盖掉浏览器给 [hidden] 的
   display:none，所以 [hidden] 必须单独再写一条，否则关不上。 */
.dl-head2 { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 12px; }
/* h2 自带 10px 下边距，在 flex 行里会把按钮顶得比标题低，这里归零、由容器统一给 */
.dl-head2 .pt-h2 { margin-bottom: 0; }
.dl-add-btn, .dl-rate-btn { padding: 2px 8px; font: inherit; font-size: 11.5px;
  line-height: 1.6; color: var(--primary-soft); background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 2px; }
.dl-rate-btn { margin-left: 8px; }
.dl-add-btn:hover, .dl-rate-btn:hover { border-color: var(--primary); }
.dl-row3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 8px; padding: 8px 10px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px; }
.dl-row3[hidden] { display: none; }
.dl-edit-cap { color: var(--ink-2); }
.dl-edit-in { width: 58px; padding: 4px 6px; font: inherit; font-size: 13px;
  text-align: right; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-2); border-radius: 2px;
  font-variant-numeric: tabular-nums; }
.dl-edit-unit { color: var(--ink-2); }
.dl-edit-save, .dl-edit-cancel { padding: 4px 10px; font: inherit; font-size: 12px;
  border-radius: 2px; cursor: pointer; }
.dl-edit-save { color: #fff; background: var(--primary); border: 1px solid var(--primary); }
.dl-edit-save:hover { background: var(--primary-hover); }
.dl-edit-cancel { color: var(--ink-2); background: none; border: 1px solid var(--line); }
.dl-edit-hint { flex: 1 0 100%; font-style: normal; font-size: 11.5px;
  line-height: 1.6; color: var(--ink-3); }
.dl-addbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 12px; padding: 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px; }
.dl-addbar[hidden] { display: none; }
.dl-addbar .acct-input { flex: 1 1 140px; min-width: 0; }
.dl-addbar .btn { padding: 8px 14px; font-size: 13px; }

/* 2026-10-31：二维码和推广链接并成一张卡之后，码居中、下面一个保存按钮、
   再一行提示，最后是链接行。右边那列文字全删了，所以这里不再需要 .pt-qr-side
   （样式留着，旧缓存页面还在引用）。 */
.pt-qr { display: flex; justify-content: center; margin-top: 2px; }
.pt-qr-box { flex: 0 0 auto; width: 196px; height: 196px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; padding: 8px; box-sizing: border-box; }
/* 码现在是一张真 PNG（<img>），长按/右键才有「保存图片」可点 */
.pt-qr-box img, .pt-qr-box svg { display: block; width: 100%; height: 100%; }
/* 370px 的 PNG 缩到 180px 显示，浏览器默认做平滑插值，模块边缘会发虚。
   pixelated 让它保持硬边——扫码比「好看」重要。 */
.pt-qr-box img { image-rendering: pixelated; image-rendering: crisp-edges; }
.pt-qr-alt { display: block; padding: 12px; font-size: 12px; line-height: 1.6;
  text-align: center; color: var(--ink-3); }
.pt-qr-side { flex: 1 1 auto; min-width: 0; }
/* 用 flex 不是 block：.btn 本来就是 inline-flex + 居中，改成 block 会让
   justify-content 失效、文字靠左。宽度对齐上面的二维码框（196）。 */
.pt-qr-save { display: flex; width: 196px; margin: 12px auto 0; }
/* 2026-10-31：二维码保存提示要「一眼看见」，所以不跟正文一个色。
   浅朱砂底 + 朱砂字，和站内告示条同一套语言，不引新色。 */
.pt-save { margin: 12px 0 0; padding: 7px 10px; font-size: 12.5px; line-height: 1.7;
  color: var(--primary); background: rgba(200, 69, 43, .07);
  border-left: 2px solid var(--primary); border-radius: 0 3px 3px 0; }
/* 链接行：和二维码同一张卡，用虚线隔开，不再单独一张卡 */
.pt-link-row { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pt-code-row { display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding-top: 12px; border-top: 1px dashed var(--line); }
.pt-label { font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.pt-code { font-family: var(--mono); font-size: 18px; font-weight: 600;
  letter-spacing: .18em; color: var(--primary); }
/* 2026-10-31 推广申请：码要嵌在句子里说（「你的邀请码 ABCD12 已经在待开通名单里」），
   18px 会把一行顶开，所以另给一个小号，字号跟着正文走。 */
.pt-code-sm { font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; color: var(--primary);
  padding: 1px 4px; background: rgba(200, 69, 43, .07); border-radius: 2px; }
/* 微信号那一格：label 要独占一行（它不在 .ops-field 里，拿不到那条 display:block） */
.pt-wx-label { display: block; }
.pt-mini { flex: 0 0 auto; margin-left: auto; height: 30px; padding: 0 12px; font-size: 12.5px; }

.pt-note-item { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.pt-note-item:first-of-type { border-top: 0; }
.pt-note-head { display: flex; align-items: center; gap: 10px; font-size: 13px;
  font-weight: 600; color: var(--ink); }
.pt-note-body { margin: 8px 0 0; font-size: 13px; line-height: 1.85; color: var(--ink-2);
  word-break: break-word; }

.pt-rules { margin: 0; padding-left: 18px; }
.pt-rules li { font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.pt-rules li b { font-weight: 600; color: var(--ink); }

@media (max-width: 560px) {
  .pt-card { padding: 18px 16px; }
  /* 窄屏：码和保存按钮同宽，居中；按钮改 100% 更好按 */
  .pt-qr-box { width: 168px; height: 168px; }
  .pt-qr-save { width: 168px; }
  .pt-code { font-size: 16px; }
  .pt-num { font-size: 22px; }
  /* 金额必须写在 .pt-num 之后：同一优先级，后出现的胜，否则 ¥14.95 会按 22px 撑出格子 */
  .pt-money { font-size: 16.5px; }
  .pt-flow { grid-template-columns: repeat(2, 1fr); }
  .pt-flow .pt-num { font-size: 19px; }
  .pt-sub-head, .pt-sub { grid-template-columns: 1fr 64px 80px; }
}

/* ---------- 隐私与条款 / 404（2026-10-26 新增） ----------
   政策页是一篇要读的长文：行高 1.95、段距 10，正文 14px（比结果页 15px 略小，
   因为它信息密度高）。不给它加卡片边框，避免「一段一张卡」的碎感。 */
.pv-page { max-width: 760px; margin: 0 auto; }
.pv-doc { margin-top: 22px; }
.pv-doc h2 { margin: 26px 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.pv-doc h2:first-child { margin-top: 0; }
.pv-doc p { margin: 0 0 10px; font-size: 14px; line-height: 1.95; color: var(--ink-2); }
.pv-doc ul { margin: 0 0 12px; padding-left: 20px; }
.pv-doc li { font-size: 14px; line-height: 1.95; color: var(--ink-2); }
.pv-doc b { font-weight: 600; color: var(--ink); }
.pv-doc a { color: var(--primary-soft); text-decoration: underline; text-underline-offset: 3px; }

.nf-page { max-width: 560px; margin: 40px auto; text-align: center; }
.nf-acts { justify-content: center; margin-top: 22px; }

/* 「会员中心」页头：全局 h1 是 30–44px，放在这一页太重（下面才是会员卡这个主角），
   收到 22px / weight 600，让它像小标题而不是封面大字。 */
.acct-page .page-title { font-size: 22px; font-weight: 600; letter-spacing: 0; margin-bottom: 12px; }

/* ---------- 「我的」页（2026-10-27 精简版：先给状态，再给入口） ----------
   上一版是五张厚卡，说明 / 表单 / 清单混在一张卡里，重点被淹掉。这一版：
     ① 身份条（未登录时才是表单） ② 三格数字 ③ 会员（全页唯一焦点卡）
     ④ 报告行列表 ⑤ 更多（低频项折叠 + 48px 入口行）
   颜色仍只用既有令牌，新增的只有 --error（清除数据那一行）。 */
.my-card { margin-top: 14px; }
.my-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.my-h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.my-aside { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.my-chip { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
  font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.my-chip-on { border-color: var(--success); color: var(--success); }

/* ① 身份条：头像圆片 + 号码，退出是文字按钮 */
.my-id { display: flex; align-items: center; gap: 12px; }
.my-ava { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary-soft-bg); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; overflow: hidden; }
.my-id-txt { flex: 1 1 auto; min-width: 0; }
.my-id-txt b { display: block; font-size: 16px; color: var(--ink); }
.my-id-txt i { display: block; margin-top: 3px; font-style: normal;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.my-logout { flex: 0 0 auto; font-size: 13px; }
/* 未登录：灰头像 + 一颗朱砂胶囊「立即登录」（参考会员中心的「立即绑定」）。
   整条 summary 都能点，展开才是表单——首屏只看得到一行状态。 */
.my-ava-off { background: var(--bg); color: var(--ink-3); }
/* 默认头像里的谜鹿印章（2026-11-02 三版：满幅朱砂圆盘自带头像底，
   不再用容器的底色/字色，SVG 拉满容器即可——头像位多大鹿就多大） */
.my-ava svg, .lv-av-cur svg, .lv-ring > div svg, .lv-msg .av svg {
  display: block; width: 100%; height: 100%; }
/* ⚠️ 已登录没传头像时，默认头像被包在 <span class="my-ava-txt my-ava-deer"> 里。
   这两个类以前根本没定义——行内元素没有确定宽高，里面的 SVG 100% 参照算不出来，
   再加上 inline 基线对齐，就成了用户说的「太小还不居中」。
   补成 flex + 100%，补签逻辑（love.js 用 .my-ava-txt 隐藏它）也照常能用。 */
.my-ava-txt, .my-ava-deer { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; }
/* 「我的」页可点换头像（2026-10-30）：按钮化重置 + 图片填满 + 右下角「换」角签。
   角签实底朱砂、白字，不用渐变；border 三件套分开写（简写装 var() 老内核失效）。 */
button.my-ava-up { position: relative; padding: 0; border: none;
  cursor: pointer; overflow: visible; }
.my-ava-up img { width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block; }
.my-ava-tip { position: absolute; right: -4px; bottom: -4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 600;
  line-height: 18px; text-align: center;
  border: 2px solid var(--bg); }
.my-bind { flex: 0 0 auto; margin-left: auto; border-radius: 999px; padding: 7px 15px;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.my-login > summary { list-style: none; cursor: pointer; }
.my-login > summary::-webkit-details-marker { display: none; }
.my-login > summary::-moz-list-bullet { display: none; }
.my-login[open] .my-bind { background: var(--primary-hover); }
.my-login-b { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.my-login-b .acct-wx { margin-top: 12px; }

/* ② 会员卡 = 页面焦点：深墨卡面 + --gold 字，横版（左边标题与一句话，右边按钮）。
   结构参照会员中心参考图；配色换成本站语言：金→--gold，卡面深墨不加渐变。 */
.my-vip { display: flex; align-items: center; gap: 14px;
  background: var(--ink); border-color: var(--ink); }
.my-vip-l { flex: 1 1 auto; min-width: 0; }
.my-vip-l b { display: block; font-size: 16px; font-weight: 600; letter-spacing: .02em; color: var(--gold); }
.my-vip-l span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.6;
  color: rgba(255, 253, 248, .72); }
.my-vip-btn { flex: 0 0 auto; height: 38px; padding: 0 16px; border: none; border-radius: 999px;
  background: var(--gold); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; cursor: pointer; }
.my-vip-btn:hover { background: #D4A757; }
.my-vip-btn[disabled] { background: rgba(199, 154, 75, .32); color: rgba(255, 253, 248, .55);
  cursor: not-allowed; }
.my-vip-on { flex: 0 0 auto; border: 1px solid var(--gold); border-radius: 999px;
  padding: 5px 13px; font-size: 12.5px; color: var(--gold); white-space: nowrap; }

/* 窄屏会员卡改竖排（2026-11-03）。文案从「全站免费」加长到「全站测试免费」以后，
   390 宽下小字被挤成三行、末行只剩「续费」；360 宽下连「全站VIP会员」都要折行。
   根因是横版卡在 360 里只给文字留了约 90px——按钮不缩，只能文字让步。
   窄屏把按钮挪到下一行占满整宽，文字拿回整宽，标题和小字各一行。 */
@media (max-width: 420px) {
  .my-vip { flex-wrap: wrap; row-gap: 12px; }
  .my-vip-btn { width: 100%; }
  /* 360 宽下 12.5px 差 8px 放不下，末字「费」单独掉到第二行；
     缩到 12px 正好一行。再窄（320）允许折行，但那时两行是均衡的。 */
  .my-vip-l span { font-size: 12px; }
}

/* 统计条（三格数字）2026-10-27 按用户要求整块删除：数字在会员卡上看不出价值，
   邀请进度那格又和「推广中心」重复。要加回来就照 .my-stat 这套，别临时造。 */

/* 会员卡改成深色横版后不再用的几件：.my-card-pass（琥珀顶条）、
   .my-chips（权益胶囊行，那句 it.sub 已经概括了）、.my-buy / .my-state。
   别再往回加——参考图那张卡的说服力就来自「只有一句话」。 */
.my-fine { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.my-fine b { color: var(--ink-2); font-weight: 600; }
.my-mini { height: 36px; margin-top: 12px; padding: 0 14px; font-size: 13px; }
/* 反馈两颗按钮并排（2026-10-30：提交 + 复制） */
.fb-btns { display: flex; gap: 10px; align-items: center; }
.fb-btns .my-mini { margin-top: 12px; }
/* 反馈输入框继承 .acct-input 的边框与字号，但要能长高 */
.my-ta { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.7; resize: vertical; }
.my-empty { margin: 0; }
.my-link { color: var(--primary-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ③ 报告 + 更多：同一张卡里的两个小节（2026-10-27 合并）。
   「更多」那个小标题 2026-10-27 傍晚删掉了（用户要求），分隔改由下面第一行的
   上边框承担，所以这里不再需要 .my-sec。 */
/* 我的报告默认折叠：标题行整行可点，标题右侧一个小尖角，展开时转 180°。
   ⚠️ 必须清掉 summary 的默认三角（Chromium 的 ::-webkit-details-marker 与
   Firefox 的 ::-moz-list-bullet 是两套），否则会多出一个朝右的三角和我们的尖角打架。 */
.my-rep-fold > summary { list-style: none; cursor: pointer; }
.my-rep-fold > summary::-webkit-details-marker { display: none; }
.my-rep-fold > summary::-moz-list-bullet { display: none; }
.my-caret { flex: 0 0 auto; align-self: center; color: var(--ink-3);
  transition: transform .15s ease; }
.my-rep-fold[open] .my-caret { transform: rotate(180deg); }
.my-rep-fold > summary:hover { color: var(--primary-soft); }
.my-rep-fold > summary:hover .my-caret { color: var(--primary-soft); }

/* 报告列表：一行一条，右侧「查看」不换行 */
.my-reps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.my-rep { display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--line); }
.my-rep-txt { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ink); }
.my-rep-txt b { font-family: var(--mono); letter-spacing: .02em; }
.my-rep-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.my-rep-go { flex: 0 0 auto; height: 32px; padding: 0 12px; font-size: 12.5px; }
/* 末行的底线去掉：「更多」小标题删掉后，它下面紧接「订单记录」的上边框，
   两条 1px 会并成一条 2px 的粗线。分隔交给下面那行的上边框。 */
.my-reps .my-rep:last-child { border-bottom: none; }

/* ⑤ 更多：折叠行与入口行同为 48px，右侧一个 ›；展开时箭头转 90° */
.my-fold summary, .my-row { display: flex; align-items: center; width: 100%;
  box-sizing: border-box; min-height: 48px; padding: 0; border: none;
  border-top: 1px solid var(--line); background: none; font: inherit;
  font-size: 14.5px; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.my-fold summary { list-style: none; }
.my-fold summary::-webkit-details-marker { display: none; }
.my-fold summary::-moz-list-bullet { display: none; }
.my-fold summary i, .my-row i { flex: 0 0 auto; margin-left: auto; font-style: normal;
  font-size: 17px; line-height: 1; color: var(--ink-3); transition: transform .15s ease; }
.my-fold[open] summary i { transform: rotate(90deg); }
.my-fold summary:hover, .my-row:hover { color: var(--primary-soft); }
.my-row-danger { color: var(--error); }
.my-row-danger:hover { color: var(--error); }
.my-fold-b { padding: 0 0 16px; }
.my-fold-b .acct-note:first-child { margin-top: 0; }
.my-fold-b .my-mini { margin-top: 10px; }

@media (max-width: 720px) {
  .my-ava { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .my-fold summary i { transition: none; }
}

.acct-privacy { margin-top: 14px; }
.acct-privacy a { color: var(--primary-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 站内搜索 / 站长后台（2026-10-26 新增，见 extras.js） ---------- */
.ex-page { max-width: 680px; margin: 0 auto; }
.sc-row { display: flex; gap: 10px; margin-top: 18px; }
.sc-input { flex: 1 1 auto; }
.sc-go { flex: 0 0 auto; height: 44px; padding: 0 18px; }
.sc-hot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); }
.sc-chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; }
.sc-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.sc-group { margin-top: 26px; }
.sc-h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
.sc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sc-item { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.sc-item b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.sc-item span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.sc-item:hover b { color: var(--primary-soft); }
.sc-empty { margin-top: 22px; font-size: 14px; line-height: 1.9; color: var(--ink-3); }

.ad-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
.ad-cell { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 14px 6px; text-align: center; }
.ad-cell b { display: block; font-size: 20px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.ad-cell span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-3); }
.ad-sec { margin-top: 26px; }
.ad-bars, .ad-evs { list-style: none; margin: 0; padding: 0; }
.ad-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ad-name { flex: 0 0 120px; font-size: 12.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-bar { flex: 1 1 auto; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.ad-bar i { display: block; height: 100%; background: var(--primary-soft); border-radius: 3px; }
.ad-num { flex: 0 0 36px; text-align: right; font-size: 12.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.ad-ev { display: flex; align-items: baseline; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ad-ev span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ad-ev b { color: var(--ink); font-weight: 600; }
.ad-ev em { flex: 1 1 auto; color: var(--ink-3); font-style: normal;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 结果页的次要入口（海报 / PDF / MBTI 入门）：与主操作区同规格的 ghost 按钮 */
.res-tools { display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin: 12px 0 4px; }

/* ---------- 打印 / 导出 PDF（2026-10-26） ----------
   不引 jsPDF：中文要额外字体包，体积比整个站还大。
   走系统打印面板「另存为 PDF」，颜色一律压成黑字白底，彩色卡片在纸上全是灰块。 */
@media print {
  .site-header, .site-footer, .tabbar, .actions, .res-tools, .dock, .rep-paywall,
  .paywall, .pt-qr, .my-vip-btn, .acct-send, .sc-row, .sc-hot { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .panel, .acct-card, .rep-card, .my-card {
    box-shadow: none !important; border-color: #ddd !important; background: #fff !important; }
  .rep-wrap { background: #fff !important; }
  a[href]::after { content: ""; }
  @page { margin: 14mm; }
}

/* ---------- 运营后台 #/ops（2026-10-29） ----------
   后台只在手机上用：一行一张卡，不用 <table>——四列表格在 390px 下必然挤成一条缝。
   颜色沿用纸墨令牌，状态只用 正常/待办/停用 三档，不另开第四种色。 */
/* 2026-10-31 晚：外壳从「竖排 tab 铺满整行 + 内容在下」改成「左窄栏 + 右内容」。
   原样的毛病很直观：七个 tab 每行 44px，屏幕上半截全被导航吃掉，
   数字掉到折线以下，每次看数都要先滚一下。
   宽度放到 1060：内容区约 860，两列数字框排得开，又不至于像表格一样空旷。
   ⚠️ 手机上不用两栏（见文件末尾的 860 断点），那里改成横向一条，可以左右滑。 */
.ops-page { max-width: 1060px; }
/* 后台登录卡（2026-10-30）：没登录时 #/ops 直接长这张卡，不再把人打发去「我的」。
   宽度收窄到 420——一个手机号输入框铺满 720 很难看；输入框换成纸底色，
   在 surface-2 的卡片上有凹陷感，看得出是能打字的地方。 */
.ops-gate { max-width: 420px; margin: 0 auto; }
/* 「没有权限」那一刻要能看清是谁在登录：日志里翻不到的答案，用户自己一眼就看到。
   2026-11-01 加的——那天点一下「设置」就卡在这页，实际是查询失败被当成没权限。 */
.ops-who { margin: 10px 0 16px; padding: 10px 12px; font-size: 12.5px; line-height: 1.8;
  color: var(--ink-3); background: var(--bg); border: 1px solid var(--line); border-radius: 2px; }
.ops-who b { color: var(--ink); font-weight: 600; }
.ops-who code { font-size: 12px; }
.ops-login .pt-note { margin-bottom: 16px; }
.ops-login .acct-input { background: var(--bg); }
.ops-login .acct-msg { margin-bottom: 4px; }
.ops-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: start; }
/* 导航：一条不描边的清单，不是一叠按钮。
   原来每格都有边框，七个格子就是七条横线，看着像移动端菜单被放到了桌面上。
   桌面侧栏该是「一列字，选中那条有标记」——省掉边框之后，
   选中态就靠浅底 + 左侧朱砂竖条，视线一梭子能扫完七项。 */
.ops-tabs { position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: 1px; margin: 22px 0 34px; }
.ops-tab { display: block; padding: 6px 10px; font-size: 15px; line-height: 1.55;
  text-align: left; color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent; border-radius: 0 3px 3px 0; }
.ops-tab:hover { color: var(--ink); background: var(--surface-2); }
.ops-tab.on { color: var(--ink); font-weight: 600; background: var(--surface-2);
  border-left-color: var(--primary); }
.ops-main { min-width: 0; }
/* 合并 tab 之后的分节标题（举报 / 用户反馈）。
   比卡片的 h2 轻一档：它是「这一片在讲什么」，不是「这张卡的标题」。 */
.ops-sub { display: flex; align-items: center; gap: 8px;
  margin: 26px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-3); }
.ops-sub:first-child { margin-top: 0; }
.ops-sub-n { font-style: normal; font-weight: 600; font-size: 11.5px; line-height: 1.6;
  min-width: 18px; padding: 0 5px; text-align: center;
  color: var(--primary); background: rgba(200, 69, 43, .08);
  border-radius: 9px; }

.ops-tool { display: flex; gap: 8px; margin-bottom: 10px; }
.ops-tool .acct-input { flex: 1; min-width: 0; }
.ops-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ops-chip { padding: 5px 11px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px; cursor: pointer; }
.ops-chip.on { color: var(--surface); background: var(--ink); border-color: var(--ink); }

.ops-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ops-acts-top { margin: 0 0 14px; }
.ops-mini { padding: 6px 13px; font-size: 13px; border-radius: 2px; }

.ops-card { padding: 4px 16px; }
.ops-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ops-row:last-child { border-bottom: 0; }
.ops-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ops-line2 { margin-top: 5px; font-size: 13px; color: var(--ink-2); word-break: break-all; }
.ops-line3 { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px;
  font-size: 13px; color: var(--ink-2); }
.ops-line4 { margin-top: 5px; font-size: 12px; color: var(--ink-3); }
.ops-code { font-size: 15px; letter-spacing: .06em; }
.ops-money { font-size: 17px; font-weight: 600; }
.ops-tag { padding: 1px 7px; font-size: 11.5px; font-style: normal; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 2px; }
.ops-hint { font-size: 12px; color: var(--ink-3); }
.ops-badge { padding: 1px 7px; font-size: 11.5px; font-style: normal;
  border: 1px solid; border-radius: 2px; }
.ops-b-ok { color: var(--success); }
.ops-b-wait { color: var(--warning); }
.ops-b-off { color: var(--ink-3); border-color: var(--line); }

.ops-edit { margin-top: 12px; padding: 12px 12px 14px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 2px; }
.ops-field { margin-bottom: 10px; }
.ops-field .pt-label { display: block; margin-bottom: 5px; }
.ops-select { padding: 6px 8px; font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
.ops-fixed { font-size: 15px; font-weight: 600; }
.ops-add { margin: 4px 0 14px; }

/* 恋爱大挑战后台（2026-10-30）：三个数字框一行，窄屏折两行；
   配对双方用 .ops-pair 排成一行，长昵称允许折行不撑破卡片。 */
.ops-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 2px 0 4px; }
.ops-nums label { display: block; font-size: 12.5px; color: var(--ink-3); }
.ops-nums .acct-input { width: 100%; margin-top: 4px; }
/* 2026-10-31 设置页按品类分组：恋爱 / 测评单品 / 会员。
   组与组之间用一条虚线分开，别用卡片套卡片（后台已经很挤了）。 */
.cfg-group { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.cfg-h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cfg-group .pt-tip { margin: 0 0 10px; }
.cfg-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfg-nums .ops-field { margin-bottom: 0; }
/* 输入框下面那行小字：说清这一项「花的是谁的钱、改的是哪个数」。
   放灰色小字而不是提示气泡——后台没人会去悬停。 */
.cfg-hint { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
/* 设置页的「这条没生效」提醒：必须比正文显眼，否则等于没说 */
.cfg-warn { color: var(--primary); background: rgba(200, 69, 43, .07);
  border-left: 2px solid var(--primary); border-radius: 0 3px 3px 0;
  padding: 8px 10px; margin: 0 0 12px; }
.cfg-warn b { font-weight: 600; }
.ops-pair { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ops-pair b { font-weight: 600; word-break: break-all; }
.ops-pair em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.ops-sec .ops-tag { margin-left: 6px; }
@media (max-width: 380px) {
  .ops-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 手机 / 窄窗：两栏放不下，收成一条横向导航。
   不回到「竖排铺满」——那样又把首屏吃光了；横着一条可以左右滑，
   七个中文词条加起来约 520px，滑一下就到头。 */
@media (max-width: 860px) {
  .ops-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ops-tabs { position: static; flex-direction: row; gap: 4px;
    margin: 16px -2px 18px; padding-bottom: 2px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ops-tabs::-webkit-scrollbar { display: none; }
  .ops-tab { flex: 0 0 auto; padding: 5px 2px; white-space: nowrap;
    border-left: 0; border-bottom: 2px solid transparent; border-radius: 0; }
  .ops-tab + .ops-tab { margin-left: 12px; }
  .ops-tab.on { background: none; border-left-color: transparent;
    border-bottom-color: var(--primary); }
  .ops-tab:hover { background: none; }
}

.ops-todo { display: flex; align-items: center; gap: 6px; padding: 11px 0;
  font-size: 13.5px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.ops-todo:last-child { border-bottom: 0; }
.ops-todo b { font-size: 17px; color: var(--primary); }
.ops-todo span { margin-left: auto; font-size: 13px; color: var(--ink-2); }



/* =========================================================
   结果页 → 恋爱大挑战 引导卡（2026-10-30）
   ---------------------------------------------------------
   结果页没有四格底栏（底部被 .rep-dock 占着），入口只能落在报告正文里，
   排在五个操作按钮之后。左边一道族色竖条，颜色跟着用户的类型走；
   这是整张卡唯一带颜色的地方，也是它不像广告的原因。
   ========================================================= */
.love-tease { display: block; margin: 24px 0 0; padding: 15px 16px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--tc, var(--primary));
  border-radius: var(--r-card); box-shadow: 3px 3px 0 rgba(26, 25, 23, .06);
  text-decoration: none; color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.love-tease:active { box-shadow: 1px 1px 0 rgba(26, 25, 23, .06); }
.love-tease .lt-k { display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; color: var(--primary-soft); }
.love-tease .lt-t { display: block; margin-top: 6px; font-size: 15.5px;
  font-weight: 600; line-height: 1.65; letter-spacing: -.01em; color: var(--ink); }
.love-tease .lt-d { display: block; margin-top: 6px; font-size: 12.5px;
  line-height: 1.75; color: var(--ink-3); }
.love-tease .lt-go { display: inline-flex; align-items: center; gap: 3px;
  margin-top: 10px; font-size: 13.5px; font-weight: 600;
  color: var(--primary-soft); }
.love-tease .lt-go i { font-style: normal; font-size: 15px; line-height: 1; }
/* 首页那块（2026-11-02 用户要求）：版式照「18禁专区」的虚线横卡。
   现在直接复用 .qz-adult（虚线边 + 淡朱砂底 + 左标题右箭头），
   唯一要处理的是 .qz-adult 自带的 margin-top:16px —— 恋爱卡是独立 panel，
   顶部不该有空档，这里清零。图上、文案上、竖条纸面卡都不再用了。 */
.love-home { margin-top: 0; }

/* =========================================================
   恋爱大挑战 #/love（2026-10-30 全页统一纸墨）
   ---------------------------------------------------------
   这一页 2026-10-29 深夜照参考站做过一版粉色恋爱风：16px 圆角、
   粉色投影、橙色圆环、微信绿气泡、毛玻璃卡。次日用户点出
   「这些界面的风格为啥变了？不是水墨风格了」——只有首页收回过纸墨，
   七个内页还停在参考站那套。

   于是整段重写：暖纸底、墨字、朱砂唯一强调、方角、硬阴影，
   层级靠「线 + 编号 + 留白」立，不靠渐变与光晕。

   ⚠️ --lp-* 变量名一个没改，只换值。love.js 里大量内联的
      `var(--lp-d)` / `var(--lp-2)` / `style="color:var(--lp-d)"`
      会跟着一起变，不用回头改渲染代码。这是这次能一轮做完的原因，
      **改值别改名**。
   ========================================================= */

/* ---------- 1. 作用域 ---------- */

body[data-route="love"] {
  --lp: var(--primary);              /* 唯一强调：朱砂 */
  --lp-d: var(--ink);                /* 原来的深玫红 → 墨（标题一律走它） */
  --lp-dd: var(--primary-soft);      /* 需要朱砂文字时用它 */
  --lp-l: var(--primary-soft-bg);    /* 浅朱砂底（选中态） */
  --lp-t: var(--ink);
  --lp-2: var(--ink-2);
  --lp-3: var(--ink-3);
  --lp-line: var(--line);
  --lp-edge: var(--line);
  /* 输入框、开关这类小控件用更实的线：--line 在纸面上太淡，
     1px var(--line) 圈一个 36 高的框，等于没圈。
     ⚠️ 2026-10-30 修：这里曾被批量替换写成了 `var(--lp-field)` 自引用，
     自定义属性自引用＝无效值，所有 `border: 1px solid var(--lp-field)`
     和 `color: var(--lp-field)`（打卡图标）都退化成 currentColor（墨黑），
     看起来像「满屏黑边」。改这个变量前先搜一遍 `--lp-field`。 */
  --lp-field: var(--rule-2);
  /* 印章底：黑底白字的方章换成朱砂。纸墨体系里「墨底」是会员卡那种大块料，
     小块头像用它是把最重的一档色浪费在 26px 的方寸上。 */
  --lp-stamp: var(--primary);
  --lp-stamp-fg: var(--surface);
  --lp-shadow: 3px 3px 0 rgba(26, 25, 23, .07);
  --lp-r: var(--r-card);
  --lp-r-s: var(--r-btn);
  background: var(--bg);
}

/* 顶栏与页脚回到默认（旧版为了铺满全屏粉底把它们藏了）。
   现在整页就是站内的一张纸，顶着「谜鹿 MELLOW」才成立。

   两个例外：对象池与打卡奖励自带返回条，再叠一条主站顶栏就是
   两条横杠压在一起，所以这两页单独藏掉顶栏。 */
body[data-route="love"][data-love-view="pool"] .site-header,
body[data-route="love"][data-love-view="reward"] .site-header { display: none; }

/* 底栏回到默认纸墨 + 朱砂选中。粉色选中是参考站留下的记号，
   统一之后它成了整页唯一还停在旧体系里的东西。 */

/* ---------- 2. 容器与字级 ---------- */

.lv-page { max-width: 480px; margin: 0 auto;
  padding: 20px 16px calc(84px + env(safe-area-inset-bottom)); }

.lv-h1 { font-size: 21px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); text-align: center; margin: 0 0 6px; }
.lv-desc { color: var(--ink-3); font-size: 13.5px; text-align: center;
  margin: 0 0 20px; }
.lv-note { color: var(--ink-3); font-size: 12px; text-align: center;
  margin: 12px 0 0; }

/* ---------- 3. 卡片 ---------- */

.lv-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 20px;
  box-shadow: var(--lp-shadow); margin-bottom: 16px; }

/* ---------- 4. 按钮 ---------- */

/* 主按钮＝朱砂实心 + 硬阴影（站内主 CTA 的惯例）。
   旧版是 135° 渐变胶囊 + 粉色投影，那是参考站的形状，纸面体系里
   渐变会显出「软件感」。 */
.lv-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--primary); border-radius: var(--r-btn);
  font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: var(--primary);
  box-shadow: 2px 2px 0 var(--ink); cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background .16s var(--ease); touch-action: manipulation; }
.lv-btn:active { transform: translate(2px, 2px); box-shadow: none; }
/* 禁用态不能只降透明度：白字落在半透明朱砂上读不出写的是什么 */
.lv-btn[disabled] { background: var(--surface-2); color: var(--ink-3);
  border-color: var(--line); box-shadow: none; cursor: default; }
.lv-btn.ghost { background: transparent; color: var(--ink);
  border-color: var(--lp-field); box-shadow: none; font-weight: 500; }
.lv-btn.ghost:active { background: var(--surface-2); transform: none; }
.lv-btn.sm { width: auto; min-height: 36px; padding: 0 14px; font-size: 13px; }

/* ---------- 5. 首页（2026-10-29 深夜先单独收回纸墨，本次内页跟上） ---------- */

.lv-home { position: static; overflow: visible; }
.lv-home-in { max-width: 480px; margin: 0 auto;
  padding: 30px 20px calc(96px + env(safe-area-inset-bottom)); }

/* 首屏标题块（2026-10-30 用户要求加外框）：
   与下面的规则卡同一族——纸面、1px 线、3px 硬阴影、方角，
   整页因此变成「两块纸压在一起」，而不是一张卡 + 一段散字。
   层级：品牌名（最大）→ 钩子两行 → 一句收尾。 */
.lv-hero-box { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: 3px 3px 0 rgba(26,25,23,.06);
  padding: 26px 14px 24px; margin: 0 0 16px; text-align: center; }
/* 主标题：整句「恋爱大挑战 · 72 小时」必须一行装下。
   实测这句约 10 个全角宽（28px 时 281px）；390 手机卡内可用约 314px、
   375 宽（带滚动条）只剩 287px，所以上限 27px、平屏靠 6.6vw 收到 24–25px。
   ⚠️ 不要给它加 --mono + 大字距：等宽字体把每个字再加 3px，立刻折行。 */
.lv-title { font-size: clamp(21px, 6.6vw, 27px); font-weight: 700;
  letter-spacing: .01em; line-height: 1.3; color: var(--primary);
  margin: 0 0 10px; }
/* 钩子：原来的 36px 大标题降到这里。要让它明显小于品牌名（约 1.45 倍差），
   所以才压到 18px；「三天」留朱砂，是整页唯一带色的字。 */
.lv-hero-sub { font-size: clamp(15.5px, 4.6vw, 18px); font-weight: 700;
  letter-spacing: .02em; line-height: 1.5; color: var(--ink);
  margin: 0 0 12px; }
.lv-hero-sub .hl { color: var(--primary); }
.lv-lead { font-size: 13.5px; line-height: 1.85; color: var(--ink-2);
  margin: 0; text-wrap: pretty; }

/* 规则卡：纸面 + 细线 + 硬阴影（不是模糊投影），标题下压一道墨线 */
.lv-sheet { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: 3px 3px 0 rgba(26,25,23,.06);
  padding: 15px 16px 0; }
.lv-sheet-hd { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.lv-sheet-hd b { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: var(--ink); }
.lv-sheet-hd span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.lv-rule-list { list-style: none; margin: 0; padding: 0; }
.lv-rule-list li { padding: 5px 0;
  font-size: 13px; line-height: 1.85;
  color: var(--ink-2); }
.lv-rule-list span { min-width: 0; text-wrap: pretty; }

/* 声明（2026-10-30 四稿）：两行都要和「声明：」后面的正文对齐。
   做法＝把这块当 2 列网格（标签列 max-content + 正文列 1fr），`<p>` 用
   display:contents 摊平进去，于是「第二行折行」和「没有标签的严禁那句」
   都落在同一个左边缘上。⚠️ 别用 padding-left:44px 硬撑——标签宽度是量出来的，
   换字体或改文案就错位。 */
.lv-sheet-ft { margin: 2px 0 0; padding: 8px 0 12px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: 6px; row-gap: 2px; align-items: baseline; }
.lv-sheet-ft-p { display: contents; margin: 0; font-size: 12px;
  line-height: 1.9; color: var(--ink-2); }
.lv-sheet-ft-p b { grid-column: 1; font-weight: 700; letter-spacing: .06em; color: var(--primary); }
.lv-sheet-ft-p span { grid-column: 2; min-width: 0; text-wrap: balance; }
.lv-sheet-ft-p.strong span { font-weight: 700; color: var(--ink); }

/* 360 及以下可用宽度只剩约 263px。这一档把字号与序号间距一起收一点，
   第①条（全组最长）才能保住一行。 */
@media (max-width: 374px) {
  .lv-rule-list li { font-size: 12.5px; }
  .lv-sheet-ft-p { font-size: 11.5px; gap: 6px; }
}

/* 主按钮直接复用站内 .btn：朱砂实心 + 方角；硬阴影是站内主 CTA 的惯例 */
.lv-start { display: flex; width: 100%; max-width: 360px; margin: 28px auto 0;
  min-height: 52px; font-size: 16px; box-shadow: 3px 3px 0 var(--ink); }
.lv-start:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.lv-copy { margin: 20px 0 0; text-align: center; color: var(--ink-3);
  font-size: 11px; line-height: 1.8; }
.lv-icp { color: inherit; text-decoration: none; }

/* ---------- 6. 资料表单 ---------- */

.lv-frow { margin-bottom: 16px; }
.lv-frow > label { display: block; margin-bottom: 7px; color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.lv-input, .lv-select { display: block; width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  outline: none; -webkit-appearance: none; appearance: none; }
.lv-select { -webkit-appearance: auto; appearance: auto; }
.lv-input:focus, .lv-select:focus { border-color: var(--primary); }
.lv-frow .two { display: flex; gap: 8px; }
.lv-frow .two > * { flex: 1; min-width: 0; }

/* 性别：两格并排的方框，选中朱砂描边＋浅朱砂底，不填色块 */
.lv-gender { display: flex; gap: 8px; }
.lv-gender button { flex: 1; height: 46px; border: 1px solid var(--line);
  border-radius: var(--r-btn); background: #fff; font: inherit;
  font-size: 15px; color: var(--ink-2); cursor: pointer; }
.lv-gender button.on { border-color: var(--primary); background: var(--primary-soft-bg);
  color: var(--primary-soft); font-weight: 600; }

/* 爱好：方角标签，不用胶囊——纸墨体系的标签一律方角 */
.lv-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-tag { padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--r-tag);
  font-size: 13px; color: var(--ink-2); background: #fff; cursor: pointer;
  user-select: none; -webkit-tap-highlight-color: transparent; }
.lv-tag.on { background: var(--primary-soft-bg); border-color: var(--primary);
  color: var(--primary-soft); font-weight: 600; }

/* ---------- 6.5 人格类型（资料页 / 唯一跟主站十六人格接上的字段） ----------
   存在理由就一条：别让用户手填自己的四字码。本站大概率测过了，
   测过就自动带出；没测过给一个「去测一次」；16 格手选藏在第二层，
   且选了会明确标「自己选的，不是测评结果」——不把自选伪装成测评。
   族色方章是全页唯一允许出现四族油墨的地方（它承载类型身份）。 */
.lv-fopt { font-style: normal; font-size: 11px; font-weight: 400;
  color: var(--ink-3); margin-left: 5px; }

.lv-mbx { border: 1px dashed var(--lp-field); border-radius: var(--r-btn);
  padding: 13px 14px; background: var(--surface-2); }
.lv-mbx.on { display: flex; align-items: center; gap: 11px;
  border-style: solid; border-color: var(--line); background: #fff; }

.lv-mseal { display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; min-width: 54px; height: 30px; padding: 0 8px;
  border: 1px solid currentColor; border-radius: var(--r-tag);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.lv-mbt { min-width: 0; flex: 1; }
.lv-mbt b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.lv-mbt span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }

.lv-mbx-empty p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.lv-mbx-row { display: flex; align-items: stretch; gap: 8px; }
.lv-mbx-row .lv-mbx-go { flex: 1 1 0; min-width: 0; }
.lv-mbx-go { flex: 1; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--primary); border-radius: var(--r-btn);
  font: inherit; font-size: 13.5px; font-weight: 600; color: #fff;
  background: var(--primary); cursor: pointer; touch-action: manipulation; }
.lv-mbx-go.ghost { background: #fff; color: var(--ink); font-weight: 500;
  border-color: var(--lp-field); }
.lv-mbx-act { flex: 0 0 auto; border: 0; background: none; font: inherit;
  font-size: 13px; color: var(--primary-soft); cursor: pointer; padding: 8px 4px;
  touch-action: manipulation; }
.lv-mbx-fine { display: block; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }

/* 16 格：4 列。12px 是「ENFP」不折行的上限，再大就得缩格宽 */
.lv-mgrid-hd { margin: 0 0 9px; font-size: 12px; color: var(--ink-3); }
.lv-mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.lv-mcell { display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 2px 6px; border: 1px solid var(--line); border-radius: var(--r-tag);
  background: #fff; font: inherit; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lv-mcell b { font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.lv-mcell span { max-width: 100%; font-size: 10px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 选中：朱砂描边加内阴影补厚，不填浅色块——16 格填色会糊成一片 */
.lv-mcell.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
  background: #fff; }
.lv-mgrid-ft { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.lv-mgrid-ft .lv-mbx-go { flex: 1; }

/* 匹配成功卡上的类型标：族色描边小签，跟在「性别 · 年龄 · 地区」下面 */
.lv-pairtype { display: inline-block; margin-top: 5px; padding: 1px 7px;
  border: 1px solid currentColor; border-radius: var(--r-tag); font-style: normal;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }

/* ---------- 7. 匹配页 ---------- */

/* 抬头条：旧版是四色渐变横幅，2026-10-29 改成深墨条，2026-10-30 用户说
   「这些黑色真难看」→ 改成朱砂封条。深墨留给会员卡（那是大块面料），
   这一条只有 60 多高，用朱砂更像一条封条，也不跟页底 CTA 抢同一档黑。
   高度从 4:1 收成 11:2（390 宽约 64px），原来 4:1 是 87px，中间一行字太空。 */
.lv-banner { position: relative; display: flex; align-items: center;
  justify-content: center; aspect-ratio: 11 / 2; margin: 0 0 12px;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--primary); border: 1px solid var(--primary); }
.lv-banner b { color: var(--surface); font-size: 13px; font-weight: 600;
  letter-spacing: 2.5px; }

.lv-notice { display: flex; align-items: center; justify-content: center;
  margin: 8px auto 14px; max-width: 340px; padding: 6px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-tag); font-size: 11px; color: var(--ink-3);
  overflow: hidden; }
.lv-notice span { display: block; width: 100%; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .4s; }

.lv-mcard { position: relative; margin-top: 10px; padding: 18px 18px 20px;
  border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--lp-shadow); }
.lv-mcard h2 { text-align: center; color: var(--ink); font-size: 19px;
  font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.lv-mcard .sub { text-align: center; color: var(--ink-3); font-size: 12px;
  margin: 0 0 14px; }

/* 性别卡：底图是 AI 插画，纸墨体系里它只能当「照片」用——
   外面一道实线、一道硬阴影，不许再加粉色光晕，否则插画和排版互相抢。 */
.lv-gcards { display: flex; gap: 10px; margin-bottom: 14px; }
.lv-gcard { position: relative; flex: 1; border-radius: var(--r-card); overflow: hidden;
  cursor: pointer; background-color: #fff; background-size: cover;
  background-position: center; border: 1px solid var(--line);
  transition: border-color .18s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent; }
.lv-gcard .pad { padding-bottom: 63.9%; }
.lv-gcard .ttl { position: absolute; left: 10px; top: 30%; font-size: 14px;
  font-weight: 700; color: var(--ink); letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(255, 253, 248, .9); }
.lv-gcard .price { position: absolute; left: 8px; bottom: 8px; padding: 0 6px;
  border-radius: var(--r-tag); background: var(--surface);
  border: 1px solid var(--line); font-family: var(--mono);
  font-size: 13px; font-weight: 600; color: var(--primary); }
.lv-gcard.on { border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 3px 3px 0 rgba(26, 25, 23, .12); }
/* 同性那张卡：压暗 + 灰掉插画。
   不用渐变（纸墨规矩），靠 opacity/filter 表达「这张点不了」。
   2026-11-01 去掉了原来贴在右上角的「同性不可选」小票签——
   用户觉得压在图上难看；现在改成点「立即匹配」时再弹一句提醒，
   措辞和点卡时的 toast 完全一致。 */
.lv-gcard.off { opacity: .42; filter: grayscale(1); cursor: not-allowed; }
.lv-gcard.off .ttl { opacity: .7; }

/* 筛选区：浅纸面 + 左竖条小标，和介绍页 .qz-about 同一套语言 */
.lv-filter { position: relative; margin-bottom: 12px; padding: 14px;
  border-radius: var(--r-card); background: var(--surface-2);
  border: 1px solid var(--line); }
.lv-filter .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.lv-filter .hd i { width: 3px; height: 12px; border-radius: 0; background: var(--primary); }
.lv-filter .hd b { font-size: 11.5px; font-weight: 700; color: var(--ink);
  letter-spacing: .12em; }
.lv-filter .hd em { flex: 1; height: 1px; background: var(--line); }
.lv-fr { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lv-fr:last-child { margin-bottom: 0; }
.lv-fr > label { flex: 0 0 36px; font-size: 12px; color: var(--ink-3);
  white-space: nowrap; }
.lv-fr input, .lv-fr select { flex: 1; min-width: 0; height: 36px; padding: 0 8px;
  border: 1px solid var(--lp-field); border-radius: var(--r-btn);
  font-family: inherit; font-size: 13px; color: var(--ink); text-align: center;
  background: #fff; outline: none;
  -webkit-appearance: none; appearance: none; }
.lv-fr select { text-align: left; -webkit-appearance: auto; appearance: auto; }
.lv-fr .unit { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.lv-fr .dash { font-size: 12px; color: var(--ink-3); }

/* 筛选条件里的人格行：一颗伪 select，点开才铺 4×4。
   常驻 16 格会把卡撑到两屏，把「立即匹配」挤出首屏。 */
.lv-fbtnbox { display: flex; flex: 1; min-width: 0; }
.lv-fbtn { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex: 1; min-width: 0; height: 36px; padding: 0 9px;
  border: 1px solid var(--lp-field); border-radius: var(--r-btn);
  font: inherit; font-size: 13px; color: var(--ink); text-align: left;
  /* 必须写在 font 简写之后：font 会把 line-height 一起重置，
     写前面等于没写，整行会比上面的 input 高 3px */
  line-height: 19px;
  background: #fff; outline: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lv-fbtn span { min-width: 0; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; }
/* 三角用 border 画：字符 ▾ 在 36 高的框里又小又淡，用户看不出能点 */
.lv-fbtn i { flex: 0 0 auto; width: 0; height: 0; margin-right: 1px;
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
  border-top: 5.5px solid var(--ink-3); transition: transform .18s; }
.lv-fbtn.on { color: var(--primary-soft); font-weight: 600;
  border-color: var(--primary); }
.lv-fbtn.on i { border-top-color: var(--primary); }
.lv-fbtn.open i { transform: rotate(180deg); }

.lv-fgrid { padding: 0 2px; }
.lv-fgrid-hd { margin: 0 0 3px; font-size: 12px; color: var(--ink-3); }
/* 选了人格可能更难配到——这句必须浅灰、独立一行，不能塞进上面那行的括号里 */
.lv-fgrid-tip { margin: 0 0 9px; font-size: 11px; line-height: 1.5; color: var(--ink-3); }
.lv-fgrid .lv-mcell { background: #fff; }
.lv-fgrid .lv-mcell.on { background: var(--primary-soft-bg); }
.lv-fgrid-ft { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px; }
.lv-fclear { border: 1px solid var(--line); border-radius: var(--r-btn);
  min-height: 30px; padding: 0 11px; background: #fff; font: inherit;
  font-size: 12px; color: var(--ink-3); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lv-fclear[disabled] { color: var(--lp-field); border-color: var(--line);
  background: var(--surface-2); cursor: default; }
.lv-fdone { border: 1px solid var(--primary); border-radius: var(--r-btn);
  min-height: 30px; padding: 0 16px; background: var(--primary); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* 「优先匹配选定人格」开关行：选了类型才出现（没得优先时它是空动作）。
   开着＝软优先；关掉＝人格完全不参与。两种语义都写在 span 里，别只靠颜色。 */
.lv-fpref { display: flex; align-items: center; gap: 10px; margin-top: 11px;
  padding: 10px 12px; border-radius: var(--r-btn); background: #fff;
  border: 1px solid var(--line); }
.lv-fpref .tx { flex: 1; min-width: 0; }
.lv-fpref b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lv-fpref.on b { color: var(--primary-soft); }
.lv-fpref span { display: block; margin-top: 2px; font-size: 11px;
  line-height: 1.5; color: var(--ink-3); }

/* 开关：方角推块，不用 iOS 胶囊 */
.lv-sw { position: relative; flex: 0 0 auto; width: 44px; height: 24px; padding: 0;
  border: 1px solid var(--lp-field); border-radius: var(--r-tag);
  background: var(--surface); cursor: pointer;
  transition: background .18s, border-color .18s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* 24 高的开关离 44px 触摸标准还差一截，用伪元素把点击区撑到 44+ */
.lv-sw::after { content: ""; position: absolute; inset: -10px -4px; }
.lv-sw i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 0; background: var(--lp-field);
  transition: transform .18s, background .18s; }
.lv-fpref.on .lv-sw { background: var(--primary-soft-bg); border-color: var(--primary); }
.lv-fpref.on .lv-sw i { background: var(--primary); transform: translateX(20px); }

/* 收银台：纸面卡，去掉旧版的光斑 */
.lv-console { position: relative; margin-top: 6px; padding: 15px;
  border-radius: var(--r-card); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--lp-shadow); }

.lv-cta { position: relative; display: flex; align-items: center;
  justify-content: space-between; width: 100%; padding: 12px 16px;
  border: 1px solid var(--primary); border-radius: var(--r-btn);
  font: inherit; color: #fff; text-align: left; background: var(--primary);
  box-shadow: 2px 2px 0 var(--ink); cursor: pointer;
  transition: transform .16s, box-shadow .16s; }
.lv-cta:active { transform: translate(2px, 2px); box-shadow: none; }
.lv-cta .l { display: flex; flex-direction: column; line-height: 1.2; }
.lv-cta .l b { font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.lv-cta .l i { font-style: normal; font-size: 10.5px; opacity: .82; margin-top: 2px; }
.lv-cta .r { display: flex; align-items: center; gap: 8px; }
.lv-cta .r em { font-style: normal; font-family: var(--mono); font-size: 17px;
  font-weight: 600; letter-spacing: .02em; }
.lv-cta .r span { display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--r-tag);
  background: rgba(255, 253, 248, .18); font-size: 14px; }

.lv-row2 { display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-top: 10px; padding: 10px 14px;
  border-radius: var(--r-btn); border: 1px solid var(--lp-field);
  background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.lv-row2 .l { display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; }
.lv-row2 .l i { display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-tag); font-style: normal;
  background: var(--primary-soft-bg); font-size: 12px; color: var(--primary-soft); }
.lv-row2 > em { font-style: normal; font-size: 11px; color: var(--ink-3); }

.lv-refund { display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 11px; font-size: 10.5px; color: var(--ink-3); }
.lv-refund i { width: 4px; height: 4px; border-radius: 0; background: var(--primary); }

.lv-agree { display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 12px; padding-top: 11px; font-size: 12px;
  border-top: 1px solid var(--line); }
.lv-agree .box { display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: var(--r-tag);
  border: 1px solid var(--lp-field); background: #fff; color: #fff; font-size: 11px;
  cursor: pointer; transition: background .18s, border-color .18s; }
.lv-agree .box.on { background: var(--primary); border-color: var(--primary); }
.lv-agree label { color: var(--ink-2); cursor: pointer; }
.lv-agree a { color: var(--primary-soft); font-weight: 600; text-decoration: none; }

/* ---------- 8. 匹配中 ---------- */

.lv-matching { text-align: center; padding: 64px 0 40px; }
.lv-heartwrap { position: relative; width: 120px; height: 120px;
  margin: 0 auto 24px; }
.lv-heartwrap b { position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%); font-size: 38px; color: var(--primary);
  line-height: 1; animation: lvPulse 1s ease-in-out infinite; }
.lv-heartwrap i { position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px solid rgba(188, 65, 40, .34); animation: lvExpand 2s ease-out infinite; }
.lv-heartwrap i.c1 { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.lv-heartwrap i.c2 { width: 80px; height: 80px; margin: -40px 0 0 -40px;
  animation-delay: .4s; }
.lv-heartwrap i.c3 { width: 120px; height: 120px; margin: -60px 0 0 -60px;
  animation-delay: .8s; }
@keyframes lvPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.16); }
}
@keyframes lvExpand {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
.lv-matching h2 { color: var(--ink); font-size: 20px; margin: 0 0 8px; }
.lv-matching p { color: var(--ink-2); font-size: 14px; margin: 0; }

/* ---------- 9. 匹配成功 ---------- */

.lv-success { text-align: center; margin-top: 20px; padding: 40px 24px 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--lp-shadow); }
.lv-success .big { font-size: 54px; line-height: 1; color: var(--primary);
  margin-bottom: 16px; animation: lvBeat 1.5s ease-in-out infinite; }
/* 旧版这里是渐变文字（-webkit-text-fill-color: transparent），
   在纸面体系里既不合体系、又会在某些内核上整行消失 */
.lv-success h2 { font-size: 23px; margin: 0 0 8px; color: var(--ink);
  font-weight: 700; letter-spacing: -.01em; }
.lv-success > p { color: var(--ink-2); font-size: 14px; margin: 0 0 20px; }
@keyframes lvBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.1); }
  30% { transform: scale(.96); }
  45% { transform: scale(1.04); }
}

.lv-pair { margin: 16px 0; padding: 16px; border-radius: var(--r-card);
  background: var(--surface-2); border: 1px solid var(--line); }
.lv-pair .row { display: flex; align-items: center; gap: 12px; }
.lv-pair .av { display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: var(--r-tag);
  background: var(--lp-stamp); color: var(--lp-stamp-fg);
  font-size: 18px; font-weight: 600; overflow: hidden; }
.lv-pair .av img { width: 100%; height: 100%; object-fit: cover; }
.lv-pair .tx { text-align: left; min-width: 0; }
.lv-pair .tx h3 { font-size: 16px; color: var(--ink); margin: 0 0 2px; }
.lv-pair .tx p { font-size: 13px; color: var(--ink-2); margin: 0;
  line-height: 1.6; }

.lv-cdcard { margin: 16px 0; padding: 16px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); }
.lv-cdcard h3 { font-size: 12px; font-weight: 600; color: var(--ink-3);
  letter-spacing: .1em; margin: 0 0 8px; }
.lv-cdtime { font-family: var(--mono); font-size: 26px; font-weight: 600;
  color: var(--primary); font-variant-numeric: tabular-nums;
  letter-spacing: 1px; }

/* ---------- 10. 对象池 / 打卡奖励的返回条 ---------- */

/* 这两页的顶栏藏了主站 header，返回条就是唯一导航，必须 sticky */
.lv-topbar { position: sticky; top: 0; z-index: 20; margin: -20px -16px 16px;
  padding: 0 16px; background: color-mix(in srgb, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lv-topbar .in { position: relative; display: flex; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line); }
.lv-topbar .back { display: flex; align-items: center; gap: 3px; z-index: 1;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.lv-topbar .back u { font-size: 18px; line-height: 1; text-decoration: none; }
.lv-topbar .ttl { position: absolute; left: 0; right: 0; text-align: center;
  font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: .04em;
  pointer-events: none; }

.lv-poolintro { padding: 18px; text-align: center; }
.lv-poolintro .big { font-size: 40px; line-height: 1; color: var(--lp-field);
  margin-bottom: 10px; }
.lv-poolintro h3 { font-size: 15px; font-weight: 700; color: var(--ink);
  margin: 0 0 10px; letter-spacing: .02em; }
.lv-poolintro ul { margin: 0; padding: 0; list-style: none; text-align: left;
  font-size: 13px; color: var(--ink-2); line-height: 2; }
.lv-poolintro li::before { content: "· "; color: var(--primary); }

/* 「已在池中」是状态不是成功告警，用朱砂打勾 + 墨字，不用绿色底 */
.lv-joined { margin-bottom: 12px; padding: 13px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); }
.lv-joined b { display: block; font-size: 14.5px; font-weight: 600;
  color: var(--primary-soft); }
.lv-joined span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }

.lv-who { margin-top: 20px; padding: 0; overflow: hidden; }
.lv-who .hd { padding: 13px 18px; font-size: 14px; font-weight: 700;
  color: var(--ink); letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.lv-who .bd { max-height: 320px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
.lv-who .it { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-bottom: 1px dashed var(--line); }
.lv-who .it:last-child { border-bottom: 0; }
.lv-who .it .av { display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-tag);
  background: var(--lp-stamp); color: var(--lp-stamp-fg);
  font-size: 13px; font-weight: 600; }
.lv-who .it .tx { min-width: 0; flex: 1; }
.lv-who .it .tx b { display: block; font-size: 13.5px; color: var(--ink);
  font-weight: 600; }
.lv-who .it .tx span { display: block; font-size: 11.5px; color: var(--ink-3); }
.lv-who .it .at { font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  white-space: nowrap; }
.lv-who .none { padding: 24px 0; text-align: center; color: var(--ink-3);
  font-size: 13.5px; }

/* ---------- 11. 情侣空间 ---------- */

.lv-hero { position: relative; overflow: hidden; margin-bottom: 16px;
  padding: 26px 20px 20px; text-align: center; border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--lp-shadow); }
.lv-avs { position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: center; margin-bottom: 14px; }
/* 两头像改成方章：纸墨体系里圆头像是最像「另一个产品」的一处 */
.lv-ring { flex: 0 0 auto; width: 68px; height: 68px; padding: 3px;
  border-radius: var(--r-tag); border: 1px solid var(--line);
  background: var(--surface); }
.lv-ring > div { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 0; overflow: hidden;
  background: var(--lp-stamp); color: var(--lp-stamp-fg);
  font-size: 19px; font-weight: 600; }
.lv-ring img { width: 100%; height: 100%; object-fit: cover; }
.lv-conn { position: relative; z-index: 1; margin: 0 10px; font-size: 20px;
  color: var(--primary); line-height: 1;
  animation: lvBeat 1.5s ease-in-out infinite; }
.lv-names { position: relative; z-index: 1; margin: 0 0 16px; font-size: 17px;
  font-weight: 600; color: var(--ink); }
.lv-names em { font-style: normal; color: var(--primary); margin: 0 2px; }
.lv-cdring { position: relative; z-index: 1; }
/* 倒计时留圆形：它是「表」不是「卡」，圆在这里有语义 */
.lv-cdcircle { display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; width: 110px; height: 110px; border-radius: 50%;
  border: 1px solid var(--primary); background: var(--surface); }
.lv-cdcircle b { font-family: var(--mono); font-size: 20px; font-weight: 600;
  color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lv-cdcircle span { margin-top: 2px; font-size: 10.5px; color: var(--ink-3); }

.lv-info { margin-bottom: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--lp-shadow); overflow: hidden; }
.lv-info > div { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.lv-info > div:last-child { border-bottom: 0; }
.lv-info > div > span:first-child { color: var(--ink-3); }
.lv-info > div > span:last-child { color: var(--ink); font-weight: 500;
  text-align: right; margin-left: 12px; }
/* 微信号是这一页唯一的可交互数据，用朱砂 + 虚线底线说明「点得动」 */
.lv-info > div > span.wx { color: var(--primary-soft);
  border-bottom: 1px dashed var(--primary-soft); }

/* 人格那行也是链接（2026-10-30）：跳 #/type/四字码 档案页。
   四字码自带族色，链接本体不再加色，只用虚线底线 + 箭头示意可点，
   虚线用线色不用朱砂——这行的主角是族色，别再抢。 */
.lv-mbti-link { color: inherit; text-decoration: none;
  border-bottom: 1px dashed var(--line); padding-bottom: 1px; }
.lv-mbti-link i { font-style: normal; margin-left: 3px; color: var(--ink-3); }

/* ---------- 12. 聊天 ---------- */

.lv-chat { margin-bottom: 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--lp-shadow); overflow: hidden; }
.lv-chat .hd { padding: 12px 20px; background: var(--surface); text-align: center;
  font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .06em;
  border-bottom: 1px solid var(--line); }
.lv-chat .bd { display: flex; flex-direction: column; gap: 8px;
  padding: 12px; max-height: 280px; overflow-y: auto;
  background: var(--surface-2); }
.lv-chat .empty { padding: 24px 0; text-align: center; color: var(--ink-3);
  font-size: 13px; }
.lv-msg { display: flex; gap: 6px; max-width: 85%; }
.lv-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.lv-msg.ta { align-self: flex-start; }
.lv-msg .av { display: flex; align-items: center; justify-content: center;
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: var(--r-tag);
  background: var(--lp-stamp); color: var(--lp-stamp-fg);
  font-size: 11px; font-weight: 600; overflow: hidden; }
/* ⚠️ 这三个都是 span，不显式改成 flex 列的话，气泡和时间会挤在同一行，
   三条消息还会叠成一坨——行内元素撑不出「气泡在上、时间在下」。
   min-width:0 是给长昵称留的：flex 子项默认 min-width:auto，中文不会断。 */
.lv-msg .wrap { display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; }
.lv-msg.me .wrap { align-items: flex-end; }
/* 气泡不用微信绿了：绿在纸墨里是语义色（成功），拿它当聊天气泡会读错。
   我＝朱砂实心，TA＝纸白描边，左右一深一浅就够分辨。 */
.lv-msg .bb { display: inline-block; padding: 8px 11px; border-radius: var(--r-tag);
  font-size: 13px; line-height: 1.55; word-break: break-word; }
.lv-msg.me .bb { background: var(--primary); color: #fff; }
.lv-msg.ta .bb { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.lv-msg .tm { margin-top: 2px; font-size: 10px; color: var(--ink-3); text-align: right; }
.lv-msg.me .tm { text-align: left; }
.lv-msg .badge { display: inline-block; margin-bottom: 3px; padding: 1px 6px;
  border-radius: var(--r-tag); background: var(--primary-soft-bg);
  border: 1px solid var(--primary); font-size: 10px; font-weight: 600;
  color: var(--primary-soft); }
.lv-chat .sys { align-self: center; max-width: 92%; padding: 2px 10px;
  border-radius: var(--r-tag); background: rgba(26, 25, 23, .05);
  font-size: 11px; color: var(--ink-3); text-align: center; line-height: 1.6; }

/* ---------- 用户协议页（2026-10-30 调整单第 7 条） ---------- */
.lv-terms-body { padding: 20px; }
.lv-terms-body h3 { margin: 0 0 4px; font-size: 17px; color: var(--ink); text-align: center; }
.lv-terms-body h4 { margin: 18px 0 6px; font-size: 14px; color: var(--ink); }
.lv-terms-body p { margin: 6px 0; font-size: 13px; line-height: 1.85; color: var(--ink-2); }
.lv-terms-body p.s { font-size: 12px; color: var(--ink-3); text-align: center; }

/* ---------- 13. 三宫格打卡 ---------- */

.lv-tasks { margin-bottom: 16px; padding: 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--lp-shadow); }
.lv-tasks h3 { margin: 0 0 16px; text-align: center; font-size: 15px;
  font-weight: 700; color: var(--ink); letter-spacing: .04em; }
/* 打卡时间提示（2026-10-30 调整单第 9 条）：按钮上方的内联条。
   淡朱砂底 + 朱砂小字，不用语义警告色——这是「还没到点」的说明，不是错误。 */
.lv-thint { margin: 0 0 12px; padding: 7px 10px; border-radius: 4px;
  background: rgba(200, 69, 43, 0.08); color: var(--primary);
  font-size: 12.5px; text-align: center; }
.lv-thint[hidden] { display: none; }
.lv-tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lv-tcard { padding: 16px 8px; text-align: center; border-radius: var(--r-btn);
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer;
  transition: background .2s, border-color .2s, transform .16s;
  -webkit-tap-highlight-color: transparent; }
.lv-tcard:active { transform: translateY(-1px); }
/* 三个时段原来靠橙/黄/靛区分，纸墨里这样等于三种强调色打架。
   统一灰线，只有「已打卡」转朱砂。图标用 #A79E8B 而不是 --rule-2：
   var(--rule-2) 在 26px 的线条上太淡，几乎只剩影子（与站内分割线同样的理由）。 */
.lv-tcard i { display: block; margin-bottom: 6px; font-style: normal;
  font-size: 26px; line-height: 1; color: #A79E8B; }
.lv-tcard i svg { display: block; margin: 0 auto; }
.lv-tcard b { display: block; margin-bottom: 4px; font-size: 13.5px;
  font-weight: 600; color: var(--ink); }
.lv-tcard span { font-size: 11px; color: var(--ink-3); }
.lv-tcard.done { background: var(--primary-soft-bg); border-color: var(--primary); }
.lv-tcard.done i { color: var(--primary); }
.lv-tcard.done span { color: var(--primary-soft); }
/* 2026-10-30 固定时段：no=当前不可点（未到/已错过）。未到给虚线边+提示时间，
   已错过整体降透明；可点的时段由 .lv-tcard 本来的样子承担，不再额外强调。 */
.lv-tcard.no { cursor: default; }
.lv-tcard.no:active { transform: none; }
.lv-tcard.missed { opacity: .45; }
.lv-tcard.wait { border-style: dashed; }

/* ---- 等待页：退出匹配 + 测试引导（2026-10-30） ---- */
.lv-wait-x { margin-top: 18px; }
.lv-wait-x .lv-row2 { text-align: left; }
.lv-wait-tip { margin-top: 14px; padding: 14px 16px; text-align: left;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-btn); }
.lv-wait-tip b { display: block; margin-bottom: 4px; font-size: 13.5px; color: var(--ink); }
.lv-wait-tip p { margin: 0 0 10px; font-size: 12px; color: var(--ink-2); }
.lv-wait-link { font-size: 13px; font-weight: 600; color: var(--primary);
  text-decoration: none; }


/* ---- 资料页头像（2026-10-30） ---- */
.lv-avrow { align-items: center; }
.lv-av-cur { position: relative; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden; cursor: pointer;
  background: var(--primary); color: var(--surface); font-size: 20px; font-weight: 700; }
.lv-av-cur img { width: 100%; height: 100%; object-fit: cover; }
.lv-av-cur em { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0;
  font-style: normal; font-size: 9px; text-align: center; color: var(--surface);
  background: rgba(26,25,23,.45); }

/* ---- 举报弹层：说明框 + 截图（2026-10-30） ---- */
.lv-sh-note { display: block; width: 100%; margin: 12px 0 10px; padding: 10px 12px;
  font: inherit; font-size: 13px; color: var(--ink); resize: none; height: 64px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn); }
.lv-sh-note:focus { outline: none; border-color: var(--primary); }
.lv-sh-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lv-sh-add { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 56px; font-size: 10px; color: var(--ink-3); cursor: pointer;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-btn); }
.lv-sh-add i { font-style: normal; font-size: 18px; line-height: 1.1; color: var(--ink-3); }
.lv-sh-thumb { position: relative; width: 56px; height: 56px; overflow: hidden;
  border-radius: var(--r-btn); border: 1px solid var(--line); }
.lv-sh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-sh-thumb b { position: absolute; top: 0; right: 0; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  color: var(--surface); background: rgba(26,25,23,.6); cursor: pointer; }
.lv-sh-btns .off { opacity: .45; pointer-events: none; }

/* ---- 结束告知卡（2026-10-30） ---- */
.lv-ended-at { margin: -16px 0 24px !important; font-size: 12px; color: var(--ink-3); }

/* ---- 后台举报截图（2026-10-30） ---- */
.ops-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.ops-shot { width: 72px; height: 72px; object-fit: cover; display: block;
  border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2);
  cursor: zoom-in; }
.ops-shot[src=""] { visibility: hidden; }
.lv-tnote { margin: 10px 0 0; text-align: center; font-size: 11px;
  color: var(--ink-3); line-height: 1.7; }

.lv-extend { padding: 8px 0 16px; text-align: center; }
.lv-extend .note { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---------- 13.9 安全阀：解除 / 举报（2026-10-30） ----------
   放在空间页最底，样式刻意做轻：一行小字 + 一条竖线分隔。
   这是止损通道，抢了「去打卡」的视觉重量反而是错的；
   但也绝不能藏进设置——出事的那一刻，用户找不到就等于没有。 */
/* ---------- 13.9b 空间页祝福与提醒（2026-10-30） ----------
   紧贴安全阀上方的一段话：先讲缘分与分寸，再给止损通道一个正当性。
   只用左侧一条朱砂细线做引文标记，不套卡片、不铺底色——
   这里的任务是「读一句」，不是「看一块」，别跟下方打卡区抢重量。 */
.lv-vow { margin: 6px 0 16px; padding: 1px 0 1px 12px;
  border-left: 2px solid var(--primary); }
.lv-vow b { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--ink); }
.lv-vow p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.85; color: var(--ink-2); }
.lv-vow p.s { margin-bottom: 0; color: var(--ink-3); }

.lv-safe { display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 2px 0 22px; }
.lv-safe i { width: 1px; height: 11px; background: var(--line); }
.lv-safe-b { appearance: none; background: none; border: 0; padding: 4px 2px;
  font: inherit; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.lv-safe-b:hover { color: var(--ink-2); }
.lv-safe-b.warn { color: var(--primary-soft); }

/* 底部弹层：遮罩压暗 + 纸白面板。方角、硬阴影，与全站一致，
   不做毛玻璃与大圆角——这一页是纸墨，不是 iOS 弹窗。 */
.lv-mask { position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: flex-end; background: rgba(24, 22, 19, .46); }
.lv-sheet2 { width: 100%; max-width: 560px; margin: 0 auto;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -3px 0 rgba(26, 25, 23, .08);
  animation: lvSheet .18s ease-out; }
@keyframes lvSheet {
  from { transform: translateY(18px); opacity: .55; }
  to { transform: none; opacity: 1; }
}
.lv-sheet2 h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
.lv-sheet2 p { margin: 0 0 14px; font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.lv-sh-list { display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 2px; }
.lv-sh-r { appearance: none; background: var(--surface); border: 0;
  border-bottom: 1px solid var(--line); padding: 13px 14px; text-align: left;
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.lv-sh-r:last-child { border-bottom: 0; }
.lv-sh-r:active { background: var(--surface-2); }
.lv-sh-btns { display: flex; gap: 10px; margin-top: 16px; }
.lv-sh-b { appearance: none; flex: 1; padding: 12px 8px; font: inherit;
  font-size: 14px; background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--rule-2); border-radius: 2px; cursor: pointer; }
.lv-sh-b.warn { background: var(--primary); border-color: var(--primary);
  color: var(--surface); box-shadow: 2px 2px 0 rgba(26, 25, 23, .18); }

/* ---------- 14. 空态 / 等待匹配 ---------- */

.lv-empty, .lv-pending { display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 62vh;
  padding: 20px; text-align: center; }
.lv-empty .big { margin-bottom: 20px; font-size: 64px; line-height: 1;
  color: var(--lp-field); }
.lv-empty h2 { margin: 0 0 10px; font-size: 21px; font-weight: 700; color: var(--ink); }
.lv-empty p { margin: 0 0 28px; font-size: 14px; color: var(--ink-2); }

.lv-loader { position: relative; width: 40px; height: 40px; margin-bottom: 22px;
  background: var(--primary); transform: rotate(45deg);
  animation: lvBeat 1.2s ease-in-out infinite; }
.lv-loader::before, .lv-loader::after { content: ""; position: absolute;
  width: 40px; height: 40px; border-radius: 50%; background: var(--primary); }
.lv-loader::before { top: -20px; left: 0; }
.lv-loader::after { top: 0; left: -20px; }
.lv-pending h2 { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--ink); }
.lv-pending > p { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.lv-pending .est { font-size: 12.5px; color: var(--ink-3); }
.lv-pending .cd { margin-top: 24px; }
.lv-pending .tip { max-width: 320px; margin: 18px 0 14px; padding: 12px 16px;
  border-radius: var(--r-btn); background: var(--surface-2);
  border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.lv-pending .tip b { color: var(--primary-soft); }

/* ---------- 15. 打卡奖励（3×3 总览） ---------- */

.lv-grid9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 4px 0 14px; }
.lv-day { padding: 10px 6px; text-align: center; border-radius: var(--r-btn);
  border: 1px solid var(--line); background: var(--surface-2); }
.lv-day b { display: block; margin-bottom: 6px; font-size: 11px;
  font-weight: 600; color: var(--ink-3); }
.lv-day i { display: block; font-style: normal; font-size: 11px; color: var(--lp-field); }
.lv-day i.ok { color: var(--primary); font-weight: 600; }

/* ---------- 16. 轻提示 ---------- */

.lv-toast { position: fixed; left: 50%; z-index: 90; max-width: 80%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  transform: translateX(-50%); padding: 9px 16px; border-radius: var(--r-tag);
  background: rgba(26, 25, 23, .92); color: var(--surface); font-size: 13px;
  text-align: center; pointer-events: none;
  box-shadow: 2px 2px 0 rgba(26, 25, 23, .16); animation: lvFade .25s ease; }
@keyframes lvFade {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- 17. 窄屏 ---------- */

@media (max-width: 374px) {
  .lv-page { padding-left: 12px; padding-right: 12px; }
  .lv-home-in { padding-left: 14px; padding-right: 14px; }
  .lv-gcard .ttl { font-size: 12.5px; letter-spacing: .04em; }
  .lv-gcard .price { font-size: 12px; }
  .lv-cta .l b { font-size: 14px; }
  .lv-cdcircle { width: 96px; height: 96px; }
  .lv-cdcircle b { font-size: 18px; }
  .lv-ring { width: 60px; height: 60px; }
  .lv-names { font-size: 15.5px; }
  .lv-banner b { font-size: 11.5px; letter-spacing: 1.5px; }
}

/* ---------- 运营后台：趋势柱图 / Top5 / 反馈（2026-10-30 调整单 15、13 条） ---------- */
.pt-label { margin: 12px 0 8px; }
.pt-card > .pt-label:first-of-type { margin-top: 2px; }
/* 未开通时的邀请链接（2026-10-31 深夜）：从「成为推广伙伴」卡里用虚线接出去，
   不再单独一张卡——未开通的人本来就没有别的数据可看，两张卡会显得空。 */
.pt-apply-link { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pt-apply-link .pt-label { margin: 0 0 8px; }
.pt-apply-link .acct-row { margin-top: 0; }
.pt-apply-link .acct-input { font-size: 12.5px; }
.ops-trend { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.ops-tcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.ops-tcol i { width: 100%; max-width: 30px; background: rgba(200, 69, 43, 0.55);
  border-radius: 2px 2px 0 0; }
.ops-tcol b { font-size: 11px; font-weight: 600; color: var(--ink); }
.ops-tcol span { font-size: 10px; color: var(--ink-3); }
.ops-top5 { display: flex; flex-direction: column; }
.ops-trow { display: flex; align-items: center; gap: 12px; padding: 9px 2px; }
.ops-trow + .ops-trow { border-top: 1px solid var(--line); }
.ops-trow .n { flex: 0 0 20px; font-size: 13px; color: var(--ink-3); }
.ops-trow .who { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-trow .who small { display: block; font-size: 11px; color: var(--ink-3); }
.ops-fb { padding: 12px 2px; }
.ops-fb + .ops-fb { border-top: 1px solid var(--line); }
.ops-fb .body { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; }
.ops-fb .meta { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* =========================================================
   八字合婚（2026-11-02）
   两半：填表页 .bz-person / .bz-grid，结果页顶部那块 .bz-pan。
   沿用纸墨语言——方角、细线、朱砂只用在分数与干支上，不新造一套颜色。
   ========================================================= */
.bz-wrap .qz-intro { padding-bottom: 18px; }
.bz-person { margin: 18px 0 0; padding: 14px; border: 1px solid var(--line);
  background: var(--surface-2); border-radius: var(--r-card); }
.bz-person h2 { display: flex; align-items: baseline; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--ink); }
.bz-person h2 em { font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.bz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 10px; margin-top: 12px; }
.bz-f { display: block; min-width: 0; }
.bz-f-wide { grid-column: 1 / -1; }
.bz-f > span { display: block; margin-bottom: 5px; font-size: 11.5px; color: var(--ink-3); }
.bz-f select { width: 100%; height: 42px; padding: 0 8px;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-btn);
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 18px, calc(100% - 10px) 18px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.bz-f select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 年月日合成一个框（2026-11-02）：三个独立下拉各带一行小标题，三行灰字比三个框
   本身还占地方。改成容器画一个边框，里面三个无边框 select 用竖线分隔——视觉上是
   一个字段，点哪儿都能直接选中那一段，横向也省下两个 gap。
   选项文字自带「1995 年 / 6 月 / 18 日」，所以框外不再重复单位。 */
.bz-date { display: flex; align-items: stretch; height: 42px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-btn); }
.bz-date select { flex: 1 1 0; min-width: 0; width: auto; height: 100%;
  padding: 0 20px 0 10px; border: 0; border-radius: 0; background-color: transparent;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 19px, calc(100% - 9px) 19px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.bz-date select + select { border-left: 1px solid var(--rule-2); }
.bz-date select[data-bz$="-y"] { flex-grow: 1.25; }
.bz-date select:focus-visible { outline: 0; }
/* 焦点画在容器上：内层 outline 会被 overflow:hidden 切掉四条边中的两条 */
.bz-date:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.bz-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }

/* 结果页顶部：分数 + 四柱 + 四处缘分点（免费层） */
.bz-pan { margin: 18px 0 0; padding: 16px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--r-card); }
.bz-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bz-score { display: flex; align-items: baseline; gap: 5px; color: var(--qc, var(--primary)); }
.bz-score b { font-family: var(--mono); font-size: 38px; line-height: 1; letter-spacing: -.02em; }
.bz-score i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.bz-verdict { flex: 1 1 12em; min-width: 0; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.bz-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 14px; }
.bz-side { min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.bz-side h4 { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink-3); }
.bz-gz { margin-top: 6px; font-size: 16px; letter-spacing: .02em; color: var(--ink); }
.bz-gz i { font-style: normal; font-weight: 600; color: var(--qc, var(--primary)); }
.bz-gz .bz-sep { margin: 0 3px; color: var(--rule-2); }
.bz-gz .bz-miss { color: var(--rule-2); font-weight: 400; }
.bz-side-meta { margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.bz-wx { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.bz-wx span { padding: 1px 5px; border: 1px solid var(--line); border-radius: 2px; }
.bz-wx .is-zero { border-style: dashed; color: var(--rule-2); }
.bz-wx .is-more { color: var(--primary-soft); border-color: rgba(200, 69, 43, 0.35); }
.bz-points { list-style: none; margin-top: 16px; }
.bz-points li { padding: 10px 0; border-top: 1px dashed var(--line); }
.bz-points b { font-size: 13px; font-weight: 600; color: var(--ink); }
.bz-points i { margin-left: 8px; font-style: normal; font-family: var(--mono);
  font-size: 11.5px; color: var(--qc, var(--primary)); }
.bz-points em { margin-left: 8px; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.bz-points p { margin-top: 4px; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.bz-note { margin-top: 12px; font-size: 11.5px; line-height: 1.7; color: var(--ink-3); }
@media (max-width: 420px) {
  .bz-grid { gap: 8px; }
  .bz-f select { font-size: 13px; padding: 0 6px;
    background-position: calc(100% - 12px) 18px, calc(100% - 7px) 18px; }
  .bz-date select { font-size: 13px;
    padding: 0 19px 0 8px;
    background-position: calc(100% - 12px) 19px, calc(100% - 7px) 19px; }
  .bz-sides { grid-template-columns: 1fr; gap: 10px; }
  .bz-score b { font-size: 34px; }
}