/* ============================================================
 *  LovingTI —— 全局样式 · v5「暗夜粉」
 *
 *  ⚠ 2026-10-04（第二次改版）：用户拿一张 UI 参考稿要求
 *    「完全的按照这个 UI 设计风格修改每一个界面」。参考稿的规格：
 *      · 页面底色 = 深到近黑，只留品红 / 青绿的流光（暗夜）
 *      · 卡片     = 半透明深玻璃 + 1px 浅描边 + 大圆角，底色从卡里透出来
 *      · 文字     = 卡片内外统一浅字（白 / 灰二级 / 灰三级）
 *      · 强调色   = 粉（主）+ 蓝（辅），粉用在图标块 / 按钮 / 圆点 / 数据条
 *      · 头部     = 粉方块图标 + 品牌名 + 大写英文小标签 + 胶囊标签
 *      · 分区标题 = 粉色竖条 + 白色粗体 + 向右淡出的细横线
 *      · 数字卡   = 大号粉（第三张蓝）数字 + 小灰标签
 *      · 提示列表 = 粉 / 蓝交替的实心数字圆点
 *
 *  最关键的翻转只有在 :root 里「卡片材料」那六行：
 *      · 从 v4 的「粉白底 + 深字」翻回「深玻璃底 + 浅字」
 *      · 因为卡片内外现在都是浅字，卡片作用域只剩「把描边换成卡片描边」
 *
 *  背景仍是 v3 那套动态彩虹，**一行没删**，只把亮度开关 --rb-veil 从 .14
 *  提到 .72 —— 参考稿那种「近黑底 + 只留流光」就是彩虹压低亮度的样子。
 *  想回到 v3 的鲜艳版，只改这一个值。
 * ============================================================ */

:root {
  /* ① 炭黑（四档）—— 页面底盘 / 弹层遮罩 / 海报底盘 */
  --ink0: #0A0B0D;      /* 页面底盘 / 弹层遮罩 */
  --ink1: #121418;
  --ink2: #171A1F;
  --ink3: #1E2228;
  --ink4: #2C333B;

  /* ② 文字三级 —— 全站只有这一组文字色：卡片是深玻璃，卡片内外都是浅字 */
  --paper:  #F4F3F7;    /* 一级：标题、正文重点 */
  --paper2: #A9A3B4;    /* 二级：正文、描述 */
  --paper3: #6F6A7C;    /* 三级：元信息、脚注 */

  /* ③ 粉 · 主强调（图标块、主按钮、数字、圆点、数据条） */
  --pink-hi: #F7B0CE;   /* 亮：渐变顶部、选中块高光 */
  --pink:    #E87BA8;   /* 主：用量最大的一档（实测参考稿的粉色峰值就是 #E87AA8） */
  --pink-lo: #C4598C;   /* 暗：渐变底部 */
  --pink-dk: #C4598C;   /* 别名，兼容旧引用 */

  /* ④ 蓝 · 辅强调 —— 第三张数字卡、偶数序号的圆点、次级按钮描边、雷达外圈、进度条右端 */
  --blue-hi: #93B9EA;
  --blue:    #5B8FD6;
  --blue-lo: #3E6CB2;

  /* ⑤ 深玻璃卡片材料（v5 的核心）
        · 半透明 —— 彩虹的品红 / 青绿流光会从卡片里透出来，这是参考稿的特征
        · 刻意不用 backdrop-filter：本项目避开玻璃拟态（老机型性能 + 无谓的层）
        · --card-solid 给必须挡住下层内容的场合（付费墙压住被模糊的正文） */
  --card-bg:    linear-gradient(180deg, rgba(23, 21, 32, .74) 0%, rgba(13, 12, 19, .62) 100%);
  --card-solid: linear-gradient(180deg, #1A1824 0%, #12111A 100%);
  /* 卡片右下角那团粉光：参考稿里每张卡片都有一角透出粉/紫光 */
  --card-glow:  radial-gradient(115% 68% at 84% 112%, rgba(232, 123, 168, .17), rgba(232, 123, 168, 0) 72%);
  --card-line:  rgba(255, 255, 255, .10);
  --card-line2: rgba(255, 255, 255, .17);
  /* 卡片文字：与全局文字同值 —— 保留这组变量是为了以后想再翻浅底时只改一处 */
  --card-ink:   #F4F3F7;
  --card-ink2:  #A9A3B4;
  --card-ink3:  #6F6A7C;

  /* 描边 / 分隔（卡外与卡内现在同族） */
  --line:  rgba(255, 255, 255, .10);
  --line2: rgba(255, 255, 255, .17);

  /* 卡片三件套 —— 深玻璃：顶部内高光 + 外投影。
     ⚠ 不要再加「底部暗边」：深色卡片上加暗边只会糊成一团。 */
  --sh:     inset 0 1px 0 rgba(255, 255, 255, .075),
            0 18px 40px rgba(0, 0, 0, .55);
  --sh-sm:  inset 0 1px 0 rgba(255, 255, 255, .060),
            0 12px 26px rgba(0, 0, 0, .48);
  --sh-pink: inset 0 1px 0 rgba(255, 255, 255, .40),
             0 8px 20px rgba(232, 123, 168, .38);

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 20px;

  /* 强调色：由题库注入，保留变量以兼容页面注入（CSS 内未直接引用） */
  --accent: #E87BA8;
  --accent2: #5B8FD6;
  --accent-ink: #C4598C;

  /* ⑥ 动态彩虹背景（v3 新增）
     --rb-veil 是压在彩虹上的黑纱不透明度：
       0    = 完全原样（最炸、最鲜艳，就是 v3 的样子）
       .14  = v3/v4 的默认值
       .72  = v5 默认，接近参考稿那种「近黑底只留流光」
       .9+  = 几乎看不到彩虹，只剩一点点色偏 */
  --rb-veil: .70;
}

/* ============================================================
 *  【卡片作用域】
 *
 *  只列「卡片」容器。v5 卡片内外都是浅字，所以这里**不再翻转文字色**，
 *  只做两件事：
 *    ① 把描边 / 分隔换成卡片专用的那一档（比卡外稍亮一点）
 *    ② 把 color 钉在 --card-ink 上
 *
 *  保留这条作用域的意义：以后若再要「全站翻浅底」，只要把
 *  --card-ink* 改成深色、这里补三行 --paper* 重映射即可，子元素不用动。
 *
 *  ⚠ 加新卡片类时请一并加进下面这行，否则它的描边会走卡外那档。
 * ============================================================ */
.quiz-card, .q-card, .r-banner, .chart-box, .block, .tips, .more-item,
.paywall, .stat, .footer, .note, .modal-close,
.btn-sub, .btn-ghost, .icon-btn, .pill, .opt, .scale-item, .ent-bar {
  --paper:  var(--card-ink);
  --paper2: var(--card-ink2);
  --paper3: var(--card-ink3);
  --line:   var(--card-line);
  --line2:  var(--card-line2);
  color: var(--card-ink);
}

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

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

body {
  position: relative;
  min-height: 100%;
  background: var(--ink0);
  color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ============================================================
 *  动态彩虹背景（v3）· 源自 Uiverse.io by NicolasHoubion
 *
 *  原片段是 .container 上的多层渐变 + 两个伪元素反向旋转；
 *  这里把选择器改写到 body 的两个固定伪元素上，层数一一对应：
 *    ::before  本体 = 细斜线 + 四角光晕(25% / 75%) + 六色轮 + 兜底 conic
 *              自转 12s 一圈
 *    ::after   上层 = 黑纱 + 更密的第二组细斜线 + 反向旋转的六色薄纱
 *              反向自转 20s 一圈 + 7s 呼吸
 *
 *  ⚠ 速度是刻意调到这么快的，别随手改慢。
 *    实测：60s 一圈时每 2 秒只转 12°，背景区像素均值差只有 (1,1,2)/255
 *    —— 肉眼就是"根本没动"。现在 12s + 反向 20s + 呼吸三层叠加才有流动感。
 *    要调速度，先用定格法量一次差分量（见项目记忆里的验证台配方）。
 *
 *  亮度用 --rb-veil 一个值调（见 :root 注释）。
 * ============================================================ */

/* 两层共用几何：正方形，边长 146vmax，中心对齐视口中心。
   为什么非得这么大：要旋转到任意角度都盖满视口，必须满足
     「半边长 ≥ 视口对角线的一半」，而后者最大是 0.707 × vmax。
   取 146/2 = 73vmax 留了余量。
   （早先用 inset:-30% 是错的：正方形一转，四角就露出 body 的黑底 ——
     定格到 t=2s 时能看到左上、右下各缺一块对角形的黑洞。） */
body::before,
body::after {
  content: '';
  position: fixed;
  left: calc(50% - 73vmax);
  top: calc(50% - 73vmax);
  width: 146vmax;
  height: 146vmax;
  z-index: 0;
  pointer-events: none;
}

body::before {
  background:
    /* ① 细斜线纹理（原片段的 repeating-linear-gradient 细线） */
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .085) 0 1px,
      rgba(255, 255, 255, 0) 1px 18px),
    /* ② 四角光晕：品红 / 橙黄 / 紫 / 薄荷绿，落在视口的 25% / 75% 四角。
       位置为什么写成 calc：这一层是 146vmax 的超大正方形，用百分比定位
       会跑到视口外面去（试过，四团光全在屏幕外，画面只剩六色轮）。
       视口里的点 f 换算到本层坐标 = 73vmax + (f - 50%)×视口边长，
       于是 25% → calc(73vmax - 25vw)、75% → calc(73vmax + 25vw)。
       半径用固定 46vmax，等于"差不多半个视口"，这样光晕不会随层尺寸忽大忽小。 */
    radial-gradient(circle 46vmax at calc(73vmax - 25vw) calc(73vmax - 25vh),
      #ff006e 0%, rgba(255, 0, 110, .50) 34%, rgba(255, 0, 110, 0) 100%),
    radial-gradient(circle 46vmax at calc(73vmax + 25vw) calc(73vmax - 25vh),
      #ffbe0b 0%, rgba(255, 190, 11, .50) 34%, rgba(255, 190, 11, 0) 100%),
    radial-gradient(circle 46vmax at calc(73vmax - 25vw) calc(73vmax + 25vh),
      #8338ec 0%, rgba(131, 56, 236, .50) 34%, rgba(131, 56, 236, 0) 100%),
    radial-gradient(circle 46vmax at calc(73vmax + 25vw) calc(73vmax + 25vh),
      #06ffa5 0%, rgba(6, 255, 165, .50) 34%, rgba(6, 255, 165, 0) 100%),
    /* ③ 六色轮的"硬边"版本。原片段是一个 repeating-conic 六色轮，
       但硬边 60° 分界在整屏尺度上会变成一个很廉价的"风车"，
       所以这里把同一组六色压到 .20 的不透明度当辐条纹理用，
       底下真正决定画面的是 ④ 的平滑环。配色仍是那 6 个值，一个没换。 */
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255, 0, 110, .20) 0deg 60deg,
      rgba(131, 56, 236, .20) 60deg 120deg,
      rgba(58, 134, 255, .20) 120deg 180deg,
      rgba(6, 255, 165, .20) 180deg 240deg,
      rgba(255, 190, 11, .20) 240deg 300deg,
      rgba(251, 86, 7, .20) 300deg 360deg),
    /* ④ 平滑六色环：主彩虹。相邻色之间自动插值，转起来是流动的色带而不是色块 */
    conic-gradient(from 0deg at 50% 50%,
      #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607, #ff006e);
  /* 注意：这里刻意不用 background-blend-mode。
     实测 screen 混合会把六色轮和四团光晕洗成一片奶油色，
     再叠黑纱就整体发褐——普通 alpha 叠加才能保住彩虹的饱和度。
     另外：conic 的色块边界在整屏尺度上是硬线，加一层 blur 把它揉成柔和光带；
     模糊只加在这一层，::after 的细斜线要留着当纹理，不能被糊掉。 */
  filter: blur(30px) saturate(1.08);
  animation: rb-rotate 12s linear infinite;
}

body::after {
  background:
    /* ① 黑纱（最上层，负责正文可读性）。
       ⚠ 必须写成「上下同色的 linear-gradient」而不是 rgba() 色值：
          background 简写里 <bg-color> 只允许出现在**最后一层**，
          `background: rgba(...), conic-gradient(...)` 是非法语法，
          整条声明会被丢弃 —— 这层黑纱从 v3 起就一直没生效过
          （当时背景要鲜艳，所以没人发现；v5 要靠它压暗才暴露）。
          用 gradient 表达纯色层是合法的，且能留在最上面。 */
    linear-gradient(rgba(10, 11, 13, var(--rb-veil)), rgba(10, 11, 13, var(--rb-veil))),
    /* ② 第二组细斜线：比 ::before 那组更密，反向转起来和底层的线交叉 */
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .070) 0 1px,
      rgba(255, 255, 255, 0) 1px 14px),
    /* ③ 反向旋转的六色薄纱 —— 这是"一眼看出在动"的主要来源。
       不透明度要跟着 --rb-veil 走：黑纱越厚，这层就得越实，
       否则转动的幅度会被黑纱压到肉眼看不出（实测 .40 + veil .72
       时每秒均值差只有 2~5/255，接近本项目定的 10/255 下限）。 */
    conic-gradient(from 0deg at 50% 50%,
      rgba(255, 0, 110, .55), rgba(131, 56, 236, .55), rgba(58, 134, 255, .55),
      rgba(6, 255, 165, .55), rgba(255, 190, 11, .55), rgba(251, 86, 7, .55),
      rgba(255, 0, 110, .55));
  animation: rb-counter-rotate 16s linear infinite,
             rb-pulse 7s ease-in-out infinite alternate;
}

@keyframes rb-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes rb-counter-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* 轻微呼吸：让两层在交叉时还有明暗变化，不只是平移 */
@keyframes rb-pulse {
  from { opacity: .88; }
  to   { opacity: 1; }
}

/* 彩虹上、直接坐在背景上的文字（分区标题 / 页脚 / 说明 / 答题页顶栏）
   加一层投影托底，任何色相上都能读清 */
.section-title,
.more h4,
.q-top .title,
.q-top .count,
.nav-top .title {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .72), 0 0 3px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------
 * 「减少动态效果」= 减量，不是停用。
 *
 * 背景（血泪）：这台机器 Windows 的「显示动画」是关闭的
 * （SPI_GETCLIENTAREAANIMATION = 0），Edge 于是**一直**报
 * prefers-reduced-motion: reduce —— 也就是说下面这段是本机唯一生效的分支。
 *
 * 原来的写法是「打字机静态 + 彩虹降到 60s + 全局 animation-duration:.001ms」，
 * 三件事叠加的结果是整页完全静止，被用户连续退回两次：
 *   ①「我要的是背景动起来的」  ②「而且你这个打字的效果也没有动起来」
 * 用户看到的"没做"，其实是这里被静默关掉了。
 *
 * 所以这里**保留产品核心动效**（逐字打字 + 彩虹自转），只去掉最刺眼的
 * 闪烁与呼吸 —— 闪烁/高频脉动才是「减少动态效果」真正想避免的东西：
 *   · 光标不再闪（改为常亮）
 *   · 彩虹的呼吸层（rb-pulse）停用，旋转保留、略放慢
 *   · 不再做全局 animation-duration 归零（那一行是整页静止的主因）
 *
 * 取舍是有意的：动效本身是这个页面的产品特征，一个"从不动"的
 * 打字机/背景在这里等于功能缺失，而不是无障碍友好。
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* 减量：比标准速度慢一点（16s→22s / 16s→26s），但仍保留旋转。
     ⚠ 这里就是用户实际看到的那一支，别再把时长拉到几十秒 ——
     慢到一定程度就等于静态，前两轮被退货就是这个原因。 */
  body::before { animation-duration: 16s; }
  body::after { animation: rb-counter-rotate 26s linear infinite; }
  .hero-type .caret { animation: none; opacity: 1; }
  .conc-knob { box-shadow: 0 0 0 3px rgba(232, 123, 168, .30); }

  /* ⚠ 2026-10-06 删掉了原来那条
       * { transition-duration: .001ms !important; }
     它是这一支里唯一的全局杀手：本机浏览器恒报 reduce，等于把按钮反馈、
     进度条、数据条生长等全部 transition 静默归零 —— 用户看到的就是
     「我让你做的效果一个都没动」。减动的边界是「闪烁 / 高频脉动」，
     不是「所有过渡」。数据条与雷达的进度动画现在由 chart.js 的 rAF 驱动，
     并在 reduce 下自动把时长从 2000ms 降到 1100ms（减量，不消失）。 */
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 18px 48px;
}

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

.ic { display: block; flex: 0 0 auto; }

/* ================= 应用图标（assets/img/*.svg） =================
   黄铜方块 + 深炭黑图形，两层构造。尺寸由 <img> 的 width/height 决定。 */
.app-icon {
  display: block;
  flex: 0 0 auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* ================= 通用按钮 ================= */
.btn-main,
.btn-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--r-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .14) 34%, rgba(255, 255, 255, .06) 68%, rgba(255, 255, 255, 0) 94%),
    linear-gradient(180deg, var(--pink-hi) 0%, var(--pink) 46%, var(--pink-lo) 100%);
  box-shadow: var(--sh-pink);
  transition: transform .16s ease, filter .16s ease;
}

.btn-main:active,
.btn-pay:active { transform: translateY(1px) scale(.995); filter: brightness(1.05); }
.btn-main .ic { color: #FFFFFF; }

.btn-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--paper2);
  border: 1px solid rgba(91, 143, 214, .34);
  border-radius: var(--r-sm);
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 22px rgba(0, 0, 0, .40);
}

.btn-sub:active { transform: translateY(1px); }
.btn-sub .ic { color: var(--blue); }

.btn-text {
  display: block;
  width: 100%;
  padding: 13px 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--paper3);
}

.btn-text:active { color: var(--paper2); }

.icon-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  color: var(--paper2);
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

.icon-btn:active { color: var(--pink); }

/* ================= 小标题 =================
   v5：这组只剩「真正的小字眉标」（答题页码、更多测试标题）。
   卡片内的 h4 与分区标题都升级成显式标题，见各自规则。 */
.eyebrow,
.more h4,
.q-no {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--paper3);
}

/* 卡片内标题（v5）：白色粗体 + 粉色图标 —— 不再是字距很大的小眉标 */
.chart-box h4,
.block h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.1px;
  color: var(--card-ink);
}

.chart-box h4 .ic,
.block h4 .ic { color: var(--pink); }

/* ================= 首页 =================
   hero 从 v4 的「近白面板」改成一块普通深玻璃卡片（与下面所有卡片同族），
   靠四角透出的粉/蓝流光把首屏和普通卡片区分开 —— 对齐参考稿。 */
.hero {
  position: relative;
  margin: 16px 0 18px;
  padding: 20px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--card-line);
  background: var(--card-glow), var(--card-bg);
  box-shadow: var(--sh);
  color: var(--card-ink);
}

/* 卡片内对角的两团流光：左上品红、右下蓝。
   单独做一层伪元素是为了不干扰文字（文字包在 z-index:1 里） */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(92% 62% at 10% -6%, rgba(232, 123, 168, .26), rgba(232, 123, 168, 0) 70%),
    radial-gradient(84% 62% at 104% 106%, rgba(91, 143, 214, .22), rgba(91, 143, 214, 0) 72%);
  pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }

.hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

/* 品牌图标是粉方块 —— 给一层粉光晕，让它从深底上跳出来 */
.hero-brand .app-icon,
.b-top .app-icon,
.quiz-card .app-icon,
.more-item .app-icon {
  filter: drop-shadow(0 8px 20px rgba(232, 123, 168, .40));
}

.brand-txt { display: flex; flex-direction: column; min-width: 0; }

.brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--card-ink);
}

/* 品牌名下面那行大写英文小标签（参考稿里有） */
.brand-en {
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .17em;
  color: var(--paper3);
  white-space: nowrap;
}

/* ---- 打字机两行（v5 对齐参考稿：上一行灰色小字，下一行白色超粗） ---- */
.hero-type { margin: 14px 0 0; }

.hero-type .tl {
  display: block;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "HarmonyOS Sans SC", "MiSans", "OPPO Sans", "Source Han Sans SC",
               "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.hero-type .tl:first-child {
  min-height: 1.32em;
  font-size: 17px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--paper2);
}

.hero-type .tl:last-child {
  margin-top: 1px;
  min-height: 1.2em;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.8px;
  color: var(--card-ink);
}

.hero-type .caret {
  display: inline-block;
  width: 3px;
  height: 1.02em;
  margin-left: 4px;
  border-radius: 2px;
  background: var(--pink);
  box-shadow: 0 0 8px rgba(232, 123, 168, .9);
  vertical-align: -.13em;
  animation: caret-blink 1.06s steps(1, end) infinite;
}

@keyframes caret-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.hero p {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.82;
  color: var(--paper2);
}

/* 胶囊标签（英文大写 + 中文）：左侧带一颗会发光的粉点 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 6px 13px 6px 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--paper2);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.pill::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px rgba(232, 123, 168, .9);
}

/* ---- 分区标题（参考稿：粉色竖条 + 白字 + 向右淡出的细横线） ----
   它直接坐在彩虹上，没有卡片承托，所以用最亮的一级文字色。 */
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 13px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--paper);
}

.section-title::before {
  content: '';
  flex: 0 0 auto;
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--pink-hi), var(--pink));
  box-shadow: 0 0 10px rgba(232, 123, 168, .8);
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0));
}

.stat-row { display: flex; gap: 10px; margin: 20px 0 4px; }

.stat {
  flex: 1;
  padding: 16px 6px 14px;
  text-align: center;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: var(--sh-sm);
}

.stat b {
  display: block;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -.5px;
  color: var(--pink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(232, 123, 168, .55);
}

/* 参考稿里第三张数字卡是蓝的（16 / 6 粉、3 蓝） */
.stat:nth-child(3) b { color: var(--blue); text-shadow: 0 2px 16px rgba(91, 143, 214, .55); }

.stat span { font-size: 11.5px; letter-spacing: .02em; color: var(--paper3); }

/* 测试卡（参考稿：图标块 + 标题/描述 + 全宽分隔线 + 粉胶囊按钮） */
.quiz-card {
  display: flex;
  flex-wrap: wrap;          /* 让 .meta 能占满一整行，画全宽分隔线 */
  align-items: flex-start;
  gap: 14px;
  padding: 17px 16px 15px;
  margin-top: 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-line);
  background: var(--card-glow), var(--card-bg);
  box-shadow: var(--sh);
  transition: transform .18s ease;
}

.quiz-card:active { transform: scale(.988); }

.quiz-card .txt { flex: 1; min-width: 0; }

.quiz-card h3 {
  margin: 2px 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--card-ink);
}

.quiz-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.66;
  color: var(--paper2);
}

.quiz-card .meta {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--card-line);
}

/* 「开始测试」从 v4 的文字链接升级成粉胶囊按钮 */
.quiz-card .go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #FFFFFF;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pink-hi) 0%, var(--pink) 60%, var(--pink-lo) 100%);
  box-shadow: 0 8px 18px rgba(232, 123, 168, .40), inset 0 1px 0 rgba(255, 255, 255, .38);
}

.quiz-card .go .ic { width: 15px; height: 15px; color: #FFFFFF; }

.quiz-card .done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--paper3);
}

.quiz-card .done .ic { width: 13px; height: 13px; }
.quiz-card .done.is-done { color: var(--pink); font-weight: 700; }

/* 小贴士（参考稿：粉 / 蓝交替的实心数字圆点 + 白标题 + 灰描述） */
.tips {
  counter-reset: tip;
  padding: 18px 18px 4px;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-line);
  background: var(--card-glow), var(--card-bg);
  box-shadow: var(--sh);
}

.tips ul { margin: 0; padding: 0; list-style: none; }

.tips li {
  position: relative;
  counter-increment: tip;
  padding-left: 44px;
  margin-bottom: 19px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper2);
}

.tips li:last-child { margin-bottom: 15px; }

/* 数字圆点：粉底（偶数项蓝底），白色数字 + 同色光晕 */
.tips li::before {
  content: counter(tip);
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--pink-hi) 0%, var(--pink) 62%, var(--pink-lo) 100%);
  box-shadow: 0 7px 16px rgba(232, 123, 168, .42), inset 0 1px 0 rgba(255, 255, 255, .40);
}

.tips li:nth-child(even)::before {
  background: linear-gradient(180deg, var(--blue-hi) 0%, var(--blue) 62%, var(--blue-lo) 100%);
  box-shadow: 0 7px 16px rgba(91, 143, 214, .42), inset 0 1px 0 rgba(255, 255, 255, .40);
}

.tips li b {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.1px;
  color: var(--card-ink);
}

/* 脚注卡（首页底部 / 结果页底部）：深玻璃小卡，居中两行说明 */
.footer {
  margin-top: 26px;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid var(--card-line);
  background: var(--card-bg);
  box-shadow: var(--sh-sm);
  font-size: 12px;
  line-height: 1.9;
  text-align: center;
  color: var(--paper3);
}

/* ================= 答题页 ================= */
.q-head { padding: 20px 0 0; }

.q-top { display: flex; align-items: center; gap: 11px; }

.q-top .title {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--paper);
}

.q-top .count {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--paper3);
  font-variant-numeric: tabular-nums;
}

.q-top .count b { font-size: 15px; font-weight: 800; color: var(--pink); }
.q-top .count i { font-style: normal; margin: 0 1px; }

.bar {
  height: 3px;
  margin-top: 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--blue));
  box-shadow: 0 0 12px rgba(232, 123, 168, .55);
  transition: width .32s cubic-bezier(.4, 0, .2, 1);
}

.q-card {
  padding: 22px 20px;
  margin-top: 16px;
  min-height: 300px;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-line);
  background: var(--card-glow), var(--card-bg);
  box-shadow: var(--sh);
}

.q-no { margin-bottom: 16px; }

.q-text {
  font-size: 20px;
  line-height: 1.52;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--paper);
}

.q-hint {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--paper3);
}

/* 5 点量表 */
.scale-row {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.scale-item {
  flex: 1;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .14s ease, background .16s ease, border-color .16s ease;
}

.scale-item:active { transform: scale(.96); }

.scale-item .n {
  font-size: 17px;
  font-weight: 800;
  color: var(--paper2);
  font-variant-numeric: tabular-nums;
}

.scale-item .l {
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--paper3);
}

.scale-item.on {
  border-color: rgba(255, 255, 255, .40);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .14) 34%, rgba(255, 255, 255, .06) 68%, rgba(255, 255, 255, 0) 94%),
    linear-gradient(180deg, var(--pink-hi) 0%, var(--pink) 46%, var(--pink-lo) 100%);
  box-shadow: var(--sh-pink);
}

.scale-item.on .n { color: #FFFFFF; }
.scale-item.on .l { color: rgba(255, 255, 255, .86); }

.scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--paper3);
}

/* 情境题选项 */
.opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .14s ease, border-color .16s ease;
}

.opt:active { transform: scale(.99); }

.opt .dot {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .24);
  color: transparent;
}

.opt .dot .ic { width: 11px; height: 11px; }

.opt.on {
  border-color: rgba(232, 123, 168, .55);
  background: linear-gradient(180deg, rgba(232, 123, 168, .18), rgba(91, 143, 214, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 3px rgba(232, 123, 168, .13);
}

.opt.on .dot {
  border-color: var(--pink);
  background: var(--pink);
  color: #FFFFFF;
}

.q-nav { display: flex; gap: 10px; margin-top: 14px; }

.btn-ghost {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--paper2);
  border: 1px solid rgba(91, 143, 214, .34);
  border-radius: var(--r-sm);
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 22px rgba(0, 0, 0, .40);
}

.btn-ghost .ic { color: var(--blue); }

.btn-ghost:disabled {
  color: var(--paper3);
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .09);
  opacity: 1;
  box-shadow: none;
  cursor: default;
}

.btn-ghost:disabled .ic { color: var(--paper3); }

/* ================= 结果页 ================= */
.nav-top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 0 0;
}

.nav-top .title {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--paper);
}

.r-banner {
  margin-top: 16px;
  padding: 22px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-line);
  background: var(--card-glow), var(--card-bg);
  box-shadow: var(--sh);
}

.r-banner .b-top { display: flex; align-items: center; gap: 12px; }

.r-banner .kind {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--paper3);
}

.r-banner .kind b {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--paper2);
}

.r-banner .type {
  margin-top: 18px;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.8px;
  color: var(--card-ink);
}

.r-banner .en {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink);
}

.r-banner .tag {
  margin-top: 13px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--paper2);
}

.chart-box {
  padding: 18px 16px 10px;
  margin-top: 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-line);
  background: var(--card-glow), var(--card-bg);
  box-shadow: var(--sh);
}

.chart-box .cs {
  margin: -4px 0 6px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--paper3);
}

#radar { display: block; width: 100%; height: auto; }

.block {
  padding: 18px;
  margin-top: 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-line);
  background: var(--card-glow), var(--card-bg);
  box-shadow: var(--sh);
}

.block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--paper2);
}

.block ul { margin: 0; padding: 0; list-style: none; }

.block li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--paper2);
}

.block li:last-child { margin-bottom: 0; }

.block li::before {
  content: '';
  position: absolute;
  left: 0; top: .64em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 3px rgba(232, 123, 168, .16);
}

.block .hl { color: var(--pink); font-weight: 700; }

/* 付费墙 */
.locked { position: relative; margin-top: 12px; }

.locked .content {
  max-height: 210px;
  overflow: hidden;
  filter: blur(6px);
  opacity: .55;
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, rgba(0, 0, 0, 0) 100%);
}

.locked .content .block { margin-top: 12px; }

.paywall {
  position: relative;
  margin-top: -66px;
  padding: 24px 20px 22px;
  text-align: center;
  border-radius: var(--r-lg);
  border: 1px solid var(--card-line2);
  /* ⚠ 这里必须用不透明的 --card-solid：下面压着被模糊 + 半透明的锁定正文，
     用半透明底会把那层糊字透出来 */
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(232, 123, 168, .22), rgba(232, 123, 168, 0) 66%),
    var(--card-solid);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 26px 60px rgba(0, 0, 0, .66);
}

.paywall .lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 13px;
  border-radius: 14px;
  color: var(--pink);
  border: 1px solid rgba(232, 123, 168, .38);
  background: linear-gradient(180deg, rgba(232, 123, 168, .22), rgba(91, 143, 214, .12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.paywall .pt {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--paper);
}

.paywall .pd {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.72;
  color: var(--paper2);
}

.paywall .btn-pay { margin-top: 18px; }

.unlock-row {
  display: flex;
  gap: 8px;
  margin-top: 11px;
}

.unlock-row input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 15px;
  font-family: inherit;
  font-size: 14.5px;
  letter-spacing: .06em;
  color: var(--paper);
  border-radius: var(--r-sm);
  border: 1px solid var(--card-line2);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
  outline: none;
}

.unlock-row input::placeholder { color: var(--paper3); letter-spacing: .04em; }

.unlock-row input:focus {
  border-color: rgba(232, 123, 168, .60);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 0 0 3px rgba(232, 123, 168, .18);
}

.unlock-row button {
  flex: 0 0 auto;
  min-width: 84px;
  padding: 0 18px;
  font-size: 14.5px;
  font-weight: 800;
  color: #FFFFFF;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .08) 46%, rgba(255, 255, 255, 0) 90%),
    linear-gradient(180deg, var(--pink-hi), var(--pink));
  box-shadow: var(--sh-pink);
}

.unlock-row button:active { transform: translateY(1px); }

.unlock-msg {
  margin-top: 11px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--paper3);
}

.unlock-msg.err { color: #E08A6E; }
.unlock-msg.ok  { color: var(--pink); }

/* 操作区 */
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* 其他测试 */
.more { margin-top: 28px; }

.more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  margin-bottom: 10px;
  border-radius: var(--r);
  border: 1px solid var(--card-line);
  background: var(--card-bg);
  box-shadow: var(--sh-sm);
  transition: transform .16s ease;
}

.more-item:active { transform: scale(.99); }

.more-item .n {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--paper);
}

.more-item .n small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--paper3);
}

.more-item .a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
}

.more-item .a .ic { width: 15px; height: 15px; color: var(--pink); }

.note {
  margin-top: 26px;
  padding: 14px 15px;
  border-radius: 14px;
  border: 1px solid var(--card-line);
  background: var(--card-bg);
  box-shadow: var(--sh-sm);
  font-size: 11.5px;
  line-height: 1.85;
  text-align: center;
  color: var(--paper3);
}

/* ================= 海报弹层 ================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  background: rgba(6, 7, 9, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.modal.show { display: flex; }

.modal-inner {
  width: 100%;
  max-width: 340px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  overflow-y: auto;
}

.modal-inner img,
.modal-inner canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .8);
}

.modal-tip {
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--paper3);
}

.modal-close {
  width: 100%;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--paper2);
  border-radius: var(--r-sm);
  border: 1px solid var(--line2);
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ================= Toast ================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 80;
  transform: translate(-50%, 14px);
  max-width: 82vw;
  padding: 12px 20px;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--paper);
  border-radius: var(--r-sm);
  border: 1px solid var(--line2);
  background: linear-gradient(180deg, rgba(30, 34, 40, .98), rgba(16, 18, 22, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 20px 48px rgba(0, 0, 0, .8);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
 *  2026-10-06 新增：授权三态 + 报告末尾的六维分布可视化
 *
 *  数据条 / 位置点 / 集中度游标的位置都由 chart.js 的 rAF 驱动逐帧写入，
 *  所以这里只声明「长什么样」，不写 transition ——
 *  两套动画叠在一起会互相打架，而且 reduce 分支下会有一支失效。
 *  成长节奏统一在 result.html 的 step 函数里（2.0s 强 ease-out，
 *  与参考视频逐帧实测的曲线一致）。
 * ============================================================ */

/* ---- 授权状态条（结果页付费区上方） ---- */
.ent-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: var(--r);
  border: 1px solid var(--card-line);
  background: var(--card-bg);
  box-shadow: var(--sh-sm);
}

.ent-bar .ic { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--pink); }

.ent-bar b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.1px;
  color: var(--card-ink);
}

.ent-bar span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.64;
  color: var(--paper2);
}

.ent-bar.is-open {
  border-color: rgba(232, 123, 168, .40);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(232, 123, 168, .16), rgba(232, 123, 168, 0) 68%),
    var(--card-bg);
}

.ent-bar.is-seen { border-color: rgba(91, 143, 214, .34); }
.ent-bar.is-seen .ic { color: var(--blue); }

/* ---- 首页卡片：状态徽标 + 双按钮 ---- */
.st {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--paper2);
  border: 1px solid var(--card-line2);
  background: rgba(255, 255, 255, .05);
}

.st .ic { width: 12px; height: 12px; }

.st.is-bought {
  color: var(--pink);
  border-color: rgba(232, 123, 168, .45);
  background: rgba(232, 123, 168, .11);
}

.st.is-viewed {
  color: var(--blue);
  border-color: rgba(91, 143, 214, .42);
  background: rgba(91, 143, 214, .11);
}

.quiz-card .acts {
  flex: 0 0 100%;
  display: flex;
  gap: 9px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--card-line);
}

.quiz-card .acts > * { flex: 1 1 0; min-width: 0; }

.btn-main.sm,
.btn-sub.sm {
  min-height: 42px;
  padding: 0 10px;
  gap: 6px;
  font-size: 13.5px;
  border-radius: 999px;
}

.btn-main.sm .ic,
.btn-sub.sm .ic { width: 16px; height: 16px; }

/* ---- 结果页操作区下面那句解释 ---- */
.act-hint {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.62;
  text-align: center;
  color: var(--paper3);
}

/* ---- 付费墙：本次购买的适用范围 / 上一次购买不适用时的解释 ---- */
.paywall .scope,
.paywall .stale {
  margin-top: 11px;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 11.5px;
  line-height: 1.64;
  text-align: left;
  color: var(--paper2);
}

.paywall .scope {
  border: 1px solid var(--card-line);
  background: rgba(255, 255, 255, .045);
}

/* 上一次的购买不适用于本次新结果 —— 用粉边把它和上面那条中性说明区分开 */
.paywall .stale {
  border: 1px solid rgba(232, 123, 168, .32);
  background: rgba(232, 123, 168, .10);
}

.paywall .stale b { color: var(--pink); font-weight: 800; }

/* ================= 六维分布：强弱排序条 ================= */
.rank-list { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }

.rk { display: flex; align-items: center; gap: 9px; }

.rk-l {
  flex: 0 0 62px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.1px;
  white-space: nowrap;
  color: var(--paper2);
}

.rk.is-top .rk-l { color: var(--card-ink); }

.rk-t {
  position: relative;
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .42);
  overflow: hidden;
}

/* 均匀基准线：六维平均时每维应占的位置 */
.rk-t .rk-avg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(255, 255, 255, .38);
}

.rk-f {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-hi), var(--pink));
  box-shadow: 0 0 10px rgba(232, 123, 168, .45);
}

.rk.is-rest .rk-f {
  background: linear-gradient(90deg, rgba(91, 143, 214, .9), rgba(91, 143, 214, .5));
  box-shadow: none;
}

.rk-v {
  flex: 0 0 40px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--pink);
}

.rk.is-rest .rk-v { color: var(--paper2); }

/* ================= 六维分布：偏向与回避（对比均匀分布） ================= */
.dv-head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 9px;
  padding-left: 71px;
  padding-right: 51px;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--paper3);
}

.dv-row { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.dv-row:last-child { margin-bottom: 0; }

.dv-l {
  flex: 0 0 62px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.1px;
  white-space: nowrap;
  color: var(--paper2);
}

.dv-t { position: relative; flex: 1; height: 14px; }

.dv-mid {
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 0;
  border-left: 1px dashed rgba(255, 255, 255, .30);
}

.dv-b {
  position: absolute;
  top: 3px;
  height: 8px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(232, 123, 168, .45), var(--pink));
  box-shadow: 0 0 10px rgba(232, 123, 168, .38);
}

.dv-row.is-lo .dv-b {
  background: linear-gradient(90deg, var(--blue), rgba(91, 143, 214, .45));
  box-shadow: 0 0 10px rgba(91, 143, 214, .34);
}

.dv-v {
  flex: 0 0 42px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--pink);
}

.dv-row.is-lo .dv-v { color: var(--blue); }

/* ================= 六维分布：集中度 ================= */
.conc-stats { display: flex; gap: 9px; margin-top: 2px; }

.conc-stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 13px 4px 11px;
  text-align: center;
  border-radius: 14px;
  border: 1px solid var(--card-line);
  background: rgba(255, 255, 255, .045);
}

.conc-stat b {
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  color: var(--pink);
}

.conc-stat:nth-child(2) b { color: var(--blue); }
.conc-stat:nth-child(3) b { color: var(--card-ink); }

.conc-stat span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--paper3);
}

.conc-gauge {
  position: relative;
  height: 8px;
  margin: 20px 2px 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(91, 143, 214, .60), rgba(232, 123, 168, .80));
}

.conc-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(232, 123, 168, .30), 0 4px 12px rgba(0, 0, 0, .55);
}

.conc-bands {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--paper3);
}

.conc-verdict {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.74;
  color: var(--paper2);
}

.conc-verdict b { color: var(--pink); font-weight: 800; }

/* ================= 宽屏（平板 / 桌面预览） ================= */
@media (min-width: 620px) {
  .wrap { max-width: 520px; padding-bottom: 56px; }
  .hero-type .tl:first-child { font-size: 18px; }
  .hero-type .tl:last-child { font-size: 37px; }
  .r-banner .type { font-size: 40px; }
}

/* 窄屏（iPhone SE 等）：一行 6 个汉字 + 光标不能折行，缩一档 */
@media (max-width: 360px) {
  .hero-type .tl:last-child { font-size: 29px; }
}