/* reading80 · 公共样式
 * 四个页面（课程目录 / 上课页 / 单词卡 / 单元复习）共用这一份。
 * 页面自己特有的规则写在各自的 <style> 里，别往这里塞。
 */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior-x:none;overflow-x:hidden}
:root{
  --bg:#FFF9F0;--card:#fff;--ink:#3A2A1E;--ink2:#7A6754;--ink3:#A79078;
  --line:#F0E2CE;--soft:#FFF6E9;
  --or:#FF7A3D;--or2:#E8863C;--bl:#3D8BD4;--gr:#3FA34D;--pu:#B07BC8;--yl:#FFC94D;--red:#D9483A;
}
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;
  padding:calc(52px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}
img,svg{display:block}
.wrap{max-width:560px;margin:0 auto}

/* 顶栏 */
.topbar{position:fixed;top:0;left:0;right:0;height:calc(48px + env(safe-area-inset-top));z-index:80;display:flex;align-items:center;gap:8px;
  padding:env(safe-area-inset-top) 10px 0;background:rgba(255,249,240,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.tb-btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:11px;padding:6px 10px;
  font-size:.82rem;font-weight:700;text-decoration:none;display:flex;align-items:center;min-height:34px}
.tb-title{flex:1;min-width:0;text-align:center;font-size:.9rem;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.clock{font-variant-numeric:tabular-nums}

/* 卡 */
.card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:14px;margin-bottom:12px}
.head{display:flex;gap:12px;align-items:center}
.head .media{flex:0 0 116px}
.head .txt{flex:1;min-width:0}
.head .ttl{font-size:1.12rem;font-weight:900;line-height:1.25}
.head .ttl .zh{display:block;font-size:.8rem;font-weight:700;color:var(--ink2)}
.head .meta{font-size:.76rem;color:var(--ink2);margin-top:4px;font-weight:700}
.mchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.mchip{font-size:.7rem;font-weight:800;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--ink2)}
.mchip.st{color:#E0A62B}
.src{font-size:.7rem;color:#A79078;margin-top:6px}

/* 步骤条 */
.steps{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;padding-bottom:2px}
.step{flex:1 0 auto;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:9px 10px;
  font-weight:800;font-size:.82rem;color:var(--ink2);white-space:nowrap}
.step.on{border-color:var(--or);background:#FFF1E6;color:var(--or)}
.step .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--line);margin-left:4px;vertical-align:1px}
.step.done .dot{background:var(--gr)}
.pane{display:none;animation:fade .22s}
.pane.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 漫画条 */
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;
  -webkit-overflow-scrolling:touch}
.pn{flex:0 0 100%;scroll-snap-align:center}
.pcap{font-size:.74rem;font-weight:800;color:var(--ink2);text-align:center;margin-top:5px}
.pn.on .pcap{color:var(--or)}
/* 插画：文生图底图 + 编号徽章（徽章位置在 art.js 的 MARKS 里调） */
picture{display:block;line-height:0}
.pbox{position:relative;border-radius:16px;overflow:hidden;background:#FDF3E4;line-height:0}
.pimg{width:100%;height:auto;display:block}
.bdg{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
  background:#FF7A3D;color:#fff;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2.5px solid #fff;box-shadow:0 2px 7px rgba(58,42,30,.32);transition:transform .18s,box-shadow .18s}
.bdg.on{transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 0 3.5px #FFD54A,0 3px 10px rgba(58,42,30,.42)}
.fa{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;background:#FDF3E4}
.faimg{width:100%;height:auto;display:block;border-radius:14px;background:#FDF3E4}
.who .fa{height:auto;aspect-ratio:1}
.wf{display:block;position:relative;width:100%;padding-bottom:100%}
.wf picture{position:absolute;left:0;top:0;width:100%;height:100%}
.hint{font-size:.76rem;color:var(--ink2);text-align:center;margin:8px 0 2px;font-weight:700}

/* 对话行 */
.line{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:14px;border:1.5px solid transparent;margin-bottom:6px}
.line.on{background:#FFF6E9;border-color:#F3D9B4}
.line .av{flex:0 0 42px;width:42px;height:42px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.line .bd{flex:1;min-width:0}
.line .en{font-size:1rem;font-weight:800;letter-spacing:.2px}
.line .zh{font-size:.78rem;color:var(--ink2);margin-top:2px}
.line .no{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;align-items:center}
.numb{width:22px;height:22px;border-radius:50%;color:#fff;font-size:.72rem;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.sbtn{border:1px solid var(--line);background:#fff;border-radius:10px;font-size:1rem;width:38px;height:34px;line-height:1}
.sbtn.play{border-color:var(--bl);background:#EAF3FF}
.sbtn.busy{border-color:var(--or);background:#FFF1E6}

/* 按钮 */
.btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:50px;min-width:0;overflow:hidden;
  border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink);
  font-size:.98rem;font-weight:800;margin-bottom:8px;font-family:inherit}
.btn:active{transform:scale(.985)}
.btn.primary{background:linear-gradient(135deg,#FF9A5B,#FF7A3D);color:#fff;border:none}
.btn.blue{background:#EAF3FF;border-color:#B7D6F5;color:#1F6FB2}
.btn.green{background:linear-gradient(135deg,#6FCF7A,#3FA34D);color:#fff;border:none}
.btn.rec{background:linear-gradient(135deg,#FF8A5B,#FF6B35);color:#fff;border:none}
.btn.rec.on{animation:pulse 1.1s ease-in-out infinite}
.btn.rec:disabled{background:#EFE6DA;color:#B4A491;border:none}
.btn.sm{min-height:42px;font-size:.86rem;width:auto;padding:0 14px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,.45)}50%{box-shadow:0 0 0 11px rgba(255,107,53,0)}}
.row{display:flex;gap:8px}
.row>*{flex:1;min-width:0}
.mini{font-size:.75rem;color:var(--ink2);text-align:center;margin-top:4px}

/* 评分板 */
.score{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px;margin-top:10px}
.big{font-size:2.5rem;font-weight:900;text-align:center;line-height:1;color:var(--or)}
.big .u{font-size:.9rem;font-weight:800;color:var(--ink3);margin-left:2px}
.verdict{text-align:center;font-weight:800;font-size:.88rem;margin-top:6px}
.bars{display:grid;gap:7px;margin-top:10px}
.bar-row{display:grid;grid-template-columns:60px 1fr 38px;align-items:center;gap:8px;font-size:.78rem;font-weight:800;color:var(--ink2)}
.bar{height:10px;background:#F5EDE1;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#FFB347,var(--gr));transition:width .4s}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tg{border-radius:9px;padding:4px 7px;font-weight:800;font-size:.76rem;background:#F7F1E6;color:var(--ink2)}
.tg.bad{background:#FFE4E0;color:var(--red)}
.weak{font-size:.74rem;color:var(--ink2);margin-top:8px;font-weight:700}
.mystars{font-size:1.5rem;letter-spacing:3px;text-align:center;margin-top:8px}

/* 判断题 */
.q{border:1.5px solid var(--line);border-radius:16px;padding:12px;background:#fff;margin-bottom:9px}
/* 要背的重点词：课文里标红 */
.kw{color:var(--red);font-weight:900;background:#FFEDE9;border-radius:5px;padding:0 3px}
.kwlg{font-size:.76rem;font-weight:800;color:var(--ink2);margin-top:5px}
.kwlg b{color:var(--red)}
/* 记一记 · 先读两遍 */
.lcard{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px;margin-bottom:9px;display:flex;gap:12px;align-items:center}
.lcard .art{flex:0 0 84px}
.q.ok{border-color:#BEDFC4;background:#F4FBF5}
.q.no{border-color:#F3C6BE;background:#FFF7F5}
.qh{display:flex;gap:8px;align-items:flex-start}
.qno{flex:0 0 24px;height:24px;border-radius:50%;background:var(--soft);border:1px solid var(--line);
  font-size:.76rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.qen{flex:1;font-size:1.02rem;font-weight:800}
.qen .kw{border-bottom:3px solid #FFD98A;background:#FFFBEC;border-radius:3px;padding:0 2px;color:inherit}
.tf{display:flex;gap:8px;margin-top:10px}
.tf button{flex:1;min-height:48px;border-radius:13px;border:1.5px solid var(--line);background:#fff;
  font-weight:800;font-size:1rem;font-family:inherit;color:var(--ink)}
.tf button.sel-hi{border-color:var(--gr);background:#EAF7EC;color:#2E7D3A}
.tf button.sel-lo{border-color:var(--red);background:#FFEDE9;color:var(--red)}
.tf button.right{border-color:var(--gr);background:#EAF7EC;color:#2E7D3A}
.tf button:disabled{opacity:.85}
.exp{margin-top:10px;font-size:.8rem;font-weight:700;line-height:1.6;border-radius:12px;padding:9px 10px;display:none}
.exp.show{display:block}
.exp.ok{background:#EAF7EC;color:#2E7D3A}
.exp.no{background:#FFF0ED;color:#B33F32}

/* 词汇卡 */
.wcard{display:flex;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px;margin-bottom:9px}
.wcard .art{flex:0 0 92px}
.wcard .en{font-size:1.5rem;font-weight:900}
.wcard .ph{font-size:.86rem;color:var(--bl);font-weight:800;font-family:'Courier New',monospace}
.wcard .zh{font-size:.84rem;color:var(--ink2);font-weight:700;margin-top:2px}
.mcard{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px;margin-bottom:9px}
.mcard.open{border-color:#F3D9B4;background:#FFFDF8}
.mrow{display:flex;gap:12px;align-items:center}
.mrow .art{flex:0 0 92px}
.qzh{font-size:1.02rem;font-weight:900;line-height:1.35}
.qhint{font-size:.76rem;color:var(--ink3);font-weight:700;margin-top:3px}
.men{font-size:1.32rem;font-weight:900;letter-spacing:2px;margin-top:6px;word-break:break-word}
.mph{font-size:.86rem;color:var(--bl);font-weight:800;font-family:'Courier New',monospace}
.pcard{background:#FFF9EC;border:1.5px solid #F3E3C3;border-radius:16px;padding:12px;margin-bottom:9px}
.pcard .en{font-size:1.08rem;font-weight:900}
.pcard .zh{font-size:.8rem;color:var(--ink2);font-weight:700;margin-top:2px}

/* 成绩单 */
.perfect{text-align:center;padding:6px 0}
.perfect .medal{width:104px;margin:0 auto 6px}
.perfect .ttl{font-size:1.2rem;font-weight:900}
.perfect .sub{font-size:.82rem;color:var(--ink2);font-weight:700;margin-top:3px}
.stat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.stat .it{background:var(--soft);border:1px solid var(--line);border-radius:13px;padding:9px 6px;text-align:center}
.stat .it b{display:block;font-size:1.32rem;font-weight:900;color:var(--or)}
.stat .it span{font-size:.7rem;font-weight:800;color:var(--ink2)}

/* 设置抽屉 */
.mask{position:fixed;inset:0;background:rgba(58,42,30,.34);z-index:90;display:none}
.mask.on{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#fff;border-radius:20px 20px 0 0;
  padding:16px 16px calc(26px + env(safe-area-inset-bottom));transform:translateY(102%);transition:transform .24s;max-width:560px;margin:0 auto}
.sheet.on{transform:none}
.sheet h3{font-size:1rem;margin-bottom:10px}
.lbl{font-size:.76rem;font-weight:800;color:var(--ink2);margin:10px 0 6px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{border:1.5px solid var(--line);background:#fff;border-radius:13px;padding:10px 8px;font-family:inherit;
  font-size:.84rem;font-weight:800;color:var(--ink);text-align:left}
.opt small{display:block;font-weight:700;color:var(--ink3);font-size:.7rem}
.opt.on{border-color:var(--or);background:#FFF1E6;color:var(--or)}
.opt.on small{color:#D98A5B}
.toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(58,42,30,.9);color:#fff;
  font-size:.84rem;font-weight:800;padding:9px 16px;border-radius:999px;z-index:120;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
/* ---- 其他页面也用的公共件（原先各自复制了一份） ---- */
.tb-title{flex:1;min-width:0;text-align:center;font-size:.9rem;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wcard{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px;margin-bottom:9px}
.wcard.open{border-color:#F3D9B4;background:#FFFDF8}
.wrow{display:flex;gap:12px;align-items:center}
.wrow .art{flex:0 0 84px}
.from{font-size:.7rem;color:var(--ink3);font-weight:700;margin-top:4px}
.done{font-size:.7rem;font-weight:800;color:var(--gr)}
.big{font-size:2.3rem;font-weight:900;text-align:center;color:var(--or);line-height:1}

/* 选择题（做一做里的猜词义 / 记一记小测）判分配色 */
.opt1.right{border-color:var(--gr);background:#EAF7EC;color:#2E7D3A}
.opt1.sel-lo{border-color:var(--red);background:#FFEDE9;color:#B33F32}
.q.ok .opt1,.q.no .opt1{color:var(--ink)}
.q.ok .opt1.right,.q.no .opt1.right{color:#2E7D3A}
.q.no .opt1.sel-lo{color:#B33F32}

/* 次要按钮（看成绩单这种，别抢主流程的位置） */
.btn.ghost{background:transparent;border-style:dashed;color:var(--ink2);width:auto;padding:0 16px}

/* ---- 语义类 ----
 * 下面这几个以前每个页面各写一份内联 style（「font-weight:900;font-size:.98rem」出现过 7 次），
 * 想统一改视觉就要动 5 个文件。现在收到这里，改一处就行。
 */
.sec-ttl{font-weight:900;font-size:.98rem;margin-bottom:8px}
.sec-ttl.mb0{margin-bottom:0}
.mini.l{text-align:left}
.mini.mt0{margin-top:0}
.gap8{height:8px}
/* 「调一下」类的小操作（听一遍 / 慢速 / 逐词）：虚线小按钮，
   别和主按钮（读、去做题）一样大，孩子才不会点错 */
.chips{display:flex;gap:8px;margin-bottom:10px}
.chip{flex:1;min-width:0;min-height:40px;padding:0 6px;border-radius:12px;
  border:1.5px dashed var(--line);background:#fff;color:var(--ink2);font-family:inherit;
  font-size:.84rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:5px}
.chip:active{transform:scale(.98)}
.chip.on{border-style:solid;border-color:var(--bl);background:#EAF3FF;color:#1F6FB2}
/* 顶栏里靠左的书名（目录页用），右边留空撑开 */
.topbar b{font-size:.9rem;font-weight:900;white-space:nowrap}
.sp{flex:1}