/* talk.css — 听说专家 L&S Pro 全站样式（移动优先，家族风格） */
:root{
  --brand:#e8590c; --brand-deep:#c2410c; --brand-soft:#fff1e6;
  --dark:#2a2320; --ink:#26211c; --sub:#8a7f75; --line:#eee2d6;
  --bg:#faf6f1; --card:#fff; --ok:#2f9e44; --warn:#e8590c; --bad:#e03131;
  --teal:#0c8599; --gold:#f59f00;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,'PingFang SC','Microsoft YaHei',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ── 顶栏（家族样式 + 移动横滚） ── */
.topbar{background:var(--dark);position:sticky;top:0;z-index:100}
.topbar .in{max-width:1080px;margin:0 auto;padding:0 4%;height:56px;display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo .badge{background:var(--brand);color:#fff;font-weight:800;font-size:13px;border-radius:9px;padding:5px 8px}
.logo .txt{color:#fff;font-weight:700;font-size:15px;line-height:1.15}
.logo .txt small{display:block;font-size:9px;color:#ffffff80;font-weight:400;letter-spacing:.5px}
.nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nv{color:#ffffffcc;font-size:13px;padding:6px 9px;border-radius:8px;white-space:nowrap}
.nv:active,.nv:hover{background:#ffffff1a;color:#fff}
.nav-auth{flex-shrink:0}
.chip{background:#ffffff1f;color:#fff;font-size:12px;border-radius:99px;padding:5px 12px;display:inline-block}
@media (max-width:640px){
  .topbar .in{height:auto;flex-wrap:wrap;padding:8px 4%;row-gap:6px}
  .nav{width:100%;margin-left:0;order:3}
}

.wrap{max-width:1080px;margin:0 auto;padding:0 4% 60px}

/* ── 首页 ── */
.hero{padding:26px 0 10px}
.hero h1{font-size:24px;line-height:1.35}
.hero h1 span{color:var(--brand)}
.hero p{color:var(--sub);font-size:13.5px;margin-top:6px}

.today{background:linear-gradient(135deg,var(--brand),#f76707);border-radius:20px;color:#fff;padding:22px 20px;margin:16px 0;box-shadow:0 8px 24px #e8590c33}
.today .row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.today h2{font-size:19px}
.today .meta{font-size:12.5px;opacity:.92;margin-top:3px}
.gobtn{background:#fff;color:var(--brand-deep);font-weight:800;font-size:16px;border-radius:14px;padding:13px 26px;box-shadow:0 3px 10px #0002;transition:transform .12s}
.gobtn:active{transform:scale(.96)}
.streakbar{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.spill{background:#ffffff26;border-radius:12px;padding:7px 13px;font-size:13px;display:flex;align-items:center;gap:6px}
.spill b{font-size:16px}

.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.scard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.scard h4{font-size:12.5px;color:var(--sub);font-weight:500}
.scard .v{font-size:20px;font-weight:800;margin-top:2px}
.radar-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;align-items:center;gap:10px}
.radar-box canvas{flex-shrink:0}
.radar-legend{font-size:12px;color:var(--sub);line-height:1.9}
.radar-legend b{color:var(--ink)}

.sec-title{font-size:17px;font-weight:800;margin:26px 0 4px}
.sec-title small{font-weight:400;color:var(--sub);font-size:12.5px;margin-left:8px}
.bandtabs{display:flex;gap:8px;margin:10px 0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.bandtabs::-webkit-scrollbar{display:none}
.btab{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:7px 15px;font-size:13.5px;white-space:nowrap;color:var(--sub)}
.btab.on{background:var(--dark);color:#fff;border-color:var(--dark)}

.scene-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.scene{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;transition:transform .12s}
.scene:active{transform:scale(.97)}
.scene .nm{font-weight:700;font-size:14.5px}
.scene .role{font-size:11.5px;color:var(--sub);margin:2px 0 8px}
.lvrow{display:flex;gap:5px}
.lv{flex:1;text-align:center;font-size:11px;border-radius:7px;padding:4px 0;background:var(--bg);color:var(--sub);border:1px solid var(--line)}
.lv.done{background:var(--ok);color:#fff;border-color:var(--ok)}
.lv.rec{background:var(--brand-soft);color:var(--brand-deep);border-color:var(--brand);font-weight:700}

/* ── Session 播放器 ── */
.sess-top{position:sticky;top:0;background:var(--bg);z-index:50;padding:12px 0 8px;display:flex;align-items:center;gap:10px}
.sess-top .back{font-size:20px;color:var(--sub);padding:4px 8px}
.prog{flex:1;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .4s}
.stagechip{font-size:12px;color:var(--sub);white-space:nowrap}
.stage-title{font-size:18px;font-weight:800;margin:14px 0 2px}
.stage-sub{font-size:12.5px;color:var(--sub);margin-bottom:14px}

.qcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 16px;text-align:center}
.playbtn{width:76px;height:76px;border-radius:50%;background:var(--brand);color:#fff;font-size:30px;box-shadow:0 6px 18px #e8590c40;transition:transform .12s;margin:8px auto}
.playbtn:active{transform:scale(.92)}
.playbtn.playing{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 18px #e8590c40}50%{box-shadow:0 6px 30px #e8590c88}}
.opts{display:grid;gap:10px;margin-top:16px}
.opt{background:var(--bg);border:2px solid var(--line);border-radius:13px;padding:13px;font-size:16px;font-weight:600;transition:all .15s}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt.right{border-color:var(--ok);background:#ebfbee;color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:#fff5f5;color:var(--bad)}
.prompt-cn{font-size:13px;color:var(--sub)}

.shadow-en{font-size:19px;font-weight:700;line-height:1.5;margin:8px 0 4px}
.shadow-cn{font-size:13px;color:var(--sub)}
.focus-tip{background:var(--brand-soft);color:var(--brand-deep);font-size:12.5px;border-radius:10px;padding:8px 12px;margin:12px 0;text-align:left}
.speedrow{display:flex;gap:8px;justify-content:center;margin:10px 0}
.spd{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:5px 14px;font-size:12.5px;color:var(--sub)}
.spd.on{background:var(--dark);color:#fff;border-color:var(--dark)}
.recbtn{width:88px;height:88px;border-radius:50%;background:var(--teal);color:#fff;font-size:15px;font-weight:700;box-shadow:0 6px 18px #0c859940;margin:10px auto;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.recbtn.recording{background:var(--bad);animation:pulse2 .8s infinite}
@keyframes pulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.wordscore{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px;font-size:16px;font-weight:600}
.wordscore .w{padding:3px 7px;border-radius:8px}
.w.g{background:#ebfbee;color:var(--ok)}.w.o{background:#fff4e6;color:var(--warn)}.w.r{background:#fff5f5;color:var(--bad)}
.scorebig{font-size:38px;font-weight:900;color:var(--brand)}

.dict-blank{font-size:18px;line-height:2.1;font-weight:600}
.dict-blank input{border:none;border-bottom:2.5px solid var(--brand);background:transparent;font-size:17px;font-weight:700;width:96px;text-align:center;outline:none;color:var(--brand-deep);font-family:inherit}
.dict-blank input.right{border-color:var(--ok);color:var(--ok)}
.dict-blank input.wrong{border-color:var(--bad);color:var(--bad)}

/* 对话 UI */
.dlg-scene{background:linear-gradient(160deg,#fdf0e2,#f7e6d4);border-radius:18px;padding:14px;margin-bottom:10px;display:flex;gap:12px;align-items:center;border:1px solid var(--line)}
.avatar{width:58px;height:58px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;transition:transform .3s}
.avatar.talking{animation:bob .55s infinite alternate}
@keyframes bob{from{transform:translateY(0) }to{transform:translateY(-4px)}}
.dlg-task{font-size:12.5px;color:var(--sub)}
.dlg-task b{color:var(--ink);font-size:13.5px;display:block}
.dlg-msgs{display:flex;flex-direction:column;gap:10px;padding:6px 0;min-height:180px}
.msg{max-width:82%;border-radius:15px;padding:10px 13px;font-size:15px;line-height:1.55}
.msg.ai{background:var(--card);border:1px solid var(--line);align-self:flex-start;border-radius:4px 15px 15px 15px}
.msg.me{background:var(--teal);color:#fff;align-self:flex-end;border-radius:15px 4px 15px 15px}
.msg .cnline{display:block;font-size:12px;color:var(--sub);margin-top:3px}
.msg.me .cnline{color:#ffffffb3}
.hintbox{background:var(--brand-soft);border-radius:12px;padding:9px 12px;font-size:13px;color:var(--brand-deep);margin:6px 0}
.refline{font-size:13px;color:var(--sub);background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:8px 11px;margin:6px 0}
.dlg-input{display:flex;gap:8px;align-items:center;margin-top:10px}
.dlg-input textarea{flex:1;border:1.5px solid var(--line);border-radius:13px;padding:10px 13px;font-size:15px;font-family:inherit;resize:none;outline:none;background:var(--card);height:46px}
.dlg-input textarea:focus{border-color:var(--teal)}
.talkhold{width:52px;height:46px;border-radius:13px;background:var(--teal);color:#fff;font-size:20px;flex-shrink:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.talkhold.recording{background:var(--bad)}
.sendbtn{width:52px;height:46px;border-radius:13px;background:var(--brand);color:#fff;font-size:18px;flex-shrink:0}
.taskprog{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub);margin-top:8px}
.taskprog .bar{flex:1;height:6px;background:var(--line);border-radius:99px}
.taskprog .bar i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .5s}

/* 结算 */
.settle{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 18px;text-align:center;margin-top:14px}
.settle h2{font-size:21px}
.settle .flame{font-size:44px;margin:6px 0}
.dims{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0;text-align:left}
.dim{background:var(--bg);border-radius:12px;padding:10px 13px}
.dim .k{font-size:12px;color:var(--sub)}
.dim .s{font-size:19px;font-weight:800}
.upgr{background:var(--bg);border-radius:12px;padding:10px 13px;text-align:left;font-size:13.5px;margin:8px 0}
.upgr .yours{color:var(--sub);text-decoration:line-through}
.upgr .better{color:var(--ok);font-weight:600}
.btnrow{display:flex;gap:10px;margin-top:16px}
.btn{flex:1;border-radius:13px;padding:13px;font-size:15px;font-weight:700;text-align:center}
.btn-primary{background:var(--brand);color:#fff}
.btn-ghost{background:var(--bg);color:var(--sub);border:1px solid var(--line)}

/* 弹窗 */
.mask{position:fixed;inset:0;background:#0006;display:none;align-items:center;justify-content:center;z-index:200;padding:6%}
.mask.open{display:flex}
.modal{background:#fff;border-radius:20px;padding:24px 20px;max-width:400px;width:100%}
.modal h3{font-size:17px;margin-bottom:8px}
.modal p{font-size:14px;color:var(--sub)}
.modal .row{display:flex;gap:10px;margin-top:18px}

footer{border-top:1px solid var(--line);padding:26px 4%;text-align:center;font-size:12px;color:var(--sub);line-height:2}
footer a{color:var(--sub)}
@media print{#tp-support-root{display:none!important}}