/* 口试练习 (speaking/*.blade.php). Same minimal look as 考点分析: ink on
   white, soft macaron tints — aqua for the examiner, pink while recording,
   butter yellow for preparation time. */
.sp {
    --ink: #1f1d1a;
    --muted: #8a847c;
    --line: #ece8e2;
    --soft: #f7f5f2;
    --surface: #fff;
    --aqua-bg: #dcf3f1;  --aqua-ink: #2c7470;
    --pink-bg: #fde7ec;  --pink-ink: #b0485f;
    --butter-bg: #fff5cf; --butter-ink: #8a6b00;
    --lilac-bg: #ece8fb; --lilac-ink: #5b4fa3;
    --mint-bg: #e3f5e6;  --mint-ink: #2f7a45;

    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 0 96px;
    color: var(--ink);
}
.sp .material-symbols-outlined { --icon-size: 20px; font-size: 20px; }

/* Buttons */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s, transform 0.15s, opacity 0.15s; }
.sp-btn:hover { background: var(--soft); }
.sp-btn:active { transform: scale(0.98); }
.sp-btn:disabled { opacity: 0.5; cursor: default; }
.sp-btn-primary { border-color: var(--ink); background: var(--ink); color: #fff; }
.sp-btn-primary:hover { background: #3a3631; }
.sp-btn.is-busy { opacity: 0.6; pointer-events: none; }
.sp-icon-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; }
.sp-icon-btn:disabled { opacity: 0.35; cursor: default; }

/* Part tags */
.sp-mode-tag { display: inline-block; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 22px; white-space: nowrap; background: var(--aqua-bg); color: var(--aqua-ink); }
.sp-mode-tag[data-part="2"] { background: var(--lilac-bg); color: var(--lilac-ink); }
.sp-mode-tag[data-part="full"] { background: var(--butter-bg); color: var(--butter-ink); }
.sp-mode-tag[data-part="3"] { background: #ffe9e0; color: #a2462a; }
.sp-mode-tag[data-part="all"] { background: var(--butter-bg); color: var(--butter-ink); }
.sp-mode-tag[data-part="A"] { background: var(--mint-bg); color: var(--mint-ink); }
.sp-mode-tag[data-part="B"] { background: var(--pink-bg); color: var(--pink-ink); }
.sp-mode-tag.is-sm { font-size: 11px; line-height: 20px; padding: 0 8px; }

/* ---------- Home ---------- */
.sp-hero { padding: 12px 2px 4px; animation: sp-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-eyebrow { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.sp-hero h1 { margin: 6px 0 8px; font-size: 26px; line-height: 1.25; letter-spacing: -0.01em; }
.sp-hero p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sp-flash { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--butter-bg); color: var(--butter-ink); font-size: 14px; }

.sp-start { margin-top: 22px; }
.sp-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.sp-modes legend { margin-bottom: 10px; padding: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.sp-mode { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color 0.15s, background 0.15s; animation: sp-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-mode:nth-of-type(2) { animation-delay: 60ms; }
.sp-mode:nth-of-type(3) { animation-delay: 120ms; }
.sp-mode input { position: absolute; opacity: 0; pointer-events: none; }
.sp-mode:hover { background: var(--soft); }
.sp-mode:has(input:checked) { border-color: var(--ink); }
.sp-mode:has(input:focus-visible) { outline: 2px solid var(--aqua-ink); outline-offset: 2px; }
.sp-mode .sp-mode-tag { align-self: flex-start; }
.sp-mode strong { font-size: 16px; }
.sp-mode-desc { color: var(--muted); font-size: 13px; line-height: 1.55; }
.sp-mode-time { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 4px; color: var(--muted); font-size: 12.5px; }
.sp-mode-time .material-symbols-outlined { --icon-size: 16px; font-size: 16px; }
.sp-modes-bm { margin-top: 22px; }
.sp-mode.is-soon { cursor: default; color: #b3aea7; }
.sp-mode.is-soon:hover { background: var(--surface); }
.sp-mode.is-soon .sp-mode-tag { opacity: 0.55; }
.sp-mode.is-soon .sp-mode-desc { color: #b3aea7; }

.sp-topic { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.sp-topic[hidden] { display: none; }
.sp-topic label { color: var(--muted); font-size: 13px; font-weight: 600; }
.sp-topic select { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; }

.sp-checklist { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.sp-checklist li { display: inline-flex; align-items: center; gap: 6px; }
.sp-checklist .material-symbols-outlined { --icon-size: 17px; font-size: 17px; }
.sp-start-btn { width: 100%; margin-top: 20px; min-height: 50px; font-size: 16px; }

.sp-history { margin-top: 40px; }
.sp-history h2, .sp-section-title { margin: 0 0 10px; font-size: 16px; }
.sp-history-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.sp-history-row:hover { background: var(--soft); }
.sp-history-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sp-history-title { overflow: hidden; font-size: 14.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sp-history-date { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-history-score { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-history-score strong { color: var(--ink); font-size: 17px; }
.sp-history-state { color: var(--muted); font-size: 12.5px; }
.sp-empty { color: var(--muted); font-size: 14px; }

/* ---------- Runner ---------- */

.sp-stage { position: relative; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); animation: sp-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-status { display: flex; align-items: center; gap: 10px; margin: -4px 0 18px; }
.sp-progress { flex: 1; height: 4px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.sp-count { flex: none; min-width: 3.2em; color: var(--muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sp-progress i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: var(--ink); transition: width 0.5s ease; }

.sp-examiner { display: flex; align-items: center; gap: 12px; }
.sp-avatar { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--aqua-bg); color: var(--aqua-ink); }
.sp-avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--aqua-ink); opacity: 0; }
.sp-examiner[data-state="speaking"] .sp-avatar::after { animation: sp-pulse 1.4s ease-out infinite; }
.sp-examiner-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sp-examiner-name { font-size: 14.5px; font-weight: 600; }
.sp-part { color: var(--muted); font-size: 12.5px; }
.sp-caption { min-height: 3.2em; margin: 14px 0 0; font-size: 18px; font-weight: 500; line-height: 1.55; }

/* Back-up prompt button (next to replay): "didn't get it? / stuck?". */
.sp-help { display: inline-flex; flex: none; align-items: center; gap: 4px; max-width: 220px; height: 34px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; background: #ffe9e0; color: #7c3019; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; animation: sp-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; transition: background 0.15s; }
.sp-help[hidden] { display: none; }
.sp-help:hover { background: #ffdccd; }
.sp-help:disabled { opacity: 0.55; cursor: default; }
.sp-help .material-symbols-outlined { --icon-size: 17px; font-size: 17px; }
.sp-help-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- Part 3 ---------- */
/* The mind map: the question in the middle, the options as chips. */
.sp-mindmap h2 { margin-bottom: 10px; }
.sp-mindmap ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-mindmap li { padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); font-size: 14px; line-height: 1.4; }
.sp-mindmap li.is-point { margin-left: 0; padding-left: 13px; background: #ffe1d4; }
/* The partner: a classmate, so a different orb (and a pulse while it thinks). */
.sp-examiner[data-who="partner"] .sp-avatar { filter: hue-rotate(150deg) saturate(1.15); }
.sp-examiner[data-state="thinking"] .sp-avatar { animation: sp-think 1.1s ease-in-out infinite; }
@keyframes sp-think { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.94); opacity: 0.7; } }
/* What the partner heard the student say — small, so a mishearing is visible but quiet. */
.sp-heard { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-heard[hidden] { display: none; }

/* Report: the Part 3 discussion as a conversation. */
.sp-talk { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sp-talk-phase { align-self: center; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.sp-talk-line { max-width: 86%; margin: 0; padding: 9px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; }
.sp-talk-line > span { display: block; margin-bottom: 1px; font-size: 11.5px; font-weight: 700; opacity: 0.6; }
.sp-talk-line .sp-play { width: 28px; height: 28px; margin: 4px 0 0 6px; vertical-align: middle; }
.sp-talk-line .sp-play .material-symbols-outlined { --icon-size: 17px; font-size: 17px; }
.sp-talk-line.is-partner { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--lilac-bg); color: #2c2650; }
.sp-talk-line.is-me { align-self: flex-end; border: 1px solid var(--line); border-bottom-right-radius: 6px; background: var(--surface); }

/* The bullet the examiner is pointing at. */
.sp-card li { transition: background-color 0.25s; }
.sp-card li.is-point { margin-left: -6px; padding-left: 6px; border-radius: 8px; background: #ffe9e0; }
@media (max-width: 380px) {
    .sp-help { padding: 0 9px; }
    .sp-help-text { display: none; }
}

.sp-card { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: var(--lilac-bg); color: #2c2650; animation: sp-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-card-label { color: var(--lilac-ink); font-size: 12px; font-weight: 600; }
.sp-card h2 { margin: 4px 0 6px; font-size: 18px; }
.sp-card-say { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; }
.sp-card ul { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.7; }

/* BM bahan rangsangan: a printed page, not a tinted note — it's read aloud, so it must be easy on the eye. */
.sp-stimulus { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.sp-stimulus .sp-card-label { color: var(--mint-ink); }
.sp-stimulus h2 { text-transform: uppercase; letter-spacing: 0.02em; font-size: 16px; text-align: center; }
.sp-stimulus-img { display: block; width: 100%; max-width: 420px; max-height: 240px; margin: 6px auto 12px; border-radius: 12px; object-fit: cover; background: var(--soft); }
.sp-passage { margin: 0; font-size: 16px; line-height: 1.9; text-indent: 2em; }

/* While a card is up, the timer and stop button ride along the bottom so a long passage never hides them. */
.sp-stage.has-card .sp-answer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ring state actions" "ring hint actions";
    align-items: center;
    gap: 0 14px;
    margin: 16px -20px -20px;
    padding: 10px 20px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 22px 22px;
    background: rgba(255, 255, 255, 0.95);
}
.sp-stage.has-card .sp-ring { grid-area: ring; width: 68px; height: 68px; }
.sp-stage.has-card .sp-time { font-size: 16px; }
.sp-stage.has-card .sp-meter { height: 12px; }
.sp-stage.has-card .sp-meter i { height: 12px; width: 3px; }
.sp-stage.has-card .sp-state { grid-area: state; margin: 0; align-self: end; }
.sp-stage.has-card .sp-hint { grid-area: hint; align-self: start; }
.sp-stage.has-card .sp-actions { grid-area: actions; margin: 0; }
.sp-stage.has-card .sp-actions .sp-btn { min-height: 40px; padding: 0 16px; }

.sp-answer { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 22px; }
.sp-answer[hidden], .sp-stage[hidden] { display: none; }
.sp-ring { position: relative; width: 132px; height: 132px; }
.sp-answer:is([data-state="recording"], [data-state="prep"]) .sp-ring { cursor: pointer; }
.sp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sp-ring circle { fill: none; stroke-width: 7; }
.sp-ring-track { stroke: var(--soft); }
.sp-ring-bar { stroke: var(--aqua-ink); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.2s linear, stroke 0.2s; }
.sp-answer[data-state="prep"] .sp-ring-bar { stroke: #d9b42c; }
.sp-answer[data-state="recording"] .sp-ring-bar { stroke: var(--pink-ink); }
.sp-answer.is-over .sp-ring-bar { stroke: var(--mint-ink); }
.sp-answer[data-state="recording"] .sp-ring-track { stroke: var(--pink-bg); }
.sp-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.sp-time { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sp-meter { display: flex; align-items: center; gap: 3px; height: 18px; opacity: 0; transition: opacity 0.2s; }
.sp-answer[data-state="recording"] .sp-meter { opacity: 1; }
.sp-meter i { width: 4px; height: 18px; border-radius: 2px; background: var(--pink-ink); transform: scaleY(var(--h, 0.15)); transition: transform 0.08s; }
.sp-state { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
.sp-answer[data-state="recording"] .sp-state { color: var(--pink-ink); }
.sp-answer[data-state="prep"] .sp-state { color: var(--butter-ink); }
.sp-hint { min-height: 1.4em; margin: 0; color: var(--muted); font-size: 13px; }
.sp-actions { display: flex; gap: 10px; min-height: 44px; margin-top: 6px; }
.sp-actions [hidden] { display: none; }

.sp-gate { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border-radius: inherit; background: rgba(255, 255, 255, 0.94); text-align: center; }
.sp-gate[hidden] { display: none; }
.sp-gate h2 { margin: 0; font-size: 20px; }
.sp-gate p { max-width: 360px; margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }

.sp-error { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--pink-bg); color: var(--pink-ink); font-size: 14px; line-height: 1.55; text-align: center; }
.sp-error[hidden] { display: none; }
.sp-error p { margin: 0 0 10px; }
.sp-error p:last-child { margin: 0; }

.sp-scoring { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px; border: 1px solid var(--line); border-radius: 22px; text-align: center; color: var(--muted); font-size: 14.5px; }
.sp-scoring[hidden] { display: none; }
.sp-scoring p { margin: 0; }
.sp-spinner { width: 34px; height: 34px; border: 3px solid var(--soft); border-top-color: var(--ink); border-radius: 50%; animation: sp-spin 0.9s linear infinite; }
.sp-big-icon { --icon-size: 36px !important; font-size: 36px !important; color: var(--pink-ink); }

/* ---------- Report ---------- */
.sp-report { animation: sp-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-score { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; align-items: center; padding: 20px; border-radius: 22px; background: var(--aqua-bg); }
.sp-score[data-level="mid"] { background: var(--butter-bg); }
.sp-score[data-level="low"] { background: var(--pink-bg); }
.sp-score-main { display: flex; flex-direction: column; gap: 2px; }
.sp-score-label { color: rgba(31, 29, 26, 0.6); font-size: 12.5px; font-weight: 600; }
.sp-score-num { font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sp-score-num small { margin-left: 2px; font-size: 20px; font-weight: 600; color: rgba(31, 29, 26, 0.5); letter-spacing: 0; }
.sp-score-note { color: rgba(31, 29, 26, 0.6); font-size: 12px; line-height: 1.5; }
.sp-band { align-self: flex-start; margin: 4px 0 2px; padding: 1px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); font-size: 12.5px; font-weight: 700; }
.sp-criteria { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sp-criteria li { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; }
.sp-crit-name { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; line-height: 1.25; }
.sp-crit-name small { color: rgba(31, 29, 26, 0.55); font-size: 11.5px; font-weight: 500; }
.sp-crit-bar { display: flex; gap: 3px; }
.sp-crit-bar i { width: calc(108px / var(--n, 6)); height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.8); }
.sp-crit-bar i.on { background: var(--ink); }
.sp-crit-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.sp-crit-val small { color: rgba(31, 29, 26, 0.5); font-weight: 500; }

.sp-summary { margin: 18px 2px 0; font-size: 15px; line-height: 1.7; }
.sp-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.sp-list { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; }
.sp-list h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14px; }
.sp-list.is-good h3 { color: var(--mint-ink); }
.sp-list.is-next h3 { color: var(--lilac-ink); }
.sp-list h3 .material-symbols-outlined { --icon-size: 18px; font-size: 18px; }
.sp-list ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.65; }

.sp-section-title { margin-top: 30px; }
.sp-turns { margin: 0; padding: 0; list-style: none; }
.sp-turn { padding: 16px 0; border-top: 1px solid var(--line); animation: sp-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(80ms + var(--i, 0) * 40ms); }
.sp-turn-head { display: flex; align-items: flex-start; gap: 10px; }
.sp-turn-head .sp-mode-tag { margin-top: 2px; }
.sp-turn-q { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.sp-transcript { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--soft); border-radius: 0 12px 12px 0; font-size: 14.5px; line-height: 1.7; }
.sp-muted { color: var(--muted); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-chip { padding: 2px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-chip.is-warn { background: var(--pink-bg); color: var(--pink-ink); }
.sp-chip.is-good { background: var(--mint-bg); color: var(--mint-ink); }

/* Read-aloud check: the passage as written, marked against what was heard. */
.sp-read { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 14.5px; line-height: 2; }
.sp-read del, .sp-read-legend del { color: var(--pink-ink); text-decoration: line-through; text-decoration-color: rgba(176, 72, 95, 0.55); background: var(--pink-bg); border-radius: 4px; padding: 0 2px; }
.sp-read mark, .sp-read-legend mark { position: relative; padding: 0 2px; border-radius: 4px; background: var(--butter-bg); color: var(--butter-ink); }
.sp-read mark small, .sp-read-legend mark small { margin-left: 3px; font-size: 11px; color: rgba(138, 107, 0, 0.8); }
.sp-read mark small::before, .sp-read-legend mark small::before { content: "→ "; }
.sp-read-legend { display: flex; gap: 14px; margin: 6px 2px 0; color: var(--muted); font-size: 12px; }
.sp-comment { margin: 10px 0 0; font-size: 14px; line-height: 1.65; }
.sp-fixes { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.sp-fixes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; line-height: 1.5; }
.sp-fix-said { color: var(--pink-ink); text-decoration: line-through; text-decoration-color: rgba(176, 72, 95, 0.45); }
.sp-fix-arrow { --icon-size: 15px !important; font-size: 15px !important; color: var(--muted); align-self: center; }
.sp-fix-better { color: var(--mint-ink); font-weight: 600; }
.sp-fix-why { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.sp-model { margin-top: 10px; }
.sp-model summary { display: inline-flex; color: var(--lilac-ink); font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; }
.sp-model summary::-webkit-details-marker { display: none; }
.sp-model summary::after { content: "›"; margin-left: 6px; transition: transform 0.15s; }
.sp-model[open] summary::after { transform: rotate(90deg); }
/* 帮我改成高分版: their own answer, rewritten (SpeakingPracticeController::polish). */
.sp-polish { margin-top: 12px; }
.sp-polish-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--mint-bg); color: var(--mint-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sp-polish-btn .material-symbols-outlined { --icon-size: 18px; font-size: 18px; }
.sp-polish-btn.is-busy { opacity: 0.7; cursor: progress; }
.sp-polish-btn.is-busy .material-symbols-outlined { animation: sp-polish-spin 1.2s linear infinite; }
@keyframes sp-polish-spin { to { transform: rotate(360deg); } }
.sp-polish-hint { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.sp-polish-title { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--mint-ink); font-size: 13.5px; font-weight: 600; }
.sp-polish-title .material-symbols-outlined { --icon-size: 18px; font-size: 18px; }
.sp-polish-text { margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--mint-bg); color: #17401f; font-size: 14.5px; line-height: 1.7; }
.sp-polish-text mark { padding: 0 2px; border-radius: 4px; background: #bfe6c7; color: inherit; font-weight: 600; }
.sp-polish-sub { margin: 12px 0 0; font-size: 13px; font-weight: 600; }
.sp-polish-words { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.sp-polish-words li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; line-height: 1.5; }
.sp-polish-to { color: var(--mint-ink); font-weight: 600; }
.sp-model p { margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--lilac-bg); color: #2c2650; font-size: 14.5px; line-height: 1.7; }
.sp-disclaimer { margin: 24px 2px 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.sp-again { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@keyframes sp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sp-pulse { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes sp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sp *, .sp *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 720px) {
    .sp { padding: 4px 0 40px; }
    .sp-hero h1 { font-size: 22px; }
    .sp-modes { grid-template-columns: 1fr; }
    .sp-mode { padding: 14px; }
    .sp-stage { padding: 16px; border-radius: 18px; }
    .sp-stage.has-card .sp-answer { bottom: 0; margin: 14px -16px -16px; padding: 8px 14px; border-radius: 0 0 18px 18px; }
    .sp-passage { font-size: 15.5px; line-height: 1.85; }
    .sp-caption { font-size: 16.5px; }
    .sp-score { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
    .sp-score-num { font-size: 44px; }
    .sp-crit-bar i { width: calc(90px / var(--n, 6)); }
    .sp-lists { grid-template-columns: 1fr; }
    .sp-again { flex-direction: column-reverse; }
    .sp-again .sp-btn { width: 100%; }
}

/* ---------- Layout B pieces ----------
   Hidden here; speaking-b.css (loaded on every speaking page) switches them on. */
.sp-lang-seg, .sp-ring-icon, .sp-score-ring { display: none; }
.sp-turn-q { display: block; }
.sp-caption.is-in { animation: sp-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* The word the examiner is saying right now (speaking.js followWords): a
   peach pill drawn *behind* the word, so the text keeps its own colour. The
   caption is its own stacking context, so z-index -1 lands above the
   caption's background (B2 tints it) but under the letters; the pill is
   absolutely positioned, so it never moves the text. */
.sp-caption { position: relative; z-index: 0; }
.sp-w { position: relative; }
.sp-w::before {
    content: "";
    position: absolute;
    inset: -1px -3px;
    z-index: -1;
    border-radius: 6px;
    background: #ffe1d4;
    opacity: 0;
    transition: opacity 0.15s;
}
.sp-caption.is-speaking .sp-w.is-now::before { opacity: 1; }

/* Folded answer rows (layouts B and C render turns as <details>). */
.sp-turn-fold summary.sp-turn-head { align-items: center; padding: 14px 14px 14px 16px; cursor: pointer; list-style: none; }
.sp-turn-fold summary.sp-turn-head::-webkit-details-marker { display: none; }
.sp-turn-fold .sp-turn-q { overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.sp-turn-fold[open] .sp-turn-q { white-space: normal; }
.sp-turn-flag { flex: none; min-width: 26px; padding: 0 8px; border-radius: 999px; background: var(--butter-bg); color: var(--butter-ink); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.sp-turn-flag.is-good { background: var(--mint-bg); color: var(--mint-ink); }
.sp-turn-flag.is-warn { background: var(--pink-bg); color: var(--pink-ink); }
.sp-turn-chev { flex: none; color: var(--muted); transition: transform 0.25s; }
.sp-turn-fold[open] .sp-turn-chev { transform: rotate(180deg); }
.sp-turn-fold[open] > :not(summary) { animation: sp-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---------- BM Bahagian B: the group discussion ---------- */
/* Who is in the group; whoever has the floor lights up in their colour. */
.sp-group { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.sp-group-member { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12.5px; font-weight: 600; transition: background-color 0.2s, color 0.2s; }
.sp-group-member i { width: 8px; height: 8px; border-radius: 50%; opacity: 0.55; }
.sp-group-member[data-who="m1"] i { background: var(--pink-ink); }
.sp-group-member[data-who="m2"] i { background: var(--aqua-ink); }
.sp-group-member[data-who="m3"] i { background: var(--butter-ink); }
.sp-group-member[data-who="me"] i { background: var(--lilac-ink); }
.sp-group-member.is-on i { opacity: 1; animation: sp-dot 1s ease-in-out infinite; }
.sp-group-member.is-on[data-who="m1"] { background: var(--pink-bg); color: var(--pink-ink); }
.sp-group-member.is-on[data-who="m2"] { background: var(--aqua-bg); color: var(--aqua-ink); }
.sp-group-member.is-on[data-who="m3"] { background: var(--butter-bg); color: var(--butter-ink); }
.sp-group-member.is-on[data-who="me"] { background: var(--lilac-bg); color: var(--lilac-ink); }
@keyframes sp-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .sp-group-member.is-on i { animation: none; } }

/* Each member speaks from an orb of their own colour. */
.sp-examiner[data-who="m1"] .sp-avatar { filter: hue-rotate(110deg) saturate(1.1); }
.sp-examiner[data-who="m2"] .sp-avatar { filter: hue-rotate(200deg) saturate(1.1); }
.sp-examiner[data-who="m3"] .sp-avatar { filter: hue-rotate(290deg) saturate(1.15); }

/* The task: the situation, then the task in bold. */
.sp-task-b-situation { margin: 6px 0 10px; font-size: 15.5px; line-height: 1.65; }
.sp-task-b-task { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.55; }

/* Celah: cut in while a member is speaking. */
.sp-btn.sp-celah { border-color: transparent; background: var(--mint-bg); color: var(--mint-ink); animation: sp-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-btn.sp-celah:hover { background: #d3efd8; }
.sp-celah .material-symbols-outlined { --icon-size: 19px; font-size: 19px; }

/* Report: each member's bubbles in their colour; the student's cut-ins tagged. */
.sp-talk-line.is-partner[data-who="m1"] { background: var(--pink-bg); color: #5a2433; }
.sp-talk-line.is-partner[data-who="m2"] { background: var(--aqua-bg); color: #1f4d4a; }
.sp-talk-line.is-partner[data-who="m3"] { background: var(--butter-bg); color: #4d3d00; }
.sp-talk-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--mint-bg); color: var(--mint-ink); font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: 1px; }
.sp-talk-line.is-partner .sp-talk-tag { background: rgba(255, 255, 255, 0.7); color: inherit; }

/* ---------- Coming soon (everyone not on the allow-list; speaking/soon.blade.php) ---------- */
.sp-soon { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 420px; margin: 12vh auto 0; padding: 0 8px; text-align: center; animation: sp-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-soon-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: #fff1eb; color: #7c3019; --icon-size: 34px; font-size: 34px; }
.sp-soon-pill { padding: 3px 12px; border-radius: 999px; background: var(--butter-bg); color: var(--butter-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sp-soon h1 { margin: 2px 0 0; font-size: 24px; }
.sp-soon p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.sp-btn.sp-soon-btn { margin-top: 10px; border-color: transparent; background: #ffd4c4; color: #7c3019; }
.sp-btn.sp-soon-btn:hover { background: #ffc7b3; }

/* 为什么是这个分数: per aspect, why this mark and how to reach the next band. */
.sp-why { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sp-why li { padding: 14px 16px; border-radius: 16px; background: var(--soft); text-align: left; }
.sp-why-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: 14.5px; }
.sp-why-head span { color: var(--muted); font-size: 13px; font-weight: 600; }
.sp-why p { margin: 0; font-size: 14px; line-height: 1.65; }
.sp-why-next { display: flex; gap: 6px; margin-top: 8px !important; padding: 8px 10px; border-radius: 12px; background: var(--surface, #fff); }
.sp-why-next .material-symbols-outlined { flex: none; margin-top: 2px; --icon-size: 17px; font-size: 17px; color: var(--lilac-ink); }
.sp-why-next b { margin-right: 6px; color: var(--lilac-ink); }