* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  body {
    font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",sans-serif;
    background:#F4F6FA; color:#2B3445; min-height:100vh;
  }
  #app { max-width:480px; margin:0 auto; min-height:100vh; background:#F4F6FA; padding-bottom:40px; position:relative; }

  /* 顶部进度 */
  .topbar { position:sticky; top:0; z-index:10; background:#fff; box-shadow:0 1px 4px rgba(30,50,90,.08); }
  .topbar .bar { height:4px; background:#E8ECF3; }
  .topbar .bar i { display:block; height:100%; background:linear-gradient(90deg,#FF7A3D,#FFA940); transition:width .3s; }
  .topbar .step { font-size:12px; color:#8A93A6; text-align:center; padding:7px 0 8px; }

  .wrap { padding:16px; }

  /* 封面 */
  .hero { background:linear-gradient(160deg,#2E5EAA 0%,#3D74C9 55%,#4E8FD9 100%); padding:38px 24px 74px; text-align:center; color:#fff; position:relative; overflow:hidden; }
  .hero-glow { position:absolute; border-radius:50%; background:rgba(255,255,255,.10); }
  .hero-glow.g1 { width:190px; height:190px; top:-70px; left:-55px; }
  .hero-glow.g2 { width:130px; height:130px; bottom:-45px; right:-35px; background:rgba(255,255,255,.08); }
  .brand-row { display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; letter-spacing:3px; opacity:.96; position:relative; }
  .brand-img { height:46px; width:auto; display:block; filter:drop-shadow(0 3px 10px rgba(0,0,0,.18)); }
  .hero h1 { font-size:34px; margin:20px 0 12px; letter-spacing:3px; position:relative; }
  .hero-sub { font-size:14.5px; opacity:.92; line-height:1.8; position:relative; }
  .hero .tags { margin-top:18px; position:relative; }
  .hero .tags span { display:inline-block; font-size:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); padding:4px 12px; border-radius:20px; margin:0 4px; }
  .cover-card { margin:-52px 16px 0; background:#fff; border-radius:16px; padding:22px 18px; box-shadow:0 6px 24px rgba(40,60,100,.10); position:relative; }
  .cover-card h2 { font-size:17px; color:#22314E; margin-bottom:6px; }
  .gain { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px dashed #E8ECF3; text-align:left; }
  .gain:last-of-type { border-bottom:none; }
  .g-ico { width:42px; height:42px; flex:none; background:#FFF4EC; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; }
  .gain b { font-size:14.5px; color:#22314E; display:block; }
  .gain i { font-style:normal; font-size:12px; color:#8A93A6; line-height:1.5; display:block; margin-top:2px; }
  .trust { font-size:11px; color:#A9B2C2; text-align:center; margin-top:13px; letter-spacing:.5px; }

  /* 按钮 */
  .btn { display:block; width:100%; border:none; border-radius:12px; padding:14px 0; font-size:16px; font-weight:bold; cursor:pointer; font-family:inherit; transition:opacity .2s; }
  .btn-main { background:linear-gradient(90deg,#FF7A3D,#FF9A4D); color:#fff; box-shadow:0 6px 16px rgba(255,122,61,.35); }
  .btn-main:active { opacity:.85; }
  .btn-plain { background:#fff; color:#2E5EAA; border:1.5px solid #C9D6EA; margin-top:10px; font-weight:normal; }
  .btn-next-fixed { position:fixed; bottom:0; left:50%; transform:translateX(-50%); max-width:480px; width:100%; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(to top,#F4F6FA 70%,rgba(244,246,250,0)); }
  .btn-next-fixed .btn { border-radius:14px; }

  /* 问题块 */
  .q-block { background:#fff; border-radius:14px; padding:16px 15px; margin-bottom:12px; box-shadow:0 2px 8px rgba(40,60,100,.05); }
  .q-title { font-size:15px; font-weight:bold; color:#22314E; line-height:1.6; margin-bottom:4px; }
  .q-sub { font-size:12px; color:#98A1B3; margin-bottom:12px; }
  .q-sub .must { color:#F0554D; }
  .opt { display:flex; align-items:center; border:1.5px solid #E3E8F1; border-radius:11px; padding:11px 13px; font-size:14.5px; color:#3A465C; margin-top:9px; cursor:pointer; line-height:1.5; background:#fff; transition:all .15s; }
  .opt .mark { width:22px; height:22px; border-radius:50%; border:1.5px solid #C4CDDC; margin-right:10px; flex:none; font-size:12px; display:flex; align-items:center; justify-content:center; color:#98A1B3; }
  .opt.on { border-color:#FF7A3D; background:#FFF4EC; color:#C25517; font-weight:bold; }
  .opt.on .mark { border-color:#FF7A3D; background:#FF7A3D; color:#fff; }
  .chip-wrap { display:flex; flex-wrap:wrap; gap:8px; }
  .chip { border:1.5px solid #E3E8F1; background:#fff; color:#3A465C; border-radius:18px; padding:8px 14px; font-size:13.5px; cursor:pointer; }
  .chip.on { border-color:#FF7A3D; background:#FFF4EC; color:#C25517; font-weight:bold; }

  .sec-head { margin:20px 4px 12px; }
  .sec-head h3 { font-size:16.5px; color:#22314E; display:flex; align-items:center; gap:8px; }
  .sec-head h3 .dot { width:8px; height:8px; border-radius:50%; background:#FF7A3D; }
  .sec-head p { font-size:12px; color:#98A1B3; margin-top:4px; }

  .diff-tag { display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:4px; color:#fff; margin-right:8px; vertical-align:2px; }
  .num-idx { display:inline-block; width:20px; color:#B4BCCB; font-size:13px; margin-right:6px; }
  .opt .abc { margin-right:9px; font-weight:bold; }

  input.txt { width:100%; border:1.5px solid #E3E8F1; border-radius:11px; padding:13px 14px; font-size:15px; font-family:inherit; color:#22314E; outline:none; background:#fff; }
  input.txt:focus { border-color:#FF9A4D; }
  .f-label { font-size:14px; font-weight:bold; color:#22314E; margin:16px 0 8px; }
  .f-label:first-child { margin-top:0; }

  /* 年级组 */
  .grade-group { margin-bottom:14px; }
  .grade-group .g-name { font-size:12px; color:#98A1B3; margin:0 0 8px 2px; }
  .grade-group .g-opts { display:flex; gap:8px; }
  .grade-group .g-opt { flex:1; text-align:center; border:1.5px solid #E3E8F1; background:#fff; color:#3A465C; border-radius:10px; padding:10px 0; font-size:14px; cursor:pointer; }
  .grade-group .g-opt.on { border-color:#FF7A3D; background:#FFF4EC; color:#C25517; font-weight:bold; }

  /* 报告 */
  .rp-hero { background:linear-gradient(160deg,#2E5EAA,#4E8FD9); color:#fff; padding:34px 20px 66px; text-align:center; }
  .rp-hero .done { font-size:13px; opacity:.85; letter-spacing:2px; }
  .rp-hero h1 { font-size:24px; margin:10px 0 8px; }
  .rp-hero p { font-size:13px; opacity:.85; }
  .badge { width:74px; height:74px; border-radius:50%; margin:18px auto 0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; font-weight:bold; box-shadow:0 6px 18px rgba(0,0,0,.18); border:3px solid rgba(255,255,255,.7); }
  .badge b { font-size:30px; line-height:1; }
  .badge i { font-style:normal; font-size:10.5px; font-weight:normal; opacity:.95; margin-top:2px; }
  .rp-card { background:#fff; border-radius:14px; padding:17px 16px; margin-bottom:12px; box-shadow:0 2px 10px rgba(40,60,100,.06); }
  .rp-card h4 { font-size:15px; color:#22314E; margin-bottom:10px; padding-left:9px; border-left:3.5px solid #FF7A3D; line-height:1.25; }
  .subj-row { display:flex; align-items:flex-start; border-bottom:1px dashed #E8ECF3; padding:11px 0; }
  .subj-row:last-child { border-bottom:none; padding-bottom:2px; }
  .subj-row:first-child { padding-top:2px; }
  .subj-name { width:44px; flex:none; font-size:14.5px; font-weight:bold; color:#22314E; padding-top:7px; }
  .subj-grade { width:52px; flex:none; }
  .subj-grade .g-badge { width:38px; height:38px; border-radius:10px; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:bold; }
  .subj-grade .g-badge b { font-size:17px; line-height:1; }
  .subj-grade .g-badge i { font-style:normal; font-size:9px; font-weight:normal; }
  .subj-body { flex:1; }
  .subj-body .g-name { font-size:13px; font-weight:bold; }
  .subj-body .g-note { font-size:12px; color:#6B7689; line-height:1.55; margin-top:2px; }
  .subj-body .g-course { font-size:12px; color:#C25517; background:#FFF4EC; border-radius:6px; padding:5px 8px; margin-top:7px; line-height:1.6; }
  .dots { display:flex; gap:7px; margin:6px 0 10px; }
  .dots span { width:20px; height:20px; border-radius:50%; background:#E8ECF3; }
  .dots span.lit { background:#34A853; }
  .habit-note, .tj-note { font-size:13px; color:#4A5670; line-height:1.7; }
  .course-item { font-size:13.5px; color:#22314E; background:#F6F8FC; border-radius:9px; padding:9px 12px; margin-top:7px; line-height:1.5; }
  .course-item b { color:#C25517; margin-right:6px; }
  .warn-box { background:#FFF7E8; border:1px solid #F5D48A; border-radius:11px; padding:11px 13px; font-size:12.5px; color:#8A6A1F; line-height:1.7; margin-bottom:12px; }
  .cta { background:linear-gradient(135deg,#FF7A3D,#FF9A4D); border-radius:16px; padding:20px 18px; color:#fff; text-align:center; margin-top:16px; box-shadow:0 8px 20px rgba(255,122,61,.35); }
  .cta h3 { font-size:16.5px; margin-bottom:8px; }
  .cta p { font-size:12.5px; line-height:1.7; opacity:.95; }
  .foot { text-align:center; font-size:11px; color:#A9B2C2; margin-top:20px; letter-spacing:1px; }

  .radar-wrap { margin:4px 0 2px; }
  .radar-wrap svg { width:100%; height:auto; display:block; }
  .dim-tip { font-size:12.5px; color:#4A5670; background:#F6F8FC; border-radius:9px; padding:10px 12px; line-height:1.7; margin-top:8px; }
  .sugg { display:flex; gap:9px; margin-top:10px; align-items:flex-start; }
  .sugg b { flex:none; color:#C25517; font-size:13px; background:#FFF4EC; border-radius:6px; padding:2px 8px; }
  .sugg p { flex:1; font-size:13px; color:#3A465C; line-height:1.7; }
  .lead-card { background:linear-gradient(135deg,#2E5EAA,#4E8FD9); border-radius:16px; padding:20px 18px; color:#fff; margin-top:16px; box-shadow:0 8px 20px rgba(46,94,170,.30); }
  .lead-card h3 { font-size:17px; margin-bottom:8px; }
  .lead-card .lc-sub { font-size:12.5px; line-height:1.8; opacity:.93; margin-bottom:13px; }
  .lead-card input.tel { width:100%; border:none; border-radius:11px; padding:13px 14px; font-size:15px; font-family:inherit; outline:none; color:#22314E; }
  .lead-card .btn-lead { width:100%; border:none; border-radius:11px; padding:13px 0; font-size:15.5px; font-weight:bold; background:linear-gradient(90deg,#FF7A3D,#FF9A4D); color:#fff; margin-top:10px; cursor:pointer; font-family:inherit; box-shadow:0 4px 12px rgba(255,122,61,.4); }
  .lead-card .lc-tip { font-size:11.5px; opacity:.88; margin-top:11px; line-height:1.7; text-align:center; }
  .lead-done { text-align:center; padding:10px 0 4px; }
  .lead-done .ok { font-size:36px; }
  .lead-done h4 { font-size:16.5px; margin:10px 0 8px; }
  .lead-done p { font-size:12.5px; line-height:1.9; opacity:.95; }

  .toast { position:fixed; top:20%; left:50%; transform:translateX(-50%); background:rgba(30,40,60,.88); color:#fff; font-size:13.5px; padding:11px 20px; border-radius:10px; z-index:99; display:none; max-width:80%; text-align:center; line-height:1.6; }
  .fade-in { animation:fadeIn .35s ease; }
  @keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.trial-consent { display:flex; gap:9px; align-items:flex-start; margin-top:12px; font-size:12px; line-height:1.6; }
.trial-consent input { flex:none; margin-top:2px; width:16px; height:16px; }

/* Shared visual language for cover, questionnaire and report. */
:root {
  --brand:#244b78;
  --brand-dark:#193a61;
  --brand-soft:#edf4fb;
  --ink:#21334c;
  --muted:#617188;
  --canvas:#ffffff;
  --line:#e1e8f0;
  --radius:10px;
  --card-shadow:none;
}
body { background:#f4f5f7; color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
#app { background:var(--canvas); padding-bottom:48px; }
.wrap { padding:20px; }
.hero,.rp-hero { background:#fff; color:var(--ink); }
.hero { padding:32px 24px 24px; text-align:left; }
.hero-glow { display:none; }
.brand-row { justify-content:flex-start; }
.brand-img { height:36px; filter:none; }
.hero h1 { font-size:30px; font-weight:700; letter-spacing:0; margin:26px 0 10px; }
.hero-sub { font-size:15px; line-height:1.85; color:var(--muted); opacity:1; }
.hero .tags { margin-top:18px; display:flex; justify-content:flex-start; gap:18px; }
.hero .tags span { margin:0; padding:0; font-size:12px; border:0; background:none; color:var(--muted); border-radius:0; }
.cover-card { margin:0 24px; padding:24px 0 0; border-radius:0; border:0; border-top:1px solid var(--line); box-shadow:none; }
.cover-card h2 { font-size:17px; margin-bottom:10px; color:var(--ink); }
.gain { padding:15px 0; border-bottom:1px solid var(--line); gap:14px; }
.g-ico { width:26px; height:32px; background:none; border:0; border-radius:0; font-size:20px; }
.gain b { font-size:15px; color:var(--ink); }
.gain i { font-size:13px; color:var(--muted); line-height:1.65; margin-top:4px; }
.trust,.foot { color:var(--muted); font-size:12px; line-height:1.7; letter-spacing:0; }
.trust { margin-top:16px; }
.foot { margin-top:24px; padding:0 20px; }
.btn,.lead-card .btn-lead { min-height:50px; border-radius:8px; font-size:16px; padding:14px 16px; letter-spacing:.3px; transition:background .15s,transform .15s; }
.btn-main,.lead-card .btn-lead { background:var(--brand); box-shadow:none; color:#fff; }
.btn-main:active,.lead-card .btn-lead:active { background:var(--brand-dark); opacity:1; transform:translateY(1px); }
.btn-plain { color:var(--brand); border:1px solid #c8d7e8; box-shadow:none; }
.btn:focus-visible,.btn-lead:focus-visible { outline:3px solid #7aa6d3; outline-offset:3px; }
.btn-next-fixed { z-index:20; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); }
.btn-next-fixed .btn { border-radius:8px; }
.topbar { background:#fff; box-shadow:none; border-bottom:1px solid var(--line); }
.topbar .bar { height:3px; background:var(--line); }
.topbar .bar i { background:var(--brand); }
.topbar .step { font-size:13px; color:var(--muted); padding:11px 0; }
.q-block,.rp-card { border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; margin-bottom:16px; box-shadow:var(--card-shadow); }
.q-title,.f-label { font-size:16px; color:var(--ink); line-height:1.7; }
.q-title { margin-bottom:8px; }
.q-sub,.grade-group .g-name,.sec-head p { font-size:13px; color:var(--muted); line-height:1.65; }
.opt { border:1px solid var(--line); border-radius:12px; padding:13px 14px; min-height:50px; font-size:15px; color:var(--ink); margin-top:10px; }
.opt .mark { width:24px; height:24px; border-color:#b8c7d9; color:var(--muted); }
.opt.on,.chip.on,.grade-group .g-opt.on { background:var(--brand-soft); border-color:var(--brand); color:var(--brand); font-weight:600; }
.opt.on .mark { border-color:var(--brand); background:var(--brand); color:#fff; }
.opt .abc { color:var(--muted); min-width:18px; }
.opt.on .abc { color:var(--brand); }
.chip { border:1px solid var(--line); font-size:14px; padding:10px 13px; border-radius:10px; min-height:42px; }
input.txt,.lead-card input.tel { font-size:16px; min-height:50px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:#fbfcfe; }
input.txt:focus,.lead-card input.tel:focus { border-color:var(--brand); box-shadow:0 0 0 3px #244b7810; }
input::placeholder { color:#708097; }
.f-label { margin-top:22px; }
.grade-group { margin-bottom:18px; }
.grade-group .g-opts { gap:10px; }
.grade-group .g-opt { border:1px solid var(--line); border-radius:12px; padding:13px 0; font-size:15px; }
.sec-head { margin:24px 2px 14px; }
.sec-head h3 { font-size:18px; color:var(--ink); }
.sec-head h3 .dot { background:var(--brand); }
.diff-tag { font-size:11px; border-radius:5px; padding:3px 8px; }
.rp-hero { padding:28px 24px 24px; text-align:left; border-bottom:1px solid var(--line); }
.rp-hero + .wrap { margin-top:0 !important; }
.rp-hero h1 { font-size:24px; line-height:1.5; margin:10px 0 8px; }
.rp-hero .done { font-size:12px; letter-spacing:2px; color:var(--muted); opacity:1; }
.rp-hero p { font-size:13px; color:var(--muted); opacity:1; line-height:1.7; }
.badge { width:58px; height:58px; margin:16px 0 0; border:0; border-radius:10px; box-shadow:none; }
.badge b { font-size:26px; }
.rp-card { border:0; border-bottom:1px solid var(--line); border-radius:0; padding:8px 0 24px; margin-bottom:24px; }
.rp-card h4 { font-size:17px; line-height:1.5; border-left:0; padding-left:0; margin-bottom:14px; }
.subj-row { display:grid; grid-template-columns:1fr auto; gap:12px; border-bottom-style:solid; }
.subj-name { width:auto; font-size:16px; padding-top:8px; }
.subj-grade { width:auto; }
.subj-body { grid-column:1 / -1; }
.subj-body .sugg { display:block; }
.subj-body .sugg b { display:inline-block; }
.subj-body .sugg p { margin-top:8px; }
.subj-body { min-width:0; }
.subj-body .g-name { font-size:14px; }
.subj-body .g-note { font-size:14px; color:var(--muted); line-height:1.8; margin-top:6px; }
.subj-body .g-course { color:var(--brand); background:var(--brand-soft); font-size:13px; }
.sugg { gap:10px; margin-top:14px; flex-wrap:wrap; }
.sugg b { color:var(--brand); background:var(--brand-soft); border-radius:6px; padding:3px 8px; font-size:13px; }
.sugg p { font-size:14px; color:var(--ink); line-height:1.85; min-width:100px; }
.habit-note,.tj-note { color:var(--muted); font-size:14px; line-height:1.85; }
.dots { gap:8px; margin:10px 0 14px; }
.dots span { width:18px; height:18px; }
.dots span.lit { background:var(--brand); }
.warn-box { background:#faf9f6; border:0; border-left:2px solid #c5a76a; font-size:14px; line-height:1.85; border-radius:0; padding:14px 16px; color:#775b2b; margin-bottom:24px; }
.dim-tip,.course-item { font-size:14px; line-height:1.85; padding:14px 0; border-radius:0; background:none; border-bottom:1px solid var(--line); }
.dim-tip b,.course-item b { color:var(--brand) !important; }
.radar-wrap svg [stroke="#FF7A3D"] { stroke:var(--brand); fill:#244b7820; }
.radar-wrap svg [fill="#FF7A3D"] { fill:var(--brand); }
.lead-card { background:#fff; color:var(--ink); border:0; border-top:1px solid var(--line); border-radius:0; padding:24px 0; box-shadow:none; margin-top:24px; }
.lead-card h3 { font-size:18px; }
.lead-card .lc-sub,.lead-card .lc-tip,.lead-done p { opacity:1; color:var(--muted); font-size:14px; line-height:1.8; }
.trial-consent { font-size:13px; color:var(--muted); line-height:1.8; margin-top:16px; }
.trial-consent input { accent-color:var(--brand); width:18px; height:18px; margin-top:3px; }
.lead-card .btn-lead { margin-top:16px; }
.cta { background:var(--brand); box-shadow:none; border-radius:var(--radius); }
.q-block [style*="color:#98A1B3"],.rp-card [style*="color:#98A1B3"] { color:var(--muted) !important; font-size:13px !important; line-height:1.75 !important; }
.toast { background:var(--brand-dark); border-radius:12px; font-size:14px; box-shadow:0 8px 24px #193a6130; }
@media (min-width:600px) { #app { border-left:1px solid var(--line); border-right:1px solid var(--line); } }
@media (max-width:360px) { .wrap { padding:16px; } .cover-card { margin-left:20px; margin-right:20px; padding:22px 0 0; } .q-block { padding:18px 15px; } .rp-card { padding:8px 0 24px; } .hero h1 { font-size:30px; } }
@media (prefers-reduced-motion:reduce) { .fade-in { animation:none; } *,*::before,*::after { transition:none !important; } }