/* ===== 互动测评 H5 ===== */

:root{
  --bg:#DFE3E2;
  --bgSoft:#EEEFEC;
  --surface:#FCFBF8;
  --primary:#7A8B97;
  --primary-deep:#4A5A66;
  --accent:#B0897C;
  --text:#333940;
  --muted:#8A9095;
  --line:#DCE0DE;
  --radius:22px;
}

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

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
              "Microsoft YaHei","Helvetica Neue",sans-serif;
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  transition:background .6s ease;
}

.wrap{
  width:100%;
  max-width:460px;
  margin:0 auto;
  min-height:100vh;
  padding:0 20px 56px;
}

/* ---------- 屏幕切换 ---------- */
.screen{display:none}
.screen.active{display:block;animation:rise .55s cubic-bezier(.22,.8,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ============ 封面 ============ */
.cover{text-align:center}
.cover.active{
  display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - 56px);
}

.cover .brand{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:11.5px;letter-spacing:.3em;
  color:var(--primary);opacity:.85;margin-bottom:26px;
}
.bm{width:16px;height:14px;flex:none}
.bm path{fill:none;stroke:var(--primary);stroke-width:1.5;stroke-linejoin:round}

.wm{
  display:flex;justify-content:center;
  margin-top:var(--sec);
  font-size:11px;letter-spacing:.34em;
  color:var(--muted);opacity:.5;
}

.mark{width:58px;height:58px;margin:0 auto 30px;display:block}
.mark circle{fill:none}
.mark .o{stroke:var(--primary);stroke-width:1;opacity:.32}
.mark .m{stroke:var(--primary);stroke-width:1;opacity:.55}
.mark .i{fill:var(--accent);stroke:none}

.cover h1{
  font-size:clamp(23px,6.1vw,27px);
  line-height:1.5;font-weight:600;letter-spacing:.02em;
  margin-bottom:18px;text-wrap:balance;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;
}
.cover h1 .l1{display:block;color:var(--text)}
.cover h1 .l2{display:block;color:var(--accent)}
.cover h1 .l2:empty{display:none}

.cover .sub{
  font-size:15px;line-height:1.95;color:var(--muted);
  letter-spacing:.02em;margin:0 auto 38px;max-width:17em;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;text-wrap:balance;
}

.cover .note{
  margin-top:26px;font-size:11.5px;color:var(--muted);
  opacity:.72;line-height:1.85;letter-spacing:.02em;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;
}

/* 开篇免责声明 */
.disc{
  margin-top:28px;padding:15px 17px;
  background:rgba(255,255,255,.46);
  border-radius:14px;text-align:left;
}
.disc .dt{
  font-size:11.5px;color:var(--primary-deep);
  letter-spacing:.14em;margin-bottom:7px;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;
}
.disc .db{
  font-size:11.5px;color:var(--muted);
  line-height:1.85;letter-spacing:.02em;opacity:.95;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;
}

/* ============ 按钮 ============
   居中要点：用 flex 居中文字，不要再用 text-indent / padding 补偿字距，
   也不要在 margin:0 auto 之后覆盖 margin-right（会把按钮推到右侧）。 */
.btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:260px;margin:0 auto;
  padding:16px 0;border:none;border-radius:100px;
  background:var(--primary);color:#fff;
  font-family:inherit;font-size:15.5px;letter-spacing:.14em;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(74,90,102,.18);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn:active{transform:translateY(2px);box-shadow:0 5px 14px rgba(74,90,102,.15)}
.btn.ghost{
  background:transparent;color:var(--primary-deep);
  border:1px solid rgba(94,113,128,.28);box-shadow:none;
  max-width:210px;padding:13px 0;font-size:14px;
}

/* ============ 答题 ============ */
.quiz{padding-top:clamp(18px,11vh,110px)}

.prog-wrap{margin-bottom:32px}
.prog-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;
}
.prog-cur{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.prog-cur b{color:var(--primary-deep);font-size:13.5px;font-weight:600}
.prog-pct{font-size:12px;color:var(--muted);opacity:.75;letter-spacing:.02em}
.prog-bar{height:2px;background:rgba(74,90,102,.09);border-radius:100px;overflow:hidden}
.prog-in{
  height:100%;width:0;border-radius:100px;background:var(--primary);
  transition:width .45s cubic-bezier(.3,.9,.4,1);
}

.q-card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:30px 24px 26px;
  box-shadow:0 14px 40px rgba(74,90,102,.09);
}

.q-num{
  font-size:12px;letter-spacing:.2em;
  color:var(--primary);opacity:.8;margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}

.q-text{
  font-size:clamp(16px,4.35vw,18.5px);
  line-height:1.7;font-weight:500;letter-spacing:.02em;
  color:var(--text);margin-bottom:10px;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;
}

.q-scope{
  display:block;font-size:12px;color:var(--muted);
  letter-spacing:.02em;padding-bottom:16px;
  line-height:1.8;white-space:pre-line;
}

.q-div{height:1px;background:var(--line);margin-bottom:20px}

/* 选项 */
.opts{display:flex;flex-direction:column;gap:9px;counter-reset:opt}
.opt{
  width:100%;text-align:left;font-family:inherit;
  background:transparent;border:1px solid var(--line);border-radius:13px;
  padding:13px 15px;cursor:pointer;
  display:flex;align-items:center;gap:13px;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.opt::before{
  counter-increment:opt;content:counter(opt,upper-alpha);
  font-size:11.5px;letter-spacing:.02em;color:var(--muted);
  opacity:.7;flex:none;width:14px;
}
.opt .txt{font-size:15px;line-height:1.62;letter-spacing:.02em;flex:1;min-width:0;word-break:keep-all;overflow-wrap:break-word;line-break:strict}
.opt .dot{
  width:15px;height:15px;border-radius:50%;
  border:1px solid var(--line);flex:none;
  transition:all .22s ease;
}
.opt:active{transform:scale(.99)}
.opt.on{
  background:var(--primary);border-color:var(--primary);
  box-shadow:0 6px 16px rgba(74,90,102,.15);
}
.opt.on::before{color:#fff;opacity:.7}
.opt.on .txt{color:#fff}
.opt.on .dot{background:#fff;border-color:#fff}

.back{
  margin-top:22px;text-align:center;font-size:13px;color:var(--muted);
  letter-spacing:.02em;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.back.show{opacity:1;pointer-events:auto}

/* ============ 计算中 ============ */
.calc{text-align:center;padding-top:30vh}
.calc .ring{
  width:44px;height:44px;margin:0 auto 24px;
  border:1.5px solid rgba(255,255,255,.75);
  border-top-color:var(--primary);
  border-radius:50%;animation:spin .95s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.calc p{font-size:13.5px;color:var(--muted);letter-spacing:.02em}

/* ============ 结果 ============
   统一节奏：字距 --ls、行距 --lh、区块间距 --sec、区块内间距 --itm。
   结果页内所有文字都走这三个值，保证每行字间距/行距/段距一致。 */
.result{
  padding-top:48px;
  --ls:.02em;
  --lh:1.9;
  --sec:34px;
  --itm:14px;
  letter-spacing:var(--ls);
  line-height:var(--lh);
}
.result *{letter-spacing:var(--ls)}

.res-head{text-align:center;margin-bottom:var(--sec)}

/* 卡通表情 */
.res-face{width:62px;height:62px;margin:0 auto var(--itm)}
.res-face svg{width:100%;height:100%;display:block}
.res-face .f-face{fill:var(--surface);stroke:var(--primary);stroke-width:1.3}
.res-face .f-line{fill:none;stroke:var(--primary-deep);stroke-width:1.7;stroke-linecap:round}
.res-face .f-dot{fill:var(--primary-deep)}
.res-face .f-soft{fill:var(--accent);opacity:.32}
.res-face .f-drop{fill:var(--accent);opacity:.6}

.res-tag{margin-bottom:var(--itm)}
.res-tag span{
  display:inline-block;padding:2px 12px 3px;
  border:1px solid var(--accent);border-radius:100px;
  font-size:11.5px;color:var(--accent);
}

.res-name{
  font-size:clamp(20px,5.75vw,25px);font-weight:600;line-height:1.5;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;
}

/* 分数卡 */
.score-card{
  background:var(--surface);border-radius:var(--radius);
  padding:28px 26px 26px;box-shadow:0 14px 40px rgba(74,90,102,.09);
}

.score-top{
  display:flex;align-items:baseline;justify-content:center;gap:6px;
}
.score-top b{
  font-size:46px;font-weight:500;color:var(--primary-deep);
  line-height:1.15;
}
.score-top span{font-size:13px;color:var(--muted)}

.score-scale{
  height:2px;border-radius:100px;margin:20px 0 8px;
  background:rgba(74,90,102,.09);position:relative;
}
.score-pin{
  position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2.5px solid var(--surface);
  transform:translate(-50%,-50%);
  transition:left 1s cubic-bezier(.3,.9,.4,1);
  box-shadow:0 0 0 1px var(--accent);
}
.score-ends{
  display:flex;justify-content:space-between;
  font-size:11.5px;color:var(--muted);opacity:.8;
}

/* 维度 */
.dims{margin-top:var(--sec);padding-top:24px;border-top:1px solid var(--line)}
.dim{margin-bottom:var(--itm)}
.dim:last-child{margin-bottom:0}
.dim-h{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-bottom:7px;
}
.dim-h .nm{font-size:13.5px;color:var(--text);flex:none}
.dim-h .ds{
  font-size:11.5px;color:var(--muted);opacity:.85;
  flex:1;min-width:0;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dim-h b{font-size:12.5px;color:var(--primary-deep);font-weight:600;flex:none}
.dim-bar{height:2px;background:rgba(0,0,0,.055);border-radius:100px;overflow:hidden}
.dim-in{
  height:100%;width:0;border-radius:100px;background:var(--primary);
  transition:width 1.1s cubic-bezier(.3,.9,.4,1);
}

/* 文字区 */
.block{margin-top:var(--sec)}
.block h3{
  font-size:12px;color:var(--primary);font-weight:500;
  margin-bottom:var(--itm);
  display:flex;align-items:center;gap:12px;
}
.block h3::after{content:'';flex:1;height:1px;background:var(--line)}
.block p{font-size:15.5px;color:var(--text);opacity:.92;word-break:keep-all;overflow-wrap:break-word;line-break:strict}

.advice{list-style:none;counter-reset:adv}
.advice li{
  counter-increment:adv;
  display:flex;gap:13px;align-items:flex-start;
  margin-top:var(--itm);padding-bottom:var(--itm);
  border-bottom:1px solid var(--line);
}
.advice li:first-child{margin-top:0}
.advice li:last-child{border-bottom:none;padding-bottom:0}
.advice li::before{
  content:counter(adv,decimal-leading-zero);
  font-size:11.5px;color:var(--accent);flex:none;padding-top:4px;
  line-height:1.6;
}
.advice li span{font-size:15.5px;opacity:.92;flex:1;min-width:0}

/* 彩蛋：分项维度解读（默认收起） */
.egg-btn{
  width:100%;padding:13px 0;cursor:pointer;
  background:transparent;border:1px dashed var(--line);
  border-radius:100px;font-family:inherit;
  font-size:13.5px;color:var(--primary-deep);
  transition:border-color .2s ease;
}
.egg-btn:active{border-color:var(--primary)}

.egg-body{display:none;margin-top:var(--itm);padding-top:var(--itm)}
.egg-body.open{
  display:block;
  animation:rise .4s cubic-bezier(.22,.8,.3,1);
}

.edim{margin-bottom:var(--itm)}
.edim:last-child{margin-bottom:0}
.edim-h{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-bottom:6px;
}
.edim-h .nm{font-size:13.5px;color:var(--text);flex:none}
.edim-h b{
  font-size:12px;color:var(--muted);font-weight:400;
  font-variant-numeric:tabular-nums;flex:none;
}
.edim-bar{
  height:2px;background:rgba(0,0,0,.055);
  border-radius:100px;overflow:hidden;
}
.edim-in{
  height:100%;width:0;border-radius:100px;background:var(--primary);
  transition:width 1s cubic-bezier(.3,.9,.4,1);
}
.egg-body .edim-d{
  font-size:11.5px;color:var(--muted);line-height:1.8;
  margin-top:7px;opacity:.9;
}

.res-note{
  font-size:11.5px;color:var(--muted);text-align:center;
  margin:var(--sec) 0;opacity:.78;padding:0 8px;
}

.actions{display:flex;justify-content:center}
.tip{
  text-align:center;font-size:11.5px;color:var(--muted);
  margin-top:16px;min-height:16px;opacity:.75;
}

/* ---------- 多因子模式：雷达图 / 内耗 / 觉察提示 ---------- */

/* 复合雷点时并排两个表情 */
.res-face.duo{width:auto;display:flex;justify-content:center;gap:18px}
.res-face.duo svg{width:56px;height:56px}

/* 摘要多段（复合雷点会有两段） */
#r-summary .sp,#r-tip-text .sp{display:block}
#r-summary .sp + .sp,#r-tip-text .sp + .sp{margin-top:10px}

.radar-card{
  background:var(--surface);border-radius:var(--radius);
  padding:24px 18px 18px;box-shadow:0 14px 40px rgba(74,90,102,.09);
  margin-top:var(--sec);
}
.radar-h{
  font-size:13px;color:var(--muted);text-align:center;
  letter-spacing:.02em;margin-bottom:6px;
}
.radar-box{display:flex;justify-content:center}
.radar-box .rd{width:100%;max-width:290px;height:auto;display:block}

.rd .rd-grid{fill:none;stroke:var(--line);stroke-width:1}
.rd .rd-axis{stroke:var(--line);stroke-width:1}
.rd .rd-area{
  fill:var(--primary);fill-opacity:.24;
  stroke:var(--primary);stroke-width:1.4;stroke-linejoin:round;
  transform-box:fill-box;transform-origin:center;
}
.rd .rd-dot{fill:var(--primary)}
.rd .rd-lb{
  fill:var(--muted);font-size:11.5px;font-weight:400;
  font-family:inherit;letter-spacing:.02em;
}
.rd.in .rd-area{animation:rdIn .85s cubic-bezier(.22,.8,.3,1) both}
@keyframes rdIn{
  from{transform:scale(.18);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* 内耗等级 */
.f5 .f5-tag{
  font-size:15.5px;font-weight:500;color:var(--primary-deep);
  margin-bottom:14px;letter-spacing:.02em;
}
.f5 .f5-bar{
  height:12px;border-radius:99px;
  background:rgba(74,90,102,.16);
  box-shadow:inset 0 1px 2px rgba(74,90,102,.12);
  overflow:hidden;margin-bottom:16px;
}
.f5 .f5-bar i{
  display:block;height:100%;width:0%;
  border-radius:99px;
  background:var(--primary-deep);
  transition:width .9s cubic-bezier(.25,.8,.3,1);
}

/* 觉察小提示 */
.tipb{
  background:var(--bgSoft);border-radius:var(--radius);
  padding:20px 22px;
}
.tipb h3::after{background:var(--line)}
.tipb p{font-size:15px}

/* ICP 备案号（国内主机上线后页面底部必须显示，未配置时 JS 隐藏） */
.icp{
  text-align:center;font-size:11px;line-height:1.8;
  color:var(--muted);opacity:.62;letter-spacing:.02em;
  padding:6px 0 14px;word-break:keep-all;overflow-wrap:break-word;
}
.icp a{color:inherit;text-decoration:none}

/* 兜底 */
.fallback{
  max-width:460px;margin:22vh auto;padding:34px;text-align:center;
  background:var(--surface);border-radius:var(--radius);
  font-size:15px;line-height:1.9;
}