*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh}
.page-header h1{font-family:var(--font-display);font-size:1.6rem;display:flex;align-items:center;gap:.5rem}
.page-header p{color:var(--text-muted);font-size:.88rem;margin-top:.3rem}
.tool-body{max-width:680px; }

/* ── Level pills + category select ── */
.filter-group{margin-bottom:1.25rem}
.filter-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:.4rem;display:flex;align-items:center;gap:.35rem}
#categorySelect{width:100%;background:var(--surface);border:1.5px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.5rem .65rem;font-size:.85rem;font-family:var(--font-body);cursor:pointer}

/* ── Dictée card ── */
.dictee-card{padding:1.75rem;margin-bottom:1.25rem;}
.review-banner{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-text);border-radius:var(--radius);padding:.65rem 1rem;font-size:.85rem;font-weight:600;margin-bottom:1rem;text-align:center}
.session-complete{background:var(--surface);border:1px solid var(--green);border-radius:var(--radius-lg);padding:2.5rem 1.75rem;margin-bottom:1.25rem;text-align:center}
.session-complete-icon{font-size:2.5rem;margin-bottom:.5rem}
.session-complete p{color:var(--text-muted);margin-bottom:1.25rem}
.dictee-counter{display:flex;align-items:center;gap:.35rem;width:fit-content;margin-left:auto;margin-bottom:1rem;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:.2rem .7rem;font-size:.75rem;color:var(--text-dim)}
.audio-row{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.5rem}
.replay-count{font-size:.72rem;color:var(--text-dim);text-align:center;margin-bottom:1rem;min-height:1em}

/* Accent toolbar (M82) — same character set drills.html's Vue app already
   uses (js/drill/data.js's accentChars), re-themed here since this is a
   plain-JS dark-page tool, not the Tailwind/light drill app. */
.accent-bar{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem}
.accent-btn{padding:.3rem .65rem;font-size:.88rem;font-weight:600;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;font-family:var(--font-body)}
.accent-btn:hover{background:var(--teal);color:var(--teal-ink);border-color:var(--teal)}
.accent-btn:active{transform:scale(0.92)}

.dictee-input{width:100%;padding:.9rem 1rem;font-size:1.05rem;font-family:var(--font-body);background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--text)}
.dictee-input:focus{outline:none;border-color:var(--teal)}
.dictee-input.locked{background:transparent;border-color:transparent;font-size:1.15rem}

.check-btn{width:100%;margin-top:1rem;padding:.85rem;border-radius:var(--radius);border:none;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.95rem;cursor:pointer}
.check-btn:disabled{opacity:.4;cursor:default}
.next-btn{width:100%;margin-top:.75rem;padding:.85rem;border-radius:var(--radius);border:1.5px solid var(--border);background:transparent;color:var(--text);font-weight:700;font-size:.95rem;cursor:pointer}

/* ── Result reveal ── */
.result-box{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border);display:none}
.result-box.show{display:block}
.result-score{font-family:var(--font-display);font-size:2.4rem;font-weight:800;text-align:center;margin-bottom:.75rem}
.result-score.great{color:var(--green)}
.result-score.ok{color:var(--accent-text)}
.result-score.low{color:var(--red)}
.result-diff{font-size:1.1rem;line-height:1.9;text-align:center;margin-bottom:.5rem}
.result-context{font-size:.85rem;color:var(--text-muted);text-align:center;font-style:italic;margin-bottom:.75rem}
.result-legend{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:var(--text-dim);margin-top:.5rem}
.result-legend span{display:inline-flex;align-items:center;gap:.3rem}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}

/* M637: tokens for shared.css DS:TYPE --play --pill. */
.play-btn{--play-bg:var(--teal);--play-ink:var(--teal-ink)}
.play-btn.slow{--play-bg:var(--surface-2);--play-ink:var(--text);--play-border:1.5px solid var(--border)}
@media (max-width:767px){.dictee-input{font-size:1.05rem !important}.dictee-input.locked{font-size:1.15rem !important}}

/* M640: the three play pills wrap on 320px phones instead of pushing the page sideways. */
.audio-row{flex-wrap:wrap;min-width:0}
.audio-row .ds-btn--pill{min-width:0}