/* 90天英语表达突击 · 学习平台 */
:root{
  --bg:#F7F5F1; --card:#FFFFFF; --ink:#1C1A17; --ink-2:#5A554E; --ink-3:#8C857B;
  --line:#E6E1D9; --line-2:#F0ECE5;
  --accent:#C8471B; --accent-soft:#FDF0EA; --accent-line:#F3C9B7;
  --ok:#2F7D4F; --ok-soft:#EAF5EE; --warn:#B4761A; --bad:#B3261E; --bad-soft:#FDECEA;
  --radius:14px; --radius-sm:10px;
  --ring-track:#E7DCD0;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --shadow:0 1px 2px rgba(28,26,23,.05),0 6px 18px rgba(28,26,23,.055);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14120F; --card:#1E1B17; --ink:#F2EEE7; --ink-2:#B5AEA3; --ink-3:#8A8278;
    --line:#312C25; --line-2:#26221C;
    --accent:#F0764A; --accent-soft:#2A1C14; --accent-line:#4A2C1E;
    --ok:#6FBF8D; --ok-soft:#16241B; --warn:#E0A83F; --bad:#F08A80; --bad-soft:#2A1815;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
    --ring-track:#3D302A;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
body.no-nav{padding-bottom:24px}
a{color:var(--accent);text-decoration:none}
input,button,select,textarea{font-family:inherit;font-size:16px}
button{cursor:pointer;border:none;background:none;color:inherit}
#app{max-width:760px;margin:0 auto;padding:0 16px}
.hide{display:none!important}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;gap:10px;padding:14px 0 6px;position:sticky;top:0;
  background:linear-gradient(var(--bg) 72%,transparent);z-index:20}
.topbar h1{font-size:17px;margin:0;font-weight:650;letter-spacing:-.01em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--card);
  box-shadow:var(--shadow);font-size:17px;flex:0 0 auto}
.eyebrow{font-size:12px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:12px}
.card.tight{padding:13px 14px}
.sec-title{font-size:15px;font-weight:680;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.sec-title .num{width:20px;height:20px;border-radius:6px;background:var(--accent-soft);color:var(--accent);
  font-size:12px;font-weight:700;display:grid;place-items:center;flex:0 0 auto}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3);font-size:13px}
.hr{height:1px;background:var(--line-2);margin:14px 0}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1;min-width:0}
.wrap{flex-wrap:wrap}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 16px;border-radius:999px;font-weight:600;font-size:15px;
  background:var(--card);border:1px solid var(--line);color:var(--ink);transition:.15s}
.btn:active{transform:scale(.975)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:disabled{opacity:.45}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.sm{padding:7px 13px;font-size:13.5px}
.btn.block{width:100%}
.btn.done{background:var(--ok-soft);border-color:transparent;color:var(--ok)}

/* ---------- 朗读按钮 ---------- */
.say{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-size:14px;flex:0 0 auto;vertical-align:middle;
  transition:.15s;border:none}
.say:active{transform:scale(.9)}
.say.on{background:var(--accent);color:#fff;animation:pulse 1.2s infinite}
.say.plus{background:var(--ok-soft);color:var(--ok);font-weight:800;font-size:15px}
.say.plus.added{background:var(--ok);color:#fff}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,71,27,.4)}50%{box-shadow:0 0 0 7px rgba(200,71,27,0)}}
.say-line{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px}
.en{font-family:var(--serif);font-size:17.5px;line-height:1.64;letter-spacing:.002em}
.en.lg{font-size:18.5px}
.tap-say{display:block;width:100%;text-align:left;padding:0}

/* ---------- 今日头 ---------- */
.hero{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:12px}
.hero .stage{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;
  color:var(--accent);background:var(--accent-soft);padding:3px 10px;border-radius:999px}
.hero h2{margin:10px 0 4px;font-size:22px;line-height:1.32;letter-spacing:-.02em}
.hero .topic{color:var(--ink-2);font-size:14.5px}
.cando{margin-top:12px;padding:11px 13px;border-radius:var(--radius-sm);background:var(--accent-soft);
  font-size:14.5px;line-height:1.55}
.cando b{color:var(--accent)}

/* 进度环 */
.ring{--p:0;width:48px;height:48px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--ring-track) 0);position:relative;
  box-shadow:0 0 0 1px var(--accent-line) inset}
.ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card)}
.ring span{position:relative;font-size:12.5px;font-weight:750;color:var(--ink)}

/* 计时 */
.timer{display:flex;align-items:center;gap:12px}
.timer .clock{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.timer .clock.run{color:var(--accent)}

/* ---------- 学习块 ---------- */
.lblock{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}
.lhead{display:flex;align-items:center;gap:10px;padding:14px 16px;width:100%;text-align:left}
.lhead .bt{font-weight:650;font-size:15.5px;flex:1;min-width:0}
.lhead .mins{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lhead .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink-3);flex:0 0 auto;
  display:grid;place-items:center;font-size:12px;color:transparent;background:var(--bg)}
.lhead .tick.on{background:var(--ok);border-color:var(--ok);color:#fff}
.lhead .chev{color:var(--ink-3);font-size:12px;transition:.2s}
.lblock.open .chev{transform:rotate(90deg)}
.lbody{display:none;padding:0 16px 16px;border-top:1px solid var(--line-2);padding-top:14px}
.lblock.open .lbody{display:block}
.lblock .foot{display:flex;gap:8px;margin-top:14px}

/* ---------- 内容元素 ---------- */
.chunk{border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:12px;margin-bottom:9px;background:var(--bg)}
.chunk .c{font-family:var(--serif);font-weight:600;font-size:16.5px;margin:0 0 3px}
.chunk .def{color:var(--ink-2);font-size:14px;margin:8px 0 7px;padding-top:7px;border-top:1px dashed var(--line-2)}
.chunk .ex{font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--ink);margin:8px 0 6px;padding-top:7px;border-top:1px dashed var(--line-2)}
.chunk .note{font-size:13px;color:var(--warn);line-height:1.5;margin:6px 0 0}
.chunk .note::before{content:"⚠ "}

.read-p{font-family:var(--serif);font-size:17.5px;line-height:1.72;margin:0 0 14px}
.read-p:first-letter{}
.gloss{font-size:13.5px;color:var(--ink-2);background:var(--bg);border-radius:var(--radius-sm);padding:11px 13px;line-height:1.7}
.qa{margin:8px 0}
.qa .q{font-family:var(--serif);font-size:15.5px;line-height:1.55;margin:0 0 6px}
.qa .a{font-size:14.5px;color:var(--ok);background:var(--ok-soft);border-radius:8px;padding:9px 11px;display:none;line-height:1.6}
.qa.show .a{display:block}
.qa .reveal{font-size:13px;color:var(--accent);font-weight:600;margin-top:2px}
.langpt{border-left:3px solid var(--accent-line);padding:2px 0 2px 12px;margin:12px 0}
.langpt .p{font-weight:650;font-size:15px;margin:0 0 5px}
.langpt p{margin:0 0 6px;font-size:14.5px;color:var(--ink-2)}
.langpt .mine{font-family:var(--serif);font-size:15.5px;color:var(--ink)}

/* 词汇表 */
.vocab{display:flex;flex-direction:column;gap:9px}
.vw{border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:11px 12px;background:var(--bg)}
.vw .top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vw .w{font-family:var(--serif);font-weight:650;font-size:17px}
.vw .ipa{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.vw .pos{font-size:12px;color:var(--ink-3);font-style:italic}
.vw .cn{font-size:14.5px;margin-top:2px}
.vw .ex{font-family:var(--serif);font-size:15px;color:var(--ink-2);margin-top:6px;line-height:1.55}
.vw .tip{font-size:13px;color:var(--warn);margin-top:5px;line-height:1.5}

/* 任务 */
.task{border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:13px;margin-bottom:11px}
.task .tname{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--accent);
  padding:2px 9px;border-radius:999px;margin-bottom:9px}
.task .prompt{font-size:14.8px;line-height:1.62;margin:0 0 10px}
.task ul{margin:0 0 10px;padding-left:19px;font-size:14.3px;color:var(--ink-2);line-height:1.68}
.model{background:var(--accent-soft);border-radius:var(--radius-sm);padding:12px;margin-top:10px}
.model .lb{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.04em;margin-bottom:6px}
.model .tx{font-family:var(--serif);font-size:16.5px;line-height:1.68}
.model .why{font-size:13.8px;color:var(--ink-2);line-height:1.62;margin-top:8px}
.rubric{font-size:13.5px;color:var(--ok);margin-top:9px}
.rubric::before{content:"过关线 · ";font-weight:700}
.mask-btn{font-size:13px;color:var(--accent);font-weight:600;margin-top:8px}

/* 对话 */
.dlg{display:flex;flex-direction:column;gap:9px;margin:10px 0}
.turn{max-width:88%;padding:10px 13px;border-radius:14px;font-family:var(--serif);font-size:16px;line-height:1.55;position:relative}
.turn.buyer{background:var(--bg);border:1px solid var(--line-2);align-self:flex-start;border-bottom-left-radius:4px}
.turn.you{background:var(--accent-soft);align-self:flex-end;border-bottom-right-radius:4px}
.turn .who{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:2px}
.turn .line-row{display:flex;gap:8px;align-items:flex-start}
.turn .say{width:26px;height:26px;font-size:12.5px}
.turn.masked .line-row{filter:blur(5px);user-select:none;cursor:pointer}
.turn.masked::after{content:"点一下先自己想，再对照";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--sans);font-size:12px;color:var(--ink-3)}

/* 自评 */
.check{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:14.8px;line-height:1.55;
  border-bottom:1px solid var(--line-2);width:100%;text-align:left}
.check:last-child{border-bottom:none}
.check .box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);flex:0 0 auto;
  display:grid;place-items:center;font-size:13px;color:transparent;margin-top:1px}
.check.on .box{background:var(--ok);border-color:var(--ok);color:#fff}
.must{margin-top:6px}
.must .m{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px}
.must .m .tx{font-family:var(--serif);font-size:16.5px;line-height:1.6}

/* ---------- 打卡 ---------- */
/* 打卡：放在页面末尾（不做吸底，避免遮挡学习内容） */
.checkin-bar{margin:14px 0 4px}
.checkin-bar .btn{padding:14px 16px;font-size:16px}
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.pill{font-size:12px;padding:4px 9px;border-radius:999px;background:var(--bg);color:var(--ink-2);border:1px solid var(--line-2)}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
/* 中文释义（跟在英文下面） */
.cnline{font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.defcn{display:block;font-size:13px;color:var(--ink-2);margin-top:2px;line-height:1.45;opacity:.86}
.excn{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5;opacity:.92}
.qcn{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
/* 折叠看中文译文 */
.cnbox{margin:10px 0 4px;border:1px dashed var(--line-2);border-radius:9px;
  padding:0 12px;background:var(--bg)}
.cnbox summary{font-size:12.5px;color:var(--accent);font-weight:600;
  padding:10px 0;cursor:pointer;list-style:none}
.cnbox summary::-webkit-details-marker{display:none}
.cnbox summary::before{content:'▸ ';font-size:10px}
.cnbox[open] summary::before{content:'▾ '}
.cnbox[open] summary{border-bottom:1px dashed var(--line-2);margin-bottom:9px}
.cnbox p{font-size:13.5px;color:var(--ink-2);line-height:1.75;margin:0 0 11px;
  text-align:left;word-break:break-word}
.cnbox{margin-bottom:16px}
/* 邀请码胶囊 */
.codepill{display:inline-flex;align-items:center;background:var(--ok-soft);border-radius:999px;
  overflow:hidden;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  color:var(--ok);font-weight:700}
.codepill button{padding:6px 9px;color:inherit;font:inherit;line-height:1.4}
.codepill .x{padding:4px 10px 4px 2px;opacity:.45;font-size:15px;min-width:26px;min-height:26px}
.codepill .x:active{opacity:1;color:var(--bad)}
.codebox{max-height:206px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:9px 8px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);
  box-shadow:inset 0 6px 8px -8px rgba(0,0,0,.18)}

/* ---------- 课表 ---------- */
.stage-head{display:flex;align-items:center;gap:10px;margin:18px 0 8px}
.stage-head .s{font-size:13px;font-weight:700;color:var(--accent)}
.stage-head .l{flex:1;height:1px;background:var(--line)}
.day-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);
  border-radius:var(--radius-sm);margin-bottom:7px;box-shadow:0 1px 2px rgba(0,0,0,.03);width:100%;text-align:left}
.day-row .dn{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink-3);width:34px;flex:0 0 auto}
.day-row .mid{flex:1;min-width:0}
.day-row .fn{font-size:14.5px;font-weight:620;margin-bottom:1px}
.day-row .tp{font-size:12.8px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day-row .st{width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:11px}
.day-row .st.done{background:var(--ok);color:#fff}
.day-row .st.part{background:var(--accent-soft);color:var(--accent)}
.day-row .st.none{background:var(--line-2)}

/* ---------- 测验 ---------- */
.qz-top{display:flex;align-items:center;gap:10px;margin:8px 0 14px}
.bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
.qz-card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.qz-type{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.qz-prompt{font-size:20px;font-weight:600;line-height:1.45;margin-bottom:6px;word-break:break-word}
.qz-prompt.serif{font-family:var(--serif)}
.qz-ipa{font-family:var(--mono);font-size:13.5px;color:var(--ink-3);margin-bottom:14px}
.opt{display:block;width:100%;text-align:left;padding:13px 15px;border-radius:var(--radius-sm);
  border:1.5px solid var(--line);background:var(--card);margin-bottom:9px;font-size:15.5px;
  line-height:1.5;transition:.12s}
.opt:active{transform:scale(.99)}
.opt.right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok);font-weight:600}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.opt.dis{opacity:.55}
.spell-in{width:100%;padding:13px 15px;border-radius:var(--radius-sm);border:1.5px solid var(--line);
  background:var(--bg);font-family:var(--mono);font-size:17px;letter-spacing:.05em;color:var(--ink)}
.spell-in:focus{outline:none;border-color:var(--accent)}
.feedback{margin-top:14px;padding:13px;border-radius:var(--radius-sm);font-size:14.5px;line-height:1.62}
.feedback.ok{background:var(--ok-soft);color:var(--ok)}
.feedback.no{background:var(--bad-soft);color:var(--bad)}
.feedback .ex{color:var(--ink-2);font-family:var(--serif);font-size:15px;margin-top:7px;display:flex;gap:8px;align-items:flex-start}
.score-big{font-size:52px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.score-big small{font-size:18px;color:var(--ink-3);font-weight:500}
.qz-setup label{display:block;font-size:13px;color:var(--ink-3);font-weight:600;margin:12px 0 6px}
.seg{display:flex;gap:6px;background:var(--bg);padding:4px;border-radius:999px;border:1px solid var(--line-2)}
.seg button{flex:1;padding:8px 6px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.seg button.on{background:var(--card);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ---------- 课程 ---------- */
.cpill{font-size:11.5px;font-weight:650;color:var(--accent);background:var(--accent-soft);
  border-radius:999px;padding:3px 9px;max-width:150px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:0 0 auto}
.ccard{background:var(--card);border-radius:var(--radius);padding:15px;margin-bottom:10px;
  box-shadow:var(--shadow);border:1.5px solid transparent}
.ccard.cur{border-color:var(--accent-line)}
.cemoji{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);display:grid;
  place-items:center;font-size:22px;flex:0 0 auto}
.ct{font-size:16.5px;font-weight:650;line-height:1.35}
.cs{font-size:13.5px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.cbar{height:5px;border-radius:3px;background:var(--line-2);margin:9px 0 5px;overflow:hidden}
.cbar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.cformat{font-family:var(--mono);font-size:12px;background:var(--bg);border-radius:8px;padding:10px;
  white-space:pre-wrap;word-break:break-all;line-height:1.55;color:var(--ink-2)}

/* ---------- 我的 ---------- */
/* 生词本 */
.vtop{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.vstat{display:flex;gap:6px;flex-wrap:wrap}
.vrow{background:var(--card);border-radius:var(--radius-sm);padding:13px 14px;margin-bottom:9px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.vrow .top{display:flex;align-items:flex-start;gap:8px}
.vrow .w{font-family:var(--serif);font-size:18px;font-weight:650;line-height:1.35;word-break:break-word}
.vrow .ipa{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:1px}
.vrow .meta{font-size:12px;color:var(--ink-3);margin-top:7px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.maskcn{position:relative;margin-top:8px;border-radius:10px;background:var(--bg);border:1px dashed var(--line);
  padding:11px 13px;min-height:44px;display:flex;align-items:center;cursor:pointer;transition:.15s}
.maskcn .tx{font-size:15px;line-height:1.5;transition:.18s}
.maskcn.masked .tx{filter:blur(7px);opacity:.55;user-select:none}
.maskcn .cover{position:absolute;inset:0;display:grid;place-items:center;font-size:12.5px;color:var(--accent);
  font-weight:600;background:var(--bg);border-radius:10px;text-align:center;padding:0 10px}
.maskcn.revealed .cover{display:none}
.maskcn.revealed{border-style:solid;border-color:var(--accent-line);background:var(--accent-soft)}
.vrow .note{font-size:13px;color:var(--ink-2);margin-top:8px;line-height:1.55;border-left:2px solid var(--line);padding-left:9px}
.vrow .acts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.addbox{display:none}
.addbox.open{display:block}
/* 复习卡 */
.rev-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 18px;text-align:center}
.rev-card .w{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1.3;word-break:break-word}
.rev-card .ipa{font-family:var(--mono);font-size:14px;color:var(--ink-3);margin-top:6px}
.rev-mask{margin-top:20px;min-height:110px;border-radius:var(--radius-sm);border:1px dashed var(--line);
  background:var(--bg);display:grid;place-items:center;padding:16px;cursor:pointer;position:relative}
.rev-mask .tx{font-size:19px;line-height:1.55;transition:.18s}
.rev-mask.masked .tx{filter:blur(9px);opacity:.5;user-select:none}
.rev-mask .cover{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);font-weight:600;
  background:var(--bg);border-radius:var(--radius-sm);font-size:14px}
.rev-mask.revealed .cover{display:none}
.rev-card .note{font-size:13px;color:var(--ink-2);margin-top:12px;line-height:1.6}
.rev-acts{display:flex;gap:10px;margin-top:16px}
.rev-acts .btn{flex:1;padding:14px;font-size:15.5px}

/* 正文可点单词 */
.wd{cursor:pointer;border-radius:3px;transition:background .12s;
  border-bottom:1px dotted var(--accent-line);padding-bottom:1px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.wd:active{background:var(--accent-line);color:var(--ink)}
@media (hover:hover){.wd:hover{background:var(--accent-soft);border-bottom-color:var(--accent)}}
.wd.hit{background:var(--ok-soft);box-shadow:inset 0 -1.5px 0 var(--ok);border-bottom-color:transparent}
/* 首次引导：正文第一个词闪一下 */
.wd.pulse{animation:tapPulse 1.5s ease-in-out 3;border-bottom-color:var(--accent)}
@keyframes tapPulse{0%,100%{background:transparent}50%{background:var(--accent-line)}}
/* 可点提示条 */
.hintbar{font-size:12.5px;color:var(--accent);background:var(--accent-soft);border-radius:8px;
  padding:8px 11px;margin:-2px 0 12px;line-height:1.45;font-weight:600;
  border-left:3px solid var(--accent)}
/* 点词后的底部小条 */
.wordbar{position:fixed;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));
  z-index:70;max-width:730px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.22);padding:12px 14px;animation:up .18s ease-out}
.wb-head{display:flex;gap:10px;align-items:flex-start}
.wb-w{font-family:var(--serif);font-size:18px;font-weight:650;line-height:1.3}
.wb-ipa{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:2px}
.wb-cn{font-size:14px;line-height:1.5;margin-top:3px;color:var(--ink)}
.wb-cn.miss{color:var(--warn);font-size:13.5px}
.wb-x{font-size:17px;color:var(--ink-3);padding:2px 8px;flex:0 0 auto;line-height:1}
.wb-foot{margin-top:10px}

/* 底部弹层：加生词 / 拆词 */
.sheet{position:fixed;inset:0;z-index:80}
.sheet.hide{display:none}
.sheet .bg{position:absolute;inset:0;background:rgba(20,18,16,.42);backdrop-filter:blur(2px)}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--card);
  border-radius:18px 18px 0 0;padding:16px 16px calc(22px + env(safe-area-inset-bottom));
  max-height:80vh;overflow:auto;box-shadow:0 -8px 30px rgba(0,0,0,.18);animation:up .22s ease-out}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.sheet h3{margin:0;font-size:17px;font-weight:680;flex:1}
.sheet .quote{font-family:var(--serif);font-size:15.5px;color:var(--ink-2);margin:8px 0 12px;
  padding-left:10px;border-left:2px solid var(--accent-line);line-height:1.5}
.pick{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-2);
  width:100%;text-align:left}
.pick .box{width:22px;height:22px;border-radius:7px;border:1.8px solid var(--ink-3);flex:0 0 auto;
  display:grid;place-items:center;font-size:12px;color:transparent}
.pick.on .box{background:var(--accent);border-color:var(--accent);color:#fff}
.pick .w{font-family:var(--serif);font-size:17px;font-weight:600}
.pick .cn{font-size:13.5px;color:var(--ink-2);margin-top:1px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.pick .cn.miss{color:var(--warn)}
.sheet .foot{padding-top:14px;display:flex;gap:8px}

/* 我的：头像与统计 */
.avatar{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:21px;font-weight:700;flex:0 0 auto}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.stat{background:var(--bg);border-radius:var(--radius-sm);padding:11px;text-align:center}
.stat .v{font-size:21px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .k{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.heat{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:10px}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--line-2);display:block}
.heat i.done{background:var(--ok)}
.heat i.part{background:var(--accent-line)}
.heat i.cur{outline:2px solid var(--accent);outline-offset:1px}
.list-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14.5px}
.list-item:last-child{border-bottom:none}
.tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--bg);color:var(--ink-2);flex:0 0 auto}
.tag.a{background:var(--accent-soft);color:var(--accent)}
.tag.w{background:var(--bad-soft);color:var(--bad)}
.tag.g{background:var(--ok-soft);color:var(--ok)}

/* ---------- 表单 ---------- */
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.input{width:100%;padding:13px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);font-size:16px}
.input:focus{outline:none;border-color:var(--accent)}
.err{color:var(--bad);font-size:13.5px;margin-top:8px;min-height:18px}
.login-wrap{max-width:400px;margin:0 auto;padding-top:6vh}
.brand{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:0 0 6px}
.brand-sub{color:var(--ink-3);font-size:14px;margin-bottom:26px}

/* 录音 */
.rec-row{display:flex;align-items:center;gap:9px;margin-top:10px;flex-wrap:wrap}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--bad);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
audio{height:34px;max-width:100%}

/* ---------- 底部导航 ---------- */
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
#tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;
  font-size:10.5px;color:var(--ink-3);font-weight:600}
#tabbar a .ic{font-size:19px;line-height:1.15}
#tabbar a.on{color:var(--accent)}

/* toast */
/* toast（顶部，避免压底部按钮） */
#toast{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));transform:translate(-50%,14px);
  background:#23201B;color:#fff;font-size:14px;padding:10px 18px;border-radius:999px;opacity:0;
  pointer-events:none;transition:.22s;z-index:60;max-width:86vw;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.18)}
#toast.on{opacity:1;transform:translate(-50%,0)}

@media (min-width:640px){
  body{font-size:16.5px}
  .hero h2{font-size:25px}
  .stat-grid{grid-template-columns:repeat(4,1fr)}
}

/* ===================== 平板（768–1023） ===================== */
@media (min-width:768px) and (max-width:1023px){
  #app{max-width:820px;padding:0 28px}
  .card{padding:20px}
  .heat{grid-template-columns:repeat(15,1fr);gap:5px}
  .turn{max-width:82%}
}

/* ===================== 桌面（≥1024）：左侧栏 + 宽内容区 ===================== */
@media (min-width:1024px){
  body{font-size:16.5px;padding-bottom:48px;padding-left:248px}
  body.no-nav{padding-left:0;padding-bottom:24px}
  #app{max-width:920px;padding:0 44px 40px}

  .topbar{padding:22px 0 10px}
  .topbar h1{font-size:22px;letter-spacing:-.015em}
  .card{padding:22px;border-radius:16px;margin-bottom:14px}
  .card.tight{padding:16px 18px}
  .sec-title{font-size:16px}
  .lblock{margin-bottom:12px}
  .lblock .lhead{padding:16px 20px}
  .lblock .lbody{padding:0 22px 20px}
  .turn{max-width:76%}
  .stat-grid{gap:12px}
  .stat{padding:16px}
  .stat .v{font-size:26px}
  .stat .k{font-size:12.5px}
  .heat{grid-template-columns:repeat(15,1fr);gap:6px}
  .list-item{padding:13px 0;font-size:15px}
  .login-wrap{max-width:440px;padding-top:11vh}
  .brand{font-size:31px}
  .btn:hover{border-color:var(--ink-3)}
  .btn.primary:hover{filter:brightness(1.06)}
  .btn:active{transform:none}
  #toast{bottom:36px}

  /* 底部导航 → 左侧竖排导航 */
  #tabbar{position:fixed;top:0;left:0;right:auto;bottom:0;width:248px;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:2px;padding:26px 14px 18px;border-top:none;border-right:1px solid var(--line);
    background:var(--card);backdrop-filter:none}
  #tabbar::before{content:"英语突击";display:block;font-family:var(--serif);
    font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
    padding:0 12px 14px}
  #tabbar::after{content:"90 天表达突击 · 每天 60 分钟";display:block;margin-top:auto;
    padding:14px 12px 0;border-top:1px solid var(--line-2);
    font-size:11.5px;color:var(--ink-3);letter-spacing:.03em;line-height:1.5}
  #tabbar a{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;
    width:100%;padding:11px 12px;border-radius:10px;font-size:14.5px;font-weight:600}
  #tabbar a .ic{font-size:17px;width:20px;text-align:center;line-height:1}
  #tabbar a:hover{background:var(--line-2)}
  #tabbar a.on{background:var(--accent-soft);color:var(--accent)}

  /* 底部抽屉 → 居中对话框 */
  .sheet .panel{left:50%;right:auto;bottom:auto;top:50%;
    transform:translate(-50%,-50%);width:min(640px,90vw);max-height:86vh;
    border-radius:18px;border:1px solid var(--line);overflow-y:auto;
    padding-bottom:26px}
  .sheet .panel::before{content:"";display:block;width:0;height:0}

  /* 正文阅读宽度（英文句子别拉太长） */
  .lbody .tx,.lbody .ex,.readbox,.read p{max-width:70ch}

  /* 课表：90 天排成两列，别一列拉到底（.day-row 直接挂在 #app 下） */
  #app:has(.day-row){column-count:2;column-gap:24px}
  #app:has(.day-row) .topbar,#app:has(.day-row) .stage-head{column-span:all}
  .day-row{break-inside:avoid;margin-bottom:8px}
}

/* ===================== 大屏（≥1440） ===================== */
@media (min-width:1440px){
  #app{max-width:1000px;padding:0 56px 48px}
  body{font-size:17px}
  .topbar h1{font-size:24px}
}