:root{
  --bg:#f7f4ed;
  --card:#ffffff;
  --ink:#2b2a26;
  --ink2:#57534a;
  --muted:#6f695e;
  --line:#e9e3d7;
  --brand:#2f7d6a;
  --brand-soft:#e6f2ee;
  --amber:#e79b28;
  --amber-soft:#fdf1dc;
  --blue:#4a6fa5;
  --blue-soft:#eaf0f9;
  --rose:#c96a5a;
  --rose-soft:#fbeae6;
  --ok:#3f8f5c;
  --shadow:0 1px 2px rgba(43,42,38,.04),0 8px 24px -12px rgba(43,42,38,.18);
  --r:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
p{margin:0}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;font-size:inherit;color:inherit}

.app{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
.rail{
  background:#fffdf9;border-right:1px solid var(--line);
  padding:18px 14px;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:9px;padding:6px 8px 16px}
.logo{font-size:24px}
.bname{font-weight:700;font-size:15.5px;letter-spacing:-.02em}
#nav{display:flex;flex-direction:column;gap:3px}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  color:var(--ink2);font-size:14.5px;text-align:left;transition:.15s;
}
.nav-item .ico{font-size:17px;width:22px;text-align:center}
.nav-item:hover{background:#f4efe5;color:var(--ink)}
.nav-item.active{background:var(--brand-soft);color:#1f5d4f;font-weight:600}
.rail-foot{margin-top:auto;padding:10px 8px}
.tiny{font-size:11.5px;color:var(--muted);line-height:1.5}

.main{padding:22px 30px 60px;max-width:1060px;width:100%}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.topbar h1{font-size:22px}
.sub{color:var(--muted);font-size:13px;margin-top:3px}
.tb-right{display:flex;align-items:center;gap:9px}
.pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:13px;color:var(--ink2)}
.pill b{color:var(--ink);font-weight:700}
.ghost{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 13px;font-size:13px;color:var(--ink2)}
.ghost:hover{border-color:#d8cfbc;color:var(--ink)}

.view{display:flex;flex-direction:column;gap:16px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card.tight{padding:16px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.card-head h3{font-size:16px}
.tag{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--brand-soft);color:#1f5d4f;white-space:nowrap}
.tag.amber{background:var(--amber-soft);color:#8a5a10}
.tag.blue{background:var(--blue-soft);color:#33517f}
.tag.gray{background:#f0ece3;color:var(--muted)}

.btn{border-radius:12px;padding:10px 18px;min-height:44px;font-size:14.5px;font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px -8px rgba(47,125,106,.9)}
.btn-primary:hover{background:#276d5c}
.btn-soft{background:var(--brand-soft);color:#1f5d4f}
.btn-soft:hover{background:#d8ebe5}
.btn-line{border:1px solid var(--line);background:#fff;color:var(--ink2)}
.btn-line:hover{border-color:#d5c9b0;color:var(--ink)}
.btn-amber{background:var(--amber-soft);color:#8a5a10;border:1px solid #f0dcb8}
.btn-amber:hover{background:#fbe8c8}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.big{padding:14px 26px;font-size:16px;border-radius:14px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- home ---- */
.hero{background:linear-gradient(135deg,#fffdf8 0%,#f2f7f4 100%);border:1px solid #e3ece6}
.hero-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.hero h2{font-size:19px;margin-bottom:6px}
.hero p{color:var(--ink2);font-size:13.5px}
.meta-row{display:flex;gap:22px;margin-top:16px;flex-wrap:wrap}
.meta-item{font-size:12.5px;color:var(--muted)}
.meta-item b{display:block;font-size:20px;color:var(--ink);font-weight:700;line-height:1.3}

.steps{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.step{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px}
.step:hover{background:#faf7f0}
.step .num{width:26px;height:26px;border-radius:9px;background:#f2eee4;color:var(--ink2);font-size:12.5px;display:grid;place-items:center;font-weight:700;flex:0 0 auto}
.step.done .num{background:var(--brand-soft);color:var(--brand)}
.step .st-title{font-size:14.5px;font-weight:600}
.step .st-desc{font-size:12.5px;color:var(--muted)}
.step .st-time{margin-left:auto;font-size:12px;color:var(--muted)}

/* ---- word cards ---- */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.wcard{border:1px solid var(--line);border-radius:15px;padding:15px;background:#fff;position:relative;transition:.16s}
.wcard:hover{border-color:#d6cbb2;transform:translateY(-1px);box-shadow:var(--shadow)}
.wcard .emoji{font-size:27px;line-height:1}
.wcard .en{font-size:19px;font-weight:700;letter-spacing:.2px;margin-top:7px;word-break:break-word}
.wcard .zh{font-size:13px;color:var(--muted);margin-top:1px}
.wcard .sent{font-size:12.5px;color:var(--ink2);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.wcard .sent .s-zh{color:var(--muted);font-size:12px}
.wcard .acts{display:flex;gap:6px;margin-top:10px}
.icon-btn{width:44px;height:44px;border-radius:11px;background:#f5f1e8;display:grid;place-items:center;font-size:16px;transition:.14s}
.icon-btn:hover{background:#ece5d6}
.lvl{position:absolute;top:13px;right:13px;font-size:10.5px;color:var(--muted);background:#f6f2e9;border-radius:6px;padding:1px 6px}
.box3{border-color:#c9e2d6;background:#fbfefc}

/* ---- read-aloud ---- */
.ra-box{background:#fbfaf6;border:1px solid var(--line);border-radius:16px;padding:22px 20px;text-align:center}
.ra-en{font-size:27px;font-weight:700;line-height:1.35;letter-spacing:.2px}
.ra-en.small{font-size:21px}
.ra-zh{color:var(--muted);font-size:13.5px;margin-top:6px}
.ra-tools{display:flex;gap:9px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.rec-status{font-size:12.5px;color:var(--muted);margin-top:12px;min-height:20px}
.score-badge{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--brand)}
.score-badge.low{color:var(--rose)}
.score-badge.mid{color:var(--amber)}
.stars{font-size:19px;letter-spacing:1px}

/* ---- spelling / cloze ---- */
.spell-wrap{max-width:560px;margin:0 auto}
.spell-emoji{font-size:42px;text-align:center;line-height:1}
.spell-hint{text-align:center;font-size:13.5px;color:var(--muted);margin-top:4px;letter-spacing:3px;font-family:ui-monospace,Consolas,monospace}
.answer-input{
  width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;font-size:19px;text-align:center;letter-spacing:1px;outline:none;margin-top:14px;
}
.answer-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,125,106,.12)}
.cloze-sent{font-size:20px;line-height:1.9;text-align:center;margin:8px 0 4px;font-weight:600}
.blank{border-bottom:2.5px solid var(--brand);padding:0 14px;color:var(--brand);min-width:70px;display:inline-block;text-align:center}
.blank.filled{border-bottom-color:var(--amber);color:var(--ink)}
.choices{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.choice{padding:10px 20px;border-radius:11px;border:1.5px solid var(--line);background:#fff;font-size:16px;font-weight:600;transition:.14s}
.choice:hover{border-color:#cfc3a8;background:#fdfbf6}
.choice.correct{border-color:var(--ok);background:#eef8f1;color:#2c6e46}
.choice.wrong{border-color:var(--rose);background:var(--rose-soft);color:#a04a3c}

/* ---- reading ---- */
.read-text{font-size:17px;line-height:2.05}
.rline{display:flex;gap:10px;align-items:flex-start;padding:5px 8px;border-radius:10px;cursor:pointer;transition:.13s}
.rline:hover{background:#faf7f0}
.rline .sp{font-size:14px;opacity:.55;flex:0 0 auto;padding-top:5px}
.rline .txt{flex:1}
.rline .top-zh{display:block;font-size:12.5px;color:var(--muted);margin-top:-2px}
.hide-zh .top-zh{display:none}
.q-block{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.q-item{margin-bottom:14px}
.q-en{font-size:15.5px;font-weight:600}
.q-zh{font-size:12.5px;color:var(--muted);margin-bottom:7px}

/* ---- listening ---- */
.listen-card{background:linear-gradient(135deg,#f7fafc,#f4f7f2);border:1px solid #e2eae4}
.wave{display:flex;align-items:flex-end;gap:3px;height:26px;justify-content:center}
.wave i{display:block;width:3.5px;background:#a9c9bd;border-radius:2px;height:6px;animation:none}
.wave i:nth-child(1){height:9px}.wave i:nth-child(2){height:15px}
.wave i:nth-child(3){height:20px}.wave i:nth-child(4){height:11px}
.wave i:nth-child(5){height:17px}.wave i:nth-child(6){height:8px}
.wave i:nth-child(7){height:13px}
.wave.on i{background:#7fb3a2;animation:w .9s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}
.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.4s}
.wave i:nth-child(6){animation-delay:.5s}.wave i:nth-child(7){animation-delay:.6s}
@keyframes w{0%,100%{height:6px}50%{height:24px}}
.script-line{padding:8px 10px;border-radius:9px;font-size:15.5px;display:flex;gap:9px;align-items:baseline}
.script-line:hover{background:#faf7f0}
.script-line .n{color:var(--muted);font-size:11.5px;width:16px;flex:0 0 auto}
.script-line .zh{color:var(--muted);font-size:12.5px;display:block}
.blind .script-line .en,.blind .script-line .zh{filter:blur(5px);transition:.2s}
.blind .script-line:hover .en,.blind .script-line:hover .zh{filter:none}

/* ---- quiz ---- */
.progress-line{height:7px;background:#efe9dc;border-radius:99px;overflow:hidden}
.progress-line>i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .3s}
.qcount{font-size:12.5px;color:var(--muted)}

/* ---- report ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:15px;padding:15px}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:24px;font-weight:700;line-height:1.25}
.stat .v small{font-size:12.5px;font-weight:500;color:var(--muted)}
.bars{display:flex;align-items:flex-end;gap:10px;height:110px;padding-top:8px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.bars .b i{width:100%;max-width:34px;background:#cfe3db;border-radius:6px 6px 3px 3px;min-height:3px}
.bars .b.today i{background:var(--brand)}
.bars .b span{font-size:10.5px;color:var(--muted)}
.weak-item{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.weak-item:last-child{border:0}
.note{background:#fbf7ee;border:1px solid #f0e4cd;border-radius:12px;padding:12px 14px;font-size:13.5px;color:#6d5a34;line-height:1.7}

/* ---- settings ---- */
.field{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #f2ede2}
.field:last-child{border:0}
.field label{font-size:14px}
.field .hint{font-size:12px;color:var(--muted);margin-top:2px}
.field select,.field input[type=text],.field input[type=number]{
  border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:#fff;min-width:180px;outline:none;font-size:14px;
}
.field select:focus,.field input:focus{border-color:var(--brand)}
.seg{display:flex;background:#f4efe5;border-radius:10px;padding:3px;gap:2px}
.seg button{padding:6px 13px;border-radius:8px;font-size:13px;color:var(--ink2)}
.seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.07)}

/* ---- toast & modal ---- */
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);background:#2b2a26;color:#fff;padding:11px 20px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:82vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-wrap{position:fixed;inset:0;background:rgba(40,36,30,.36);display:grid;place-items:center;z-index:100;padding:20px}
.modal-wrap.hidden{display:none}
.modal{background:#fff;border-radius:20px;padding:26px;max-width:620px;width:100%;max-height:82vh;overflow:auto;position:relative;box-shadow:0 24px 60px -20px rgba(0,0,0,.4)}
.modal h3{font-size:17px;margin-bottom:10px}
.modal p,.modal li{font-size:14px;color:var(--ink2);line-height:1.8}
.modal ol{padding-left:20px;margin:8px 0}
.modal .x{position:absolute;top:8px;right:8px;width:44px;height:44px;display:grid;place-items:center;border-radius:10px;color:var(--muted);font-size:16px}
.modal .x:hover{background:#f4efe5;color:var(--ink)}
.empty{color:var(--muted);font-size:13.5px;padding:22px 0;text-align:center}
.divider{height:1px;background:var(--line);margin:6px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--ink2);background:#fff}
.chip.on{background:var(--brand-soft);border-color:#cbe2da;color:#1f5d4f;font-weight:600}

/* ---- today input ---- */
.ta{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:14.5px;line-height:1.8;background:#fff;color:var(--ink);outline:none;
  resize:vertical;font-family:inherit;min-height:96px;
}
.ta:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,125,106,.1)}
.task-list{display:flex;flex-direction:column;gap:2px}
.task{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:10px;font-size:14px;cursor:pointer;transition:.14s}
.task:hover{background:#faf7f0}
.task input{margin-top:4px;accent-color:var(--brand);flex:0 0 auto}
.task.done{color:var(--muted);text-decoration:line-through}
.task.done .badge-cat{opacity:.6}
.task.off{opacity:.45}
.badge-cat{font-size:11px;padding:2px 8px;border-radius:999px;background:#f2eee4;color:var(--ink2);white-space:nowrap;flex:0 0 auto}


/* ---- 本周课表 ---- */
.wk-table{display:flex;flex-direction:column;gap:6px}
.wk-row{display:grid;grid-template-columns:74px 1fr;gap:10px;padding:8px 10px;border-radius:13px}
.wk-row.today{background:var(--brand-soft);border:1px solid #cfe4dd}
.wk-day{padding-top:4px}
.wk-day b{display:block;font-size:14px}
.wk-day span{display:block;font-size:11.5px;color:var(--muted)}
.wk-pr{font-style:normal;display:inline-block;margin-top:3px;font-size:11px;color:var(--brand);background:#fff;border-radius:6px;padding:0 5px}
.wk-cells{display:flex;flex-direction:column;gap:3px}
.wk-cell{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:10px;font-size:13.5px;cursor:pointer;transition:.13s}
.wk-cell:hover{background:#faf7f0}
.wk-cell.done .wk-txt{color:var(--muted);text-decoration:line-through}
.wk-cell.off{color:var(--muted);background:#f6f2e9;cursor:default;font-size:12.5px}
.wk-cb{display:flex;align-items:center}
.wk-cb input{accent-color:var(--brand);width:15px;height:15px;cursor:pointer}
.wk-txt{flex:1;line-height:1.45}
.wk-min{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.wk-go{font-size:11px;padding:3px 9px;flex:0 0 auto}

/* ---- 自然拼读 ---- */
.ph-box{background:#fbfaf6;border:1px solid var(--line);border-radius:16px;padding:22px 20px;text-align:center;max-width:560px;margin:0 auto}
.ph-pats{margin-bottom:10px}
.ph-pats .chip{margin:0 3px;border-color:#cbe2da;color:#1f5d4f;background:var(--brand-soft)}
.ph-emoji{font-size:34px;line-height:1}
.ph-word{font-size:40px;font-weight:800;letter-spacing:1px;line-height:1.3;margin-top:4px;word-break:break-word}
.ph-hl{color:var(--brand);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;font-weight:800}
.ph-split{font-family:ui-monospace,Consolas,monospace;font-size:19px;letter-spacing:2px;color:var(--amber);margin-top:12px}
.ph-split.off{display:none}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.ph-card{border:1px solid var(--line);border-radius:13px;padding:12px 10px;text-align:center;cursor:pointer;transition:.14s}
.ph-card:hover{border-color:#d6cbb2;background:#fdfbf6;transform:translateY(-1px)}
.ph-card .pce{font-size:21px;line-height:1}
.ph-card .pcw{font-size:19px;font-weight:700;margin-top:4px}
.ph-card .pcz{font-size:12px;color:var(--muted)}
.ph-card .pcsp{font-size:10.5px;color:var(--amber);margin-top:3px;font-family:ui-monospace,Consolas,monospace;letter-spacing:1px}

/* ---- 逻辑图复述 ---- */
.retell{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.retell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.retell-box{background:#fbf7ee;border:1px solid #f0e4cd;border-radius:12px;padding:10px 12px}
.retell-box .rb-k{font-size:11px;color:#8a5a10;font-weight:700}
.retell-box .rb-zh{font-size:13px;color:var(--ink2);line-height:1.6;margin:4px 0 8px}

@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;display:block;padding:10px}
  .brand{padding:0 8px 8px}
  .bname{display:none}
  #nav{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
  .nav-item{flex-direction:column;justify-content:center;gap:3px;padding:6px 2px;text-align:center;font-size:10.5px;min-height:44px}
  .nav-item span:last-child{display:block;line-height:1.15}
  .nav-item .ico{font-size:19px;width:auto}
  .rail-foot{display:none}
  .main{padding:16px 16px 50px}
  .grid2,.grid3{grid-template-columns:1fr}
  .ra-en{font-size:22px}
  .wk-row{grid-template-columns:1fr;gap:4px;padding:8px}
  .wk-day{display:flex;align-items:center;gap:8px;padding-top:0}
  .wk-day b{font-size:13px}
  .wk-day span,.wk-pr{margin-top:0}
  .retell-grid{grid-template-columns:1fr}
  .ph-word{font-size:32px}
}

@media(max-width:520px){
  .field{flex-direction:column;align-items:stretch;gap:8px}
  .field select,.field input[type=text],.field input[type=number]{width:100%;min-width:0;max-width:100%}
  #setVoice{max-width:100%}
  .seg{width:100%;flex-wrap:wrap}
  .seg button{flex:1 1 auto;min-height:44px}
  .chip{min-height:44px;display:inline-flex;align-items:center}
}