/* ============================================================
   五行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;

  --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%,#2C2554 0%,#171331 52%,#0C0A16 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 本体） ---------- */
.proto-note{
  color:#B9B4D6; font-size:12.5px; letter-spacing:.2px;
  margin-bottom:14px; text-align:center; line-height:1.7; max-width:520px;
}
.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,#3B3272 0%,#262048 58%,#1B1636 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%);
}
.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 引导页（四屏滑动 · 底部常驻"开始测试"）
   规则：每屏底部固定按钮，不强制读完（V2.2）；
         未勾选隐私政策不可开始（V2.6 P7）。
   ============================================================ */
.gd{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#F7F6FC 0%,#F2F0FA 100%);
}

/* 顶部进度点 */
.gd-dots{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:16px 0 6px;
}
.gd-dots i{
  width:6px; height:6px; border-radius:50%; background:#CFC9E6; transition:.28s;
}
.gd-dots i.on{ width:18px; border-radius:4px; background:linear-gradient(90deg,var(--primary2),var(--gold)); }

/* 横向轨道 */
.gd-track{
  flex:1 1 auto; display:flex;
  transition:transform .42s cubic-bezier(.32,.72,.35,1);
  will-change:transform;
}
.gd-screen{
  flex:0 0 100%; overflow-y:auto; overscroll-behavior:contain;
  padding:8px 24px 18px;
}
.gd-screen::-webkit-scrollbar{ width:0; }

/* ---- 第一屏：钩子 ---- */
.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:3px;
  background:linear-gradient(180deg,var(--primary2),var(--gold));
}
.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;
}
.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:radial-gradient(760px 520px at 50% 24%,#302A5E 0%,#1B1636 58%,#0D0B18 100%);
  color:#fff; 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;
  font-size:29px; 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:#B6AFD4; line-height:1.9; margin-bottom:26px; }
.et-src{
  font-size:10.5px; letter-spacing:1px; color:#8E86B4;
  border:1px solid #3A3360; border-radius:20px; padding:3px 11px; margin-bottom:22px;
}
.et-steps{ width:100%; margin-bottom:26px; }
.et-step{
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:#8E86B4; margin-bottom:10px; text-align:left;
  transition:color .3s;
}
.et-step .d{
  flex:0 0 auto; width:15px; height:15px; border-radius:50%;
  border:1.5px solid #4A4272; display:flex; align-items:center; justify-content:center;
  font-size:9px; color:transparent; transition:.3s;
}
.et-step.done{ color:#D8D2F0; }
.et-step.done .d{ background:linear-gradient(135deg,#E7C878,#B9913C); border-color:#E7C878; color:#2B2246; }
.et-step.now .d{ border-color:#E7C878; }
.et-priv{ font-size:10.5px; color:#6E6794; line-height:1.8; margin-top:8px; }

/* ============================================================
   P3 轮次过渡卡 / P5 进度卡（共用一套深色版式）
   ============================================================ */
.dk{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:34px 30px 28px;
  background:radial-gradient(760px 520px at 50% 20%,#302A5E 0%,#1B1636 58%,#0D0B18 100%);
  color:#fff;
}
.dk-top{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:#8E86B4; letter-spacing:.6px;
}
.dk-top b{ color:#E7C878; 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:#2E2851; 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:#6E6794; }
.rb-lab span.on{ color:#E7C878; }

/* ---- 主体 ---- */
.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:#8E86B4; 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,#F8ECC4,#E7C878 42%,#B9913C);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dk-num small{
  font-size:15px; font-weight:400; margin-left:5px;
  color:#8E86B4; -webkit-text-fill-color:#8E86B4;
}
.dk-sub{
  font-size:12.5px; color:#B6AFD4; line-height:1.95;
  margin-top:16px; max-width:288px;
}

/* ---- 下一轮预告卡（P3） ---- */
.dk-next{
  width:100%; border:1px solid #3A3360; border-radius:16px;
  background:rgba(255,255,255,.03); padding:16px 18px;
  margin-top:22px; text-align:left;
}
.dk-next .nt{ font-size:10.5px; letter-spacing:1.2px; color:#8E86B4; margin-bottom:9px; }
.dk-next .nn{ font-size:16px; font-weight:600; margin-bottom:7px; }
.dk-next .nn i{ font-style:normal; color:#E7C878; }
.dk-next .nd{ font-size:12px; color:#B6AFD4; line-height:1.85; }

/* ---- 记录号条（P5） ---- */
.dk-rec{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  border:1px dashed #3A3360; border-radius:12px; padding:12px 16px; margin-top:20px;
}
.dk-rec .rl{ font-size:11px; color:#8E86B4; }
.dk-rec .rv{ font-size:14px; font-weight:600; letter-spacing:1.4px; color:#E7C878; }
.dk-rectip{ font-size:10.5px; color:#6E6794; 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;
  background:linear-gradient(135deg,#E7C878,#B9913C); color:#2B2246;
  box-shadow:0 12px 28px rgba(185,145,60,.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:#B6AFD4; border:1px solid #3A3360; box-shadow:none;
}
.dk-note{
  font-size:10.5px; color:#6E6794; text-align:center;
  line-height:1.8; margin-top:12px;
}

/* ============================================================
   P4 答题页（沿用 P3/P5/P6 深色版式）
   ============================================================ */
.qz{
  position:absolute; inset:0;
  background:radial-gradient(760px 520px at 50% 16%,#302A5E 0%,#1B1636 58%,#0D0B18 100%);
  color:#fff;
}

/* ---- 每轮开测前的过渡卡 ---- */
.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:radial-gradient(700px 520px at 50% 30%,#332C63 0%,#1B1636 62%,#0D0B18 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);
}
.qi-title{ font-size:19px; font-weight:600; letter-spacing:.6px; margin-bottom:15px; }
.qi-text{ font-size:13px; color:#B6AFD4; line-height:2.05; max-width:282px; }
.qi-prog{ font-size:11px; color:#8E86B4; letter-spacing:.8px; margin:26px 0 30px; }

/* ---- 答题主体 ---- */
.qz-main{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:34px 30px 26px;
}
.qz-top{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:#8E86B4; letter-spacing:.6px;
}
.qz-top b{ color:#E7C878; font-weight:600; letter-spacing:1.1px; }

.qz-prog{ margin-top:14px; }
.qz-bar{ height:5px; border-radius:3px; background:#2E2851; 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:#8E86B4; letter-spacing:1px; margin-top:8px;
  text-align:right; font-variant-numeric:tabular-nums;
}

.qz-body{ flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0; }
.qz-kicker{ font-size:10.5px; letter-spacing:1.3px; color:#8E86B4; 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 #3A3360; border-radius:15px;
  background:rgba(255,255,255,.035); 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:#E6E2F7; }

/* ---- 五级档位 ---- */
.qz-scale{ display:flex; gap:6px; margin-top:20px; }
.qz-opt{
  flex:1; border:1px solid #3A3360; border-radius:11px;
  background:rgba(255,255,255,.03); color:#B6AFD4;
  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 #4E4778; background:transparent; transition:all .16s;
}
.qz-opt:active{ transform:translateY(1px); }
.qz-opt.on{
  border-color:#E7C878; color:#FFF3D4;
  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 #3A3360; border-radius:23px;
  background:transparent; color:#B6AFD4;
  font-family:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; transition:background .15s;
}
.qz-btn:active{ background:rgba(255,255,255,.06); }
.qz-btn.ghost + .qz-btn.ghost{ margin-top:10px; }
.qz-note{
  font-size:10.5px; color:#6E6794; text-align:center;
  line-height:1.8; margin-top:12px;
}

/* ============================================================
   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 #3A3360;
}
.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;
  font-size:29px; 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:#2E2851;
  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:#8E86B4;
  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:#6E6794;
  transition:color .3s;
}
.gn-step .d{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  border:1px solid #3A3360; color:#6E6794;
  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:#D8D2F0; }
.gn-step.on .d{ border-color:#E7C878; }
.gn-step.done{ color:#fff; }
.gn-step.done .d{
  background:linear-gradient(135deg,#E7C878,#B9913C);
  border-color:#E7C878; color:#2B2246;
}
.gn-step.done .nt{ color:#8E86B4; }

/* ============================================================
   P8 结果海报页
   ============================================================ */
.ps{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:34px 30px 28px;
  background:radial-gradient(760px 520px at 50% 18%,#302A5E 0%,#1B1636 58%,#0D0B18 100%);
  color:#fff;
}
.ps-top{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:#8E86B4; letter-spacing:.6px;
}
.ps-top b{ color:#E7C878; 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:#8E86B4; 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:#B6AFD4; text-align:center; margin-top:13px; }

.ps-share{
  width:100%; border:1px solid #3A3360; border-radius:14px;
  background:rgba(255,255,255,.03); padding:13px 15px; margin-top:13px;
}
.ps-share .st{ font-size:10.5px; letter-spacing:1.1px; color:#8E86B4; margin-bottom:7px; }
.ps-share .sc{ font-size:12px; color:#D8D2F0; line-height:1.8; }
.ps-share button{
  margin-top:11px; width:100%; height:38px; border-radius:19px;
  border:1px solid #E7C878; background:transparent; color:#E7C878;
  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; }
.scale-row .sr-d{ flex:0 0 26px; font-size:12.5px; color:var(--ink2); font-weight:600; }
.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);
}
.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; }

/* 板块（可展开） */
.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; }