/* 溜溜雪球 · 手机端样式（light） */
:root{
  --bg:#f4f8ff; --card:#ffffff; --ink:#1f2328; --muted:#6b7684;
  --brand:#38b6ff; --brand-2:#7dd3fc; --red:#e5484d; --green:#22a06b;
  --line:#e6ebf2; --shadow:0 6px 20px rgba(56,150,255,.12); --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#eaf4ff 0%,#f7fbff 40%,#f4f8ff 100%);
  color:var(--ink); font-size:16px; line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  min-height:100vh;
}
.wrap{max-width:520px;margin:0 auto;padding:20px 18px 120px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.brand img{width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:var(--shadow);object-fit:cover}
.brand .name{font-size:19px;font-weight:800;letter-spacing:.5px}
.brand .sub{font-size:12px;color:var(--muted);margin-top:-4px}

h1{font-size:26px;line-height:1.35;margin:18px 0 8px;font-weight:800}
h1 .hl{color:var(--brand)}
.lead{color:var(--muted);font-size:14px;margin:0 0 18px}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.quote{border-left:4px solid var(--brand-2);padding:8px 12px;color:#3d4b5c;font-size:14px;background:#f7fbff;border-radius:0 10px 10px 0}
.steps{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.step{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.step i{flex:0 0 22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;
  font-style:normal;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700}

.btn{display:block;width:100%;border:0;border-radius:999px;padding:15px;font-size:17px;font-weight:800;
  color:#fff;background:linear-gradient(135deg,var(--brand),#4fc3f7);box-shadow:0 8px 18px rgba(56,182,255,.35);
  cursor:pointer;transition:transform .08s}
.btn:active{transform:scale(.98)}
.btn.ghost{background:#fff;color:var(--brand);border:2px solid var(--brand);box-shadow:none}
.btn[disabled]{opacity:.45;filter:grayscale(.3)}
.btn.small{padding:10px 16px;font-size:14px;width:auto;display:inline-block}

.field{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.field input{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:16px;outline:none}
.field input:focus{border-color:var(--brand)}

.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin:6px 0 12px}
.consent input{width:20px;height:20px;flex:0 0 20px;margin-top:1px}
.consent a{color:var(--brand);text-decoration:none}

/* 小屏 / 微信内置浏览器（可视高度常只剩 700 出头，不是 844）：
   不收紧的话首页主 CTA「免费测一测」底边会落在 729px 被裁掉，
   家长看不到按钮就得往下滚 —— 直接损伤转化。这里整体收紧，
   保证「勾选协议 + 主 CTA + 合规脚注」都在第一屏内。 */
@media (max-height:760px){
  .wrap{padding:12px 18px 120px}
  .brand{margin-bottom:8px}
  .brand img{width:44px;height:44px}
  .brand .name{font-size:17px}
  h1{font-size:22px;line-height:1.25;margin:10px 0 6px}
  .lead{font-size:13px;margin-bottom:10px}
  .card{padding:12px;margin-bottom:8px}
  .quote{font-size:13px;padding:6px 10px}
  .steps{gap:6px;margin-top:2px}
  .field{margin-bottom:8px}
  .consent{margin:4px 0 8px}
  .btn{padding:13px;font-size:16px}
}

/* 练习页 */
.bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bar .back{font-size:22px;text-decoration:none;color:var(--muted)}
.progressbar{flex:1;height:8px;background:#e6eefb;border-radius:999px;overflow:hidden}
.progressbar > i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));width:0;transition:width .35s}
.count{font-size:12px;color:var(--muted);white-space:nowrap}

.pic{width:100%;aspect-ratio:1/.86;border-radius:16px;object-fit:cover;background:#eaf4ff;display:block}
.sentence{font-size:24px;font-weight:800;text-align:center;margin:14px 0 6px;line-height:1.4;word-break:break-word}
.sentence .w{display:inline-block;transition:color .3s}
.sentence .w.bad{color:var(--red)}
.sentence .w.good{color:var(--green)}
.hint{text-align:center;color:var(--muted);font-size:13px;margin:0 0 12px}

.voicebar{display:flex;gap:8px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:14px;color:#44505f;cursor:pointer}
.chip.on{border-color:var(--brand);color:var(--brand);background:#f2faff;font-weight:700}

.recwrap{position:fixed;left:0;right:0;bottom:0;padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(244,248,255,0),#f4f8ff 30%);}
.mic{width:100%;border:0;border-radius:999px;padding:20px;font-size:18px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#38b6ff,#5ad2ff);box-shadow:0 10px 24px rgba(56,182,255,.4);cursor:pointer;
  user-select:none;-webkit-user-select:none;touch-action:none}
.mic.rec{background:linear-gradient(135deg,#ff6b6b,#ff8f8f);box-shadow:0 10px 24px rgba(255,107,107,.4)}
.meter{height:10px;background:#e6eefb;border-radius:999px;margin:10px 4px 0;overflow:hidden}
.meter > i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5ad2ff,#38b6ff);transition:width .08s}

.score{text-align:center;margin:8px 0 4px}
.score .big{font-size:52px;font-weight:900;line-height:1}
.score .big.good{color:var(--green)} .score .big.mid{color:#f5a524} .score .big.bad{color:var(--red)}
.score .lbl{color:var(--muted);font-size:13px}
.metrics{display:flex;gap:8px;margin:14px 0 0}
.metric{flex:1;background:#f7fbff;border-radius:12px;padding:10px;text-align:center}
.metric b{display:block;font-size:19px} .metric span{font-size:12px;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:rgba(31,35,40,.92);color:#fff;
  padding:11px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;max-width:86vw;text-align:center}
.toast.on{opacity:1}

.sheet{position:fixed;inset:0;background:rgba(20,30,45,.45);display:none;z-index:70;overflow-y:auto}
/* ⚠️ 别用 align-items:flex-end / justify-content:flex-end 做「贴底」：
   内容比屏幕高时顶部会跑到视口外，而且 scrollHeight 不算这段溢出 —— 滚都滚不到。
   正解：纵向 flex + 面板 margin-top:auto（有富余就把面板顶到底部，没富余就正常从顶部溢出可滚动）。 */
.sheet.on{display:flex;flex-direction:column}
.sheet .panel{background:#fff;width:100%;max-width:520px;margin:auto auto 0;border-radius:20px 20px 0 0;padding:22px 20px 26px;text-align:center}
.sheet h3{margin:0 0 6px;font-size:20px}
.sheet p{color:var(--muted);font-size:14px;margin:0 0 14px}
.qr{width:190px;height:190px;object-fit:contain;border:1px solid var(--line);border-radius:14px;background:#fff}
.badge{display:inline-block;background:#fff3f3;color:var(--red);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;margin-bottom:8px}

/* 弹窗里的留资区：扫码 → 填微信号（选填）→ 解锁 */
.sheet .tipline{font-size:12px;margin-top:12px}
.sheet .input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;
  font-size:16px;outline:none;text-align:center;margin:2px 0 10px;background:#fff;color:var(--ink)}
.sheet .input:focus{border-color:var(--brand)}
.sheet .tiny{font-size:12px;color:#9aa6b4;margin:0 0 12px;line-height:1.5}
.sheet .unlocked{color:var(--green);font-weight:700;font-size:15px;margin:0 0 14px}

/* 小屏 / 微信内置浏览器（可视高度常只剩 700 出头）：压缩二维码与留白，
   保证「填微信号 + 我已添加」两个按钮一定在第一屏内，不用滚动 */
@media (max-height:800px){
  .qr{width:148px;height:148px}
  .sheet .panel{padding:16px 18px 20px}
  .sheet h3{font-size:18px}
  .sheet p{margin-bottom:10px}
}
.weaklist{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0 4px}
.weaklist span{background:#fff3f3;color:var(--red);border-radius:999px;padding:3px 10px;font-size:13px}
.loading{text-align:center;color:var(--muted);font-size:14px;padding:10px}
.foot{text-align:center;color:#9aa6b4;font-size:12px;margin-top:18px;line-height:1.8}
/* 工信部备案号：国内服务器上架后必须展示，且不依赖任何接口（接口挂了也得显示） */
.foot a{color:#9aa6b4;text-decoration:none}
.foot a:hover{color:var(--brand)}