:root{
  --bg:#f5f6f8; --card:#fff; --ink:#171a20; --ink2:#5b6472; --ink3:#8b95a5;
  --line:#e6e9ef; --brand:#2f6bff; --brand-soft:#eaf0ff;
  --ok:#12924f; --ok-soft:#e6f6ec; --warn:#d9822b; --warn-soft:#fdf3e7;
  --bad:#d8443c; --bad-soft:#fdeceb; --key:#c2410c; --key-soft:#fff1e8;
  --radius:14px; --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1216; --card:#171b21; --ink:#eef1f5; --ink2:#a4aebd; --ink3:#7b8595;
    --line:#252b34; --brand:#5b8cff; --brand-soft:#1a2436;
    --ok:#3ecf82; --ok-soft:#12281d; --warn:#e3a25c; --warn-soft:#2a2114;
    --bad:#ff6b62; --bad-soft:#2b1615; --key:#ff9d5c; --key-soft:#2a1c12;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(64px + var(--safe-b));
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
  padding:10px 16px;display:flex;align-items:center;gap:10px;
}
.topbar h1{font-size:17px;font-weight:650;margin:0;flex:1;letter-spacing:-.01em}
.topbar .sub{font-size:12px;color:var(--ink3);font-weight:400;margin-left:6px}
.icon-btn{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:var(--ink2);transition:.15s;
}
.icon-btn:active{background:var(--line)}

.wrap{padding:14px 16px 24px;max-width:720px;margin:0 auto}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card+.card{margin-top:12px}
.card-title{font-size:13px;font-weight:600;color:var(--ink2);margin:0 0 12px;letter-spacing:.02em}

/* ---------- 打卡 ---------- */
.streak{display:flex;align-items:center;gap:14px}
.streak-num{font-size:34px;font-weight:750;line-height:1;letter-spacing:-.02em;color:var(--brand)}
.streak-label{font-size:13px;color:var(--ink2)}
.streak-label b{display:block;font-size:15px;color:var(--ink);font-weight:600;margin-bottom:2px}

.progress-line{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:14px}
.progress-line i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#7aa2ff);border-radius:99px;transition:width .4s}

.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.day{
  aspect-ratio:1;border-radius:9px;display:grid;place-items:center;
  font-size:12px;font-weight:600;background:var(--bg);color:var(--ink3);
  border:1px solid transparent;position:relative;
}
.day.done{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.day.today{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.day.miss{background:var(--bad-soft);color:var(--bad)}
.day.rest{opacity:.4}

/* ---------- 任务 ---------- */
.task{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:none;padding-bottom:0}
.task:first-child{padding-top:0}
.task-ico{
  width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-size:17px;font-weight:700;
}
.task-ico.ok{background:var(--ok-soft);color:var(--ok)}
.task-body{flex:1;min-width:0}
.task-name{font-weight:600;font-size:14.5px;margin-bottom:2px}
.task-desc{font-size:12.5px;color:var(--ink3);line-height:1.5}
.task-act{align-self:center;flex:0 0 auto}
.btn-sm{
  padding:7px 14px;border-radius:9px;font-size:13px;font-weight:600;
  background:var(--brand);color:#fff;white-space:nowrap;
}
.btn-sm:active{opacity:.85}
.btn-sm.ghost{background:var(--brand-soft);color:var(--brand)}
.btn-sm.done{background:var(--ok-soft);color:var(--ok)}

/* ---------- 套题 ---------- */
.sets{display:grid;gap:10px}
.set{
  display:flex;align-items:center;gap:12px;padding:13px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
}
.set:active{background:var(--bg)}
.set-main{flex:1;min-width:0}
.set-name{font-weight:600;font-size:14.5px;margin-bottom:3px}
.set-meta{font-size:12px;color:var(--ink3)}
.ring{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;flex:0 0 auto;
  background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--line) 0);
  position:relative;
}
.ring::after{
  content:'';position:absolute;inset:3px;border-radius:50%;background:var(--card);
}
.ring span{position:relative;z-index:1;font-size:10px;color:var(--ink2)}

/* ---------- 底栏 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:color-mix(in srgb,var(--card) 94%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);
  display:flex;padding:6px 0 calc(6px + var(--safe-b));
}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--ink3);font-size:10.5px}
.tabbar button.on{color:var(--brand)}
.tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 精听页 ---------- */
.listen-head{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--card)}
.listen-title{font-size:15px;font-weight:650;margin:0 0 3px}
.listen-sub{font-size:12px;color:var(--ink3)}

.seg-tabs{display:flex;gap:7px;overflow-x:auto;padding:10px 16px;scrollbar-width:none}
.seg-tabs::-webkit-scrollbar{display:none}
.seg-tab{
  flex:0 0 auto;padding:7px 13px;border-radius:99px;font-size:12.5px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--ink2);white-space:nowrap;
}
.seg-tab.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.seg-tab.done{border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok)}

.sent{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;margin-bottom:9px;transition:.15s;
}
.sent.playing{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.sent-head{display:flex;align-items:center;gap:8px;margin-bottom:?px}
.sent-no{
  font-size:11px;font-weight:700;color:var(--ink3);min-width:20px;
  font-variant-numeric:tabular-nums;
}
.sent-time{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.sent-play{
  margin-left:auto;width:30px;height:30px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;
}
.sent-body{margin-top:8px}
.en{font-size:16px;line-height:1.85;letter-spacing:.002em}
.en.hide{filter:blur(6px);user-select:none;opacity:.5}
.zh{
  margin-top:7px;font-size:13.5px;color:var(--ink2);line-height:1.75;
  border-left:2px solid var(--line);padding-left:10px;display:none;
}
.sent.show-zh .zh{display:block}
.peek{
  margin-top:8px;font-size:12.5px;color:var(--brand);font-weight:600;
  display:none;
}
.sent.reveal-allowed .peek{display:inline-block}

.word{position:relative;display:inline}
.word.key{color:var(--key);font-weight:600}
.word.weak{color:var(--ink3)}

/* 听写 */
.dict-box{margin-top:9px;display:none}
.sent.dict .dict-box{display:block}
.dict-box textarea{
  width:100%;min-height:64px;resize:none;border-radius:10px;padding:10px 12px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font:14px/1.6 inherit;
}
.dict-box textarea:focus{outline:none;border-color:var(--brand)}
.dict-actions{display:flex;gap:8px;margin-top:8px;align-items:center}
.score{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.score.good{color:var(--ok)} .score.mid{color:var(--warn)} .score.bad{color:var(--bad)}
.diff{margin-top:8px;font-size:14px;line-height:1.9;display:none}
.diff.show{display:block}
.diff .ok{color:var(--ok)}
.diff .miss{color:var(--bad);text-decoration:underline wavy var(--bad);text-underline-offset:3px}
.diff .extra{color:var(--ink3);text-decoration:line-through}

/* 播放条 */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:color-mix(in srgb,var(--card) 96%,transparent);
  backdrop-filter:blur(16px);border-top:1px solid var(--line);
  padding:9px 16px calc(9px + var(--safe-b));
}
.player-row{display:flex;align-items:center;gap:14px}
.p-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ink)}
.p-btn.main{width:48px;height:48px;background:var(--brand);color:#fff}
.p-info{flex:1;min-width:0}
.p-now{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums;margin-bottom:3px}
.p-track{height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.p-track i{display:block;height:100%;background:var(--brand);border-radius:99px;width:0}
.p-tools{display:flex;gap:6px;margin-top:8px;align-items:center;font-size:12px;color:var(--ink2)}
.chip{
  padding:5px 10px;border-radius:8px;background:var(--bg);font-size:12px;font-weight:600;color:var(--ink2);
}
.chip.on{background:var(--brand-soft);color:var(--brand)}

/* 做题 */
.quiz-q{margin-bottom:20px}
.quiz-stem{font-size:15px;font-weight:600;line-height:1.6;margin-bottom:10px}
.quiz-stem .qn{color:var(--brand);margin-right:5px}
.opt{
  display:flex;gap:10px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
  margin-bottom:8px;font-size:14px;line-height:1.55;background:var(--card);
}
.opt.pick{border-color:var(--brand);background:var(--brand-soft)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt-lab{font-weight:700;color:var(--ink3);flex:0 0 16px}
.opt.pick .opt-lab{color:var(--brand)}
.opt.right .opt-lab{color:var(--ok)}
.opt.wrong .opt-lab{color:var(--bad)}

.empty{padding:40px 20px;text-align:center;color:var(--ink3);font-size:13.5px}
.hint{font-size:12px;color:var(--ink3);line-height:1.6;margin-top:8px}

/* ---------- 每日任务清单 ---------- */
.chk{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
.chk-item{
  display:flex;align-items:center;gap:9px;padding:9px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px;
}
.chk-item:last-child{border-bottom:none;padding-bottom:0}
.chk-box{
  flex:0 0 20px;height:20px;border-radius:6px;border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink3);
  background:var(--bg);transition:.18s;
}
.chk-item.on .chk-box{background:var(--ok);border-color:var(--ok);color:#fff}
.chk-label{flex:1;min-width:0;color:var(--ink2);line-height:1.45}
.chk-item.on .chk-label{color:var(--ink);text-decoration:line-through;text-decoration-color:var(--ink3)}
.chk-hint{font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums;flex:0 0 auto}

.checkin-btn{
  width:100%;margin-top:14px;padding:12px;border-radius:11px;
  background:var(--brand);color:#fff;font-size:14.5px;font-weight:650;
  transition:.15s;
}
.checkin-btn:active{opacity:.88}
.checkin-btn.done{background:var(--ok-soft);color:var(--ok)}
.checkin-btn.off{background:var(--bg);color:var(--ink3);font-weight:500}

/* ---------- 段内进度 ---------- */
.prog-num{float:right;font-size:12.5px;font-weight:650;color:var(--brand);font-variant-numeric:tabular-nums}

/* ---------- 句子「听懂了」 ---------- */
.sent-ok{
  padding:3px 9px;border-radius:99px;border:1px solid var(--line);
  font-size:11.5px;font-weight:600;color:var(--ink3);background:var(--card);
}
.sent-ok:active{background:var(--bg)}
.sent.ok .sent-ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.sent.ok .sent-no{background:var(--ok-soft);color:var(--ok)}

/* ---------- 复盘 ---------- */
.rv{padding:12px 0;border-bottom:1px solid var(--line)}
.rv:last-child{border-bottom:none;padding-bottom:0}
.rv:first-child{padding-top:0}
.rv-q{font-size:14px;font-weight:600;line-height:1.55;margin-bottom:6px}
.rv-q .qn{color:var(--brand);margin-right:5px}
.rv-line{font-size:12.5px;color:var(--ink2);margin-bottom:6px}
.rv-line b{font-variant-numeric:tabular-nums}
.rv-wrong{color:var(--bad)}
.rv-right{color:var(--ok)}
.rv-opt{
  font-size:13px;line-height:1.6;color:var(--ink2);
  background:var(--ok-soft);border-radius:9px;padding:8px 11px;
}
.rv-opt b{color:var(--ok)}