/* =========================================================================
   IELTS 8.0 — design system
   Sober, modern, mobile-first. Light + dark via [data-theme].
   ========================================================================= */
:root {
  --teal-900:#0b4f49; --teal-700:#0f766e; --teal-600:#13897e; --teal-100:#d6f0ec;
  --ink-900:#11201f; --ink-700:#2b3a39; --ink-500:#5b6b6a; --ink-400:#7c8a89;
  --line:#e3e9e8; --bg:#f7faf9; --card:#ffffff; --card-2:#f2f7f6;
  --amber:#b7791f; --amber-bg:#fdf6e7;
  --good:#15803d; --good-bg:#e7f6ec; --bad:#b91c1c; --bad-bg:#fbe9e9;
  --accent:var(--teal-700);
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,40,38,.06), 0 8px 24px rgba(16,40,38,.06);
  --shadow-sm:0 1px 2px rgba(16,40,38,.08);
  --maxw:880px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,serif;
}
[data-theme="dark"] {
  --teal-100:#173b37; --teal-700:#3bb3a3; --teal-600:#2f9e90; --teal-900:#bfeee6;
  --ink-900:#eef4f3; --ink-700:#cdd8d6; --ink-500:#9aa9a7; --ink-400:#7f8e8c;
  --line:#243433; --bg:#0c1413; --card:#121d1c; --card-2:#16201f;
  --amber:#e0b25a; --amber-bg:#2a2316;
  --good:#5bd08a; --good-bg:#14271c; --bad:#f08a8a; --bad-bg:#2a1717;
  --accent:var(--teal-600);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink-900);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { line-height:1.25; color:var(--ink-900); margin:0 0 .4em; font-weight:680; letter-spacing:-.01em; }
h1 { font-size:1.9rem; } h2 { font-size:1.35rem; } h3 { font-size:1.1rem; }
p { margin:0 0 1rem; }
a { color:var(--accent); }
small { color:var(--ink-500); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.5rem .9rem; border-radius:0 0 8px 0; z-index:50; }
.skip-link:focus { left:0; }

/* ---------- top bar ---------- */
.topbar { position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); }
.topbar-inner { max-width:var(--maxw); margin:0 auto; padding:.6rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; }
.brand-badge { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:linear-gradient(140deg,var(--teal-600),var(--teal-900)); color:#fff; font-weight:800; font-size:.95rem; letter-spacing:-.02em; box-shadow:var(--shadow-sm); }
.brand-text { display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong { font-size:1.02rem; letter-spacing:-.01em; }
.brand-text small { font-size:.72rem; color:var(--ink-500); }
.topbar-actions { display:flex; align-items:center; gap:.5rem; }
.pill { display:inline-flex; align-items:center; gap:.45rem; background:var(--card); border:1px solid var(--line); color:var(--ink-700); padding:.42rem .7rem; border-radius:999px; font-size:.85rem; font-weight:600; cursor:pointer; box-shadow:var(--shadow-sm); }
.pill:hover { border-color:var(--accent); color:var(--accent); }
.pill-icon { font-size:1rem; line-height:1; }
.badge { background:var(--accent); color:#fff; border-radius:999px; min-width:1.3rem; height:1.3rem; padding:0 .35rem; display:inline-grid; place-items:center; font-size:.72rem; font-weight:700; }
.icon-btn { width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--ink-700); cursor:pointer; font-size:1.1rem; box-shadow:var(--shadow-sm); }
.icon-btn:hover { color:var(--accent); border-color:var(--accent); }

/* ---------- layout ---------- */
.app { max-width:var(--maxw); margin:0 auto; padding:1.4rem 1rem 3rem; outline:none; }
.footer { max-width:var(--maxw); margin:0 auto; padding:1.5rem 1rem 3rem; color:var(--ink-400); font-size:.82rem; text-align:center; }

/* ---------- home ---------- */
.hero { background:linear-gradient(160deg, var(--teal-100), transparent 70%); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.3rem; margin-bottom:1.4rem; }
.hero h1 { margin-bottom:.3rem; }
.hero p { color:var(--ink-700); margin-bottom:.2rem; }
.hero .target { display:inline-flex; gap:.4rem; align-items:center; margin-top:.7rem; font-size:.85rem; font-weight:600; color:var(--teal-700); background:var(--card); border:1px solid var(--line); padding:.35rem .7rem; border-radius:999px; }

.overall { display:flex; align-items:center; gap:1rem; margin:1.1rem 0 1.4rem; padding:.9rem 1.1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.ring { --p:0; width:54px; height:54px; flex:0 0 auto; border-radius:50%; background:conic-gradient(var(--accent) calc(var(--p)*1%), var(--card-2) 0); display:grid; place-items:center; }
.ring::after { content:attr(data-label); width:40px; height:40px; background:var(--card); border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:700; color:var(--ink-700); }
.overall .meta { font-size:.9rem; color:var(--ink-500); }
.overall .meta strong { color:var(--ink-900); }

.section-label { text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; font-weight:700; color:var(--ink-400); margin:1.6rem .2rem .7rem; }

.modules { display:grid; gap:.9rem; grid-template-columns:1fr; }
@media (min-width:620px){ .modules { grid-template-columns:1fr 1fr; } }
.mod-card { display:flex; flex-direction:column; gap:.5rem; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.05rem; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease; color:inherit; font:inherit; }
.mod-card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow); }
.mod-card[disabled] { opacity:.55; cursor:not-allowed; }
.mod-top { display:flex; align-items:center; gap:.6rem; }
.mod-code { font-size:.72rem; font-weight:800; letter-spacing:.02em; color:#fff; background:var(--accent); border-radius:7px; padding:.18rem .45rem; }
.mod-code.soon { background:var(--ink-400); }
.mod-card h3 { margin:0; font-size:1.06rem; }
.mod-sub { color:var(--ink-500); font-size:.86rem; margin:0; }
.mod-foot { display:flex; align-items:center; justify-content:space-between; margin-top:.3rem; font-size:.78rem; color:var(--ink-400); }
.bar { height:7px; border-radius:999px; background:var(--card-2); overflow:hidden; flex:1; margin-right:.7rem; }
.bar > span { display:block; height:100%; background:var(--accent); width:0; transition:width .3s ease; }

/* ---------- module page ---------- */
.crumb { display:inline-flex; align-items:center; gap:.4rem; color:var(--ink-500); text-decoration:none; font-size:.85rem; margin-bottom:.8rem; }
.crumb:hover { color:var(--accent); }
.mod-head { margin-bottom:1.1rem; }
.mod-head .mod-code { font-size:.78rem; }
.mod-head h1 { margin:.5rem 0 .2rem; }
.mod-head .lead { color:var(--ink-700); font-size:1.02rem; }

.stepnav { position:sticky; top:60px; z-index:20; display:flex; gap:.4rem; overflow-x:auto; padding:.5rem 0; margin:0 -1rem 1rem; padding-left:1rem; padding-right:1rem; -webkit-overflow-scrolling:touch; background:linear-gradient(var(--bg),var(--bg)); border-bottom:1px solid var(--line); scrollbar-width:thin; }
.stepnav button { flex:0 0 auto; white-space:nowrap; border:1px solid var(--line); background:var(--card); color:var(--ink-500); border-radius:999px; padding:.35rem .75rem; font-size:.8rem; font-weight:600; cursor:pointer; }
.stepnav button.active, .stepnav button:hover { color:#fff; background:var(--accent); border-color:var(--accent); }

.step { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.2rem 1.3rem; margin-bottom:1.1rem; box-shadow:var(--shadow-sm); scroll-margin-top:120px; }
.step-h { display:flex; align-items:baseline; gap:.6rem; margin-bottom:.5rem; }
.step-n { flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--teal-100); color:var(--teal-700); font-size:.78rem; font-weight:800; display:grid; place-items:center; }
[data-theme="dark"] .step-n { color:var(--teal-900); }
.step-h h2 { margin:0; }
.step .hint { color:var(--ink-500); font-size:.9rem; margin:-.2rem 0 1rem; }

/* rich content */
.rich p { margin:0 0 .9rem; }
.rich ul { margin:0 0 1rem; padding-left:1.2rem; }
.rich li { margin:.25rem 0; }
.rich strong { font-weight:680; }
.rich code { background:var(--card-2); border:1px solid var(--line); border-radius:6px; padding:.05rem .35rem; font-size:.85em; }
.rich .note { background:var(--amber-bg); border:1px solid color-mix(in srgb,var(--amber) 35%, var(--line)); border-left:3px solid var(--amber); border-radius:var(--radius-sm); padding:.7rem .9rem; margin:0 0 1rem; font-size:.94rem; }
.rich .example { background:var(--card-2); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:.7rem .9rem; margin:0 0 1rem; font-size:.95rem; }
.rich .example b, .rich .note b { color:var(--accent); }
.tbl-wrap { overflow-x:auto; margin:0 0 1rem; }
table.data { width:100%; border-collapse:collapse; font-size:.92rem; }
table.data th, table.data td { text-align:left; padding:.5rem .65rem; border-bottom:1px solid var(--line); vertical-align:top; }
table.data th { color:var(--ink-500); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; }
table.data tr:last-child td { border-bottom:0; }

.lesson { padding:.2rem 0 .4rem; border-top:1px dashed var(--line); margin-top:1rem; }
.lesson:first-child { border-top:0; margin-top:0; }
.lesson h3 { color:var(--accent); font-size:1rem; margin-bottom:.4rem; }

/* lists of items (warmup, practice, strategy) */
.qlist { counter-reset:q; list-style:none; padding:0; margin:0; }
.qlist > li { counter-increment:q; position:relative; padding:.55rem 0 .55rem 2.1rem; border-top:1px solid var(--line); }
.qlist > li:first-child { border-top:0; }
.qlist > li::before { content:counter(q); position:absolute; left:0; top:.5rem; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--card-2); color:var(--ink-500); font-size:.78rem; font-weight:700; display:grid; place-items:center; }

.cards-grid { display:grid; gap:.7rem; grid-template-columns:1fr; }
@media (min-width:560px){ .cards-grid { grid-template-columns:1fr 1fr; } }
.scard { background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.8rem .9rem; }
.scard h4 { margin:0 0 .25rem; color:var(--accent); font-size:.95rem; }
.scard p { margin:0; font-size:.92rem; color:var(--ink-700); }

.reveal { margin-top:.6rem; }
.reveal summary { cursor:pointer; color:var(--accent); font-weight:600; font-size:.9rem; list-style:none; display:inline-flex; align-items:center; gap:.4rem; }
.reveal summary::-webkit-details-marker { display:none; }
.reveal summary::before { content:"►"; font-size:.7rem; }
.reveal[open] summary::before { content:"▼"; }
.reveal[open] summary { margin-bottom:.5rem; }
.reveal .body { font-size:.94rem; color:var(--ink-700); border-left:3px solid var(--accent); padding-left:.8rem; }

.glossary dl { margin:0; }
.glossary dt { font-weight:680; color:var(--ink-900); margin-top:.7rem; }
.glossary dt:first-child { margin-top:0; }
.glossary dd { margin:.1rem 0 0; color:var(--ink-700); font-size:.95rem; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.chip { background:var(--card-2); border:1px solid var(--line); border-radius:999px; padding:.25rem .6rem; font-size:.82rem; color:var(--ink-700); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:11px; padding:.6rem 1rem; font:inherit; font-weight:650; font-size:.92rem; cursor:pointer; box-shadow:var(--shadow-sm); }
.btn:hover { filter:brightness(1.05); }
.btn.ghost { background:var(--card); color:var(--accent); }
.btn.ghost:hover { background:var(--card-2); }
.btn.subtle { background:var(--card-2); color:var(--ink-700); border-color:var(--line); }
.btn.subtle:hover { color:var(--accent); border-color:var(--accent); }
.btn.sm { padding:.42rem .7rem; font-size:.84rem; border-radius:9px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; filter:none; }
.btn-row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

/* ---------- audio player ---------- */
.player { border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(160deg,var(--teal-100),transparent 75%); padding:1rem; }
.player .row { display:flex; align-items:center; gap:.8rem; }
.player .big { width:52px; height:52px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:1.3rem; cursor:pointer; flex:0 0 auto; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.player .big:disabled { background:var(--ink-400); cursor:not-allowed; }
.player .progress { flex:1; }
.player .scrub { width:100%; accent-color:var(--accent); cursor:pointer; }
.player .times { display:flex; justify-content:space-between; font-size:.75rem; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.player .ctrls { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; align-items:center; }
.modeseg { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--card); }
.modeseg button { border:none; background:transparent; color:var(--ink-500); padding:.35rem .8rem; font-size:.82rem; font-weight:600; cursor:pointer; }
.modeseg button.on { background:var(--accent); color:#fff; }
.seg-now { font-size:.82rem; color:var(--ink-600); margin-top:.6rem; min-height:1.2em; }
.audio-pending { background:var(--amber-bg); border:1px solid color-mix(in srgb,var(--amber) 35%, var(--line)); border-radius:var(--radius-sm); padding:.85rem 1rem; font-size:.9rem; color:var(--ink-700); margin-top:.9rem; }
.audio-pending code { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:.05rem .35rem; }
.transcript { margin-top:1rem; border-top:1px solid var(--line); padding-top:.9rem; }
.turn { margin:0 0 .7rem; }
.turn .who { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-bottom:.1rem; }
.turn.is-now { background:var(--card-2); border-radius:8px; padding:.4rem .6rem; margin-left:-.6rem; }

/* ---------- flashcards ---------- */
.fc-wrap { text-align:center; }
.fc-stage { perspective:1200px; margin:0 auto 1rem; max-width:460px; }
.flashcard { position:relative; width:100%; min-height:200px; cursor:pointer; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.flashcard.flipped { transform:rotateY(180deg); }
.fc-face { position:absolute; inset:0; backface-visibility:hidden; display:grid; place-items:center; padding:1.4rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow); }
.fc-face .label { position:absolute; top:.7rem; left:.9rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--ink-400); }
.fc-front .content { font-size:1.18rem; font-weight:620; }
.fc-back { transform:rotateY(180deg); background:var(--card-2); }
.fc-back .content { font-size:1.06rem; color:var(--ink-800); }
.fc-tip { color:var(--ink-400); font-size:.8rem; margin-bottom:.8rem; }
.fc-grade { display:flex; gap:.6rem; justify-content:center; }
.fc-grade .btn { min-width:120px; }
.btn.good { background:var(--good); border-color:var(--good); }
.btn.bad { background:var(--bad); border-color:var(--bad); }
.fc-meta { display:flex; justify-content:space-between; align-items:center; max-width:460px; margin:0 auto 1rem; font-size:.82rem; color:var(--ink-500); }
.boxdots { display:flex; gap:.25rem; }
.boxdots i { width:9px; height:9px; border-radius:50%; background:var(--card-2); border:1px solid var(--line); }
.boxdots i.on { background:var(--accent); border-color:var(--accent); }
.fc-empty { text-align:center; color:var(--ink-500); padding:1.4rem; }
.fc-empty .big { font-size:2rem; }

/* ---------- test ---------- */
.test-intro { background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.8rem 1rem; font-size:.92rem; margin-bottom:1rem; }
.test-intro .limit { font-weight:700; color:var(--accent); }
.q { padding:1rem 0; border-top:1px solid var(--line); }
.q:first-of-type { border-top:0; }
.q .qnum { font-weight:700; color:var(--ink-400); margin-right:.4rem; }
.q .stem { font-weight:560; }
.gap { display:inline-flex; align-items:center; gap:.25rem; margin:0 .15rem; }
.gap .pre, .gap .suf { color:var(--ink-500); }
.gap input { font:inherit; font-size:.95rem; padding:.3rem .5rem; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink-900); width:9rem; max-width:46vw; }
.gap input:focus { outline:2px solid var(--teal-100); border-color:var(--accent); }
.opts { list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.45rem; }
.opt { display:flex; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:10px; padding:.5rem .7rem; cursor:pointer; background:var(--card); }
.opt:hover { border-color:var(--accent); }
.opt input { accent-color:var(--accent); }
.q.correct .stem, .q.correct .qnum { }
.q.graded.correct { background:var(--good-bg); border-radius:10px; padding-left:.7rem; padding-right:.7rem; }
.q.graded.wrong { background:var(--bad-bg); border-radius:10px; padding-left:.7rem; padding-right:.7rem; }
.verdict { margin-top:.5rem; font-size:.88rem; }
.verdict .tag { font-weight:700; }
.verdict.ok .tag { color:var(--good); }
.verdict.no .tag { color:var(--bad); }
.verdict .exp { color:var(--ink-700); display:block; margin-top:.2rem; }
.opt.right { border-color:var(--good); background:var(--good-bg); }
.opt.chosen-wrong { border-color:var(--bad); background:var(--bad-bg); }
.gap input.right { border-color:var(--good); background:var(--good-bg); }
.gap input.wrong { border-color:var(--bad); background:var(--bad-bg); }

.scorebox { margin-top:1.2rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--card-2); text-align:center; }
.scorebox.show { animation:pop .3s ease; }
@keyframes pop { from { transform:scale(.97); opacity:0; } to { transform:scale(1); opacity:1; } }
.scorebox .big { font-size:2.2rem; font-weight:800; color:var(--accent); }
.scorebox .band { font-size:.9rem; color:var(--ink-700); margin-top:.3rem; }

/* reading passage */
.passage-wrap { border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:1rem; background:var(--card-2); }
.passage-toggle { cursor:pointer; padding:.7rem .9rem; font-weight:650; color:var(--accent); list-style:none; }
.passage-toggle::-webkit-details-marker { display:none; }
.passage-toggle::before { content:"▼ "; font-size:.7rem; }
.passage-wrap:not([open]) .passage-toggle::before { content:"► "; }
.passage { padding:0 1rem 1rem; font-family:var(--serif); font-size:1.05rem; line-height:1.75; color:var(--ink-900); }
.passage .para { margin:0 0 1rem; }
.passage .pref { display:inline-block; min-width:1.4rem; font-family:var(--font); font-weight:800; color:var(--accent); }
select.matchsel { font:inherit; font-size:.92rem; padding:.3rem .5rem; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink-900); max-width:90vw; margin-top:.4rem; }
select.matchsel:focus { outline:2px solid var(--teal-100); border-color:var(--accent); }
select.matchsel.right { border-color:var(--good); background:var(--good-bg); }
select.matchsel.wrong { border-color:var(--bad); background:var(--bad-bg); }

/* charts (Writing Task 1 visuals) */
.charts { display:grid; gap:1rem; grid-template-columns:1fr; margin:0 0 1rem; }
@media (min-width:640px){ .charts { grid-template-columns:1fr 1fr; } }
.chart { margin:0; background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.7rem .7rem .4rem; }
.chart figcaption { font-size:.82rem; color:var(--ink-500); text-align:center; margin-top:.2rem; font-weight:600; }
.ielts-chart { width:100%; height:auto; display:block; }
.ielts-chart .cx-grid { stroke:var(--line); stroke-width:1; }
.ielts-chart .cx-axis { stroke:var(--ink-400); stroke-width:1.2; }
.ielts-chart .cx-line { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linejoin:round; }
.ielts-chart .cx-dot { fill:var(--accent); }
.ielts-chart .cx-ylab, .ielts-chart .cx-xlab { fill:var(--ink-500); font-size:11px; font-family:var(--font); }
.ielts-chart .cx-val { fill:var(--ink-700); font-size:10px; font-weight:700; font-family:var(--font); }
.ielts-chart .cx-leg { fill:var(--ink-700); font-size:11.5px; font-weight:600; font-family:var(--font); }

/* writing task */
.writing-tools { display:flex; align-items:center; gap:.7rem; margin:.4rem 0 .5rem; }
.timer { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-500); }
.timer.done { color:var(--bad); }
.writing-area { width:100%; font:inherit; font-size:1rem; line-height:1.6; padding:.8rem .9rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); color:var(--ink-900); resize:vertical; min-height:220px; }
.writing-area:focus { outline:2px solid var(--teal-100); border-color:var(--accent); }
.writing-bar { display:flex; justify-content:space-between; align-items:center; margin:.4rem 0 0; font-size:.84rem; }
.wordcount { font-weight:700; }
.wordcount.under { color:var(--bad); }
.wordcount.okmin { color:var(--amber); }
.wordcount.good { color:var(--good); }
.saved-ind { color:var(--ink-400); font-size:.8rem; }
.rubric { display:grid; gap:.7rem; }
.rubric-crit { border:1px solid var(--line); border-radius:var(--radius-sm); padding:.7rem .9rem; background:var(--card-2); }
.rubric-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.rubric-head h4 { margin:0; color:var(--accent); font-size:.98rem; }
.rubric-score { font-size:.84rem; color:var(--ink-500); display:inline-flex; align-items:center; gap:.4rem; }
.rubric-score select { font:inherit; font-size:.85rem; padding:.2rem .4rem; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--ink-900); }
.rubric-crit ul { margin:.5rem 0 0; padding-left:1.1rem; }
.rubric-crit li { margin:.2rem 0; font-size:.92rem; color:var(--ink-700); }
.rubric-est { margin-top:.8rem; padding:.7rem .9rem; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-sm); background:var(--card-2); font-size:.95rem; }

/* speaking */
.speak-part { padding:.8rem 0; border-top:1px solid var(--line); }
.speak-part:first-child { border-top:0; padding-top:0; }
.speak-part-h { margin:0 0 .5rem; color:var(--accent); font-size:1rem; }
.cuecard { background:var(--card-2); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-sm); padding:.9rem 1rem; }
.cuecard-topic { font-weight:700; font-size:1.05rem; margin-bottom:.4rem; }
.cuecard-say { font-size:.85rem; color:var(--ink-500); }
.cuecard ul { margin:.3rem 0 0; padding-left:1.2rem; }
.cuecard li { margin:.15rem 0; }
.cue-timer { display:flex; align-items:center; gap:.6rem; margin-top:.6rem; flex-wrap:wrap; }
.cue-phase { font-size:.85rem; color:var(--ink-500); }
.recorder { margin:1rem 0 .4rem; padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:linear-gradient(160deg,var(--teal-100),transparent 80%); }
.rec-status { font-size:.85rem; color:var(--ink-700); }
.recorder .timer { font-variant-numeric:tabular-nums; font-weight:700; color:var(--bad); }

@media (max-width:480px){
  body { font-size:16px; }
  h1 { font-size:1.55rem; }
  .step { padding:1rem .95rem 1.1rem; }
  .brand-text small { display:none; }
}
@media (prefers-reduced-motion:reduce){
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .flashcard { transition:none; }
}

/* ---------- sticky module bar (replaces the scrolling step tabs) ---------- */
.modbar { position:sticky; top:56px; z-index:25; display:flex; align-items:center; gap:.6rem; margin:0 -1rem 1rem; padding:.5rem 1rem; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line); }
.modbar-back { flex:0 0 auto; display:inline-flex; align-items:center; gap:.3rem; font-size:.82rem; font-weight:600; color:var(--ink-700); text-decoration:none; border:1px solid var(--line); background:var(--card); padding:.35rem .6rem; border-radius:999px; }
.modbar-back:hover { color:var(--accent); border-color:var(--accent); }
.modbar-id { flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:.4rem; overflow:hidden; }
.modbar-id b { flex:0 0 auto; font-size:.74rem; font-weight:800; color:#fff; background:var(--accent); border-radius:6px; padding:.12rem .4rem; }
.modbar-name { font-size:.88rem; font-weight:600; color:var(--ink-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.modbar-steps { flex:0 0 auto; max-width:44%; font:inherit; font-size:.82rem; font-weight:600; color:var(--ink-700); background:var(--card); border:1px solid var(--line); border-radius:9px; padding:.35rem .5rem; cursor:pointer; }
.modbar-steps:focus { outline:2px solid var(--teal-100); border-color:var(--accent); }
@media (max-width:480px){ .modbar-name { display:none; } .modbar-steps { max-width:58%; } }

.target-ico { display:block; flex:0 0 auto; }

/* ---------- back to top ---------- */
.to-top { position:fixed; right:16px; bottom:16px; z-index:40; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--accent); font-size:1.2rem; cursor:pointer; box-shadow:var(--shadow); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { border-color:var(--accent); filter:brightness(1.03); }

/* ---------- profile / stats ---------- */
.pf-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; margin-bottom:1rem; box-shadow:var(--shadow-sm); }
.pf-h { font-size:1.05rem; margin:0 0 .7rem; }
.pf-band { display:grid; grid-template-columns:5.6rem 1fr 2.4rem; align-items:center; gap:.6rem; margin:.35rem 0; }
.pf-band-lab { font-size:.85rem; color:var(--ink-700); }
.pf-band-bar { height:9px; border-radius:999px; background:var(--card-2); overflow:hidden; }
.pf-band-bar > span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.pf-band-bar > span.good { background:var(--good); }
.pf-band-bar > span.okmin { background:var(--amber); }
.pf-band-bar > span.under { background:var(--bad); }
.pf-band-bar > span.muted { background:var(--ink-400); }
.pf-band-val { font-weight:800; font-size:.9rem; text-align:right; font-variant-numeric:tabular-nums; }
.pf-note { font-size:.85rem; color:var(--ink-500); margin:.6rem 0 0; }
.pf-empty { font-size:.9rem; color:var(--ink-500); margin:0; }
.pf-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-bottom:.8rem; }
.pf-stat { text-align:center; background:var(--card-2); border:1px solid var(--line); border-radius:10px; padding:.5rem .2rem; }
.pf-stat b { display:block; font-size:1.2rem; color:var(--accent); }
.pf-stat span { font-size:.66rem; color:var(--ink-500); }
.pf-dist { display:grid; grid-template-columns:3.4rem 1fr 1.8rem; align-items:center; gap:.5rem; margin:.25rem 0; }
.pf-dist-lab { font-size:.78rem; color:var(--ink-500); }
.pf-dist-bar { height:8px; border-radius:999px; background:var(--card-2); overflow:hidden; }
.pf-dist-bar > span { display:block; height:100%; background:var(--teal-600); }
.pf-dist-n { font-size:.78rem; text-align:right; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.pf-err { list-style:none; padding:0; margin:0; }
.pf-err li { border-top:1px solid var(--line); padding:.5rem 0; font-size:.86rem; line-height:1.4; }
.pf-err li:first-child { border-top:0; padding-top:0; }
.pf-err-tag { font-size:.66rem; font-weight:800; color:#fff; background:var(--ink-400); border-radius:5px; padding:.05rem .35rem; margin-right:.3rem; }
.pf-err-bad { color:var(--bad); }
.pf-err-good { color:var(--good); font-weight:600; }
.pf-list { margin:.3rem 0 0; padding-left:1.1rem; font-size:.88rem; color:var(--ink-700); }
.pf-list li { margin:.25rem 0; }
.pf-list s { color:var(--bad); }
.pf-tips { list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.pf-tip { font-size:.9rem; padding:.55rem .7rem; border-radius:9px; border-left:3px solid var(--accent); background:var(--card-2); }
.pf-tip.warn { border-left-color:var(--amber); background:var(--amber-bg); }
.pf-tip.good { border-left-color:var(--good); background:var(--good-bg); }
.pf-tip.info { border-left-color:var(--accent); }