/* 托业口语一站式学习 · 移动优先样式 */
:root{
  --bg:#f6f6f4; --card:#fff; --line:rgba(0,0,0,.10); --line2:rgba(0,0,0,.16);
  --tx:#1c1c1a; --tx2:#5f5e5a; --tx3:#93918a;
  --pri:#5b5bd6; --pri-d:#4a4ac4;
  --ok:#1D9E75; --warn:#BA7517; --bad:#E24B4A; --blue:#185FA5;
  --r:12px; --r2:8px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--tx);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
.wrap{max-width:560px;margin:0 auto;padding:12px 12px 90px}

/* header */
header{padding:8px 2px 12px}
.hd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hd-t{font-size:17px;font-weight:600;letter-spacing:.2px}
.hd-s{font-size:12px;color:var(--tx3);margin-top:2px}
.streak{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:5px 12px;flex:none}
.streak b{display:block;font-size:19px;line-height:1.1;color:var(--pri)}
.streak span{font-size:10px;color:var(--tx3)}
.hd-date{font-size:13px;color:var(--tx2);margin-top:8px}

/* nav */
nav{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:4px;margin-bottom:12px;position:sticky;top:0;z-index:20}
.nb{flex:1;border:0;background:transparent;padding:9px 2px;border-radius:var(--r2);font-size:14px;color:var(--tx2);font-family:inherit;cursor:pointer}
.nb.on{background:var(--pri);color:#fff;font-weight:500}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.ct{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cw{font-size:14px;color:var(--tx2)}
.muted{font-size:13px;color:var(--tx3)}
.mt{margin-top:10px}
.hidden{display:none!important}
.warn-card{border-color:rgba(226,75,74,.35);background:#FCEBEB}
.warn{font-size:13px;color:var(--bad);background:#FCEBEB;border-radius:var(--r2);padding:8px 10px;margin-top:8px}

/* hero */
.hero{border-color:var(--line2)}
.hero-t{font-size:19px;font-weight:600}
.hero-s{font-size:12px;color:var(--tx3);margin-top:3px}
.hero-w{font-size:13px;color:var(--pri);margin-top:9px;font-weight:500}
.hero-tip{font-size:13px;color:var(--tx2);margin-top:8px;background:#F1EFE8;border-radius:var(--r2);padding:9px 10px;line-height:1.55}

/* drill */
.dr-lead{font-size:14px;color:var(--tx2);margin-bottom:10px}
.dr-samples{display:flex;flex-direction:column;gap:6px}
.dr-s{display:flex;align-items:center;gap:8px;background:#F1EFE8;border-radius:var(--r2);padding:8px 10px}
.dr-sx{flex:1;font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dr-ans{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.dr-ansh{font-size:13px;color:var(--pri);cursor:pointer;padding:4px 0}
.dr-ansh b{font-weight:400;color:var(--tx3)}
.dr-a{font-size:14px;background:#E1F5EE;border-radius:var(--r2);padding:9px 10px;line-height:1.6}
.dr-k{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--tx2)}
.dr-k li{margin-bottom:3px}

/* rec block */
.rec{border:1px solid var(--line);border-radius:var(--r);padding:11px;margin-top:10px;background:#FCFCFB}
.rec-hd{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.rec-t{font-size:13px;font-weight:600;flex:1;min-width:120px}
.rec-rate{font-size:11px;color:var(--tx3);display:flex;align-items:center;gap:4px}
.rec-rate b{color:var(--tx2);font-weight:500;min-width:28px;text-align:center;display:inline-block}
.rec-hint{font-size:12px;color:var(--tx3);margin-top:4px}
.rec-text{font-size:15px;line-height:1.65;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:10px;margin:8px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.rec-ref,.rec-mine{margin:6px 0}
.cv-tl,.cv-wv{width:100%;display:block;background:#fff;border:1px solid var(--line);border-radius:6px}
.cv-lab{font-size:10px;color:var(--tx3);margin-top:2px}
.rec-btns{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}

/* buttons */
.btn{border:1px solid var(--line2);background:var(--card);color:var(--tx);border-radius:var(--r2);
  padding:8px 14px;font-size:14px;font-family:inherit;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.4}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.pri:active{background:var(--pri-d)}
.btn.rec-btn{background:#FCEBEB;border-color:rgba(226,75,74,.4);color:var(--bad)}
.btn.on{background:#E1F5EE;border-color:var(--ok);color:var(--ok)}
.btn.bad{background:#FCEBEB;border-color:var(--bad);color:var(--bad)}
.btn.mid{background:#FAEEDA;border-color:var(--warn);color:var(--warn)}
.btn.good{background:#E1F5EE;border-color:var(--ok);color:var(--ok)}
.mini{border:1px solid var(--line2);background:var(--card);border-radius:6px;padding:3px 8px;
  font-size:12px;color:var(--tx2);cursor:pointer;font-family:inherit;flex:none;line-height:1.5}
.mini:active{background:#F1EFE8}

/* score */
.sc{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.sc-tot{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.sc-tot b{font-size:34px;line-height:1;font-weight:600}
.sc-tot span{font-size:13px;padding:2px 9px;border-radius:99px}
.sc-tot.green b{color:var(--ok)} .sc-tot.green span{background:#E1F5EE;color:var(--ok)}
.sc-tot.blue b{color:var(--blue)} .sc-tot.blue span{background:#E6F1FB;color:var(--blue)}
.sc-tot.amber b{color:var(--warn)} .sc-tot.amber span{background:#FAEEDA;color:var(--warn)}
.sc-tot.red b{color:var(--bad)} .sc-tot.red span{background:#FCEBEB;color:var(--bad)}
.sc-dims{display:flex;flex-direction:column;gap:9px}
.sc-dn{display:flex;justify-content:space-between;font-size:13px;margin-bottom:3px}
.sc-dn b{font-weight:600}
.bar{height:5px;background:#F1EFE8;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--pri);border-radius:99px}
.sc-dx{font-size:11px;color:var(--tx3);margin-top:3px}
.sc-adv{margin-top:11px;background:#F1EFE8;border-radius:var(--r2);padding:9px 11px}
.sc-advt{font-size:12px;font-weight:600;margin-bottom:4px}
.sc-adv ul{margin:0;padding-left:17px;font-size:13px;color:var(--tx2)}
.sc-adv li{margin-bottom:2px}

/* tabs2 */
.tabs2{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.t2{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:6px 13px;
  font-size:13px;color:var(--tx2);cursor:pointer;white-space:nowrap;font-family:inherit;flex:none}
.t2.on{background:var(--tx);border-color:var(--tx);color:#fff}

/* phonemes */
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px}
.ph{border:1px solid var(--line);background:#FCFCFB;border-radius:var(--r2);padding:11px 4px;
  font-size:16px;cursor:pointer;font-family:ui-monospace,Menlo,monospace;color:var(--tx)}
.ph.on{background:var(--pri);border-color:var(--pri);color:#fff}
.ph-detail{border-color:var(--pri)}
.ph-big{font-size:40px;font-family:ui-monospace,Menlo,monospace;font-weight:600;text-align:center;color:var(--pri);line-height:1.2}
.ph-sub{text-align:center;font-size:12px;color:var(--tx3);margin-bottom:8px}
.ph-tip{font-size:14px;background:#F1EFE8;border-radius:var(--r2);padding:10px;line-height:1.6}
.ph-sp{font-size:13px;color:var(--tx2);margin-top:8px}
.ph-words{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.pw{border:1px solid var(--line);background:#FCFCFB;border-radius:var(--r2);padding:8px 5px;cursor:pointer;
  display:flex;flex-direction:column;gap:1px;text-align:center;font-family:inherit;align-items:center}
.pw b{font-size:14px;font-weight:600}
.pw span{font-size:10px;color:var(--tx3);font-family:ui-monospace,Menlo,monospace}
.pw i{font-size:11px;color:var(--tx2);font-style:normal}
.ph-conf{font-size:12px;color:var(--warn);margin-top:8px}

/* minimal pairs */
.mp-h{font-size:15px;font-family:ui-monospace,Menlo,monospace;color:var(--pri);margin-bottom:8px}
.mp-h span{color:var(--tx3);font-size:12px;font-family:inherit;margin:0 5px}
.mp-w{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* linking */
.lk-r{font-size:13px;color:var(--tx2);margin-bottom:8px}
.lk-eg{display:flex;flex-direction:column;gap:5px}
.lk-e{display:flex;align-items:center;gap:7px;background:#FCFCFB;border-radius:6px;padding:6px 8px;flex-wrap:wrap}
.lk-e b{font-size:14px}
.lk-e span{font-size:12px;color:var(--tx3);font-family:ui-monospace,Menlo,monospace}

/* patterns */
.pt{margin-bottom:13px;padding-bottom:11px;border-bottom:1px dashed var(--line)}
.pt:last-child{border-bottom:0;margin-bottom:0}
.pt-n{font-size:14px;font-weight:600;margin-bottom:6px}
.pt-n span{font-weight:400;font-size:11px;color:var(--tx3);margin-left:7px}
.pt-e{display:flex;align-items:center;gap:7px;padding:4px 0;flex-wrap:wrap}
.pt-e b{font-size:14px;font-weight:500}
.pt-e i{font-size:12px;color:var(--tx3);font-style:normal}

/* templates */
.tp-k{margin-bottom:10px}
.tp-k>b{font-size:12px;color:var(--pri);display:block;margin-bottom:3px}
.tp-e{font-size:13px;padding:4px 0;display:flex;gap:7px;align-items:flex-start;font-family:ui-monospace,Menlo,monospace}
.tp-w{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 10px}
.tp-s{background:#FCFCFB;border-radius:6px;padding:7px 9px;margin-bottom:6px}
.tp-s b{font-size:12px;color:var(--pri)}
.tp-s div{font-size:13px;margin:2px 0}
.tp-s i{font-size:11px;color:var(--tx3);font-style:normal}
.tp-sample{margin-top:10px}
.tp-sx{font-size:13px;line-height:1.65;background:#E6F1FB;border-radius:var(--r2);padding:10px;font-family:ui-monospace,Menlo,monospace}
.tp-cn{font-size:12px;color:var(--tx2);margin-top:6px;line-height:1.6}

/* stat grid */
.vk{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px}
.vk-i{background:#F1EFE8;border-radius:var(--r2);padding:9px 4px;text-align:center}
.vk-i b{display:block;font-size:20px;font-weight:600;line-height:1.2}
.vk-i span{font-size:11px;color:var(--tx3)}

/* flashcard */
.flip{cursor:pointer;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative}
.flip.on{background:#FCFCFB}
.fc-top{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tx3)}
.tag{background:#F1EFE8;border-radius:4px;padding:1px 6px}
.tag.new{background:#E1F5EE;color:var(--ok)}
.fc-idx{margin-left:auto}
.fc-w{font-size:30px;font-weight:600;letter-spacing:.5px}
.fc-i{font-size:14px;color:var(--tx3);font-family:ui-monospace,Menlo,monospace;margin-top:3px}
.fc-cn{margin-top:10px;font-size:18px}
.fc-ph{font-size:13px;color:var(--tx2);margin-top:4px;font-family:ui-monospace,Menlo,monospace}
.fc-hint{font-size:12px;color:var(--tx3);margin-top:14px}
.grade{display:flex;gap:8px;margin-top:10px}
.grade .btn{flex:1;text-align:center}
.done-card{text-align:center;padding:28px 14px}

/* vocab list */
.u-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.ub{border:1px solid var(--line);background:#FCFCFB;border-radius:var(--r2);padding:9px 5px;cursor:pointer;
  font-size:13px;font-family:inherit;text-align:center;color:var(--tx)}
.ub span{display:block;font-size:10px;color:var(--tx3);margin-top:2px}
.wl{display:flex;flex-direction:column;gap:3px;max-height:420px;overflow:auto}
.wl-i{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:6px;flex-wrap:wrap}
.wl-i.ok{background:#EAF3DE}
.wl-i b{font-size:14px;font-weight:600;min-width:96px}
.wl-i span{font-size:11px;color:var(--tx3);font-family:ui-monospace,Menlo,monospace;min-width:76px}
.wl-i i{font-size:12px;color:var(--tx2);font-style:normal}
.wl-i em{font-size:11px;color:var(--tx3);font-style:normal;margin-left:auto}

/* sets */
.set{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px;margin-bottom:7px;cursor:pointer}
.set.on{background:#EAF3DE;border-color:rgba(99,153,34,.4)}
.set-n{width:26px;height:26px;border-radius:50%;background:#F1EFE8;display:flex;align-items:center;
  justify-content:center;font-size:11px;color:var(--tx2);flex:none}
.set-b{flex:1;min-width:0}
.set-t{font-size:13px;line-height:1.35}
.set-c{font-size:11px;color:var(--tx3);margin-top:1px}
.set-s{font-size:15px;font-weight:600;color:var(--ok);flex:none}
.set-f{margin-top:-4px}
.row{display:flex;align-items:center;gap:9px;margin-bottom:8px;font-size:13px}
.row label{width:74px;color:var(--tx2);flex:none}
.row input[type=text],.row input[type=number]{flex:1;border:1px solid var(--line2);border-radius:6px;
  padding:7px 9px;font-size:14px;font-family:inherit;background:#fff;min-width:0}

/* milestones */
.ms{border-left:3px solid var(--line2);padding:2px 0 2px 11px;margin-bottom:12px}
.ms.pass{border-left-color:var(--ok)}
.ms-n{font-size:13px;font-weight:600}
.ms-d{font-size:12px;color:var(--tx2);margin-top:2px}
.ms-b{margin-top:5px;display:flex;gap:6px}

/* errors */
.err-add{display:flex;gap:6px;margin-bottom:12px}
.err-add select,.err-add input{border:1px solid var(--line2);border-radius:6px;padding:7px 8px;font-size:13px;font-family:inherit;background:#fff}
.err-add select{flex:none}
.err-add input{flex:1;min-width:0}
.err-g{margin-bottom:11px}
.err-g>b{font-size:12px;color:var(--tx2);display:block;margin-bottom:4px}
.err-i{font-size:13px;padding:5px 8px;background:#FCFCFB;border-radius:6px;margin-bottom:3px;display:flex;gap:7px;align-items:center}
.err-i span{font-size:11px;color:var(--tx3);flex:none}
.err-i .mini{margin-left:auto}

/* heatmap */
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.heat i{aspect-ratio:1;border-radius:3px;background:#EDEDEA;display:block}
.heat i.buf{opacity:.5;border:1px dashed var(--line2)}
.heat i.now{outline:2px solid var(--pri);outline-offset:1px}
.h0{background:#EDEDEA!important}
.h1{background:#CECBF6!important}
.h2{background:#AFA9EC!important}
.h3{background:#534AB7!important}
.heat-lab{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:7px;font-size:11px;color:var(--tx3)}
.heat-lab i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* tasks */
.tk{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.tk:last-child{border-bottom:0}
.ck{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line2);background:#fff;
  color:var(--ok);font-size:14px;cursor:pointer;flex:none;line-height:1;padding:0}
.tk.on .ck{background:#E1F5EE;border-color:var(--ok)}
.tk-b{flex:1;min-width:0}
.tk-n{font-size:14px}
.tk.on .tk-n{color:var(--ok)}
.tk-d{font-size:11px;color:var(--tx3);line-height:1.4}

/* timer */
.tm{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);
  border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.tm-in{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto}
.tm-n{font-size:13px;color:var(--tx2);flex:1}
.tm-t{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.tm-bar{height:3px;background:#F1EFE8;margin-top:8px;border-radius:99px;overflow:hidden;max-width:560px;margin-left:auto;margin-right:auto}
.tm-bar i{display:block;height:100%;background:var(--pri)}

/* chart */
.cv-chart{width:100%;display:block;margin-top:10px}

/* recording list */
.rl{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px dashed var(--line)}
.rl span{font-size:12px;color:var(--tx3);width:34px;flex:none}
.rl b{font-size:14px;width:52px;flex:none}
.rl audio{flex:1;height:32px;min-width:0}

/* forms */
textarea{width:100%;border:1px solid var(--line2);border-radius:var(--r2);padding:9px 10px;
  font-size:14px;font-family:inherit;background:#fff;resize:vertical;line-height:1.6}

/* dialog + toast */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.dlg{background:#fff;border-radius:14px;padding:20px;max-width:400px;font-size:14px;line-height:1.7}
.dlg h3{margin:0 0 10px;font-size:16px}
.dlg code{background:#F1EFE8;padding:1px 5px;border-radius:4px;font-size:12px;word-break:break-all}
.dlg p{margin:8px 0}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(10px);
  background:rgba(28,28,26,.92);color:#fff;padding:9px 18px;border-radius:99px;font-size:13px;
  opacity:0;pointer-events:none;transition:.22s;z-index:80;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 云端同步 ===== */
.sy-st{font-size:13px;padding:9px 12px;border-radius:var(--r2);background:#F4F3EE;
  color:var(--tx2);line-height:1.6;margin-bottom:10px}
.sy-st.ok{background:#EAF3EC;color:#2F6B3E}
.sy-st.err{background:#FBECEA;color:#A33}
.sy-st.on{background:#EFEFEA;color:var(--tx2)}
.sy-code{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx3);
  background:#F7F6F2;border:1px dashed var(--line2);border-radius:var(--r2);padding:9px 12px}
.sy-code b{flex:1;font-size:17px;letter-spacing:2.5px;color:var(--tx);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ===== 补打卡 ===== */
.ct-x{float:right;font-weight:400;font-size:11px;color:var(--tx3)}
.heat i.mk{cursor:pointer}
.heat i.fut{opacity:.32}
.dlg-s{margin:4px 0!important;font-size:13px;color:var(--tx2);line-height:1.6}
.mk-l{margin:12px 0 8px}
.mk-i{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;margin-bottom:6px;
  background:#F7F6F2;border:1px solid var(--line);border-radius:var(--r2);
  font-size:14px;color:var(--tx);text-align:left}
.mk-i.on{background:#EAF3EC;border-color:#B9D9C2;color:#2F6B3E}
.mk-c{width:20px;height:20px;line-height:18px;text-align:center;border:1.5px solid var(--line2);
  border-radius:5px;font-size:12px;flex:none;color:transparent}
.mk-i.on .mk-c{background:#3E8B54;border-color:#3E8B54;color:#fff}
.mk-n{flex:1}
.mk-m{font-size:12px;color:var(--tx3)}