.phrase-card { grid-template-columns:30px minmax(0,1fr) 34px auto; gap:10px; }
.practice-mic { display:inline-grid; place-items:center; width:34px; height:34px; flex-shrink:0; border:1px solid #d8e2ef; border-radius:50%; background:#f5f8fc; color:#5a7696; cursor:pointer; vertical-align:middle; }
.practice-mic svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.practice-mic:hover { background:#e8f0fc; color:#245ca2; }
.practice-mic:focus-visible { outline:3px solid #8eb3ef; outline-offset:3px; }
.practice-mic.is-recording { color:#b6324b; border-color:#efb9c4; background:#fff0f3; }
.card-vocabulary .mini-word { display:flex; align-items:center; gap:6px; flex-wrap:wrap; max-width:100%; }
.card-vocabulary .mini-word .practice-mic { width:30px; height:30px; }
.speaking-panel { grid-column:2/-1; width:100%; padding:12px 14px; border:1px solid #dce5f0; border-radius:14px; background:#f8fafd; color:#536981; font-size:14px; line-height:1.6; }
.speaking-panel p { font-size:13px; margin:0 0 10px; }
.speaking-panel button { border:0; border-radius:10px; background:#215fa8; color:white; font:inherit; padding:8px 14px; cursor:pointer; }
.speaking-panel strong { font-size:17px; color:#234c76; }
.assessment-metrics { display:block; margin-top:3px; font-size:13px; }
.assessment-words { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.assessment-words span { padding:3px 8px; border-radius:7px; background:#eaf1f7; font-size:13px; }
.speaking-panel small { display:block; font-size:11px; color:#708198; }
.mini-word:has(.speaking-panel:not([hidden])) { width:100%; }
@media(max-width:520px) {
 .phrase-card { grid-template-columns:24px minmax(0,1fr) 30px auto; gap:6px; }
 .phrase-card .practice-mic, .phrase-card>.icon-play { width:30px; height:30px; }
 .speaking-panel { grid-column:1/-1; }
}
.assessment-word, .phrase-card p .assessment-word { font:inherit; padding:0; background:transparent; text-decoration:none; cursor:inherit; }
.assessment-word.word-good, .phrase-card p .assessment-word.word-good { color:#24715a; }
.assessment-word.word-retry, .phrase-card p .assessment-word.word-retry { color:#c43844; background:transparent; }
.assessment-word.word-unknown, .phrase-card p .assessment-word.word-unknown { color:inherit; }
.assessment-words .assessment-word { padding:0; background:transparent; }
.card-vocabulary .mini-word .word-audio { width:auto; }
.speaking-privacy { margin:16px 8px; color:#718197; font-size:12px; line-height:1.5; }

.practice-controls { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.practice-score { color:#234c76; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.practice-score[hidden] { display:none; }

.practice-mic[hidden], .speaking-panel[hidden] { display:none; }
.practice-mic.is-preparing { position:relative; }
.practice-mic.is-preparing svg { visibility:hidden; }
.practice-mic.is-preparing::after { content:""; position:absolute; width:14px; height:14px; border:2px solid #d1deee; border-top-color:#356caa; border-radius:50%; animation:practice-spin .8s linear infinite; }
.practice-replay { font-size:21px; line-height:1; }
@keyframes practice-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .practice-mic.is-preparing::after { animation:none; } }

/* Vocabulary rows keep identical action slots before, during and after capture. */
.card-vocabulary { display:block; }
.card-vocabulary h4 { margin-bottom:10px; }
.card-vocabulary .mini-word { display:grid; grid-template-columns:minmax(0,1fr) 30px 130px; gap:6px; width:100%; max-width:100%; margin:0 0 8px; padding:9px 12px; border-radius:12px; box-sizing:border-box; }
.card-vocabulary .mini-word .word-text { min-width:0; font-size:16px; line-height:1.5; color:#405d7c; overflow-wrap:anywhere; }
.card-vocabulary .mini-word .word-audio { width:30px; height:30px; padding:0; display:grid; place-items:center; font-size:12px; border-radius:50%; }
.card-vocabulary .practice-controls { display:grid; grid-template-columns:30px 30px 58px; align-items:center; gap:6px; width:130px; }
.card-vocabulary .practice-replay[hidden] { display:grid; visibility:hidden; pointer-events:none; }
.card-vocabulary .practice-score { width:58px; font-size:12px; text-align:right; white-space:nowrap; }
.card-vocabulary .practice-score[hidden] { display:block; visibility:hidden; }
.card-vocabulary .speaking-panel { grid-column:1/-1; }
.card-vocabulary .word-text .assessment-word.word-good { color:#24715a; }
.card-vocabulary .word-text .assessment-word.word-retry { color:#c43844; }
@media(max-width:520px) { .card-vocabulary .mini-word { padding:9px 8px; gap:4px; } }

/* Dialogue controls reserve space for replay and score in every state. */
.phrase-card .practice-controls { display:grid; grid-template-columns:34px 34px 62px; gap:6px; width:142px; }
.phrase-card .practice-replay[hidden] { display:grid; visibility:hidden; pointer-events:none; }
.phrase-card .practice-score { width:62px; text-align:right; }
.phrase-card .practice-score[hidden] { display:block; visibility:hidden; }
@media(max-width:650px) {
 .phrase-card { grid-template-columns:24px minmax(0,1fr) 34px 142px; gap:6px; }
 .phrase-card .speaker-icon { grid-column:1; grid-row:1; align-self:start; }
 .phrase-card p { grid-column:2/-1; grid-row:1; min-width:0; overflow-wrap:anywhere; }
 .phrase-card>.icon-play { grid-column:3; grid-row:2; }
 .phrase-card .practice-controls { grid-column:4; grid-row:2; }
 .phrase-card .practice-mic, .phrase-card>.icon-play { width:34px; height:34px; }
 .phrase-card .speaking-panel { grid-column:1/-1; grid-row:3; }
}
.card-vocabulary .word-text .assessment-word { font:inherit; line-height:inherit; }
.phrase-card .practice-controls>.practice-mic:first-child, .card-vocabulary .practice-controls>.practice-mic:first-child { grid-column:1; grid-row:1; }
.phrase-card .practice-controls>.practice-replay, .card-vocabulary .practice-controls>.practice-replay { grid-column:2; grid-row:1; }
.phrase-card .practice-controls>.practice-score, .card-vocabulary .practice-controls>.practice-score { grid-column:3; grid-row:1; }