/* ============================================================
   五行25型测试 · H5 设计系统
   品牌色：深蓝紫渐变 + 金色强调（与剪辑素材视觉规范一致）
   ============================================================ */

:root{
  --ink:      #16132B;
  --ink2:     #4A4761;
  --ink3:     #8C89A2;
  --ink4:     #B3B0C4;
  --line:     #E9E7F3;
  --line2:    #F3F1FA;
  --bg:       #F5F4FB;
  --white:    #FFFFFF;

  --primary:  #4B3FA8;
  --primary2: #6C5CE7;
  --primary3: #8B7BF0;
  --psoft:    #EEEBFB;

  --gold:     #B9913C;
  --gold2:    #E7C878;
  --goldsoft: #FBF4E2;

  --red:      #E24C4C;
  --red2:     #B7231E;

  /* ---- 五行五色（2026-09-23 新增）----------------------------
     传统五行配五色：木青 · 火赤 · 土黄 · 金白 · 水黑。
     落地三处**必须知道的修正**（不是随手调的）：
       ① 「金」传统配**白** —— 白底卡片上白色不可见，统一改用银灰表意；
       ② 「土」传统配**黄** —— 但品牌金（--gold #B9913C / --gold2 #E7C878）
          是*装饰色*、五行土是*语义色*，两者若同为黄必然打架 ⇒ 土取赭黄偏棕拉开；
       ③ 五色只作**色块 / 边条 / 色点**（小面积、饱和明确），
          不与金色文字同角色出现，否则两套色系会互相削弱。
     命名：--wx-<五行>（白底用）/ -d（深底用）/ -s（白底浅底用）
     ⚠️ 这里的色值与 tools/wuxing_palette.py 的 HEX **必须逐字一致**
        —— check_h5 有一条断言比对两边，防的就是"改了一边忘了另一边"。
     用处：guide 五行卡 · index 五色环 · report 型卡 · 结果海报（主行定强调色）
     ---------------------------------------------------------- */
  --wx-jin:   #A9A6B8;  --wx-jin-d:  #CFCBDD;  --wx-jin-s:  #F3F2F7;
  --wx-mu:    #2E9E68;  --wx-mu-d:   #45C489;  --wx-mu-s:   #E9F5EF;
  --wx-shui:  #2E7CB8;  --wx-shui-d: #54A6E0;  --wx-shui-s: #E9F2FA;
  --wx-huo:   #DA4A3C;  --wx-huo-d:  #F0685A;  --wx-huo-s:  #FBECEA;
  --wx-tu:    #A9713E;  --wx-tu-d:   #D3993F;  --wx-tu-s:   #F8F1E9;

  --r:        14px;
  --shadow:   0 6px 20px rgba(22,19,43,.08);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }

body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:radial-gradient(1100px 620px at 50% -12%,#3A3170 0%,#292255 52%,#1C1740 100%);
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:26px 12px 40px;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- 外壳说明条（不属于 H5 本体） ---------- */
/* ⚠️ 2026-09-22：默认全站隐藏。站点已备案并对外，说明条里含示例 token、演示链接、
   「示例数据 / 上线前须接后台真实统计」等内部信息，原先只在 ≤560px / pointer:coarse
   隐藏 ⇒ 桌面浏览器（含微信 PC 端）打开会直接露出来。
   需要查看时：URL 加 ?proto=1；本地 file:// 与 localhost 自动开（见各页 head 的开关脚本）。 */
.proto-note{
  display:none;
  color:#B9B4D6; font-size:12.5px; letter-spacing:.2px;
  margin-bottom:14px; text-align:center; line-height:1.7; max-width:520px;
}
html.proto-on .proto-note{ display:block; }
.proto-note b{ color:#E7C878; font-weight:600; }

/* ---------- 手机壳 ---------- */
.phone{
  width:390px; height:844px;
  background:var(--bg);
  border-radius:44px;
  position:relative; overflow:hidden;
  box-shadow:0 44px 90px rgba(0,0,0,.6), 0 0 0 11px #1C1834, 0 0 0 13px #302B52;
  flex:0 0 auto;
}

/* ---------- 顶栏 ---------- */
.appbar{
  position:absolute; top:0; left:0; right:0; height:64px;
  background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  z-index:30;
}
.appbar::before{
  content:"×"; position:absolute; left:18px; top:14px;
  font-size:22px; line-height:1; color:var(--ink2); font-weight:300;
}
.appbar::after{
  content:"···"; position:absolute; right:16px; top:12px;
  font-size:19px; line-height:1; color:var(--ink2); letter-spacing:1px;
}
.appbar .ab-title{ font-size:15px; font-weight:600; margin-top:-9px; }
.appbar .ab-sub{ position:absolute; bottom:9px; font-size:11.5px; color:var(--ink3); }

/* ---------- 滚动区 ---------- */
.scroll{
  position:absolute; top:64px; left:0; right:0; bottom:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:0 0 40px;
}
.scroll::-webkit-scrollbar{ width:0; }

/* ---------- 报告页头部 ---------- */
.rp-head{ padding:26px 24px 0; text-align:center; }
.rp-head h1{
  font-size:19px; line-height:1.5; font-weight:700; margin:0 0 12px;
  letter-spacing:.2px;
}
.rp-meta{ font-size:12.5px; color:var(--ink3); margin-bottom:6px; }
.rp-rec{ font-size:12.5px; color:var(--ink3); display:flex; align-items:center; justify-content:center; gap:7px; }
.rp-rec b{ color:var(--ink2); font-weight:600; letter-spacing:.4px; font-variant-numeric:tabular-nums; }
.rp-rec .copy{
  border:1px solid var(--line); background:#fff; color:var(--primary);
  font-size:11.5px; padding:2px 8px; border-radius:20px; cursor:pointer;
  font-family:inherit;
}
.rp-rec .copy:active{ background:var(--psoft); }

/* ---------- 生成进度条 ---------- */
.genbar{
  margin:22px 24px 0; height:9px; border-radius:20px;
  background:#E4E0F4; overflow:hidden; position:relative;
}
.genbar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#6C5CE7,#4B3FA8 62%,#B9913C);
  border-radius:20px; transition:width .45s ease;
}
.genbar::after{
  content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:sheen 1.5s infinite;
}
@keyframes sheen{ to{ left:110%; } }
.genbar.done::after{ display:none; }
.genbar.done i{ background:linear-gradient(90deg,#6C5CE7,#4B3FA8); }

.genbar-hint{
  text-align:center; font-size:11.5px; color:var(--ink3);
  margin:9px 24px 0; height:16px;
}

/* ---------- 免费档内容（弹层关闭后可见） ---------- */
.free-wrap{ padding:22px 20px 0; }
.typecard{
  border-radius:18px; padding:18px 18px 16px;
  background:linear-gradient(140deg,#55499F 0%,#403788 58%,#332B72 100%);
  color:#fff; position:relative; overflow:hidden;
  box-shadow:0 12px 28px rgba(38,32,72,.32);
}
.typecard::after{
  content:""; position:absolute; right:-42px; top:-42px; width:150px; height:150px;
  border-radius:50%; background:radial-gradient(circle,rgba(231,200,120,.30),transparent 62%);
}
/* 型卡按**主行**取色（2026-09-23）：右上角光晕 + "你的五行类型"小标签。
   用 -d（深底亮色版）—— 型卡是深紫底，主色版本在这个底色上会发闷。
   光晕的 rgba 就是各自 -d 值加 .30 透明度（CSS 变量没法动态拼 alpha，只能写死）。 */
.typecard[data-el="金"]::after{ background:radial-gradient(circle,rgba(207,203,221,.30),transparent 62%); }
.typecard[data-el="木"]::after{ background:radial-gradient(circle,rgba(69,196,137,.30),transparent 62%); }
.typecard[data-el="水"]::after{ background:radial-gradient(circle,rgba(84,166,224,.30),transparent 62%); }
.typecard[data-el="火"]::after{ background:radial-gradient(circle,rgba(240,104,90,.30),transparent 62%); }
.typecard[data-el="土"]::after{ background:radial-gradient(circle,rgba(211,153,63,.30),transparent 62%); }
.typecard[data-el="金"] .tc-k{ color:var(--wx-jin-d); }
.typecard[data-el="木"] .tc-k{ color:var(--wx-mu-d); }
.typecard[data-el="水"] .tc-k{ color:var(--wx-shui-d); }
.typecard[data-el="火"] .tc-k{ color:var(--wx-huo-d); }
.typecard[data-el="土"] .tc-k{ color:var(--wx-tu-d); }
.typecard .tc-k{ font-size:11.5px; color:#CFC7EC; letter-spacing:2px; }
.typecard .tc-name{ font-size:25px; font-weight:700; margin:7px 0 4px; letter-spacing:1px; }
.typecard .tc-kw{ display:flex; gap:7px; margin:11px 0 0; }
.typecard .tc-kw span{
  font-size:11.5px; padding:3px 10px; border-radius:20px;
  background:rgba(255,255,255,.14); border:1px solid rgba(231,200,120,.42); color:#F3E6C0;
}
.typecard .tc-sum{
  font-size:13px; line-height:1.85; color:#E3DFF5; margin-top:14px;
  border-top:1px solid rgba(255,255,255,.13); padding-top:13px;
}

.block-title{
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:600; color:var(--ink);
  margin:26px 0 12px;
}
.block-title::before{
  content:""; width:3px; height:15px; border-radius:2px;
  background:linear-gradient(180deg,var(--primary2),var(--gold));
}

.sec-list{ display:flex; flex-direction:column; gap:9px; }
.sec-item{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; font-size:13.5px; color:var(--ink2);
  display:flex; align-items:center; gap:11px;
}
.sec-item .no{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px;
  background:var(--psoft); color:var(--primary);
  font-size:11.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.sec-item.locked{ background:#FAF9FE; color:var(--ink4); }
.sec-item.locked .no{ background:#F1EFF8; color:var(--ink4); }
.sec-item .lock{ margin-left:auto; font-size:11.5px; color:var(--gold); }

/* 「结果海报」是可交付物，用金色边把它从清单里挑出来、并做成入口 */
.sec-item.open{
  border-color:#E7C878; cursor:pointer;
  background:linear-gradient(180deg,#FFFDF6,#fff);
}
.sec-item.open .no{ background:linear-gradient(135deg,#E7C878,#B9913C); color:#fff; }
.sec-item.open .go{ margin-left:auto; font-size:12px; font-weight:600; color:var(--gold); }

/* 免费档底部的出图入口 */
.poster-btn{
  width:100%; margin-top:14px; border:1px solid #E7C878; border-radius:14px;
  background:linear-gradient(180deg,#FFFDF6,#fff);
  padding:13px 15px; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:12px; text-align:left;
}
.poster-btn:active{ background:#FBF4E2; }
.poster-btn .pi{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#2B2246;
  font-size:17px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.poster-btn .pt{ flex:1; font-size:14px; font-weight:600; color:var(--ink); line-height:1.4; }
.poster-btn .pt b{ display:block; font-size:11px; font-weight:400; color:var(--ink3); margin-top:2px; }
.poster-btn .pg{ flex:0 0 auto; font-size:12px; font-weight:600; color:var(--gold); }

/* ============================================================
   付费墙（对标结果页的核心：从底部升起的半屏弹层）
   ============================================================ */
.paywall{
  position:absolute; left:0; right:0; bottom:0; top:15%;
  background:#fff; border-radius:24px 24px 0 0;
  display:flex; flex-direction:column;
  box-shadow:0 -12px 46px rgba(20,16,44,.28);
  z-index:40;
  transition:transform .34s cubic-bezier(.32,.72,.35,1);
}
.paywall.hidden{ transform:translateY(104%); }

.pw-body{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:14px 18px 10px;
}
.pw-body::-webkit-scrollbar{ width:0; }

.pw-top{
  display:flex; align-items:center; justify-content:space-between;
  font-size:15px; color:var(--ink3); margin-bottom:14px;
}
.pw-top .back{ color:var(--primary2); }

.pw-rec{
  text-align:center; font-size:12.5px; color:var(--ink3);
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.pw-rec b{ color:var(--ink2); font-weight:600; letter-spacing:.4px; font-variant-numeric:tabular-nums; }
.pw-rec .copy{
  border:1px solid var(--line); background:#fff; color:var(--primary);
  font-size:11.5px; padding:2px 8px; border-radius:20px; cursor:pointer; font-family:inherit;
}

.pw-timer{
  text-align:center; font-size:13.5px; color:var(--ink2); margin:12px 0 16px;
}
.pw-timer b{
  color:var(--red); font-weight:700; font-size:15px;
  font-variant-numeric:tabular-nums; letter-spacing:.5px;
}

/* ---------- 三档卡片 ---------- */
.pw-tiers{ display:flex; gap:8px; align-items:stretch; }

.tier{
  flex:1 1 0; position:relative;
  border:1.5px solid var(--line); border-radius:13px;
  background:#fff; padding:15px 8px 13px; text-align:center;
  cursor:pointer; transition:.18s;
  display:flex; flex-direction:column;
}
.tier .t-title{ font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:9px; }
.tier .t-price{
  font-size:19px; font-weight:700; color:var(--ink);
  letter-spacing:-.3px; line-height:1.15;
}
.tier .t-origin{
  font-size:11.5px; color:var(--ink4); text-decoration:line-through;
  margin-top:3px; height:15px;
}
.tier .t-desc{
  font-size:11px; color:var(--ink3); line-height:1.5; margin-top:9px;
}
.tier .t-check{
  position:absolute; top:-1px; right:-1px;
  width:19px; height:19px; border-radius:0 13px 0 11px;
  background:var(--primary2); color:#fff; font-size:11.5px;
  display:none; align-items:center; justify-content:center;
}
.tier.selected{ border-color:var(--primary2); background:#FCFBFF; }
.tier.selected .t-check{ display:flex; }
.tier.selected .t-price{ color:var(--primary); }

/* 推荐档：深蓝紫渐变 + 金边 */
.tier.recommend{
  border-color:#D9C078;
  background:linear-gradient(150deg,#3A3172 0%,#241E45 100%);
}
.tier.recommend .t-title{ color:#EFEAFF; }
.tier.recommend .t-price{ color:#F5E3AE; }
.tier.recommend .t-origin{ color:#9C93C4; }
.tier.recommend .t-desc{ color:#BDB6DC; }
.tier.recommend .t-check{
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#3A3172; font-weight:700;
}
.tier.recommend .t-badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  white-space:nowrap;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#33264C;
  font-size:10.5px; font-weight:700; padding:4px 11px; border-radius:20px;
  box-shadow:0 3px 10px rgba(185,145,60,.45);
}
.tier .t-ribbon{
  position:absolute; right:-4px; bottom:8px;
  background:linear-gradient(135deg,#E24C4C,#B7231E); color:#fff;
  font-size:10px; padding:2.5px 8px; border-radius:4px 0 0 4px;
}

/* ---------- 社交证明 ---------- */
.pw-social{
  text-align:center; font-size:12px; color:var(--ink3); margin:16px 0 12px;
}
.pw-social .demo{
  font-size:10.5px; color:var(--gold); border:1px solid var(--gold2);
  border-radius:20px; padding:1px 6px; margin-left:6px;
}

/* ---------- 主按钮 ---------- */
.pw-unlock{
  width:100%; border:0; font-family:inherit;
  height:52px; border-radius:28px;
  background:linear-gradient(135deg,#7A69F0 0%,#4B3FA8 100%);
  color:#fff; font-size:16.5px; font-weight:600; letter-spacing:1px;
  cursor:pointer; box-shadow:0 10px 24px rgba(75,63,168,.35);
  transition:transform .12s;
}
.pw-unlock:active{ transform:scale(.985); }
.pw-unlock.paying{ opacity:.72; pointer-events:none; }

.pw-help{
  text-align:center; font-size:11.5px; color:var(--ink3);
  line-height:1.9; margin:12px 0 0;
}
.pw-help a{ color:var(--primary2); text-decoration:none; border-bottom:1px solid rgba(108,92,231,.35); }

/* ---------- 权益清单 ---------- */
.pw-bt{
  text-align:center; font-size:13px; font-weight:600; color:var(--gold);
  margin:22px 0 14px; letter-spacing:.5px;
}
.pw-benefits{
  display:grid; grid-template-columns:1fr 1fr; gap:11px 10px;
}
.pw-benefits .b{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--ink2);
}
.pw-benefits .b i{
  flex:0 0 auto; width:15px; height:15px; border-radius:50%;
  background:var(--goldsoft); border:1px solid var(--gold2);
  color:var(--gold); font-size:9.5px; font-style:normal;
  display:flex; align-items:center; justify-content:center;
}

.pw-legal{
  font-size:10.5px; color:var(--ink4); line-height:1.75;
  text-align:center; margin:20px 0 4px;
}

/* ---------- 底部常驻 CTA ---------- */
.pw-cta{
  flex:0 0 auto;
  background:linear-gradient(135deg,#D2453F 0%,#B7231E 100%);
  color:#fff; text-align:center; padding:13px 0 19px; cursor:pointer;
  border-radius:0 0 24px 24px;
}
.pw-cta .t{ font-size:16px; font-weight:700; letter-spacing:.6px; }
.pw-cta .s{ font-size:11px; opacity:.82; margin-top:4px; }

/* ---------- Toast ---------- */
.toast{
  position:absolute; left:50%; bottom:110px; transform:translate(-50%,14px);
  background:rgba(22,19,43,.9); color:#fff;
  font-size:13px; padding:10px 18px; border-radius:22px;
  opacity:0; pointer-events:none; transition:.24s; z-index:90;
  max-width:78%; text-align:center; line-height:1.55;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ============================================================
   P2 引导页（一页到底 · 底部常驻"开始测试"）
   ⚠️ 2026-09-22 由「四屏横滑」改为「纵向单页」（用户要求）：
      四屏里只有第一屏（钩子）与第四屏（须知）是必看的，第二屏（五行 5 卡）
      与第三屏（25 型矩阵）在真机上几乎没人滑到 —— 横滑把内容藏起来，
      等于把内容删掉。改成纵向后一眼扫完，底部按钮在视口里常驻。
   ============================================================ */
.gd{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#F7F6FC 0%,#F2F0FA 100%);
}

/* 滚动区（原横滑轨道）。
   flex:1 + overflow-y:auto ⇒ 它自己滚、底部 .gd-cta 不跟着滚。
   这就是"按钮不随页面滚动消失"的实现方式 —— 不需要 position:fixed：
   本页在 .phone 这种限宽容器里，fixed 会相对视口而不是容器定位，反而跑偏。 */
.gd-track{
  flex:1 1 auto; display:block; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.gd-track::-webkit-scrollbar{ width:0; }

/* 每个分区（原"一屏"）：不再限宽 100%，改成一节 */
.gd-screen{ padding:8px 24px 22px; }

/* ---- 第一屏：钩子 ---- */
.gd-eyebrow{
  display:inline-block; font-size:11.5px; letter-spacing:1px; color:var(--gold);
  background:var(--goldsoft); border:1px solid var(--gold2);
  border-radius:20px; padding:4px 12px; margin:22px 0 18px;
}
.gd-h1{
  font-size:29px; line-height:1.42; font-weight:700; color:var(--ink);
  letter-spacing:.5px; margin:0 0 20px; white-space:pre-line;
}
.gd-h1 em{
  font-style:normal;
  background:linear-gradient(135deg,#6C5CE7,#B9913C);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.gd-lead{
  font-size:14.5px; line-height:2.05; color:var(--ink2); white-space:pre-line;
  padding-left:14px; border-left:3px solid var(--gold2);
}
.gd-sub{
  font-size:12.5px; color:var(--ink3); line-height:1.9; margin-top:22px;
  padding-top:16px; border-top:1px dashed var(--line);
}

/* ---- 通用屏标题 ---- */
.gd-st{
  font-size:20px; font-weight:700; color:var(--ink); margin:20px 0 6px; letter-spacing:.3px;
}
.gd-sd{ font-size:12.5px; color:var(--ink3); line-height:1.8; margin:0 0 16px; }

/* ---- 第二屏：五行卡片 ---- */
.el-card{
  background:#fff; border:1px solid var(--line); border-radius:15px;
  padding:15px 16px; margin-bottom:11px; position:relative; overflow:hidden;
  box-shadow:0 3px 12px rgba(22,19,43,.045);
}
.el-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--primary2),var(--gold));
}
/* 五行卡按**自己的主行**取色（2026-09-23）
   —— 改之前 5 张卡共用同一个紫金渐变，"五行"在视觉上等于没表达。
   默认那条紫金渐变保留作兜底：万一某张卡没拿到 data-el，也不会突然变白。
   宽度 3→4px：五色要看得出来，"五种底色"才立得住。 */
.el-card[data-el="金"]::before{ background:var(--wx-jin); }
.el-card[data-el="木"]::before{ background:var(--wx-mu); }
.el-card[data-el="水"]::before{ background:var(--wx-shui); }
.el-card[data-el="火"]::before{ background:var(--wx-huo); }
.el-card[data-el="土"]::before{ background:var(--wx-tu); }
.el-top{ display:flex; align-items:baseline; gap:9px; }
.el-name{ font-size:16px; font-weight:700; color:var(--ink); letter-spacing:.5px; }
.el-img{
  font-size:11.5px; color:var(--gold); border:1px solid var(--gold2);
  background:var(--goldsoft); border-radius:20px; padding:2px 9px;
}
/* 意象标签（"锋锐之刃"）跟着主行上色。
   原来 5 张卡的这个胶囊全是金色 —— 和左边条一样，是把"五行"讲成了一种色。 */
.el-card[data-el="金"] .el-img{ color:var(--wx-jin); border-color:var(--wx-jin); background:var(--wx-jin-s); }
.el-card[data-el="木"] .el-img{ color:var(--wx-mu); border-color:var(--wx-mu); background:var(--wx-mu-s); }
.el-card[data-el="水"] .el-img{ color:var(--wx-shui); border-color:var(--wx-shui); background:var(--wx-shui-s); }
.el-card[data-el="火"] .el-img{ color:var(--wx-huo); border-color:var(--wx-huo); background:var(--wx-huo-s); }
.el-card[data-el="土"] .el-img{ color:var(--wx-tu); border-color:var(--wx-tu); background:var(--wx-tu-s); }
.el-def{ font-size:13px; color:var(--ink2); line-height:1.8; margin:9px 0 10px; }
.el-kw{ display:flex; gap:6px; flex-wrap:wrap; }
.el-kw span{
  font-size:11px; color:var(--primary); background:var(--psoft);
  border-radius:5px; padding:3px 9px;
}
.el-hook{
  font-size:12.5px; color:var(--ink3); line-height:1.75;
  margin-top:11px; padding-top:11px; border-top:1px dashed var(--line);
}
.el-hook b{ color:var(--primary2); font-weight:600; }

/* ---- 第三屏：25 型矩阵 ---- */
.mx{
  display:grid; grid-template-columns:22px repeat(5,1fr); gap:4px;
  font-size:9.5px; margin-bottom:11px;
}
.mx .hd, .mx .hd-c{
  display:flex; align-items:center; justify-content:center;
  color:var(--ink3); font-weight:600; padding:5px 0;
}
.mx .hd-c{ color:var(--gold); }
.mx .cell{
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:7px 2px; text-align:center; color:var(--ink2); line-height:1.35;
}
.mx .cell.diag{
  background:linear-gradient(140deg,#3A3172,#241E45);
  color:#F5E3AE; border-color:#4B3FA8; font-weight:600;
}
.mx-note{ font-size:11.5px; color:var(--ink3); line-height:1.75; margin:0 0 20px; }

.cmp{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 16px;
}
.cmp-t{ font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:12px; line-height:1.6; }
.cmp-row{ display:flex; gap:11px; align-items:flex-start; margin-bottom:11px; }
.cmp-sub{
  flex:0 0 auto; font-size:10.5px; color:var(--gold);
  border:1px solid var(--gold2); background:var(--goldsoft);
  border-radius:5px; padding:3px 7px; margin-top:2px; white-space:nowrap;
}
.cmp-body .n{ font-size:13.5px; font-weight:600; color:var(--ink); }
.cmp-body .x{ font-size:12.5px; color:var(--ink3); line-height:1.7; margin-top:3px; }
.cmp-tail{
  font-size:12.5px; color:var(--primary); line-height:1.8;
  border-top:1px dashed var(--line); padding-top:12px; margin-top:2px;
}

/* ---- 第四屏：作答须知 ---- */
.rl{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:4px 16px; margin-bottom:16px;
}
.rl-row{ padding:13px 0; border-bottom:1px solid var(--line2); }
.rl-row:last-child{ border-bottom:0; }
.rl-k{ font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.rl-v{ font-size:12.5px; color:var(--ink3); line-height:1.8; }

.consent{
  display:flex; gap:10px; align-items:flex-start;
  background:#fff; border:1.5px solid var(--line); border-radius:13px;
  padding:14px 15px; cursor:pointer; transition:.18s;
}
.consent .bx{
  flex:0 0 auto; width:19px; height:19px; border-radius:6px; margin-top:1px;
  border:1.5px solid #CFC9E6; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff;
}
.consent .tx{ font-size:12.5px; color:var(--ink2); line-height:1.8; }
.consent .tx a{ color:var(--primary2); text-decoration:none; border-bottom:1px solid rgba(108,92,231,.35); }
.consent.on{ border-color:var(--primary2); background:#FCFBFF; }
.consent.on .bx{ background:var(--primary2); border-color:var(--primary2); }
.consent.flash{ animation:flash .5s 2; }
@keyframes flash{
  0%,100%{ box-shadow:0 0 0 0 rgba(226,76,76,0); }
  50%{ box-shadow:0 0 0 4px rgba(226,76,76,.22); border-color:var(--red); }
}

/* ---- 底部常驻 CTA ---- */
.gd-cta{
  flex:0 0 auto; padding:12px 24px 26px; background:rgba(255,255,255,.94);
  border-top:1px solid var(--line); backdrop-filter:blur(8px);
}
.gd-btn{
  width:100%; height:52px; border:0; font-family:inherit; border-radius:28px;
  background:linear-gradient(135deg,#7A69F0 0%,#4B3FA8 100%);
  color:#fff; font-size:16.5px; font-weight:600; letter-spacing:1.5px;
  cursor:pointer; box-shadow:0 10px 24px rgba(75,63,168,.32);
  transition:transform .12s, opacity .18s;
}
.gd-btn:active{ transform:scale(.985); }
.gd-btn.off{
  background:#E9E7F3; color:var(--ink4); box-shadow:none; cursor:default;
}
.gd-hint{
  text-align:center; font-size:11px; color:var(--ink4); margin-top:8px; height:14px;
}
/* ============================================================
   P1 入口页
   ============================================================ */
.et{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:0 34px;
  background:linear-gradient(180deg,#FBFAFE 0%,#EFEDF9 100%);
  color:#1F2233; text-align:center;
}
.et-seal{
  width:66px; height:66px; border-radius:20px; margin-bottom:24px;
  background:linear-gradient(135deg,#E7C878,#B9913C);
  display:flex; align-items:center; justify-content:center;
  /* 2026-09-22：由单字「五」改为品牌两字「五行」——单字图标会被读成序号。
     两字要放得进 66px 方块，字号从 29px 收到 19px 并加 1px 字距。 */
  font-size:19px; letter-spacing:1px; font-weight:700; color:#2B2246;
  box-shadow:0 12px 30px rgba(185,145,60,.34);
}
.et-greet{ font-size:18px; font-weight:600; letter-spacing:.6px; margin-bottom:9px; }
.et-tip{ font-size:12.5px; color:#5F5A78; line-height:1.9; }
.et-src{
  font-size:10.5px; letter-spacing:1px; color:#6B6785;
  border:1px solid #E6E3F2; border-radius:20px; padding:3px 11px; margin-bottom:22px;
}

/* ============================================================
   P3 轮次过渡卡 / P5 进度卡（共用一套深色版式）
   ============================================================ */
.dk{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:34px 30px 28px;
  background:linear-gradient(180deg,#FBFAFE 0%,#EFEDF9 100%);
  color:#1F2233;
}
.dk-top{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:#6B6785; letter-spacing:.6px;
}
.dk-top b{ color:#B9913C; font-weight:600; letter-spacing:1.1px; }

/* ---- 三段式轮次进度 ---- */
.rb{ margin-top:16px; }
.rb-bar{ display:flex; gap:7px; }
.rb-seg{ flex:1; height:5px; border-radius:3px; background:#E6E3F2; overflow:hidden; }
.rb-seg i{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,#E7C878,#B9913C); transition:width .55s ease;
}
.rb-seg.done i{ width:100%; }
.rb-seg.cur  i{ width:var(--p,0%); }
.rb-lab{ display:flex; gap:7px; margin-top:9px; }
.rb-lab span{ flex:1; text-align:center; font-size:11px; color:#8C89A2; }
.rb-lab span.on{ color:#B9913C; }

/* ---- 主体 ---- */
.dk-mid{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.dk-seal{
  width:74px; height:74px; border-radius:23px; margin-bottom:22px;
  background:linear-gradient(135deg,#E7C878,#B9913C);
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:700; color:#2B2246;
  box-shadow:0 14px 34px rgba(185,145,60,.34);
}
.dk-kicker{ font-size:11px; letter-spacing:1.4px; color:#6B6785; margin-bottom:11px; }
.dk-title{ font-size:23px; font-weight:600; letter-spacing:.8px; margin-bottom:10px; }
.dk-num{
  font-size:44px; font-weight:700; letter-spacing:2px; line-height:1;
  background:linear-gradient(135deg,#D9AE52,#B9913C 42%,#8A6A28);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dk-num small{
  font-size:15px; font-weight:400; margin-left:5px;
  color:#6B6785; -webkit-text-fill-color:#6B6785;
}
.dk-sub{
  font-size:12.5px; color:#5F5A78; line-height:1.95;
  margin-top:16px; max-width:288px;
}

/* ---- 下一轮预告卡（P3） ---- */
.dk-next{
  width:100%; border:1px solid #E6E3F2; border-radius:16px;
  background:#fff; padding:16px 18px;
  margin-top:22px; text-align:left;
}
.dk-next .nt{ font-size:10.5px; letter-spacing:1.2px; color:#6B6785; margin-bottom:9px; }
.dk-next .nn{ font-size:16px; font-weight:600; margin-bottom:7px; }
.dk-next .nn i{ font-style:normal; color:#B9913C; }
.dk-next .nd{ font-size:12px; color:#5F5A78; line-height:1.85; }

/* ---- 记录号条（P5） ---- */
.dk-rec{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  border:1px dashed #E6E3F2; border-radius:12px; padding:12px 16px; margin-top:20px;
}
.dk-rec .rl{ font-size:11px; color:#6B6785; }
.dk-rec .rv{ font-size:14px; font-weight:600; letter-spacing:1.4px; color:#B9913C; }
.dk-rectip{ font-size:10.5px; color:#8C89A2; text-align:center; line-height:1.8; margin-top:9px; }

/* ---- 底部按钮 ---- */
.dk-act{ padding-top:16px; }
.dk-btn{
  width:100%; height:52px; border:0; border-radius:26px; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:600; letter-spacing:.5px;
  /* 2026-10-09 随浅色化统一：主按钮全站走品牌紫（原来在深底上是金）。
     金留给徽章与进度条做点缀 —— 两者都金会互相削弱，
     而且落地页/引导页的按钮本来就是紫的，不改就是"同一站两种按钮"。 */
  background:linear-gradient(135deg,#6C5CE7,#4B3FA8); color:#fff;
  box-shadow:0 12px 28px rgba(75,63,168,.3);
  transition:transform .12s;
}
.dk-btn:active{ transform:translateY(1px); }
.dk-btn.ghost{
  height:44px; margin-top:11px; font-size:13.5px; font-weight:500;
  background:transparent; color:#5F5A78; border:1px solid #E6E3F2; box-shadow:none;
}
.dk-note{
  font-size:10.5px; color:#8C89A2; text-align:center;
  line-height:1.8; margin-top:12px;
}

/* ============================================================
   P4 答题页（沿用 P3/P5/P6 深色版式）
   ============================================================ */
.qz{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#FBFAFE 0%,#EFEDF9 100%);
  color:#1F2233;
}

/* ---- 每轮开测前的过渡卡 ---- */
.qz-intro{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 34px; text-align:center;
  background:linear-gradient(180deg,#F7F5FC 0%,#EDEAF8 100%);
}
.qi-badge{
  width:64px; height:64px; border-radius:20px; margin-bottom:24px;
  background:linear-gradient(135deg,#E7C878,#B9913C);
  display:flex; align-items:center; justify-content:center;
  font-size:29px; font-weight:700; color:#2B2246;
  box-shadow:0 14px 34px rgba(185,145,60,.34);
}
/* 轮次徽标：显示 "3/3" 这类轮次标识。
   ⚠️ 别在这里放单个汉字（原来放的是「五」=五行记号）——
      用户第一眼会读成"第五项"，实测被点名。轮次数字没有第二种读法。 */
.qi-badge.num{ font-size:21px; letter-spacing:.5px; font-variant-numeric:tabular-nums; }
.qi-title{ font-size:19px; font-weight:600; letter-spacing:.6px; margin-bottom:15px; }
.qi-text{ font-size:13px; color:#5F5A78; line-height:2.05; max-width:282px; }
.qi-prog{ font-size:11px; color:#6B6785; letter-spacing:.8px; margin:26px 0 30px; }

/* ---- 答题主体 ---- */
.qz-main{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:34px 30px 26px;
  /* ⚠️ 2026-09-22：题目下方多了「完成测试后你将获得」卡，内容可能超出一屏。
     给主体加滚动，避免被裁掉。每次换题由 JS 把 scrollTop 拉回 0 ——
     保证新题的**问题与选项**永远出现在首屏，收获卡往下滑才看到。 */
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.qz-main::-webkit-scrollbar{ width:0; }
.qz-top{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:#6B6785; letter-spacing:.6px;
}
.qz-top b{ color:#B9913C; font-weight:600; letter-spacing:1.1px; }

.qz-prog{ margin-top:14px; }
.qz-bar{ height:5px; border-radius:3px; background:#E6E3F2; overflow:hidden; }
.qz-bar i{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,#E7C878,#B9913C); transition:width .35s ease;
}
.qz-num{
  font-size:10.5px; color:#6B6785; letter-spacing:1px; margin-top:8px;
  text-align:right; font-variant-numeric:tabular-nums;
}

/* flex:1 0 auto —— **不压缩**。
   原写法 flex:1（flex-shrink 默认 1）在内容变高时会先把 .qz-body 压扁，
   选项会被挤到变形；改成不收缩后，超高就交给 .qz-main 滚动。 */
.qz-body{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; min-height:0; }
.qz-kicker{ font-size:10.5px; letter-spacing:1.3px; color:#6B6785; margin-bottom:12px; }
.qz-stem{
  font-size:17px; font-weight:600; line-height:1.75;
  letter-spacing:.3px; margin-bottom:22px;
}

/* ---- A / B 对照卡 ---- */
.qz-cards{ display:flex; flex-direction:column; gap:11px; }
.qz-card{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid #E6E3F2; border-radius:15px;
  background:#fff; padding:15px 16px;
}
.qz-card .bd{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px; margin-top:1px;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#2B2246;
  font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.qz-card .tx{ flex:1; font-size:13.5px; line-height:1.8; color:#4A4761; }

/* ---- 五级档位 ---- */
.qz-scale{ display:flex; gap:6px; margin-top:20px; }
.qz-opt{
  flex:1; border:1px solid #E6E3F2; border-radius:11px;
  background:#fff; color:#5F5A78;
  font-family:inherit; font-size:10.5px; line-height:1.35;
  padding:11px 2px; cursor:pointer; transition:all .16s;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.qz-opt .dot{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid #D8D5EA; background:transparent; transition:all .16s;
}
.qz-opt:active{ transform:translateY(1px); }
.qz-opt.on{
  border-color:#E7C878; color:#7A5C1E;
  background:linear-gradient(180deg,rgba(231,200,120,.16),rgba(231,200,120,.06));
}
.qz-opt.on .dot{ border-color:#E7C878; background:#E7C878; }
.qz-hint{
  font-size:10.5px; color:#B9913C; text-align:center;
  margin-top:12px; min-height:15px; letter-spacing:.5px;
}

/* ---- 底部 ---- */
.qz-foot{ padding-top:14px; }
.qz-btn{
  width:100%; height:46px; border:1px solid #E6E3F2; border-radius:23px;
  background:transparent; color:#5F5A78;
  font-family:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; transition:background .15s;
}
.qz-btn:active{ background:#fff; }
.qz-btn.ghost + .qz-btn.ghost{ margin-top:10px; }
.qz-note{
  font-size:10.5px; color:#8C89A2; text-align:center;
  line-height:1.8; margin-top:12px;
}

/* ---- 完成测试后你将获得（每道题下方常驻） --------------------
   ⚠️ 2026-09-22 新增（用户要求，对标 MBTI 答题页）。
   为什么要有这一块：120 题的中途，用户看不见终点有什么 ——
   这是长问卷最典型的流失点。这块清单把"终点"直接摆在每一题下面。
   内容**只讲免费档真有的东西**（config.js 的 quiz.gain），
   一个付费词都不出现：在答题页许诺付费内容，等于告诉用户"不花钱测了也白测"。
   两列网格 + 金色小圆点，高度约 160px，往下滑才看到，不挤占选项的位置。 */
.qz-gain{
  margin-top:24px; padding-top:20px; border-top:1px solid #E6E3F2;
}
.qg-t{
  font-size:12.5px; font-weight:600; color:#B9913C; letter-spacing:.6px;
  text-align:center; margin-bottom:15px;
}
.qg-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.qg-i{
  position:relative; padding-left:15px;
  font-size:11.5px; line-height:1.6; color:#5F5A78;
}
.qg-i::before{
  content:""; position:absolute; left:0; top:5px;
  width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg,#E7C878,#B9913C);
}
.qg-note{
  font-size:10.5px; color:#8C89A2; text-align:center;
  margin-top:16px; line-height:1.7;
}

/* ============================================================
   P6 生成页（沿用 P3/P5 深色版式）
   ============================================================ */
.gn-ring{
  position:relative; width:96px; height:96px; margin-bottom:24px;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.gn-ring::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid transparent;
  border-top-color:#E7C878; border-right-color:rgba(231,200,120,.5);
  animation:gnspin 1.1s linear infinite;
}
.gn-ring::after{
  content:""; position:absolute; inset:10px; border-radius:50%;
  border:1px solid #E6E3F2;
}
.gn-ring.done::before{ animation:none; border-color:#E7C878; }
@keyframes gnspin{ to{ transform:rotate(360deg); } }

.gn-seal{
  width:62px; height:62px; border-radius:20px; position:relative; z-index:1;
  background:linear-gradient(135deg,#E7C878,#B9913C);
  display:flex; align-items:center; justify-content:center;
  /* 2026-09-22：同上。这处尤其要改 —— 它下面紧跟着 4 条步骤清单，
     单字「五」正好被读成「第五项」（用户就是照这里提的）。 */
  font-size:19px; letter-spacing:1px; font-weight:700; color:#2B2246;
  box-shadow:0 12px 30px rgba(185,145,60,.34);
}

.gn-bar{
  width:100%; height:6px; border-radius:4px; background:#E6E3F2;
  overflow:hidden; margin-top:26px;
}
.gn-bar i{
  display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,#E7C878,#B9913C); transition:width .5s ease;
}
.gn-pct{
  font-size:11px; letter-spacing:1.2px; color:#6B6785;
  margin-top:10px; font-variant-numeric:tabular-nums;
}

.gn-steps{ width:100%; margin-top:24px; text-align:left; }
.gn-step{
  display:flex; align-items:center; gap:11px;
  padding:9px 0; font-size:12.5px; color:#8C89A2;
  transition:color .3s;
}
.gn-step .d{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  border:1px solid #E6E3F2; color:#8C89A2;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; transition:all .3s;
}
.gn-step .tx{ flex:1; line-height:1.55; }
.gn-step .nt{ font-size:10.5px; color:#5C5680; }
.gn-step.on{ color:#5F5A78; }
.gn-step.on .d{ border-color:#E7C878; }
.gn-step.done{ color:#1F2233; }
.gn-step.done .d{
  background:linear-gradient(135deg,#E7C878,#B9913C);
  border-color:#E7C878; color:#2B2246;
}
.gn-step.done .nt{ color:#6B6785; }

/* ============================================================
   P8 结果海报页
   ============================================================ */
.ps{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:34px 30px 28px;
  background:linear-gradient(180deg,#FBFAFE 0%,#EFEDF9 100%);
  color:#1F2233;
}
.ps-top{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:#6B6785; letter-spacing:.6px;
}
.ps-top b{ color:#B9913C; font-weight:600; letter-spacing:1.1px; }
.ps-head{ text-align:center; margin-top:14px; }
.ps-head h2{ font-size:17px; font-weight:600; margin:0 0 6px; letter-spacing:.6px; }
.ps-head p{ font-size:11.5px; color:#6B6785; margin:0; line-height:1.7; }

.ps-shot{
  flex:1; min-height:0; margin-top:16px;
  display:flex; align-items:center; justify-content:center;
}
.ps-shot img{
  max-width:100%; max-height:100%; border-radius:14px; display:block;
  box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(231,200,120,.35);
}
.ps-tip{ font-size:11px; color:#5F5A78; text-align:center; margin-top:13px; }

.ps-share{
  width:100%; border:1px solid #E6E3F2; border-radius:14px;
  background:#fff; padding:13px 15px; margin-top:13px;
}
.ps-share .st{ font-size:10.5px; letter-spacing:1.1px; color:#6B6785; margin-bottom:7px; }
.ps-share .sc{ font-size:12px; color:#5F5A78; line-height:1.8; }
.ps-share button{
  margin-top:11px; width:100%; height:38px; border-radius:19px;
  border:1px solid #E7C878; background:transparent; color:#B9913C;
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background .15s;
}
.ps-share button:active{ background:rgba(231,200,120,.13); }

.ps-act{ padding-top:14px; }

/* ============================================================
   报告页 · 正文渲染（后端下发节点 → 这里出样式）
   节点类型只有五种：p / h3 / label / table / tags
   ============================================================ */

/* 状态卡：加载中 / 没查到 / 还没答完 / 取不到 */
.rp-state{ padding:56px 28px; text-align:center; }
.rp-state .st-i{
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  background:var(--psoft); color:var(--primary2);
  font-size:24px; line-height:56px; font-weight:700;
}
.rp-state .st-t{ font-size:16px; font-weight:600; color:var(--ink); margin-bottom:9px; }
.rp-state .st-d{ font-size:13px; color:var(--ink3); line-height:1.85; }
.rp-state .st-b{
  display:inline-block; margin-top:20px; padding:11px 30px; border-radius:22px;
  border:0; background:linear-gradient(135deg,#6C5CE7,#4B3FA8); color:#fff;
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
}
.rp-state .st-b.ghost{
  background:transparent; color:var(--primary2);
  border:1px solid var(--psoft); margin-left:9px;
}
@keyframes rpSpin{ to{ transform:rotate(360deg); } }
.rp-state .st-i.spin{ animation:rpSpin 1.1s linear infinite; }

/* 五行刻度条 */
.scale-box{
  margin:0 20px 6px; padding:18px 18px 14px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
}
.scale-box .sb-t{
  font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:13px;
  letter-spacing:.6px;
}
.scale-row{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
/* ⚠️ 宽度 26px 装不下服务端给的「火（主行）」「金（副行）」这种 5 字标签，
   会被挤成三行（金 /（副 /行））—— 这是既有缺陷，做五色视觉验证时才看见。
   76px 放得下最长标签；用**固定**宽度而不是 auto，是为了每行的条起点仍然对齐。 */
.scale-row .sr-d{
  flex:0 0 76px; font-size:12.5px; color:var(--ink2); font-weight:600;
  white-space:nowrap;
}
.scale-row .sr-bar{
  flex:1; height:7px; border-radius:4px; background:var(--line2); overflow:hidden;
}
.scale-row .sr-bar i{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,#8B7BF0,#4B3FA8);
}
/* 五行刻度：每行按**自己的五行**上色（2026-09-23）
   —— 改之前 4 个非主行共用同一个紫色渐变，"五行刻度"其实只表达了两种色。
   ⚠️ 故意放在 .on 规则**之前**：两者特异性相同，靠"后定义的胜出"让主行仍收金色。
      换位置 = 主行标记直接失效。 */
.scale-row[data-el="金"] .sr-bar i{ background:var(--wx-jin); }
.scale-row[data-el="木"] .sr-bar i{ background:var(--wx-mu); }
.scale-row[data-el="水"] .sr-bar i{ background:var(--wx-shui); }
.scale-row[data-el="火"] .sr-bar i{ background:var(--wx-huo); }
.scale-row[data-el="土"] .sr-bar i{ background:var(--wx-tu); }
.scale-row.on .sr-bar i{ background:linear-gradient(90deg,#E7C878,#B9913C); }
.scale-row.on .sr-d{ color:var(--gold); }
.scale-row .sr-n{
  flex:0 0 34px; text-align:right; font-size:11px; color:var(--ink4);
  font-variant-numeric:tabular-nums;
}

/* 正文板块 */
.sec-body{ padding:2px 0 4px; }
.sec-body p{
  font-size:14px; line-height:2.0; color:var(--ink2); margin:0 0 12px;
  text-align:justify;
}
.sec-body h4.n-h3{
  font-size:14.5px; font-weight:600; color:var(--ink);
  margin:18px 0 9px; padding-left:11px; position:relative; line-height:1.6;
}
.sec-body h4.n-h3::before{
  content:""; position:absolute; left:0; top:5px; bottom:4px; width:3px;
  border-radius:2px; background:linear-gradient(180deg,#E7C878,#B9913C);
}
.n-label{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 13px; margin:0 0 10px; border-radius:10px;
  background:var(--goldsoft); border-left:3px solid var(--gold2);
}
.n-label b{ flex:0 0 auto; font-size:13px; color:var(--gold); font-weight:600; }
.n-label span{ flex:1; font-size:13px; line-height:1.85; color:var(--ink2); }
.n-tags{ display:flex; gap:7px; flex-wrap:wrap; margin:0 0 12px; }
.n-tags span{
  padding:4px 12px; border-radius:13px; background:var(--psoft);
  font-size:12px; color:var(--primary); font-weight:600;
}
.n-table{
  width:100%; border-collapse:collapse; margin:0 0 13px;
  font-size:12.5px; border:1px solid var(--line); border-radius:10px;
  overflow:hidden;
}
.n-table th{
  background:var(--line2); color:var(--ink); font-weight:600;
  padding:9px 10px; text-align:left; border-bottom:1px solid var(--line);
}
.n-table td{
  padding:9px 10px; color:var(--ink2); line-height:1.75;
  border-bottom:1px solid var(--line2); vertical-align:top;
}
.n-table tr:last-child td{ border-bottom:0; }

/* 卡片项（三张底牌 / 三个暗礁）：卡头 + 卡身，卡与卡之间虚线分隔 */
.n-item{ padding:0 0 11px; margin:0 0 11px; border-bottom:1px dashed var(--line); }
.n-item:last-child{ border-bottom:0; padding-bottom:0; margin-bottom:6px; }
.n-item b{
  display:block; font-size:13.5px; font-weight:600; color:var(--ink);
  line-height:1.6; margin:0 0 5px;
}
.n-item span{ display:block; font-size:13px; line-height:1.85; color:var(--ink2); }

/* 「同型的人」人物卡：左图右文。图是意象插画（600×600 源图，这里显示 84px），
   缩成小方图是为了三张卡不把正文挤到一屏之外。 */
.n-item.has-img{ display:flex; gap:11px; align-items:flex-start; }
.n-item.has-img .ni-img{
  flex:0 0 84px; width:84px; height:84px; border-radius:10px;
  object-fit:cover; display:block; background:var(--line2);
  border:1px solid var(--line);
}
.n-item.has-img .ni-tx{ flex:1; min-width:0; }

/* 「同型的人」免责小字（文案在 config.js，不在 25 份 JSON 里重复） */
.same-note{
  margin:3px 0 0; padding:9px 0 0; border-top:1px dashed var(--line);
  font-size:11.5px; line-height:1.75; color:#8C89A2;
}

/* 自评清单项（「说的是不是你」8 条自评） */
.n-li{
  position:relative; padding:8px 12px 8px 31px; margin:0 0 8px;
  border-radius:9px; background:var(--line2);
  font-size:13px; line-height:1.8; color:var(--ink2);
}
.n-li::before{
  content:"\2713"; position:absolute; left:12px; top:8px;
  color:var(--gold); font-size:12px; font-weight:700;
}

/* 金句（一句忠告 + 今天就能做的一件事） */
.n-quote{
  padding:14px 15px; margin:0 0 12px; border-radius:10px;
  background:var(--goldsoft); border-left:3px solid var(--gold2);
  font-size:13.5px; line-height:1.95; color:var(--ink);
}

/* 板块（可展开） */
.fold{
  margin:0 0 10px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); overflow:hidden;
}
.fold .fold-h{
  display:flex; align-items:center; gap:11px; padding:15px 15px;
  cursor:pointer; user-select:none;
}
.fold .fold-h .no{
  flex:0 0 26px; height:26px; border-radius:8px; background:var(--psoft);
  color:var(--primary); font-size:12.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.fold .fold-h .tt{ flex:1; font-size:14px; font-weight:600; color:var(--ink); }
.fold .fold-h .go{
  flex:0 0 auto; font-size:18px; color:var(--ink4);
  transition:transform .2s; line-height:1;
}
.fold.open .fold-h .go{ transform:rotate(90deg); color:var(--gold); }
.fold.open .fold-h .no{ background:linear-gradient(135deg,#E7C878,#B9913C); color:#fff; }
.fold .fold-b{ display:none; padding:0 15px 15px; }
.fold.open .fold-b{ display:block; }
.fold.locked .fold-h .no{ background:#F1EFF8; color:var(--ink4); }
.fold.locked .fold-h .tt{ color:var(--ink4); font-weight:500; }
.fold.locked .fold-h .lk{ flex:0 0 auto; font-size:11.5px; color:var(--gold); }
.fold.locked .fold-h .go{ display:none; }

/* 底部解锁 CTA */
.rp-cta{ padding:8px 20px 26px; }
.rp-cta .cta-card{
  padding:18px; border-radius:var(--r); text-align:center;
  background:linear-gradient(135deg,#2A2258,#4B3FA8); color:#fff;
}
.rp-cta .cta-card .ct{ font-size:15px; font-weight:700; letter-spacing:.4px; }
.rp-cta .cta-card .cs{ font-size:12px; color:#CFC7EC; margin-top:7px; line-height:1.7; }
.rp-cta .cta-card button{
  margin-top:14px; width:100%; height:44px; border-radius:22px; border:0;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#2A2258;
  font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
}
.rp-cta .cta-card button:active{ opacity:.86; }

/* 解封状态标记 */
.tier .t-owned{
  position:absolute; top:0; right:0; padding:3px 10px;
  border-radius:0 12px 0 10px; font-size:10.5px; font-weight:600;
  background:var(--goldsoft); color:var(--gold);
}

/* ============================================================
   分享赚钱（佣金卡片）
   ------------------------------------------------------------
   放在付费报告正文的最下方（19.9 与 39.9 两档都出现）。
   金色是"钱"的语义色，与页面主体的紫形成对比，一眼能找到；
   但只用在标签与按钮上，不把整块做成金色，避免廉价感。
   ============================================================ */
.share-wrap{ padding:16px 20px 8px; }

/* 未付费用户看到的只是一行钩子 */
.sh-teaser{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-radius:12px;
  background:var(--goldsoft); border:1px solid #EFDFB4;
  font-size:12.5px; color:#8A6A22; line-height:1.6;
}
.sh-tag{
  flex:0 0 auto; padding:2px 8px; border-radius:20px;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#fff;
  font-size:11px; font-weight:700;
}

.sh-card{
  border-radius:var(--r); overflow:hidden;
  border:1px solid #EFDFB4; background:#fff;
  box-shadow:0 6px 18px rgba(185,145,60,.12);
}
.sh-h{
  padding:16px 16px 14px;
  background:linear-gradient(135deg,#2A2258 0%,#4B3FA8 100%);
  color:#fff;
}
.sh-k{
  display:inline-block; padding:2px 9px; border-radius:20px; margin-bottom:8px;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#2A2258;
  font-size:10.5px; font-weight:700; letter-spacing:.5px;
}
.sh-t{ font-size:16px; font-weight:700; letter-spacing:.3px; }
.sh-s{ font-size:12px; color:#CFC7EC; margin-top:6px; line-height:1.7; }

.sh-samp{
  padding:10px 16px; font-size:12px; color:var(--ink2);
  background:var(--goldsoft); border-bottom:1px solid #F2E7CB; line-height:1.7;
}
.sh-samp b{ color:var(--gold); }

.sh-link{ display:flex; gap:8px; padding:14px 16px 0; }
.sh-input{
  flex:1; min-width:0; height:38px; padding:0 11px;
  border:1px solid var(--line); border-radius:9px; background:var(--line2);
  font-family:inherit; font-size:11.5px; color:var(--ink2);
}
.sh-copy{
  flex:0 0 auto; height:38px; padding:0 13px; border:0; border-radius:9px;
  background:var(--psoft); color:var(--primary); font-family:inherit;
  font-size:12.5px; font-weight:600; cursor:pointer;
}
.sh-copy:active{ opacity:.8; }

.sh-share{
  display:block; width:calc(100% - 32px); margin:12px 16px 0;
  height:46px; border:0; border-radius:23px; cursor:pointer;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#3A2C0C;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.6px;
}
.sh-share:active{ opacity:.86; }
.sh-tip{
  padding:9px 16px 0; text-align:center;
  font-size:11px; color:var(--ink3); line-height:1.6;
}

.sh-open{
  margin:12px 16px 0; padding:11px 12px; border-radius:10px;
  background:#FFF4E5; border:1px solid #F3D8A8;
  font-size:12.5px; color:#8A5A12;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.sh-open-b{
  flex:0 0 auto; height:32px; padding:0 12px; border:0; border-radius:16px;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#3A2C0C;
  font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}

.sh-stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin:14px 16px 0; background:var(--line); border-radius:10px; overflow:hidden;
}
.sh-st{ background:#fff; padding:11px 8px; text-align:center; }
.sh-st b{ display:block; font-size:16px; font-weight:700; color:var(--ink); }
.sh-st span{ display:block; margin-top:3px; font-size:11px; color:var(--ink3); }
.sh-st.hot b{ color:var(--gold); }

.sh-wd{ padding:14px 16px 16px; }
.sh-wd-btn{
  width:100%; height:44px; border:0; border-radius:22px; cursor:pointer;
  background:linear-gradient(135deg,#7A69F0,#4B3FA8); color:#fff;
  font-family:inherit; font-size:14.5px; font-weight:600; letter-spacing:.5px;
}
.sh-wd-btn:active{ opacity:.86; }
.sh-wd-btn.off{ background:var(--line2); color:var(--ink4); cursor:not-allowed; }
.sh-wd-note{
  margin-top:9px; text-align:center; font-size:11px; color:var(--ink3); line-height:1.7;
}

/* 卡片底部的分销中心入口。
   报告页那张卡是"一次性"的（付完看完就关了），下次想提现找不到回来，
   所以这里给一个常驻出口 —— 与服务号菜单指向同一个页面。 */
.sh-center{
  padding:11px 16px 14px; text-align:center;
  border-top:1px solid var(--line2); background:var(--line2);
}
.sh-center-a{
  font-size:12.5px; font-weight:600; color:var(--primary); text-decoration:none;
}
.sh-center-a:active{ opacity:.7; }
.sh-center-t{ margin-top:5px; font-size:10.5px; color:var(--ink3); line-height:1.6; }

/* 付费墙上的轻量提示（给"为什么要买"多一个回本理由） */
.pw-share-hint{
  margin:10px 0 12px; padding:10px 12px; border-radius:10px;
  background:var(--goldsoft); border:1px solid #EFDFB4;
  font-size:12px; color:#8A6A22; line-height:1.6; text-align:center;
}
.pw-share-hint i{
  display:inline-block; margin-right:6px; padding:1px 7px; border-radius:20px;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#fff;
  font-style:normal; font-size:10.5px; font-weight:700;
}

/* 差额升级：把"已抵多少"写清楚，否则用户以为我们偷偷降价了 */
.tier .t-save{ display:block; font-size:10.5px; color:var(--gold); line-height:1.5; }

/* ============================================================
   分销中心（share.html）
   ------------------------------------------------------------
   承载在 .share-wrap 里（左右已有 20px 内边距），所以这里不再横向留白。
   明细做成"对账单"的样子：一笔一行、左项目右金额，佣金用金色（钱），
   用户扫一眼就知道赚了多少；状态用颜色区分，不用读文字。
   ============================================================ */
.sh-sec{
  margin:16px 0 8px; font-size:12px; font-weight:600;
  color:var(--ink2); letter-spacing:.4px;
}
.sh-list{
  border:1px solid var(--line); border-radius:10px;
  overflow:hidden; background:#fff;
}
.sh-li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 12px; border-bottom:1px solid var(--line2);
}
.sh-li:last-child{ border-bottom:0; }
.sh-li .li-l{ min-width:0; flex:1; }
.sh-li .li-t{
  font-size:12.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sh-li .li-d{ margin-top:3px; font-size:10.5px; color:var(--ink3); }
.sh-li .li-r{ flex:0 0 auto; text-align:right; }
.sh-li .li-m{ font-size:14px; font-weight:700; color:var(--gold); }
.sh-li .li-s{ margin-top:3px; font-size:10.5px; color:var(--ink3); }
.sh-li .li-s.settled{ color:#3C8A5A; }
.sh-li .li-s.claiming{ color:#B9812B; }
.sh-li .li-s.void{ color:var(--ink4); }

.sh-empty{
  padding:22px 16px; text-align:center; background:#fff;
  border:1px dashed var(--line); border-radius:10px;
  font-size:12px; color:var(--ink3); line-height:1.8;
}

/* 规则说明：一级分销 / 提现门槛 / 不计佣情形 —— 既是合规自证，也挡客诉 */
.sc-note{
  margin:16px 0 28px; font-size:11px; color:var(--ink3); line-height:1.9;
}
.sc-note b{ display:block; margin-bottom:5px; color:var(--ink2); font-weight:600; }

/* 状态位里的大按钮（"去开始测试""继续测试"） */
.sc-btn{
  margin-top:16px; height:44px; padding:0 26px; border:0; border-radius:22px;
  background:linear-gradient(135deg,#7A69F0,#4B3FA8); color:#fff;
  font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
}
.sc-btn:active{ opacity:.86; }

/* ============================================================
   余额当钱花（share.html · report.html）
   ------------------------------------------------------------
   一个池子两个出口：待结算的推荐奖励既可当现金花（余额解锁 / 赠送码），
   也可提现。所以"可用余额"与"可提现"永远是同一个数，页面上别无中生有两笔钱。
   金色 = 钱，延续 .sh-* 的语义色；余额面板用深色底把"这是资产"讲明白。
   ============================================================ */
.bal-card{
  border-radius:var(--r); overflow:hidden;
  background:linear-gradient(135deg,#2A2258 0%,#4B3FA8 100%);
  color:#fff; box-shadow:0 6px 18px rgba(75,63,168,.22);
}
.bal-h{ padding:16px 16px 6px; }
.bal-k{
  font-size:11px; letter-spacing:.6px; color:#CFC7EC;
}
.bal-num{
  margin-top:4px; font-size:32px; font-weight:700; letter-spacing:.5px;
  color:var(--gold2); line-height:1.15;
}
.bal-num small{ font-size:14px; font-weight:600; margin-left:4px; color:#CFC7EC; }
.bal-sub{ margin-top:6px; font-size:11.5px; color:#CFC7EC; line-height:1.7; }
.bal-note{
  margin:8px 16px 0; padding:8px 10px; border-radius:8px;
  background:rgba(255,255,255,.10); font-size:11px; color:#E6E1FB; line-height:1.65;
}
/* 用 grid-auto-flow 而不是 repeat(3,1fr)：赠送功能关掉时只剩两个按钮，
   写死三列会在右边留一格空白。 */
.bal-acts{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:1px;
  margin-top:14px; background:rgba(255,255,255,.16);
}
.bal-act{
  border:0; padding:13px 4px; cursor:pointer;
  background:rgba(255,255,255,.08); color:#fff;
  font-family:inherit; font-size:12px; font-weight:600; line-height:1.5;
}
.bal-act:active{ background:rgba(255,255,255,.20); }
.bal-act i{ display:block; font-style:normal; font-size:16px; margin-bottom:3px; }
.bal-act.gold{ color:var(--gold2); }

/* 余额收支四格 */
.bal-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin:12px 0 0; background:var(--line); border-radius:10px; overflow:hidden;
}
.bal-grid .b-g{ background:#fff; padding:11px 10px; }
.bal-grid .b-g b{ display:block; font-size:15px; font-weight:700; color:var(--ink); }
.bal-grid .b-g span{ display:block; margin-top:3px; font-size:10.5px; color:var(--ink3); }
.bal-grid .b-g.gold b{ color:var(--gold); }

/* ---------- 档位选项（余额解锁 / 生成赠送码共用） ---------- */
.tier-pick{
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;
}
.tier-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px; border-bottom:1px solid var(--line2);
}
.tier-row:last-child{ border-bottom:0; }
.tier-row.on{ background:var(--goldsoft); }
.tier-row .tr-l{ min-width:0; flex:1; }
.tier-row .tr-t{ font-size:13px; font-weight:600; color:var(--ink); }
.tier-row .tr-d{ margin-top:3px; font-size:10.5px; color:var(--ink3); line-height:1.6; }
.tier-row .tr-r{ flex:0 0 auto; text-align:right; }
.tier-row .tr-p{ font-size:14px; font-weight:700; color:var(--gold); }
.tier-row .tr-p.short{ color:var(--ink4); font-size:12px; font-weight:600; }
.tier-btn{
  flex:0 0 auto; height:34px; padding:0 14px; border:0; border-radius:17px; cursor:pointer;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#3A2C0C;
  font-family:inherit; font-size:12.5px; font-weight:700;
}
.tier-btn:active{ opacity:.86; }
.tier-btn.ghost{ background:var(--psoft); color:var(--primary); }
.tier-btn.off{ background:var(--line2); color:var(--ink4); cursor:not-allowed; }

/* ---------- 赠送码卡片 ---------- */
.gift-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 12px; border-bottom:1px solid var(--line2); background:#fff;
}
.gift-row:last-child{ border-bottom:0; }
.gift-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px; font-weight:700; letter-spacing:1.6px; color:var(--primary);
}
.gift-meta{ margin-top:3px; font-size:10.5px; color:var(--ink3); }
.gift-st{ font-size:10.5px; margin-top:3px; }
.gift-st.open{ color:#B9812B; }
.gift-st.used{ color:#3C8A5A; }
.gift-st.void{ color:var(--ink4); }

/* ---------- 推荐官状态条 ---------- */
.ag-bar{
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; font-size:12px; color:var(--ink2); line-height:1.7;
}
.ag-bar .ag-i{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--psoft); color:var(--primary); font-size:13px; font-weight:700;
}
.ag-bar.active{ border-color:#E2D6A8; background:var(--goldsoft); }
.ag-bar.active .ag-i{ background:linear-gradient(135deg,#E7C878,#B9913C); color:#fff; }
.ag-bar .ag-x{ flex:1; min-width:0; }
.ag-bar .ag-t{ font-size:12.5px; font-weight:600; color:var(--ink); }
.ag-bar .ag-d{ margin-top:3px; font-size:10.5px; color:var(--ink3); line-height:1.65; }
.ag-bar .ag-b{
  flex:0 0 auto; height:32px; padding:0 12px; border:0; border-radius:16px; cursor:pointer;
  background:var(--psoft); color:var(--primary);
  font-family:inherit; font-size:12px; font-weight:600;
}

/* ---------- 收款方式表单 ---------- */
.fm-row{ margin-top:10px; }
.fm-row label{
  display:block; margin-bottom:5px; font-size:11.5px; font-weight:600; color:var(--ink2);
}
.fm-row input{
  width:100%; height:40px; padding:0 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  font-family:inherit; font-size:13px; color:var(--ink);
}
.fm-row input:focus{ outline:none; border-color:var(--primary3); }
.fm-hint{ margin-top:5px; font-size:10.5px; color:var(--ink3); line-height:1.6; }
/* 收款方式的「前置动作」提示块（如微信手机号得先开收款开关）。
   它不是可选说明：没做这一步，钱打不进去。所以给它浅金底 ——
   与 .ag-status（"就差最后一步"）同一套视觉语言，别混在灰字里被跳过。 */
.fm-note{
  margin-top:8px; padding:9px 11px; border-radius:10px;
  background:var(--goldsoft); color:#8A6A22; font-size:10.5px; line-height:1.7;
}
.kind-pick{ display:flex; gap:8px; }
.kind-pick button{
  flex:1; height:40px; border:1px solid var(--line); border-radius:10px; cursor:pointer;
  background:#fff; color:var(--ink2); font-family:inherit; font-size:12.5px;
}
.kind-pick button.on{
  border-color:var(--primary); background:var(--psoft);
  color:var(--primary); font-weight:700;
}

/* 分段入口（推荐中心里三块内容的软切换） */
.seg{
  display:flex; gap:6px; margin:16px 0 10px; padding:3px;
  background:var(--line2); border-radius:12px;
}
.seg button{
  flex:1; height:34px; border:0; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--ink3); font-family:inherit; font-size:12.5px;
}
.seg button.on{ background:#fff; color:var(--primary); font-weight:700; box-shadow:0 1px 4px rgba(22,19,43,.08); }

/* ⚠️ 这里**不能**定义全局 .hidden{display:none}：
   .paywall.hidden 靠 transform 下滑（见本文件 215 行），
   给它加上 display:none 会把付费墙的滑出动画打掉（report.html）。
   所以本页新增的收起一律用下面这个专用类名。 */
.sec-hide{ display:none !important; }

/* ============================================================
   分享赚（报告页两处入口 + 极简政策弹层）
   ------------------------------------------------------------
   入口的要诀只有一个字：小。报告页的主角是"付费解锁报告"，
   推荐官入口要在，但绝不能喧宾夺主 —— 所以用描边小胶囊，
   不上渐变、不用金色、不加图标。
   ============================================================ */
.rp-acts{ margin-top:11px; }
.mini-pill{
  height:27px; padding:0 13px; border:1px solid var(--line); border-radius:14px;
  background:transparent; color:var(--ink3);
  font-family:inherit; font-size:12px; cursor:pointer;
}
.mini-pill:active{ background:var(--line2); color:var(--ink2); }

.earn-foot{ text-align:center; padding:4px 0 10px; }
.earn-foot-t{ margin-top:9px; font-size:10.5px; color:var(--ink4); line-height:1.7; }

/* 弹层：底部滑出。遮罩点击也能关 —— 那是所有人的本能动作，
   少这一条就会有人卡在弹层里出不去。 */
.earn-mask{
  position:fixed; inset:0; z-index:60; background:rgba(16,13,34,.46);
  display:flex; align-items:flex-end;
}
.earn-sheet{
  width:100%; max-width:430px; margin:0 auto; background:#fff;
  border-radius:18px 18px 0 0; padding:18px 20px 22px;
  padding-bottom:calc(22px + env(safe-area-inset-bottom));
  animation:earnUp .22s ease-out;
}
@keyframes earnUp{ from{ transform:translateY(26px); opacity:.55 } to{ transform:none; opacity:1 } }
.earn-h{ display:flex; align-items:center; justify-content:space-between; }
.earn-t{ font-size:16px; font-weight:700; color:var(--ink); }
.earn-x{
  width:30px; height:30px; border:0; background:transparent; color:var(--ink4);
  font-size:22px; line-height:1; cursor:pointer;
}
/* 黄底三行：政策的"轻"版本。刻意做得像便签，而不是像合同。 */
.brief-box{
  margin:14px 0 16px; padding:14px 14px 14px 13px;
  background:#FFF9E6; border:1px solid #F1E2AC; border-radius:12px;
}
.brief-li{ display:flex; gap:9px; font-size:13px; color:#6B5220; line-height:1.75; }
.brief-li + .brief-li{ margin-top:9px; }
.brief-li i{
  flex:none; width:17px; height:17px; margin-top:3px; border-radius:50%;
  background:#E8C86A; color:#fff; font-style:normal; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.brief-pot{
  margin-top:11px; padding-top:11px; border-top:1px dashed #E8D79E;
  font-size:12.5px; color:#8A6A22; line-height:1.7;
}
.earn-main{
  width:100%; height:46px; border:0; border-radius:23px;
  background:linear-gradient(135deg,#7A69F0,#4B3FA8); color:#fff;
  font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
}
.earn-main:active{ opacity:.88; }
.earn-ghost{
  width:100%; height:42px; margin-top:8px; border:0; background:transparent;
  color:var(--ink3); font-family:inherit; font-size:13px; cursor:pointer;
}

/* ============================================================
   成为推荐官 · 详情页（share.html 未开通态）
   ------------------------------------------------------------
   这一页的任务是让用户**动手**：关注公众号 → 到菜单点申请。
   所以主体就是三段步骤 + 二维码 + 一键复制名称，别的不放。
   ============================================================ */
.ag-hero{ padding:22px 20px 4px; text-align:center; }
.ag-hero-t{ font-size:19px; font-weight:700; color:var(--ink); }
.ag-hero-s{ margin-top:7px; font-size:12.5px; color:var(--ink3); line-height:1.75; }

.ag-sec{ margin:14px 20px 0; padding:16px; background:#fff; border-radius:var(--r); box-shadow:var(--shadow); }
.ag-sec-t{ font-size:13.5px; font-weight:700; color:var(--ink); }
.ag-sec-s{ margin-top:5px; font-size:12px; color:var(--ink3); line-height:1.7; }

.ag-rate-num{ margin-top:10px; font-size:30px; font-weight:800; color:var(--gold); letter-spacing:.5px; }
.ag-rate-num small{ font-size:14px; font-weight:600; margin-left:2px; }
.ag-points{ margin-top:12px; }
.ag-point{ display:flex; gap:8px; font-size:12px; color:var(--ink2); line-height:1.7; }
.ag-point + .ag-point{ margin-top:7px; }
.ag-point em{ flex:none; width:5px; height:5px; margin-top:7px; border-radius:50%; background:var(--gold2); }

.ag-step{ display:flex; gap:11px; margin-top:13px; }
.ag-step-n{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--psoft); color:var(--primary);
  font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.ag-step-x{ flex:1; font-size:12.5px; color:var(--ink2); line-height:1.75; }

.ag-qr-wrap{ margin-top:14px; text-align:center; }
.ag-qr{
  width:186px; height:186px; margin:0 auto; border-radius:12px;
  border:1px solid var(--line); background:#fff; object-fit:cover; display:block;
}
.ag-qr-ph{
  width:186px; height:186px; margin:0 auto; border-radius:12px;
  border:1px dashed var(--ink4); background:var(--line2);
  display:flex; align-items:center; justify-content:center; padding:14px;
  font-size:11.5px; color:var(--ink3); line-height:1.85; text-align:center;
}
.ag-acct{
  margin-top:12px; text-align:center;
  font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.4px;
}
.ag-acct small{ display:block; margin-bottom:3px; font-size:10.5px; font-weight:400; color:var(--ink4); letter-spacing:0; }
.ag-copy{
  margin-top:12px; width:100%; height:44px; border:1px solid var(--primary);
  border-radius:22px; background:#fff; color:var(--primary);
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
}
.ag-copy:active{ background:var(--psoft); }
.ag-after{
  margin:12px 20px 0; padding:13px 15px; background:var(--psoft);
  border-radius:12px; font-size:12px; color:var(--primary); line-height:1.75;
}
.ag-status{
  margin:14px 20px 0; padding:13px 15px; border-radius:12px;
  font-size:12.5px; line-height:1.7; background:var(--goldsoft); color:#8A6A22;
}
.ag-status.ok{ background:#EAF7EE; color:#1E7A44; }

/* ============================================================
   提现（share.html）—— 版式参考对标：大红卡 + 大字金额 + 说明块
   ------------------------------------------------------------
   一屏只讲一件事：我能拿走多少钱。所以累计、明细、余额都不许
   挤进这里（它们在别的面板），这一屏只有大红卡和说明。
   ============================================================ */
.wd-big{
  margin:16px 20px 0; padding:20px; border-radius:16px;
  background:linear-gradient(135deg,#E2432F,#B7231E); color:#fff;
  box-shadow:0 8px 22px rgba(183,35,30,.24);
}
.wd-big-k{ font-size:12px; opacity:.86; }
.wd-big-n{ margin-top:6px; font-size:38px; font-weight:800; letter-spacing:.5px; }
.wd-big-n small{ font-size:15px; font-weight:600; margin-left:3px; opacity:.9; }
.wd-big-btn{
  margin-top:16px; width:100%; height:44px; border:0; border-radius:22px;
  background:#fff; color:var(--red2); font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
}
.wd-big-btn:disabled{ background:rgba(255,255,255,.42); color:#fff; cursor:default; }
.wd-big-note{ margin-top:9px; font-size:11px; opacity:.86; text-align:center; line-height:1.6; }

.wd-sec{ margin:16px 20px 0; padding:16px; background:#fff; border-radius:var(--r); box-shadow:var(--shadow); }
.wd-sec-t{ font-size:13.5px; font-weight:700; color:var(--ink); }
.wd-row{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:12.5px; }
.wd-row-l{ color:var(--ink3); }
.wd-row-v{ color:var(--ink); font-weight:600; }
.wd-rec{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line2); }
.wd-rec-h{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; }
.wd-rec-h b{ color:var(--ink); }
.wd-rec-s{ margin-top:4px; font-size:10.5px; color:var(--ink4); }
.wd-note-li{ display:flex; gap:8px; margin-top:9px; font-size:11.5px; color:var(--ink3); line-height:1.75; }
.wd-note-li em{ flex:none; width:5px; height:5px; margin-top:7px; border-radius:50%; background:var(--ink4); }

.wd-form{ margin-top:12px; }
.wd-f-row{ margin-top:10px; }
.wd-f-k{ font-size:11.5px; color:var(--ink3); }
.wd-f-v{
  margin-top:5px; width:100%; height:42px; padding:0 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  font-family:inherit; font-size:13.5px; color:var(--ink);
}
.wd-f-v:focus{ outline:none; border-color:var(--primary3); }
.wd-seg2{ display:flex; gap:8px; margin-top:6px; }
.wd-seg2 button{
  flex:1; height:36px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink2); font-family:inherit; font-size:12.5px; cursor:pointer;
}
.wd-seg2 button.on{ border-color:var(--primary); background:var(--psoft); color:var(--primary); font-weight:700; }

/* ============================================================
   生产适配层 · 真机全屏
   ------------------------------------------------------------
   上面的 .phone（390×844 + 44px 圆角 + 黑边投影）是【桌面预览用的原型壳】，
   不属于 H5 本体。真机上 844px 塞不进约 700px 的视口，
   底部常驻的「开始测试」会被裁到屏幕外；390px 宽也会左右溢出。

   内层容器全是 position:absolute; inset:0（.et/.gd/.dk/.qz/.ps、
   .appbar、.scroll），所以只要让 .phone 撑满视口，全站自动适配，
   一个页面都不用改。
   ============================================================ */
@media (max-width:560px), (pointer:coarse){
  html,body{ height:100%; min-height:0; }
  body{
    display:block; padding:0;
    background:var(--bg);
    overscroll-behavior:none;
  }
  .proto-note{ display:none !important; }
  .phone{
    width:100%; height:100%;
    border-radius:0; box-shadow:none;
  }
  /* ⚠️ 关键：.gd-track 是 .gd 的 flex 子项，默认 min-height:auto 会取
     「最高那一屏」的内容高度（第二/三屏的卡片列表很长）⇒ 轨道拒绝收缩，
     把底部常驻的 CTA 顶到视口外。置 0 后轨道可压缩，各屏由自己的
     overflow-y:auto 滚动。这是「真机看不到开始测试」的直接原因。 */
  .gd-track{ min-height:0; }
  .gd{ padding-top:env(safe-area-inset-top); }
  .gd-cta{ padding-bottom:calc(26px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   报告存档引导（2026-09-23）
   ------------------------------------------------------------
   report.html 与 poster.html 页尾共用的一块：告诉用户"报告不会丢，
   关注公众号就能随时找回来"。这是当前链路上最大的一处漏损 ——
   交付只发一个链接，测完的人转身就走，公众号留不下人。

   ⚠️ 一版式两排布（2026-10-09 全站浅色化后，两页底色已统一为浅）：
        .kp-light  报告页 = 竖排居中（底色本来就浅，未动）
        .kp-row    海报页 = 横排紧凑（原名 .kp-dark，poster 换浅色后名不副实 ⇒ 改名）
      两者现在共用同一套浅色令牌，差别只剩**排布**。

   ⚠️ 海报页**必须横排**：.ps 是 position:absolute;inset:0 且**没有 overflow**，
      内容超出会被直接裁掉（没有滚动条可救）。竖排会把海报预览挤小甚至溢出。

   ⚠️ 五色不参与：这块是"功能引导"，不是"类型表达" ——
      全站五色只用在跟判型有关的地方（五色环 / 五行卡 / 刻度 / 海报强调色），
      多一处就花了。这里保持品牌紫金。
   ============================================================ */
.kp{ border-radius:16px; }
.kp-t{ font-weight:600; letter-spacing:.3px; }
.kp-s{ line-height:1.75; }
.kp-hr{ height:1px; }

/* ---- 报告页（浅底 · 竖排居中）---- */
.kp-light{
  margin:6px 20px 26px; padding:22px 18px 20px; text-align:center;
  background:var(--white); border:1px solid var(--line);
  box-shadow:0 4px 16px rgba(22,19,43,.05);
}
.kp-light .kp-t{ font-size:15.5px; color:var(--ink); }
.kp-light .kp-s{ font-size:12.5px; color:var(--ink2); margin-top:9px; }
.kp-light .kp-qr{
  display:block; width:132px; height:132px; margin:16px auto 0;
  border-radius:10px; background:var(--line2);
}
.kp-light .kp-qr-t{ font-size:11px; color:var(--ink3); margin-top:9px; }
.kp-light .kp-hr{ background:var(--line2); margin:16px 0 13px; }
.kp-light .kp-foot{ font-size:11px; color:var(--ink3); line-height:1.7; }

/* ---- 海报页 · 横排紧凑版（2026-10-09 随全站浅色化改造）----
   原名 .kp-dark（深底横排）。poster 页跟着换浅色后名字名不副实 ⇒ 改名 .kp-row，
   配色改用浅色令牌，与 .kp-light 同一套。
   ⚠️ 横排是**硬约束**不是审美选择：海报页 .ps 是 position:absolute;inset:0
      且**没有 overflow**，竖排的卡片一超高就被直接裁掉，没有滚动条可救。
      check_h5 有一条断言钉着 display:flex，防的就是有人顺手把它改成竖排。
   ------------------------------------------------------------ */
.kp-row{
  display:flex; align-items:center; gap:13px; margin-top:13px;
  padding:12px 14px; text-align:left;
  border:1px solid var(--line); background:var(--white); border-radius:14px;
}
.kp-row .kp-qr{
  width:74px; height:74px; flex:0 0 auto; border-radius:9px;
  background:var(--line2);
}
.kp-row .kp-tx{ min-width:0; }
.kp-row .kp-t{ font-size:12.5px; color:var(--primary); }
.kp-row .kp-s{ font-size:11px; color:var(--ink3); margin-top:6px; line-height:1.65; }