:root{
  --bg:#f5f6f8; --ink:#101828; --muted:#667085; --faint:#98a2b3;
  --line:rgba(16,24,40,.08); --green:#07c160; --green-d:#05a352;
  --dark:#0b1220; --card:#fff;
  --shadow:0 8px 30px rgba(16,24,40,.07);
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100dvh}
.wrap{max-width:560px;margin:0 auto;padding:0 20px calc(28px + env(safe-area-inset-bottom))}
.screen{display:none;animation:fade .3s ease}
.screen.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hidden{display:none !important}

/* ---------- 开场 ---------- */
.landing{padding-top:16vh;text-align:left}
.kicker{font-size:12px;letter-spacing:.34em;color:var(--faint)}
.landing h1{font-size:42px;line-height:1.28;letter-spacing:.01em;margin:20px 0 0;font-weight:600}
.lead{font-size:15px;line-height:1.95;color:var(--muted);margin:18px 0 0}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.meta-row span{font-size:11.5px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.tiny{font-size:11px;color:var(--faint);line-height:1.9;margin-top:14px}

/* ---------- 按钮 ---------- */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;border:0;border-radius:12px;
  font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.06em;cursor:pointer;margin-top:18px;
  transition:transform .1s,background .15s}
.btn:active{transform:scale(.99)}
.btn.primary{background:var(--green);color:#fff;box-shadow:0 10px 24px rgba(7,193,96,.22)}
.btn.primary:active{background:var(--green-d)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}

/* ---------- 答题 ---------- */
.q-top{display:flex;align-items:center;gap:12px;padding:20px 0 14px}
.q-bar{flex:1;height:4px;background:rgba(16,24,40,.08);border-radius:3px;overflow:hidden}
.q-bar i{display:block;height:100%;width:0;background:var(--green);border-radius:3px;transition:width .35s ease}
.q-num{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.q-card{opacity:0;transform:translateY(10px)}
.q-card.in{opacity:1;transform:none;transition:opacity .28s,transform .28s}
.q-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.chip{font-size:11.5px;color:var(--green-d);background:rgba(7,193,96,.10);border-radius:6px;padding:3px 8px}
.q-sender{font-size:11.5px;color:var(--faint)}
.q-card h2{font-size:24px;line-height:1.45;margin:6px 0 16px;font-weight:600;letter-spacing:.01em}
.chat{background:var(--card);border-radius:16px;padding:16px 14px;box-shadow:var(--shadow)}
.bubble{font-size:15.5px;line-height:1.85;color:var(--ink);background:#f6f7f9;border-radius:4px 14px 14px 14px;
  padding:11px 14px;margin-bottom:10px;max-width:94%}
.bubble:last-child{margin-bottom:0}
.pick-title{font-size:12px;color:var(--faint);letter-spacing:.22em;text-align:center;margin:26px 0 12px}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:15px 16px;font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--ink);
  cursor:pointer;transition:border-color .15s,background .15s,opacity .2s,transform .1s}
.opt:active{transform:scale(.995)}
.opt .k{flex:0 0 auto;color:var(--faint);font-weight:600;font-size:14px;margin-top:1px}
.opt.picked{border-color:var(--green);background:rgba(7,193,96,.06)}
.opt.dim{opacity:.4}
.opt.picked .k{color:var(--green-d)}

/* ---------- 结果 ---------- */
.hero{background:linear-gradient(150deg,#0b1220,#16283d);border-radius:20px;padding:26px 22px 24px;margin-top:22px;color:#fff;
  box-shadow:0 16px 40px rgba(11,18,32,.25)}
.hero-kicker{font-size:11.5px;letter-spacing:.3em;color:rgba(255,255,255,.45)}
.hero h2{font-size:40px;margin:12px 0 4px;letter-spacing:.02em;font-weight:600}
.hero-sub{font-size:14px;color:rgba(255,255,255,.66);line-height:1.7}
.hero-hook{font-size:14px;color:rgba(255,255,255,.9);line-height:1.8;margin-top:14px;padding-left:12px;border-left:2px solid var(--green)}
.hero-tags{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.hero-tags span{font-size:11.5px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.1);border-radius:999px;padding:5px 11px}

.card{background:var(--card);border-radius:16px;padding:18px;margin-top:14px;box-shadow:var(--shadow)}
.card-title{font-size:11.5px;letter-spacing:.22em;color:var(--faint);margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline}
.card-title em{font-style:normal;font-size:10.5px;letter-spacing:.04em;color:var(--faint)}

.energy{display:flex;align-items:baseline;gap:2px}
.energy-num{font-size:52px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.energy-pct{font-size:20px;color:var(--faint)}
.energy-track{height:10px;background:rgba(16,24,40,.07);border-radius:6px;overflow:hidden;margin:12px 0 10px}
.energy-track i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#8ee6b3,#07c160);transition:width .9s cubic-bezier(.2,.7,.3,1)}
.energy-note{font-size:12.5px;color:var(--muted);line-height:1.7}

.traits{display:flex;flex-direction:column;gap:11px}
.bar{display:grid;grid-template-columns:44px 1fr 32px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.bar .track{display:block;height:7px;background:rgba(16,24,40,.07);border-radius:4px;overflow:hidden}
.bar .fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#8ee6b3,#07c160);transition:width .8s}
.bar .v{text-align:right;font-variant-numeric:tabular-nums}

.styles{display:flex;flex-direction:column;gap:9px}
.style-row{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.style-row .sn{color:var(--ink)}
.dots{display:flex;gap:5px}
.dots i{width:16px;height:6px;border-radius:3px;background:rgba(16,24,40,.1)}
.dots i.on{background:var(--green)}
.style-row .cnt{text-align:right;font-size:11.5px;color:var(--faint)}
.second{font-size:12px;color:var(--faint);line-height:1.8;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}

.quote-card{background:linear-gradient(180deg,#fff,#fbfdfb)}
.quote{font-size:20px;line-height:1.7;font-weight:500;letter-spacing:.01em}
.detail{font-size:13px;color:var(--muted);line-height:1.9;margin-top:12px}

.share-card canvas{display:none}
.canvas-wrap img{width:100%;border-radius:14px;display:block;box-shadow:var(--shadow)}
.share-btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.share-btns .btn{margin-top:0;min-height:46px;font-size:14px}
.share-btns .btn.primary{grid-column:1 / -1}

.actions{margin-top:18px}
.foot{text-align:center;font-size:11px;color:var(--faint);line-height:1.9;margin-top:24px}

.review{display:flex;flex-direction:column;gap:12px}
.review-row{padding-bottom:12px;border-bottom:1px dashed var(--line)}
.review-row:last-child{border-bottom:0;padding-bottom:0}
.rv-q{font-size:12px;color:var(--faint);line-height:1.6}
.rv-a{font-size:13.5px;color:var(--ink);line-height:1.7;margin-top:4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rv-k{color:var(--green-d);font-weight:600;font-size:12px}
.rv-style{font-size:10.5px;color:var(--muted);background:#f2f4f7;border-radius:4px;padding:2px 6px;margin-left:auto}


/* 社会化程度 */
.level{display:flex;align-items:baseline;gap:10px}
.level-num{font-size:56px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.level-tag{font-size:13px;color:var(--green-d);background:rgba(7,193,96,.1);border-radius:999px;padding:4px 10px}
.quad{margin-top:6px;font-size:15px;color:var(--ink);line-height:1.7}
.quad span{font-weight:600}
.quad em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.8}
.level-scale{display:flex;gap:4px;margin-top:14px}
.level-scale i{flex:1;text-align:center;font-style:normal;font-size:10.5px;color:var(--faint);background:#f2f4f7;border-radius:4px;padding:4px 0}
.level-scale i.on{background:rgba(7,193,96,.14);color:var(--green-d);font-weight:600}

/* 社会化程度：两条轴 */
.level-cap{font-size:14px;color:var(--faint);margin-left:4px}
.axis{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.axis-row{display:grid;grid-template-columns:52px 1fr 30px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.axis-row .track{display:block;height:7px;background:rgba(16,24,40,.07);border-radius:4px;overflow:hidden}
.axis-row .fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#8ee6b3,#07c160);transition:width .8s}
.axis-row .fill.alt{background:linear-gradient(90deg,#9ec5ff,#3b82f6)}
.axis-row .av{text-align:right;font-variant-numeric:tabular-nums}
.axis-note{font-size:11.5px;color:var(--faint);line-height:1.8;margin-top:12px}

/* 五个场合 */
.rel{display:flex;flex-direction:column;gap:6px}
.rel-row{display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.rel-row .rn{color:var(--ink)}
.rel-row .track{display:block;height:7px;background:rgba(16,24,40,.07);border-radius:4px;overflow:hidden}
.rel-row .fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#8ee6b3,#07c160);transition:width .8s}
.rel-row .rv{text-align:right;font-variant-numeric:tabular-nums}
.rel-row.empty{opacity:.45}
.rel-note{font-size:11px;color:var(--faint);margin:-2px 0 8px 54px;line-height:1.6}
.rel-weak{font-size:12.5px;color:var(--ink);background:#f6f7f9;border-radius:8px;padding:10px 12px;margin-top:10px;line-height:1.7}
.hero-mode{display:inline-block;margin-top:14px;font-size:11.5px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border-radius:999px;padding:5px 11px}
.rel-row .fill{min-width:3px}

/* 付费墙 */
.paywall{position:relative}
.locked{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.locked-row{background:#f8f9fb;border:1px dashed rgba(16,24,40,.12);border-radius:10px;padding:11px 12px}
.locked-row span{display:block;font-size:13.5px;color:var(--ink)}
.locked-row span::before{content:"🔒 ";font-size:12px;opacity:.7}
.locked-row em{display:block;font-style:normal;font-size:11.5px;color:var(--faint);margin-top:3px;line-height:1.6}
.price{display:flex;align-items:baseline;gap:8px;margin:16px 0 4px}
.price b{font-size:30px;letter-spacing:-.02em}
.price s{font-size:13px;color:var(--faint)}
.price em{font-style:normal;font-size:11.5px;color:var(--green-d);background:rgba(7,193,96,.1);border-radius:999px;padding:3px 8px}
.fold summary{cursor:pointer;font-size:12.5px;color:var(--green-d);list-style:none}
.fold summary::-webkit-details-marker{display:none}
.fold summary::before{content:"▸ ";color:var(--green)}
.fold[open] summary::before{content:"▾ "}
.fold .review{margin-top:12px}

/* 免费版档位 */
.level-band{font-size:64px;font-weight:600;letter-spacing:-.02em}
.level-range{font-size:15px;color:var(--muted);margin-left:10px}

/* 改进计划 */
.plan-head{font-size:14px;line-height:1.85;color:var(--ink);background:#f6f7f9;border-radius:10px;padding:12px 14px;margin-bottom:14px}
.plan{display:flex;flex-direction:column;gap:14px}
.plan-item{display:grid;grid-template-columns:26px 1fr;gap:10px}
.plan-item .no{width:24px;height:24px;border-radius:50%;background:rgba(7,193,96,.12);color:var(--green-d);font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.plan-item .pt{font-size:14px;font-weight:600;line-height:1.6}
.plan-item .pb{font-size:12.5px;color:var(--muted);line-height:1.8;margin-top:3px}
.plan-week-title{font-size:11.5px;letter-spacing:.2em;color:var(--faint);margin:18px 0 10px;padding-top:14px;border-top:1px dashed var(--line)}
.plan-week{display:flex;flex-direction:column;gap:8px}
.plan-week .day{display:grid;grid-template-columns:34px 1fr;gap:10px;font-size:12.5px;color:var(--ink-2);line-height:1.7}
.plan-week .day b{color:var(--green-d);font-weight:600;font-size:11.5px;letter-spacing:.04em}
.hero h2.long{font-size:31px;letter-spacing:0;line-height:1.35}
.pct-note{font-size:11.5px;color:var(--faint);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.strength{display:flex;flex-direction:column;gap:10px}
.strength-item{font-size:13px;line-height:1.85;color:var(--ink-2);padding-left:12px;border-left:2px solid rgba(7,193,96,.35)}

/* 语言切换与继续答题 */
.lang-btn{position:absolute;right:18px;top:16px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--muted);cursor:pointer;font-family:var(--sans)}
.landing{position:relative}
.resume{background:#fff;border:1px solid rgba(7,193,96,.35);border-radius:12px;padding:12px 14px;margin:18px 0 6px;box-shadow:var(--shadow)}
.resume-text{font-size:13px;color:var(--ink);line-height:1.7}
.resume-btns{display:flex;gap:8px;margin-top:10px}
.btn.small{min-height:38px;font-size:13px;margin-top:0;flex:1;border-radius:9px}
.context-note{font-size:11.5px;line-height:1.85;color:var(--faint);margin:6px 0 0;padding-left:10px;border-left:2px solid rgba(16,24,40,.12)}
.edition{display:inline-block;margin-top:10px;font-size:10.5px;letter-spacing:.28em;color:var(--green-d);background:rgba(7,193,96,.1);border-radius:999px;padding:4px 10px}
html[lang="en"] .landing h1{font-size:38px;line-height:1.22}

.taste{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.taste span{font-size:11.5px;color:var(--muted);background:#eef0f4;border-radius:6px;padding:5px 10px}

.legal{margin-bottom:10px}
.legal a{color:var(--faint);font-size:11.5px;text-decoration:none;margin-right:12px}
.legal a:hover{color:var(--muted)}

.consent{display:flex;gap:9px;align-items:flex-start;margin:16px 2px 4px;font-size:12px;line-height:1.7;color:var(--muted);cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid #c9cdd4;border-radius:4px;margin:2px 0 0;flex:0 0 auto;background:#fff;position:relative;cursor:pointer}
.consent input:checked{background:var(--green);border-color:var(--green)}
.consent input:checked::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.consent a{color:var(--green);text-decoration:none}

/* 微信内置浏览器提醒 */
.wx-banner{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:#fff4e5;color:#8a5a00;font-size:12px;line-height:1.6;padding:10px 14px;border-bottom:1px solid #f5d9a8}
.wx-banner button{border:0;background:transparent;color:#8a5a00;font-size:18px;line-height:1;padding:0 2px;cursor:pointer}
.wx-modal{position:fixed;inset:0;z-index:200;background:rgba(11,18,32,.55);display:flex;align-items:flex-end;justify-content:center;padding:18px}
.wx-card{background:#fff;border-radius:16px;padding:26px 22px 18px;width:100%;max-width:360px;box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.wx-card h3{margin:0 0 10px;font-size:18px}
.wx-card p{margin:0 0 14px;font-size:13px;line-height:1.8;color:var(--muted)}
.wx-steps{list-style:none;padding:0;margin:0 0 18px}
.wx-steps li{font-size:13px;line-height:1.9;color:var(--ink);padding:6px 0;border-bottom:1px dashed var(--line)}
.wx-steps li:last-child{border-bottom:0}
.wx-icon{width:44px;height:44px;border-radius:12px;background:rgba(7,193,96,.12);color:var(--green-d,#07964a);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
.wx-card .btn{margin-top:8px}

/* 微信提示（强化版） */
.wx-banner{align-items:center;gap:10px;background:#fff1e0;color:#7a4a00;font-size:13.5px;font-weight:600;
  line-height:1.65;padding:14px 16px;border-bottom:1px solid #f3d3a3;border-left:4px solid #f59e0b}
.wx-banner::before{content:'⚠';font-size:16px;line-height:1}
.wx-banner span{flex:1}
.wx-banner button{font-size:20px;color:#b0761f}
.wx-card{padding:30px 24px 20px;border-radius:18px}
.wx-icon{width:56px;height:56px;border-radius:14px;font-size:28px}
.wx-card h3{font-size:22px;margin-bottom:12px}
.wx-card p{font-size:14.5px}
.wx-steps li{font-size:14.5px;padding:9px 0}