/* TOEFL 2026 results: reuse the regular TOEFL visual language, not exam-taking UI. */
:root {
    color-scheme: dark;
    --review-bg: #0f1320;
    --review-bg-2: #101626;
    --review-surface: rgba(255,255,255,.06);
    --review-surface-strong: rgba(255,255,255,.10);
    --review-border: rgba(255,255,255,.18);
    --review-text: #eef3ff;
    --review-muted: #b8c2e6;
    --review-blue: #4b82ff;
    --review-green: #35d49f;
    --review-red: #ff6b7c;
    --review-yellow: #ffd166;
    --review-shadow: 0 14px 40px rgba(0,0,0,.35);
}
html[data-theme="light"] {
    color-scheme: light;
    --review-bg: #f7f8fd;
    --review-bg-2: #eef1fb;
    --review-surface: rgba(255,255,255,.7);
    --review-surface-strong: rgba(255,255,255,.9);
    --review-border: rgba(23,32,58,.14);
    --review-text: #0f1428;
    --review-muted: #475070;
    --review-shadow: 0 18px 40px rgba(23,32,58,.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color: var(--review-text); background: radial-gradient(900px 850px at 10% -10%,rgba(52,73,140,.25),transparent 65%),linear-gradient(180deg,var(--review-bg),var(--review-bg-2)); overflow-x: hidden; }
.review-page { width: min(1200px,94%); margin: 24px auto 60px; position: relative; }
.review-selector, .review-results { background: var(--review-surface); border: 1px solid var(--review-border); border-radius: 18px; box-shadow: var(--review-shadow); backdrop-filter: blur(14px); padding: 20px; }
.review-selector h1 { font-size: clamp(22px,3vw,29px); margin: 0 0 6px; }
.review-selector p { color: var(--review-muted); margin: 0 0 18px; line-height: 1.6; }
.review-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 12px; align-items: center; }
.review-controls input, .review-controls select { width: 100%; height: 46px; color: var(--review-text); background: var(--review-surface-strong); border: 1px solid var(--review-border); padding: 0 12px; border-radius: 12px; font: inherit; }
.review-controls option { color: #0f1428; background: #fff; }
.review-controls :focus-visible, .review-button:focus-visible, summary:focus-visible { outline: 3px solid var(--review-blue); outline-offset: 3px; }
.review-button { border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 12px 17px; background: linear-gradient(180deg,#6ea3ff,var(--review-blue)); color: #fff; font: inherit; font-weight: 800; cursor: pointer; min-height: 46px; }
.review-button:hover:not(:disabled) { filter: brightness(1.10); }
.review-button:disabled { cursor: wait; opacity: .6; }
.review-nav-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.review-back { display: inline-block; color: var(--review-muted); }
.review-status { margin-top: 14px !important; margin-bottom: 0 !important; }
.review-status.error { color: #ff9eae; }
.review-results { margin-top: 20px; }
.review-results > h2 { margin: 0; font-size: clamp(21px,3vw,28px); }
.review-section { margin-top: 18px; background: var(--review-surface-strong); border: 1px solid var(--review-border); border-radius: 14px; padding: 17px; min-width: 0; }
.review-section h2 { margin: 0 0 10px; font-size: 20px; }
.review-section h3 { margin: 14px 0 8px; font-size: 17px; }
.review-section p, .review-section li { line-height: 1.6; overflow-wrap: anywhere; }
.review-muted { color: var(--review-muted); }
.review-score { display: inline-block; background: var(--review-surface); border: 1px solid var(--review-border); padding: 8px 12px; border-radius: 10px; font-size: 21px; font-weight: 900; margin: 8px 0; }
.review-score-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.review-score-mini { min-width: 0; background: var(--review-surface); border: 1px solid var(--review-border); border-radius: 14px; padding: 13px; }
.review-score-mini strong { display: block; }
.review-score-mini .review-score { font-size: 18px; }
.review-details { border: 1px solid var(--review-border); border-radius: 13px; margin: 14px 0; padding: 13px; background: var(--review-surface); }
.review-details summary { cursor: pointer; font-weight: 800; line-height: 1.5; }
.review-table-wrap { width: 100%; overflow-x: auto; margin: 12px 0; border-radius: 12px; }
.review-table { border-collapse: collapse; width: 100%; min-width: 520px; table-layout: fixed; overflow-wrap: anywhere; }
.review-table th, .review-table td { padding: 12px 10px; border: 1px solid var(--review-border); color: var(--review-text); text-align: center; font-size: 14px; background: var(--review-surface); }
.review-table thead th { background: linear-gradient(180deg,rgba(116,163,255,.18),rgba(116,163,255,.10)); font-weight: 900; }
/* Explicit cell backgrounds override the table's base td styling (the old 2026 page missed this). */
.review-table tbody tr.correct td, .review-item.correct { background: linear-gradient(180deg,rgba(53,212,159,.23),rgba(53,212,159,.10)); }
.review-table tbody tr.incorrect td, .review-item.incorrect { background: linear-gradient(180deg,rgba(255,107,124,.24),rgba(255,107,124,.10)); }
.review-table tbody tr.partial td, .review-item.partial { background: linear-gradient(180deg,rgba(255,209,102,.25),rgba(255,209,102,.12)); }
.review-table tbody tr.unanswered td, .review-item.unanswered { background: var(--review-surface); }
.review-table tbody tr:hover td { filter: brightness(1.08); }
.review-table th:last-child, .review-table td:last-child { width: 110px; }
.review-badge { display: inline-block; font-size: 12px; font-weight: 900; border: 1px solid currentColor; border-radius: 99px; padding: 4px 9px; white-space: nowrap; }
.correct .review-badge { color: var(--review-green); }
.incorrect .review-badge { color: var(--review-red); }
.partial .review-badge { color: var(--review-yellow); }
.unanswered .review-badge { color: var(--review-muted); }
.review-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; align-items: center; }
.review-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.review-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.review-dot.correct { background: var(--review-green); }
.review-dot.incorrect { background: var(--review-red); }
.review-dot.unanswered { background: var(--review-muted); }
.review-dot.partial { background: var(--review-yellow); }
.review-item { border: 1px solid var(--review-border); border-radius: 12px; padding: 13px; margin: 12px 0; }
.review-item h3 { margin-top: 0; }
.review-response { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; border: 1px solid var(--review-border); background: var(--review-surface); padding: 12px; border-radius: 10px; }
.review-response-label { font-weight: 800; margin: 8px 0 3px; }
.review-audio { display: block; width: min(100%,560px); margin: 10px 0 18px; }
.review-note { line-height: 1.6; margin: 20px 0 0; color: var(--review-muted); }
@media (max-width: 750px) { .review-controls { grid-template-columns: 1fr; } .review-score-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .review-selector,.review-results { padding: 15px; } }
@media (max-width: 440px) { .review-score-grid { grid-template-columns: 1fr; } }