/* ══════════════════════════════════════════════════════════════════════
   Speaking Studio — app styles · brand emerald #10B981 (blueprint D1)
   Mobile-first; theme vars from /theme.css.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --sp:#10B981;
  --sp-dark:#059669;
  --sp-soft:rgba(16,185,129,.12);
  --sp-border:rgba(16,185,129,.35);
  --sp-grad:linear-gradient(135deg,#10B981,#0D7D6A);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Space Grotesk',system-ui,sans-serif}
main{min-height:100vh;padding-bottom:70px}
.wrap{max-width:860px;margin:0 auto;padding:18px 16px}

.screen{display:none}
.screen.on{display:block;animation:spIn .22s ease}
@keyframes spIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.page-title{font-size:1.7rem;font-weight:700;letter-spacing:-.5px;margin:8px 0 6px}
.page-title em{font-style:normal;color:var(--sp)}
.page-sub{color:var(--text2);font-size:.92rem;line-height:1.55;margin-bottom:18px}
.sec-title{font-weight:700;font-size:1.02rem;margin:26px 0 10px}
.dim-note{color:var(--dim);font-size:.85rem;line-height:1.5}

.gate-panel{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:34px 22px;text-align:center;margin-top:40px}
.gate-panel .gate-ic{font-size:2.4rem;margin-bottom:10px}
.gate-panel .gate-title{font-weight:700;font-size:1.15rem;margin-bottom:8px}
.gate-panel .gate-msg{color:var(--text2);font-size:.92rem;line-height:1.6;margin-bottom:16px}

.btn-em{background:var(--sp-grad);color:#fff;border:none;border-radius:var(--r2);padding:12px 20px;font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:opacity .2s,transform .15s}
.btn-em:hover{opacity:.92;transform:translateY(-1px)}
.btn-em:disabled{opacity:.45;cursor:default;transform:none}
.btn-teal{background:var(--grad);color:#fff;border:none;border-radius:var(--r2);padding:12px 20px;font-family:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.btn-ghost-sm{background:transparent;border:1px solid var(--border2);color:var(--text2);border-radius:999px;padding:7px 13px;font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.btn-ghost-sm:hover{color:var(--text);border-color:var(--sp-border)}
.btn-back{background:none;border:none;color:var(--dim);font-family:inherit;font-size:.86rem;font-weight:600;cursor:pointer;padding:6px 0;margin-bottom:8px}
.btn-back:hover{color:var(--text)}

/* ── Meter ── */
.sp-meter-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.sp-meter-label{display:flex;justify-content:space-between;font-size:.8rem;color:var(--dim);margin-bottom:8px;font-weight:600}
.sp-meter{background:var(--surf2);border-radius:8px;height:10px;overflow:hidden}
.sp-meter .fill{height:100%;background:var(--sp-grad);transition:width .35s ease;border-radius:8px}

/* ── Mode cards ── */
.sp-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.sp-mode-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:18px;display:flex;gap:14px;align-items:flex-start;cursor:pointer;transition:border-color .2s,transform .15s}
.sp-mode-card:hover{border-color:var(--sp-border);transform:translateY(-2px)}
.sp-mode-ic{font-size:1.7rem;line-height:1}
.sp-mode-title{font-weight:700;margin-bottom:5px}
.sp-mode-sub{color:var(--text2);font-size:.82rem;line-height:1.5}
.sp-pro-pill{background:linear-gradient(135deg,#F5C543,#E0902B);color:#3a2600;border-radius:999px;font-size:.62rem;font-weight:800;padding:2px 8px;vertical-align:2px}

.sp-resume{background:var(--sp-soft);border:1px solid var(--sp-border);border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.9rem;font-weight:600;margin-bottom:6px}
.sp-resume .btn-em{padding:8px 14px;font-size:.85rem}

/* ── Topic browser (collapsible sections + compact chip grid) ── */
.sp-topic-search{width:100%;background:var(--surf);border:1px solid var(--border);border-radius:var(--r2);color:inherit;font-family:inherit;font-size:.9rem;padding:10px 14px;margin-bottom:10px;outline:none}
.sp-topic-search:focus{border-color:var(--sp-border)}
.sp-topic-grid{display:flex;flex-direction:column;gap:10px}
.sp-level-head{font-size:.74rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--dim);margin-top:8px}
.sp-level-head .cnt,.sp-level-toggle .cnt{font-weight:600;color:var(--dim)}
.sp-level-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:var(--surf);border:1px solid var(--border);border-radius:var(--r2);color:inherit;font-family:inherit;font-weight:700;font-size:.92rem;padding:11px 14px;cursor:pointer;text-align:left;transition:border-color .2s}
.sp-level-toggle:hover,.sp-level-toggle.open{border-color:var(--sp-border)}
.sp-level-toggle .chev{color:var(--dim);font-size:.85rem}
.sp-fc-tabs{display:flex;gap:8px}
.sp-fc-tab{background:var(--surf);border:1px solid var(--border);color:var(--text2);border-radius:999px;padding:6px 14px;font-family:inherit;font-weight:700;font-size:.8rem;cursor:pointer;min-height:40px}
.sp-fc-tab.on{background:var(--sp-soft);border-color:var(--sp-border);color:var(--sp)}

/* ── Forecast: category filter chips + search + collapsible sections ── */
.sp-fc-search-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.sp-fc-search{flex:1;min-width:0;min-height:40px;background:var(--surf);border:1px solid var(--border);border-radius:var(--r2);color:inherit;font-family:inherit;font-size:.86rem;padding:9px 13px;outline:none}
.sp-fc-search:focus{border-color:var(--sp-border)}
.sp-fc-clear{flex:none;display:flex;width:40px;height:40px;background:var(--surf);border:1px solid var(--border2);border-radius:50%;color:var(--text2);font-family:inherit;font-size:.9rem;cursor:pointer;align-items:center;justify-content:center}
.sp-fc-clear:hover{color:var(--text);border-color:var(--sp-border)}
.sp-fc-hitcount{margin:8px 0 6px}
.sp-fc-clearlink{background:none;border:none;color:var(--sp);font-family:inherit;font-weight:700;font-size:.82rem;cursor:pointer;padding:0;text-decoration:underline}
.sp-fc-cats{display:flex;gap:7px;overflow-x:auto;padding:8px 10px 2px 0;scroll-padding-right:10px;margin-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.sp-fc-cats::-webkit-scrollbar{display:none}
.sp-fc-cat{flex:none;background:var(--surf);border:1px solid var(--border);color:var(--text2);border-radius:999px;padding:0 14px;min-height:40px;font-family:inherit;font-weight:600;font-size:.8rem;cursor:pointer;white-space:nowrap}
.sp-fc-cat.on{background:var(--sp-soft);border-color:var(--sp-border);color:var(--sp);font-weight:700}
.sp-fc-sec{margin-bottom:8px}
.sp-fc-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:none;border:none;color:var(--text);font-family:inherit;font-weight:700;font-size:.86rem;padding:9px 2px;cursor:pointer;text-align:left;min-height:40px}
.sp-fc-sec-head .cnt{font-weight:600;color:var(--dim)}
.sp-fc-sec-head .chev{color:var(--dim);font-size:.85rem}
.sp-fc-sec.open .sp-fc-sec-head{color:var(--sp)}
.sp-topic-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
@media (max-width:520px){.sp-topic-cards{grid-template-columns:1fr}}
.sp-topic{background:var(--surf);border:1px solid var(--border);border-radius:var(--r2);padding:9px 11px;cursor:pointer;transition:border-color .2s,transform .12s;display:flex;align-items:center;gap:9px;min-width:0}
.sp-topic:hover{border-color:var(--sp-border);transform:translateY(-2px)}
.sp-topic .ic{font-size:1.2rem;flex:none}
/* Pixel-art topic icon (PNG) — sized to sit where the emoji would; crisp scaling. */
.ic-img{object-fit:contain;image-rendering:pixelated;flex:none}
.sp-topic .ic-img{width:1.5rem;height:1.5rem}
.sp-topic-head .ic-img{width:2.4rem;height:2.4rem}
.sp-topic .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.sp-topic .en{font-weight:700;font-size:.84rem;line-height:1.25}
.sp-topic .vi{color:var(--dim);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── History ── */
.sp-hist{display:flex;flex-direction:column;gap:8px}
.sp-hist-row{background:var(--surf);border:1px solid var(--border);border-radius:var(--r2);padding:11px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .2s}
.sp-hist-row:hover{border-color:var(--sp-border)}
.sp-hist-part{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--sp);background:var(--sp-soft);border-radius:6px;padding:3px 7px;white-space:nowrap}
.sp-hist-q{flex:1;font-size:.84rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-hist-band{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.9rem;color:var(--sp)}
.sp-hist-band.guide{color:var(--dim);font-size:.76rem}
.sp-hist-mark{font-size:.8rem;flex-shrink:0}
.sp-hist-crit-band{flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--sp);background:var(--sp-soft);border-radius:6px;padding:3px 7px;white-space:nowrap}

/* Home tabs: Luyện tập ↔ Lịch sử */
.sp-home-tabs{display:flex;gap:8px;margin:18px 0 4px}
.sp-home-tab{flex:1;background:var(--surf2);border:1px solid var(--border2);color:var(--text2);border-radius:999px;padding:10px 14px;font-family:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.sp-home-tab.on{background:var(--sp-soft);border-color:var(--sp-border);color:var(--sp)}

/* Tab Lịch sử — HUD */
.sp-hist-hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.sp-hh{background:var(--surf2);border:1px solid var(--border2);border-radius:var(--r2);padding:10px 8px;text-align:center}
.sp-hh b{display:block;font-family:'JetBrains Mono',monospace;font-size:1.15rem;color:var(--sp)}
.sp-hh span{display:block;color:var(--dim);font-size:.7rem;margin-top:2px;line-height:1.3}
.sp-hist-tabs{margin:10px 0}
.sp-hist-tabs .cnt{font-weight:400;opacity:.7;font-size:.78em}
@media (max-width:560px){.sp-hist-hud{grid-template-columns:repeat(2,1fr)}}

/* Tab Lịch sử — bộ lọc theo tiêu chí (F&C/Lexical/Grammar/Pron) + ngưỡng band */
.sp-hist-crit-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:8px 0}

/* Tiến độ: thanh mỗi topic + tick mỗi câu */
.sp-topic-prog{display:flex;align-items:center;gap:6px;margin-top:4px}
.sp-topic-prog .bar{flex:1;height:4px;background:var(--border2);border-radius:999px;overflow:hidden}
.sp-topic-prog .bar i{display:block;height:100%;background:var(--sp);border-radius:999px}
.sp-topic-prog .num{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--dim);flex-shrink:0}
.sp-topic.done .sp-topic-prog .num{color:var(--sp)}
.sp-topic-band{display:inline-flex;align-items:center;gap:3px;margin-top:3px;font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;color:var(--sp)}
.sp-topic-band.dim{color:var(--dim);font-weight:600;font-style:italic;font-family:inherit}
.sp-qdone{flex-shrink:0;font-size:.76rem;color:var(--sp);font-weight:700;margin-right:4px}
.sp-qdone b{font-family:'JetBrains Mono',monospace}
.sp-qrow.done .qtext{color:var(--text2)}
.sp-part-tab .cnt{font-family:'JetBrains Mono',monospace;font-size:.76em;font-weight:400;opacity:.75}
.sp-hist-date{color:var(--dim);font-size:.72rem;white-space:nowrap}

/* ── Part picker ── */
.sp-topic-head{display:flex;align-items:center;gap:12px;margin:4px 0 16px}
.sp-topic-head .ic{font-size:2rem}
.sp-topic-head .en{font-weight:700;font-size:1.25rem}
.sp-topic-head .vi{color:var(--dim);font-size:.84rem}
.sp-part-tabs{display:flex;gap:8px;margin-bottom:10px}
.sp-part-tab{flex:1;background:var(--surf);border:1px solid var(--border);color:var(--text2);border-radius:var(--r2);padding:10px;font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.sp-part-tab.on{background:var(--sp-soft);border-color:var(--sp-border);color:var(--sp)}
.sp-part-hint{color:var(--dim);font-size:.8rem;line-height:1.5;margin-bottom:12px}
.sp-qlist{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.sp-qrow{background:var(--surf);border:1px solid var(--border);border-radius:var(--r2);padding:12px 14px;display:flex;align-items:center;gap:10px}
.sp-qrow .qtext{flex:1;font-size:.88rem;line-height:1.45}
.sp-qrow .btn-ghost-sm{flex-shrink:0}
.sp-start-seq{width:100%}

/* ── Drill ── */
.sp-mock-bar{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--dim);background:var(--surf);border:1px solid var(--border);border-radius:999px;padding:7px 14px;margin-bottom:12px}
.sp-mock-bar b{color:var(--sp)}
.sp-qcard{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:14px}
.sp-qmeta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sp-part-chip{background:var(--sp-soft);border:1px solid var(--sp-border);color:var(--sp);border-radius:999px;font-size:.72rem;font-weight:800;padding:3px 10px}
.sp-qindex{color:var(--dim);font-size:.76rem;font-family:'JetBrains Mono',monospace}
.sp-qtext{font-size:1.12rem;font-weight:700;line-height:1.5}
.sp-cue{background:var(--surf2);border-radius:var(--r2);padding:12px 16px;margin-top:12px;font-size:.88rem;line-height:1.6}
.sp-cue .cue-head{color:var(--dim);font-size:.76rem;font-weight:700;margin-bottom:6px}
.sp-cue ul{margin:0;padding-left:20px}
.sp-cue .cue-close{margin-top:6px;font-style:italic;color:var(--text2)}
.sp-qtools{display:flex;gap:8px;margin-top:12px}
.sp-guide{background:var(--sp-soft);border:1px solid var(--sp-border);border-radius:var(--r2);padding:12px 14px;margin-top:10px;font-size:.84rem;line-height:1.55;color:var(--text2)}

/* P2 prep */
.sp-prep{background:var(--surf);border:1px solid var(--sp-border);border-radius:var(--r);padding:18px;margin-bottom:14px;text-align:center}
.sp-prep-head{font-weight:700;font-size:.95rem;margin-bottom:8px}
.sp-prep-timer{font-family:'JetBrains Mono',monospace;font-size:2.2rem;font-weight:700;color:var(--sp);margin-bottom:10px}
.sp-prep-picker{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.sp-prep-picker-lbl{font-size:.8rem;color:var(--dim)}
.sp-prep-opts{display:inline-flex;gap:6px;flex-wrap:wrap}
.sp-prep-opt{border:1px solid var(--sp-border);background:none;color:var(--text2);font-family:inherit;font-size:.82rem;font-weight:600;border-radius:999px;padding:5px 13px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.sp-prep-opt:hover{border-color:var(--sp);color:var(--text)}
.sp-prep-opt.on{border-color:var(--sp);color:var(--sp);background:rgba(32,185,185,.12)}
.sp-prep textarea{width:100%;min-height:110px;background:var(--surf2);border:1px solid var(--border);border-radius:var(--r2);color:var(--text);font-family:inherit;font-size:.9rem;padding:12px;resize:vertical;margin-bottom:12px}
.sp-prep textarea:focus{outline:none;border-color:var(--sp-border)}

/* Recorder */
.sp-rec{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:20px;text-align:center}
.sp-rec-status{color:var(--text2);font-size:.88rem;margin-bottom:14px;min-height:1.3em}
.sp-rec-main{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:8px}
.sp-rec-btn{width:84px;height:84px;border-radius:50%;border:none;background:var(--sp-grad);font-size:2rem;cursor:pointer;transition:transform .15s,box-shadow .2s;box-shadow:0 6px 24px rgba(16,185,129,.35)}
.sp-rec-btn:hover{transform:scale(1.04)}
.sp-rec-btn.recording{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 6px 28px rgba(239,68,68,.45);animation:spPulse 1.6s ease infinite}
.sp-rec-btn:disabled{opacity:.5;cursor:default;animation:none}
@keyframes spPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.sp-rec-side{text-align:left}
.sp-rec-timer{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:700}
.sp-rec-timer.warn{color:var(--yellow)}
.sp-rec-timer.over{color:var(--red)}
.sp-rec-wave{display:flex;gap:3px;align-items:flex-end;height:22px;margin-top:6px}
.sp-rec-wave i{width:5px;height:4px;background:var(--sp);border-radius:3px;transition:height .12s ease;opacity:.4}
.sp-rec-wave.live i{opacity:1}
.sp-live{min-height:44px;color:var(--dim);font-size:.86rem;line-height:1.5;text-align:left;background:var(--surf2);border-radius:var(--r2);padding:10px 13px;margin-top:12px;display:none}
.sp-live.on{display:block}
.sp-rec-foot{margin-top:12px}

/* [LOCAL-FIRST] Nghe lại rồi mới gửi (xem #recReview trong index.html) */
.sp-take-review{margin-top:14px;background:var(--surf2);border:1px solid var(--border);border-radius:var(--r2);padding:14px 13px}
.sp-take-review-hint{color:var(--dim);font-size:.84rem;line-height:1.5;margin-bottom:10px;text-align:left}
.sp-take-review audio{width:100%;display:block}
.sp-take-review-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}

/* [LIVE-STT] Nhãn "bản nghe nhanh" trên transcript sống của Web Speech API */
.sp-live-tag{font-size:.7rem;color:var(--dim);opacity:.85;margin-bottom:6px;line-height:1.4}

/* Scoring overlay */
.sp-scoring{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:34px 20px;text-align:center;margin-top:14px}
.sp-scoring-ic{font-size:2.2rem;margin-bottom:10px}
.sp-scoring-title{font-weight:700;font-size:1.05rem;margin-bottom:6px}
.sp-scoring-sub{color:var(--dim);font-size:.84rem;margin-bottom:16px}
.sp-scoring-bar{background:var(--surf2);border-radius:8px;height:8px;overflow:hidden;max-width:320px;margin:0 auto}
.sp-scoring-bar .fill{height:100%;width:30%;background:var(--sp-grad);border-radius:8px;animation:spScan 1.4s ease-in-out infinite}
@keyframes spScan{0%{margin-left:0;width:25%}50%{margin-left:60%;width:40%}100%{margin-left:0;width:25%}}

/* ── Report ── */
.sp-rep-head{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:14px}
.sp-rep-q{color:var(--dim);font-size:.8rem;margin-bottom:12px}
.sp-band-row{display:grid;grid-template-columns:repeat(4,1fr) 1.15fr;gap:8px}
.sp-band-cell{background:var(--surf2);border-radius:var(--r2);padding:10px 6px;text-align:center}
.sp-band-cell .lbl{font-size:.62rem;font-weight:800;letter-spacing:.5px;color:var(--dim);text-transform:uppercase;margin-bottom:4px}
.sp-band-cell .val{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.15rem}
.sp-band-cell.overall{background:var(--sp-soft);border:1px solid var(--sp-border)}
.sp-band-cell.overall .val{color:var(--sp);font-size:1.35rem}
.sp-rep-review{background:var(--sp-soft);border:1px solid var(--sp-border);border-radius:var(--r2);padding:13px 15px;font-size:.9rem;line-height:1.6;margin-top:12px}
.sp-rep-audio{width:100%;margin-top:12px}

.sp-rep-sec{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.sp-rep-sec-head{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none}
.sp-rep-sec-head .t{flex:1;font-weight:700;font-size:.95rem}
.sp-rep-sec-head .band{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--sp)}
.sp-rep-sec-head .chev{color:var(--dim);transition:transform .2s}
.sp-rep-sec.open .chev{transform:rotate(90deg)}
.sp-rep-sec-body{display:none;padding:0 16px 16px;font-size:.87rem;line-height:1.6}
.sp-rep-sec.open .sp-rep-sec-body{display:block}
.sp-sub-h{font-size:.74rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--dim);margin:12px 0 6px}
.sp-issue{background:var(--surf2);border-radius:var(--r2);padding:10px 12px;margin-bottom:8px}
.sp-issue .q{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--red)}
.sp-issue .fx{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--green)}
.sp-issue .note{color:var(--text2);font-size:.8rem;margin-top:4px}
.sp-chip-type{display:inline-block;background:var(--surf3);border-radius:6px;font-size:.64rem;font-weight:700;padding:2px 7px;color:var(--dim);margin-left:6px;vertical-align:1px}
.sp-tip{display:flex;gap:8px;color:var(--text2);font-size:.83rem;margin-bottom:6px}
.sp-upgrade{display:flex;align-items:center;gap:8px;background:var(--surf2);border-radius:var(--r2);padding:9px 12px;margin-bottom:8px;flex-wrap:wrap}
.sp-upgrade .from{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--text2);text-decoration:line-through}
.sp-upgrade .to{font-family:'JetBrains Mono',monospace;font-size:.84rem;color:var(--sp);font-weight:700}
.sp-upgrade .ex{flex-basis:100%;color:var(--dim);font-size:.76rem;font-style:italic}
.sp-upgrade .save{margin-left:auto}

/* transcript */
.sp-transcript{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;font-size:.95rem;line-height:2}
.sp-transcript .w{border-radius:4px;padding:0 1px;cursor:pointer}
.sp-transcript .w.pron{background:rgba(244,63,94,.16);border-bottom:2px solid #F43F5E}
.sp-transcript .w.smooth{background:rgba(16,185,129,.12)}
.sp-transcript .w.dis{opacity:.45;font-style:italic}
.sp-transcript .w.hot{background:var(--sp-soft);outline:1px solid var(--sp-border)}
/* B2: per-word accuracy tier (green/yellow) — layered under .pron (red, real
   issue words always win) and independent of the timing-based .smooth tint. */
.sp-transcript .w.wgood{border-bottom:2px solid rgba(16,185,129,.55)}
.sp-transcript .w.wmid{border-bottom:2px solid rgba(245,158,11,.5)}
.sp-transcript .w.pron.wgood,.sp-transcript .w.pron.wmid{border-bottom-color:#F43F5E}
.sp-transcript .pz{display:inline-block;background:var(--surf3);color:var(--yellow);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;padding:1px 8px;margin:0 2px;vertical-align:1px;white-space:nowrap}
/* R5 · pause-position scoring: boundary pause = green, mid-phrase = yellow (default) */
.sp-transcript .pz.ok{color:#10B981}

/* word popover */
.sp-word-pop{position:absolute;z-index:300;background:var(--surf3);border:1px solid var(--border2);border-radius:12px;padding:12px 14px;max-width:260px;box-shadow:0 12px 36px rgba(0,0,0,.45);animation:spIn .15s ease}
.sp-word-pop .pop-head{display:flex;align-items:center;gap:8px;font-size:.95rem}
.sp-word-pop .pop-x{margin-left:auto;background:none;border:none;color:var(--dim);cursor:pointer;font-size:.85rem;padding:2px}
.sp-word-pop .note{color:var(--text2);font-size:.78rem;line-height:1.5;margin:7px 0}
.sp-word-pop .pop-btns{display:flex;gap:6px;margin-top:8px}

/* audio-quality warning */
.sp-audio-warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);color:var(--text2);border-radius:var(--r2);padding:11px 14px;font-size:.82rem;line-height:1.55;margin-bottom:12px}

/* brainstorm scaffold (too_short guide) */
.sp-brainstorm{text-align:left;background:var(--surf2);border-radius:var(--r2);padding:14px 16px;margin:14px 0}
.sp-brainstorm ul{margin:0 0 10px;padding-left:20px;color:var(--text2);font-size:.86rem;line-height:1.8}
.sp-brainstorm textarea{width:100%;min-height:90px;background:var(--surf);border:1px solid var(--border);border-radius:var(--r2);color:var(--text);font-family:inherit;font-size:.88rem;padding:10px 12px;resize:vertical}
.sp-brainstorm textarea:focus{outline:none;border-color:var(--sp-border)}

/* QA6 B1 — Part-1 I-E (Information/Expansion) 2-step flow */
.sp-ie-flow{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.sp-ie-block{border-radius:var(--r2);padding:12px 14px}
.sp-ie-i{background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.35)}
.sp-ie-e{background:var(--sp-soft);border:1px solid var(--sp-border)}
.sp-ie-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-weight:800;font-size:.78rem;margin-right:7px;color:#fff;vertical-align:middle}
.sp-ie-i .sp-ie-badge{background:#3B82F6}
.sp-ie-e .sp-ie-badge{background:var(--sp)}
.sp-ie-title{font-weight:700;font-size:.86rem;vertical-align:middle}
.sp-ie-line{color:var(--text2);font-size:.82rem;margin-top:6px;line-height:1.5}
.sp-ie-arrow{text-align:center;color:var(--dim);font-size:1.05rem;line-height:1}
.sp-ie-prompts{margin:8px 0 0;padding-left:18px;color:var(--text2);font-size:.82rem;line-height:1.7}
.sp-ie-prompts b{color:var(--text)}
.sp-ie-ex{color:var(--sp);font-size:.78rem;margin:2px 0 4px;font-style:italic}

/* QA6 B2 — Part-2 technique accordion (progressive unlock) */
.sp-bs-acc-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.sp-bs-acc{background:var(--surf2);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.sp-bs-acc.locked{opacity:.62}
.sp-bs-acc-head{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;user-select:none;font-size:.85rem}
.sp-bs-acc.locked .sp-bs-acc-head{cursor:default}
.sp-bs-acc-head .t{flex:1;font-weight:700}
.sp-bs-acc-head .lvl{font-size:.68rem;color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
.sp-bs-acc-head .chev{color:var(--dim);transition:transform .2s}
.sp-bs-acc.open .sp-bs-acc-head .chev{transform:rotate(90deg)}
.sp-bs-acc-body{display:none;padding:0 14px 12px;font-size:.82rem;line-height:1.6;color:var(--text2)}
.sp-bs-acc.open .sp-bs-acc-body{display:block}
.sp-bs-steps{margin:6px 0;padding-left:18px}
.sp-bs-steps li{margin-bottom:5px}
.sp-bs-steps b{color:var(--text)}

/* QA7 Agent B — Part-3 I.D.E.A. Alternative-step counter-argument tip
   (amber accent, matches .sp-audio-warn's "pay attention" treatment) */
.sp-bs-tip-adv{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.35);border-radius:var(--r2);padding:8px 10px;margin-top:6px;color:var(--text2);font-size:.78rem;line-height:1.5}
.sp-bs-tip-adv b{color:#F59E0B}

/* QA6 B3 — pronunciation radar (item #8), ELSA-style triangle */
.sp-radar-block{margin:6px 0 12px}
.sp-radar-head{font-size:.8rem;color:var(--text2);line-height:1.5;margin-bottom:6px}
.sp-radar-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:4px 0 6px}
.sp-radar-cv{width:100%;max-width:240px;height:auto;display:block}
.sp-radar-legend{display:flex;flex-direction:column;gap:8px;width:100%;font-size:.78rem;color:var(--text2)}
.sp-radar-item{display:flex;align-items:flex-start;gap:8px}
.sp-radar-item .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:4px}
.sp-radar-txt{display:flex;flex-direction:column;gap:1px}
.sp-radar-item .lbl{font-weight:700;color:var(--text)}
.sp-radar-item .val{font-family:'JetBrains Mono',monospace;font-weight:700;margin-left:8px}
.sp-radar-item .desc{color:var(--dim);font-size:.74rem;line-height:1.4}
@media(min-width:560px){.sp-radar-wrap{flex-direction:row;align-items:center;justify-content:center;gap:18px}.sp-radar-legend{width:auto;max-width:300px}}

.sp-tr-legend{display:flex;gap:10px 14px;color:var(--dim);font-size:.72rem;margin-top:10px;flex-wrap:wrap;align-items:center}
.sp-tr-legend .k{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.sp-tr-legend .ku{display:inline-block;width:13px;height:9px;border-bottom:2px solid;margin-right:4px;vertical-align:1px}
.sp-tr-legend .lg-head{font-weight:700;color:var(--text2);flex-basis:100%;margin-bottom:-4px}

/* fluency panel */
.sp-flu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-bottom:8px}
.sp-flu-stat{background:var(--surf2);border-radius:var(--r2);padding:10px;text-align:center}
.sp-flu-stat .v{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.05rem}
.sp-flu-stat .l{color:var(--dim);font-size:.68rem;font-weight:700;margin-top:3px}
.sp-pausemap{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--surf2);margin:8px 0 4px}
.sp-pausemap .talk{background:var(--sp);opacity:.75}
.sp-pausemap .gap{background:var(--surf3)}
.sp-pausemap .gap.long{background:var(--yellow)}

/* actions */
.sp-rep-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.sp-rep-actions .btn-em,.sp-rep-actions .btn-teal{flex:1;min-width:150px;text-align:center}

/* guide card (report for guide status) */
.sp-guide-card{background:var(--surf);border:1px solid var(--yellow);border-radius:var(--r);padding:22px;text-align:center}
.sp-guide-card .ic{font-size:2rem;margin-bottom:8px}
.sp-guide-card .msg{font-size:.95rem;line-height:1.6;margin-bottom:12px}
.sp-guide-card ul{text-align:left;color:var(--text2);font-size:.86rem;line-height:1.7;margin:0 auto 14px;max-width:420px;padding-left:20px}

/* toast (house pattern) */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surf3);color:var(--text);border:1px solid var(--border2);border-radius:10px;padding:11px 18px;font-size:.86rem;font-weight:600;z-index:400;animation:spIn .2s ease;max-width:90vw}

/* ── UX pack (QA R3): mic check · daily · progress · sample · drill · dispute ── */
.sp-mic-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.sp-mic-head{font-weight:700;font-size:1.05rem;margin-bottom:6px}
.sp-mic-sub{color:var(--text2);font-size:.86rem;line-height:1.55;margin-bottom:12px}
.sp-mic-target{background:var(--surf2);border:1px dashed var(--sp-border);border-radius:var(--r2);padding:14px 16px;font-size:1.02rem;font-weight:600;line-height:1.5}
.sp-mic-step{font-size:.78rem;font-weight:800;letter-spacing:.3px;color:var(--sp);text-transform:uppercase;margin-bottom:6px}
.sp-mic-verdict .fw-warn{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);border-radius:var(--r2);padding:10px 12px;margin-top:8px}
.sp-mic-verdict{border-radius:var(--r2);padding:14px 16px;margin-top:12px;font-size:.88rem;line-height:1.6}
.sp-mic-verdict.good{background:rgba(16,185,129,.12);border:1px solid var(--sp-border)}
.sp-mic-verdict.mid{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35)}
.sp-mic-verdict.bad{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35)}

.sp-daily{background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(13,125,106,.08));border:1px solid var(--sp-border);border-radius:var(--r);padding:16px 18px;margin-bottom:14px}
.sp-daily .d-head{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--sp);margin-bottom:8px}
.sp-daily .d-q{font-size:1.02rem;font-weight:700;line-height:1.5;margin-bottom:12px}
.sp-streak{background:rgba(245,158,11,.15);color:var(--yellow);border-radius:999px;font-size:.72rem;font-weight:800;padding:3px 10px;margin-left:auto}

/* B4 · Daily Vocab Booster */
.sp-boost{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.sp-boost-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sp-boost-item{background:var(--surf2);border:1px solid var(--border2);border-radius:var(--r2);padding:8px 10px;display:flex;align-items:center;gap:10px}
.sp-boost-item .ph{font-weight:700;flex:1}
.sp-boost-item .note{color:var(--text2);font-size:.82rem}

.sp-prog{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin:14px 0}
.sp-prog canvas{width:100%;height:120px;display:block}
.sp-prog-summary{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:.78rem;color:var(--text2)}
.sp-prog-summary b{font-family:'JetBrains Mono',monospace}
.sp-up{color:var(--green)} .sp-down{color:var(--red)} .sp-flat{color:var(--dim)}

.sp-delta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:.78rem}
.sp-delta{background:var(--surf2);border-radius:999px;padding:4px 11px;font-family:'JetBrains Mono',monospace;font-weight:700}

.sp-sample{background:var(--surf2);border-radius:var(--r2);padding:14px 16px;margin-top:10px;font-size:.92rem;line-height:1.8}
.sp-sample .disc{color:var(--dim);font-size:.72rem;margin-top:8px}
mark.sp-hl{background:rgba(16,185,129,.22);color:inherit;border-radius:4px;padding:0 2px;border-bottom:2px solid var(--sp);cursor:help}
mark.sp-hl.tap{cursor:pointer;border-bottom-style:dashed}
mark.sp-hl.tap:hover{background:rgba(16,185,129,.34)}
mark.sp-hl.saving{opacity:.55}
mark.sp-hl.saved{cursor:default;border-bottom-style:solid;background:rgba(16,185,129,.34)}
mark.sp-hl.saved::after{content:' 💾';font-size:.72em}

/* ── Sample-from-ideas combo picker (Style × Band) ── */
.sp-si-wrap{background:var(--surf2);border-radius:var(--r2);padding:14px 16px;margin-top:10px}
.sp-si-label{font-size:.74rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
.sp-si-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sp-si-chip{background:transparent;border:1px solid var(--border2);color:var(--text2);border-radius:999px;padding:8px 14px;min-height:40px;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s;display:inline-flex;align-items:center;gap:5px}
.sp-si-chip:hover{color:var(--text);border-color:var(--sp-border)}
.sp-si-chip.on{background:var(--sp-soft);border-color:var(--sp-border);color:var(--sp);font-weight:700}
.sp-si-chip .ck{color:var(--sp);font-weight:800}
.sp-si-gen{width:100%;min-height:40px}
.sp-si-note{color:var(--dim);font-size:.8rem;line-height:1.5;margin-top:8px}
.sp-si-quota{color:var(--yellow);font-size:.82rem;line-height:1.5;margin-top:8px}
.sp-si-result{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border2)}
.sp-si-ideas{background:var(--sp-soft);border:1px solid var(--sp-border);border-radius:var(--r2);padding:10px 13px;margin-bottom:10px;font-size:.86rem;line-height:1.6}
.sp-si-idea{margin-bottom:6px}
.sp-si-idea .said{color:var(--dim);font-size:.78rem;font-style:italic;display:block;margin-top:2px}
.sp-si-text{font-size:.92rem;line-height:1.8}
.sp-si-phrases{margin-top:10px}
.sp-si-phrase{background:var(--sp-soft);border:1px solid var(--sp-border);border-radius:var(--r2);padding:10px 13px;margin-bottom:8px}
.sp-si-phrase-en{font-weight:700;font-size:.9rem}
.sp-si-phrase-vi{color:var(--text2);font-size:.85rem;margin-top:2px}
.sp-si-phrase .btn-ghost-sm{margin-top:8px}
.sp-si-upgrades{margin-top:10px}

.sp-drill-box{background:var(--surf2);border-radius:var(--r2);padding:12px;margin-top:8px}
.sp-drill-box input{width:100%;background:var(--surf);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:.88rem;padding:9px 11px;margin:8px 0}
.sp-drill-box input:focus{outline:none;border-color:var(--sp-border)}
.sp-drill-ok{color:var(--green);font-weight:700}
.sp-drill-no{color:var(--yellow);font-size:.82rem;line-height:1.5}

.sp-dispute-link{display:block;text-align:center;color:var(--dim);font-size:.76rem;margin:18px 0 6px;cursor:pointer;background:none;border:none;font-family:inherit;width:100%}
.sp-dispute-link:hover{color:var(--text2)}

/* ── Audio retention pin ("⭐ Giữ bản ghi này") ──────────────────── */
.sp-keep-audio{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;margin:16px 0 2px}
.sp-keep-btn{border:1px solid var(--border);background:none;color:var(--text2);font-family:inherit;font-size:.82rem;font-weight:600;border-radius:999px;padding:7px 16px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.sp-keep-btn:hover{border-color:var(--accent,#20B9B9);color:var(--text)}
.sp-keep-btn.on{border-color:var(--accent,#20B9B9);color:var(--accent,#20B9B9);background:rgba(32,185,185,.10)}
.sp-keep-btn:disabled{opacity:.6;cursor:default}
.sp-keep-note{font-size:.72rem;line-height:1.45;max-width:340px}
.sp-dispute-modal{position:fixed;inset:0;background:var(--overlay-bg);z-index:350;display:flex;align-items:center;justify-content:center;padding:20px}
.sp-dispute-modal .box{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:20px;max-width:420px;width:100%}
.sp-dispute-modal label{display:flex;gap:8px;align-items:center;font-size:.88rem;padding:7px 0;cursor:pointer}
.sp-dispute-modal textarea{width:100%;min-height:70px;background:var(--surf2);border:1px solid var(--border);border-radius:var(--r2);color:var(--text);font-family:inherit;font-size:.86rem;padding:10px;margin-top:8px;resize:vertical}

/* ── QA6 · Question-centric two-pane drill ── */
.sp-crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--dim);font-size:.78rem;margin:0 0 12px}
.sp-crumb .c{cursor:pointer;color:var(--text2)}
.sp-crumb .c:hover{color:var(--sp)}
.sp-crumb .sep{opacity:.5}
.sp-crumb b{color:var(--text)}

.sp-attempts{margin-top:14px}
.sp-att-head{font-weight:700;font-size:.92rem;margin:4px 0 10px}
.sp-att-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.sp-att-card:hover{border-color:var(--sp-border)}
.sp-att-top{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.sp-att-band{width:46px;height:46px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:.98rem}
.sp-att-band.teal{background:rgba(20,184,166,.15);border:2px solid #14B8A6;color:#14B8A6}
.sp-att-band.amber{background:rgba(245,158,11,.13);border:2px solid #F59E0B;color:#F59E0B}
.sp-att-mid{flex:1;min-width:0}
.sp-att-tx{color:var(--text2);font-size:.82rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-att-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.sp-att-chip{background:var(--surf2);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;padding:3px 9px;color:var(--text2);white-space:nowrap}
.sp-att-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.sp-att-date{color:var(--dim);font-size:.68rem;white-space:nowrap}
.sp-att-side .chev{color:var(--dim);font-size:.72rem;transition:transform .2s}
.sp-att-card.open .sp-att-side .chev{transform:rotate(90deg)}
.sp-att-rep{padding:0 14px}
.sp-att-card.open .sp-att-rep{padding:0 14px 14px;border-top:1px solid var(--border)}

.sp-drill-sticky{position:sticky;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;margin-top:14px;box-shadow:0 -6px 24px rgba(0,0,0,.25)}
.sp-drill-sticky .btn-em{flex:1}
.sp-quota-chip{background:var(--sp-soft);border:1px solid var(--sp-border);color:var(--sp);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;padding:5px 12px;white-space:nowrap}

/* toolbox */
.sp-tools{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);margin-top:14px;overflow:hidden}
.sp-tools-head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;color:var(--text);font-family:inherit;font-weight:700;font-size:.95rem;padding:14px 16px;cursor:pointer}
.sp-tools-head .chev{color:var(--dim);transition:transform .2s}
.sp-tools.open .sp-tools-head .chev{transform:rotate(180deg)}
.sp-tools-body{display:none;padding:0 16px 16px}
.sp-tools.open .sp-tools-body{display:block}
.sp-tool-tabs{display:flex;gap:8px;margin-bottom:12px}
.sp-tool-tab{flex:1;background:var(--surf2);border:1px solid var(--border);color:var(--text2);border-radius:var(--r2);padding:8px 6px;font-family:inherit;font-weight:700;font-size:.78rem;cursor:pointer}
.sp-tool-tab.on{background:var(--sp-soft);border-color:var(--sp-border);color:var(--sp)}
.sp-tool-hints{margin:0 0 10px;padding-left:18px;color:var(--text2);font-size:.82rem;line-height:1.7}

/* AI brainstorm guiding-questions panel (toolbox) */
.sp-brainqs{text-align:left;margin:8px 0 4px}
.sp-brainq{background:var(--surf2);border:1px solid var(--sp-border);border-radius:var(--r2);padding:9px 12px;margin-bottom:7px}
.sp-brainq-main{font-size:.86rem;color:var(--text);line-height:1.5}
.sp-brainq-vi{font-size:.82rem;color:var(--text2);line-height:1.5;margin-top:4px;padding-left:4px;border-left:2px solid var(--sp-border)}
.sp-brainq-vi-btn{background:none;border:1px solid var(--border2);color:var(--dim);border-radius:999px;font-family:inherit;font-size:.68rem;font-weight:600;padding:1px 8px;cursor:pointer;vertical-align:1px;margin-left:4px}
.sp-brainq-vi-btn:hover{color:var(--text);border-color:var(--sp-border)}
.sp-brainq-en{font-size:.82rem;color:var(--sp);margin-top:4px;font-style:italic}
.sp-tools textarea{width:100%;min-height:80px;background:var(--surf2);border:1px solid var(--border);border-radius:var(--r2);color:var(--text);font-family:inherit;font-size:.86rem;padding:10px 12px;resize:vertical;margin-bottom:8px}
.sp-tools textarea:focus{outline:none;border-color:var(--sp-border)}
.sp-tool-pron{display:flex;gap:8px}
.sp-tool-pron input{flex:1;background:var(--surf2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:.84rem;padding:8px 11px;min-width:0}
.sp-tool-pron input:focus{outline:none;border-color:var(--sp-border)}
.sp-vault-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sp-vault-chip-wrap{display:inline-flex;align-items:stretch;border:1px solid var(--sp-border);border-radius:999px;overflow:hidden;background:var(--sp-soft)}
.sp-vault-chip{background:transparent;border:0;color:var(--sp);font-size:.78rem;font-weight:700;padding:6px 8px 6px 12px;cursor:pointer;font-family:inherit}
.sp-vault-chip-wrap:hover{background:rgba(16,185,129,.22)}
.sp-vault-say{background:transparent;border:0;border-left:1px solid var(--sp-border);padding:6px 9px;cursor:pointer;font-size:.82rem;line-height:1}
.sp-vault-say:hover{background:rgba(16,185,129,.3)}
.btn-ghost-sm.saved{opacity:.7;cursor:default;background:rgba(16,185,129,.18);border-color:var(--sp-border);color:var(--sp)}

/* two-pane layout on desktop */
@media(min-width:960px){
  #sDrill .wrap.sp-drill-wrap{max-width:1200px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
  .sp-tools{margin-top:44px;position:sticky;top:14px}
  .sp-tools .sp-tools-head{cursor:default}
  .sp-tools .sp-tools-head .chev{display:none}
  .sp-tools .sp-tools-body{display:block}
}

@media(max-width:640px){
  .sp-modes{grid-template-columns:1fr}
  .sp-band-row{grid-template-columns:repeat(2,1fr);gap:6px}
  .sp-band-cell.overall{grid-column:1/-1}
  .sp-rec-btn{width:72px;height:72px}
  .page-title{font-size:1.45rem}
}

/* ── QA5 · Re-say (báo máy nghe sai) ─────────────────────────────── */
.sp-resay-link{display:block;margin-top:10px;background:none;border:none;color:var(--dim);font-size:.76rem;cursor:pointer;font-family:inherit;padding:0;text-decoration:underline dotted}
.sp-resay-link:hover{color:var(--text2)}
.sp-transcript.selecting .w{cursor:crosshair;outline:1px dashed var(--border2);outline-offset:1px}
.sp-transcript .w.resay-sel{background:rgba(245,158,11,.28);border-bottom:2px solid var(--yellow)}
.sp-resay-badge{display:inline-block;background:rgba(16,185,129,.12);border:1px solid var(--sp-border);border-radius:999px;color:var(--sp);font-size:.72rem;font-weight:700;padding:3px 10px;margin-top:8px}
.sp-resay-panel{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin:-4px 0 12px;font-size:.88rem}
.sp-resay-panel input{width:100%;margin-top:6px;background:var(--surf3);border:1px solid var(--border2);border-radius:var(--r2);color:var(--text);padding:9px 12px;font-family:inherit;font-size:.9rem}
.sp-resay-pron{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);border-radius:var(--r2);padding:10px 12px;margin-top:10px;line-height:1.6}
/* Multi-span re-say list */
.sp-resay-item{background:var(--surf2);border:1px solid var(--border);border-radius:var(--r2);padding:10px 12px;margin-top:10px}
.sp-resay-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.sp-resay-item-head .q{font-size:.86rem;color:var(--text2);font-style:italic;min-width:0;overflow-wrap:anywhere}
.sp-resay-item-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.sp-resay-item-actions .btn-em{padding:8px 14px;font-size:.84rem}
.sp-resay-chip{font-size:.72rem;font-weight:600;color:var(--dim);background:var(--surf3);border-radius:999px;padding:3px 9px}
.sp-resay-chip.ok{color:var(--sp);background:var(--sp-soft)}
.sp-resay-chip.bad{color:#F59E0B;background:rgba(245,158,11,.12)}
.sp-resay-chip.rec{color:#F43F5E;background:rgba(244,63,94,.12)}
.sp-resay-assert-hint{margin-top:6px;font-size:.76rem;line-height:1.5}
.sp-resay-assert.locked{opacity:.5}
.sp-resay-scores{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sp-resay-score{background:var(--surf3);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.72rem;padding:2px 9px}
.sp-resay-score.ok{color:var(--sp)}
.sp-resay-score.low{color:#F87171}

/* ── READBACK · "Sửa transcript & đọc lại" ───────────────────────── */
.sp-readback-link{display:block;margin-top:6px;background:none;border:none;color:var(--dim);font-size:.76rem;cursor:pointer;font-family:inherit;padding:0;text-decoration:underline dotted}
.sp-readback-link:hover{color:var(--text2)}
.sp-readback-panel{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin:-4px 0 12px;font-size:.88rem}
.sp-readback-panel textarea{width:100%;margin-top:6px;background:var(--surf3);border:1px solid var(--border2);border-radius:var(--r2);color:var(--text);padding:9px 12px;font-family:inherit;font-size:.9rem;resize:vertical}
.rb-verdict{line-height:2.1;margin-top:6px}
.rb-w{padding:1px 2px;border-radius:3px}
.rb-w.rb-ok{color:#10B981}
.rb-w.rb-bad{color:#F43F5E;text-decoration:underline;text-decoration-style:solid}
.rb-w.rb-warn{color:#D97706;text-decoration:underline;text-decoration-style:dotted}
.rb-w.rb-omit{color:var(--dim);text-decoration:line-through}
.rb-w.rb-ins{color:#F59E0B;font-style:italic}
.rb-legend{margin-top:8px;line-height:1.8}

/* ── [HW] Speaking Homework Suite ─────────────────────────────────── */
.shw-badge-count{display:inline-block;background:var(--red,#ef4444);color:#fff;border-radius:999px;font-size:.66rem;font-weight:800;padding:1px 7px;margin-left:6px;vertical-align:2px}
.shw-banner{background:linear-gradient(135deg,rgba(239,68,68,.16),rgba(239,68,68,.06));border:1px solid rgba(239,68,68,.4);border-radius:var(--r);padding:13px 16px;margin-bottom:12px;font-weight:700;font-size:.9rem;cursor:pointer;transition:border-color .2s}
.shw-banner:hover{border-color:rgba(239,68,68,.7)}
.shw-card{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,transform .12s}
.shw-card:hover{border-color:var(--sp-border);transform:translateY(-1px)}
.shw-card.shw-dim{opacity:.6}
.shw-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.shw-badge{font-size:.72rem;font-weight:700;color:var(--dim)}
.shw-chip{border-radius:999px;font-size:.68rem;font-weight:800;padding:3px 10px;white-space:nowrap}
.shw-chip-todo{background:var(--surf2);color:var(--dim)}
.shw-chip-doing{background:rgba(245,158,11,.14);color:var(--yellow)}
.shw-chip-done{background:var(--sp-soft);color:var(--sp)}
.shw-chip-graded{background:rgba(16,185,129,.2);color:var(--sp)}
.shw-title{font-weight:700;font-size:1rem;margin-bottom:4px}
.shw-meta{color:var(--text2);font-size:.8rem}
.shw-overdue{color:var(--red,#ef4444);font-weight:700}
.shw-detail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 8px}
.shw-qrow{align-items:flex-start}
.shw-qmeta{color:var(--dim);font-size:.76rem;margin-top:6px}
.shw-comment{background:var(--sp-soft);border:1px solid var(--sp-border);border-radius:var(--r2);padding:8px 10px;margin-top:6px;font-size:.8rem;line-height:1.5;color:var(--text2)}

/* ── QA5 · Mock final · góc nhìn giám khảo ───────────────────────── */
.sp-exam-adj{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.sp-exam-adj .sp-exam-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--border);font-size:.88rem}
.sp-exam-adj .sp-exam-row:last-of-type{border-bottom:none}
.sp-exam-adj .sp-exam-row .lbl{color:var(--dim);font-weight:700}
.sp-exam-adj .note{color:var(--text2);font-size:.8rem;line-height:1.55;margin-top:8px}