/* Global CSS Variables & Reset */
/* Speaking owns one viewport: the footer occupies a real grid row, never an overlay.
   Desktop panels scroll independently; mobile uses one scrollable content region. */
.speaking-exam:not(.speaking-exam--prestart) {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    --speaking-font-scale: 1;
    --speaking-cue-font: 20px;
}
.speaking-exam:not(.speaking-exam--prestart) > .exam-topbar { position: relative; }
.speaking-exam:not(.speaking-exam--prestart) > .speaking-exam__layout {
    min-height: 0;
    padding: 20px 28px;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
}
.speaking-exam:not(.speaking-exam--prestart) .speaking-exam__questions,
.speaking-exam:not(.speaking-exam--prestart) .speaking-recorder {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: 14px;
}
.speaking-exam:not(.speaking-exam--prestart) .speaking-recorder { position: relative; top: auto; }
.speaking-exam:not(.speaking-exam--prestart) > .speaking-bottom-nav { position: relative; inset: auto; }
.exam-text-large .speaking-exam { --speaking-font-scale: 1.125; }
.exam-text-extra-large .speaking-exam { --speaking-font-scale: 1.3125; }
.speaking-exam .speaking-question strong { font-size: calc(15px * var(--speaking-font-scale)); }
.speaking-exam .speaking-cue-card--workspace blockquote { font-size: calc(var(--speaking-cue-font) * var(--speaking-font-scale)); }
.speaking-exam .speaking-cue-card__prompts { font-size: calc(17px * var(--speaking-font-scale)); }
.speaking-exam .speaking-recorder__head h2 { font-size: calc(20px * var(--speaking-font-scale)); }
.speaking-exam .speaking-recorder__head p,
.speaking-exam .speaking-inline-message { font-size: calc(13px * var(--speaking-font-scale)); }
.speaking-exam .speaking-recorder__actions button { font-size: calc(14px * var(--speaking-font-scale)); }
.speaking-exam .speaking-preparation strong { font-size: calc(22px * var(--speaking-font-scale)); }
@media (max-width: 900px) {
    .speaking-exam:not(.speaking-exam--prestart) > .speaking-exam__layout { display: block; overflow-y: auto; padding: 14px 12px; scroll-padding-block: 14px; }
    .speaking-exam:not(.speaking-exam--prestart) .speaking-exam__questions,
    .speaking-exam:not(.speaking-exam--prestart) .speaking-recorder { max-height: none; overflow: visible; }
    .speaking-exam:not(.speaking-exam--prestart) .speaking-recorder { margin-top: 14px; }
}
@media (max-width: 520px) {
    .speaking-exam:not(.speaking-exam--prestart) { --speaking-cue-font: 17px; }
}
:root {
    --primary: #4F46E5;
    --primary-hover: #4338CA;
    --secondary: #10B981;
    --bg-color: #F9FAFB;
    --card-bg: #FFFFFF;
    --text-main: #111827;
    --text-muted: #6B7280;
    --border-color: #E5E7EB;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.5;
}

/* Typography */
h1, h2, h3 { font-weight: 600; color: var(--text-main); }
a { color: var(--primary); text-decoration: none; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.btn-primary {
    background-color: var(--primary);
    color: white;
}
.btn-primary:hover { background-color: var(--primary-hover); }
.btn-outline {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-main);
}
.btn-outline:hover { background-color: #F3F4F6; }
.btn-block { width: 100%; }

/* Alerts */
.alert {
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}
.alert-error {
    background-color: #FEF2F2;
    color: #991B1B;
    border: 1px solid #F87171;
}

/* Forms */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: inherit;
    transition: border-color 0.2s;
}
.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Login Component */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}
.login-card {
    background: var(--card-bg);
    width: 100%;
    max-width: 400px;
    padding: 2.5rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.login-header { text-align: center; margin-bottom: 2rem; }
.login-header h2 { margin-top: 1rem; margin-bottom: 0.5rem; font-size: 1.5rem; }
.login-header p { color: var(--text-muted); font-size: 0.875rem; }

/* Dashboard Component */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}
.nav-brand { font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
.nav-logo-text {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #818CF8 100%);
    color: white; font-weight: 700; font-size: 0.875rem;
    display: flex; align-items: center; justify-content: center;
}
.login-logo-text {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #818CF8 100%);
    color: white; font-weight: 700; font-size: 1.25rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 0.5rem;
}

.dashboard-layout { padding: 2rem; max-width: 1200px; margin: 0 auto; }
.header-banner {
    background: linear-gradient(135deg, var(--primary) 0%, #818CF8 100%);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    color: white;
    margin-bottom: 2rem;
}
.header-banner h1 { color: white; margin-bottom: 0.5rem; }
.header-banner p { opacity: 0.9; }

.tests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.test-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.test-card:hover { pointer-events: auto; transform: translateY(-3px); box-shadow: var(--shadow-md); }
.test-card-body { padding: 1.5rem; flex: 1; }
.test-type { font-size: 0.75rem; font-weight: 700; color: var(--primary); letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.test-card h3 { font-size: 1.125rem; margin-bottom: 1rem; }
.test-meta { font-size: 0.875rem; color: var(--text-muted); display: flex; align-items: center; }
.test-card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); background: #F8FAFC; }
.badge { padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; }
.badge-primary { background: #EEF2FF; color: var(--primary); }
.badge-success { background: #D1FAE5; color: var(--secondary); }

/* Split Screen Testing Interface */
.test-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.test-header {
    background: var(--card-bg);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
}
.test-title { font-weight: 600; font-size: 1.125rem;}
.test-timer {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: #F3F4F6;
    padding: 0.25rem 1rem;
    border-radius: var(--radius-md);
}

.split-screen { display: flex; flex: 1; overflow: hidden; }
.split-pane { overflow-y: auto; overflow-x: hidden; padding: 2rem; width: 50%; background: #fff;}
.split-resizer { width: 8px; background: #E5E7EB; cursor: col-resize; flex-shrink: 0; box-shadow: inset 1px 0 0 rgba(0,0,0,0.05);}
.split-resizer:hover, .split-resizer:active { background: var(--primary); }

.passage-content { font-size: 1.05rem; line-height: 1.8; color: #374151; }
.questions-content { display: flex; flex-direction: column; gap: 2rem; }

.question-block {
    background: #F9FAFB;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: var(--radius-md);
}
.q-number { font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; }
.q-content { font-size: 1rem; margin-bottom: 1rem; font-weight: 500; }
.q-options { display: flex; flex-direction: column; gap: 0.75rem; }

.radio-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.95rem;
}
.radio-label input { margin-right: 0.75rem; margin-top: 0.25rem; }

input.ui-answer-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all 0.2s;
}
input.ui-answer-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Loaders */
.loader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; color: var(--text-muted);}
.loader-spinner {
    width: 40px; height: 40px;
    border: 3px solid #E5E7EB; border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Results */
.card-centered {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 3rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    max-width: 500px;
    margin: 4rem auto;
}
.score-display { margin: 2rem 0; }
.score-circle {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    margin: 0 auto 1rem;
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
}

/* ============================
   Stage 2.3 — Section Status
   ============================ */

.section-status-header {
    text-align: center;
    margin-bottom: 2rem;
}
.section-status-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0.5rem 0;
}
.back-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 0.5rem;
    transition: opacity 0.2s;
}
.back-link:hover { opacity: 0.7; }

.attempt-badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.section-cards-grid {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.section-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    width: 200px;
    text-align: center;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}
.section-card:hover:not(.section-card-locked) {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.section-card-locked {
    opacity: 0.5;
    filter: grayscale(0.3);
}
.section-card-done {
    border-color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), var(--bg-card));
}

.sec-order {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}
.sec-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.sec-name { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; }
.section-card .sec-name, .section-card .sec-icon { color: var(--text-primary, var(--text-main)); }
.section-card .sec-icon svg { stroke: currentColor; }
.sec-meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.sec-result { font-size: 1.1rem; font-weight: 700; color: #22c55e; margin-bottom: 0.25rem; }
.sec-score { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.sec-action { margin-top: 0.75rem; }
.sec-locked { color: var(--text-muted); font-size: 0.9rem; }
.sec-coming-soon { color: var(--text-muted); font-size: 0.85rem; }
.sec-done { color: #22c55e; font-size: 0.9rem; font-weight: 500; }
.sec-start-btn { width: 100%; }

.section-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.attempt-completed-bar {
    text-align: center;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}
.attempt-completed-bar p {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ============================
   Part Tabs
   ============================ */

.part-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 1rem;
}
.part-tab {
    padding: 0.6rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-family: inherit;
}
.part-tab:hover { color: var(--text-primary); }
.part-tab-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* ============================
   Exam Audio Player
   ============================ */

.exam-audio-player {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    color: white;
}
.audio-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}
.audio-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
    margin-bottom: 0.5rem;
    pointer-events: none; /* NO SEEK */
}
.audio-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #818cf8, #a78bfa);
    border-radius: 3px;
    width: 0%;
    transition: width 0.5s linear;
}
.audio-time {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}
.audio-volume {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.volume-icon { font-size: 1rem; }
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    outline: none;
}
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}
.audio-ended { opacity: 0.4; }

/* ============================
   Timer Warning (< 5 min)
   ============================ */

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.timer-warning {
    color: #ef4444 !important;
    animation: timerPulse 1s ease-in-out infinite;
}

.test-timer-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.test-phase-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Button spinner */
.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.listening-instructions {
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem;
}

/* ============================
   Stage 2.4 — Writing View
   ============================ */

.writing-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Task Tabs */
.writing-task-tabs {
    display: flex;
    gap: 0;
    background: var(--card-bg);
    border-bottom: 2px solid var(--border-color);
    padding: 0 1rem;
}
.task-tab {
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    font-family: inherit;
    position: relative;
}
.task-tab:hover { color: var(--text-main); }
.task-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.task-tab.tab-has-content::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
}

/* Split Screen */
.writing-split-screen {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.writing-left-pane {
    width: 45%;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    border-right: 1px solid var(--border-color);
    background: #fafbfc;
}
.writing-right-pane {
    width: 55%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem;
    background: #fff;
}

/* Task Header */
.task-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.task-header-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
}
.task-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Writing Passage */
.writing-prompt {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #374151;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}
.writing-prompt p { margin-bottom: 0.75rem; }
.writing-prompt p:last-child { margin-bottom: 0; }

.writing-instruction {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    font-style: italic;
}
.writing-extra-instruction {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
    font-style: italic;
}

/* Task 1 Image */
.task1-image {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 1rem;
}
.writing-task-image { margin-top: 0.5rem; }

/* Textarea */
.writing-textarea {
    flex: 1;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    font-size: 1.05rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.8;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
    min-height: 300px;
}
.writing-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.writing-textarea:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

/* Word Counter */
.writing-word-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.9rem;
    transition: color 0.3s;
}
.word-count-label { color: var(--text-muted); }
.word-count-target { color: var(--text-muted); font-size: 0.85rem; }

.writing-word-counter.word-ok .word-count-label,
.writing-word-counter.word-ok #wordCountNum {
    color: #22c55e;
}
.writing-word-counter.word-under .word-count-label,
.writing-word-counter.word-under #wordCountNum {
    color: #ef4444;
}

/* Timer danger */
.timer-danger {
    color: #ef4444 !important;
    animation: timerPulse 0.5s ease-in-out infinite;
}

/* Writing Success Screen */
.writing-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    width: 100%;
}
.writing-success-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}
.writing-success h2 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}
.writing-success-text {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 2rem;
}
.writing-success-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}
.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 2rem;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}
.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
}
.writing-success-status {
    margin-bottom: 2rem;
}
.pending-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Section Status: pending state */
.sec-pending {
    color: #d97706;
    font-size: 0.85rem;
    font-weight: 500;
}
.writing-pending {
    color: #22c55e;
}

/* Responsive */
@media (max-width: 768px) {
    .writing-split-screen {
        flex-direction: column;
    }
    .writing-left-pane,
    .writing-right-pane {
        width: 100%;
    }
    .writing-left-pane {
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .writing-right-pane {
        flex: 1;
    }
    .writing-success-stats {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ============================
   Stage 2.5 — Exam UX Enhancements
   ============================ */

/* --- Question Navigator (bottom bar) --- */
.question-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 20;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    scrollbar-width: thin;
}
.question-nav::-webkit-scrollbar { height: 4px; }
.question-nav::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }

.qn-dot {
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #D1D5DB;
    background: white;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
    font-family: inherit;
    padding: 0;
}
.qn-dot:hover { border-color: var(--primary); color: var(--primary); transform: scale(1.1); }

.qn-answered {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.qn-flagged {
    background: #FEF3C7;
    border-color: #F59E0B;
    color: #B45309;
}
.qn-flagged-answered {
    background: #F59E0B;
    border-color: #F59E0B;
    color: white;
}
.qn-current {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
    transform: scale(1.15);
}
.qn-sep {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    flex-shrink: 0;
    margin: 0 4px;
}

/* --- Question tools --- */
.q-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ================================================================
   IELTS S2-G — Full Speaking runtime, result and review
   ================================================================ */
.speaking-exam,
.speaking-result-page,
.speaking-review-page {
    --speaking-ink: #101827;
    --speaking-muted: #58677e;
    --speaking-surface: #ffffff;
    --speaking-soft: #f2f3ef;
    --speaking-line: #b8c1cf;
    --speaking-accent: #1f8f78;
    --speaking-accent-strong: #13705e;
    --speaking-focus: #2f80ed;
    --speaking-result-accent: #df4b6a;
    min-height: 100vh;
    background: var(--speaking-soft);
    color: var(--speaking-ink);
}
.exam-theme-dark .speaking-exam,
.exam-theme-dark .speaking-result-page,
.exam-theme-dark .speaking-review-page,
.exam-theme-dark.speaking-exam,
.exam-theme-dark.speaking-result-page,
.exam-theme-dark.speaking-review-page {
    --speaking-ink: #f5f6f7;
    --speaking-muted: #b8bdb9;
    --speaking-surface: #1d2020;
    --speaking-soft: #1d2020;
    --speaking-line: #59636d;
    --speaking-accent: #42c5a5;
    --speaking-accent-strong: #73d6bf;
    --speaking-focus: #2f80ff;
    --speaking-result-accent: #ff748c;
}
.speaking-exam h1,
.speaking-exam h2,
.speaking-result-page h1,
.speaking-result-page h2,
.speaking-result-page h3,
.speaking-review-page h1,
.speaking-review-page h2,
.speaking-review-page h3 { color: var(--speaking-ink); }
.speaking-exam .exam-topbar { position: sticky; top: 0; z-index: 20; }
.speaking-part-banner {
    min-height: 92px;
    margin: 20px 20px 0;
    padding: 18px 15px;
    border: 1px solid var(--speaking-line);
    border-radius: 5px;
    background: color-mix(in srgb, var(--speaking-surface) 84%, var(--speaking-line));
}
.speaking-part-banner h1 { margin: 0; font-size: 20px; line-height: 1.3; }
.speaking-part-banner p { margin: 5px 0 0; color: var(--speaking-ink); font-size: 18px; line-height: 1.35; }
.speaking-exam__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    gap: 30px;
    width: 100%;
    margin: 0;
    padding: 40px 28px 98px;
}
.speaking-exam__questions,
.speaking-recorder,
.speaking-result-content,
.speaking-review-card {
    background: var(--speaking-surface);
    border: 1px solid var(--speaking-line);
    border-radius: 8px;
    box-shadow: none;
}
.speaking-exam__questions { padding: 0; border: 0; background: transparent; }
.speaking-exam__questions.is-cue-card { min-width: 0; }
.speaking-part-heading { display: grid; grid-template-columns: minmax(180px, .55fr) 1fr; gap: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--speaking-line); }
.speaking-part-heading span { color: var(--speaking-accent); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; font-size: 12px; }
.speaking-part-heading h1 { margin: 6px 0 0; font-size: clamp(30px, 3vw, 44px); line-height: 1; }
.speaking-part-heading p { margin: 0; align-self: end; color: var(--speaking-muted); line-height: 1.6; }
.speaking-question-list { display: grid; gap: 14px; margin-top: 0; }
.speaking-question-topic { margin: 0 0 4px; font-size: 24px; }
.speaking-question-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0; align-items: center; }
.speaking-question-row > span { color: var(--speaking-ink); font-size: 16px; font-weight: 800; }
.speaking-question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 10px 14px;
    color: var(--speaking-ink);
    text-align: left;
    background: transparent;
    border: 1px solid var(--speaking-line);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.speaking-question:hover { border-color: var(--speaking-focus); transform: none; }
.speaking-question:focus-visible,
.speaking-part-tabs button:focus-visible,
.speaking-bottom-actions button:focus-visible,
.speaking-recorder button:focus-visible,
.speaking-review-page button:focus-visible,
.speaking-result-page a:focus-visible,
.speaking-result-page button:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }
.speaking-question.is-current { background: color-mix(in srgb, var(--speaking-focus) 9%, var(--speaking-surface)); border-color: var(--speaking-focus); box-shadow: 0 0 0 1px color-mix(in srgb, var(--speaking-focus) 35%, transparent); }
.speaking-question strong { font-size: 15px; line-height: 1.45; }
.speaking-question em { color: var(--speaking-muted); font-style: normal; font-size: 12px; white-space: nowrap; }
.speaking-recorder { position: sticky; top: 70px; align-self: start; padding: 20px; }
.speaking-recorder__head { display: flex; align-items: center; gap: 13px; }
.speaking-recorder__mic { display: none; }
.speaking-recorder__head h2 { margin: 0; font-size: 20px; }
.speaking-recorder__head p { margin: 3px 0 0; color: var(--speaking-muted); font-size: 13px; }
.speaking-cue-card { margin: 22px 0; padding: 17px; background: var(--speaking-soft); border-left: 3px solid var(--speaking-accent); border-radius: 8px; }
.speaking-cue-card blockquote { margin: 0; padding: 0; border: 0; background: transparent; font-size: 15px; font-weight: 700; line-height: 1.55; }
.speaking-cue-card.is-part-two { padding: 20px; background: color-mix(in srgb, #d8ecff 74%, var(--speaking-surface)); border: 1px solid color-mix(in srgb, var(--speaking-focus) 40%, var(--speaking-line)); border-left-width: 4px; box-shadow: 0 7px 18px rgba(36, 82, 132, .08); }
.exam-theme-dark .speaking-cue-card.is-part-two { background: color-mix(in srgb, var(--speaking-focus) 11%, var(--speaking-surface)); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.speaking-cue-card--workspace { min-height: 336px; margin: 0; padding: 24px 20px; background: var(--speaking-surface) !important; border-width: 1px !important; border-left-width: 1px !important; border-radius: 8px; box-shadow: none !important; }
.speaking-cue-card--workspace blockquote { max-width: 920px; font-size: 20px; line-height: 1.45; }
.speaking-cue-card--workspace .speaking-cue-card__prompts { max-width: 900px; margin-top: 18px; padding-top: 0; border-top: 0; }
.speaking-cue-card--workspace .speaking-cue-card__prompts > strong { color: var(--speaking-ink); font-size: 17px; letter-spacing: 0; }
.speaking-cue-card--workspace .speaking-cue-card__prompts ul { margin-top: 14px; padding-left: 25px; font-size: 17px; }
.speaking-cue-card--workspace .speaking-cue-card__prompts li { margin-top: 12px; }
.speaking-cue-card__status { display: inline-flex; margin-top: 18px; padding: 5px 10px; color: var(--speaking-muted); background: color-mix(in srgb, var(--speaking-surface) 86%, #000); border-radius: 2px; font-size: 12px; }
.speaking-cue-card__prompts { margin-top: 15px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--speaking-focus) 26%, var(--speaking-line)); }
.speaking-cue-card__prompts > strong { color: var(--speaking-accent-strong); font-size: 13px; letter-spacing: .02em; }
.speaking-cue-card__prompts ul { margin: 9px 0 0; padding-left: 20px; color: var(--speaking-ink); }
.speaking-cue-card__prompts li { margin-top: 6px; line-height: 1.5; overflow-wrap: anywhere; }
.speaking-preparation { margin-bottom: 18px; padding: 15px; background: color-mix(in srgb, #f5a524 13%, var(--speaking-surface)); border: 1px solid color-mix(in srgb, #f5a524 35%, var(--speaking-line)); border-radius: 10px; }
.speaking-preparation > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.speaking-preparation > div + div { margin-top: 11px; justify-content: flex-start; }
.speaking-preparation span { color: var(--speaking-muted); font-size: 13px; }
.speaking-preparation strong { font-variant-numeric: tabular-nums; font-size: 22px; }
.speaking-preparation button { min-height: 34px; padding: 6px 10px; color: var(--speaking-ink); background: var(--speaking-surface); border: 1px solid var(--speaking-line); border-radius: 7px; }
.speaking-preparation__ready { margin: 12px 0 0; color: var(--speaking-accent-strong); font-size: 13px; font-weight: 700; }
.speaking-recorder__display { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 112px; margin-top: 20px; padding: 18px 16px; background: color-mix(in srgb, var(--speaking-surface) 90%, #000); border: 1px solid var(--speaking-line); border-radius: 8px; }
.speaking-recording-label { color: var(--speaking-ink); font-weight: 750; }
.speaking-recorder__pulse { display: none; }
.speaking-recorder__display.is-recording .speaking-recorder__pulse { background: #ef476f; border-color: rgba(239, 71, 111, .2); animation: speakingPulse 1.25s infinite; }
@keyframes speakingPulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 12px rgba(239,71,111,.1); } }
.speaking-recorder__display strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.speaking-recording-progress { grid-column: 1 / -1; width: 100%; height: 7px; overflow: hidden; background: var(--speaking-line); border-radius: 99px; }
.speaking-recording-progress i { display: block; height: 100%; background: var(--speaking-focus); border-radius: inherit; transition: width .2s linear; }
.speaking-recorder__display.is-recording .speaking-recording-progress i { background: #dc3545; }
.speaking-recorder__display small { grid-column: 1 / -1; color: var(--speaking-muted); }
.speaking-recorder__display audio { width: 100%; margin-top: 8px; }
.speaking-recorder__display audio { grid-column: 1 / -1; }
.speaking-inline-message { min-height: 22px; margin: 13px 0 0; color: var(--speaking-accent-strong); font-size: 13px; }
.speaking-inline-message.is-error { color: #c53e57; }
.speaking-inline-message.is-error p { color: var(--speaking-ink); line-height: 1.5; }
.speaking-inline-message .speaking-play-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px; padding: 10px 16px; border-radius: 9px; font: inherit; font-weight: 700; cursor: pointer; }
.speaking-recorder__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.speaking-recorder__actions button { min-height: 46px; border-radius: 9px; font-weight: 750; }
.speaking-record-btn { color: #fff; background: var(--speaking-focus); border: 1px solid var(--speaking-focus); }
.speaking-record-btn.is-recording { background: #cf334d; border-color: #cf334d; }
.speaking-record-btn:disabled { cursor: not-allowed; opacity: .5; }
.speaking-play-btn { color: var(--speaking-ink); background: var(--speaking-surface); border: 1px solid var(--speaking-line); }
.speaking-play-btn:disabled { cursor: not-allowed; opacity: .5; }
.speaking-recorder__status { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; color: var(--speaking-muted); font-size: 13px; }
.speaking-recorder__privacy { display: flex; gap: 7px; align-items: flex-start; margin: 14px 0 0; color: var(--speaking-muted); font-size: 11px; line-height: 1.4; }
.speaking-bottom-nav { position: fixed; inset: auto 0 0; z-index: 19; display: flex; justify-content: space-between; align-items: stretch; min-height: 64px; padding: 0 20px; background: var(--speaking-surface); border-top: 1px solid var(--speaking-line); box-shadow: none; }
.speaking-part-tabs { display: flex; flex: 1; justify-content: space-between; }
.speaking-part-tab { min-width: 180px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 3px solid transparent; }
.speaking-part-tab.is-active { border-color: var(--speaking-focus); }
.speaking-part-tab > button,
.speaking-part-questions button { padding: 3px 7px; color: var(--speaking-muted); background: transparent; border: 0; border-radius: 5px; }
.speaking-part-tab.is-active > button { color: var(--speaking-ink); }
.speaking-part-tab span, .speaking-part-tab small { display: block; }
.speaking-part-tab span { font-weight: 800; }
.speaking-part-tab small { margin-top: 4px; }
.speaking-part-questions { display: flex; align-items: center; gap: 3px; }
.speaking-part-questions button.is-active { color: var(--speaking-ink); outline: 2px solid var(--speaking-focus); }
.speaking-bottom-actions { display: flex; align-items: center; gap: 10px; }
.speaking-bottom-actions button { min-height: 43px; padding: 0 17px; color: var(--speaking-ink); background: var(--speaking-surface); border: 1px solid var(--speaking-line); border-radius: 8px; }
.speaking-processing { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; color: var(--speaking-ink); background: rgb(8 10 11 / 48%); backdrop-filter: blur(5px); }
.speaking-processing__card { width: min(560px, calc(100vw - 48px)); padding: 40px 44px 38px; background: var(--speaking-surface); border: 1px solid var(--speaking-line); border-radius: 6px; box-shadow: 0 18px 44px rgb(0 0 0 / 24%); }
.speaking-processing h2 { margin: 22px 0 6px; }
.speaking-processing p { max-width: 520px; margin: 0 auto; color: var(--speaking-muted); }

.speaking-result-shell,
.speaking-review-page { min-height: 100vh; background: var(--speaking-soft); color: var(--speaking-ink); }
.speaking-result-shell {
    min-width: 0;
    height: 100vh;
    overflow: hidden;
}
.speaking-result-scroll {
    min-width: 0;
    min-height: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-padding-block: 16px 84px;
    padding-bottom: 86px;
}
.speaking-result-scroll:focus-visible { outline: 3px solid var(--speaking-focus); outline-offset: -4px; }
.speaking-result-topbar,
.speaking-review-topbar { display: grid; grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr); align-items: center; min-height: 68px; padding: 0 30px; background: var(--speaking-surface); border-bottom: 1px solid var(--speaking-line); }
.speaking-result-topbar a,
.speaking-review-topbar a { display: inline-flex; align-items: center; gap: 6px; color: var(--speaking-ink); text-decoration: none; font-weight: 700; }
.speaking-result-topbar strong { justify-self: center; }
.speaking-result-topbar > span { justify-self: end; color: var(--speaking-muted); }
.speaking-result-intro,
.speaking-review-intro { margin: 16px 20px 0; padding: 18px 20px; background: color-mix(in srgb, var(--speaking-surface) 94%, var(--speaking-soft)); border: 1px solid var(--speaking-line); border-radius: 6px; }
.speaking-result-intro h1,
.speaking-review-intro h1 { margin: 0; font-size: 20px; }
.speaking-review-intro p { margin: 5px 0 0; color: var(--speaking-muted); }
.speaking-result-hero { display: grid; justify-items: center; width: calc(100% - 362px); max-width: 1540px; margin: 58px auto 0; padding: 0; text-align: center; }
.speaking-result-hero > h2 { margin: 0 0 10px; font-size: clamp(28px, 3vw, 38px); }
.speaking-result-hero__status { display: inline-flex; align-items: center; gap: 8px; color: var(--speaking-result-accent); font-weight: 800; }
.speaking-result-band { display: grid; place-items: center; align-content: center; gap: 10px; width: 100%; min-height: 350px; margin: 26px 0 18px; padding: 28px; color: var(--speaking-ink); border: 1px solid color-mix(in srgb, var(--speaking-result-accent) 70%, var(--speaking-line)); border-radius: 15px; background: color-mix(in srgb, var(--speaking-result-accent) 11%, var(--speaking-surface)); box-shadow: 0 18px 44px rgba(25,38,67,.1); }
.speaking-result-band strong { color: #ffd43b; font-size: 70px; line-height: 1; }
.speaking-result-band.is-high-band strong { color: #5798ff; }
.speaking-result-band > span { font-size: 25px; font-weight: 800; }
.speaking-result-band small { padding: 6px 12px; color: var(--speaking-result-accent); background: color-mix(in srgb, var(--speaking-result-accent) 10%, var(--speaking-surface)); border-radius: 999px; font-weight: 750; }
.speaking-result-band-note { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 560px; margin: 6px 0 0; padding: 13px 18px; border: 1px solid color-mix(in srgb, var(--speaking-result-accent) 34%, var(--speaking-line)); border-radius: 9px; background: color-mix(in srgb, var(--speaking-result-accent) 7%, var(--speaking-surface)); font-size: 14px; line-height: 1.45; }
.speaking-result-hero.is-ai-origin .speaking-result-hero__status { padding: 9px 18px; border: 1px solid color-mix(in srgb, var(--speaking-result-accent) 48%, var(--speaking-line)); border-radius: 999px; background: color-mix(in srgb, var(--speaking-result-accent) 8%, var(--speaking-surface)); }
.speaking-result-hero.is-ai-origin .speaking-result-band { box-shadow: none; }
.speaking-result-hero.is-ai-origin .speaking-result-band small { color: var(--speaking-ink); background: color-mix(in srgb, var(--speaking-muted) 34%, var(--speaking-surface)); }
.speaking-result-hero.is-neutral-origin .speaking-result-hero__status,
.speaking-result-hero.is-neutral-origin .speaking-result-band small { color: var(--speaking-muted); }
.speaking-result-neutral-note { border-color: var(--speaking-line); background: var(--speaking-surface); color: var(--speaking-muted); }
.speaking-result-ai-warning { color: #ffe34d; border-color: #7b3b12; background: #361c16; text-align: left; }
.speaking-result-ai-warning svg { flex: 0 0 auto; color: #ffc107; }
.speaking-result-ai-warning b { color: #ffe34d; }
@media (min-width: 901px) {
    .speaking-result-hero.is-ai-origin { margin-top: 50px; }
    .speaking-result-hero.is-ai-origin > h2 { line-height: 1.2; }
    .speaking-result-hero.is-ai-origin .speaking-result-hero__status { padding-block: 8px; }
    .speaking-result-hero.is-ai-origin .speaking-result-band { margin-top: 20px; }
    .speaking-result-hero.is-ai-origin .speaking-result-ai-warning { min-height: 102px; font-size: 16px; line-height: 24.7px; }
    .speaking-result-hero.is-ai-origin .speaking-result-summary { padding-block: 30px; line-height: 2.5; }
    .speaking-result-hero.is-ai-origin + .speaking-result-content {
        margin-top: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .speaking-result-hero.is-ai-origin + .speaking-result-content > .speaking-feedback-card:first-child { margin-top: 30px; }
}
.speaking-result-wait { display: grid; place-items: center; width: 112px; height: 112px; margin: 28px 0; color: var(--speaking-accent); border-radius: 50%; background: color-mix(in srgb, var(--speaking-accent) 12%, var(--speaking-surface)); }
.speaking-result-hero .speaking-result-summary { width: 100%; max-width: none; margin: 12px 0 0; padding: 24px 30px; color: var(--speaking-ink); border: 1px solid color-mix(in srgb, var(--speaking-focus) 72%, var(--speaking-line)); border-radius: 12px; background: color-mix(in srgb, var(--speaking-focus) 11%, var(--speaking-surface)); line-height: 1.65; text-align: left; }
.speaking-result-content { width: calc(100% - 362px); max-width: 1540px; margin: 0 auto 30px; padding: 30px; }
.speaking-result-content > h2 { margin: 0 0 20px; }
.speaking-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.speaking-band-grid article { padding: 18px; background: var(--speaking-soft); border-radius: 11px; }
.speaking-band-grid span { display: block; min-height: 38px; color: var(--speaking-muted); font-size: 12px; }
.speaking-band-grid strong { font-size: 28px; }
.speaking-band-grid div { height: 5px; margin-top: 13px; overflow: hidden; background: var(--speaking-line); border-radius: 4px; }
.speaking-band-grid i { display: block; height: 100%; background: var(--speaking-accent); }
.speaking-feedback-card { margin-top: 20px; padding: 22px; border: 1px solid var(--speaking-line); border-radius: 11px; }
.speaking-feedback-card h2 { margin: 0 0 10px; font-size: 18px; }
.speaking-feedback-card p { margin: 0; line-height: 1.7; white-space: pre-wrap; }
.speaking-feedback-card--feedback section { padding-top: 16px; border-top: 1px solid var(--speaking-line); }
.speaking-feedback-card--feedback section:first-of-type { padding-top: 0; border-top: 0; }
.speaking-feedback-card--feedback h3 { margin: 0 0 8px; font-size: 16px; }
.speaking-feedback-card--plan ol { margin: 0; padding-left: 22px; }
.speaking-feedback-card--plan li { margin-top: 9px; line-height: 1.6; }
.speaking-feedback-card--plan li:first-child { margin-top: 0; }
.speaking-feedback-card--feedback { border-left: 4px solid #8b5cf6; }
.speaking-feedback-card--plan { border-left: 4px solid var(--speaking-accent); }
.speaking-criteria-section { margin-top: 0; padding-top: 22px; border-top: 1px solid var(--speaking-line); }
.speaking-criteria-section > h2 { margin: 0 0 20px; }
.speaking-result-notice { max-width: 850px; margin: 0 auto 28px; padding: 20px; background: #fff5df; color: #66470a; border: 1px solid #f3cf7e; border-radius: 11px; }
.speaking-result-notice h2 { margin: 0 0 8px; font-size: 17px; }
.speaking-result-notice p { margin: 0; white-space: pre-wrap; }
.speaking-result-actions { display: flex; justify-content: center; gap: 12px; padding: 0 24px 48px; }

.speaking-review-topbar > div { text-align: center; }
.speaking-review-topbar > div span { display: block; color: var(--speaking-muted); font-size: 12px; }
.speaking-review-topbar > b { justify-self: end; color: var(--speaking-accent-strong); }
.speaking-review-parts { display: flex; justify-content: center; gap: 8px; padding: 25px; }
.speaking-review-parts button { min-width: 110px; padding: 11px 17px; color: var(--speaking-muted); background: var(--speaking-surface); border: 1px solid var(--speaking-line); border-radius: 9px; font-weight: 800; }
.speaking-review-parts button.is-active { color: #fff; background: var(--speaking-accent); border-color: var(--speaking-accent); }
.speaking-review-list { display: grid; gap: 20px; max-width: 1860px; margin: 0 auto; padding: 0 30px 30px; }
.speaking-review-card { padding: 26px; }
.speaking-review-card > header span { color: var(--speaking-accent-strong); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.speaking-review-card > header h2 { margin: 6px 0 18px; font-size: 21px; }
.speaking-review-cue { margin: -7px 0 18px; padding: 14px 16px; color: var(--speaking-ink); background: color-mix(in srgb, var(--speaking-focus) 9%, var(--speaking-surface)); border: 1px solid color-mix(in srgb, var(--speaking-focus) 35%, var(--speaking-line)); border-radius: 9px; }
.speaking-review-cue strong { color: var(--speaking-accent-strong); }
.speaking-review-cue ul { margin: 8px 0 0; padding-left: 20px; }
.speaking-review-cue li { margin-top: 5px; line-height: 1.5; }
.speaking-review-player { min-height: 58px; padding: 10px; background: var(--speaking-soft); border-radius: 9px; }
.speaking-review-player button { min-height: 38px; padding: 0 14px; color: #fff; background: var(--speaking-accent); border: 0; border-radius: 7px; font-weight: 750; }
.speaking-review-player audio { width: 100%; margin-top: 8px; }
.speaking-review-columns { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
.speaking-review-columns section { min-width: 0; padding: 18px; border: 1px solid var(--speaking-line); border-radius: 9px; }
.speaking-review-columns h3 { margin: 0 0 10px; font-size: 15px; }
.speaking-review-columns p { margin: 0; color: var(--speaking-muted); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.speaking-review-feedback { background: color-mix(in srgb, #b96a25 10%, var(--speaking-surface)); border-color: color-mix(in srgb, #b96a25 45%, var(--speaking-line)) !important; }
.speaking-review-feedback h3 { color: #d98936; text-transform: uppercase; letter-spacing: .04em; }
.speaking-review-improved { background: color-mix(in srgb, #12835f 10%, var(--speaking-surface)); border-color: color-mix(in srgb, #12835f 45%, var(--speaking-line)) !important; }
.speaking-review-improved h3 { color: #2ebf91; text-transform: uppercase; letter-spacing: .04em; }
.speaking-review-missing { font-style: italic; }
.speaking-review-footer { display: flex; justify-content: center; padding: 8px 24px 44px; }

/* Speaking review keeps the shell and current-part banner visible while only
   the review document scrolls, matching the reference runtime. */
.speaking-review-page {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100vh;
    min-height: 0;
    padding-bottom: 0;
    overflow: hidden;
}
.speaking-review-scroll {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-padding-block: 16px 84px;
}
.speaking-review-scroll:focus-visible { outline: 3px solid var(--speaking-focus); outline-offset: -4px; }
.speaking-review-guidance {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 40px 30px 30px;
    padding: 15px 20px;
    color: #ffd83d;
    background: color-mix(in srgb, #7c2d12 18%, var(--speaking-surface));
    border: 1px solid color-mix(in srgb, #a64b18 65%, var(--speaking-line));
    border-radius: 10px;
}
.speaking-review-guidance svg { flex: 0 0 auto; }
.speaking-review-evaluation {
    margin: 0 30px 30px;
    padding: 22px 20px 20px;
    background: color-mix(in srgb, #7f1d1d 14%, var(--speaking-surface));
    border: 1px solid color-mix(in srgb, #7f1d1d 58%, var(--speaking-line));
    border-radius: 12px;
}
.speaking-review-evaluation h2 { margin: 0 0 16px; color: #ff8c8c; font-size: 18px; }
.speaking-review-evaluation > div { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.speaking-review-evaluation article { display: grid; place-items: center; min-height: 88px; background: color-mix(in srgb, #2a1717 70%, var(--speaking-surface)); border: 1px solid color-mix(in srgb, #7f1d1d 35%, var(--speaking-line)); border-radius: 10px; }
.speaking-review-evaluation article span { color: var(--speaking-muted); font-size: 13px; font-weight: 800; }
.speaking-review-evaluation article strong { color: #ffd12f; font-size: 23px; }
.speaking-review-list { display: block; max-width: none; margin: 0 30px 30px; padding: 24px 20px 6px; background: var(--speaking-surface); border: 1px solid var(--speaking-line); border-radius: 12px; }
.speaking-review-list > h2 { margin: 0 0 22px; font-size: 24px; }
.speaking-review-card { margin: 0 0 24px; padding: 0 0 2px; background: transparent; border: 0; border-radius: 0; }
.speaking-review-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.speaking-review-card > header h3 { margin: 0 0 12px; font-size: 19px; }
.speaking-review-player { flex: 0 0 auto; min-height: 0; margin: 0 0 10px; padding: 0; background: transparent; }
.speaking-review-player button { width: 36px; min-height: 36px; padding: 0; color: var(--speaking-ink); background: transparent; border: 1px solid var(--speaking-line); border-radius: 7px; font-size: 13px; }
.speaking-review-player button:hover { color: var(--speaking-accent); border-color: var(--speaking-accent); }
.speaking-review-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.speaking-review-player p { margin: 0; color: var(--speaking-muted); }
.speaking-review-columns { gap: 14px; margin-top: 0; }
.speaking-review-columns section { padding: 16px 18px; border-radius: 9px; }
.speaking-review-columns h3 { text-transform: uppercase; letter-spacing: .04em; }
.speaking-review-response h3 { color: var(--speaking-muted); }
.speaking-review-response { display: block; }
.speaking-review-response h3,
.speaking-review-response p { display: block; width: 100%; }
.speaking-review-response h3 { margin-bottom: 12px; }
.speaking-review-improved h3 { display: flex; align-items: center; gap: 8px; }
.speaking-review-improved p { font-style: italic; }
.speaking-review-overall { display: grid; gap: 18px; margin: 0 30px 30px; }
.speaking-review-overall .speaking-feedback-card { margin: 0; background: var(--speaking-surface); }
.speaking-review-overall .speaking-feedback-card--summary { border-left: 4px solid var(--speaking-result-accent); }
.speaking-review-overall .speaking-feedback-card--feedback { display: grid; gap: 16px; }
.speaking-review-overall .speaking-feedback-card--feedback section { padding-top: 14px; border-top: 1px solid var(--speaking-line); }
.speaking-review-overall .speaking-feedback-card--feedback section:first-of-type { padding-top: 0; border-top: 0; }
.speaking-review-overall .speaking-feedback-card--feedback h3 { margin: 0 0 7px; font-size: 15px; }
.speaking-review-overall .speaking-feedback-card--plan ol { margin: 0; padding-left: 22px; }
.speaking-review-overall .speaking-feedback-card--plan li { margin-top: 10px; line-height: 1.6; }
.speaking-review-overall .speaking-feedback-card--plan li:first-child { margin-top: 0; }
.speaking-review-bottom { position: relative; z-index: 35; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; min-height: 64px; color: var(--speaking-ink); background: var(--speaking-surface); border-top: 1px solid var(--speaking-line); }
.speaking-review-bottom section { display: flex; align-items: center; justify-content: center; gap: 18px; border-top: 3px solid transparent; }
.speaking-review-bottom section.is-active { border-top-color: var(--speaking-accent); }
.speaking-review-bottom section > button { padding: 8px; color: inherit; background: transparent; border: 0; font-size: 18px; font-weight: 800; }
.speaking-review-bottom section span { display: flex; gap: 18px; }
.speaking-review-bottom section b { font-size: 17px; }
.speaking-review-bottom section small { color: var(--speaking-muted); }
.speaking-review-bottom__arrows { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.speaking-review-bottom__arrows button { width: 48px; height: 48px; color: inherit; background: var(--speaking-surface); border: 1px solid var(--speaking-line); border-radius: 8px; }
.speaking-review-bottom button:disabled { opacity: .38; cursor: not-allowed; }

@media (max-width: 900px) {
    .speaking-exam__layout { grid-template-columns: 1fr; padding: 22px 22px 170px; }
    .speaking-recorder { position: static; }
    .speaking-cue-card--workspace { min-height: 0; }
    .speaking-bottom-nav { padding: 0 18px; flex-direction: column; }
    .speaking-part-tabs { width: 100%; }
    .speaking-part-tab { min-width: 0; flex: 1; padding: 8px 5px; }
    .speaking-part-questions { display: none; }
    .speaking-bottom-actions { justify-content: flex-end; padding: 8px 0 12px; }
    .speaking-band-grid { grid-template-columns: repeat(2, 1fr); }
    .speaking-review-guidance, .speaking-review-evaluation, .speaking-review-list, .speaking-review-overall { margin-right: 18px; margin-left: 18px; }
}
@media (max-width: 520px) {
    .speaking-exam__layout { padding: 14px 12px 174px; gap: 14px; }
    .speaking-exam__questions, .speaking-recorder, .speaking-review-card { padding: 18px; border-radius: 11px; }
    .speaking-exam__questions.is-cue-card { padding: 0; }
    .speaking-cue-card--workspace { padding: 18px 16px; }
    .speaking-cue-card--workspace blockquote { font-size: 17px; }
    .speaking-cue-card--workspace .speaking-cue-card__prompts > strong,
    .speaking-cue-card--workspace .speaking-cue-card__prompts ul { font-size: 15px; }
    .speaking-part-heading { grid-template-columns: 1fr; gap: 12px; }
    .speaking-question-row { grid-template-columns: 26px minmax(0,1fr); }
    .speaking-question { grid-template-columns: 1fr; padding: 13px 12px; }
    .speaking-question em { white-space: normal; }
    .speaking-recorder__actions { grid-template-columns: 1fr; }
    .speaking-part-tab small { font-size: 9px; }
    .speaking-bottom-actions { justify-content: stretch; }
    .speaking-bottom-actions button { flex: 1; }
    .speaking-result-topbar, .speaking-review-topbar { grid-template-columns: auto 1fr; gap: 8px; padding: 10px 14px; }
    .speaking-result-topbar > span, .speaking-review-topbar > b { grid-column: 2; justify-self: start; }
    .speaking-result-intro, .speaking-review-intro { margin: 10px 12px 0; }
    .speaking-result-hero { width: auto; margin: 12px 12px 0; padding: 22px 12px; }
    .speaking-result-band { min-height: 210px; padding: 22px 14px; }
    .speaking-result-band span { font-size: 20px; }
    .speaking-result-band strong { font-size: 58px; }
    .speaking-result-content { width: auto; margin: 0 12px 22px; padding: 18px; }
    .speaking-band-grid { grid-template-columns: 1fr; }
    .speaking-result-actions { flex-direction: column; }
    .speaking-review-parts { padding: 16px 12px; overflow-x: auto; justify-content: flex-start; }
    .speaking-review-page { padding-bottom: 0; }
    .speaking-review-guidance, .speaking-review-evaluation, .speaking-review-list, .speaking-review-overall { margin-right: 12px; margin-left: 12px; }
    .speaking-review-evaluation > div { grid-template-columns: 1fr; }
    .speaking-review-list { padding: 18px 14px 2px; }
    .speaking-review-card { padding: 0; border-radius: 0; }
    .speaking-review-bottom { grid-template-columns: repeat(3, minmax(0,1fr)); min-height: 118px; }
    .speaking-review-bottom section { flex-direction: column; gap: 2px; }
    .speaking-review-bottom section span { gap: 8px; }
    .speaking-review-bottom__arrows { grid-column: 1 / -1; justify-content: flex-end; padding: 6px 12px; border-top: 1px solid var(--speaking-line); }
}
@media (prefers-reduced-motion: reduce) {
    .speaking-recorder__display.is-recording .speaking-recorder__pulse { animation: none; }
    .speaking-question { transition: none; }
}

/* Unified inline SVG icons */
.ui-icon {
    display: inline-block;
    vertical-align: -0.15em;
    flex: 0 0 auto;
}

.title-with-icon,
.btn,
.btn-outline,
.btn-outline-sm,
.speaking-phase-label,
.test-meta,
.attempt-section__name,
.attempt-section__comment {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.lms-empty-icon,
.activation-icon,
.writing-success-icon,
.notification-card-icon,
.notif-icon,
.volume-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lms-empty-icon svg,
.activation-icon svg {
    width: 48px;
    height: 48px;
}

.notification-card-icon {
    color: var(--primary);
}

.q-flag-btn {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.4;
    transition: all 0.15s;
    line-height: 1;
}
.q-flag-btn:hover { opacity: 0.8; border-color: #F59E0B; }
.q-flag-btn.flagged {
    opacity: 1;
    background: #FEF3C7;
    border-color: #F59E0B;
}
.q-flagged {
    border-color: #F59E0B !important;
    background: rgba(245, 158, 11, 0.04) !important;
}

.q-report-btn {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 999px;
    background: #fff;
    color: #DC2626;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.q-report-btn:hover {
    background: #FEE2E2;
    border-color: #DC2626;
}

.q-number-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.question-complaint-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(2px);
}

.question-complaint-card {
    width: min(520px, 100%);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
    padding: 20px;
}

.question-complaint-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.question-complaint-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
}

.question-complaint-hint {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.question-complaint-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--bg-main);
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.question-complaint-textarea {
    width: 100%;
    min-height: 132px;
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    outline: none;
}

.question-complaint-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.question-complaint-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

/* Question flash when navigated to */
@keyframes qFlash {
    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.1); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.q-highlight-flash {
    animation: qFlash 1.5s ease;
}

/* --- Highlight marks --- */
.hl-mark {
    background: #9f0b57;
    color: #fff;
    cursor: pointer;
    border-radius: 2px;
    padding: 0 1px;
    transition: background 0.15s;
    position: relative;
}
.hl-mark:hover {
    background: #b20d63;
}

/* Highlight tooltip */
.hl-tooltip {
    position: absolute;
    display: flex;
    gap: 0;
    background: #25282a;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 100;
}
.hl-tooltip-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    min-width: 86px;
    min-height: 64px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 0;
    transition: background 0.15s;
    line-height: 1;
}
.hl-tooltip-btn:hover { background: rgba(255,255,255,.12); }
.hl-tooltip-btn + .hl-tooltip-btn { border-left: 1px solid rgba(255,255,255,.12); }
.hl-tooltip-btn svg { width: 20px; height: 20px; }
.hl-btn-remove { color: #ff6b6b; }
.hl-btn-remove { color: #ef4444; }
.hl-btn-remove:hover { background: #FEF2F2; }

/* Note icon */
.hl-note-icon {
    font-size: 0.7rem;
    cursor: pointer;
    vertical-align: super;
    margin-left: 1px;
}
.hl-note-icon:hover { opacity: 0.7; }

/* Note popup */
.hl-note-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(375px, calc(100vw - 32px));
    z-index: 103;
    padding: 18px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--exam-border, var(--border-color));
    border-radius: 7px;
    background: var(--exam-panel, var(--card-bg));
    box-shadow: 0 12px 32px rgba(0,0,0,.28);
    color: var(--exam-text, var(--text-color));
}
.hl-note-popup h2 {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}
.exam-theme-dark .hl-note-popup {
    border-color: #65707d;
    background: #1d2020;
    color: #f5f6f7;
}
.exam-theme-dark .hl-note-popup h2 { color: #f5f6f7; }
.exam-theme-light .hl-note-popup {
    border-color: #b8c1cf;
    background: #ffffff;
    color: #101827;
}
.exam-theme-light .hl-note-popup h2 { color: #101827; }
.hl-note-textarea {
    width: 100%;
    height: 124px;
    border: 2px solid var(--exam-text, var(--text-color));
    border-radius: 7px;
    padding: 12px;
    background: var(--exam-bg, var(--input-bg));
    color: var(--exam-text, var(--text-color));
    font-family: inherit;
    font-size: 16px;
    line-height: 22px;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.hl-note-textarea:focus-visible {
    border-color: var(--exam-focus, var(--primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--exam-focus, var(--primary)) 32%, transparent);
}
.exam-theme-dark .hl-note-textarea {
    border-color: #f5f6f7;
    background: #1d2020;
    color: #f5f6f7;
}
.exam-theme-dark .hl-note-textarea::placeholder { color: #b8bdb9; }
.exam-theme-dark .hl-note-textarea:focus-visible { border-color: #f5f6f7; box-shadow: none; }
.exam-theme-light .hl-note-textarea {
    border-color: #101827;
    background: #ffffff;
    color: #101827;
}
.exam-theme-light .hl-note-textarea:focus-visible { border-color: #101827; box-shadow: none; }
.hl-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
.hl-note-save,
.hl-note-cancel {
    min-width: 90px;
    min-height: 42px;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    font: 500 15px/20px inherit;
    cursor: pointer;
}
.exam-theme-dark .hl-note-save { background: #f5f6f7; color: #1d2020; }
.exam-theme-dark .hl-note-cancel { background: #303535; color: #f5f6f7; }
.exam-theme-light .hl-note-save { background: #101827; color: #ffffff; }
.exam-theme-light .hl-note-cancel { background: #eef2f7; color: #101827; }
.hl-note-save {
    background: var(--exam-text, #fff);
    color: var(--exam-bg, #171919);
}
.hl-note-cancel {
    background: var(--exam-panel-soft, rgba(255,255,255,.08));
    color: var(--exam-text, var(--text-color));
}
.hl-note-save:hover,
.hl-note-cancel:hover { filter: brightness(1.08); }
.hl-note-save:focus-visible,
.hl-note-cancel:focus-visible { outline: 3px solid var(--exam-focus, var(--primary)); outline-offset: 2px; }

/* ============================
   Phase 3 — App Header
   ============================ */

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}
.app-header__left {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.app-header__logo {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #818CF8 100%);
    color: white; font-weight: 700; font-size: 0.875rem;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.app-header__nav {
    display: flex;
    gap: 0.25rem;
}
.app-header__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}
.nav-link:hover { color: var(--primary); background: #F3F4F6; }
.nav-link--icon { font-size: 1.1rem; padding: 0.5rem; }

/* Language Switcher */
.lang-switch {
    position: relative;
}
.lang-toggle {
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.lang-toggle:hover { border-color: var(--primary); color: var(--primary); }
.lang-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    z-index: 100;
    min-width: 60px;
}
.lang-option {
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: center;
    font-family: inherit;
    color: var(--text-muted);
    transition: all 0.15s;
}
.lang-option:hover { background: #F3F4F6; color: var(--primary); }
.lang-option--active { color: var(--primary); font-weight: 700; background: #EEF2FF; }

/* Login footer (lang on login page) */
.login-footer {
    margin-top: 1.5rem;
    text-align: center;
}
.lang-switch-mini {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.lang-btn {
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.lang-btn:hover { border-color: var(--primary); color: var(--primary); }
.lang-btn--active { border-color: var(--primary); color: var(--primary); background: #EEF2FF; font-weight: 600; }

.link-muted {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}
.link-muted:hover { color: var(--primary); }

.text-muted { color: var(--text-muted); }

/* ============================
   Phase 3 — LMS Dashboard Grid
   ============================ */

.lms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.lms-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    transition: all 0.25s ease;
}
.lms-card--clickable {
    cursor: pointer;
}
.lms-card--clickable:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}
.lms-card--locked {
    opacity: 0.5;
    filter: grayscale(0.4);
    cursor: default;
}
.lms-card--placeholder {
    opacity: 0.6;
    cursor: default;
}
.lms-card__icon {
    font-size: 2.25rem;
    line-height: 1;
}
.lms-card__body {
    flex: 1;
}
.lms-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.lms-card__desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* LMS Badges */
.lms-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.25rem;
}
.lms-badge--locked { background: #F3F4F6; color: var(--text-muted); }
.lms-badge--coming { background: #FEF3C7; color: #92400E; }
.lms-badge--readonly { background: #EEF2FF; color: var(--primary); }

/* LMS Empty State */
.lms-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}
.lms-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

/* LMS Banner (on main dashboard) */
.lms-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border: 1px solid #C7D2FE;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    transition: all 0.25s ease;
}
.lms-banner:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.lms-banner__icon {
    font-size: 2rem;
    flex-shrink: 0;
}
.lms-banner__body {
    flex: 1;
}
.lms-banner__body h3 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--primary);
}
.lms-banner__body p {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.lms-banner__arrow {
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 700;
}

/* ============================
   Phase 3 — Activation Flow
   ============================ */

.activation-card {
    max-width: 440px;
}
.activation-step {
    padding: 0.5rem 0;
}
.activation-step h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.activation-status {
    text-align: center;
    padding: 2rem 1rem;
}
.activation-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.activation-success h3 { color: #16a34a; }
.activation-pending h3 { color: #d97706; }
.activation-error p { color: #991B1B; font-size: 0.95rem; }

/* Profile Select (multi-profile login) */
.profile-select-container h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.profile-select-btn {
    text-align: left !important;
    justify-content: flex-start !important;
}
.profile-select-btn:hover {
    border-color: var(--primary) !important;
    background: #EEF2FF !important;
}

/* ============================
   Phase 3 — Performance View
   ============================ */

.performance-table-wrap {
    overflow-x: auto;
    margin-top: 1rem;
}
.performance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.performance-table th,
.performance-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.performance-table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #F9FAFB;
}
.performance-table tbody tr:hover {
    background: #F3F4F6;
}

/* Performance cards (mobile) */
.performance-cards {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}
.performance-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.performance-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.performance-card__scores {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.performance-card__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #F9FAFB;
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    flex: 1;
    min-width: 60px;
}
.performance-card__score--total {
    background: #EEF2FF;
}
.performance-card__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-info { background: #DBEAFE; color: #1E40AF; }

/* ============================
   Phase 3 — Responsive
   ============================ */

@media (max-width: 768px) {
    .app-header {
        padding: 0.5rem 1rem;
    }
    .app-header__nav {
        display: none;  /* Use mobile nav pattern if needed */
    }
    .dashboard-layout {
        padding: 1rem;
    }
    .lms-grid {
        grid-template-columns: 1fr;
    }
    .performance-table-wrap {
        display: none;
    }
    .performance-cards {
        display: flex;
    }
    .header-banner {
        padding: 2rem 1.5rem;
    }
    .lms-banner {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .app-header__logo {
        width: 32px; height: 32px; font-size: 0.75rem;
    }
    .lms-card {
        padding: 1rem;
    }
    .lms-card__icon {
        font-size: 1.75rem;
    }
}

/* ============================
   Phase 5 — Performance Summary & Attempt Cards
   ============================ */

/* Summary Cards Row */
.performance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.performance-summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    transition: all 0.25s ease;
}
.performance-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.performance-summary-card__icon {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}
.performance-summary-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}
.performance-summary-card__label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 0.25rem;
}

/* Attempt Cards */
.attempt-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
}
.attempt-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #F9FAFB;
    border-bottom: 1px solid var(--border-color);
}
.attempt-card__header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.attempt-sections {
    padding: 0.5rem 0;
}
.attempt-section {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #F3F4F6;
}
.attempt-section:last-child {
    border-bottom: none;
}
.attempt-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}
.attempt-section__name {
    font-weight: 600;
    font-size: 0.9rem;
}
.attempt-section__details {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.attempt-section__comment {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #F9FAFB;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--text-main);
    border-left: 3px solid var(--primary);
}

@media (max-width: 768px) {
    .performance-summary {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
    }
    .performance-summary-card {
        padding: 0.75rem 0.5rem;
    }
    .performance-summary-card__value {
        font-size: 1.25rem;
    }
    .attempt-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .attempt-section__details {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ============================
   Login Logo Image (brand)
   ============================ */
.login-logo-img {
    display: block;
    margin: 0 auto 0.75rem;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 4px;
    box-sizing: border-box;
}

/* ============================
   Phase 8–10 — Shell Grid Layout
   ============================ */

.lk-shell {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main";
    grid-template-columns: 240px 1fr;
    grid-template-rows: 56px 1fr;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* --- Header --- */
.lk-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    z-index: 50;
    gap: 0.5rem;
}
.lk-header__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lk-header__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* Hamburger (mobile only by default) */
.lk-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.15s;
}
.lk-hamburger:hover { background: #F3F4F6; }
.lk-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-main);
    border-radius: 1px;
    transition: all 0.3s;
}

/* --- Sidebar --- */
.lk-sidebar {
    grid-area: sidebar;
    width: 240px;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.25s ease;
    z-index: 100;
}

/* --- Sidebar Logo --- */
.lk-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.25s ease;
}
.lk-sidebar__logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    padding: 2px;
    box-sizing: border-box;
    overflow: hidden;
}
.lk-sidebar__logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
}
.lk-sidebar__logo-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    transition: opacity 0.2s ease, width 0.2s ease;
}

/* Sidebar collapse toggle (desktop, in header for stable coords) */
.lk-sidebar__toggle {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
    padding: 0;
}
.lk-sidebar__toggle:hover {
    background: #F3F4F6;
    color: var(--text-main);
    border-color: #D1D5DB;
}
.lk-sidebar__toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
}

/* --- Sidebar Groups --- */
.lk-sidebar__group {
    padding: 0.25rem 0;
}
.lk-sidebar__group-label {
    padding: 0.5rem 1rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    opacity: 0.7;
    transition: opacity 0.2s ease, height 0.2s ease;
    overflow: hidden;
}

/* --- Nav Item --- */
.lk-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    margin: 1px 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    background: none;
    border: none;
    width: calc(100% - 1rem);
    text-align: left;
    font-family: inherit;
}
.lk-nav-item:hover {
    background: #F3F4F6;
    color: var(--primary);
}

/* Active state */
.lk-nav-item--active {
    background: rgba(79, 70, 229, 0.08);
    color: var(--primary);
    font-weight: 600;
}
.lk-nav-item--active::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

/* Locked */
.lk-nav-item--locked { opacity: 0.45; cursor: pointer; }
.lk-nav-item--locked:hover { opacity: 0.6; background: #F9FAFB; }

/* Read-only */
.lk-nav-item--readonly { opacity: 0.85; }

/* Expired */
.lk-nav-item--expired { opacity: 0.5; cursor: pointer; }

/* Logout */
.lk-nav-item--logout { color: #DC2626; }
.lk-nav-item--logout:hover { background: rgba(220, 38, 38, 0.06); color: #DC2626; }

/* --- Nav Icon --- */
.lk-nav-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}
.lk-nav-icon svg { width: 20px; height: 20px; }

/* --- Nav Text --- */
.lk-nav-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s ease;
}

/* --- Nav Badge --- */
.lk-nav-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    transition: opacity 0.2s ease;
}
.lk-nav-badge--locked { color: var(--text-muted); opacity: 0.7; }
.lk-nav-badge--readonly { background: #EEF2FF; color: var(--primary); }
.lk-nav-badge--expired { background: #FEF3C7; color: #92400E; }
.lk-nav-badge svg { width: 12px; height: 12px; }

/* --- Bottom section --- */
.lk-sidebar__bottom {
    margin-top: auto;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-color);
}

/* --- Main Content Area --- */
.lk-main {
    grid-area: main;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-color);
}
.lk-main .dashboard-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}

/* --- General portal: learning platforms catalogue --- */
.learning-platforms-page {
    width: 100%;
}

.learning-platforms-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.learning-platforms-head h1 {
    margin: 0 0 0.5rem;
    color: var(--text-color);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.15;
}

.learning-platforms-head p {
    max-width: 720px;
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.learning-platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
    gap: 1.25rem;
}

.learning-platform-card {
    display: flex;
    min-height: 330px;
    flex-direction: column;
    padding: 1.5rem;
    overflow: hidden;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.learning-platform-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.learning-platform-card__brand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.learning-platform-card__brand img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.learning-platform-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    color: #047857;
    background: #ecfdf5;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.learning-platform-card__status--locked {
    max-width: 220px;
    color: var(--text-muted);
    background: var(--background-color);
    border-radius: var(--radius-md);
    line-height: 1.35;
}

.learning-platform-card__body {
    padding: 1.5rem 0;
}

.learning-platform-card__eyebrow {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.learning-platform-card__body h2 {
    margin: 0 0 0.7rem;
    color: var(--text-color);
    font-size: 1.5rem;
}

.learning-platform-card__body p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.learning-platform-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none;
    white-space: normal;
}

.learning-platforms-future {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 1.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* --- Overlay (mobile drawer backdrop) --- */
.lk-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s;
}
.lk-overlay--visible {
    display: block;
    opacity: 1;
}

/* ============================
   Desktop Sidebar Collapse
   ============================ */

.lk-shell--collapsed {
    grid-template-columns: 64px 1fr;
}
.lk-shell--collapsed .lk-sidebar {
    width: 64px;
    overflow: visible;
}

/* Hide text, badges, group labels */
.lk-shell--collapsed .lk-nav-text,
.lk-shell--collapsed .lk-nav-badge,
.lk-shell--collapsed .lk-sidebar__logo-text,
.lk-shell--collapsed .lk-sidebar__group-label {
    display: none;
}

/* Center icon in collapsed nav item — icon rail */
.lk-shell--collapsed .lk-nav-item {
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 2px auto;
    width: 44px;
    height: 40px;
    border-radius: 8px;
    gap: 0;
}

/* Active bar repositioned for icon rail */
.lk-shell--collapsed .lk-nav-item--active::before {
    left: -10px;
    top: 8px;
    bottom: 8px;
}

/* Logo: center icon */
.lk-shell--collapsed .lk-sidebar__logo {
    justify-content: center;
    padding: 0.75rem 0;
    gap: 0;
}

/* Toggle chevron in collapsed — rotate only, no position change */
.lk-shell--collapsed .lk-sidebar__toggle svg {
    transform: rotate(180deg);
}

/* Logout centered */
.lk-shell--collapsed .lk-nav-item--logout {
    justify-content: center;
    width: 44px;
    margin: 2px auto;
    gap: 0;
}

/* Groups: flex column center */
.lk-shell--collapsed .lk-sidebar__group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Tooltip on hover (collapsed only) --- */
.lk-shell--collapsed .lk-nav-item::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: #1F2937;
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.lk-shell--collapsed .lk-nav-item:hover::after {
    opacity: 1;
}
.lk-shell--collapsed .lk-nav-item:not([title])::after {
    display: none;
}

/* ============================
   Mobile Responsive (Shell)
   ============================ */
@media (max-width: 768px) {
    .lk-shell {
        grid-template-areas: "header" "main";
        grid-template-columns: 1fr;
        grid-template-rows: 56px 1fr;
    }
    /* Show header hamburger, hide sidebar toggle */
    .lk-hamburger { display: flex; }
    .lk-sidebar__toggle { display: none !important; }

    .lk-header {
        justify-content: space-between;
    }

    .lk-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 260px;
        height: 100vh;
        transition: left 0.3s ease;
        box-shadow: none;
    }
    .lk-sidebar--open {
        left: 0;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }
    .lk-main .dashboard-layout { padding: 1rem; }

    /* Override collapsed styles on mobile — sidebar is always full-width drawer */
    .lk-shell--collapsed { grid-template-columns: 1fr; }
    .lk-shell--collapsed .lk-sidebar { width: 260px; }
    .lk-shell--collapsed .lk-nav-text,
    .lk-shell--collapsed .lk-sidebar__logo-text,
    .lk-shell--collapsed .lk-sidebar__group-label {
        display: block;
    }
    .lk-shell--collapsed .lk-nav-badge {
        display: inline-flex;
    }
    .lk-shell--collapsed .lk-nav-item {
        justify-content: flex-start;
        padding: 0.6rem 1rem;
        margin: 1px 0.5rem;
        width: calc(100% - 1rem);
        height: auto;
        gap: 0.75rem;
    }
    .lk-shell--collapsed .lk-sidebar__logo {
        justify-content: flex-start;
        padding: 0.75rem;
        gap: 0.75rem;
        position: static;
    }
    .lk-shell--collapsed .lk-sidebar__group { align-items: stretch; }
    .lk-shell--collapsed .lk-nav-item::after { display: none; }
    .lk-shell--collapsed .lk-nav-item--logout {
        justify-content: flex-start;
        width: calc(100% - 1rem);
        margin: 1px 0.5rem;
        gap: 0.75rem;
    }
    .lk-shell--collapsed .lk-sidebar__toggle { display: none !important; }

    .learning-platforms-grid {
        grid-template-columns: 1fr;
    }

    .learning-platform-card {
        min-height: 300px;
        padding: 1.25rem;
    }

    .learning-platform-card__action {
        width: 100%;
    }
}

/* ============================
   IELTS design reference layer
   Scope: Student LK IELTS routes only (#lms...). Admin UI is not affected.
   ============================ */

.body--ielts {
    /* Primitive tokens: raw visual values measured from the approved shell references. */
    --ielts-p-color-ink-950: #191a1a;
    --ielts-p-color-ink-900: #202222;
    --ielts-p-color-ink-850: #242827;
    --ielts-p-color-ink-700: #343938;
    --ielts-p-color-white: #ffffff;
    --ielts-p-color-slate-50: #f7f8fa;
    --ielts-p-color-slate-100: #eef1f4;
    --ielts-p-color-slate-300: #d8dde4;
    --ielts-p-color-slate-500: #667085;
    --ielts-p-color-slate-900: #161a1d;
    --ielts-p-color-brand: #ef4b3f;
    --ielts-p-color-focus: #5aa7ff;
    --ielts-p-color-success: #16b86f;
    --ielts-p-color-warning: #f5b91f;
    --ielts-p-color-danger: #ef5350;
    --ielts-p-radius-xs: 6px;
    --ielts-p-radius-sm: 8px;
    --ielts-p-radius-md: 12px;
    --ielts-p-radius-lg: 14px;
    --ielts-p-shadow-float: 0 18px 48px rgba(0, 0, 0, 0.24);
    --ielts-p-shadow-light: 0 12px 36px rgba(18, 27, 40, 0.08);
    --ielts-p-motion-fast: 140ms;
    --ielts-p-motion-base: 200ms;
    --ielts-p-ease: cubic-bezier(0.2, 0, 0, 1);
    --ielts-p-font-family: 'Inter', Arial, sans-serif;

    /* Semantic tokens: dark is the default; Light overrides only this layer. */
    --ielts-s-background: var(--ielts-p-color-ink-950);
    --ielts-s-surface: var(--ielts-p-color-ink-900);
    --ielts-s-surface-raised: var(--ielts-p-color-ink-850);
    --ielts-s-surface-soft: rgba(255, 255, 255, 0.07);
    --ielts-s-text: var(--ielts-p-color-white);
    --ielts-s-text-muted: #c2c9c5;
    --ielts-s-border: rgba(255, 255, 255, 0.11);
    --ielts-s-border-strong: rgba(255, 255, 255, 0.22);
    --ielts-s-focus: var(--ielts-p-color-focus);
    --ielts-s-success: var(--ielts-p-color-success);
    --ielts-s-warning: var(--ielts-p-color-warning);
    --ielts-s-error: var(--ielts-p-color-danger);
    --ielts-s-type-caption: 11px;
    --ielts-s-type-small: 12px;
    --ielts-s-type-label: 13px;
    --ielts-s-type-body: 14px;
    --ielts-s-type-title: 16px;
    --ielts-s-type-section: 1.5rem;
    --ielts-s-type-hero: clamp(1.8rem, 2.7vw, 2.35rem);

    /* Component tokens: shell geometry and reusable control surfaces. */
    --ielts-c-sidebar-width: 318px;
    --ielts-c-sidebar-rail-width: 72px;
    --ielts-c-sidebar-background: var(--ielts-p-color-ink-900);
    --ielts-c-sidebar-text: rgba(255, 255, 255, 0.94);
    --ielts-c-sidebar-muted: rgba(255, 255, 255, 0.66);
    --ielts-c-sidebar-active: rgba(255, 255, 255, 0.12);
    --ielts-c-topbar-height: 70px;
    --ielts-c-topbar-background: #191919;
    --ielts-c-card-background: var(--ielts-s-surface);
    --ielts-c-card-border: var(--ielts-s-border);
    --ielts-c-control-background: var(--ielts-s-surface-raised);
    --ielts-c-control-border: var(--ielts-s-border);
    --ielts-c-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ielts-s-focus) 46%, transparent);
    background: var(--ielts-s-background);
    font-family: var(--ielts-p-font-family);
}

.body--ielts.ielts-theme-light {
    --ielts-s-background: var(--ielts-p-color-slate-50);
    --ielts-s-surface: var(--ielts-p-color-white);
    --ielts-s-surface-raised: var(--ielts-p-color-slate-100);
    --ielts-s-surface-soft: #eef1f4;
    --ielts-s-text: var(--ielts-p-color-slate-900);
    --ielts-s-text-muted: #596475;
    --ielts-s-border: var(--ielts-p-color-slate-300);
    --ielts-s-border-strong: #b6bec9;
    --ielts-c-topbar-background: color-mix(in srgb, var(--ielts-p-color-white) 94%, transparent);
    --ielts-c-card-background: var(--ielts-s-surface);
    --ielts-c-card-border: var(--ielts-s-border);
    --ielts-c-control-background: var(--ielts-p-color-white);
    --ielts-c-control-border: var(--ielts-s-border);
    background: var(--ielts-s-background);
}

.ielts-text-large.body--ielts {
    --ielts-s-type-caption: 12px;
    --ielts-s-type-small: 13px;
    --ielts-s-type-label: 15px;
    --ielts-s-type-body: 16px;
    --ielts-s-type-title: 18px;
    --ielts-s-type-section: 1.7rem;
    --ielts-s-type-hero: clamp(2rem, 2.9vw, 2.55rem);
}
.ielts-text-extra-large.body--ielts {
    --ielts-s-type-caption: 13px;
    --ielts-s-type-small: 15px;
    --ielts-s-type-label: 16px;
    --ielts-s-type-body: 18px;
    --ielts-s-type-title: 20px;
    --ielts-s-type-section: 1.9rem;
    --ielts-s-type-hero: clamp(2.15rem, 3vw, 2.75rem);
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
    .body--ielts { --ielts-c-topbar-background: #151716; }
    .body--ielts.ielts-theme-light { --ielts-c-topbar-background: #ffffff; }
}

.lk-shell--ielts {
    grid-template-areas: "sidebar main";
    grid-template-columns: var(--ielts-c-sidebar-width) minmax(0, 1fr);
    grid-template-rows: 1fr;
    background: var(--ielts-s-background);
    transition: grid-template-columns var(--ielts-p-motion-base) var(--ielts-p-ease);
}

.lk-shell--ielts.lk-shell--collapsed {
    grid-template-columns: var(--ielts-c-sidebar-rail-width) minmax(0, 1fr);
}

.lk-shell--ielts .lk-header {
    display: none;
}

.lk-shell--ielts .lk-main {
    min-width: 0;
    background: var(--ielts-s-background);
    color: var(--ielts-s-text);
    scroll-padding-top: calc(var(--ielts-c-topbar-height) + 12px);
}

.ielts-theme-light .lk-shell--ielts,
.ielts-theme-light .lk-shell--ielts .lk-main {
    background: var(--ielts-s-background);
    color: var(--ielts-s-text);
}

.lk-shell--ielts .dashboard-layout {
    max-width: none;
    padding: 0;
}

.ielts-sidebar {
    width: var(--ielts-c-sidebar-width);
    background: var(--ielts-c-sidebar-background);
    border-right-color: var(--ielts-s-border);
    color: var(--ielts-c-sidebar-text);
    padding: 15px 10px 0;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-color: rgba(255, 255, 255, 0.42) transparent;
    transition: width var(--ielts-p-motion-base) var(--ielts-p-ease), transform var(--ielts-p-motion-base) var(--ielts-p-ease);
}

.lk-shell--ielts.lk-shell--collapsed .ielts-sidebar {
    width: var(--ielts-c-sidebar-rail-width);
    overflow-x: hidden;
    overflow-y: auto;
}

.ielts-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 45px;
    padding: 0 5px 14px;
}

.ielts-sidebar__mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
}

.ielts-sidebar__mark img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.ielts-sidebar__title {
    color: var(--ielts-c-sidebar-text);
    font-size: var(--ielts-s-type-title);
    font-weight: 750;
    line-height: 1.2;
}

.ielts-sidebar__subtitle {
    font-size: var(--ielts-s-type-small);
    color: var(--ielts-c-sidebar-muted);
}

.ielts-back-to-lk {
    min-height: 42px;
    margin: 0 0 22px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: var(--ielts-c-sidebar-text);
    text-decoration: none;
    font-size: var(--ielts-s-type-body);
    font-weight: 700;
    transition: background var(--ielts-p-motion-fast) var(--ielts-p-ease), border-color var(--ielts-p-motion-fast) var(--ielts-p-ease);
}

.ielts-back-to-lk:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.24);
}

.ielts-sidebar__group {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 38px;
}

.ielts-sidebar__brand + .ielts-sidebar__group {
    padding-top: 15px;
}

.ielts-sidebar__group--collections {
    margin-bottom: 38px;
}

.ielts-sidebar__group-label {
    padding: 0 10px 6px;
    color: var(--ielts-c-sidebar-muted);
    font-size: 14px;
    font-weight: 700;
}

.ielts-nav-item {
    width: 100%;
    min-height: 44px;
    margin: 0;
    border-radius: 8px;
    padding: 0 10px;
    color: var(--ielts-c-sidebar-text);
    background: transparent;
    border: 0;
    font-size: 16px;
    transition: background var(--ielts-p-motion-fast) var(--ielts-p-ease), color var(--ielts-p-motion-fast) var(--ielts-p-ease), opacity var(--ielts-p-motion-fast) var(--ielts-p-ease);
}

.ielts-nav-item--preserve-slot {
    margin-top: 46px;
}

.ielts-nav-item:hover,
.ielts-nav-item.lk-nav-item--active {
    background: var(--ielts-c-sidebar-active);
    color: var(--ielts-p-color-white);
}

.ielts-nav-item--locked {
    opacity: 0.58;
    cursor: default;
    border: 1px dashed rgba(255, 255, 255, 0.12);
}

.ielts-nav-lock {
    margin-left: auto;
    color: #E5E7EB;
}

.ielts-sidebar__bottom {
    margin-top: auto;
    border-top-color: rgba(255, 255, 255, 0.14);
    min-height: 70px;
    padding: 9px 6px;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    background: var(--ielts-c-sidebar-background);
}

.ielts-sidebar__account {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ielts-c-sidebar-text);
    text-decoration: none;
    border-radius: var(--ielts-p-radius-sm);
}

.ielts-sidebar__account-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.ielts-sidebar__account-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ielts-sidebar__account-copy strong,
.ielts-sidebar__account-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ielts-sidebar__account-copy strong {
    font-size: 14px;
}

.ielts-sidebar__account-copy small {
    margin-top: 3px;
    color: var(--ielts-c-sidebar-muted);
    font-size: 11px;
}

.ielts-sidebar__logout {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--ielts-p-radius-sm);
    color: var(--ielts-c-sidebar-muted);
    background: transparent;
    cursor: pointer;
}

.ielts-sidebar__account:hover,
.ielts-sidebar__logout:hover {
    color: var(--ielts-c-sidebar-text);
    background: rgba(255, 255, 255, 0.1);
}

.lk-shell--ielts.lk-shell--collapsed .ielts-sidebar__brand {
    justify-content: center;
    padding-inline: 0;
}

.lk-shell--ielts.lk-shell--collapsed .ielts-sidebar__brand > div,
.lk-shell--ielts.lk-shell--collapsed .ielts-back-to-lk .lk-nav-text,
.lk-shell--ielts.lk-shell--collapsed .ielts-nav-lock,
.lk-shell--ielts.lk-shell--collapsed .ielts-sidebar__account-copy,
.lk-shell--ielts.lk-shell--collapsed .ielts-sidebar__logout {
    display: none;
}

.lk-shell--ielts.lk-shell--collapsed .ielts-sidebar__account {
    justify-content: center;
}

.lk-shell--ielts.lk-shell--collapsed .ielts-back-to-lk {
    width: 44px;
    min-height: 42px;
    margin: 0 auto 18px;
    padding: 0;
    justify-content: center;
}

.lk-shell--ielts.lk-shell--collapsed .ielts-sidebar__group {
    margin-bottom: 16px;
}

.lk-shell--ielts.lk-shell--collapsed .lk-nav-item::after {
    display: none;
}

.ielts-platform {
    --ielts-bg: var(--ielts-s-background);
    --ielts-panel: var(--ielts-s-surface);
    --ielts-panel-2: var(--ielts-s-surface-raised);
    --ielts-border: var(--ielts-s-border);
    --ielts-text: var(--ielts-s-text);
    --ielts-muted: var(--ielts-s-text-muted);
    --ielts-soft: var(--ielts-s-surface-soft);
    --ielts-amber: #ffbf00;
    --ielts-green: #16d176;
    --ielts-blue: #2e84ff;
    --ielts-rose: #ff3e72;
    --ielts-teal: #00c896;
    min-height: 100vh;
    background: var(--ielts-bg);
    color: var(--ielts-text);
}

.ielts-theme-light .ielts-platform {
    background: var(--ielts-bg);
}

.ielts-pill-btn,
.ielts-theme-toggle,
.ielts-shell-control,
.ielts-preference-option,
.ielts-preferences-menu__close,
.ielts-outline-btn,
.ielts-solid-btn,
.ielts-search-btn,
.ielts-tab,
.ielts-clear-btn {
    font: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 9px;
    min-height: 40px;
    padding: 0 16px;
    transition: color var(--ielts-p-motion-fast) var(--ielts-p-ease), border-color var(--ielts-p-motion-fast) var(--ielts-p-ease), background var(--ielts-p-motion-fast) var(--ielts-p-ease), box-shadow var(--ielts-p-motion-fast) var(--ielts-p-ease);
}

.ielts-sidebar a:focus-visible,
.ielts-sidebar button:focus-visible,
.ielts-sidebar [role="link"][tabindex]:focus-visible,
.ielts-platform a:focus-visible,
.ielts-platform button:focus-visible,
.ielts-preferences-menu button:focus-visible {
    outline: 2px solid var(--ielts-s-focus);
    outline-offset: 2px;
    box-shadow: var(--ielts-c-focus-ring);
}

.ielts-sidebar [aria-disabled="true"]:focus-visible {
    opacity: 0.82;
}

.ielts-pill-btn {
    min-height: 28px;
    border-radius: 999px;
    color: white;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 800;
}

.ielts-breadcrumb {
    min-height: var(--ielts-c-topbar-height);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--ielts-s-border);
    background: var(--ielts-c-topbar-background);
    position: sticky;
    top: 0;
    z-index: 60;
    backdrop-filter: blur(14px);
}

.ielts-breadcrumb a,
.ielts-breadcrumb strong {
    color: var(--ielts-text);
    font-weight: 800;
}

.ielts-breadcrumb span {
    color: var(--ielts-muted);
}

.ielts-breadcrumb__separator {
    width: 1px;
    height: 24px;
    background: var(--ielts-border);
}

.ielts-shell-control {
    width: 32px;
    min-height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border-radius: var(--ielts-p-radius-sm);
    border-color: transparent;
    background: transparent;
    color: var(--ielts-muted);
}

.ielts-shell-control:hover {
    color: var(--ielts-text);
    background: var(--ielts-soft);
}

.ielts-theme-toggle {
    width: 36px;
    min-height: 36px;
    padding: 0;
    background: var(--ielts-c-control-background);
    color: var(--ielts-text);
    border-color: var(--ielts-c-control-border);
}

.ielts-preferences {
    position: relative;
    margin-left: auto;
}

.ielts-preferences-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    width: min(340px, calc(100vw - 24px));
    padding: 16px;
    border: 1px solid var(--ielts-s-border-strong);
    border-radius: var(--ielts-p-radius-md);
    background: var(--ielts-s-surface);
    color: var(--ielts-s-text);
    box-shadow: var(--ielts-p-shadow-float);
}

.ielts-theme-light .ielts-preferences-menu {
    box-shadow: var(--ielts-p-shadow-light);
}

.ielts-preferences-menu[hidden] {
    display: none;
}

.ielts-preferences-menu__head,
.ielts-preferences-options {
    display: flex;
    align-items: center;
}

.ielts-preferences-menu__head {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.ielts-preferences-menu__close {
    width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--ielts-p-radius-sm);
    color: var(--ielts-s-text-muted);
    background: transparent;
}

.ielts-preferences-menu__close:hover {
    color: var(--ielts-s-text);
    background: var(--ielts-s-surface-soft);
}

.ielts-preferences-group + .ielts-preferences-group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ielts-s-border);
}

.ielts-preferences-group > span {
    display: block;
    margin-bottom: 8px;
    color: var(--ielts-s-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.ielts-preferences-options {
    gap: 6px;
}

.ielts-preference-option {
    flex: 1 1 0;
    min-width: 0;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--ielts-s-border);
    border-radius: var(--ielts-p-radius-sm);
    color: var(--ielts-s-text-muted);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
}

.ielts-preference-option:hover {
    color: var(--ielts-s-text);
    background: var(--ielts-s-surface-soft);
}

.ielts-preference-option.is-selected {
    color: var(--ielts-s-text);
    background: var(--ielts-s-surface-soft);
    border-color: var(--ielts-s-focus);
    box-shadow: inset 0 -2px 0 var(--ielts-s-focus);
}

.ielts-theme-toggle:hover {
    background: var(--ielts-s-surface-soft);
    border-color: var(--ielts-s-border-strong);
}

.ielts-theme-toggle[aria-expanded="true"] {
    border-color: var(--ielts-s-focus);
    box-shadow: var(--ielts-c-focus-ring);
}

/* Preserve the pre-S2-B class contract while removing its old orange styling. */
.ielts-theme-toggle {
    width: 36px;
}

.ielts-main {
    width: 100%;
    margin: 0;
    padding: 30px 32px 72px;
}

.ielts-page-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
}

.ielts-page-head__icon {
    width: 56px;
    height: 56px;
    border-radius: 13px;
    background: var(--ielts-panel);
    color: var(--ielts-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ielts-platform--listening .ielts-page-head__icon { color: var(--ielts-amber); }
.ielts-platform--reading .ielts-page-head__icon { color: var(--ielts-green); }
.ielts-platform--writing .ielts-page-head__icon { color: var(--ielts-blue); }
.ielts-platform--speaking .ielts-page-head__icon { color: var(--ielts-rose); }
.ielts-platform--mock .ielts-page-head__icon { color: var(--ielts-teal); }

.ielts-page-head h1 {
    margin: 0;
    color: var(--ielts-text);
    font-size: clamp(1.8rem, 2.15vw, 2.22rem);
    line-height: 1.1;
    font-weight: 900;
}

.ielts-page-head p {
    margin: 8px 0 0;
    color: var(--ielts-muted);
    font-size: 1rem;
}

.ielts-hero-card {
    min-height: 184px;
    border-radius: var(--ielts-p-radius-lg);
    border: 1px solid var(--ielts-border);
    background:
        radial-gradient(circle at 96% 110%, rgba(239, 75, 63, 0.20), transparent 38%),
        linear-gradient(152deg, var(--ielts-s-surface-raised), var(--ielts-s-surface));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 34px 38px;
    margin-bottom: 44px;
}

.ielts-theme-light .ielts-hero-card {
    background:
        radial-gradient(circle at 96% 110%, rgba(239, 75, 63, 0.13), transparent 38%),
        linear-gradient(152deg, #ffffff, #f1f3f6);
    box-shadow: var(--ielts-p-shadow-light);
}

.ielts-hero-card__copy {
    max-width: 980px;
}

.ielts-offer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ielts-soft);
    color: var(--ielts-text);
    border-radius: 999px;
    padding: 7px 14px;
    font-weight: 800;
    margin-bottom: 18px;
}

.ielts-hero-card h2 {
    color: var(--ielts-text);
    max-width: 980px;
    font-size: var(--ielts-s-type-hero);
    line-height: 1.15;
    margin: 0;
}

.ielts-hero-card__copy > p {
    max-width: 760px;
    margin: 14px 0 0;
    color: var(--ielts-muted);
    font-size: var(--ielts-s-type-body);
    line-height: 1.55;
}

.ielts-hero-card__action {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ielts-section {
    margin-top: 42px;
}

.ielts-section__title {
    color: var(--ielts-text);
    font-size: var(--ielts-s-type-section);
    margin: 0;
    font-weight: 750;
}

.ielts-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.ielts-section__head--home {
    margin-bottom: 18px;
}

.ielts-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--ielts-muted);
    background: var(--ielts-soft);
    font-size: 12px;
    font-weight: 700;
}

.ielts-home-grid,
.ielts-pack-grid,
.ielts-practice-grid,
.ielts-mock-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ielts-home-grid--courses {
    grid-template-columns: repeat(auto-fit, minmax(320px, 360px));
}

.ielts-home-card,
.ielts-pack-card,
.ielts-wide-card,
.ielts-mock-feature,
.ielts-mock-row,
.ielts-filter-card,
.ielts-empty-state,
.ielts-history-card {
    background: var(--ielts-panel);
    border: 1px solid var(--ielts-border);
    border-radius: var(--ielts-p-radius-lg);
}

.ielts-theme-light .ielts-home-card,
.ielts-theme-light .ielts-pack-card,
.ielts-theme-light .ielts-wide-card,
.ielts-theme-light .ielts-mock-feature,
.ielts-theme-light .ielts-mock-row,
.ielts-theme-light .ielts-filter-card,
.ielts-theme-light .ielts-empty-state,
.ielts-theme-light .ielts-history-card {
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.06);
}

.ielts-home-card {
    padding: 22px 24px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: default;
    transition: border-color var(--ielts-p-motion-fast) var(--ielts-p-ease), background var(--ielts-p-motion-fast) var(--ielts-p-ease), box-shadow var(--ielts-p-motion-fast) var(--ielts-p-ease);
}

.ielts-home-card--locked {
    cursor: default;
    opacity: 0.72;
    border-style: dashed;
}

.ielts-home-card:has(a:hover),
.ielts-home-card:has(a:focus-visible) {
    border-color: var(--ielts-s-border-strong);
    background: var(--ielts-panel-2);
}

.ielts-home-card__top,
.ielts-home-card__footer,
.ielts-pack-card__footer,
.ielts-wide-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.ielts-home-card__top {
    justify-content: flex-start;
    gap: 14px;
}

.ielts-home-card__top > div {
    min-width: 0;
}

.ielts-home-card__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: var(--ielts-p-radius-md);
    background: var(--ielts-soft);
}

.ielts-home-card__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--ielts-muted) !important;
    font-size: var(--ielts-s-type-caption);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ielts-home-card__top h3,
.ielts-pack-card h3,
.ielts-wide-card h3,
.ielts-mock-row h3,
.ielts-mock-feature h3,
.ielts-history-card strong {
    color: var(--ielts-text);
    margin: 0;
    font-size: var(--ielts-s-type-title);
    font-weight: 750;
}

.ielts-home-card p,
.ielts-pack-card p,
.ielts-wide-card p,
.ielts-mock-feature p,
.ielts-mock-row p {
    color: var(--ielts-muted);
    margin: 0;
    font-size: var(--ielts-s-type-body);
    line-height: 1.55;
}

.ielts-home-card--amber .ielts-home-card__icon { color: var(--ielts-amber); }
.ielts-home-card--green .ielts-home-card__icon { color: var(--ielts-green); }
.ielts-home-card--blue .ielts-home-card__icon { color: var(--ielts-blue); }
.ielts-home-card--rose .ielts-home-card__icon { color: var(--ielts-rose); }

.ielts-chip-row,
.ielts-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ielts-chip,
.ielts-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    border-radius: 7px;
    padding: 3px 10px;
    background: var(--ielts-soft);
    color: var(--ielts-text);
    font-weight: 800;
    border: 0;
}

.ielts-tag--success { color: #16A34A; }
.ielts-tag--warning { color: #D97706; }

.ielts-outline-btn {
    color: var(--ielts-text);
    border-color: var(--ielts-border);
    background: transparent;
    font-weight: 900;
}

.ielts-outline-btn--compact {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 0.82rem;
}

.ielts-solid-btn,
.ielts-search-btn {
    background: #FFFFFF;
    color: #111827;
    border-color: #FFFFFF;
    font-weight: 900;
}

.ielts-theme-light .ielts-solid-btn,
.ielts-theme-light .ielts-search-btn {
    background: #111827;
    color: #FFFFFF;
    border-color: #111827;
}

.ielts-wide-card {
    padding: 30px 28px;
}

.ielts-catalog {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ielts-filter-card {
    padding: 16px;
}

.ielts-search-row {
    display: grid;
    grid-template-columns: 1fr 152px;
    gap: 10px;
    margin-bottom: 20px;
}

.ielts-search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    border-radius: 8px;
    border: 1px solid var(--ielts-border);
    background: rgba(0, 0, 0, 0.08);
    color: var(--ielts-muted);
    padding: 0 16px;
}

.ielts-theme-light .ielts-search {
    background: #FFFFFF;
}

.ielts-search input {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ielts-text);
    width: 100%;
    font: inherit;
}

.ielts-filter-row,
.ielts-selected-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ielts-selected-filters:not(:empty) {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--ielts-border);
}

.ielts-filter-menu {
    position: relative;
}

.ielts-filter-menu summary {
    list-style: none;
    min-width: 136px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--ielts-border);
    background: rgba(0, 0, 0, 0.08);
    color: var(--ielts-text);
    border-radius: 8px;
    padding: 0 16px;
    cursor: pointer;
    font-weight: 800;
}

.ielts-theme-light .ielts-filter-menu summary {
    background: #FFFFFF;
}

.ielts-filter-menu summary::-webkit-details-marker {
    display: none;
}

.ielts-filter-menu__body {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 45;
    min-width: 180px;
    max-height: 480px;
    overflow: auto;
    padding: 8px;
    background: var(--ielts-panel);
    border: 1px solid var(--ielts-border);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.ielts-filter-menu--wide .ielts-filter-menu__body {
    min-width: 550px;
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.ielts-filter-menu__body button {
    width: 100%;
    min-height: 38px;
    border: 0;
    background: transparent;
    color: var(--ielts-text);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.ielts-filter-menu__body button:hover {
    background: var(--ielts-soft);
}

.ielts-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid var(--ielts-muted);
    flex-shrink: 0;
}

.ielts-clear-btn {
    background: transparent;
    color: var(--ielts-muted);
    font-weight: 800;
}

.ielts-catalog__count {
    color: var(--ielts-muted);
    font-size: 1rem;
}

.ielts-results {
    min-height: 220px;
}

.ielts-pack-group {
    margin-bottom: 42px;
}

.ielts-pack-group__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ielts-pack-group__head h2 {
    color: var(--ielts-text);
    margin: 0;
    font-size: 1.45rem;
}

.ielts-pack-group__head span {
    color: var(--ielts-muted);
}

.ielts-pack-card {
    min-height: 198px;
    padding: 26px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ielts-part-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    border-radius: 7px;
    padding: 2px 12px;
    font-size: 0.78rem;
    font-weight: 900;
}

.ielts-pack-card__desc {
    margin-top: 16px !important;
}

.ielts-practice-card {
    overflow: hidden;
    background: var(--ielts-panel);
    border: 1px solid var(--ielts-border);
    border-radius: 14px;
}

.ielts-practice-card__visual {
    min-height: 366px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #9A4A14 0%, #79530B 100%);
}

.ielts-practice-card--reading .ielts-practice-card__visual { background: linear-gradient(135deg, #13733C 0%, #135D55 100%); }
.ielts-practice-card--writing .ielts-practice-card__visual { background: linear-gradient(135deg, #2854B7 0%, #4B248D 100%); }
.ielts-practice-card--speaking .ielts-practice-card__visual { background: linear-gradient(135deg, #A12055 0%, #8A1C22 100%); }

.ielts-part-badge {
    position: absolute;
    right: 16px;
    top: 16px;
    background: rgba(0, 0, 0, 0.72);
    color: #FFFFFF;
}

.ielts-practice-card__center {
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ielts-practice-card__body {
    padding: 26px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ielts-practice-card__body h3 {
    margin: 0;
    color: var(--ielts-text);
    font-size: 1.08rem;
    line-height: 1.35;
}

.ielts-practice-card__body p {
    margin: 0;
    color: var(--ielts-muted);
}

.ielts-practice-card__body .ielts-solid-btn,
.ielts-practice-card__body .ielts-outline-btn {
    width: 100%;
    margin-top: auto;
}

.ielts-entry-results--practice.ielts-entry-results--grid {
    align-items: stretch;
}

.ielts-entry-results--practice .ielts-practice-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ielts-entry-results--practice .ielts-practice-card__body {
    flex: 1;
}

.ielts-entry-results--practice .ielts-entry-card__actions {
    margin-top: auto;
}

.ielts-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    color: var(--ielts-text);
    padding: 10px 0 0;
}

.ielts-pagination button:disabled {
    opacity: 0.45;
    cursor: default;
}

.ielts-empty-state {
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: var(--ielts-muted);
}

.ielts-empty-state h3 {
    color: var(--ielts-text);
    margin: 0;
    font-size: 1.55rem;
}

.ielts-mock-features {
    margin-bottom: 52px;
}

.ielts-mock-feature {
    min-height: 208px;
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.ielts-mock-feature:nth-child(1) div { color: #E5E7EB; }
.ielts-mock-feature:nth-child(2) div { color: var(--ielts-amber); }
.ielts-mock-feature:nth-child(3) div { color: var(--ielts-green); }

.ielts-tabs {
    display: inline-flex;
    padding: 6px;
    border-radius: 10px;
    background: var(--ielts-soft);
}

.ielts-tab {
    background: transparent;
    color: var(--ielts-muted);
    border: 0;
    font-weight: 900;
}

.ielts-tab--active {
    background: var(--ielts-panel);
    color: var(--ielts-text);
}

.ielts-mock-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ielts-mock-row {
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ielts-mock-row__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.ielts-mock-row__time {
    margin-top: 16px !important;
}

.ielts-history-panel {
    margin-top: 36px;
}

.ielts-history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.ielts-history-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ielts-muted);
}

.ielts-performance {
    color: var(--ielts-text);
}

.ielts-performance .performance-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.ielts-performance .performance-summary-card,
.ielts-performance .attempt-card,
.ielts-performance .performance-table-wrap {
    background: var(--ielts-panel);
    border: 1px solid var(--ielts-border);
    box-shadow: none;
}

.ielts-performance .performance-summary-card {
    min-height: 132px;
    padding: 22px;
    border-radius: 12px;
    text-align: left;
}

.ielts-performance .performance-summary-card:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.18);
}

.ielts-theme-light .ielts-performance .performance-summary-card:hover {
    border-color: #C9D2E0;
}

.ielts-performance .performance-summary-card__icon {
    width: 42px;
    height: 42px;
    margin: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--ielts-green);
    background: var(--ielts-soft);
}

.ielts-performance .performance-summary-card__value,
.ielts-performance .performance-summary-card__label,
.ielts-performance .attempt-card__header h3,
.ielts-performance .attempt-section__name {
    color: var(--ielts-text);
}

.ielts-performance .performance-summary-card__value {
    font-size: 1.65rem;
}

.ielts-performance .performance-summary-card__label,
.ielts-performance .text-muted,
.ielts-performance .attempt-section__details {
    color: var(--ielts-muted) !important;
}

.ielts-performance .attempt-card {
    border-radius: 12px;
}

.ielts-performance .attempt-card__header {
    padding: 18px 20px;
    background: var(--ielts-panel-2);
    border-bottom-color: var(--ielts-border);
}

.ielts-performance .attempt-section {
    padding: 14px 20px;
    border-bottom-color: var(--ielts-border);
}

.ielts-performance .attempt-section__comment {
    color: var(--ielts-text);
    background: var(--ielts-soft);
    border-left-color: var(--ielts-green);
}

.performance-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.performance-analytics-grid > .attempt-card,
.performance-review-summary {
    margin: 0;
}

.performance-review-summary {
    grid-column: 1 / -1;
}

.performance-review-summary__body {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 20px;
    color: var(--ielts-muted);
}

.ielts-performance .badge {
    border: 1px solid var(--ielts-border);
}

.ielts-performance .performance-table-wrap {
    border-radius: 12px;
}

.ielts-performance .performance-table {
    color: var(--ielts-text);
}

.ielts-performance .performance-table th {
    color: var(--ielts-muted);
    background: var(--ielts-panel-2);
    border-bottom-color: var(--ielts-border);
}

.ielts-performance .performance-table td {
    border-bottom-color: var(--ielts-border);
}

.ielts-performance .performance-table tbody tr:hover {
    background: var(--ielts-soft);
}

.performance-history-controls {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 22px;
    margin: 26px 0 16px;
    padding: 20px;
    color: var(--ielts-text);
    background: var(--ielts-panel);
    border: 1px solid var(--ielts-border);
    border-radius: 12px;
}
.performance-history-controls h2 { margin: 0; font-size: 1.2rem; }
.performance-history-controls p { margin: 5px 0 0; color: var(--ielts-muted); font-size: .87rem; line-height: 1.45; }
.performance-history-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.performance-history-filters label { display: grid; gap: 5px; min-width: 145px; color: var(--ielts-muted); font-size: .72rem; font-weight: 700; }
.performance-history-filters select {
    min-height: 42px;
    padding: 0 34px 0 12px;
    color: var(--ielts-text);
    background: var(--ielts-panel-2);
    border: 1px solid var(--ielts-border);
    border-radius: 9px;
}
.performance-history-filters select:focus-visible,
.performance-pagination button:focus-visible,
.performance-history-item a:focus-visible,
.performance-history-item button:focus-visible {
    outline: 3px solid var(--ielts-focus, #ffbf47);
    outline-offset: 3px;
}
.performance-history-list { display: grid; gap: 12px; }
.performance-history-item { margin: 0; overflow: hidden; }
.performance-history-item__eyebrow { display: block; margin-bottom: 4px; color: var(--ielts-green); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.performance-history-item__state { display: flex; align-items: center; gap: 10px; }
.performance-history-item__state time { color: var(--ielts-muted); font-size: .82rem; }
.performance-history-item__details { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 15px 20px; color: var(--ielts-muted); font-size: .9rem; }
.performance-history-item__details strong { color: var(--ielts-text); }
.performance-history-item__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.performance-history-item > .attempt-section__comment { margin: 0 20px 16px; }
.performance-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 22px 0 4px; color: var(--ielts-muted); }
.performance-pagination button { display: inline-flex; align-items: center; gap: 6px; }
.performance-history-empty { margin-top: 16px; }

.ielts-solid-btn:disabled,
.ielts-outline-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 1280px) {
    .lk-shell--ielts {
        grid-template-columns: var(--ielts-c-sidebar-width) minmax(0, 1fr);
    }
    .lk-shell--ielts.lk-shell--collapsed {
        grid-template-columns: var(--ielts-c-sidebar-rail-width) minmax(0, 1fr);
    }
    .ielts-home-grid,
    .ielts-pack-grid,
    .ielts-practice-grid,
    .ielts-mock-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .lk-shell--ielts {
        grid-template-areas:
            "main";
        grid-template-columns: 1fr;
    }
    .lk-shell--ielts .ielts-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(var(--ielts-c-sidebar-width), calc(100vw - 48px));
        transform: translateX(-100%);
        box-shadow: none;
    }
    .lk-shell--ielts .ielts-sidebar.lk-sidebar--open {
        transform: translateX(0);
        box-shadow: 14px 0 42px rgba(0, 0, 0, 0.36);
    }
    .lk-shell--ielts.lk-shell--collapsed .ielts-sidebar {
        width: min(var(--ielts-c-sidebar-width), calc(100vw - 48px));
    }
    .lk-shell--ielts.lk-shell--collapsed .ielts-sidebar__brand > div,
    .lk-shell--ielts.lk-shell--collapsed .ielts-back-to-lk .lk-nav-text,
    .lk-shell--ielts.lk-shell--collapsed .ielts-nav-lock,
    .lk-shell--ielts.lk-shell--collapsed .lk-nav-text,
    .lk-shell--ielts.lk-shell--collapsed .ielts-sidebar__group-label {
        display: block;
    }
    .lk-shell--ielts.lk-shell--collapsed .lk-nav-text {
        flex: 1;
    }
    .lk-shell--ielts.lk-shell--collapsed .lk-nav-badge {
        display: inline-flex;
    }
    .lk-shell--ielts.lk-shell--collapsed .ielts-sidebar__brand {
        justify-content: flex-start;
        padding: 0 6px 13px;
    }
    .lk-shell--ielts.lk-shell--collapsed .ielts-back-to-lk,
    .lk-shell--ielts.lk-shell--collapsed .lk-nav-item,
    .lk-shell--ielts.lk-shell--collapsed .lk-nav-item--logout {
        width: calc(100% - 1rem);
        min-height: 42px;
        height: auto;
        margin: 1px 0.5rem;
        padding: 0 10px;
        justify-content: flex-start;
        gap: 0.75rem;
    }
    .lk-shell--ielts.lk-shell--collapsed .ielts-back-to-lk {
        width: 100%;
        margin: 0 0 22px;
    }
    .ielts-main {
        padding: 22px 16px 54px;
    }
    .ielts-breadcrumb {
        min-height: 60px;
        padding: 0 14px;
        gap: 10px;
    }
    .ielts-search-row {
        grid-template-columns: 1fr;
    }
    .ielts-home-grid,
    .ielts-pack-grid,
    .ielts-practice-grid,
    .ielts-mock-features {
        grid-template-columns: 1fr;
    }
    .ielts-performance .performance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ielts-performance .performance-table-wrap {
        display: block;
        overflow-x: auto;
    }
    .performance-history-controls { align-items: stretch; flex-direction: column; }
    .performance-history-filters { justify-content: stretch; }
    .performance-history-filters label { flex: 1 1 180px; }
    .ielts-hero-card,
    .ielts-wide-card,
    .ielts-mock-row {
        flex-direction: column;
        align-items: stretch;
    }
    .ielts-hero-card__action {
        align-self: flex-start;
    }
    .ielts-filter-menu--wide .ielts-filter-menu__body {
        min-width: min(88vw, 360px);
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .ielts-breadcrumb > a,
    .ielts-breadcrumb > strong,
    .ielts-breadcrumb > span:not(.ielts-breadcrumb__separator) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ielts-breadcrumb__separator {
        display: none;
    }
    .ielts-main {
        padding: 18px 14px 48px;
    }
    .ielts-hero-card {
        min-height: 0;
        padding: 24px 20px;
        margin-bottom: 34px;
    }
    .ielts-offer-badge {
        align-items: flex-start;
        margin-bottom: 14px;
    }
    .ielts-hero-card h2 {
        font-size: clamp(1.55rem, 8vw, 2rem);
    }
    .ielts-home-card {
        min-height: 0;
        padding: 20px;
    }
    .ielts-home-card__footer,
    .ielts-wide-card {
        align-items: stretch;
        flex-direction: column;
    }
    .ielts-home-card__footer .ielts-outline-btn,
    .ielts-wide-card > .ielts-outline-btn {
        width: 100%;
    }
    .ielts-preferences-menu {
        position: fixed;
        top: 68px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

@media (max-width: 900px) {
    .performance-analytics-grid { grid-template-columns: 1fr; }
    .performance-review-summary { grid-column: auto; }
    .performance-review-summary__body { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .body--ielts *,
    .body--ielts *::before,
    .body--ielts *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   IELTS computer-based exam shell — reference parity pass
   Student LK only. No admin selectors.
   ========================================================= */

body.exam-theme-light,
body.exam-theme-dark {
    overflow: hidden;
    background: #ffffff;
}

body.exam-theme-dark {
    background: #1d2020;
}

.exam-shell {
    --exam-bg: #ffffff;
    --exam-panel: #ffffff;
    --exam-panel-soft: #f2f3ef;
    --exam-panel-strong: #eef2f7;
    --exam-text: #101827;
    --exam-muted: #58677e;
    --exam-border: #b8c1cf;
    --exam-border-soft: #d7dee8;
    --exam-primary: #0f172a;
    --exam-focus: #1677ff;
    --exam-danger: #ef3340;
    --exam-success: #0f9f67;
    --exam-warning: #e6a700;
    --exam-control-hover: #d8dee7;
    width: 100%;
    min-height: 100vh;
    color: var(--exam-text);
    background: var(--exam-bg);
    font-family: Arial, Helvetica, sans-serif;
}

.exam-theme-dark .exam-shell,
.exam-theme-dark .exam-prestart {
    --exam-bg: #1d2020;
    --exam-panel: #1d2020;
    --exam-panel-soft: #303535;
    --exam-panel-strong: #252929;
    --exam-text: #f5f6f7;
    --exam-muted: #b8bdb9;
    --exam-border: #65707d;
    --exam-border-soft: #343a3a;
    --exam-primary: #f0f1f2;
    --exam-focus: #2f80ff;
    --exam-control-hover: #636969;
    background: var(--exam-bg);
    color: var(--exam-text);
}

.exam-text-large .exam-shell {
    font-size: 18px;
}

.exam-text-extra-large .exam-shell {
    font-size: 21px;
}

.exam-topbar {
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto minmax(360px, 1fr);
    align-items: center;
    gap: 18px;
    padding: 0 18px 0 20px;
    border-bottom: 1px solid var(--exam-border);
    background: var(--exam-panel);
    color: var(--exam-text);
    z-index: 80;
}

.exam-topbar__identity,
.exam-topbar__actions,
.exam-topbar__audio,
.exam-prestart__brand {
    display: flex;
    align-items: center;
}

.exam-topbar__identity {
    gap: 10px;
    min-width: 0;
}

.exam-topbar__identity img,
.exam-prestart__brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.exam-topbar__identity strong {
    display: none;
}

.exam-topbar__identity span {
    margin-left: 4px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exam-topbar__timer {
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.exam-topbar__actions {
    justify-content: flex-end;
    gap: 10px;
}

.exam-topbar__audio {
    min-width: 0;
}

.exam-icon-btn,
.exam-submit-btn,
.exam-start-btn,
.exam-primary-btn,
.exam-secondary-btn {
    min-height: 34px;
    border: 1px solid var(--exam-border);
    border-radius: 6px;
    background: var(--exam-panel-strong);
    color: var(--exam-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.exam-icon-btn {
    width: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.exam-submit-btn {
    min-width: 96px;
    padding: 0 20px;
    background: var(--exam-panel-strong);
}

.exam-icon-btn:hover,
.exam-submit-btn:hover,
.exam-secondary-btn:hover {
    border-color: var(--exam-focus);
}

.exam-part-banner {
    min-height: 92px;
    margin: 15px 20px 15px;
    padding: 18px 16px;
    flex: 0 0 auto;
    border: 1px solid var(--exam-border);
    border-radius: 5px;
    background: var(--exam-panel-soft);
    color: var(--exam-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    font-size: 20px;
    line-height: 1.25;
}

.exam-part-banner strong {
    font-size: 20px;
}

.test-layout.exam-shell,
.writing-layout.exam-shell,
.exam-result-layout,
.exam-review-layout {
    display: flex;
    height: 100vh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.exam-result-layout > .exam-topbar {
    height: 70px;
    flex-basis: 70px;
}

.exam-review-layout > .exam-topbar {
    height: 56px;
    flex-basis: 56px;
}

.exam-result-layout [data-exam-settings],
.exam-result-layout .exam-submit-btn {
    display: none;
}

/* Speaking Results uses this header action as read-only navigation, not submit. */
.exam-result-layout.speaking-result-shell #speakingResultTopFinish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.exam-result-layout > .exam-topbar {
    position: relative;
    grid-template-columns: 1fr auto;
    align-items: start;
}

.exam-result-layout > .exam-topbar .exam-topbar__identity {
    align-items: flex-start;
    padding-top: 11px;
}

.exam-result-layout > .exam-topbar .exam-topbar__identity img {
    width: 44px;
    height: 44px;
}

.exam-result-layout > .exam-topbar .exam-topbar__identity span {
    margin-top: 3px;
}

.exam-result-layout > .exam-topbar .exam-topbar__timer {
    position: absolute;
    top: 39px;
    left: 85px;
    color: #ff3131;
}

.exam-result-layout > .exam-topbar .exam-topbar__actions {
    grid-column: 2;
    align-self: center;
}
.exam-result-layout > .exam-topbar .exam-topbar__actions > [data-exam-fullscreen] { order: 1; }
.exam-result-layout > .exam-topbar .exam-topbar__actions > .exam-topbar__audio { order: 2; }

@media (min-width: 901px) {
    .exam-result-layout.speaking-result-shell > .exam-topbar {
        height: 56px;
        flex-basis: 56px;
    }
}

.test-layout.exam-shell .test-phase-label {
    position: fixed;
    top: 58px;
    left: 50%;
    z-index: 81;
    transform: translateX(-50%);
    color: var(--exam-muted);
    font-size: 12px;
}

/* Listening already exposes the current audio/review state in the top bar.
   Keep the phase live region available to assistive technology without
   rendering the same state as a second visual strip below the top bar. */
.test-layout--listening.exam-shell .test-phase-label {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.test-layout.exam-shell .part-tabs {
    display: none !important;
}

.test-layout.exam-shell .split-screen {
    min-height: 0;
    flex: 1;
    padding: 0 0 64px !important;
    background: var(--exam-bg);
    color: var(--exam-text);
}

.test-layout.exam-shell .split-pane {
    width: 50%;
    padding: 20px 25px 40px;
    overflow-x: hidden;
    overflow-y: scroll;
    background: var(--exam-panel);
    color: var(--exam-text);
    scrollbar-color: #7b7c7c #f4f4f4;
    scrollbar-width: auto;
}

.test-layout.exam-shell .split-pane::-webkit-scrollbar {
    width: 20px;
}

.test-layout.exam-shell .split-pane::-webkit-scrollbar-track {
    background: #f4f4f4;
}

.test-layout.exam-shell .split-pane::-webkit-scrollbar-thumb {
    border: 4px solid #f4f4f4;
    border-radius: 999px;
    background: #7b7c7c;
}

.test-layout.exam-shell .split-resizer,
.exam-review-resizer {
    width: 4px;
    position: relative;
    background: var(--exam-border);
    box-shadow: none;
}

.test-layout.exam-shell .split-resizer::after,
.exam-review-resizer::after {
    content: "⋮";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 999px;
    background: #4285f4;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    z-index: 5;
}

.test-layout.exam-shell .passage-content,
.test-layout.exam-shell .questions-content {
    color: var(--exam-text);
    font-size: 20px;
    line-height: 1.52;
}

.test-layout.exam-shell .passage-content {
    max-width: 880px;
    margin: 0 auto;
}

.test-layout.exam-shell .passage-content h1,
.test-layout.exam-shell .passage-content h2,
.test-layout.exam-shell .passage-content h3 {
    color: var(--exam-text);
    text-align: center;
    margin: 22px 0;
}

.test-layout.exam-shell .passage-content h2 + p:has(> em:only-child) {
    margin: -8px 0 27px;
    text-align: center;
}

.test-layout.exam-shell .passage-content p > strong:first-child {
    display: inline-block;
    width: 25px;
    margin-left: -8px;
}

.test-layout.exam-shell .question-block {
    padding: 12px 0 28px;
    border: 0;
    border-bottom: 1px solid var(--exam-border-soft);
    border-radius: 0;
    background: transparent;
    color: var(--exam-text);
}

.test-layout.exam-shell .question-block:first-child { padding-top: 30px; }

.test-layout.exam-shell .question-block--boolean {
    position: relative;
    padding-bottom: 8px;
}

.test-layout.exam-shell .question-block--boolean:not(:first-child) { padding-top: 39px; }

.test-layout.exam-shell .question-block--boolean > .q-number-row {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 1;
    margin: 0;
}

.test-layout.exam-shell .question-block--boolean:not(:first-child) > .q-number-row { top: 39px; }
.test-layout.exam-shell .question-block--boolean > .q-number-row .q-number { display: none; }

.test-layout.exam-shell .question-block--inline-summary {
    padding: 18px 0 32px;
    border-bottom: 1px solid var(--exam-border);
}

.test-layout.exam-shell .question-block--inline-summary .question-group-context {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

.test-layout.exam-shell .question-block--inline-summary:has(.q-summary-word-bank) {
    display: flex;
    flex-direction: column;
}

.test-layout.exam-shell .question-block--inline-summary:has(.q-summary-word-bank) .question-group-context {
    display: contents;
}

.test-layout.exam-shell .question-block--inline-summary:has(.q-summary-word-bank) .question-group-context > :not(.q-summary-word-bank) {
    order: 1;
}

.test-layout.exam-shell .question-block--inline-summary:has(.q-summary-word-bank) .q-inline-summary {
    order: 2;
}

.test-layout.exam-shell .q-summary-word-bank {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.test-layout.exam-shell .q-summary-word-bank span {
    padding: 5px 12px;
    border: 1px solid var(--exam-border);
    border-radius: 6px;
    background: var(--exam-panel-soft);
    line-height: 1;
}

.test-layout.exam-shell .q-inline-summary {
    color: var(--exam-text);
    font-size: 20px;
    line-height: 1.8;
}

.test-layout.exam-shell .q-inline-summary__segment {
    display: inline;
}

.test-layout.exam-shell .q-inline-summary__input {
    display: inline-block;
    width: clamp(180px, 24vw, 270px);
    height: 34px;
    margin: 0 10px;
    padding: 4px 12px;
    vertical-align: middle;
    text-align: left;
}

.test-layout.exam-shell .q-inline-summary__segment:focus-visible {
    outline: 3px solid var(--exam-focus);
    outline-offset: 4px;
}

.test-layout.exam-shell .q-boolean-question {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding-right: 54px;
}

.test-layout.exam-shell .q-boolean-question__number {
    color: var(--exam-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.test-layout.exam-shell .q-options.q-options--boolean {
    gap: 21px;
    margin-top: 26px;
}

.test-layout.exam-shell .questions-content {
    gap: 8px;
    padding-bottom: 45vh;
}

.test-layout.exam-shell .q-number-row {
    align-items: center;
    margin-bottom: 12px;
}

.test-layout.exam-shell .q-number {
    width: auto;
    margin: 0;
    color: var(--exam-text);
    font-weight: 700;
}

.test-layout.exam-shell .q-report-btn {
    display: none;
}

.test-layout.exam-shell .q-flag-btn:not(.flagged) {
    opacity: 0;
}

.test-layout.exam-shell .question-block:hover .q-flag-btn,
.test-layout.exam-shell .q-flag-btn:focus-visible,
.test-layout.exam-shell .q-flag-btn.flagged {
    opacity: 1;
    border-color: transparent;
    background: transparent;
    color: var(--exam-text);
}

.test-layout.exam-shell .q-flagged {
    border-color: var(--exam-border-soft) !important;
    background: transparent !important;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 46px;
    column-gap: 10px;
    align-items: start;
    padding: 22px 4px 20px;
    border-bottom-color: transparent;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) > .q-number-row {
    display: contents;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) > .q-number-row .q-number {
    grid-column: 1;
    grid-row: 1;
    padding-top: 1px;
    font-size: 20px;
    line-height: 1.5;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) > .q-number-row .q-tools {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) > .q-number-row .q-report-btn {
    display: none;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) > .q-content {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) > :not(.q-number-row):not(.q-content) {
    grid-column: 1 / -1;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) > .q-options {
    gap: 0;
    margin-top: 16px;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) > .q-options .radio-label {
    min-height: 52px;
    padding: 8px 5px;
    border-radius: 3px;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) > .q-options .radio-label input {
    margin: 0;
}

.test-layout--listening.exam-shell .question-block:not(.question-block--inline-summary) > .q-options .radio-label:has(input:checked) {
    background: color-mix(in srgb, #050606 58%, var(--exam-panel));
}

.test-layout.exam-shell .q-content {
    color: var(--exam-text);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.test-layout.exam-shell .questions-content h1,
.test-layout.exam-shell .questions-content h2,
.test-layout.exam-shell .questions-content h3 {
    color: var(--exam-text);
}

.test-layout.exam-shell .q-content table {
    width: 100%;
    border-collapse: collapse;
    color: var(--exam-text);
}

.test-layout.exam-shell .q-content td,
.test-layout.exam-shell .q-content th {
    border: 1px solid var(--exam-border);
    padding: 14px;
}

.test-layout.exam-shell input.ui-answer-input {
    width: min(100%, 370px);
    min-height: 31px;
    display: block;
    margin: 10px auto 0;
    padding: 4px 12px;
    border: 1px solid var(--exam-border);
    border-radius: 5px;
    background: var(--exam-panel);
    color: var(--exam-text);
    font: inherit;
    font-weight: 700;
    text-align: center;
}

.test-layout.exam-shell .q-content--inline input.ui-answer-input {
    width: clamp(160px, 34%, 370px);
    display: inline-block;
    margin: 3px 8px;
    vertical-align: middle;
}

.test-layout.exam-shell input.q-inline-summary__input.ui-answer-input {
    width: clamp(180px, 24vw, 270px);
    height: 34px;
    min-height: 34px;
    display: inline-block;
    margin: 0 10px;
    padding: 4px 12px;
    vertical-align: middle;
    text-align: left;
}

.test-layout.exam-shell input.ui-answer-input:focus {
    border-color: #00a6e8;
    box-shadow: 0 0 0 2px rgba(0, 166, 232, 0.25);
}

.test-layout.exam-shell .q-options {
    gap: 14px;
}

.test-layout.exam-shell .radio-label {
    min-height: 34px;
    align-items: center;
    gap: 10px;
    color: var(--exam-text);
    font-size: 19px;
}

.test-layout.exam-shell .radio-label input {
    width: 20px;
    height: 20px;
    accent-color: var(--exam-focus);
}

.test-layout--listening .left-pane,
.test-layout--listening .split-resizer {
    display: none;
}

.test-layout--listening .right-pane {
    width: 100% !important;
}

.test-layout--listening .questions-content {
    width: 100%;
    max-width: 1560px;
}

.test-layout--listening.test-layout--real .exam-audio-player--compact {
    width: auto;
    min-width: 0;
    gap: 10px;
    padding: 0;
}

.test-layout--listening.test-layout--real .exam-audio-player--compact .audio-progress-bar {
    display: none;
}

.test-layout--listening.test-layout--real .exam-audio-player--compact .audio-volume {
    order: 1;
    flex: 0 0 auto;
}

.test-layout--listening.test-layout--real .exam-audio-player--compact .volume-slider {
    width: 1px;
    min-width: 1px;
    opacity: 0;
}

.test-layout--listening.test-layout--real .exam-audio-player__status:not(:empty) {
    position: static;
    order: 2;
    width: auto;
    max-width: none;
    padding: 0;
    transform: none;
    border: 0;
    background: transparent;
    color: var(--exam-text);
    font-weight: 700;
    white-space: nowrap;
}

.exam-audio-toggle[hidden] {
    display: none !important;
}

.test-layout--listening.test-layout--real .exam-audio-player--compact .audio-volume:focus-within .volume-slider,
.test-layout--listening.test-layout--real .exam-audio-player--compact .audio-volume:hover .volume-slider {
    width: min(82px, 9vw);
    min-width: 54px;
    opacity: 1;
}

.exam-audio-player--compact {
    width: min(360px, 30vw);
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    border-radius: 6px;
    background: transparent;
}

.exam-audio-toggle {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--exam-text);
    cursor: pointer;
}

.exam-audio-player--compact .audio-progress-bar {
    width: 120px;
    height: 7px;
    margin: 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--exam-border-soft);
}

.exam-audio-player--compact .audio-progress-fill {
    height: 100%;
    background: var(--exam-focus);
}

.exam-audio-player--compact .audio-volume {
    display: flex;
    align-items: center;
    gap: 5px;
}

.exam-audio-player--compact .volume-slider {
    width: 90px;
}

/* Bottom question and task navigation */
.test-layout.exam-shell .question-nav,
.writing-layout.exam-shell .writing-task-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    z-index: 85;
    display: flex !important;
    align-items: center;
    padding: 0 106px 0 20px;
    border-top: 2px solid var(--exam-border);
    background: var(--exam-panel);
    color: var(--exam-text);
}

.test-layout.exam-shell .question-nav {
    gap: 7px;
    padding-right: 210px;
}

.test-layout.exam-shell > .exam-topbar {
    position: relative;
    height: 56px;
    flex-basis: 56px;
    grid-template-columns: minmax(260px, 1fr) auto minmax(360px, 1fr);
    align-items: center;
}

.test-layout--real.exam-shell > .exam-topbar {
    height: 60px;
    flex-basis: 60px;
    grid-template-columns: 1fr auto;
    align-items: start;
}

.test-layout--real.exam-shell > .exam-topbar .exam-topbar__identity {
    align-items: flex-start;
    padding-top: 7px;
}

.test-layout--real.exam-shell > .exam-topbar .exam-topbar__identity img {
    width: 44px;
    height: 44px;
}

.test-layout--real.exam-shell > .exam-topbar .exam-topbar__identity span {
    margin-top: 3px;
}

.test-layout--real.exam-shell > .exam-topbar .exam-topbar__timer {
    position: absolute;
    top: 34px;
    left: 85px;
}

.test-layout--real.exam-shell > .exam-topbar .exam-topbar__actions {
    grid-column: 2;
    align-self: center;
}

.test-layout--real.exam-shell > .exam-topbar .exam-submit-btn {
    display: none;
}

.test-layout--practice.exam-shell > .exam-topbar .exam-topbar__timer {
    position: static;
}

.test-layout--practice.exam-shell > .exam-topbar .exam-topbar__actions {
    grid-column: 3;
}

.test-layout--practice.exam-shell > .exam-topbar .exam-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.test-layout--listening.test-layout--real > .exam-topbar .exam-topbar__audio {
    position: absolute;
    top: 29px;
    left: 270px;
}

.test-layout.exam-shell .qn-parts {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow-x: auto;
}

.test-layout.exam-shell .qn-part {
    min-width: 160px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-top: 3px solid transparent;
    color: var(--exam-text);
    cursor: pointer;
    white-space: nowrap;
}

.test-layout.exam-shell .qn-part__trigger {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.test-layout.exam-shell .qn-part__trigger:focus-visible {
    outline: 3px solid var(--exam-focus);
    outline-offset: 2px;
}

.test-layout.exam-shell .qn-part--active {
    min-width: max-content;
    justify-content: flex-start;
    border-top-color: var(--exam-focus);
}

.test-layout.exam-shell .qn-part__questions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.test-layout.exam-shell .qn-dot {
    width: 30px;
    min-width: 30px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--exam-text);
    background: transparent;
    font-size: 16px;
    font-weight: 600;
}

.test-layout.exam-shell .qn-dot:hover,
.test-layout.exam-shell .qn-current {
    border-color: var(--exam-focus);
}

.test-layout.exam-shell .qn-answered {
    background: transparent;
}

.test-layout.exam-shell .qn-flagged,
.test-layout.exam-shell .qn-flagged-answered {
    box-shadow: inset 0 -4px 0 var(--exam-warning);
}

.test-layout.exam-shell .qn-sep {
    width: 1px;
    height: 30px;
    margin: 0 14px;
    background: var(--exam-border);
}

.test-layout.exam-shell .qn-arrows {
    position: absolute;
    right: 106px;
    bottom: 7px;
    display: flex;
    gap: 10px;
}

.test-layout.exam-shell .qn-submit {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 96px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 0;
    border-left: 1px solid var(--exam-border);
    background: var(--exam-panel-soft);
    color: var(--exam-text);
    cursor: pointer;
}

.test-layout.exam-shell .qn-submit:focus-visible {
    outline: 3px solid var(--exam-focus);
    outline-offset: -5px;
}

.test-layout--practice.exam-shell .question-nav {
    height: 66px;
    padding-right: 7px;
    padding-left: 0;
}

.test-layout--practice.exam-shell .qn-arrows {
    right: 0;
}

.test-layout--practice.exam-shell .question-nav--practice .qn-parts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
}

.test-layout--practice.exam-shell .question-nav--practice .qn-part {
    width: 100%;
    min-width: 0;
}

.test-layout--practice.exam-shell .question-nav--practice .qn-part--active {
    gap: 10px;
    border-top-color: transparent;
}

.test-layout--practice.exam-shell .question-nav--practice .qn-part__questions {
    gap: 5px;
}

.test-layout--practice.exam-shell .question-nav--practice .qn-part--active > .qn-part__trigger {
    position: relative;
    flex: 0 0 90px;
    width: 90px;
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 20px;
}

.test-layout--practice.exam-shell .question-nav--practice .qn-part--active > .qn-part__trigger::before,
.test-layout--practice.exam-shell .question-nav--practice .qn-part--active .qn-dot::before {
    content: "";
    position: absolute;
    top: -17px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--exam-border);
}

.test-layout--practice.exam-shell .question-nav--practice .qn-dot {
    position: relative;
    height: 32px;
}

.test-layout--practice.exam-shell .question-nav--practice .qn-dot.qn-answered::before {
    background: var(--exam-success);
}

.test-layout--practice.exam-shell .qn-submit {
    display: none;
}

.test-layout.exam-shell .qn-arrows button {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid var(--exam-border);
    border-radius: 7px;
    background: var(--exam-panel-strong);
    color: var(--exam-text);
    cursor: pointer;
}

.test-layout.exam-shell .qn-arrows button:not(:disabled):hover {
    background: var(--exam-control-hover);
}

/* Writing exam */
.writing-layout.exam-shell .exam-part-banner {
    margin-bottom: 15px;
}

.writing-layout.exam-shell .writing-split-screen {
    min-height: 0;
    flex: 1;
    padding-bottom: 64px;
    background: var(--exam-bg);
}

.writing-layout.exam-shell .writing-left-pane,
.writing-layout.exam-shell .writing-right-pane {
    width: 50%;
    padding: 28px 25px 36px;
    overflow: auto;
    background: var(--exam-panel);
    color: var(--exam-text);
}

.writing-layout.exam-shell .writing-left-pane {
    border-right: 2px solid var(--exam-border);
}

.writing-layout.exam-shell .writing-split-resizer {
    width: 4px;
    flex: 0 0 4px;
    position: relative;
    background: var(--exam-border);
    cursor: col-resize;
}

.writing-layout.exam-shell .writing-split-resizer::after {
    content: "↔";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid var(--exam-border);
    background: var(--exam-panel-strong);
    color: var(--exam-text);
    z-index: 4;
}

.writing-layout.exam-shell .writing-right-pane {
    display: flex;
    flex-direction: column;
}

.writing-layout.exam-shell .writing-task-header {
    display: none;
}

.writing-layout.exam-shell .writing-instruction,
.writing-layout.exam-shell .writing-prompt,
.writing-layout.exam-shell .writing-extra-instruction {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--exam-text);
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.45;
}

.writing-layout.exam-shell .task1-image {
    width: 100%;
    margin-top: 22px;
    border-radius: 0;
    border-color: var(--exam-border);
}

.writing-layout.exam-shell .writing-textarea {
    flex: 0 0 226px;
    min-height: 226px;
    padding: 18px;
    resize: vertical;
    border: 1px solid var(--exam-border);
    border-radius: 5px;
    background: var(--exam-panel);
    color: var(--exam-text);
    font: inherit;
    font-size: 18px;
    line-height: 1.5;
}

.writing-layout.exam-shell .writing-word-counter {
    justify-content: flex-end;
    gap: 6px;
    color: var(--exam-text);
    font-size: 18px;
}

.writing-layout.exam-shell .word-count-target {
    display: none;
}

.writing-layout.exam-shell .writing-task-tabs {
    justify-content: space-around;
}

.writing-layout.exam-shell .task-tab {
    min-width: 180px;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--exam-text);
    font-size: 18px;
}

.writing-layout.exam-shell .task-tab.active {
    border-bottom-color: var(--exam-focus);
    color: var(--exam-text);
}

/* Pre-start screen */
.exam-prestart {
    --exam-bg: #edf4fd;
    --exam-panel: #ffffff;
    --exam-panel-soft: #f6f8fb;
    --exam-text: #111827;
    --exam-muted: #667085;
    --exam-border: #cbd5e1;
    --exam-border-soft: #e1e7ef;
    --exam-focus: #ef233c;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    background: var(--exam-bg);
    color: var(--exam-text);
    font-family: Arial, Helvetica, sans-serif;
}

.exam-theme-dark .exam-prestart {
    --exam-bg: #151716;
    --exam-panel: #1e2221;
    --exam-panel-soft: #202423;
    --exam-text: #f8fafc;
    --exam-muted: #c5cdc8;
    --exam-border: #3c4343;
    --exam-border-soft: #303636;
    --exam-focus: #ef233c;
}

.exam-prestart__topbar {
    height: 50px;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--exam-border);
    background: var(--exam-panel);
}

.exam-prestart__brand {
    gap: 10px;
}

.exam-prestart__brand span {
    margin-left: 16px;
    font-weight: 700;
}

.exam-prestart__stage {
    min-height: calc(100vh - 50px);
    min-height: calc(100dvh - 50px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 24px 70px;
}

/* Speaking's pre-start already owns a full exam shell, not two viewports. */
.speaking-exam--prestart { min-height: 0; }
.exam-prestart[data-section="speaking"] .exam-prestart__stage { padding: 20px 24px; }
@media (min-width: 768px) and (min-height: 650px) {
    .exam-prestart[data-section="speaking"] .exam-prestart__card { padding: 20px; }
    .exam-prestart[data-section="speaking"] .exam-prestart__card h1 { margin-bottom: 16px; }
    .exam-prestart[data-section="speaking"] .exam-prestart__card h2 { margin: 16px 0 8px; font-size: 18px; }
    .exam-prestart[data-section="speaking"] .exam-prestart__card li,
    .exam-prestart[data-section="speaking"] .exam-prestart__card p { font-size: 16px; line-height: 1.4; }
    .exam-prestart[data-section="speaking"] .exam-prestart__divider { margin: 16px 0; }
}

.exam-prestart__card {
    width: min(1156px, 100%);
    padding: 26px 16px 20px;
    border: 1px solid var(--exam-border-soft);
    background: var(--exam-panel);
    color: var(--exam-text);
    box-shadow: 0 5px 14px rgba(16, 24, 40, 0.14);
}

.exam-prestart__card h1 {
    margin: 0 0 24px;
    font-size: 20px;
}

.exam-prestart__test-name {
    margin: -18px 0 22px;
    color: var(--exam-muted);
    font-weight: 700;
}

.exam-prestart__card h2 {
    margin: 26px 0 12px;
    color: var(--exam-text);
    font-size: 20px;
}

.exam-prestart__card p,
.exam-prestart__card li {
    font-size: 18px;
    line-height: 1.55;
}

.exam-prestart__card ul {
    margin: 0 0 4px 24px;
}

.exam-prestart__divider {
    height: 1px;
    margin: 28px 0 32px;
    background: var(--exam-border-soft);
}

.exam-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.exam-mode-card {
    min-height: 128px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 20px;
    border: 2px solid var(--exam-border);
    border-radius: 16px;
    background: var(--exam-panel);
    color: var(--exam-text);
    text-align: left;
    cursor: pointer;
}

.exam-mode-card.is-selected {
    border-color: var(--exam-focus);
    box-shadow: 0 8px 14px rgba(239, 35, 60, 0.08);
}

.exam-mode-card__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--exam-muted);
}

.exam-mode-card.is-selected .exam-mode-card__icon {
    color: #ffffff;
    background: var(--exam-focus);
}

.exam-mode-card strong,
.exam-mode-card small {
    display: block;
}

.exam-mode-card strong {
    margin-bottom: 8px;
    font-size: 18px;
}

.exam-mode-card small {
    color: var(--exam-muted);
    font-size: 15px;
    line-height: 1.5;
}

.exam-access-note {
    min-height: 84px;
    margin-top: 20px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #8ad3b5;
    border-radius: 14px;
    color: var(--exam-text);
    background: color-mix(in srgb, #0f9f67 8%, var(--exam-panel));
}

.exam-access-note > svg {
    color: #0f9f67;
}

.exam-access-note strong,
.exam-access-note span {
    display: block;
}

.exam-access-note span {
    margin-top: 3px;
    color: var(--exam-muted);
    font-size: 14px;
}

.exam-prestart__ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    text-align: center;
}

.exam-prestart__ready p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.exam-start-btn {
    min-width: 114px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}

.exam-start-btn:disabled {
    opacity: 0.62;
    cursor: wait;
}

.exam-prestart__ready small {
    color: var(--exam-muted);
}

/* Settings and confirmation modals */
.exam-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(2px);
}

/* Reference confirm/leave/submit dialogs keep the exam surface legible. The
   heavier scrim remains reserved for settings and report flows. */
.exam-modal-overlay--confirm {
    background: rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(4px);
}

.exam-settings-modal,
.exam-confirm-modal,
.exam-result-issue-modal,
.question-complaint-card {
    --exam-modal-bg: #ffffff;
    --exam-modal-text: #111827;
    --exam-modal-muted: #667085;
    --exam-modal-border: #d7dee8;
    width: min(640px, 100%);
    max-height: min(900px, 94vh);
    overflow: auto;
    padding: 26px 30px 30px;
    border: 1px solid var(--exam-modal-border);
    border-radius: 12px;
    background: var(--exam-modal-bg);
    color: var(--exam-modal-text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
    font-family: Arial, Helvetica, sans-serif;
}

.exam-theme-dark .exam-settings-modal,
.exam-theme-dark .exam-confirm-modal,
.exam-theme-dark .exam-result-issue-modal,
.exam-theme-dark .question-complaint-card {
    --exam-modal-bg: #191c1b;
    --exam-modal-text: #f5f6f7;
    --exam-modal-muted: #b4bab6;
    --exam-modal-border: #343a3a;
}

.question-complaint-title {
    color: var(--exam-modal-text);
}

.question-complaint-hint,
.question-complaint-status {
    color: var(--exam-modal-muted);
}

.question-complaint-close {
    border: 0;
    background: transparent;
    color: var(--exam-modal-muted);
}

.question-complaint-textarea {
    border-color: var(--exam-modal-border);
    background: color-mix(in srgb, var(--exam-modal-bg) 94%, var(--exam-modal-text));
    color: var(--exam-modal-text);
}

.question-complaint-textarea::placeholder {
    color: var(--exam-modal-muted);
}

.question-complaint-actions .btn-outline {
    border-color: var(--exam-modal-border);
    background: transparent;
    color: var(--exam-modal-text);
}

.question-complaint-actions .btn-primary {
    border-color: var(--exam-modal-text);
    background: var(--exam-modal-text);
    color: var(--exam-modal-bg);
}

.exam-confirm-modal .exam-primary-btn,
.exam-result-issue-modal .exam-primary-btn {
    border-color: var(--exam-modal-text);
    background: var(--exam-modal-text);
    color: var(--exam-modal-bg);
}

.exam-confirm-modal .exam-secondary-btn,
.exam-result-issue-modal .exam-secondary-btn {
    border-color: var(--exam-modal-border);
    background: transparent;
    color: var(--exam-modal-text);
}

.exam-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.exam-modal__head h2,
.exam-settings-group h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--exam-modal-text);
}

.exam-modal__head h2 {
    margin: 0;
    font-size: 23px;
}

.exam-modal__close {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--exam-modal-muted);
    cursor: pointer;
}

.exam-settings-group {
    margin-top: 22px;
}

.exam-settings-group h3 {
    margin: 0 0 12px;
    font-size: 17px;
}

.exam-settings-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exam-settings-options button,
.exam-speed-options button {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--exam-modal-border);
    border-radius: 6px;
    background: transparent;
    color: var(--exam-modal-muted);
    font: inherit;
    font-size: 17px;
    cursor: pointer;
}

.exam-settings-options button.is-selected,
.exam-speed-options button.is-selected {
    border-color: var(--exam-modal-text);
    background: color-mix(in srgb, var(--exam-modal-text) 5%, transparent);
    color: var(--exam-modal-text);
}

.exam-speed-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.exam-speed-options button {
    justify-content: center;
    padding: 0 5px;
    font-size: 15px;
}

.exam-settings-action {
    width: 100%;
    min-height: 82px;
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border: 1px solid var(--exam-modal-border);
    border-radius: 10px;
    background: transparent;
    color: var(--exam-modal-text);
    text-align: left;
    cursor: pointer;
}

.exam-settings-action--report {
    border-color: #be6b18;
    color: #ca7a15;
    background: rgba(190, 107, 24, 0.10);
}

.exam-modal-overlay--options {
    --exam-bg: #ffffff;
    --exam-panel: #ffffff;
    --exam-focus: #1677ff;
    padding: 0;
    align-items: stretch;
    background: var(--exam-bg, #ffffff);
    backdrop-filter: none;
}

.exam-theme-dark .exam-modal-overlay--options {
    --exam-bg: #1d2020;
    --exam-panel: #1d2020;
    --exam-focus: #2f80ff;
}

.exam-settings-modal--options {
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--exam-bg, #ffffff);
    box-shadow: none;
}

.exam-options-head {
    height: 80px;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    align-items: center;
    padding: 0 35px;
    border-bottom: 1px solid var(--exam-modal-border);
}

.exam-options-head h2 {
    margin: 0;
    color: var(--exam-modal-text);
    font-size: 26px;
    line-height: 1;
    text-align: center;
}

.exam-options-head .exam-modal__close {
    width: 42px;
    height: 42px;
    justify-self: end;
}

.exam-options-back {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--exam-modal-text);
    font: inherit;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.exam-options-stage {
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 86px 24px 48px;
}

.exam-options-list,
.exam-options-choices {
    width: min(600px, 100%);
    overflow: hidden;
    border: 1px solid var(--exam-modal-border);
    border-radius: 10px;
    background: var(--exam-panel);
}

.exam-options-list button,
.exam-options-choices button {
    width: 100%;
    min-height: 72px;
    display: grid;
    grid-template-columns: 32px 1fr 28px;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    border: 0;
    border-bottom: 1px solid var(--exam-modal-border);
    background: transparent;
    color: var(--exam-modal-text);
    font: inherit;
    font-size: 20px;
    text-align: left;
    cursor: pointer;
}

.exam-options-list button:last-child,
.exam-options-choices button:last-child {
    border-bottom: 0;
}

.exam-options-list button.is-primary {
    background: #ed193d;
    color: #fff;
}

.exam-options-list button:hover,
.exam-options-choices button:hover {
    background: color-mix(in srgb, var(--exam-modal-text) 7%, transparent);
}

.exam-options-list button.is-primary:hover {
    background: #d91637;
}

.exam-options-list button:focus-visible,
.exam-options-choices button:focus-visible,
.exam-options-back:focus-visible {
    position: relative;
    z-index: 1;
    outline: 3px solid var(--exam-focus);
    outline-offset: -4px;
}

.exam-options-choices button {
    grid-template-columns: 28px 1fr auto;
}

.exam-options-check {
    min-width: 22px;
    display: inline-flex;
}

.exam-contrast-preview {
    width: 50px;
    height: 31px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 5px;
    border: 1px solid #65707e;
    border-radius: 5px;
}

.exam-contrast-preview i {
    height: 2px;
    display: block;
    background: currentColor;
}

.exam-contrast-preview i:nth-child(2) { width: 82%; }
.exam-contrast-preview i:nth-child(3) { width: 68%; }
.exam-contrast-preview.is-light { background: #f8fafc; color: #475569; }
.exam-contrast-preview.is-dark { background: #050706; color: #68716d; }

@media (max-width: 600px) {
    .exam-options-head {
        height: 64px;
        grid-template-columns: minmax(86px, 1fr) auto minmax(86px, 1fr);
        padding: 0 12px;
    }
    .exam-options-head h2 { font-size: 21px; }
    .exam-options-back { font-size: 15px; }
    .exam-options-stage {
        min-height: calc(100dvh - 64px);
        padding: 36px 16px 32px;
    }
    .exam-options-list button,
    .exam-options-choices button {
        min-height: 64px;
        padding: 0 15px;
        font-size: 16px;
    }
}

.exam-save-status {
    min-width: 72px;
    color: var(--exam-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.exam-save-status.is-saved { color: #17844a; }
.exam-save-status.is-error { color: #c04444; }

.exam-processing-state {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 24px;
    background: color-mix(in srgb, var(--exam-bg) 72%, transparent);
    backdrop-filter: blur(5px);
    color: var(--exam-text);
}

.exam-processing-state__card {
    width: min(560px, calc(100vw - 48px));
    padding: 38px 44px 36px;
    border: 1px solid var(--exam-border);
    border-radius: 6px;
    background: var(--exam-panel);
    box-shadow: 0 18px 44px rgb(0 0 0 / 24%);
    text-align: center;
}

.exam-processing-state__card h2 {
    margin: 22px 0 7px;
    color: var(--exam-text);
    font-size: 22px;
}

.exam-processing-state__card p {
    margin: 0;
    color: var(--exam-muted);
    font-size: 15px;
}

.test-layout.exam-shell :is(.q-select, .q-essay-input) {
    width: min(100%, 520px);
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--exam-border);
    border-radius: 5px;
    background: var(--exam-panel);
    color: var(--exam-text);
    font: inherit;
}

.test-layout.exam-shell .q-select-label {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.test-layout.exam-shell .q-essay-input {
    min-height: 180px;
    resize: vertical;
}

.test-layout.exam-shell .checkbox-label {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--exam-text);
}

.test-layout.exam-shell .checkbox-label input {
    width: 20px;
    height: 20px;
    accent-color: var(--exam-focus);
}

.q-drag-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

.q-drag-choice,
.q-drop-target {
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--exam-border);
    border-radius: 6px;
    background: var(--exam-panel-strong);
    color: var(--exam-text);
    font: inherit;
}

.q-drag-choice { cursor: grab; }
.q-drop-target {
    display: grid;
    place-items: center;
    border-style: dashed;
}

.question-block--drag-group {
    padding-top: 0;
    margin-top: 40px;
}

.listening-note-title {
    margin-bottom: 36px;
    text-align: center;
}

.q-drag-matrix {
    display: grid;
    grid-template-columns: minmax(360px, 560px) minmax(300px, 1fr);
    gap: clamp(48px, 10vw, 210px);
    align-items: start;
    margin-top: 34px;
}

.q-drag-matrix__items,
.q-drag-matrix__answers {
    min-width: 0;
}

.q-drag-matrix__heading {
    display: block;
    margin-bottom: 24px;
    color: var(--exam-text);
    font-size: 16px;
}

.q-drag-matrix__row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(240px, 360px);
    gap: 18px;
    align-items: center;
    min-height: 52px;
}

.q-drag-matrix__item {
    color: var(--exam-text);
}

.q-drop-target--matrix {
    min-height: 34px;
    padding: 4px 12px;
    font-weight: 700;
}

.q-drag-bank--matrix {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
}

.q-drag-choice--matrix {
    width: auto;
    min-height: 34px;
    padding: 4px 10px;
    text-align: left;
}

@media (max-width: 900px) {
    .q-drag-matrix {
        grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);
        gap: 28px;
    }

    .q-drag-matrix__row {
        grid-template-columns: minmax(110px, 1fr) minmax(170px, 1.3fr);
        gap: 12px;
    }
}

@media (max-width: 620px) {
    .q-drag-matrix {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 24px;
    }

    .q-drag-matrix__row {
        grid-template-columns: minmax(110px, .85fr) minmax(150px, 1.15fr);
    }
}

.test-layout.exam-shell :is(.q-select, .q-essay-input, .checkbox-label input, .q-drag-choice, .q-drop-target, .split-resizer):focus-visible,
.exam-shell :is(button, input, select, textarea):focus-visible,
.exam-modal-overlay :is(button, input, select, textarea):focus-visible {
    outline: 3px solid var(--exam-focus);
    outline-offset: 3px;
}

.question-complaint-status {
    min-height: 1.4em;
    color: var(--exam-muted);
}

.exam-result-inline-message {
    width: 100%;
    margin: 8px 0 0;
    color: var(--exam-muted);
    text-align: center;
}

.exam-result-issue-modal {
    width: min(560px, 100%);
    max-height: min(720px, 94vh);
    overflow: auto;
    padding: 28px 30px 30px;
    border: 1px solid var(--exam-modal-border);
    border-radius: 12px;
    background: var(--exam-modal-bg);
    color: var(--exam-modal-text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.exam-result-issue-modal > p,
.exam-result-issue-modal > small {
    color: var(--exam-modal-muted);
    line-height: 1.5;
}

.exam-result-issue-modal label {
    display: block;
    margin: 22px 0 8px;
    color: var(--exam-modal-text);
    font-weight: 700;
}

.exam-result-issue-modal textarea {
    width: 100%;
    min-height: 138px;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid var(--exam-modal-border);
    border-radius: 8px;
    background: var(--exam-panel, #fff);
    color: var(--exam-modal-text);
    font: inherit;
    line-height: 1.5;
}

.exam-review-audio {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 10px 12px;
    border: 1px solid var(--exam-border);
    border-radius: 8px;
    background: var(--exam-panel-strong);
}

.exam-review-audio audio {
    width: 100%;
    max-width: 620px;
}

.exam-part-banner--with-audio .exam-review-audio {
    min-width: 0;
    margin: 0;
}

.exam-part-banner--with-audio .exam-review-audio audio {
    max-width: none;
}

.exam-review-player {
    width: 100%;
    display: grid;
    grid-template-columns: 42px 46px 42px auto minmax(160px, 1fr) 92px;
    align-items: center;
    gap: 10px;
}

.exam-review-player button,
.exam-review-player select {
    min-height: 40px;
    border: 1px solid var(--exam-border);
    border-radius: 7px;
    background: var(--exam-panel);
    color: var(--exam-text);
    font: inherit;
    cursor: pointer;
}

.exam-review-player button {
    display: grid;
    place-items: center;
}

.exam-review-player__play {
    background: var(--exam-text) !important;
    color: var(--exam-bg) !important;
}

.exam-review-player__icon[data-review-audio-skip="-10"] svg {
    transform: scaleX(-1);
}

.exam-review-player output {
    min-width: 92px;
    color: var(--exam-text);
    font: 800 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: nowrap;
}

.exam-review-player input[type="range"] {
    width: 100%;
    accent-color: var(--exam-focus);
}

.exam-review-player__speed select {
    width: 100%;
    padding: 0 12px;
}

.exam-review-player :is(button, select, input):focus-visible {
    outline: 3px solid var(--exam-focus);
    outline-offset: 2px;
}

.test-layout.exam-shell .question-nav--real .qn-arrows {
    position: fixed;
    right: 18px;
    bottom: 118px;
    border: 1px solid var(--exam-border);
    border-radius: 8px;
    background: var(--exam-panel);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.test-layout.exam-shell .question-nav--practice .qn-arrows {
    position: static;
}

.exam-settings-action span,
.exam-settings-action strong,
.exam-settings-action small {
    display: block;
}

.exam-settings-action small {
    margin-top: 5px;
    color: var(--exam-modal-muted);
}

.exam-confirm-modal {
    width: min(560px, 100%);
    padding: 38px 42px 40px;
    text-align: center;
}

.exam-confirm-modal h2 {
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--exam-modal-text);
    font-size: 25px;
}

.exam-confirm-modal h2 svg {
    display: none;
}

.exam-confirm-modal h2::before {
    content: "!";
    display: inline-flex;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid #e6a700;
    border-radius: 50%;
    color: #e6a700;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.exam-confirm-modal p {
    margin: 0 auto;
    max-width: 430px;
    color: var(--exam-modal-muted);
    font-size: 19px;
    line-height: 1.55;
}

.exam-confirm-modal__actions,
.exam-result-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
}

.exam-primary-btn,
.exam-secondary-btn {
    min-height: 46px;
    padding: 0 22px;
    background: #0f172a;
    color: #ffffff;
}

.exam-secondary-btn {
    background: transparent;
    color: var(--exam-modal-text, var(--exam-text));
    border-color: var(--exam-modal-border, var(--exam-border));
}

.exam-primary-btn.is-danger {
    border-color: #c8353f;
    background: #c8353f;
}

.exam-primary-btn:disabled,
.exam-secondary-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Results */
.exam-result-banner {
    min-height: 62px;
    margin-bottom: 14px;
}

.exam-result-content {
    min-height: 0;
    flex: 1;
    overflow: auto;
    width: min(1540px, calc(100% - 40px));
    margin: 0 auto;
    padding: 30px 0 90px;
    background: var(--exam-bg);
    color: var(--exam-text);
}

.exam-result-bottom {
    position: fixed;
    z-index: 84;
    right: 0;
    bottom: 0;
    left: 0;
    height: 66px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--exam-border);
    background: var(--exam-bg);
}

.exam-result-bottom__finish {
    width: 96px;
    border: 0;
    border-left: 1px solid var(--exam-border);
    background: var(--exam-panel-soft);
    color: var(--exam-text);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.exam-result-bottom__finish:hover {
    background: var(--exam-panel);
}

.exam-result-bottom__finish:focus-visible {
    outline: 3px solid var(--exam-focus);
    outline-offset: -5px;
}

.exam-result-heading {
    padding: 4px 20px 30px;
    text-align: center;
}

.exam-result-heading h1 {
    margin: 0 0 10px;
    color: var(--exam-text);
    font-size: 36px;
}

.exam-result-heading span {
    display: inline-flex;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--exam-panel-soft);
    color: var(--exam-focus);
    font-weight: 700;
}

.exam-band-card {
    min-height: 222px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--exam-panel-soft);
    text-align: center;
}

.exam-band-card h2 {
    margin: 0 0 14px;
    color: var(--exam-text);
    font-size: 22px;
}

.exam-band-card strong {
    color: #2463e9;
    font-size: 46px;
}

.exam-band-card span,
.exam-band-card p {
    margin: 4px 0 0;
}

.exam-result-panel {
    margin-top: 30px;
    padding: 32px 30px;
    border: 1px solid var(--exam-border-soft);
    border-radius: 12px;
    color: var(--exam-text);
}

.exam-result-panel h2 {
    margin: 0 0 24px;
    color: var(--exam-text);
    font-size: 23px;
}

.exam-incorrect-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.exam-incorrect-list button {
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    color: #c91e27;
    background: #ffe1e3;
    font: inherit;
    font-weight: 700;
}

.exam-result-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.exam-result-rows--types {
    grid-template-columns: minmax(0, 1fr);
}

.exam-result-rows > div,
.exam-result-summary-line {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--exam-panel-soft);
}

.exam-result-rows span b,
.exam-result-summary-line span {
    color: var(--exam-danger);
}

.exam-result-summary-line small {
    color: var(--exam-muted);
}

/* Review split screen */
.exam-review-layout > .exam-part-banner {
    margin-top: 15px;
}

.exam-part-banner--with-audio {
    display: grid;
    grid-template-columns: minmax(230px, 0.62fr) minmax(420px, 1.38fr);
    align-items: center;
    gap: 24px;
}

.exam-review-banner__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.exam-review-stage {
    min-height: 0;
    flex: 1;
    display: flex;
    padding-bottom: 68px;
}

.exam-review-pane {
    width: 50%;
    overflow: auto;
    padding: 25px 24px 42px;
    color: var(--exam-text);
    background: var(--exam-panel);
}

.exam-review-pane:first-child { padding: 0 4px 42px 0; }

.exam-review-source {
    min-height: calc(100% - 4px);
    padding: 23px 25px 38px;
    border: 0;
    border-radius: 0;
    font-size: 20px;
    line-height: 1.72;
}

.exam-review-evidence-mark {
    padding: 0 2px;
    border-radius: 3px;
    background: #f8c84a;
    color: #171717;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.exam-review-evidence-mark[data-review-question]::before {
    content: "Q" attr(data-review-question) " ";
    display: inline-block;
    margin-right: 4px;
    font-size: .72em;
    font-weight: 800;
}

.exam-review-source h2 {
    color: var(--exam-text);
    text-align: center;
}
.exam-review-source .exam-transcript-title { text-align: left; }

.exam-review-source > p:first-of-type:has(> em) {
    margin: 51px auto 68px;
    text-align: center;
}

.exam-review-source > p:not(:first-of-type) {
    margin-top: 0;
    margin-bottom: 45px;
}

.exam-review-source > p:has(> strong:first-child) {
    position: relative;
    padding-left: 40px;
}

.exam-review-source > p > strong:first-child {
    position: absolute;
    left: 0;
    top: 0;
}

.exam-transcript-part {
    margin: 12px 0 27px;
    color: var(--exam-text);
    font-size: 21px;
    line-height: 1.3;
}

.exam-review-part-tabs {
    position: sticky;
    top: -26px;
    z-index: 2;
    display: none;
    gap: 8px;
    margin: -10px 0 22px;
    padding: 10px 0;
    background: var(--exam-panel);
}
.exam-review-part-tabs button {
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--exam-border);
    border-radius: 999px;
    background: var(--exam-panel-soft);
    color: var(--exam-muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.exam-review-part-tabs button.is-active {
    background: var(--exam-accent);
    border-color: var(--exam-accent);
    color: #fff;
}

.exam-review-tabs {
    height: 35px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 14px;
}

.exam-review-tabs button {
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--exam-muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.exam-review-tabs button.is-active {
    color: var(--exam-text);
    background: var(--exam-panel-soft);
}

.exam-review-questions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.exam-review-question-context {
    margin: 6px 0 2px;
    padding: 8px 0;
    color: var(--exam-text);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.55;
}

.exam-review-question-context > :first-child { margin-top: 0; }
.exam-review-question-context > :last-child { margin-bottom: 0; }
.exam-review-question-context h3 {
    margin: 44px 0 57px;
    color: var(--exam-text);
    text-align: center;
    font-size: 21px;
    line-height: 1.35;
}

.exam-review-question-context .exam-review-context-title {
    margin: 38px 0 24px;
    text-align: center;
}

.exam-review-question-context .exam-review-context-heading {
    margin: 20px 0 10px;
    text-align: left;
}

.exam-review-summary-group {
    padding: 14px 0 30px;
    color: var(--exam-text);
    font-size: 20px;
    line-height: 2;
}

.exam-review-summary-segment {
    display: inline;
    scroll-margin-block: 96px;
}

.exam-review-summary-segment:focus-visible,
.exam-review-question:focus-visible {
    outline: 3px solid var(--exam-focus);
    outline-offset: 3px;
}

.exam-review-summary-answer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 8px;
    white-space: nowrap;
}

.exam-review-summary-answer > b {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    color: #fff;
    background: var(--exam-danger);
    font-size: 18px;
    line-height: 1;
}

.exam-review-summary-answer.is-correct > b { background: var(--exam-success); }
.exam-review-summary-answer.is-wrong > s {
    color: transparent;
    font-size: 0;
    font-weight: 800;
    text-decoration: none;
}
.exam-review-summary-answer.is-wrong > s::after {
    content: '×';
    color: var(--exam-danger);
    font-size: 21px;
    line-height: 1;
}
.exam-review-summary-answer > span { color: var(--exam-success); }
.exam-review-summary-answer button {
    border: 0;
    background: transparent;
    color: var(--exam-focus);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.exam-review-summary-answer button:focus-visible { outline: 3px solid var(--exam-focus); outline-offset: 2px; }
.exam-review-summary-explanation {
    display: inline-block;
    max-width: 360px;
    margin: 0 8px;
    padding: 5px 9px;
    color: var(--exam-text);
    background: var(--exam-panel-soft);
    border: 1px solid var(--exam-border);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    vertical-align: middle;
}
.exam-review-summary-explanation[hidden] { display: none; }

.exam-review-question {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 10px;
    padding: 18px 0 38px;
    border-bottom: 1px solid var(--exam-border-soft);
    scroll-margin-block: 96px;
}

.exam-review-question__number {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #ffffff;
    background: var(--exam-danger);
    font-weight: 700;
}

.exam-review-question.is-correct .exam-review-question__number {
    background: var(--exam-success);
}

.exam-review-question__content {
    font-size: 20px;
    line-height: 1.5;
}

.exam-review-question p {
    margin: 6px 0 0;
    font-size: 14px;
}

.exam-review-question__answer { display: flex; flex-wrap: wrap; gap: 4px; }
.exam-review-question__answer > span { color: var(--exam-muted); }
.exam-review-question.is-correct .exam-review-question__answer > span { color: var(--exam-text); }

.exam-review-question__correct {
    color: var(--exam-success);
}

.exam-review-options {
    display: grid;
    gap: 27px;
    margin-top: 37px;
}

.exam-review-option {
    display: grid;
    grid-template-columns: 20px 20px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    min-height: 28px;
    color: var(--exam-text);
    font-size: 20px;
    line-height: 1.45;
}

.exam-review-option:not(:has(.exam-review-option__key)) {
    grid-template-columns: 20px minmax(0, 1fr);
}

.exam-review-option__control {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    border: 1.5px solid #aeb3b6;
    border-radius: 50%;
    background: #b9bdc0;
    color: transparent;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.exam-review-option__control.is-checkbox { border-radius: 4px; }
.exam-review-option__key { color: var(--exam-muted); font-weight: 700; }
.exam-review-option.is-answer .exam-review-option__control {
    border-color: #aeb3b6;
    background: #b9bdc0;
    color: transparent;
}
.exam-review-option.is-answer .exam-review-option__label { color: var(--exam-success); font-weight: 700; }
.exam-review-option.is-selected-wrong .exam-review-option__control {
    border-color: #aeb3b6;
    background: #b9bdc0;
    color: transparent;
}
.exam-review-option.is-selected-wrong .exam-review-option__label { color: var(--exam-danger); }

.exam-review-question details summary {
    margin-top: 41px;
    color: var(--exam-focus);
    cursor: pointer;
}

.exam-evidence-btn,
.exam-transcript-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    margin-top: 12px;
    padding: 7px 12px;
    border: 1px solid var(--exam-border);
    border-radius: 999px;
    background: var(--exam-panel-soft);
    color: var(--exam-focus);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.exam-transcript-time {
    align-self: start;
    margin: 0;
    min-height: 0;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 15px;
    font-weight: 600;
    justify-content: flex-start;
    color: var(--exam-text);
}

.exam-review-vocabulary {
    display: grid;
    gap: 0;
}

.exam-review-vocabulary-card {
    min-height: 0;
    padding: 22px 30px 28px;
    border: 0;
    border-bottom: 1px solid var(--exam-border-soft);
    border-radius: 0;
    background: transparent;
}

.exam-review-bottom-nav {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 64px;
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--exam-border);
    background: var(--exam-panel-strong);
}

.exam-review-bottom-part {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 14px;
    border-top: 3px solid transparent;
}

.exam-review-bottom-part.is-active {
    flex: 0 0 auto;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    border-top-width: 0;
}

.exam-review-bottom-part.is-active > button,
.exam-review-bottom-part.is-active .exam-review-bottom-questions button {
    border-top: 3px solid var(--exam-success);
    border-radius: 0;
}

.exam-review-bottom-part.is-active > button {
    min-width: 73px;
    padding-inline: 6px;
}

.exam-review-bottom-part.is-active .exam-review-bottom-questions {
    align-items: stretch;
    gap: 4px;
}

.exam-review-bottom-part > button,
.exam-review-bottom-questions button {
    border: 0;
    background: transparent;
    color: var(--exam-text);
    font: inherit;
    cursor: pointer;
}

.exam-review-bottom-part > button { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.exam-review-bottom-part > button small { color: var(--exam-muted); font-weight: 700; }
.exam-review-bottom-questions { display: flex; align-items: center; gap: 2px; overflow: hidden; }
.exam-review-bottom-questions button { min-width: 25px; min-height: 30px; padding: 2px; border-radius: 4px; }
.exam-review-bottom-questions button.is-wrong { color: var(--exam-text); }
.exam-review-bottom-questions button.is-correct { color: var(--exam-text); }
.exam-review-bottom-questions button.is-current { outline: 2px solid var(--exam-focus); outline-offset: -2px; }
.exam-review-bottom-arrows {
    position: sticky;
    right: 0;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 126px;
    padding: 6px 8px;
    border-left: 1px solid var(--exam-border);
    background: var(--exam-panel-strong);
}
.exam-review-bottom-arrows button {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 50px;
    padding: 0;
    border: 1px solid var(--exam-border);
    border-radius: 8px;
    background: var(--exam-panel-soft);
    color: var(--exam-text);
    cursor: pointer;
}
.exam-review-bottom-arrows button:disabled { cursor: not-allowed; opacity: .42; }
.exam-review-bottom-nav button:focus-visible { outline: 3px solid var(--exam-focus); outline-offset: 2px; }

.exam-review-vocabulary-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.exam-review-vocabulary-card strong { font-size: 22px; }
.exam-review-vocabulary-card p { margin: 14px 0 7px; font-size: 20px; line-height: 1.52; }

.exam-review-vocabulary-card span,
.exam-review-vocabulary-card small {
    color: var(--exam-muted);
    font-size: 13px;
}

.exam-review-vocabulary-card .exam-review-vocabulary-pos {
    padding: 5px 12px;
    border-radius: 7px;
    background: var(--exam-panel-soft);
    color: var(--exam-text);
    font-weight: 800;
    line-height: 1;
}

.exam-review-vocabulary-card blockquote {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    color: var(--exam-muted);
    font-size: 18px;
    font-style: italic;
    line-height: 1.45;
}

.exam-review-vocabulary-browser {
    min-height: 100%;
    margin-top: 8px;
    border: 1px solid var(--exam-border-soft);
    border-radius: 14px;
}

.exam-review-vocabulary-toolbar {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto minmax(250px, 0.8fr);
    align-items: center;
    gap: 12px;
    padding: 32px 30px 14px;
    background: var(--exam-panel);
}

.exam-review-pane--questions.is-vocabulary {
    padding-bottom: 42px;
}

.exam-review-pane--questions.is-vocabulary .exam-review-vocabulary-browser {
    margin-top: 8px;
}

.exam-review-pane--questions.is-vocabulary .exam-review-vocabulary-card:first-child {
    padding-top: 26px;
}

.exam-review-vocabulary-toolbar > strong {
    font-size: 18px;
}

.exam-review-flashcards-btn,
.exam-review-vocabulary-search {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--exam-border-soft);
    border-radius: 7px;
    background: var(--exam-panel-soft);
    color: var(--exam-text);
    font: inherit;
    font-weight: 700;
}

.exam-review-flashcards-btn {
    justify-content: center;
    padding: 9px 16px;
    cursor: pointer;
}

.exam-review-vocabulary-search {
    padding: 0 13px;
}

.exam-review-vocabulary-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--exam-text);
    font: inherit;
}

.exam-review-vocabulary-search input::placeholder {
    color: var(--exam-muted);
}

.exam-review-flashcards-btn:focus-visible,
.exam-review-vocabulary-search:focus-within {
    outline: 3px solid var(--exam-focus);
    outline-offset: 2px;
}

.exam-review-vocabulary-empty {
    padding: 48px 30px;
    color: var(--exam-muted);
    text-align: center;
}

.exam-review-flashcard-stage {
    min-height: calc(100% - 10px);
    padding: 18px 30px 40px;
}

.exam-review-flashcard-head,
.exam-review-flashcard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.exam-review-flashcard {
    min-height: 360px;
    margin: 24px auto;
    padding: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    border: 1px solid var(--exam-border);
    border-radius: 14px;
    background: var(--exam-panel-soft);
    color: var(--exam-text);
    text-align: center;
}

.exam-review-flashcard h3 {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
}

.exam-review-flashcard [data-review-flashcard-answer] p {
    font-size: 18px;
    line-height: 1.55;
}

.exam-review-flashcard blockquote {
    margin: 16px 0 0;
    color: var(--exam-muted);
    font-style: italic;
}

.exam-review-empty {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--exam-muted);
    text-align: center;
}

.exam-transcript-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    margin: 17px 0;
}

.exam-transcript-row time {
    font-family: monospace;
}

.exam-transcript-row p {
    margin: 4px 0 0;
    line-height: 1.55;
}

.exam-transcript-row strong {
    color: var(--exam-muted);
    font-size: 17px;
    font-weight: 600;
}

/* Writing result and immutable submitted-version review */
.writing-result-layout .exam-result-content {
    width: min(1540px, 82vw);
    margin: 0 auto;
}

.writing-result-layout .exam-result-heading {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding-top: 4px;
    text-align: center;
}

.writing-result-layout .exam-result-heading h1 {
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.writing-result-layout .exam-result-heading > small {
    max-width: 720px;
    color: var(--exam-muted);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.writing-result-band.is-reviewed > strong {
    color: #ff8b3d;
}

.writing-result-band {
    min-height: 350px;
    border-color: color-mix(in srgb, var(--exam-success) 50%, var(--exam-border-soft));
    background:
        radial-gradient(circle at 10% 24%, color-mix(in srgb, var(--exam-success) 11%, transparent), transparent 46%),
        linear-gradient(115deg, color-mix(in srgb, var(--exam-success) 8%, var(--exam-panel)), color-mix(in srgb, var(--exam-focus) 10%, var(--exam-panel)));
}

.writing-result-band > strong {
    font-size: clamp(58px, 5.4vw, 82px);
}

.writing-result-status {
    padding: 6px 12px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--exam-focus) 13%, var(--exam-panel-soft));
    font-weight: 800;
}

.writing-ai-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: min(560px, calc(100% - 24px));
    margin-top: 18px;
    padding: 14px 18px;
    color: #ffd43b;
    border: 1px solid color-mix(in srgb, #d56a00 70%, var(--exam-border));
    border-radius: 10px;
    background: color-mix(in srgb, #6b2d00 30%, var(--exam-panel));
    text-align: left;
}

.writing-ai-warning p { margin: 0; line-height: 1.45; }
.writing-ai-warning strong { color: inherit; font-size: inherit; }

.writing-deep-evaluation { margin-top: 34px; }

.writing-deep-evaluation > header {
    display: flex;
    justify-content: center;
    padding: 2px 16px 18px;
    text-align: center;
}

.writing-deep-evaluation > header h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--exam-text);
    font-size: clamp(24px, 2.2vw, 32px);
}

.writing-deep-evaluation > header svg { color: #ffd43b; }

.writing-task-band {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    margin-bottom: 26px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, #7c4dff 70%, var(--exam-border));
    border-radius: 12px;
    background: linear-gradient(125deg, color-mix(in srgb, #2845a7 20%, var(--exam-panel)), color-mix(in srgb, #6c2f91 22%, var(--exam-panel)));
    text-align: center;
}

.writing-task-band span { font-size: 22px; font-weight: 800; }
.writing-task-band strong { color: #ff8b3d; font-size: 62px; line-height: 1; }
.writing-task-band p { max-width: 1180px; margin: 2px 0 0; color: var(--exam-text); line-height: 1.55; text-align: left; }

.writing-result-return {
    border-color: color-mix(in srgb, var(--exam-danger) 52%, var(--exam-border));
    background: color-mix(in srgb, var(--exam-danger) 8%, var(--exam-panel));
}

.writing-criteria-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.writing-criteria-grid article {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 282px;
    padding: 22px 24px;
    border: 1px solid var(--exam-border-soft);
    border-radius: 10px;
    background: var(--exam-panel);
}

.writing-criteria-grid article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.writing-criteria-grid article span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 800;
}

.writing-criteria-grid article small {
    flex: 0 0 auto;
    padding: 4px 8px;
    color: #ffb347;
    border: 1px solid color-mix(in srgb, #ff8b3d 55%, var(--exam-border));
    border-radius: 999px;
    background: color-mix(in srgb, #ff8b3d 8%, var(--exam-panel-soft));
    font-weight: 800;
}

.writing-criteria-grid article ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 22px;
    color: var(--exam-muted);
    font-size: 15px;
    line-height: 1.55;
}

.writing-problems-panel > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.writing-problems-panel article {
    padding: 0;
}

.writing-problems-panel h3 { margin: 0 0 12px; color: var(--exam-text); }
.writing-problems-panel ul { margin: 0; padding-left: 20px; }
.writing-problems-panel li + li { margin-top: 8px; }

.writing-feedback-list--plan {
    border-color: color-mix(in srgb, var(--exam-success) 45%, var(--exam-border));
    background: color-mix(in srgb, var(--exam-success) 7%, var(--exam-panel));
}

.writing-feedback-list h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.writing-feedback-list li + li {
    margin-top: 10px;
}

.writing-result-tasks {
    display: grid;
    gap: 22px;
    margin-top: 30px;
}

.writing-result-tasks[hidden] {
    display: none;
}

.writing-result-task {
    overflow: hidden;
    border: 1px solid var(--exam-border-soft);
    border-radius: 12px;
    background: var(--exam-panel);
}

.writing-result-task > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--exam-border-soft);
    background: var(--exam-panel-soft);
}

.writing-result-task > header span {
    color: var(--exam-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.writing-result-task > header h2 {
    margin: 5px 0 0;
    color: var(--exam-text);
    font-size: 21px;
}

.writing-result-task > header > strong {
    color: var(--exam-focus);
    font-size: 28px;
}

.writing-result-prompt,
.writing-result-answer,
.writing-sample-answer {
    margin: 0;
    padding: 22px 24px;
    color: var(--exam-text);
    line-height: 1.65;
}

.writing-result-prompt {
    border-bottom: 1px solid var(--exam-border-soft);
    color: var(--exam-muted);
}

.writing-result-answer h3 {
    margin: 0 0 16px;
    font-size: 16px;
}

.writing-result-answer p,
.writing-sample-answer p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.writing-sample-answer {
    border-top: 1px solid var(--exam-border-soft);
    background: var(--exam-panel-soft);
}

.writing-result-sample-card {
    margin-top: 24px;
    border: 1px solid var(--exam-border-soft);
    border-radius: 10px;
    background: var(--exam-panel);
}

.writing-sample-answer h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    color: var(--exam-text);
    font-weight: 800;
}

.writing-sample-answer p {
    margin: 0;
}

.writing-sample-answer h4 {
    margin: 26px 0 12px;
    font-size: 18px;
}

.writing-sample-answer ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 22px;
}

.writing-sample-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 14px;
    color: #d28a00;
    border: 1px solid color-mix(in srgb, #d28a00 45%, var(--exam-border));
    border-radius: 9px;
}

@media (max-width: 900px) {
    .exam-result-content {
        width: calc(100% - 24px);
    }
    .writing-result-layout .exam-result-content {
        width: calc(100% - 32px);
    }
    .writing-result-band {
        min-height: 220px;
    }
    .exam-topbar {
        grid-template-columns: 1fr auto;
        height: 58px;
        flex-basis: 58px;
        padding: 0 10px;
    }
    .exam-topbar__identity strong,
    .exam-topbar__identity span,
    .exam-topbar__audio {
        display: none;
    }
    .exam-topbar__timer {
        position: absolute;
        left: 54px;
        font-size: 14px;
    }
    .exam-topbar__actions {
        grid-column: 2;
    }
    .exam-save-status {
        display: none;
    }
    .exam-icon-btn {
        width: 42px;
    }
    .exam-submit-btn {
        min-width: 72px;
        padding: 0 10px;
    }
    .exam-part-banner {
        min-height: 78px;
        margin: 12px 10px 8px;
        padding: 12px;
        font-size: 16px;
    }
    .exam-part-banner strong {
        font-size: 17px;
    }
    .exam-review-layout > .exam-part-banner {
        margin: 12px 10px 8px;
    }
    .exam-part-banner--with-audio {
        grid-template-columns: minmax(180px, .7fr) minmax(320px, 1.3fr);
        gap: 12px;
    }
    .exam-review-player {
        grid-template-columns: 36px 40px 36px auto minmax(90px, 1fr) 72px;
        gap: 6px;
    }
    .test-layout.exam-shell .split-screen,
    .writing-layout.exam-shell .writing-split-screen,
    .exam-review-stage {
        flex-direction: column;
        padding-bottom: 64px;
    }
    .test-layout.exam-shell .split-pane,
    .writing-layout.exam-shell .writing-left-pane,
    .writing-layout.exam-shell .writing-right-pane,
    .exam-review-pane {
        width: 100% !important;
    }
    .test-layout.exam-shell .left-pane,
    .writing-layout.exam-shell .writing-left-pane,
    .exam-review-pane--source {
        max-height: 42%;
        border-right: 0;
        border-bottom: 3px solid var(--exam-border);
    }
    .test-layout.exam-shell .split-resizer,
    .exam-review-resizer,
    .writing-layout.exam-shell .writing-split-resizer {
        display: none;
    }
    .test-layout.exam-shell .split-pane,
    .writing-layout.exam-shell .writing-left-pane,
    .writing-layout.exam-shell .writing-right-pane,
    .exam-review-pane {
        padding: 16px 14px 28px;
    }
    .exam-review-bottom-nav {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }
    .exam-review-bottom-part { flex: 1 0 min(220px, calc(100vw - 126px)); }
    .exam-review-bottom-questions { display: none; }
    .exam-review-summary-answer {
        flex-wrap: wrap;
        max-width: calc(100vw - 28px);
        margin-inline: 0;
        white-space: normal;
    }
    .exam-review-summary-answer > s,
    .exam-review-summary-answer > span { overflow-wrap: anywhere; }
    .exam-review-vocabulary-card { min-height: 0; }
    .exam-review-vocabulary-toolbar {
        grid-template-columns: 1fr 1fr;
        padding: 8px 0 12px;
    }
    .exam-review-vocabulary-toolbar > strong { grid-column: 1 / -1; }
    .exam-review-vocabulary-card { padding-inline: 0; }
    .test-layout.exam-shell .passage-content,
    .test-layout.exam-shell .questions-content,
    .test-layout.exam-shell .q-content,
    .writing-layout.exam-shell .writing-instruction,
    .writing-layout.exam-shell .writing-prompt {
        font-size: 16px;
    }
    .exam-mode-grid {
        grid-template-columns: 1fr;
    }
    .exam-prestart__stage {
        padding: 12px 10px 50px;
    }
    .exam-prestart__card {
        padding: 20px 16px;
    }
    .exam-speed-options {
        grid-template-columns: repeat(3, 1fr);
    }
    .exam-result-rows {
        grid-template-columns: 1fr;
    }
    .exam-result-panel {
        margin-top: 14px;
        padding: 20px 16px;
    }
    .exam-result-actions {
        flex-direction: column;
    }
    .exam-result-actions button {
        width: 100%;
    }
    .exam-result-issue-modal {
        padding: 22px 18px 24px;
    }
    .writing-result-layout .exam-result-heading {
        justify-items: stretch;
        padding-inline: 12px;
    }
    .writing-result-layout .exam-result-heading > * { text-align: left; }
    .writing-criteria-grid {
        grid-template-columns: 1fr;
    }
    .writing-problems-panel > div { grid-template-columns: 1fr; }
    .writing-result-task > header,
    .writing-result-prompt,
    .writing-result-answer,
    .writing-sample-answer {
        padding-inline: 16px;
    }
    .test-layout.exam-shell .question-nav {
        padding: 0 112px 0 8px;
    }
    .test-layout.exam-shell .qn-parts {
        justify-content: flex-start;
        gap: 0;
        overflow: hidden;
    }
    .test-layout.exam-shell .qn-part:not(.qn-part--active) {
        display: none;
    }
    .test-layout.exam-shell .qn-part--active {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .test-layout.exam-shell .qn-part__questions {
        min-width: 0;
        overflow-x: auto;
    }
}

@media (max-width: 520px) {
    .writing-result-layout .exam-result-content {
        width: calc(100% - 8px);
    }
    .ielts-performance .performance-summary {
        grid-template-columns: 1fr;
    }
    .performance-history-controls { padding: 16px; }
    .performance-history-filters { display: grid; grid-template-columns: 1fr; }
    .performance-history-filters label { min-width: 0; }
    .performance-history-item .attempt-card__header { align-items: flex-start; flex-direction: column; gap: 10px; }
    .performance-history-item__state { width: 100%; justify-content: space-between; }
    .performance-history-item__details { align-items: flex-start; flex-direction: column; }
    .performance-history-item__actions { width: 100%; margin-left: 0; }
    .performance-history-item__actions > * { flex: 1; justify-content: center; text-align: center; }
    .performance-pagination { gap: 8px; }
    .performance-pagination button { min-width: 0; padding-inline: 10px; }
    .exam-part-banner--with-audio {
        grid-template-columns: 1fr;
    }
    .exam-part-banner--with-audio .exam-review-audio {
        min-height: 48px;
    }
    .exam-review-player {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .exam-review-player output { grid-column: 1; }
    .exam-review-player input[type="range"] { grid-column: 2 / 4; }
    .exam-review-player__speed { grid-column: 1 / 4; }
    .exam-review-vocabulary-toolbar {
        position: static;
        grid-template-columns: 1fr;
    }
    .exam-review-vocabulary-toolbar > strong { grid-column: auto; }
    .exam-review-vocabulary-toolbar > * { width: 100%; }
    .exam-review-flashcard-stage { padding-inline: 0; }
    .exam-review-flashcard { min-height: 300px; padding: 28px 18px; }
}

/* IELTS refinement pass: make the LMS IELTS area feel like one platform,
   not a dark widget inside the old student portal. */
.body--ielts,
.body--ielts #app,
.body--ielts .lk-shell--ielts {
    min-height: 100vh;
    background: #151716;
}

.body--ielts.ielts-theme-light,
.body--ielts.ielts-theme-light #app,
.body--ielts.ielts-theme-light .lk-shell--ielts {
    background: #F5F7FB;
}

.lk-shell--ielts .lk-main,
.lk-shell--ielts .dashboard-layout,
.lk-shell--ielts .dashboard-content {
    background: transparent;
}

.ielts-main {
    max-width: 1520px;
    padding-top: 30px;
}

.ielts-hero-card {
    min-height: 138px;
    padding: 32px 40px;
    margin-bottom: 50px;
    border-radius: 18px;
}

.ielts-hero-card > div {
    min-width: 0;
}

.ielts-hero-card h2 {
    max-width: 1120px;
    font-size: clamp(1.75rem, 2.2vw, 2.25rem);
    letter-spacing: -0.02em;
}

.ielts-home-card {
    min-height: 166px;
    padding: 24px 26px 22px;
}

.ielts-home-card__top h3 {
    font-size: 1.08rem;
}

.ielts-home-card__footer {
    margin-top: auto;
}

.ielts-home-card__footer .ielts-outline-btn,
.ielts-pack-card__footer .ielts-outline-btn,
.ielts-wide-card > .ielts-outline-btn,
.ielts-mock-row > .ielts-solid-btn,
.ielts-mock-row > .ielts-outline-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.ielts-wide-card > .ielts-outline-btn {
    min-width: 186px;
}

.ielts-mock-row > .ielts-solid-btn,
.ielts-mock-row > .ielts-outline-btn {
    min-width: 204px;
}

.ielts-section--compact {
    margin-top: 0;
}

@media (max-width: 1100px) {
    .ielts-hero-card h2 {
        white-space: normal;
    }
}

@media (max-width: 900px) {
    .ielts-wide-card > .ielts-outline-btn,
    .ielts-mock-row > .ielts-solid-btn,
    .ielts-mock-row > .ielts-outline-btn {
        width: 100%;
        min-width: 0;
    }
}
body.lk-drawer-open { overflow: hidden; }

/* --- Speaking card (SpeakingTaskView) --- */
.speaking-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 600px;
    margin: 2rem auto;
}
.speaking-phase-label { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; }
.speaking-hint { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.speaking-task-description {
    background: var(--bg-secondary, #F9FAFB);
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.speaking-timer { text-align: center; margin: 1.5rem 0; }
.timer-value { font-size: 3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-main); }
.recording-pulse {
    width: 16px; height: 16px; border-radius: 50%; background: #DC2626;
    margin: 0 auto 0.5rem;
    animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; }
}

/* Data table */
.table-container { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); }
.data-table th { font-weight: 600; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; background: #F9FAFB; }
.data-table tbody tr:hover { background: #F3F4F6; }

.badge-error { background: #FEE2E2; color: #991B1B; }
.badge-secondary { background: #F3F4F6; color: var(--text-muted); }
.alert-success { background-color: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; }

/* ============================================
   Phase 11: Notifications
   ============================================ */

/* Notification bell / badge (sidebar + header) */
.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: transform 0.2s;
}
.notif-bell:hover { transform: scale(1.1); }
.notif-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    background: #EF4444;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    animation: notifPulse 0.3s ease-out;
}
.notif-badge:empty,
.notif-badge[data-count="0"] { display: none; }

@keyframes notifPulse {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* Notifications page */
.notifications-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.notifications-title {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.notif-icon { font-size: 1.3rem; }
.notifications-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Notification card */
.notification-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    position: relative;
}
.notification-card:hover {
    background: #F0F4FF;
    box-shadow: var(--shadow-sm);
}
.notification-card.unread {
    background: #EEF2FF;
    border-color: #C7D2FE;
}
.notification-card.read {
    background: var(--card-bg);
    opacity: 0.85;
}
.notification-card-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.notification-card-content {
    flex: 1;
    min-width: 0;
}
.notification-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
    margin-bottom: 2px;
}
.notification-card-body {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notification-card-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    margin-top: 6px;
}

/* Button style for outline-sm */
.btn-outline-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-outline-sm:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #EEF2FF;
}

.notifications-load-more {
    text-align: center;
    padding: 1rem 0;
}
.speaking-prep-controls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}
.speaking-inline-status {
    min-height: 1.5rem;
    margin-top: 1rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-md);
    color: var(--text-muted);
}
.speaking-inline-status:empty { padding: 0; min-height: 0; }
.speaking-inline-status--error { color: var(--color-error, #b91c1c); background: color-mix(in srgb, var(--color-error, #b91c1c) 10%, transparent); }
.speaking-inline-status--success { color: var(--color-success, #047857); background: color-mix(in srgb, var(--color-success, #047857) 10%, transparent); }
.speaking-history-audio {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.speaking-history-audio audio { width: min(100%, 330px); }
.speaking-result-detail td {
    padding-top: 0;
    color: var(--text-muted);
    line-height: 1.55;
}
.qn-dot--group {
    width: auto;
    min-width: 44px;
    padding-inline: 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.question-block--grouped {
    border-inline-start: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
}
.question-group-context {
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary, rgba(148, 163, 184, 0.08));
    line-height: 1.55;
}
.question-group-context > strong { display: block; margin-bottom: 0.45rem; }
.test-layout.exam-shell .question-group-context {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
@media (max-width: 520px) {
    .speaking-card { padding: 1.15rem; margin: 1rem auto; }
    .speaking-prep-controls .btn { width: 100%; }
    .timer-value { font-size: 2.35rem; }
}

/* ============================================================
   Student portal read-only payments and attendance
   ============================================================ */
.portal-read-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}
.portal-page-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.portal-page-heading h1 { font-size: clamp(1.65rem, 3vw, 2.15rem); margin-bottom: 0.2rem; }
.portal-page-heading p { color: var(--text-muted); }
.portal-page-heading__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.portal-page-heading__icon--payment { color: #4338CA; background: #EEF2FF; }
.portal-page-heading__icon--attendance { color: #047857; background: #ECFDF5; }
.portal-data-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}
.portal-card-grid { display: grid; gap: 1rem; }
.portal-loading { min-height: 200px; display: grid; place-items: center; }
.portal-empty {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: 16px;
}
.portal-empty--error { color: #991B1B; background: #FEF2F2; border-color: #FECACA; }
.portal-soft-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: #F3F4F6;
    color: #4B5563;
    font-size: 0.72rem;
    font-weight: 600;
}
.portal-badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

.portal-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.portal-overview-card {
    min-height: 150px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem;
    background: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.portal-overview-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #C7D2FE; }
.portal-overview-card__icon {
    width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
}
.portal-overview-card--payment .portal-overview-card__icon { color: #4338CA; background: #EEF2FF; }
.portal-overview-card--attendance .portal-overview-card__icon { color: #047857; background: #ECFDF5; }
.portal-overview-card__body h2 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.portal-overview-card__body p { color: var(--text-muted); font-size: 0.86rem; margin-bottom: 0.65rem; }
.portal-overview-card__value { display: block; font-size: 0.82rem; }
/* LK-055 Б4: each detail line of the payment card (start date, past debt, overall balance) on its own line */
.portal-overview-card__body > small { display: block; }
.portal-overview-card__value--success { color: #047857; }
.portal-overview-card__value--warning { color: #B45309; }
.portal-overview-card__value--muted { color: var(--text-muted); }
.portal-overview-card__arrow { color: #9CA3AF; }
.portal-overview-card--loading {
    min-height: 150px;
    border-radius: 16px;
    background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
    background-size: 200% 100%;
    animation: portalSkeleton 1.3s infinite;
}
@keyframes portalSkeleton { to { background-position: -200% 0; } }

.payment-group-card { padding: 1.4rem; overflow: hidden; }
.payment-group-card--review { border-color: #FDE68A; background: #FFFBEB; }
.payment-group-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.payment-group-card__top h2 { font-size: 1.2rem; }
.payment-status, .attendance-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}
.payment-status--paid { color: #047857; background: #D1FAE5; }
.payment-status--prepayment { color: #1D4ED8; background: #DBEAFE; }
.payment-status--soon_due { color: #B45309; background: #FEF3C7; }
.payment-status--due { color: #B91C1C; background: #FEE2E2; }
.payment-status--requires_review { color: #92400E; background: #FEF3C7; }
/* LK-055 Б4: a group that has not started yet - informative, not a warning */
.payment-status--upcoming { color: #1D4ED8; background: #DBEAFE; }
.payment-upcoming-start { margin: 0.25rem 0 0; color: var(--text-muted); }
.payment-primary-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
}
.money { color: var(--text-main); font-size: 1.2rem; }
.money--debt { color: #B91C1C; }
.money--positive { color: #047857; }
.payment-forecast-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.payment-forecast-grid > div {
    min-height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.9rem;
    border-radius: 12px;
    background: #F8FAFC;
}
.payment-forecast-grid span { color: var(--text-muted); font-size: 0.78rem; }
.payment-forecast-grid strong { font-size: 1rem; }
.payment-forecast-grid small { color: var(--text-muted); font-size: 0.68rem; }
.payment-forecast-grid__accent { background: #EEF2FF !important; color: #3730A3; }
.payment-reminder, .payment-review-message {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    font-size: 0.86rem;
}
.payment-reminder { color: #92400E; background: #FEF3C7; }
.payment-reminder--urgent {
    color: #7C2D12;
    background: #FFEDD5;
    border: 2px solid #EA580C;
    font-size: 0.92rem;
}
.payment-reminder--urgent strong { font-size: 1.04rem; line-height: 1.35; }
.payment-review-message { color: #92400E; background: #FFF7ED; }
.payment-reminder .ui-icon, .payment-review-message .ui-icon { flex: 0 0 auto; margin-top: 1px; }

.attendance-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 1rem; margin-bottom: 1rem; }
.attendance-filters label { display: flex; flex-direction: column; gap: 0.35rem; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
.attendance-filters select, .attendance-filters input {
    width: 100%;
    min-height: 44px;
    padding: 0 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    color: var(--text-main);
    font: inherit;
}
.attendance-filters select:focus, .attendance-filters input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.attendance-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.attendance-summary-card { padding: 1.2rem; }
.attendance-summary-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.attendance-summary-card__head h2 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.attendance-percentage { text-align: right; }
.attendance-percentage strong { display: block; color: #047857; font-size: 1.55rem; line-height: 1; }
.attendance-percentage span { color: var(--text-muted); font-size: 0.7rem; }
.attendance-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.attendance-stat { padding: 0.7rem 0.55rem; border-radius: 10px; background: #F8FAFC; }
.attendance-stat strong { display: block; font-size: 1rem; }
.attendance-stat span { display: block; margin-top: 0.18rem; color: var(--text-muted); font-size: 0.67rem; }
.attendance-stat--present strong { color: #047857; }
.attendance-stat--late strong { color: #B45309; }
.attendance-stat--absent strong { color: #B91C1C; }
.attendance-stat--excused strong { color: #1D4ED8; }
.attendance-history { display: grid; gap: 0.65rem; }
.attendance-history-row {
    display: grid;
    grid-template-columns: minmax(145px, 0.65fr) minmax(240px, 2fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
}
.attendance-history-row time { font-weight: 600; font-size: 0.88rem; }
.attendance-history-row__main { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.attendance-history-row__main strong { overflow: hidden; text-overflow: ellipsis; }
.attendance-history-row__main span { color: var(--text-muted); font-size: 0.78rem; }
.attendance-status--present { color: #047857; background: #D1FAE5; }
.attendance-status--late { color: #B45309; background: #FEF3C7; }
.attendance-status--absent { color: #B91C1C; background: #FEE2E2; }
.attendance-status--excused { color: #1D4ED8; background: #DBEAFE; }
.attendance-status--requires_review { color: #92400E; background: #FFEDD5; }
.portal-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.portal-pagination span { color: var(--text-muted); font-size: 0.82rem; }
.portal-pagination .btn { min-height: 44px; }
.portal-pagination .btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 1280px) {
    .portal-read-page { max-width: 1080px; }
    .payment-forecast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .portal-read-page { padding: 1.25rem; }
    .attendance-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-summary-grid { grid-template-columns: 1fr; }
    .attendance-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-history-row { grid-template-columns: 125px minmax(0, 1fr) auto; }
}
@media (max-width: 620px) {
    .ielts-section,
    .ielts-section__head,
    .ielts-mock-list,
    .ielts-mock-row {
        min-width: 0;
        max-width: 100%;
    }
    .ielts-section__head {
        align-items: stretch;
        flex-direction: column;
    }
    .ielts-tabs {
        display: flex;
        width: 100%;
        min-width: 0;
    }
    .ielts-tab {
        flex: 1 1 0;
        min-width: 0;
    }
    .portal-overview-grid, .attendance-filters, .payment-forecast-grid { grid-template-columns: 1fr; }
    .portal-overview-card { min-height: 132px; padding: 1rem; }
    .payment-group-card__top, .payment-primary-amount { align-items: flex-start; flex-direction: column; }
    .payment-status { align-self: flex-start; }
    .attendance-history-row { grid-template-columns: 1fr auto; gap: 0.6rem; }
    .attendance-history-row time { grid-column: 1; }
    .attendance-history-row__main { grid-column: 1; }
    .attendance-history-row .attendance-status { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 420px) {
    .attendance-history-row { grid-template-columns: 1fr; }
    .attendance-history-row .attendance-status { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 390px) {
    .portal-read-page { padding: 1rem; }
    .portal-page-heading { align-items: flex-start; }
    .portal-page-heading__icon { width: 46px; height: 46px; border-radius: 13px; }
    .portal-page-heading p { font-size: 0.82rem; }
    .payment-group-card, .attendance-summary-card { padding: 1rem; }
    .attendance-summary-card__head { flex-direction: column; }
    .attendance-percentage { text-align: left; }
    .attendance-history-row { grid-template-columns: 1fr; }
    .attendance-history-row .attendance-status { grid-column: 1; grid-row: auto; justify-self: start; }
    .portal-pagination { justify-content: space-between; gap: 0.4rem; }
    .portal-pagination .btn { padding: 0.65rem 0.8rem; }
}

/* Secure Listening delivery: compact, accessible audio controls that remain
   usable inside the real exam topbar at desktop, tablet and 390px mobile. */
.exam-audio-player--compact {
    position: relative;
    width: min(440px, 38vw);
    min-width: 250px;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 8px;
    border-radius: 8px;
    background: transparent;
}
.exam-audio-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--exam-border);
    border-radius: 50%;
    background: var(--exam-panel-strong);
    color: var(--exam-text);
    cursor: pointer;
}
.exam-audio-toggle:focus-visible,
.exam-audio-retry:focus-visible,
.exam-audio-player--compact .audio-progress-bar:focus-visible,
.exam-audio-player--compact .volume-slider:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--exam-focus) 42%, transparent);
    outline-offset: 2px;
}
.exam-audio-player--compact .audio-progress-bar {
    min-width: 64px;
    flex: 1 1 120px;
    width: auto;
    height: 7px;
    margin: 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--exam-border-soft);
}
.exam-audio-player--compact .audio-volume {
    display: flex;
    align-items: center;
    flex: 0 1 112px;
    gap: 5px;
}
.exam-audio-player--compact .volume-slider {
    width: min(82px, 9vw);
    min-width: 54px;
}
.exam-audio-player__status:not(:empty) {
    position: absolute;
    top: 42px;
    left: 50%;
    z-index: 95;
    width: max-content;
    max-width: min(420px, calc(100vw - 24px));
    padding: 8px 12px;
    border: 1px solid var(--exam-border);
    border-radius: 8px;
    background: var(--exam-panel-strong);
    color: var(--exam-text);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    font-size: 12px;
    line-height: 1.35;
    transform: translateX(-50%);
}
.exam-audio-state {
    min-width: 250px;
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--exam-text);
    font-size: 12px;
}
.exam-audio-state span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.exam-audio-state small { color: var(--exam-text-muted); }
.exam-audio-state--error { color: var(--danger, #B91C1C); }
.exam-audio-retry {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--exam-border);
    border-radius: 8px;
    background: var(--exam-panel-strong);
    color: var(--exam-text);
    cursor: pointer;
}
.exam-audio-state__spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid var(--exam-border);
    border-top-color: var(--exam-focus);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.exam-audio-player.audio-ended { display: none; }

/* Completed Listening keeps the reference top-bar audio affordance while
   loading the media only through the protected result-bound Blob transport. */
.exam-result-audio { position: relative; }
.exam-result-audio__loading {
    display: inline-flex;
    max-width: 150px;
    color: var(--exam-text-muted);
    font-size: 0.72rem;
    line-height: 1.2;
}
.exam-result-audio__panel {
    position: absolute;
    z-index: 120;
    top: calc(100% + 10px);
    right: 0;
    width: 184px;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid var(--exam-border);
    border-radius: 10px;
    background: var(--exam-panel-strong);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}
.exam-result-audio__panel[hidden] { display: none; }
.exam-result-audio__play {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--exam-text);
    cursor: pointer;
}
.exam-result-audio__panel label { display: grid; place-items: center; color: var(--exam-text); }
.exam-result-audio__panel input[type="range"] { width: 88px; accent-color: var(--exam-accent); }
.exam-result-audio__trigger:focus-visible,
.exam-result-audio__play:focus-visible,
.exam-result-audio__panel input[type="range"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--exam-focus) 42%, transparent);
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .exam-result-audio__panel { position: fixed; top: 62px; right: 8px; width: min(184px, calc(100vw - 16px)); }
}

/* Real-exam autoplay gate. Browsers may reject autoplay even after protected
   audio has loaded. The full-viewport state mirrors the approved exam flow
   while keeping the underlying session and answers untouched. */
.exam-autoplay-gate {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: center;
    /* 053825/052110: the content sits 1.5px below the window centre. */
    padding: 32px 32px 29px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.exam-autoplay-gate__content {
    width: min(1320px, 100%);
    display: grid;
    justify-items: center;
    gap: 0;
    text-align: center;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.exam-autoplay-gate__icon {
    display: grid;
    place-items: center;
    height: 100px;
    color: #fff;
}

.exam-autoplay-gate__icon svg {
    width: 120px;
    height: 120px;
    stroke-width: 2;
}

.exam-autoplay-gate__message,
.exam-autoplay-gate__instruction,
.exam-autoplay-gate__status {
    margin: 0;
    color: #fff;
    font-family: inherit;
}

.exam-autoplay-gate__message {
    max-width: 1320px;
    margin-top: 36px;
    font-size: 21.25px;
    line-height: 30px;
}

.exam-autoplay-gate__instruction {
    margin-top: 20px;
    font-size: 21.25px;
    line-height: 30px;
}

.exam-autoplay-gate__play {
    width: 128px;
    height: 60px;
    margin-top: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 0 0 23px;
    border: 0;
    border-radius: 4px;
    background: #000;
    color: #fff;
    font-size: 20.5px;
    font-weight: 400;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
}

/* A dark filled circle with a black triangle, as on the reference. */
.exam-autoplay-gate__play svg {
    width: 33px;
    height: 33px;
    stroke: none;
}

.exam-autoplay-gate__play svg circle {
    fill: #202222;
}

.exam-autoplay-gate__play svg path {
    fill: #000;
}

.exam-autoplay-gate__play:hover { background: #0d0d0d; }
.exam-autoplay-gate__play:disabled { cursor: wait; opacity: 0.7; }
.exam-autoplay-gate__play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.exam-autoplay-gate__status {
    font-size: 14px;
}

.exam-autoplay-gate__status:not(:empty) {
    margin-top: 12px;
}

@media (max-width: 520px) {
    .exam-autoplay-gate { padding: 24px 18px; }
    .exam-autoplay-gate__message,
    .exam-autoplay-gate__instruction { font-size: 18px; line-height: 26px; }
    .exam-autoplay-gate__play { width: 132px; height: 52px; }
}


@media (max-width: 900px) {
    .test-layout--listening .exam-topbar {
        height: auto;
        min-height: 108px;
        grid-template-rows: 58px auto;
        padding-bottom: 8px;
    }
    .test-layout--listening .exam-topbar__identity {
        position: absolute;
        top: 12px;
        left: 10px;
        z-index: 1;
    }
    .test-layout--listening .exam-topbar__audio {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }
    .test-layout--listening .exam-audio-player--compact,
    .test-layout--listening .exam-audio-state {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .test-layout--listening .exam-audio-player--needs-start {
        display: grid;
        grid-template-columns: auto minmax(64px, 1fr) auto;
        grid-template-rows: auto auto;
    }
    .test-layout--listening .exam-audio-player--needs-start .exam-audio-player__status:not(:empty) {
        position: static;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: none;
        transform: none;
    }
    .test-layout--listening .exam-topbar--audio-prompt { min-height: 158px; }
}

@media (max-width: 400px) {
    .test-layout--listening .exam-topbar {
        min-height: 126px;
        padding-inline: 8px;
    }
    .test-layout--listening .exam-topbar--audio-prompt { min-height: 174px; }
    .test-layout--listening .exam-audio-player--compact {
        gap: 7px;
        padding-inline: 0;
    }
    .test-layout--listening .exam-audio-toggle {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
    .test-layout--listening .exam-audio-player--compact .audio-volume { flex-basis: 82px; }
    .test-layout--listening .exam-audio-player--compact .volume-slider { width: 54px; }
    .test-layout--listening .exam-audio-state {
        align-items: flex-start;
        font-size: 11px;
    }
    .test-layout--listening .exam-audio-state strong,
    .test-layout--listening .exam-audio-state small { white-space: normal; }
    .test-layout--listening .exam-audio-retry { min-height: 44px; }
}

/* ================================================================
   IELTS S2-C CORE — canonical catalog, pack and Vocabulary browse.
   This layer uses the accepted S2-B semantic tokens.
   ================================================================ */
.body--ielts .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ielts-catalog--s2c,
.ielts-vocabulary-browser { gap: 30px; }
.vocabulary-inline-status {
    min-height: 1.4rem;
    margin-top: 0.8rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius-md);
    color: var(--text-muted);
}
.vocabulary-inline-status:empty { min-height: 0; padding: 0; }
.vocabulary-inline-status--success { color: var(--color-success, #047857); background: color-mix(in srgb, var(--color-success, #047857) 10%, transparent); }
.vocabulary-inline-status--error { color: var(--color-error, #b91c1c); background: color-mix(in srgb, var(--color-error, #b91c1c) 10%, transparent); }

.ielts-catalog-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    min-width: 0;
}

.ielts-catalog-filter-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--ielts-border);
    border-radius: var(--ielts-p-radius-md);
    background: color-mix(in srgb, var(--ielts-panel) 82%, transparent);
}

.ielts-catalog-filter-row .ielts-catalog-select { flex: 1 1 160px; }
.ielts-catalog-filter-row .ielts-catalog-select.is-hidden { display: none; }

.ielts-catalog-topic-filter input {
    width: 100%;
    height: 50px;
    padding: 0 13px;
    border: 1px solid var(--ielts-border);
    border-radius: 8px;
    color: var(--ielts-text);
    background: var(--ielts-panel);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 750;
}

.ielts-filter-reset {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    border: 1px solid var(--ielts-border);
    border-radius: 8px;
    color: var(--ielts-text);
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.ielts-filter-reset[hidden] { display: none; }

.ielts-catalog-search {
    min-width: 220px;
    flex: 1 1 520px;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid var(--ielts-border);
    border-radius: 8px;
    color: var(--ielts-muted);
    background: color-mix(in srgb, var(--ielts-panel) 88%, transparent);
}

.ielts-catalog-search:focus-within {
    border-color: var(--ielts-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ielts-blue) 24%, transparent);
}

.ielts-catalog-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--ielts-text);
    background: transparent;
    font: inherit;
}

.ielts-catalog-search input::placeholder {
    color: var(--ielts-muted);
    opacity: 0.88;
}

.ielts-catalog-select {
    flex: 0 1 196px;
    min-width: 150px;
    display: grid;
    gap: 5px;
    color: var(--ielts-muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.ielts-catalog-select select {
    width: 100%;
    height: 50px;
    padding: 0 34px 0 13px;
    border: 1px solid var(--ielts-border);
    border-radius: 8px;
    color: var(--ielts-text);
    background: var(--ielts-panel);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 750;
}

.ielts-catalog-tabs,
.ielts-view-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 5px;
    border-radius: 9px;
    background: var(--ielts-soft);
}

.ielts-catalog-tabs button,
.ielts-view-toggle button {
    min-height: 40px;
    border: 0;
    border-radius: 7px;
    padding: 0 16px;
    color: var(--ielts-muted);
    background: transparent;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.ielts-catalog-tabs button { padding-inline: 12px; }

.ielts-view-toggle button {
    width: 52px;
    padding: 0;
    display: grid;
    place-items: center;
}

.ielts-view-icon-grid {
    width: 17px;
    height: 17px;
    display: block;
    background:
        linear-gradient(currentColor 0 0) 0 0 / 7px 7px no-repeat,
        linear-gradient(currentColor 0 0) 100% 0 / 7px 7px no-repeat,
        linear-gradient(currentColor 0 0) 0 100% / 7px 7px no-repeat,
        linear-gradient(currentColor 0 0) 100% 100% / 7px 7px no-repeat;
    border-radius: 2px;
}

.ielts-catalog-tabs button.is-active,
.ielts-view-toggle button.is-active {
    color: var(--ielts-text);
    background: var(--ielts-panel-2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.ielts-pack-card--catalog {
    min-height: 218px;
    padding: 30px;
    gap: 12px;
    justify-content: flex-start;
    transition: border-color var(--ielts-p-motion-fast) var(--ielts-p-ease), background var(--ielts-p-motion-fast) var(--ielts-p-ease), box-shadow var(--ielts-p-motion-fast) var(--ielts-p-ease);
}

.ielts-main:has(.ielts-catalog--s2c) .ielts-page-head { margin-bottom: 41px; }
.ielts-main:has(.ielts-catalog--s2c) .ielts-page-head h1 { font-size: 30px; }
.ielts-main:has(.ielts-catalog--s2c) .ielts-page-head p { font-size: 20px; }
.ielts-main:has(.ielts-catalog--s2c) .ielts-page-head__icon { width: 60px; height: 60px; }
.ielts-main:has(.ielts-catalog--s2c) .ielts-page-head:has(.ielts-page-head__meta) { margin-bottom: 22px; }
.ielts-main:has(.ielts-catalog--s2c) .ielts-page-head:has(.ielts-page-head__meta) p { font-size: 16px; }
.ielts-main:has(.ielts-catalog[data-catalog-kind="pack"]) {
    padding-top: 37px;
}
.ielts-main:has(.ielts-catalog[data-catalog-kind="pack"]) .ielts-page-head {
    align-items: flex-start;
    gap: 17px;
    margin-bottom: 28px;
}
.ielts-main:has(.ielts-catalog[data-catalog-kind="pack"]) .ielts-page-head h1 {
    font-size: 36px;
    line-height: 40px;
}
.ielts-main:has(.ielts-catalog[data-catalog-kind="pack"]) .ielts-page-head p {
    margin-top: 22px;
    font-size: 20px;
    line-height: 30px;
}
.ielts-main:has(.ielts-catalog[data-catalog-kind="pack"]) .ielts-page-head__icon {
    width: 38px;
    height: 38px;
    border-radius: 0;
    background: transparent;
    color: var(--ielts-blue);
}
.ielts-main:has(.ielts-catalog[data-catalog-kind="pack"]) .ielts-page-head__icon svg {
    width: 38px;
    height: 38px;
}
.ielts-main:has(.ielts-catalog[data-catalog-kind="pack"]) .ielts-page-head__meta {
    margin-top: 20px;
}
.ielts-page-head__meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
}
.ielts-page-head__meta .ielts-tag { min-height: 27px; }
.ielts-pack-card--catalog .ielts-pack-card__desc { margin-top: 5px !important; }
.ielts-pack-card--catalog > p { transform: translateY(-6px); }

.ielts-pack-card--catalog:hover,
.ielts-pack-card--catalog:focus-within {
    border-color: var(--ielts-s-border-strong);
    background: var(--ielts-panel-2);
}

.ielts-pack-card__title-row,
.ielts-entry-card__title-row,
.ielts-vocabulary-collection__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.ielts-pack-card--catalog .ielts-pack-card__footer {
    width: 100%;
    margin-top: auto;
}

.ielts-catalog-badge {
    min-height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 7px;
    color: #5C3900;
    background: var(--ielts-amber);
    font-size: 0.78rem;
    font-weight: 850;
}

.ielts-entry-results {
    display: grid;
    gap: 24px;
}

.ielts-entry-results--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ielts-entry-results--grid:has(.ielts-entry-card--pack) { gap: 30px; }

.ielts-entry-results--list {
    max-width: 960px;
    margin-inline: auto;
    grid-template-columns: 1fr;
}

.ielts-entry-card {
    min-width: 0;
    min-height: 226px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px;
    border: 1px solid var(--ielts-border);
    border-radius: var(--ielts-p-radius-lg);
    background: var(--ielts-panel);
    transition: border-color var(--ielts-p-motion-fast) var(--ielts-p-ease), background var(--ielts-p-motion-fast) var(--ielts-p-ease), box-shadow var(--ielts-p-motion-fast) var(--ielts-p-ease);
}

.ielts-entry-card:hover,
.ielts-entry-card:focus-within {
    border-color: var(--ielts-s-border-strong);
    background: var(--ielts-panel-2);
}

.ielts-entry-results--list .ielts-entry-card {
    min-height: 148px;
    flex-direction: row;
    align-items: center;
}

.ielts-entry-card__content {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.ielts-entry-card h3,
.ielts-vocabulary-collection h3,
.ielts-vocabulary-card h3 {
    min-width: 0;
    margin: 0;
    color: var(--ielts-text);
    font-size: var(--ielts-s-type-title);
    line-height: 1.35;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.ielts-entry-card__description,
.ielts-vocabulary-collection > p {
    margin: 0;
    color: var(--ielts-muted);
    line-height: 1.5;
}

.ielts-entry-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--ielts-muted);
    font-size: 0.9rem;
}

.ielts-entry-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ielts-entry-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.ielts-entry-card__badges {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ielts-entry-results--grid .ielts-entry-card__actions > * {
    flex: 0 0 auto;
    min-width: 110px;
}

.ielts-entry-card--pack {
    min-height: 235px;
    gap: 13px;
}

.ielts-entry-results--grid .ielts-entry-card--pack {
    padding: 33px 30px 30px;
}

.ielts-entry-card--pack .ielts-entry-card__content { gap: 17px; }
.ielts-entry-card--pack .ielts-entry-card__meta {
    font-size: 1rem;
    line-height: 1.5;
}
.ielts-entry-card--pack .ielts-tag {
    min-height: 28px;
    font-size: 0.875rem;
}
.ielts-entry-card--pack .ielts-entry-card__actions .ielts-solid-btn {
    min-width: 110px;
    min-height: 44px;
}

@media (min-width: 1840px) {
    .ielts-main:has(.ielts-catalog--s2c) {
        max-width: 1588px;
    }
}

.ielts-entry-card__reason {
    margin: 0;
    color: var(--ielts-muted);
    font-size: 0.83rem;
}

.ielts-status-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 27px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ielts-soft);
    color: var(--ielts-muted);
    font-size: 0.75rem;
    font-weight: 850;
}

.ielts-status-badge--success { color: var(--ielts-green); }
.ielts-status-badge--progress { color: var(--ielts-amber); }
.ielts-status-badge--muted { color: var(--ielts-muted); }

.ielts-state-panel {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 36px;
    border: 1px solid var(--ielts-border);
    border-radius: var(--ielts-p-radius-lg);
    color: var(--ielts-muted);
    background: var(--ielts-panel);
    text-align: center;
}

.ielts-state-panel h3,
.ielts-state-panel p {
    max-width: 520px;
    margin: 0;
}

.ielts-state-panel h3 {
    color: var(--ielts-text);
    font-size: 1.35rem;
}

.ielts-state-panel .ielts-outline-btn { margin-top: 8px; }

.ielts-skeleton-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ielts-skeleton-card {
    min-height: 190px;
    border: 1px solid var(--ielts-border);
    border-radius: var(--ielts-p-radius-lg);
    background: linear-gradient(100deg, var(--ielts-panel) 20%, var(--ielts-soft) 42%, var(--ielts-panel) 64%);
    background-size: 300% 100%;
    animation: ielts-catalog-shimmer 1.25s linear infinite;
}

@keyframes ielts-catalog-shimmer {
    to { background-position: -150% 0; }
}

.ielts-vocabulary-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.ielts-vocabulary-summary > .ielts-skeleton-grid { grid-column: 1 / -1; }

.ielts-vocabulary-stat,
.ielts-vocabulary-collection,
.ielts-vocabulary-card {
    border: 1px solid var(--ielts-border);
    border-radius: var(--ielts-p-radius-lg);
    background: var(--ielts-panel);
}

.ielts-vocabulary-stat {
    min-height: 96px;
    display: grid;
    place-content: center;
    gap: 4px;
    padding: 16px;
    text-align: center;
}

.ielts-vocabulary-stat strong {
    color: var(--ielts-text);
    font-size: 1.55rem;
}

.ielts-vocabulary-stat span {
    color: var(--ielts-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.ielts-vocabulary-collection-grid,
.ielts-vocabulary-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ielts-vocabulary-collection,
.ielts-vocabulary-card {
    min-width: 0;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
}

.ielts-vocabulary-collection .ielts-outline-btn { margin-top: auto; }

.ielts-vocabulary-source {
    color: var(--ielts-muted);
    font-size: 0.82rem;
}

.ielts-vocabulary-mini-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: var(--ielts-muted);
    font-size: 0.85rem;
}

.ielts-vocabulary-card__status {
    align-self: flex-start;
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--ielts-muted);
    background: var(--ielts-soft);
    font-size: 0.75rem;
    font-weight: 850;
}

.ielts-vocabulary-card details { margin-top: auto; }

.ielts-vocabulary-card summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid var(--ielts-border);
    border-radius: 8px;
    color: var(--ielts-text);
    cursor: pointer;
    list-style: none;
    font-weight: 800;
}

.ielts-vocabulary-card summary::-webkit-details-marker { display: none; }

.ielts-vocabulary-card__answer {
    display: grid;
    gap: 8px;
    padding: 16px 4px 4px;
    color: var(--ielts-text);
}

.ielts-vocabulary-card__answer p {
    margin: 0;
    color: var(--ielts-muted);
    line-height: 1.5;
}

.ielts-vocabulary-browser.is-flashcard-mode > :not(#vocabularyFlashcardStage) { display: none; }

.ielts-flashcard-flow {
    min-height: min(620px, calc(100vh - 190px));
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid var(--ielts-border);
    border-radius: var(--ielts-p-radius-xl);
    background: var(--ielts-panel);
}

.ielts-flashcard-flow__top,
.ielts-flashcard-flow__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ielts-flashcard-flow__top > div {
    min-width: min(360px, 50vw);
    display: grid;
    gap: 8px;
    color: var(--ielts-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.ielts-flashcard-flow progress {
    width: 100%;
    height: 7px;
    accent-color: var(--ielts-blue);
}

.ielts-flashcard-flow__card {
    width: min(720px, 100%);
    min-height: 360px;
    align-self: center;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: clamp(26px, 5vw, 60px);
    border: 1px solid var(--ielts-border);
    border-radius: var(--ielts-p-radius-xl);
    background: linear-gradient(145deg, var(--ielts-panel-2), var(--ielts-panel));
    box-shadow: var(--ielts-s-shadow-card);
    text-align: center;
}

.ielts-flashcard-flow__card > p,
.ielts-flashcard-flow__answer > p {
    margin: 0;
    color: var(--ielts-muted);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ielts-flashcard-flow__card h2 {
    margin: 0;
    color: var(--ielts-text);
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.ielts-flashcard-flow__answer {
    display: grid;
    gap: 8px;
    color: var(--ielts-text);
}

.ielts-flashcard-flow__answer strong { font-size: clamp(1.25rem, 3vw, 2rem); }
.ielts-flashcard-flow__answer span { color: var(--ielts-muted); line-height: 1.55; }

.ielts-flashcard-flow__review {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.ielts-flashcard-flow__review > button {
    min-width: 180px;
}

.ielts-flashcard-flow__message {
    min-height: 1.5em;
    color: var(--ielts-muted);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.body--ielts :is(.ielts-catalog-search, .ielts-catalog-select select, .ielts-catalog-select input, .ielts-filter-reset, .ielts-catalog-tabs button, .ielts-view-toggle button, .ielts-entry-card a, .ielts-entry-card button, .ielts-vocabulary-card summary, .ielts-flashcard-flow button):focus-visible {
    outline: 3px solid var(--ielts-blue);
    outline-offset: 3px;
}

@media (max-width: 1180px) {
    .ielts-entry-results--grid,
    .ielts-vocabulary-collection-grid,
    .ielts-vocabulary-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ielts-catalog-toolbar { flex-wrap: wrap; }
}

@media (max-width: 900px) {
    .ielts-catalog-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .ielts-catalog-search {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
    }

    .ielts-catalog-select { min-width: 0; }
    .ielts-catalog-tabs { justify-self: start; }
    .ielts-view-toggle { justify-self: end; }

    .ielts-entry-results--list .ielts-entry-card {
        flex-direction: column;
        align-items: stretch;
    }

    .ielts-entry-results--grid .ielts-entry-card__actions > * {
        flex: 1 1 0;
        min-width: 0;
    }

    .ielts-vocabulary-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ielts-catalog-filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .ielts-catalog--s2c,
    .ielts-vocabulary-browser { gap: 20px; }

    .ielts-catalog-toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ielts-catalog-search,
    .ielts-catalog-tabs,
    .ielts-catalog-select,
    .ielts-view-toggle {
        width: 100%;
        min-width: 0;
        grid-column: 1;
        justify-self: stretch;
    }

    .ielts-catalog-tabs button,
    .ielts-view-toggle button { flex: 1 1 0; }

    .ielts-entry-results--grid,
    .ielts-vocabulary-collection-grid,
    .ielts-vocabulary-card-grid,
    .ielts-skeleton-grid {
        grid-template-columns: 1fr;
    }

    .ielts-entry-card,
    .ielts-pack-card--catalog,
    .ielts-vocabulary-collection,
    .ielts-vocabulary-card {
        min-height: 0;
        padding: 20px;
    }

    .ielts-entry-card__title-row,
    .ielts-pack-card__title-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ielts-entry-card__actions,
    .ielts-pack-card--catalog .ielts-pack-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .ielts-entry-card__actions > *,
    .ielts-pack-card--catalog .ielts-pack-card__footer > * { width: 100%; }

    .ielts-vocabulary-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ielts-catalog-filter-row { grid-template-columns: 1fr; padding: 12px; }
    .ielts-catalog-filter-row .ielts-catalog-select,
    .ielts-filter-reset { width: 100%; }
    .ielts-flashcard-flow { min-height: calc(100vh - 120px); gap: 16px; padding: 16px; }
    .ielts-flashcard-flow__top { align-items: stretch; flex-direction: column; }
    .ielts-flashcard-flow__top > div { min-width: 0; }
    .ielts-flashcard-flow__card { min-height: 320px; padding: 24px 18px; }
    .ielts-flashcard-flow__nav > * { flex: 1 1 0; }

    .ielts-state-panel {
        min-height: 280px;
        padding: 26px 18px;
    }

    .ielts-pagination {
        gap: 10px;
        justify-content: space-between;
    }

    .ielts-pagination .ielts-outline-btn {
        min-width: 0;
        padding-inline: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ielts-skeleton-card { animation: none; }
}

/* ============================
   IELTSX 1:1 — part 1: platform shell and catalog lists.
   Values are taken from the IELTSX references at their own pixel scale
   (1917x1078 screenshots are 1:1; video frames are the same screen at 2/3).
   Scope: the IELTS sidebar and top bar on every platform page, and the
   catalog pages drawn by PracticeTestsView (.ieltsx-catalog-page). Mock
   Tests, Vocabulary, Performance and the exam keep their own styles.
   ============================ */

body.body--ielts {
    --ix-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --ix-bg: #191a1a;
    --ix-topbar: #191919;
    --ix-sidebar: #202222;
    --ix-card: #202222;
    --ix-icon-tile: #202222;
    --ix-border: #313535;
    --ix-chip: #313535;
    --ix-text: #e9e9e7;
    --ix-muted: #b7b7ae;
    --ix-label: #adadab;
    --ix-hover: rgba(255, 255, 255, 0.06);
    --ix-focus: #3b82f6;
    --ix-primary-bg: #e9e9e7;
    --ix-primary-text: #191a1a;
    --ix-tab-track: #202222;
    --ix-tab-active: #191a1a;
    --ix-toggle-active: #e9e9e7;
    --ix-toggle-active-text: #191a1a;
    --ix-max-bg: #fbbf24;
    --ix-max-text: #78350f;
    --ix-max-border: #fbbf24;
    --ix-plain-badge-bg: #e9e9e7;
    --ix-plain-badge-text: #191a1a;
    --ix-sidebar-text: #e9e9e7;
    --ix-sidebar-border: #313535;
    --ix-success: #34d399;
    --ix-success-bg: rgba(16, 185, 129, 0.15);
    --ix-success-border: rgba(16, 185, 129, 0.3);
    --ix-review-border: #313535;
    --ix-retake-border: #313535;
    --ix-menu-bg: #202222;
    --ix-shadow: none;
}

body.body--ielts.ielts-theme-light {
    --ix-bg: #ffffff;
    --ix-topbar: #ffffff;
    --ix-sidebar: #fafafa;
    --ix-card: #ffffff;
    --ix-icon-tile: #f1f5f9;
    --ix-border: #e2e8f0;
    --ix-chip: #f1f5f9;
    --ix-text: #020817;
    --ix-muted: #64748b;
    --ix-label: rgba(63, 63, 70, 0.7);
    --ix-hover: #f1f5f9;
    --ix-primary-bg: #0f172a;
    --ix-primary-text: #ffffff;
    --ix-tab-track: #f1f5f9;
    --ix-tab-active: #ffffff;
    --ix-toggle-active: #0f172a;
    --ix-toggle-active-text: #ffffff;
    --ix-max-bg: #fde047;
    --ix-max-text: #713f12;
    --ix-max-border: #facc15;
    --ix-plain-badge-bg: #ffffff;
    --ix-plain-badge-text: #020817;
    --ix-sidebar-text: #3f3f46;
    --ix-sidebar-border: #e5e7eb;
    --ix-success: #047857;
    --ix-review-border: #bfdbfe;
    --ix-retake-border: #a7f3d0;
    --ix-menu-bg: #ffffff;
    --ix-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* ---------- Shell: background of the work area ---------- */
body.body--ielts .lk-shell--ielts,
body.body--ielts .lk-shell--ielts .lk-main {
    background: var(--ix-bg);
}

body.body--ielts .lk-shell--ielts {
    grid-template-columns: 320px minmax(0, 1fr);
}

body.body--ielts .lk-shell--ielts.lk-shell--collapsed {
    grid-template-columns: 56px minmax(0, 1fr);
}

/* ---------- Sidebar ---------- */
body.body--ielts .ieltsx-sidebar {
    width: 320px;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--ix-sidebar);
    border-right: 1px solid var(--ix-sidebar-border);
    color: var(--ix-sidebar-text);
    font-family: var(--ix-font);
}

body.body--ielts .ieltsx-sidebar__header {
    flex: 0 0 auto;
    padding: 10px 15px 0;
}

body.body--ielts .ieltsx-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 30px;
    border-radius: 8px;
    color: var(--ix-text);
    text-decoration: none;
}

body.body--ielts .ieltsx-sidebar__logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: block;
}

body.body--ielts .ieltsx-sidebar__logo img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

body.body--ielts .ieltsx-sidebar__brand-copy {
    min-width: 0;
    display: grid;
    line-height: 1.12;
}

body.body--ielts .ieltsx-sidebar__brand-copy strong {
    font-size: 17.5px;
    font-weight: 600;
    white-space: nowrap;
}

body.body--ielts .ieltsx-sidebar__brand-copy small {
    font-size: 15.3px;
    font-weight: 400;
    white-space: nowrap;
}

body.body--ielts .ieltsx-sidebar__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 26px 0 12px;
    scrollbar-color: auto;
}

body.body--ielts .ieltsx-sidebar__group {
    padding: 0 8px;
    margin: 0 0 30px;
}

body.body--ielts .ieltsx-sidebar__group-label {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--ix-label);
    font-size: 15.3px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

body.body--ielts .ieltsx-sidebar__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

body.body--ielts .ieltsx-nav-item {
    width: 100%;
    height: 44.67px;
    min-height: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ix-sidebar-text);
    font-size: 17.5px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    box-shadow: none;
    outline: none;
}

body.body--ielts .ieltsx-nav-item .lk-nav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block;
    color: inherit;
    opacity: 1;
}

body.body--ielts .ieltsx-nav-item .lk-nav-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.body--ielts .ieltsx-nav-item .lk-nav-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The current page is not highlighted on the references; it is marked for
   assistive technology by aria-current. Hover and keyboard focus are. */
body.body--ielts .ieltsx-nav-item.lk-nav-item--active,
body.body--ielts .ieltsx-nav-item[aria-current="page"] {
    background: transparent;
    color: var(--ix-sidebar-text);
    box-shadow: none;
    font-weight: 400;
}

body.body--ielts .ieltsx-nav-item.lk-nav-item--active::before,
body.body--ielts .ieltsx-nav-item.lk-nav-item--active::after {
    content: none;
    display: none;
}

body.body--ielts .ieltsx-nav-item:hover {
    background: var(--ix-hover);
}

body.body--ielts .ieltsx-nav-item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ix-focus);
}

body.body--ielts .ieltsx-sidebar__footer {
    flex: 0 0 auto;
    position: relative;
    margin: 0;
    padding: 8px 15px 12px;
    border: 0;
    background: transparent;
}

body.body--ielts .ieltsx-user__button {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 7px 6px 5px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ix-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

body.body--ielts .ieltsx-user__button:hover,
body.body--ielts .ieltsx-user__button[aria-expanded="true"] {
    background: var(--ix-hover);
}

body.body--ielts .ieltsx-user__button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ix-focus);
}

body.body--ielts .ieltsx-user__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--ix-chip);
    color: var(--ix-text);
    font-size: 15.3px;
    font-weight: 600;
}

body.body--ielts .ieltsx-user__copy {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    line-height: 1.25;
}

body.body--ielts .ieltsx-user__copy strong,
body.body--ielts .ieltsx-user__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.body--ielts .ieltsx-user__copy strong {
    font-size: 17.5px;
    font-weight: 600;
}

body.body--ielts .ieltsx-user__copy small {
    color: var(--ix-text);
    font-size: 15.3px;
    font-weight: 400;
}

body.body--ielts .ieltsx-user__chevrons {
    flex: 0 0 20px;
    display: block;
    color: var(--ix-text);
}

body.body--ielts .ieltsx-user__chevrons svg {
    display: block;
}

body.body--ielts .ieltsx-user-menu {
    position: absolute;
    left: calc(100% + 4px);
    bottom: 15px;
    z-index: 80;
    width: 260px;
    padding: 5px;
    border: 1px solid var(--ix-border);
    border-radius: 8px;
    background: var(--ix-menu-bg);
    color: var(--ix-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    font-family: var(--ix-font);
}

body.body--ielts .ieltsx-user-menu[hidden] {
    display: none;
}

body.body--ielts .ieltsx-user-menu__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
}

body.body--ielts .ieltsx-user-menu__separator {
    height: 1px;
    margin: 4px -5px;
    background: var(--ix-border);
}

body.body--ielts .ieltsx-user-menu__label {
    padding: 6px 8px 2px;
    color: var(--ix-muted);
    font-size: 13px;
    font-weight: 600;
}

body.body--ielts .ieltsx-user-menu__item {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ix-text);
    font: inherit;
    font-size: 15.3px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

body.body--ielts .ieltsx-user-menu__item:hover,
body.body--ielts .ieltsx-user-menu__item:focus-visible {
    outline: none;
    background: var(--ix-hover);
}

body.body--ielts .ieltsx-user-menu__check {
    margin-left: auto;
    visibility: hidden;
}

body.body--ielts .ieltsx-user-menu__item.is-selected .ieltsx-user-menu__check {
    visibility: visible;
}

/* Collapsed desktop rail (TZ § 13): icons only, nothing truncated. */
body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-sidebar {
    width: 56px;
}

body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-sidebar__header {
    padding: 15px 13px 0;
}

body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-sidebar__brand-copy,
body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-nav-item .lk-nav-text,
body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-nav-item .lk-nav-badge,
body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-nav-item .ielts-nav-lock,
body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-user__copy,
body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-user__chevrons {
    display: none;
}

body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-sidebar__group {
    padding: 0 8px;
    margin-bottom: 18px;
}

/* Group titles leave the rail entirely, as in the shadcn icon sidebar of
   IELTSX: no cut-off words; the groups stay apart by their spacing. */
body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-sidebar__group-label {
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}

/* The name of an item comes from the rail tooltip below, not from the
   older cabinet tooltip that the narrow rail would clip. */
body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-nav-item::after {
    content: none;
    display: none;
}

body.body--ielts .ieltsx-rail-tip {
    position: fixed;
    z-index: 1100;
    transform: translateY(-50%);
    padding: 6px 13px;
    border-radius: 6px;
    background: var(--ix-primary-bg);
    color: var(--ix-primary-text);
    font-family: var(--ix-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
}

body.body--ielts .ieltsx-rail-tip[hidden] {
    display: none;
}

body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-nav-item {
    justify-content: center;
    padding: 0;
}

body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-sidebar__footer {
    padding: 8px 8px 15px;
}

body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-user__button {
    justify-content: center;
    padding: 6px 0;
}

/* ---------- Top bar and breadcrumbs ---------- */
body.body--ielts .lk-shell--ielts .ielts-breadcrumb {
    height: 70px;
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 20px 0 12px;
    border-bottom: 1px solid var(--ix-border);
    background: var(--ix-topbar);
    font-family: var(--ix-font);
    font-size: 17.5px;
    line-height: 1.4;
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__panel {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ix-text);
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__panel:hover {
    background: var(--ix-hover);
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__panel svg {
    display: block;
    width: 20px;
    height: 20px;
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__separator {
    width: 1px;
    height: 20px;
    margin: 0 20px 0 11px;
    background: var(--ix-border);
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__trail {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__trail a,
body.body--ielts .lk-shell--ielts .ielts-breadcrumb__trail strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17.5px;
    line-height: 1.4;
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__trail a {
    color: var(--ix-muted);
    font-weight: 500;
    text-decoration: none;
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__trail a:hover {
    color: var(--ix-text);
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__trail strong {
    color: var(--ix-text);
    font-weight: 600;
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__chevron {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--ix-muted);
}

body.body--ielts .lk-shell--ielts .ielts-breadcrumb__chevron svg {
    display: block;
}

/* ---------- Catalog pages ---------- */
body.body--ielts .ielts-platform.ieltsx-catalog-page {
    font-family: var(--ix-font);
    color: var(--ix-text);
    background: var(--ix-bg);
}

body.body--ielts .ieltsx-catalog-page .ielts-main {
    max-width: none;
    margin: 0;
    padding: 30px 30px 48px;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head {
    margin: 0 0 33px;
    padding: 0;
    gap: 20px;
    align-items: flex-start;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head h1 {
    margin: 0;
    color: var(--ix-text);
    font-family: var(--ix-font);
    font-size: 31px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head p {
    margin: 6px 0 0;
    color: var(--ix-muted);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--direction .ieltsx-head__icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--ix-icon-tile);
}

body.body--ielts .ieltsx-catalog-page.ielts-platform--listening .ieltsx-head--direction .ieltsx-head__icon { color: #f59e0b; }
body.body--ielts .ieltsx-catalog-page.ielts-platform--reading .ieltsx-head--direction .ieltsx-head__icon { color: #10b981; }
body.body--ielts .ieltsx-catalog-page.ielts-platform--writing .ieltsx-head--direction .ieltsx-head__icon { color: #3b82f6; }
body.body--ielts .ieltsx-catalog-page.ielts-platform--speaking .ieltsx-head--direction .ieltsx-head__icon { color: #f43f5e; }

/* Pack header: the bare blue icon in front of the title, description and
   the direction / tier badges underneath. */
body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--pack {
    display: block;
    margin: 0 0 30px;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--pack .ieltsx-head__title-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--pack .ieltsx-head__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: block;
    color: #3b82f6;
    background: transparent;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--pack .ieltsx-head__icon svg {
    display: block;
    width: 40px;
    height: 40px;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--pack h1 {
    font-size: 39px;
    font-weight: 600;
    line-height: 1.25;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--pack p {
    margin: 18px 0 0;
    font-size: 22.5px;
    line-height: 1.4;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--pack .ielts-page-head__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--pack .ieltsx-head__copy p + .ielts-page-head__meta {
    margin-top: 22px;
}

/* Part Practice header: small bare icon, title and description. */
body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--part {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 2px 0 30px;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--part .ieltsx-head__icon {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    margin-top: 17px;
    display: grid;
    place-items: center;
    background: transparent;
}

body.body--ielts .ieltsx-catalog-page.ielts-platform--listening .ieltsx-head--part .ieltsx-head__icon { color: #f59e0b; }
body.body--ielts .ieltsx-catalog-page.ielts-platform--reading .ieltsx-head--part .ieltsx-head__icon { color: #10b981; }
body.body--ielts .ieltsx-catalog-page.ielts-platform--writing .ieltsx-head--part .ieltsx-head__icon { color: #3b82f6; }
body.body--ielts .ieltsx-catalog-page.ielts-platform--speaking .ieltsx-head--part .ieltsx-head__icon { color: #f43f5e; }

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--part h1 {
    font-size: 31px;
}

body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--part p {
    margin: 1px 0 0;
    font-size: 17.5px;
}

/* Catalog body */
body.body--ielts .ieltsx-catalog-page .ieltsx-catalog {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-catalog .ielts-catalog__count {
    margin: 0 0 33px;
    color: var(--ix-muted);
    font-size: 17.5px;
    line-height: 1.4;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-catalog .ielts-catalog__count[hidden] {
    display: none;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-catalog .ielts-results {
    min-height: 0;
}

/* Badges */
body.body--ielts .ieltsx-catalog-page .ieltsx-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 27px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 15.3px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-badge--direction {
    padding: 0 12.5px;
    background: var(--ix-chip);
    color: var(--ix-text);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-badge--max {
    background: var(--ix-max-bg);
    box-shadow: inset 0 0 0 1px var(--ix-max-border);
    color: var(--ix-max-text);
    font-weight: 500;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-badge--plain {
    background: var(--ix-plain-badge-bg);
    color: var(--ix-plain-badge-text);
    border: 1px solid var(--ix-border);
    font-weight: 500;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-badge svg {
    flex: 0 0 auto;
    display: block;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-badge--entry {
    height: 26px;
    padding: 0 10px;
    font-size: 13px;
}

/* Direction page: category groups of pack cards */
body.body--ielts .ieltsx-catalog-page .ieltsx-pack-group {
    margin: 0 0 40px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 22px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-group__head h2 {
    min-width: 0;
    margin: 0;
    color: var(--ix-text);
    font-size: 22.5px;
    font-weight: 600;
    line-height: 1.3;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-group__head span {
    flex: 0 0 auto;
    color: var(--ix-muted);
    font-size: 17.5px;
    white-space: nowrap;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-card {
    min-width: 0;
    min-height: 217px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 30px;
    border: 1px solid var(--ix-border);
    border-radius: 12px;
    background: var(--ix-card);
    box-shadow: var(--ix-shadow);
    transform: none;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-card:hover,
body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card:hover {
    border-color: var(--ix-border);
    background: var(--ix-card);
    box-shadow: var(--ix-shadow), 0 4px 14px rgba(0, 0, 0, 0.18);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-card__titles {
    min-width: 0;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-card h3 {
    margin: 0;
    color: var(--ix-text);
    font-size: 19.5px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-card p {
    margin: 0;
    transform: none;
    color: var(--ix-muted);
    font-size: 17.5px;
    line-height: 1.5;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-card .ieltsx-pack-card__direction {
    margin-top: 4px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-card .ieltsx-pack-card__desc {
    margin: 14px 0 0;
    font-size: 17.5px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-pack-card__footer {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 27px;
    padding: 0 13px;
    border-radius: 6px;
    background: var(--ix-chip);
    color: var(--ix-text);
    font-size: 15.3px;
    font-weight: 600;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-count-chip svg {
    display: block;
}

/* Buttons */
body.body--ielts .ieltsx-catalog-page .ieltsx-btn {
    flex: 0 0 auto;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 0 17px;
    border: 1px solid var(--ix-border);
    border-radius: 6px;
    background: var(--ix-bg);
    color: var(--ix-text);
    font-family: var(--ix-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-btn svg {
    flex: 0 0 auto;
    display: block;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-btn:hover {
    background: var(--ix-hover);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-btn:focus-visible {
    outline: 2px solid var(--ix-focus);
    outline-offset: 2px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-btn--primary {
    border-color: var(--ix-primary-bg);
    background: var(--ix-primary-bg);
    color: var(--ix-primary-text);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-btn--primary:hover {
    border-color: var(--ix-primary-bg);
    background: var(--ix-primary-bg);
    opacity: 0.9;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-btn--view {
    height: 40px;
    padding: 0 15px 0 16px;
    gap: 10px;
    background: var(--ix-bg);
}

/* Review and Retake are outlined in the colour of their action (light frames). */
body.body--ielts .ieltsx-catalog-page .ieltsx-btn--review {
    border-color: var(--ix-review-border);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-btn--retake {
    border-color: var(--ix-retake-border);
}

/* Pack page toolbar */
body.body--ielts .ieltsx-catalog-page .ieltsx-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 0 30px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-search {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid var(--ix-border);
    border-radius: 6px;
    background: var(--ix-bg);
    color: var(--ix-muted);
    box-shadow: none;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-search:focus-within {
    border-color: var(--ix-focus);
    box-shadow: 0 0 0 1px var(--ix-focus);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-search svg {
    flex: 0 0 auto;
    display: block;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ix-text);
    font-family: var(--ix-font);
    font-size: 17.5px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-search input::placeholder {
    color: var(--ix-muted);
    opacity: 1;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-tabs {
    flex: 0 0 auto;
    height: 50px;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 3px 5px;
    border-radius: 6px;
    background: var(--ix-tab-track);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-tabs button {
    min-height: 0;
    padding: 0 15px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ix-muted);
    font-family: var(--ix-font);
    font-size: 17.5px;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-tabs button.is-active {
    background: var(--ix-tab-active);
    color: var(--ix-text);
    font-weight: 600;
    box-shadow: var(--ix-shadow);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-view-toggle {
    flex: 0 0 auto;
    height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 5px;
    border: 1px solid var(--ix-border);
    border-radius: 6px;
    background: var(--ix-bg);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-view-toggle button {
    width: 50px;
    height: 40px;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ix-text);
    box-shadow: none;
    cursor: pointer;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-view-toggle button.is-active {
    background: var(--ix-toggle-active);
    color: var(--ix-toggle-active-text);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-view-toggle svg {
    display: block;
}

/* Test cards: list and grid */
body.body--ielts .ieltsx-catalog-page .ieltsx-test-results {
    display: grid;
    gap: 20px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-results--list {
    max-width: 960px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-results--grid {
    max-width: none;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 31px 30px 32px;
    border: 1px solid var(--ix-border);
    border-radius: 12px;
    background: var(--ix-card);
    box-shadow: var(--ix-shadow);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card:hover,
body.body--ielts .ieltsx-catalog-page .ieltsx-test-card:focus-within {
    border-color: var(--ix-border);
    background: var(--ix-card);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__main {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    align-content: start;
    gap: 14px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__title-row {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 4px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card h3 {
    min-width: 0;
    margin: -3px 0 0;
    color: var(--ix-text);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__badges {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__origin {
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--ix-muted);
    font-size: 17.5px;
    line-height: 1.4;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__origin svg {
    flex: 0 0 auto;
    display: block;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__reason {
    margin: 0;
    color: var(--ix-muted);
    font-size: 15.3px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-tag {
    height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 13.5px;
    border-radius: 6px;
    background: var(--ix-chip);
    color: var(--ix-text);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-tag--more {
    color: var(--ix-muted);
    font-weight: 500;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-status {
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    border: 1px solid var(--ix-success-border);
    border-radius: 6px;
    background: var(--ix-success-bg);
    color: var(--ix-success);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-status svg {
    flex: 0 0 auto;
    display: block;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-status--progress {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

body.body--ielts.ielts-theme-light .ieltsx-catalog-page .ieltsx-status--progress {
    color: #b45309;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-status--muted {
    border-color: var(--ix-border);
    background: var(--ix-chip);
    color: var(--ix-muted);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--grid {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--grid .ieltsx-test-card__title-row {
    justify-content: space-between;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--grid {
    padding: 31px 30px 30px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--grid .ieltsx-test-card__title-row {
    margin-bottom: 0;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-btn--start {
    padding: 0 17px 0 15px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--grid .ieltsx-test-card__actions {
    margin-top: auto;
    padding-top: 20px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--grid .ieltsx-btn {
    height: 45px;
    min-height: 45px;
    padding: 0 22px;
    gap: 11px;
    font-size: 17.5px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--grid .ieltsx-btn--start {
    padding: 0 20px;
    gap: 10px;
}

/* A card without question-type tags (Speaking): the reference keeps more
   room under the source in the list and less above the buttons in the grid
   (list 148px, grid 189px high, measured on the 22.07 and 10.08 frames). */
body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--bare {
    padding-bottom: 44.5px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--grid.ieltsx-test-card--bare {
    padding-bottom: 30px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--grid.ieltsx-test-card--bare .ieltsx-test-card__actions {
    padding-top: 12.5px;
}

/* Part Practice */
body.body--ielts .ieltsx-catalog-page .ieltsx-filter-panel {
    display: grid;
    gap: 20px;
    margin: 0 0 32px;
    padding: 20px;
    border: 1px solid var(--ix-border);
    border-radius: 12px;
    background: var(--ix-card);
    box-shadow: var(--ix-shadow);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-filter-panel__search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-filter-panel .ieltsx-search {
    height: 45px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-search-button {
    height: 45px;
    min-height: 45px;
    padding: 0 30px 0 32px;
    gap: 18px;
    font-size: 17.5px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-select {
    position: relative;
    flex: 0 0 auto;
    display: block;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-select.is-hidden {
    display: none;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-select select {
    height: 45px;
    min-width: 140px;
    padding: 0 45px 0 15px;
    border: 1px solid var(--ix-border);
    border-radius: 6px;
    background: var(--ix-card);
    color: var(--ix-text);
    font-family: var(--ix-font);
    font-size: 17.5px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Fixed widths and two label styles of the five reference dropdowns. */
body.body--ielts .ieltsx-catalog-page [data-filter-wrap="part"] select { width: 146px; min-width: 0; }
body.body--ielts .ieltsx-catalog-page [data-filter-wrap="status"] select { width: 150px; min-width: 0; }
body.body--ielts .ieltsx-catalog-page [data-filter-wrap="questionType"] select { width: 126px; min-width: 0; }
body.body--ielts .ieltsx-catalog-page [data-filter-wrap="pack"] select { width: 188px; min-width: 0; }

body.body--ielts .ieltsx-catalog-page [data-filter-wrap="part"] select,
body.body--ielts .ieltsx-catalog-page [data-filter-wrap="questionType"] select {
    font-size: 14px;
    font-weight: 600;
}

body.body--ielts .ieltsx-catalog-page [data-filter-wrap="part"] svg,
body.body--ielts .ieltsx-catalog-page [data-filter-wrap="questionType"] svg {
    color: var(--ix-text);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-select svg {
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ix-muted);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-filter-reset {
    min-height: 45px;
    padding: 0 15px;
    border: 0;
    background: transparent;
    color: var(--ix-muted);
    font-family: var(--ix-font);
    font-size: 15.3px;
    font-weight: 600;
    cursor: pointer;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-filter-reset[hidden] {
    display: none;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 27px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ix-border);
    border-radius: 12px;
    background: var(--ix-card);
    box-shadow: var(--ix-shadow);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__visual {
    position: relative;
    min-height: 365px;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #f6a33f 0%, #ef8f5c 55%, #d9a531 100%);
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card--reading .ieltsx-practice-card__visual { background: linear-gradient(160deg, #4cc79a 0%, #62d48e 55%, #3aa9a2 100%); }
body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card--writing .ieltsx-practice-card__visual { background: linear-gradient(160deg, #5b8def 0%, #6d6af0 55%, #8b5cf6 100%); }
body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card--speaking .ieltsx-practice-card__visual { background: linear-gradient(160deg, #f07aa8 0%, #ef6f9c 55%, #e5544d 100%); }

body.body--ielts .ieltsx-catalog-page .ieltsx-badge--part {
    position: absolute;
    top: 18px;
    right: 18px;
    height: 27px;
    padding: 0 13px;
    background: rgba(32, 34, 34, 0.86);
    color: #ffffff;
    font-size: 15.3px;
}

/* LK-046: a test with an illustration shows it over the whole cover, the part
   badge above it (TZ 17.2; reference video 23-27-52 t02482, lower row). */
body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__visual--image {
    overflow: hidden;
    background: #e5e7eb;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__visual--image .ieltsx-badge--part {
    z-index: 1;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__center {
    display: grid;
    justify-items: center;
    gap: 12px;
    color: #ffffff;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__center svg {
    display: block;
    width: 36px;
    height: 36px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__center strong {
    font-size: 17.5px;
    font-weight: 600;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 22px 20px 20px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__body h3 {
    margin: 0;
    color: var(--ix-text);
    font-size: 19.7px;
    font-weight: 600;
    line-height: 1.4;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-catalog--part .ielts-catalog__count {
    margin-bottom: 17px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__body .ieltsx-test-card__origin {
    font-size: 15.3px;
}

/* The buttons of one row stand on the same line, as on the reference. */
body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__body .ieltsx-test-card__actions {
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 8px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-practice-card__body .ieltsx-btn {
    gap: 15px;
}

/* Empty, error and pagination */
body.body--ielts .ieltsx-catalog-page .ieltsx-empty {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 60px 20px 40px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ix-muted);
    text-align: center;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-empty__icon {
    color: var(--ix-muted);
    margin-bottom: 30px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-empty__icon svg {
    display: block;
    stroke-width: 1.5;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-empty h3 {
    margin: 0 0 18px;
    color: var(--ix-text);
    font-size: 22px;
    font-weight: 600;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-empty p {
    margin: 0;
    color: var(--ix-muted);
    font-size: 19px;
}

body.body--ielts .ieltsx-catalog-page .ielts-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 30px 0 0;
    color: var(--ix-muted);
    font-size: 17.5px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-btn--page {
    height: 45px;
    padding: 0 20px;
    font-size: 17.5px;
}

/* ---------- Narrow screens ---------- */
@media (max-width: 1280px) {
    body.body--ielts .ieltsx-catalog-page .ieltsx-pack-grid,
    body.body--ielts .ieltsx-catalog-page .ieltsx-test-results--grid,
    body.body--ielts .ieltsx-catalog-page .ieltsx-practice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body.body--ielts .lk-shell--ielts,
    body.body--ielts .lk-shell--ielts.lk-shell--collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    body.body--ielts .ieltsx-sidebar,
    body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-sidebar {
        width: min(320px, 86vw);
    }

    body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-sidebar__brand-copy,
    body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-nav-item .lk-nav-text,
    body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-user__copy,
    body.body--ielts .lk-shell--ielts.lk-shell--collapsed .ieltsx-user__chevrons {
        display: revert;
    }

    body.body--ielts .ieltsx-user-menu {
        left: 15px;
        right: 15px;
        bottom: calc(100% - 8px);
        width: auto;
    }

    body.body--ielts .ieltsx-catalog-page .ielts-main {
        padding: 22px 16px 40px;
    }
}

@media (max-width: 760px) {
    body.body--ielts .ieltsx-catalog-page .ieltsx-pack-grid,
    body.body--ielts .ieltsx-catalog-page .ieltsx-test-results--grid,
    body.body--ielts .ieltsx-catalog-page .ieltsx-practice-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.body--ielts .ieltsx-catalog-page .ieltsx-toolbar {
        flex-wrap: wrap;
    }

    body.body--ielts .ieltsx-catalog-page .ieltsx-toolbar .ieltsx-search {
        flex: 1 1 100%;
    }

    body.body--ielts .ieltsx-catalog-page .ieltsx-pack-group__head span {
        flex: 0 0 auto;
    }

    body.body--ielts .ieltsx-catalog-page .ieltsx-test-card {
        flex-direction: column;
        align-items: stretch;
    }

    body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__title-row {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    body.body--ielts .ieltsx-catalog-page .ieltsx-filter-panel__search {
        flex-wrap: wrap;
    }

    body.body--ielts .ieltsx-catalog-page .ieltsx-filter-panel__search .ieltsx-search,
    body.body--ielts .ieltsx-catalog-page .ieltsx-search-button {
        flex: 1 1 100%;
    }

    body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head h1 {
        font-size: 26px;
    }

    body.body--ielts .ieltsx-catalog-page .ielts-main .ieltsx-head--pack h1 {
        font-size: 32px;
    }

    body.body--ielts .lk-shell--ielts .ielts-breadcrumb {
        height: 56px;
        min-height: 56px;
        padding: 0 12px;
    }

    body.body--ielts .lk-shell--ielts .ielts-breadcrumb__trail a,
    body.body--ielts .lk-shell--ielts .ielts-breadcrumb__trail strong {
        font-size: 15.3px;
    }
}

/* ============================
   IELTSX 1:1 — part 2: the test start screen (ExamUI.preStart).
   Measured on the dark PNG references 1:1 (Speaking 043729, Listening
   052059/055804/060037, Reading 07-24 165936) and on the light and Writing
   video frames at 2/3. Scope: .exam-prestart.ieltsx-prestart only; the exam
   itself keeps its own styles.
   ============================ */

.exam-prestart.ieltsx-prestart {
    --px-bg: #f0f6ff;
    --px-card: #ffffff;
    --px-text: #020817;
    --px-muted: #64748b;
    --px-line: #e2e8f0;
    --px-topline: #d1d5db;
    --px-radio: #64748b;
    --px-red: #dc2626;
    --px-selected-bg: #ffffff;
    --px-button-bg: #0f172a;
    --px-button-text: #ffffff;
    /* The light card has a grey inner edge on the sides and a heavier one at
       the bottom, none at the top, over a short dropped shadow (fitted to the
       10.08 frames). */
    --px-card-shadow: inset 0 -2px 0 2px rgba(0, 0, 0, 0.2), 0 3px 4px rgba(0, 0, 0, 0.22), 0 8px 10px -4px rgba(0, 0, 0, 0.1);
    --px-mode-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --px-selected-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.1), 0 2px 4px -2px rgba(220, 38, 38, 0.1);
    background: var(--px-bg);
    color: var(--px-text);
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    scrollbar-gutter: auto;
}

.exam-theme-dark .exam-prestart.ieltsx-prestart {
    --px-bg: #191a1a;
    --px-card: #202222;
    --px-text: #e9e9e7;
    --px-muted: #b7b7ae;
    --px-line: #313535;
    --px-topline: #d1d5db;
    --px-radio: #b7b7ae;
    --px-selected-bg: #222121;
    --px-button-bg: #e9e9e7;
    --px-button-text: #191a1a;
    /* The dark card is outlined a shade lighter than the page, not shadowed;
       a lighter line runs two pixels above its bottom edge. */
    --px-card-shadow: inset 0 0 0 1px #1d1d1d, inset 0 -2px 0 #202222, inset 0 -3px 0 #272827, 0 0 0 1px #1b1c1c;
    --px-mode-shadow: none;
    --px-selected-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.2), 0 2px 4px -2px rgba(220, 38, 38, 0.2);
}

/* A start error keeps the cabinet alert in the light theme and is drawn in
   the card's own dark tones in the dark one. */
.exam-theme-dark .exam-prestart.ieltsx-prestart .exam-prestart__ready .alert-error {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
}

.exam-prestart.ieltsx-prestart .exam-prestart__topbar {
    height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid var(--px-topline);
    background: var(--px-bg);
}

.exam-prestart.ieltsx-prestart .exam-prestart__brand {
    gap: 12px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__brand img {
    width: 36px;
    height: 36px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__brand strong,
.exam-prestart.ieltsx-prestart .exam-prestart__brand span {
    margin: 0;
    color: var(--px-text);
    font-size: 15.3px;
    font-weight: 600;
}

.exam-prestart.ieltsx-prestart .exam-prestart__stage {
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
    padding: 19px 24px 60px;
}

.exam-prestart.ieltsx-prestart[data-section="speaking"] .exam-prestart__stage {
    padding: 19px 24px 60px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__card,
.exam-prestart.ieltsx-prestart[data-section="speaking"] .exam-prestart__card {
    width: min(1156px, 100%);
    padding: 22px 17px 21px;
    border: 0;
    border-radius: 4px;
    background: var(--px-card);
    color: var(--px-text);
    box-shadow: var(--px-card-shadow);
}

/* That lighter line sits under the content, so the dark card is two pixels
   taller at the bottom. */
@media (min-width: 761px) {
    .exam-theme-dark .exam-prestart.ieltsx-prestart[data-section] .exam-prestart__card {
        padding-bottom: 23px;
    }
}

.exam-prestart.ieltsx-prestart .exam-prestart__card h1,
.exam-prestart.ieltsx-prestart[data-section="speaking"] .exam-prestart__card h1 {
    margin: 0 0 22px;
    color: var(--px-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__card .exam-prestart__time {
    margin: 0 0 22px;
    font-size: 20px;
    line-height: 28px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__card h2,
.exam-prestart.ieltsx-prestart[data-section="speaking"] .exam-prestart__card h2 {
    margin: 0 0 9px;
    color: var(--px-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__card ul {
    margin: 0 0 28px;
    padding: 0 0 0 75px;
    list-style: none;
}

/* The reference draws its bullets 25px before the text. */
.exam-prestart.ieltsx-prestart .exam-prestart__card li {
    position: relative;
}

.exam-prestart.ieltsx-prestart .exam-prestart__card li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: -25px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.exam-prestart.ieltsx-prestart .exam-prestart__card li,
.exam-prestart.ieltsx-prestart[data-section="speaking"] .exam-prestart__card li {
    font-size: 17.5px;
    line-height: 30px;
}

/* Speaking states its lists in the larger 20px type (frame 043729). */
.exam-prestart.ieltsx-prestart[data-section="speaking"] .exam-prestart__card ul {
    margin-bottom: 33px;
    padding-left: 78px;
}

.exam-prestart.ieltsx-prestart[data-section="speaking"] .exam-prestart__card li {
    top: 2px;
    font-size: 20px;
}

.exam-prestart.ieltsx-prestart[data-section="speaking"] .exam-prestart__card li::before {
    top: 13px;
    left: -28px;
    width: 7px;
    height: 7px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__divider,
.exam-prestart.ieltsx-prestart[data-section="speaking"] .exam-prestart__divider {
    margin: -1px 0 31px;
    background: var(--px-line);
}

.exam-prestart.ieltsx-prestart .exam-mode-grid {
    gap: 21px;
    margin-top: 21px;
}

.exam-prestart.ieltsx-prestart .exam-mode-card {
    position: relative;
    min-height: 128px;
    align-items: flex-start;
    gap: 17px;
    padding: 25px 20px 21px;
    border: 2px solid var(--px-line);
    border-radius: 12px;
    background: var(--px-card);
    color: var(--px-text);
    box-shadow: var(--px-mode-shadow);
    font-family: inherit;
}

.exam-prestart.ieltsx-prestart .exam-mode-card.is-selected {
    border-color: var(--px-red);
    background: var(--px-selected-bg);
    box-shadow: var(--px-selected-shadow);
}

.exam-prestart.ieltsx-prestart .exam-mode-card:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.exam-prestart.ieltsx-prestart .exam-mode-card__badge {
    position: absolute;
    top: -15px;
    right: 14px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 4px;
    background: var(--px-red);
    color: #ffffff;
    font-size: 12.25px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.exam-prestart.ieltsx-prestart .exam-mode-card__mark {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    border: 2px solid var(--px-radio);
    border-radius: 50%;
    color: transparent;
}

.exam-prestart.ieltsx-prestart .exam-mode-card.is-selected .exam-mode-card__mark {
    border-color: var(--px-red);
    background: var(--px-red);
    color: #ffffff;
}

.exam-prestart.ieltsx-prestart .exam-mode-card__mark svg {
    display: block;
    stroke-width: 3;
}

.exam-prestart.ieltsx-prestart .exam-mode-card strong {
    margin: 0 0 5px;
    padding-top: 1px;
    color: var(--px-text);
    font-size: 17.5px;
    font-weight: 700;
    line-height: 24px;
}

.exam-prestart.ieltsx-prestart .exam-mode-card small {
    color: var(--px-muted);
    font-size: 15px;
    line-height: 24px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__ready {
    gap: 0;
    margin-top: 30px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__ready .exam-prestart__hint {
    gap: 12px;
    margin: 0 0 22px;
    color: var(--px-text);
    font-size: 20px;
    line-height: 28px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__ready .exam-prestart__hint svg {
    flex: 0 0 auto;
}

.exam-prestart.ieltsx-prestart .exam-start-btn {
    min-width: 114px;
    min-height: 45px;
    height: 45px;
    padding: 0 20px;
    border: 0;
    border-radius: 6px;
    background: var(--px-button-bg);
    color: var(--px-button-text);
    font-family: inherit;
    font-size: 17.5px;
    font-weight: 500;
}

.exam-prestart.ieltsx-prestart .exam-start-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.exam-prestart.ieltsx-prestart .exam-start-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__ready small {
    margin-top: 15px;
    color: var(--px-muted);
    font-size: 17.5px;
    line-height: 26px;
}

.exam-prestart.ieltsx-prestart .exam-prestart__ready small[hidden] {
    display: none;
}

.exam-prestart.ieltsx-prestart .exam-prestart__ready .alert {
    margin: 0 0 16px;
}

@media (max-width: 760px) {
    .exam-prestart.ieltsx-prestart .exam-prestart__stage {
        padding: 12px 10px 40px;
    }

    .exam-prestart.ieltsx-prestart .exam-prestart__card {
        padding: 18px 14px;
    }

    .exam-prestart.ieltsx-prestart .exam-prestart__card ul {
        padding-left: 28px;
    }

    .exam-prestart.ieltsx-prestart .exam-mode-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .exam-prestart.ieltsx-prestart .exam-prestart__ready .exam-prestart__hint {
        align-items: flex-start;
        font-size: 17.5px;
        text-align: left;
    }
}

/* ============================
   IELTSX 1:1 — part 3: the Listening exam (TestingView, section listening).
   Reference: dark PNG 2026-07-22 052110…053825 at 1:1 (1920 window), light
   video 2026-08-01_04-41-00 at 2/3. Scope: the Real exam. Part 4 gives the
   Real Reading exam the same shell (top bar, part banner, questions, bottom
   bar, Options and windows), so the selectors read
   :is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice),
   which keeps their weight; Practice has its own block (part 4). The
   selectors repeat .test-layout.exam-shell to outrank the earlier exam rules.
   ============================ */

.exam-theme-dark .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) {
    --exam-bg: #202222;
    --exam-panel: #202222;
    --exam-panel-soft: #313535;
    --exam-panel-strong: #313535;
    --exam-text: #e9e9e7;
    --exam-border: #4b5563;
    --lx-title: #f3f4f6;
    --lx-input-bg: #191a1a;
    --lx-input-border: #6b7280;
    --lx-nav-bar: #9ca3af;
    --lx-muted: #9ca3af;
    --lx-thumb: #a0a0a0;
    --lx-row-hover: #191a1a;
    --lx-row-checked: color-mix(in srgb, #3b82f6 20%, #202222);
    --lx-arrow-prev: #313535;
    --lx-arrow-next: #313535;
    --lx-arrow-icon: var(--exam-text);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) {
    --lx-input-bg: #ffffff;
    --lx-input-border: #6b7280;
    --lx-nav-bar: #9ca3af;
    --lx-muted: #6b7280;
    --lx-thumb: #a0a0a0;
    --lx-title: var(--exam-text);
    --lx-focus: #3b82f6;
    --lx-drop-focus: #0ea5e9;
    --lx-field-focus: #0284c7;
    --lx-row-hover: #f3f4f6;
    --lx-row-checked: #dbeafe;
    /* Light arrows: dark grey back, black forward, white arrows. */
    --lx-arrow-prev: #4c4c4c;
    --lx-arrow-next: #000000;
    --lx-arrow-icon: #ffffff;
}

/* Top bar: logo, test title over "N minutes remaining · Audio is Playing",
   then fullscreen, volume and options as plain icons. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar {
    position: relative;
    height: 70px;
    min-height: 0;
    flex: 0 0 70px;
    display: grid;
    grid-template-columns: 45px max-content max-content 1fr 48px 32px 48px 27.5px 48px;
    grid-template-rows: 35px 35px;
    align-items: stretch;
    column-gap: 0;
    row-gap: 0;
    padding: 0 15.5px 0 20px;
    border-bottom: 1px solid var(--exam-border);
    background: var(--exam-panel);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-topbar__identity,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-topbar__actions,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-topbar__audio,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-audio-player {
    display: contents;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-topbar__identity img {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 45px;
    height: 45px;
    align-self: center;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-topbar__identity span#testTitle {
    display: block;
    grid-column: 2 / span 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 0 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-topbar__timer {
    position: static;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 3px 0 0 20px;
    font-size: 17.5px;
    font-weight: 400;
    line-height: 22px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-audio-player__status:not(:empty) {
    position: static;
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0 0 17px;
    font-size: 17.5px;
    font-weight: 400;
    line-height: 22px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-save-status,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-submit-btn,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .audio-progress-bar {
    display: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-audio-toggle {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: start;
    margin-left: 16px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar [data-exam-fullscreen] {
    grid-column: 5;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .audio-volume {
    grid-column: 7;
    grid-row: 1 / span 2;
    position: relative;
    order: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar [data-exam-settings] {
    grid-column: 9;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-icon-btn {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    min-height: 0;
    padding: 0;
    align-self: center;
    justify-self: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--exam-text);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-icon-btn:hover {
    background: var(--exam-panel-soft);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-icon-btn:focus-visible {
    outline: 2px solid var(--exam-focus);
    outline-offset: 2px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .audio-volume__popover {
    position: absolute;
    top: calc(100% + 8px);
    right: -8px;
    z-index: 90;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--exam-border);
    border-radius: 8px;
    background: var(--exam-panel);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .audio-volume__popover[hidden] {
    display: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .audio-volume__popover .volume-slider {
    width: 160px;
    min-width: 160px;
    opacity: 1;
    accent-color: var(--exam-focus);
}

/* Part banner */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) > .exam-part-banner {
    min-height: 92px;
    margin: 15px 20px 15px;
    padding: 0 16px;
    gap: 6px;
    border-radius: 0;
    font-size: 20px;
    line-height: 24px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) > .exam-part-banner strong {
    font-size: 20px;
}

/* Question pane: one column and the browser scrollbar of the reference. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .right-pane {
    padding: 0 0 0 25px;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

/* The questions end 187px above the bottom bar at full scroll (the content
   height read from the scrollbar of two reference frames). */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .questions-content {
    padding-bottom: 187px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .right-pane::-webkit-scrollbar {
    width: 26px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .right-pane::-webkit-scrollbar-thumb {
    border: 0;
    border-right: 6px solid transparent;
    border-radius: 0;
    background: var(--lx-thumb);
    background-clip: padding-box;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .right-pane::-webkit-scrollbar-track {
    background: transparent;
}

/* Notes: shared instructions, a centred title, bold sub-headings, real
   bullets, dashes indented and fields with the question number inside. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-group-context,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-group-context p,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary {
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(26px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-group-context p {
    margin: 0 0 14px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-group-context p:last-child {
    margin-bottom: 34px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-group-context h3 {
    margin: 24px 0 36px;
    color: var(--lx-title);
    font-size: calc(22.5px * var(--lx-fs, 1));
    line-height: calc(28px * var(--lx-fs, 1));
    text-align: center;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block {
    padding-right: 30px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--inline-summary {
    position: relative;
    padding-top: 22px;
}

/* Notes: the bookmark of the current field at the right end of its line. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary .q-flag-btn {
    position: absolute;
    right: -24px;
    display: inline-flex;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--exam-text);
    vertical-align: middle;
    opacity: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary .q-current .q-flag-btn,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary .q-flag-btn:focus-visible,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary .q-flag-btn.flagged {
    opacity: 1;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary .q-flag-btn.flagged svg {
    fill: currentColor;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary__segment--block {
    display: block;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary p {
    margin: 32px 0 17px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary ul {
    margin: 0;
    padding: 0 0 0 53px;
    list-style: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary li {
    position: relative;
    min-height: 30px;
    margin: 0 0 15px;
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary li::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary blockquote {
    min-height: 30px;
    margin: 0 0 15px;
    padding: 0 0 0 40px;
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-inline-summary .q-note-dash {
    display: inline-block;
    width: 22px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) input.q-inline-summary__input.ui-answer-input,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-content--inline input.ui-answer-input {
    width: 265px;
    height: 30px;
    min-height: 0;
    margin: 0 4px;
    padding: 0 8px;
    vertical-align: middle;
    border: 1px solid var(--lx-input-border);
    border-radius: 5px;
    background: var(--lx-input-bg);
    color: var(--exam-text);
    font: inherit;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(28px * var(--lx-fs, 1));
    text-align: center;
    box-shadow: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) input.q-inline-summary__input.ui-answer-input::placeholder,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-content--inline input.ui-answer-input::placeholder {
    color: var(--exam-text);
    opacity: 1;
    font-weight: 700;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) input.q-inline-summary__input.ui-answer-input:focus,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-content--inline input.ui-answer-input:focus {
    outline: none;
    border: 3px solid var(--lx-field-focus);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lx-field-focus) 50%, transparent);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) input.q-inline-summary__input.ui-answer-input:focus::placeholder,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-content--inline input.ui-answer-input:focus::placeholder {
    color: transparent;
}

/* Bottom navigation: parts, a bar over every question, the answered count
   of the other parts and the final check. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-nav {
    display: flex;
    height: 65px;
    min-height: 0;
    overflow: visible;
    padding: 0;
    gap: 0;
    align-items: stretch;
    border-top: 1px solid var(--exam-border);
    background: var(--exam-panel);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-parts {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    height: auto;
    align-self: stretch;
    margin-right: 20px;
    padding: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part {
    display: flex;
    flex: 1 1 0;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    min-width: 0;
    height: auto;
    align-self: stretch;
    padding: 0;
    border: 0;
    background: transparent;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part--active {
    flex: 0 0 auto;
    justify-content: flex-start;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    height: auto;
    padding: 3px 23px 0 18px;
    border: 0;
    background: transparent;
    color: var(--exam-text);
    font: inherit;
    font-size: 20px;
    cursor: pointer;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part__trigger strong {
    font-weight: 400;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part__trigger span:not(.sr-only) {
    color: var(--lx-muted);
    font-size: 16px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part--active .qn-part__trigger {
    padding: 3px 20px 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part--active .qn-part__trigger strong {
    font-weight: 700;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part--active .qn-part__trigger::before,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--lx-nav-bar);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part__questions {
    display: flex;
    align-items: stretch;
    gap: 5px;
    margin-left: 10px;
    padding: 0 13px 0 0;
    overflow: visible;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: auto;
    min-width: 0;
    padding: 3px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--exam-text);
    font: inherit;
    font-size: 20px;
    box-shadow: none;
    transform: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-dot:hover {
    transform: none;
    color: var(--exam-text);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-dot.qn-answered::before,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-dot.qn-flagged-answered::before {
    background: #22c55e;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-dot.qn-current::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 17px;
    bottom: 12px;
    border: 2px solid var(--lx-focus);
    border-radius: 4px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-submit {
    position: static;
    flex: 0 0 100px;
    width: 100px;
    height: auto;
    align-self: stretch;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    padding-top: 0;
    background: var(--exam-panel-soft);
    color: var(--exam-text);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-submit svg {
    width: 27px;
    height: 27px;
    stroke-width: 4.75;
}

/* Real exam arrows: two floating 70px squares above the bar on the right. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-arrows {
    position: absolute;
    right: 50px;
    bottom: 104px;
    display: flex;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-arrows button {
    width: 70px;
    height: 70px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--lx-arrow-prev);
    color: var(--lx-arrow-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    box-shadow: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-arrows button[data-qn-next] {
    background: var(--lx-arrow-next);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-arrows button svg {
    width: 42px;
    height: 42px;
    stroke-width: 5;
}

/* One-answer and several-answer questions: the shared instructions, then
   "11  The speaker's job requires" with the bookmark at the right end of a
   1560px row, then 50px option rows 55px apart. The current question boxes
   its number and shows the bookmark. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) {
    position: relative;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 26px;
    column-gap: 10px;
    align-items: start;
    max-width: 1560px;
    padding: 22px 0 15px;
    border: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .question-group-context {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group):not(:first-child) > .question-group-context {
    margin-top: 82px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .question-group-context p:last-child {
    margin-bottom: 32px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .question-group-context h3:last-child {
    margin-bottom: 34px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-number-row {
    display: contents;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-number-row .q-number {
    grid-column: 1;
    grid-row: 2;
    padding: 0 5px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: calc(20px * var(--lx-fs, 1));
    font-weight: 700;
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group).q-current > .q-number-row .q-number {
    border-color: var(--lx-focus);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-content {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding-top: 2px;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-number-row .q-tools {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) .q-flag-btn {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--exam-text);
    opacity: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group).q-current .q-flag-btn,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) .q-flag-btn:focus-visible,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) .q-flag-btn.flagged {
    opacity: 1;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) .q-flag-btn svg {
    width: 24px;
    height: 24px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) .q-flag-btn.flagged svg {
    fill: currentColor;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-options {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 15px 0 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-options :is(.radio-label, .checkbox-label) {
    display: flex;
    /* 12px above and below the text line, which grows with the text size. */
    min-height: calc(24px + 26px * var(--lx-fs, 1));
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--exam-text);
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(26px * var(--lx-fs, 1));
    cursor: pointer;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-options :is(.radio-label, .checkbox-label):hover {
    background: var(--lx-row-hover);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-options :is(.radio-label, .checkbox-label):has(input:checked) {
    background: var(--lx-row-checked);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-options :is(.radio-label, .checkbox-label) input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: auto;
    color-scheme: light;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-options .radio-custom {
    display: none;
}

/* The "1 of 3 selected" line stays for screen readers only: the reference
   shows nothing under the options. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .exam-inline-note {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Matching by dragging: "Teachers" with a name, a dashed 358px gap and the
   bookmark per row, then the answers as small framed chips 100px to the
   right. The gap in work has a sky-blue dashed frame; a filled gap a solid one. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group {
    max-width: 1560px;
    margin: 0;
    padding: 22px 0 15px;
    border: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group > .question-group-context {
    margin: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group:not(:first-child) > .question-group-context {
    margin-top: 82px;
}

/* Under the answers the reference keeps 77px more (dark 052524 and light
   video, both at full scroll). */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 100px;
    align-items: start;
    margin: 10px 0 77px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group :is(.q-drag-matrix__items, .q-drag-matrix__answers) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 19px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__heading {
    margin: 0 0 8px;
    font-size: calc(20px * var(--lx-fs, 1));
    font-weight: 700;
    line-height: calc(26px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__row {
    display: flex;
    align-items: center;
    gap: 25px;
    min-height: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__item {
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(26px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drop-target--matrix {
    display: flex;
    flex: 0 0 358px;
    width: 358px;
    height: 33px;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    overflow: hidden;
    border: 1px dashed var(--lx-input-border);
    border-radius: 4px;
    background: var(--lx-input-bg);
    color: var(--exam-text);
    font-size: calc(20px * var(--lx-fs, 1));
    font-weight: 700;
    line-height: calc(26px * var(--lx-fs, 1));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drop-target--matrix.q-drop-target--filled {
    justify-content: flex-start;
    border-style: solid;
    font-weight: 400;
}

/* The gap in work: a 2px sky dashed frame drawn as an outline over the
   border, so keyboard focus stays an outline. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drop-target--matrix:focus,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drop-target--matrix:focus-visible {
    outline: 2px dashed var(--lx-drop-focus);
    outline-offset: -2px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-bank--matrix {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-choice--matrix {
    height: 33px;
    min-height: 0;
    padding: 0 10px;
    border: 1px solid var(--exam-border);
    border-radius: 4px;
    background: var(--lx-input-bg);
    color: var(--exam-text);
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(26px * var(--lx-fs, 1));
    white-space: nowrap;
}

/* A used answer leaves an empty place in the list. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-choice--matrix:disabled {
    visibility: hidden;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__row .q-flag-btn {
    display: inline-flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--exam-text);
    opacity: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__row.q-current .q-flag-btn,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__row .q-flag-btn:focus-visible,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__row .q-flag-btn.flagged {
    opacity: 1;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__row .q-flag-btn.flagged svg {
    fill: currentColor;
}

/* Listening exam dialogs (053254 Submit, 053351 Leave, 053333 Report): system
   font (Segoe UI on Windows), no frame on Submit/Leave, light main button,
   a dark framed Cancel. The overlays are appended to <body>, hence :has(). */
body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) :is(.exam-confirm-modal, .question-complaint-card) {
    --lx-modal-muted: color-mix(in srgb, var(--exam-modal-text) 75%, transparent);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

body.exam-theme-dark:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal {
    --exam-modal-bg: #202222;
    --exam-modal-text: #e9e9e7;
    --exam-modal-border: #313535;
}

body.exam-theme-dark:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-card {
    --exam-modal-bg: #191a1a;
    --exam-modal-text: #e9e9e7;
    --exam-modal-border: #313535;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-modal-overlay--confirm {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal {
    width: min(560px, 100%);
    padding: 39px 42px 40px;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal h2 {
    margin: 0;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal h2::before {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-color: #eab308;
    color: #eab308;
    font-family: Arial, sans-serif;
    font-size: 15px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal p {
    max-width: none;
    margin: 23px 0 0;
    color: var(--lx-modal-muted);
    font-size: 20px;
    line-height: 30px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal__actions {
    gap: 24px;
    margin-top: 31px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) :is(.exam-confirm-modal, .question-complaint-card) :is(.exam-primary-btn, .exam-secondary-btn, .btn-primary, .btn-outline) {
    min-height: 0;
    height: 45px;
    padding: 0 18px;
    border: 1px solid var(--exam-modal-border);
    border-radius: 6px;
    background: var(--exam-modal-bg);
    color: var(--exam-modal-text);
    font: inherit;
    font-size: 17.5px;
    font-weight: 600;
    box-shadow: none;
}

body.exam-theme-dark:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) :is(.exam-confirm-modal, .question-complaint-card) :is(.exam-secondary-btn, .btn-outline) {
    background: #191a1a;
}

/* Submit and Leave alike: the reference has no red Leave button. */
body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) :is(.exam-confirm-modal, .question-complaint-card) :is(.exam-primary-btn, .exam-primary-btn.is-danger, .btn-primary) {
    border-color: var(--exam-modal-text);
    background: var(--exam-modal-text);
    color: var(--exam-modal-bg);
}

body.exam-theme-dark:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal :is(.exam-primary-btn, .exam-primary-btn.is-danger) {
    color: #202222;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-modal {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: none;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-card {
    width: min(640px, 100%);
    padding: 27px 29px 30px;
    border: 1px solid var(--exam-modal-border);
    border-radius: 8px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-header {
    position: relative;
    display: block;
    margin: 0;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-title {
    padding-right: 40px;
    font-size: 21.5px;
    font-weight: 600;
    line-height: 28px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-hint {
    margin: 4px 0 0;
    color: var(--lx-modal-muted);
    font-size: 17.5px;
    line-height: 25px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-close {
    position: absolute;
    top: -13px;
    right: -16px;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--lx-modal-muted);
    font-size: 24px;
    line-height: 1;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-textarea {
    display: block;
    min-height: 0;
    height: 123px;
    margin: 40px 1px 0;
    width: calc(100% - 2px);
    padding: 11px 15px;
    border: 1px solid var(--exam-modal-border);
    border-radius: 6px;
    background: var(--exam-modal-bg);
    color: var(--exam-modal-text);
    font: inherit;
    font-size: 17.5px;
    line-height: 25px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-textarea:focus {
    border-color: var(--exam-modal-border);
    outline: 1px solid var(--exam-modal-text);
    outline-offset: 0;
    box-shadow: none;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-textarea::placeholder {
    color: var(--lx-modal-muted);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-status {
    min-height: 0;
    margin: 0;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-status:not(:empty) {
    margin-top: 10px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-actions {
    gap: 10px;
    margin-top: 39px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .question-complaint-actions :is(.btn-primary, .btn-outline) {
    padding: 0 20px;
}

/* Processing after Submit (053815): a frameless card over the darkened,
   blurred test, a 3/4 ring turning above "Processing Your Test". */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .exam-processing-state {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(5px);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .exam-processing-state__card {
    width: min(560px, calc(100vw - 32px));
    padding: 40px 42px 40px;
    border: 0;
    border-radius: 8px;
    background: var(--exam-panel);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .exam-processing-state__card .loader-spinner {
    display: block;
    width: 36px;
    height: 36px;
    margin: 2px auto 0;
    border: 3px solid var(--exam-text);
    border-top-color: transparent;
    transform: rotate(45deg);
    animation: lxSpin 1s linear infinite;
}

@keyframes lxSpin {
    from { transform: rotate(45deg); }
    to { transform: rotate(405deg); }
}

@media (prefers-reduced-motion: reduce) {
    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .exam-processing-state__card .loader-spinner {
        animation: none;
    }
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .exam-processing-state__card h2 {
    margin: 22px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .exam-processing-state__card p {
    margin: 23px 0 0;
    color: color-mix(in srgb, var(--exam-text) 75%, transparent);
    font-size: 20px;
    line-height: 30px;
}

/* Real Options page of the Listening exam (053244, 053304): system font,
   70px rows under a 76px head, muted icons and arrows, labels in sentence
   case ("Text size", "Leave test without saving"). */
body.exam-theme-dark:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-modal-overlay--options {
    --exam-bg: #191a1a;
    --exam-panel: #202222;
}

body.exam-theme-dark:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-modal-overlay--options .exam-settings-modal {
    --exam-modal-bg: #191a1a;
    --exam-modal-text: #e9e9e7;
    --exam-modal-border: #313535;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-settings-modal--options {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-head {
    height: 76px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-head h2 {
    margin-top: -5px;
    font-size: 24px;
    font-weight: 700;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-head .exam-modal__close svg {
    width: 30px;
    height: 30px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-stage {
    padding-top: 81px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) :is(.exam-options-list, .exam-options-choices) {
    border-radius: 8px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) :is(.exam-options-list, .exam-options-choices) button {
    min-height: 71px;
    grid-template-columns: 32px 1fr 24px;
    gap: 11px;
    padding: 0 20px;
    font-size: 20px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) :is(.exam-options-list, .exam-options-choices) button > svg {
    color: color-mix(in srgb, var(--exam-modal-text) 75%, transparent);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) :is(.exam-options-list, .exam-options-choices) button > svg:last-child {
    width: 24px;
    height: 24px;
    justify-self: end;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-list button strong {
    font-weight: 600;
    text-transform: lowercase;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-list button strong::first-letter {
    text-transform: uppercase;
}

/* Option screens are titled in sentence case too ("Audio speed", 053315). */
body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-head h2 {
    text-transform: lowercase;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-head h2::first-letter {
    text-transform: uppercase;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-list button.is-primary {
    background: #e31c3d;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-list button.is-primary > svg {
    color: #fff;
}

/* Selection menu of the Listening exam (052146 Note / Highlight, 052218
   Remove / Add Note): two 90px buttons, icon over an 18px label, a small
   arrow towards the words. */
body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip {
    --hl-menu-bg: #ffffff;
    --hl-menu-border: #d1d5db;
    --hl-menu-text: #111827;
    border: 1px solid var(--hl-menu-border);
    border-radius: 6px;
    background: var(--hl-menu-bg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

body.exam-theme-dark:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip {
    --hl-menu-bg: #202222;
    --hl-menu-border: #313535;
    --hl-menu-text: #e9e9e7;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    border-right: 1px solid var(--hl-menu-border);
    border-bottom: 1px solid var(--hl-menu-border);
    background: var(--hl-menu-bg);
    transform: translateX(-50%) rotate(45deg);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip.hl-tooltip--below::after {
    top: -7px;
    bottom: auto;
    transform: translateX(-50%) rotate(225deg);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip-btn {
    min-width: 90px;
    width: 90px;
    min-height: 68px;
    gap: 6px;
    padding: 0;
    color: var(--hl-menu-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 20px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip-btn + .hl-tooltip-btn {
    border-left: 0;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip-btn:hover {
    background: color-mix(in srgb, var(--hl-menu-text) 8%, transparent);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip-btn svg {
    width: 24px;
    height: 24px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip-btn svg .icon-cut {
    stroke: var(--hl-menu-bg);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip-btn.hl-btn-remove {
    color: var(--hl-menu-text);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip-btn.hl-btn-remove svg {
    color: #ef4444;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-tooltip-btn.hl-btn-remove:hover {
    background: color-mix(in srgb, #ef4444 12%, transparent);
}

/* Add Note window of the Listening exam (052227): centred, no dimming, a
   white 2px frame on the field, Cancel and Save Note at 15px. */
body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-note-popup {
    padding: 18px 18px 19px;
    border: 1px solid var(--lx-note-border, #d1d5db);
    border-radius: 6px;
    background: var(--lx-note-bg, #ffffff);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    font-family: Arial, Helvetica, sans-serif;
}

body.exam-theme-dark:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-note-popup {
    --lx-note-bg: #202222;
    --lx-note-border: #2b2e2e;
    --lx-note-field: #191a1a;
    --lx-note-text: #e9e9e7;
    color: var(--lx-note-text);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-note-popup h2 {
    margin: 0 0 15px;
    color: inherit;
    font-size: 17.5px;
    font-weight: 400;
    line-height: 24px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-note-popup .hl-note-textarea {
    display: block;
    height: 125px;
    padding: 12px 14px;
    border: 2px solid var(--lx-note-text, #111827);
    border-radius: 6px;
    background: var(--lx-note-field, #ffffff);
    color: var(--lx-note-text, #111827);
    font-size: 17.5px;
    line-height: 24px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-note-popup .hl-note-textarea::placeholder {
    color: color-mix(in srgb, var(--lx-note-text, #111827) 60%, transparent);
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-note-actions {
    gap: 10px;
    margin-top: 20px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) :is(.hl-note-save, .hl-note-cancel) {
    min-width: 90px;
    height: 43px;
    min-height: 0;
    padding: 0 20px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}

body.exam-theme-dark:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-note-cancel {
    background: #313535;
    color: #e9e9e7;
}

body.exam-theme-dark:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .hl-note-save {
    background: #e9e9e7;
    color: #202222;
}

/* A fully answered part (053333, light t01222): green bar over the whole
   part and a green check before "Part N". */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part--done {
    position: relative;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part--done::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #22c55e;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part--done .qn-part__trigger svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #22c55e;
    stroke-width: 3;
}

/* Narrower windows. Up to 1100px the bottom bar scrolls sideways and the
   matching columns come closer; up to 700px the top bar takes three lines,
   the arrows shrink and the matching gaps fill the width. */
@media (max-width: 1100px) {
    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-parts {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-parts::-webkit-scrollbar {
        display: none;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part {
        flex: 0 0 auto;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix {
        column-gap: 40px;
    }
}

@media (max-width: 1100px) {
    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drop-target--matrix {
        flex-basis: 260px;
        width: 260px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-choice--matrix {
        height: auto;
        min-height: 33px;
        white-space: normal;
        text-align: left;
    }
}

@media (max-width: 700px) {
    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }
}

@media (max-width: 700px) {
    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar {
        height: auto;
        flex: 0 0 auto;
        grid-template-columns: 36px minmax(0, 1fr) 40px 40px 40px;
        grid-template-rows: auto auto auto;
        row-gap: 2px;
        padding: 8px 8px 8px 16px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-topbar__identity img {
        grid-row: 1 / span 3;
        width: 36px;
        height: 36px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-topbar__identity span#testTitle {
        grid-column: 2;
        min-width: 0;
        margin-left: 10px;
        overflow: hidden;
        font-size: 17px;
        line-height: 22px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-topbar__timer,
    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-audio-player__status:not(:empty) {
        grid-column: 2;
        margin: 0 0 0 10px;
        font-size: 15px;
        line-height: 20px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-audio-player__status:not(:empty) {
        grid-row: 3;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-audio-player__status svg {
        width: 20px;
        height: 20px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-audio-toggle {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
        margin: 0;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar [data-exam-fullscreen] { grid-column: 3; }
    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .audio-volume { grid-column: 4; grid-row: 1 / span 3; }
    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar [data-exam-settings] { grid-column: 5; }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-icon-btn {
        grid-row: 1 / span 3;
        width: 40px;
        height: 40px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) > .exam-part-banner {
        min-height: 0;
        margin: 12px 16px;
        padding: 12px 14px;
        font-size: 17px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) > .exam-part-banner strong {
        font-size: 17px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .right-pane {
        padding-left: 16px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .right-pane::-webkit-scrollbar {
        width: 10px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .right-pane::-webkit-scrollbar-thumb {
        border-right-width: 2px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) input.q-inline-summary__input.ui-answer-input {
        max-width: 100%;
    }

    body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .q-inline-summary .q-flag-btn {
        right: 0;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__row {
        flex-wrap: wrap;
        gap: 6px 12px;
        width: 100%;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drop-target--matrix {
        flex: 1 1 200px;
        width: auto;
        min-width: 0;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-choice--matrix {
        height: auto;
        min-height: 33px;
        white-space: normal;
        text-align: left;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-arrows {
        right: 12px;
        bottom: 77px;
        gap: 6px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-arrows button {
        width: 52px;
        height: 52px;
        padding-top: 4px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-arrows button svg {
        width: 30px;
        height: 30px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part__trigger,
    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-part--active .qn-part__trigger {
        padding: 3px 12px 0;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-parts {
        margin-right: 0;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .qn-submit {
        flex: 0 0 64px;
        width: 64px;
    }
}

/* The Leave window of the reference is set in Arial (053351), unlike Submit. */
body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal:has(.is-danger) {
    font-family: Arial, Helvetica, sans-serif;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal:has(.is-danger) h2 {
    margin-top: 4px;
    font-size: 24.75px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal:has(.is-danger) p {
    margin-top: 21px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal:has(.is-danger) .exam-confirm-modal__actions {
    gap: 20px;
    margin-top: 30px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) .exam-confirm-modal:has(.is-danger) :is(.exam-primary-btn, .exam-secondary-btn) {
    padding: 0 20px;
    font-weight: 400;
}

/* Focus rings of the Real Listening exam follow the keyboard: the Play page
   (052110, 053825), Options (053244) and the dialogs focus their first control
   themselves and show no ring after a pointer or on a fresh page; any key
   brings the ring back (html[data-exam-input], ExamUI._trackInputModality). */
html:not([data-exam-input="keyboard"]) body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-autoplay-gate__play:focus-visible,
html:not([data-exam-input="keyboard"]) body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-modal-overlay--options :is(button, [tabindex]):focus-visible,
html:not([data-exam-input="keyboard"]) body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice)) :is(.exam-confirm-modal, .question-complaint-card) button:focus-visible {
    outline: none;
}

/* Option screens (053304 Contrast, 053315 Audio speed): semibold labels, a
   24px check and back arrow, the back link 30px from the edge. */
body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-head {
    padding: 0 35px 0 28px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-head h2 {
    font-size: 24.75px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-back {
    gap: 4px;
    margin-top: -4px;
    font-size: 20px;
    font-weight: 600;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-back svg {
    width: 28px;
    height: 28px;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-choices button {
    grid-template-columns: 28px 1fr auto;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-choices button strong {
    font-weight: 600;
}

body:has(.test-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real) .exam-options-check svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

/* ============================
   IELTSX 1:1 — part 4: the Reading exam and the Practice interface
   (TestingView, sections reading and listening).
   Reference: dark PNG 2026-07-25 042200…042624 (Real Reading) and
   2026-07-24 165953…170458 (Practice Reading) at 1:1, light videos
   2026-08-10 23-10-36 (Real) and 23-27-52 (Practice) at 2/3. Real Reading
   takes the part 3 shell; the rules here add the passage, the divider and
   the Reading questions. Practice (Reading and, by decision 3, Listening)
   has its own top bar, part banner, bottom bar and Exam Settings window.
   ============================ */

/* Real Reading, dark: a chosen answer row is a shade darker, not blue. */
.exam-theme-dark .test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) {
    --lx-row-checked: #191a1a;
}

/* Real Reading: the passage pane with a 21px grey scrollbar, a 2px divider
   with a framed "↔" handle, then the question pane. */
/* Reading questions: the number of a True/False/Not Given question shows like
   any other, centred on its statement. */
.test-layout.exam-shell.test-layout--reading .question-block--boolean > .q-number-row .q-number {
    display: block;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-number-row .q-number {
    align-self: center;
}

.test-layout.exam-shell:is(.test-layout--reading, .test-layout--writing).test-layout--real .left-pane {
    padding: 0 0 0 30px;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.test-layout.exam-shell:is(.test-layout--reading, .test-layout--writing).test-layout--real .left-pane::-webkit-scrollbar {
    width: 21px;
}

/* The dark references show a horizontal scrollbar under both panes: their
   pages overflowed sideways (the light video has none). Ours does not
   overflow, so the vertical scrollbars run down to the bottom bar. */

.test-layout.exam-shell:is(.test-layout--reading, .test-layout--writing).test-layout--real .left-pane::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 0;
    background: var(--lx-thumb);
}

.test-layout.exam-shell:is(.test-layout--reading, .test-layout--writing).test-layout--real .left-pane::-webkit-scrollbar-track {
    background: transparent;
}

.test-layout.exam-shell:is(.test-layout--reading, .test-layout--writing) .split-resizer {
    width: 2px;
    background: var(--lx-input-border, #6b7280);
}

.test-layout.exam-shell:is(.test-layout--reading, .test-layout--writing) .split-resizer::after {
    content: "↔";
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border: 2px solid #000000;
    border-radius: 0;
    background: #ffffff;
    color: #111827;
    font-family: Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
}

/* The passage: Arial 20/30, the title in 26px bold on the left, the
   subtitle in 22.5px italic, a paragraph letter in 24px bold before its text
   (its first line is 1px taller above and 2px below, as on the reference),
   42px between two lettered paragraphs and 20px after any other (video
   23-10-36: a lettered paragraph then a plain one, 20px). */
.test-layout.exam-shell.test-layout--reading.test-layout--real .passage-content {
    max-width: none;
    margin: 0;
    padding: 0 26px 0 0;
    font-family: Arial, sans-serif;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--reading.test-layout--real .passage-content > :is(h2, h3, h4):first-child {
    margin: 44px 0 23px;
    font-size: calc(26px * var(--lx-fs-title, 1));
    font-weight: 700;
    line-height: calc(30px * var(--lx-fs-title, 1));
    text-align: left;
}

.test-layout.exam-shell.test-layout--reading.test-layout--real .passage-content p {
    margin: 0 0 20px;
}

.test-layout.exam-shell.test-layout--reading.test-layout--real .passage-content p.passage-para--lettered + p.passage-para--lettered {
    margin-top: 42px;
}

/* The passage ends 56px above the bottom of its pane at full scroll. */
.test-layout.exam-shell.test-layout--reading.test-layout--real .passage-content > :last-child {
    margin-bottom: 56px;
}

.test-layout.exam-shell.test-layout--reading.test-layout--real .passage-content p.passage-subtitle {
    margin: 0 0 24px;
    font-size: calc(22.5px * var(--lx-fs-sub, 1));
    text-align: left;
}

.test-layout.exam-shell.test-layout--reading.test-layout--real .passage-content p > strong.passage-letter {
    display: inline-block;
    width: auto;
    margin: 2.63px 0 6.37px;
    font-size: calc(24px * var(--lx-fs, 1));
    line-height: calc(24px * var(--lx-fs, 1));
}

/* The question pane ends 23px before the scrollbar; instructions run at 30px. */
.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .questions-content {
    padding-right: 23px;
    padding-bottom: 211px;
}

/* The statement is centred on its number: one line sits 2px lower than its
   number box, two lines start at its top. */
.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-content {
    align-self: center;
    padding-top: 0;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block:first-child,
.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group):first-child {
    padding-top: 25px;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .question-group-context p:last-child {
    margin-bottom: 30px;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-group-context,
.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-group-context p,
.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .q-inline-summary {
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-group-context p {
    margin-bottom: 10px;
}

/* Real Reading summaries: the block starts 42px below the question above,
   the text 21px below the instructions; a field sits 4px lower in its line
   (its line 1px taller) and shows what the pupil typed from the left (its number stays centred). */
.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block--inline-summary {
    padding-top: 42px;
    border-bottom: 0;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block--inline-summary > .question-group-context {
    margin-bottom: 0;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block--inline-summary > .question-group-context p:last-child {
    margin-bottom: 21px;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) input.q-inline-summary__input.ui-answer-input {
    margin: 4px 4px 1px;
    padding: 0 10px;
    text-align: left;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) input.q-inline-summary__input.ui-answer-input::placeholder {
    text-align: center;
}

/* Real Reading, Writing and Speaking: the speaker in the top bar, between
   fullscreen and Options, as a picture (it plays nothing). */
.test-layout.exam-shell:is(.test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-volume-mark {
    grid-column: 7;
    grid-row: 1 / span 2;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    color: var(--exam-text);
}

/* ---------- Practice interface (Reading and Listening, decision 3) ----------
   Reference: Reading Practice 165953…170458 (dark, 1:1) and video 23-27-52
   (light). Segoe UI throughout; a 55px top bar with the title on the left,
   the time in the middle and framed buttons with Submit on the right; the
   classic browser scrollbars; the arrows inside the bottom bar. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice :is(.exam-topbar, .exam-part-banner, .passage-content, .questions-content, .question-nav, button, input) {
    font-family: "Segoe UI", system-ui, sans-serif;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar {
    position: relative;
    height: 56px;
    min-height: 0;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid #d1d5db;
    background: var(--exam-panel);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__identity {
    flex: 1 1 auto;
    gap: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__identity img {
    width: 45px;
    height: 45px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__identity span#testTitle {
    margin: 0 0 0 26px;
    font-size: 17.5px;
    font-weight: 600;
    line-height: 24px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__timer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 17.5px;
    font-weight: 600;
    line-height: 24px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__actions {
    gap: 10px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar :is(.exam-icon-btn, .exam-submit-btn) {
    position: static;
    width: 67px;
    height: 32px;
    min-height: 0;
    padding: 0;
    border: 1px solid #9ca3af;
    border-radius: 4px;
    background: var(--exam-panel-soft, #313535);
    color: var(--exam-text);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-submit-btn {
    width: 97px;
    font-size: 17.25px;
    font-weight: 400;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-icon-btn svg {
    width: 26px;
    height: 26px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-save-status {
    display: none;
}

/* Listening Practice: the player (decision 8.2: as it is) between the title
   and the time. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__audio {
    position: absolute;
    top: 50%;
    right: calc(50% + 120px);
    transform: translateY(-50%);
}

/* Panes: the light 19px scrollbars of the reference with arrow buttons and
   an 11px rounded thumb; the question pane also keeps the horizontal one. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .split-pane {
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .split-pane::-webkit-scrollbar {
    width: 19px;
    height: 19px;
    background: #fcfcfc;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .split-pane::-webkit-scrollbar-track,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .split-pane::-webkit-scrollbar-corner {
    background: #fcfcfc;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .split-pane::-webkit-scrollbar-thumb {
    border: 4px solid #fcfcfc;
    border-radius: 10px;
    background: #8b8b8b;
    background-clip: padding-box;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .split-pane::-webkit-scrollbar-button:single-button {
    display: block;
    width: 19px;
    height: 19px;
    background-color: #fcfcfc;
    background-repeat: no-repeat;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .split-pane::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10'%3E%3Cpath d='M5 0h3l5 10H0z' fill='%238b8b8b'/%3E%3C/svg%3E");
    background-position: 50% 6px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .split-pane::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10'%3E%3Cpath d='M0 0h13L8 10H5z' fill='%238b8b8b'/%3E%3C/svg%3E");
    background-position: 50% 4px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .split-pane::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='13'%3E%3Cpath d='M0 5v3l10 5V0z' fill='%238b8b8b'/%3E%3C/svg%3E");
    background-position: 6px 50%;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .split-pane::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='13'%3E%3Cpath d='M0 0v13l10-5V5z' fill='%238b8b8b'/%3E%3C/svg%3E");
    background-position: 4px 50%;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .left-pane {
    padding: 0 0 0 30px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .right-pane {
    padding: 0 0 0 25px;
}

/* Practice Reading passage: Segoe UI 20/30, the title centred in 30px
   semibold, the subtitle centred in 22.5px italic, the paragraph letter in its
   own column before the text; 40px after a lettered paragraph, 20px after
   another. */
.test-layout.exam-shell.test-layout--reading.test-layout--practice .passage-content {
    max-width: none;
    margin: 0;
    padding: 0 26px 97px 0;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--reading.test-layout--practice .passage-content > :is(h2, h3, h4):first-child {
    margin: 40px 0 17px;
    font-size: calc(30px * var(--lx-fs-title, 1));
    font-weight: 600;
    /* Its line stays 40px at every text size (t01422, t01462). */
    line-height: 40px;
    text-align: center;
}

.test-layout.exam-shell.test-layout--reading.test-layout--practice .passage-content p {
    margin: 0 0 20px;
}

.test-layout.exam-shell.test-layout--reading.test-layout--practice .passage-content p.passage-subtitle {
    margin: 0 0 23px;
    font-size: calc(22.5px * var(--lx-fs-sub, 1));
    text-align: center;
}

.test-layout.exam-shell.test-layout--reading.test-layout--practice .passage-content p.passage-para--lettered {
    display: flex;
    align-items: flex-start;
    column-gap: 15px;
}

.test-layout.exam-shell.test-layout--reading.test-layout--practice .passage-content p.passage-para--lettered + p.passage-para--lettered {
    margin-top: 40px;
}

.test-layout.exam-shell.test-layout--reading.test-layout--practice .passage-content p > strong.passage-letter {
    position: relative;
    top: 2px;
    display: block;
    flex: none;
    width: auto;
    margin: 0;
    font-size: calc(22.5px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--reading.test-layout--practice .passage-content .passage-letter-gap {
    display: none;
}

.test-layout.exam-shell.test-layout--reading.test-layout--practice .passage-content .passage-para__text {
    min-width: 0;
}

/* Bottom bar: a 2px rule, no check button, the two framed 50px arrows in a
   darker strip at its right end. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .question-nav {
    padding-right: 126px;
    border-top: 2px solid #374151;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .qn-submit {
    display: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .question-nav--practice .qn-part {
    width: auto;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .qn-parts {
    margin-right: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .qn-arrows {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 130px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    background: transparent;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .qn-arrows button {
    width: 50px;
    height: 50px;
    border: 1px solid #9ca3af;
    border-radius: 6px;
    background: #ffffff;
    color: #000000;
}

.exam-theme-dark .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .qn-arrows {
    background: #1f2937;
}

.exam-theme-dark .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .qn-arrows button {
    border-color: #6b7280;
    background: #191a1a;
    color: #e9e9e7;
}

/* Practice Exam Settings (170055; video 23-27-52 t01292…t01582): a 640px
   card, Segoe UI, sections Theme and Text Size, framed 47px rows with the
   chosen one a shade lighter, Large and Extra Large in their own size, a
   brown Report Issue card and a plain Leave card. */
body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal {
    --ps-bg: #ffffff;
    --ps-row: #ffffff;
    --ps-row-chosen: #f3f4f6;
    --ps-border: #e5e7eb;
    --ps-text: #111827;
    --ps-muted: #4b5563;
    --ps-report-bg: #fffbeb;
    --ps-report-border: #fde68a;
    --ps-leave-bg: #ffffff;
    align-items: flex-start;
    padding-top: 151px;
    /* The test under the dimming stays sharp (170055, t01292). */
    backdrop-filter: none;
}

body.exam-theme-dark:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal {
    --ps-bg: #191a1a;
    --ps-row: #191a1a;
    --ps-row-chosen: #202222;
    --ps-border: #313535;
    --ps-text: #e9e9e7;
    --ps-muted: #b7b7ae;
    --ps-report-bg: #261a13;
    --ps-report-border: #4f2811;
    --ps-leave-bg: #1d1e1e;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-modal {
    width: 640px;
    max-height: none;
    padding: 31px 30px 29px;
    border: 1px solid var(--ps-border);
    border-radius: 8px;
    background: var(--ps-bg);
    color: var(--ps-text);
    font-family: "Segoe UI", system-ui, sans-serif;
    box-shadow: none;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-modal__head {
    position: relative;
    min-height: 34px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-modal__head h2 {
    position: relative;
    top: -7px;
    gap: 13px;
    color: var(--ps-text);
    font-size: 21.5px;
    font-weight: 600;
    line-height: 30px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-modal__head h2 svg {
    width: 24px;
    height: 24px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-modal__close {
    position: absolute;
    top: -18.5px;
    right: -16.5px;
    color: var(--ps-text);
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-modal__close svg {
    width: 20px;
    height: 20px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-group {
    margin-top: 10px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-group + .exam-settings-group {
    margin-top: 30px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-group h3 {
    gap: 11px;
    margin: 0 0 16px;
    color: var(--ps-text);
    font-size: 17.5px;
    font-weight: 600;
    line-height: 24px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-group h3 svg {
    width: 18px;
    height: 18px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-options button {
    min-height: 0;
    gap: 12px;
    padding: 5px 11px;
    border: 1px solid var(--ps-border);
    border-radius: 6px;
    background: var(--ps-row);
    color: var(--ps-muted);
    font-size: 17.5px;
    line-height: 35px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-options button svg {
    width: 18px;
    height: 18px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-options button.is-selected {
    border-color: var(--ps-border);
    background: var(--ps-row-chosen);
    color: var(--ps-text);
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-options button[data-pref="textSize"][data-value="large"] {
    font-size: 20px;
    line-height: 40px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-options button[data-pref="textSize"][data-value="extra"] {
    font-size: 22.5px;
    line-height: 45px;
}

/* A card: the icon and its title on one line, the hint below from the left. */
body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-action {
    min-height: 82px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: max-content 1fr;
    align-content: center;
    gap: 0 12px;
    padding: 0 20px;
    border: 1px solid var(--ps-border);
    border-radius: 8px;
    background: var(--ps-leave-bg);
    color: var(--ps-text);
    font-family: inherit;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-action--report {
    border-color: var(--ps-report-border);
    background: var(--ps-report-bg);
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-action > svg {
    width: 20px;
    height: 20px;
    flex: none;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-action--report > svg {
    color: #fbbf24;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-action > span {
    display: contents;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-action small {
    grid-column: 1 / -1;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-action strong {
    font-size: 17.5px;
    font-weight: 600;
    line-height: 24px;
}

body:has(.test-layout.exam-shell.test-layout--practice) #examSettingsModal .exam-settings-action small {
    margin-top: 8px;
    color: var(--ps-muted);
    font-size: 15px;
    line-height: 20px;
}

/* Summary from a list of words (Reading 170439, video t02292/t02462): 32px
   gaps 11px clear of the words around them, the words below in framed 33px
   chips 10px apart; a used word leaves its place empty. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) {
    --lx-drag-border: #9ca3af;
}

.exam-theme-dark .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) {
    --lx-drag-border: #4b5563;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-summary {
    padding-right: 40px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-summary:not(:first-child) > .question-group-context {
    margin-top: 20px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-summary .question-group-context h3 {
    margin: 22px 0 24px;
    font-weight: 700;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--drag-summary .q-drag-summary {
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-drop-target--summary {
    display: inline-block;
    box-sizing: border-box;
    min-width: 165px;
    height: 32px;
    min-height: 0;
    margin: 0 11px;
    padding: 0 11px;
    vertical-align: middle;
    border: 1px dashed var(--lx-drag-border);
    border-radius: 4px;
    background: var(--lx-input-bg);
    color: var(--exam-text);
    line-height: calc(30px * var(--lx-fs, 1));
    text-align: center;
    cursor: pointer;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-drop-target--summary.q-drop-target--filled {
    border-style: solid;
    text-align: left;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-drop-target--summary:focus-visible {
    outline: 2px solid var(--lx-drop-focus);
    outline-offset: 1px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-drag-bank--summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-drag-choice--summary {
    height: 32px;
    min-height: 0;
    padding: 0 10px;
    border: 1px solid var(--lx-drag-border);
    border-radius: 4px;
    background: var(--lx-input-bg);
    color: var(--exam-text);
    font: inherit;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(30px * var(--lx-fs, 1));
    cursor: grab;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-drag-choice--summary:disabled {
    visibility: hidden;
}

/* Matching Information grid (video 23-27-52 t00612…t00672 at 2/3): a framed
   table, letters A–G in 61px columns between thin rules, the statement with
   its number on the left, 30px lines; the chosen cell is tinted. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) {
    --lx-matrix-frame: #d1d5db;
    --lx-matrix-rule: #374151;
    --lx-matrix-row: #e5e7eb;
}

.exam-theme-dark .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) {
    --lx-matrix-frame: #4b5563;
    --lx-matrix-rule: #6b7280;
    --lx-matrix-row: #374151;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--matrix-grid {
    max-width: 1560px;
    margin: 0;
    padding: 22px 0 15px;
    border: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--matrix-grid:not(:first-child) > .question-group-context {
    margin-top: 20px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-grid {
    max-width: 100%;
    overflow-x: auto;
    padding: 20px;
    border: 1px solid var(--lx-matrix-frame);
    border-radius: 4px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-table {
    border-collapse: collapse;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-table th,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-table td {
    padding: 0;
    vertical-align: middle;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-table thead th {
    height: 60px;
    font-weight: 700;
    text-align: center;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-table :is(thead th, td):not(:first-child) {
    width: 61px;
    min-width: 61px;
    border-left: 1px solid var(--lx-matrix-rule);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-table tbody tr {
    border-top: 1px solid var(--lx-matrix-row);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-table tbody th {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    width: 450px;
    padding: 10px 10px 10px 0;
    font-weight: 400;
    text-align: left;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-table .q-number {
    justify-self: center;
    padding: 0 5px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-weight: 700;
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-row.q-current .q-number {
    border-color: var(--lx-focus);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-table td:hover {
    background: var(--lx-row-hover);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-table td:has(input:checked) {
    background: var(--lx-row-checked);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    cursor: pointer;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-matrix-cell input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: auto;
    color-scheme: light;
}

.exam-theme-dark .test-layout.exam-shell:is(.test-layout--reading, .test-layout--writing) .split-resizer::after {
    border-color: #374151;
    background: #111827;
    color: #f3f4f6;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .qn-arrows button svg {
    width: 20px;
    height: 20px;
}

/* Practice numbers its questions in semibold (170022). */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) > .q-number-row .q-number {
    font-weight: 600;
}

/* Practice: a flagged question shows a red bookmark ribbon above its number
   (video 23-27-52 t00372, t00572). */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .qn-dot:is(.qn-flagged, .qn-flagged-answered) {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14'%3E%3Cpath d='M0 0h10v14l-5-4-5 4z' fill='%23dc2626'/%3E%3C/svg%3E") no-repeat 50% 12px / 10px 14px;
}

/* Text size (Exam Settings; video 23-27-52 t01422 Large, t01462 Extra Large):
   the passage and the questions grow a step, 20 -> 22.5 -> 25px with their
   line heights; the passage title 30 -> 35 -> 40px, its subtitle 22.5 -> 25
   -> 30px. Paddings, fields' frames, the bars, the banner and the windows keep
   their size. The rules of the panes multiply their px by these factors. */
body.exam-text-large .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) :is(#leftPane, .right-pane) {
    --lx-fs: 1.125;
    --lx-fs-title: calc(7 / 6);
    --lx-fs-sub: calc(10 / 9);
}

body.exam-text-extra-large .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) :is(#leftPane, .right-pane) {
    --lx-fs: 1.25;
    --lx-fs-title: calc(4 / 3);
    --lx-fs-sub: calc(4 / 3);
}

/* A highlight is wine #820241 in both themes and both modes (052218 dark
   Real; video 23-27-52 t00882 light Practice). */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .hl-mark {
    background: #820241;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .hl-mark:hover {
    background: #9f0b57;
}

/* Practice selection menu and Add Note window (video 23-27-52 t00882, t00962
   at 2/3): Segoe UI; the menu buttons 80px tall with a 17.5px label that
   wraps ("Add / Note"); the labels, the window title and its buttons
   semibold. */
body:has(.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice) .hl-tooltip-btn {
    min-height: 80px;
    gap: 2px;
    padding: 0 8px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 17.5px;
    font-weight: 600;
    line-height: 20px;
}

body:has(.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice) .hl-note-popup {
    font-family: "Segoe UI", system-ui, sans-serif;
}

body:has(.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice) .hl-note-popup h2 {
    font-weight: 600;
}

body:has(.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice) .hl-note-popup .hl-note-textarea {
    font-family: inherit;
    font-size: 17px;
}

body:has(.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice) :is(.hl-note-save, .hl-note-cancel) {
    font-weight: 600;
}

/* A two-answer question in the bottom bar reads "20-21" in its own width. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .qn-dot.qn-dot--range {
    width: auto;
    padding-right: 3px;
    padding-left: 3px;
}

/* Matching Headings gaps in the passage (8.4; video 23-10-36 t01102, t01292,
   t01462 at 2/3): a 525x33 frame between paragraphs, dashed with the question
   number in the middle while empty, solid with the heading on the left once
   chosen; 44px above it and 4px below. The label comes from data-label, not from text in the passage. */
.test-layout.exam-shell.test-layout--reading .passage-content .q-drop-target--passage {
    display: flex;
    box-sizing: border-box;
    width: 525px;
    max-width: 100%;
    height: 33px;
    min-height: 0;
    margin: 44px 0 4px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--lx-drag-border, #9ca3af);
    border-radius: 4px;
    background: var(--lx-input-bg, #ffffff);
    color: var(--exam-text);
    font-weight: 700;
    line-height: calc(31px * var(--lx-fs, 1));
    cursor: pointer;
}

.test-layout.exam-shell.test-layout--reading .passage-content .q-drop-target--passage::before {
    content: attr(data-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.test-layout.exam-shell.test-layout--reading .passage-content .q-drop-target--passage.q-drop-target--filled {
    justify-content: flex-start;
    border-style: solid;
}

.test-layout.exam-shell.test-layout--reading .passage-content .q-drop-target--passage:focus-visible {
    outline: 2px solid var(--lx-drop-focus, #0ea5e9);
    outline-offset: 1px;
}

/* Reading matching (t01292): the name on its line, its 713px gap under it,
   the bookmark on the name's line; the list of answers below, one per line. */
.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix {
    display: block;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__items > .q-drag-matrix__heading {
    display: none;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__row {
    display: grid;
    grid-template-columns: minmax(0, 713px) 1fr 26px;
    align-items: center;
    row-gap: 4px;
    width: 100%;
    margin: 0 0 4px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice).test-layout--reading .question-block--drag-group .q-drag-matrix__item {
    grid-column: 1;
    grid-row: 1;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice).test-layout--reading .question-block--drag-group .q-drop-target--matrix {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 30px;
    min-height: 0;
    margin: 0;
    font-weight: 700;
    text-align: center;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice).test-layout--reading .question-block--drag-group .q-drag-matrix__row .q-flag-btn {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 26px;
    height: 26px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice).test-layout--reading .question-block--drag-group .q-drag-matrix__row .q-flag-btn svg {
    width: 24px;
    height: 24px;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__items {
    width: auto;
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block--drag-group .q-drag-matrix__answers > .q-drag-matrix__heading {
    display: block;
    margin: 35px 0 6px;
    font-size: calc(20px * var(--lx-fs, 1));
    font-weight: 700;
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice).test-layout--reading .question-block--drag-group .q-drag-bank--matrix {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice).test-layout--reading .question-block--drag-group :is(.q-drag-choice--matrix, .q-drag-bank--headings .q-drag-choice--summary) {
    height: 33px;
    min-height: 0;
    padding: 0 10px;
    border: 1px solid var(--lx-drag-border);
    border-radius: 4px;
    background: var(--lx-input-bg);
    color: var(--exam-text);
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(31px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--reading:is(.test-layout--real, .test-layout--practice) .question-block--passage-gaps .q-drag-bank--headings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
}

/* Table completion (video 23-27-52 t00712, t01122 at 2/3): the group's table
   in thin dark rules across the question column, short of the bookmarks;
   20/30 text with 16px sides, header cells semibold, a header across every
   column bold and centred. A field takes its own line in the cell, 10px in from the
   cell's sides: the question number in the middle while empty, the answer
   from the left once typed. The bookmark of the current or flagged field
   stands right of the table on the field's line. After a summary the group's
   heading comes 42px below its last line (t01122), and the next group's
   42px below the table (t01582). The columns share the width equally. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--context-gaps {
    position: relative;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--context-gaps table {
    width: calc(100% - 33px);
    table-layout: fixed;
    margin: 21px 0 0;
    border-collapse: collapse;
    border: 1px solid var(--lx-matrix-rule);
    color: var(--exam-text);
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--context-gaps :is(th, td) {
    padding: 15px 16px;
    border: 1px solid var(--lx-matrix-rule);
    text-align: left;
    vertical-align: top;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--context-gaps th {
    font-weight: 600;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--context-gaps th[colspan]:not([colspan="1"]) {
    font-weight: 700;
    text-align: center;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .q-context-gap {
    display: block;
    outline: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) input.q-context-gap__input.ui-answer-input {
    display: block;
    width: calc(100% - 20px);
    height: 30px;
    min-height: 0;
    margin: 2px auto;
    padding: 0 8px;
    border: 1px solid var(--lx-input-border);
    border-radius: 5px;
    background: var(--lx-input-bg);
    color: var(--exam-text);
    font: inherit;
    text-align: left;
    box-shadow: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) input.q-context-gap__input.ui-answer-input:placeholder-shown {
    text-align: center;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) input.q-context-gap__input.ui-answer-input::placeholder {
    color: var(--exam-text);
    opacity: 1;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) input.q-context-gap__input.ui-answer-input:focus {
    border-color: var(--exam-focus, #2563eb);
    outline: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) input.q-context-gap__input.ui-answer-input:focus::placeholder {
    color: transparent;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block.question-block--context-gaps .q-context-gap .q-flag-btn {
    position: absolute;
    right: 9px;
    display: inline-flex;
    width: 24px;
    height: 24px;
    /* Up from below its field to 3px above the field's top (t01292). */
    margin: -35px 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--exam-text);
    opacity: 0;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block.question-block--context-gaps .q-context-gap.q-current .q-flag-btn,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block.question-block--context-gaps .q-context-gap .q-flag-btn:focus-visible,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block.question-block--context-gaps .q-context-gap .q-flag-btn.flagged {
    opacity: 1;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block.question-block--context-gaps .q-context-gap .q-flag-btn.flagged svg {
    fill: currentColor;
}

/* Notes and summaries completed in the group text (IELTSX 052146): the field
   stands in its line as in short-answer notes, 265 × 30 with the number in
   bold in the middle; the bookmark at the right end of the line; the lists
   indented with a dot as in those notes. Table cells keep the rules above. */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading):is(.test-layout--real, .test-layout--practice) .q-context-gap.q-context-gap--inline {
    display: inline;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading):is(.test-layout--real, .test-layout--practice) .q-context-gap--inline input.q-context-gap__input.ui-answer-input {
    display: inline-block;
    width: 265px;
    height: 30px;
    margin: 0 4px;
    vertical-align: middle;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(28px * var(--lx-fs, 1));
    text-align: center;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading):is(.test-layout--real, .test-layout--practice) .q-context-gap--inline input.q-context-gap__input.ui-answer-input::placeholder {
    font-weight: 700;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading):is(.test-layout--real, .test-layout--practice) .q-context-gap--inline input.q-context-gap__input.ui-answer-input:focus {
    border: 3px solid var(--lx-field-focus);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lx-field-focus) 50%, transparent);
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading):is(.test-layout--real, .test-layout--practice) .question-block.question-block--context-gaps .q-context-gap--inline .q-flag-btn {
    right: -24px;
    margin: 0;
    vertical-align: middle;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading):is(.test-layout--real, .test-layout--practice) .question-block--context-gaps:has(.q-context-gap--inline) .question-group-context ul {
    margin: 0;
    padding: 0 0 0 53px;
    list-style: none;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading):is(.test-layout--real, .test-layout--practice) .question-block--context-gaps:has(.q-context-gap--inline) .question-group-context li {
    position: relative;
    min-height: 30px;
    margin: 0 0 15px;
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading):is(.test-layout--real, .test-layout--practice) .question-block--context-gaps:has(.q-context-gap--inline) .question-group-context li::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading):is(.test-layout--real, .test-layout--practice) .question-block--context-gaps:has(.q-context-gap--inline) .question-group-context li > ul {
    margin-top: 15px;
}

/* A part's map, plan or diagram, drawn like the Writing Task 1 picture; the
   box is reserved before the file arrives, so nothing below it moves. */
.test-layout.exam-shell .exam-part-figure {
    max-width: 720px;
    margin: 0 0 34px;
}

.test-layout.exam-shell .exam-part-figure__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border: 1px solid var(--exam-border);
    background: #fff;
}

.test-layout.exam-shell .exam-part-figure__fallback {
    padding: 16px;
    border: 1px dashed var(--exam-border);
    color: var(--exam-text);
}

/* Practice: a flagged question's bookmark is red (video 23-27-52 t01292, t01422). */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .question-block:not(.question-block--inline-summary):not(.question-block--drag-group) .q-flag-btn.flagged,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .question-block--inline-summary .q-flag-btn.flagged,
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .question-block--drag-group .q-flag-btn.flagged {
    color: #dc2626;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--inline-summary + .question-block.question-block--context-gaps {
    padding-top: 2px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--inline-summary + .question-block.question-block--context-gaps:not(:first-child) > .question-group-context {
    margin-top: 0;
}

/* Practice: the bookmark of a summary field stands where those of the table
   do, right of the text column (t01122). */
.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .q-inline-summary .q-flag-btn {
    right: 9px;
}

.test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking):is(.test-layout--real, .test-layout--practice) .question-block--context-gaps + .question-block:not(.question-block--inline-summary):not(.question-block--drag-group):not(:first-child) > .question-group-context {
    margin-top: -5px;
}

/* ============================
   IELTSX 1:1 — part 5: the Writing exam (WritingView).
   Reference: dark videos 2026-07-25 04-56-40 (Real) and 05-21-46 (Practice,
   Exam Settings dark and light), 2026-08-01 01-53-28 (Practice, Processing)
   and 02-48-01 (Real: Options, Report, Leave, Submit, Processing), at 2/3 of a
   1920 window. Writing takes the shell of parts 3 and 4 (top bars, part
   banner, bottom bar, arrows, Options, Exam Settings, windows, Processing)
   through .test-layout--writing in their selectors; the rules here are the
   task pane, the divider and the editor. Real is Arial, Practice Segoe UI.
   ============================ */

/* The task: 20px text on 25.5px lines, 28.5px between paragraphs, bold only
   where the author made it bold; the chart 30px below at most its own width.
   The pane scrolls only when the task is longer than the window. */
.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-left-pane {
    padding: 29.5px 32px 40px 25px;
    overflow-y: auto;
    border-right: 0;
    background: var(--exam-panel);
    color: var(--exam-text);
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) :is(.writing-instruction, .writing-prompt, .writing-extra-instruction) {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--exam-text);
    font-family: Arial, sans-serif;
    font-size: calc(20px * var(--lx-fs, 1));
    font-style: normal;
    font-weight: 400;
    line-height: calc(25.5px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--writing.test-layout--practice :is(.writing-instruction, .writing-prompt, .writing-extra-instruction) {
    font-family: "Segoe UI", system-ui, sans-serif;
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) :is(.writing-instruction, .writing-prompt) :is(strong, b) {
    font-weight: 700;
}

.test-layout.exam-shell.test-layout--writing.test-layout--practice :is(.writing-instruction, .writing-prompt) :is(strong, b) {
    font-weight: 600;
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) :is(.writing-instruction, .writing-prompt) p,
.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) :is(.writing-instruction, .writing-prompt, .writing-extra-instruction) {
    margin: 0 0 calc(28.5px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) :is(.writing-instruction, .writing-prompt) > p:last-child {
    margin-bottom: 0;
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-task-image {
    display: block;
    margin: 30px 0 0;
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .task1-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* The divider: the 2px line with its framed "↔" of Reading; while it is
   dragged an 18px grey band runs beside the line (t00682, t00842, t00832). */
.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-split-resizer {
    flex: 0 0 2px;
    cursor: col-resize;
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-split-resizer.is-dragging::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 18px;
    background: var(--wx-drag-band, #e5e7eb);
    z-index: 4;
}

.exam-theme-dark .test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) {
    --wx-drag-band: #45494c;
    --wx-editor-border: #4b4e54;
    --wx-editor-focus: #8595b4;
}

/* The answer: a 225px editor 45px below the pane top, 19px after the
   divider and 55px before the window edge; it grows with the text and the
   pane scrolls past it. Its text is 20/30, the first line 22.5px under the
   frame; "Words: N" sits under its right corner. */
.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-right-pane {
    display: block;
    padding: 45px 55px 40px 19px;
    overflow-y: auto;
    background: var(--exam-panel);
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 225px;
    min-height: 225px;
    margin: 0;
    padding: 14px 15px;
    overflow: hidden;
    resize: none;
    border: 1px solid var(--wx-editor-border, #d1d5db);
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: var(--lx-input-bg);
    color: var(--exam-text);
    font-family: Arial, sans-serif;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--writing.test-layout--practice .writing-textarea {
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* In work the frame is 2px of grey blue: its 1px border and 1px around it,
   so the text does not move. */
.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-textarea:focus {
    border-color: var(--wx-editor-focus, var(--lx-focus));
    outline: none;
    box-shadow: 0 0 0 1px var(--wx-editor-focus, var(--lx-focus));
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-word-counter {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 16px;
    margin: 11px 0 0;
    padding: 0;
    color: var(--exam-text);
    font-family: Arial, sans-serif;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(24px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--writing.test-layout--practice .writing-word-counter {
    font-family: "Segoe UI", system-ui, sans-serif;
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-word-counter .word-count-label,
.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-word-counter #wordCountNum {
    color: inherit;
    font-weight: 400;
}

/* A failed save (9.3) and a failed submit stay in sight on the left of the
   counter: the text remains in the editor and in this tab. */
.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) :is(.writing-save-error, .writing-inline-status) {
    margin-right: auto;
    color: #f87171;
    font-size: calc(18px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-save-error[hidden] {
    display: none;
}

body.exam-theme-light .test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) :is(.writing-save-error, .writing-inline-status) {
    color: #b91c1c;
}

body.exam-text-large .test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) #writingLeftPane {
    --lx-fs: 1.125;
}

body.exam-text-extra-large .test-layout.exam-shell.test-layout--writing:is(.test-layout--real, .test-layout--practice) #writingLeftPane {
    --lx-fs: 1.25;
}

/* Practice: an inactive part of the bottom bar turns grey under the pointer
   over its whole width (video 01-53-28 t01602). Writing only: the Listening
   and Reading references have no such frame. */
.test-layout.exam-shell.test-layout--writing.test-layout--practice .question-nav .qn-part:not(.qn-part--active):hover {
    background: var(--wx-part-hover, #e5e7eb);
}

.exam-theme-dark .test-layout.exam-shell.test-layout--writing.test-layout--practice {
    --wx-part-hover: #62696a;
}

/* Practice on a narrow window (Listening, Reading, Writing; no reference):
   below 768px the centred time would lie over the buttons, so the logo and
   the buttons share the first line and the time takes its own line under
   them. From 768px the bar stays as on the reference. */
@media (max-width: 767px) {
    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar {
        height: auto;
        flex: 0 0 auto;
        flex-wrap: wrap;
        row-gap: 4px;
        column-gap: 8px;
        padding: 8px 12px 6px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__identity {
        flex: 1 1 auto;
        min-width: 0;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__identity img {
        width: 36px;
        height: 36px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__timer {
        position: static;
        order: 3;
        flex: 1 0 100%;
        transform: none;
        font-size: 15px;
        line-height: 20px;
        text-align: center;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__actions {
        flex: 0 0 auto;
        gap: 6px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-icon-btn {
        width: 44px;
    }

    .test-layout.exam-shell:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-submit-btn {
        width: auto;
        padding: 0 12px;
        font-size: 16px;
    }
}

/* Listening Practice up to 900px: the older narrow rules take the logo out
   of the line and stretch the player over the bar, so the buttons were
   pushed under it. The logo and the buttons keep the first line, the player
   takes the second and the time the third. */
@media (max-width: 900px) {
    .test-layout.exam-shell.test-layout--listening.test-layout--practice > .exam-topbar {
        height: auto;
        flex: 0 0 auto;
        flex-wrap: wrap;
        row-gap: 6px;
        column-gap: 8px;
        padding: 8px 12px 6px;
    }

    .test-layout.exam-shell.test-layout--listening.test-layout--practice > .exam-topbar .exam-topbar__identity {
        position: static;
        flex: 1 1 auto;
        min-width: 0;
    }

    .test-layout.exam-shell.test-layout--listening.test-layout--practice > .exam-topbar .exam-topbar__actions {
        display: contents;
    }

    .test-layout.exam-shell.test-layout--listening.test-layout--practice > .exam-topbar :is(.exam-icon-btn, .exam-submit-btn) {
        order: 1;
        flex: 0 0 auto;
    }

    .test-layout.exam-shell.test-layout--listening.test-layout--practice > .exam-topbar .exam-topbar__audio {
        position: static;
        top: auto;
        right: auto;
        order: 2;
        flex: 1 1 100%;
        min-width: 0;
        transform: none;
    }

    .test-layout.exam-shell.test-layout--listening.test-layout--practice > .exam-topbar .exam-topbar__timer {
        position: static;
        order: 3;
        flex: 1 0 100%;
        transform: none;
        font-size: 15px;
        line-height: 20px;
        text-align: center;
    }
}

/* ============================
   IELTSX 1:1 — part 6: the Speaking exam (SpeakingExamView).
   Reference: dark PNGs 2026-07-22 043749…044317 (Practice) and 050004…050404
   (Real), 1:1 at 1917x1078; light video 2026-08-10 23-33-34 (Practice) at
   2/3 of a 1920 window. Speaking takes the shell of parts 3-5 (top bars,
   part banner, bottom bar, arrows, Options, Exam Settings, windows,
   Processing) through .test-layout--speaking in their selectors; the rules
   here are the questions, the cue card and the Voice Recorder.
   Real is Arial, Practice Segoe UI.
   ============================ */
.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) {
    --sx-line: #d1d5db;
    --sx-current: #3b82f6;
    --sx-current-bg: #eff6ff;
    --sx-badge-bg: #f3f4f6;
    --sx-badge-text: #6b7280;
    --sx-recorded-bg: #dcfce7;
    --sx-recorded-text: #15803d;
    --sx-bar: #e5e7eb;
    --sx-fill: #2563eb;
    --sx-prep-line: #bfdbfe;
    --sx-prep-bg: #eff6ff;
    --sx-prep-text: #1d4ed8;
    --sx-ready-line: #dcfce7;
    --sx-ready-bg: #f0fdf4;
    --sx-ready-text: #15803d;
    --sx-button-line: #d1d5db;
    --sx-button-text: #111827;
    --sx-muted: #4b5563;
}

.exam-theme-dark .test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) {
    --sx-line: #374151;
    --sx-current-bg: #191a1a;
    --sx-badge-bg: #111827;
    --sx-badge-text: #e5e7eb;
    --sx-bar: #111827;
    --sx-prep-bg: #191a1a;
    --sx-prep-text: #1e40af;
    --sx-button-line: #374151;
    --sx-button-text: #f3f4f6;
    --sx-muted: #d1d5db;
}

/* One column of questions and the 450px Voice Recorder 30px to its right,
   41px under the banner with its 15px margin (043749); the page scrolls
   above the bottom bar. */
.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    column-gap: 30px;
    align-items: start;
    padding: 26px 27px 100px 30px;
    overflow-y: auto;
    background: var(--exam-bg);
    color: var(--exam-text);
    font-family: Arial, sans-serif;
}

.test-layout.exam-shell.test-layout--speaking.test-layout--practice :is(.spx-body, .spx-body button) {
    font-family: "Segoe UI", system-ui, sans-serif;
}

body.exam-text-large .test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-body {
    --lx-fs: 1.125;
}

body.exam-text-extra-large .test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-body {
    --lx-fs: 1.25;
}

/* The topic, then each question: its number outside, a 50px framed row with
   the text and the status on the right; the selected row is blue. */
.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-topic {
    margin: 0 0 19px;
    color: var(--exam-text);
    font-size: calc(22.5px * var(--lx-fs, 1));
    font-weight: 700;
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-list {
    display: grid;
    gap: 17px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-row {
    display: flex;
    align-items: flex-start;
    min-height: calc(50px * var(--lx-fs, 1));
    margin: 0;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-row__number {
    flex: 0 0 31px;
    padding-top: calc(10px * var(--lx-fs, 1));
    color: var(--exam-text);
    font-size: calc(19px * var(--lx-fs, 1));
    font-weight: 700;
    line-height: calc(20px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-question {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 9px 15px 9px 16px;
    border: 1px solid var(--sx-line);
    border-radius: 6px;
    background: transparent;
    color: var(--exam-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-question.is-current {
    margin: -1px 0 -1px -3px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-color: var(--sx-current);
    background: var(--sx-current-bg);
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-question:focus-visible {
    outline: 2px solid var(--sx-current);
    outline-offset: 2px;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-question__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: normal;
}

/* The status is as tall as its line (30px in Segoe UI, 27px in Arial); the
   rows keep a 67px pitch in both. */
.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--sx-badge-bg);
    color: var(--sx-badge-text);
    font-size: calc(15px * var(--lx-fs, 1));
    line-height: normal;
    white-space: nowrap;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-status.is-recorded {
    background: var(--sx-recorded-bg);
    color: var(--sx-recorded-text);
}

/* Part 2: the cue card, framed in blue, its title, "You should say:", the
   points and the status (044104, t01260). */
.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-cue {
    padding: 19px 20px 18px;
    border: 1px solid var(--sx-current);
    border-radius: 6px;
    background: var(--sx-current-bg);
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-cue__title {
    margin: 0 0 18px;
    color: var(--exam-text);
    font-size: calc(22.5px * var(--lx-fs, 1));
    font-weight: 700;
    line-height: calc(32px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-cue__say {
    margin: 0 0 16px;
    font-size: calc(20px * var(--lx-fs, 1));
    font-weight: 400;
    line-height: calc(28px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking.test-layout--practice .spx-cue__say {
    font-weight: 600;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-cue__prompts {
    display: grid;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0 0 0 25px;
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(28px * var(--lx-fs, 1));
}

/* The Voice Recorder: a framed card with its title, the selected question
   and its limit, the Part 2 preparation and the recording box. */
.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-recorder {
    position: sticky;
    top: 0;
    padding: 21px 20px 20px;
    border: 1px solid var(--sx-line);
    border-radius: 10px;
    background: var(--exam-bg);
    color: var(--exam-text);
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-recorder h2 {
    margin: 0;
    color: var(--exam-text);
    font-size: calc(22.5px * var(--lx-fs, 1));
    font-weight: 700;
    line-height: calc(30px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking.test-layout--practice .spx-recorder h2 {
    font-size: calc(22.25px * var(--lx-fs, 1));
    font-weight: 600;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-selected {
    margin: 4px 0 20px;
    font-size: calc(17.5px * var(--lx-fs, 1));
    line-height: calc(24px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) :is(.spx-prep, .spx-rec) {
    padding: 16px 15px;
    border: 1px solid var(--sx-line);
    border-radius: 6px;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-prep {
    margin: 0 0 20px;
    border-color: var(--sx-prep-line);
    background: var(--sx-prep-bg);
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-prep strong {
    display: block;
    font-size: calc(17.5px * var(--lx-fs, 1));
    font-weight: 600;
    line-height: calc(24px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-prep p {
    margin: 9px 0 6px;
    color: var(--sx-prep-text);
    font-size: calc(17.5px * var(--lx-fs, 1));
    line-height: calc(25px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-prep__clock {
    display: block;
    margin: 0 0 8px;
    color: var(--sx-fill);
    font-size: calc(24.5px * var(--lx-fs, 1));
    font-weight: 600;
    line-height: calc(34px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) :is(.spx-prep__actions, .spx-rec__actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-prep-done {
    margin: 0 0 20px;
    padding: 12px 15px;
    border: 1px solid var(--sx-ready-line);
    border-radius: 6px;
    background: var(--sx-ready-bg);
    color: var(--sx-ready-text);
    font-size: calc(17.5px * var(--lx-fs, 1));
    line-height: calc(25px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-rec__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: calc(17.5px * var(--lx-fs, 1));
    line-height: calc(24px * var(--lx-fs, 1));
}

/* Real: the label is regular and the time bold; Practice: both semibold. */
.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-rec__head strong {
    font-weight: 400;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-rec__head span {
    font-weight: 700;
}

.test-layout.exam-shell.test-layout--speaking.test-layout--practice .spx-rec__head :is(strong, span) {
    font-weight: 600;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-rec__bar {
    height: 10px;
    margin: 15px 0 15px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--sx-bar);
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-rec__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--sx-fill);
}

/* Buttons of the recorder: blue Start / Re-record and Start prep, red Stop,
   framed Reset prep / Skip prep / Pause prep (grey when unavailable). */
.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: calc(42px * var(--lx-fs, 1));
    padding: 0 15px;
    border: 1px solid var(--sx-button-line);
    border-radius: 4px;
    background: transparent;
    color: var(--sx-button-text);
    font: inherit;
    font-size: calc(17.5px * var(--lx-fs, 1));
    line-height: 1;
    cursor: pointer;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-btn--primary {
    border-color: var(--sx-fill);
    background: var(--sx-fill);
    color: #ffffff;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-btn--outline {
    border-color: var(--sx-fill);
    color: var(--sx-fill);
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-btn.is-recording {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-btn:disabled {
    cursor: default;
    opacity: 0.55;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-btn--primary:disabled {
    border-color: #4b5563;
    background: #4b5563;
    opacity: 1;
}

body.exam-theme-light .test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-btn--primary:disabled {
    border-color: #d1d5db;
    background: #d1d5db;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-btn:focus-visible {
    outline: 2px solid var(--sx-current);
    outline-offset: 2px;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-btn svg {
    flex: 0 0 auto;
}

/* Under the buttons: no recording yet, or its length and the player. */
.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) :is(.spx-rec__status, .spx-rec__length) {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 0;
    color: var(--sx-muted);
    font-size: calc(15px * var(--lx-fs, 1));
    line-height: calc(20px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) :is(.spx-player, .spx-audio) {
    display: flex;
    width: 100%;
    height: 54px;
    margin: 12px 0 0;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-player {
    align-items: center;
    gap: 10px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: #f1f3f4;
    color: #202124;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-player__play {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #202124;
    cursor: pointer;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-player__play:hover {
    background: #dadce0;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-player__time {
    font-size: 14px;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-player__track {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: #c4c7c5;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-rec__message:empty {
    display: none;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-rec__message {
    display: grid;
    gap: 8px;
    justify-items: start;
    margin: 12px 0 0;
    color: var(--sx-muted);
    font-size: calc(15px * var(--lx-fs, 1));
    line-height: calc(21px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-rec__message p {
    margin: 0;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-rec__message.is-error {
    color: #f87171;
}

body.exam-theme-light .test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-rec__message.is-error {
    color: #b91c1c;
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-privacy {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 14px 0 0;
    color: var(--sx-muted);
    font-size: calc(13px * var(--lx-fs, 1));
    line-height: calc(18px * var(--lx-fs, 1));
}

.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-privacy svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* End Speaking Practice: the line on responses not recorded yet. */
body:has(.test-layout.test-layout--speaking) .exam-confirm-modal .exam-confirm-modal__note {
    margin-top: 0;
    color: #f87171;
}

body.exam-theme-light:has(.test-layout.test-layout--speaking) .exam-confirm-modal .exam-confirm-modal__note {
    color: #b91c1c;
}

body:has(.test-layout.test-layout--speaking) .exam-confirm-modal [data-confirm-accept]:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Narrow windows (no reference): one column, the recorder under the
   questions. */
@media (max-width: 900px) {
    .test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-body {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
        padding: 20px 14px 110px;
    }

    .test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-recorder {
        position: static;
    }

    .test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .spx-question {
        flex-wrap: wrap;
        gap: 8px 12px;
    }
}

/* Speaking windows and Processing (044305, 044317; light t00860, t02460):
   the test behind is blurred, only slightly darker in dark and not tinted in
   light. */
.test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .exam-processing-state {
    background: rgba(0, 0, 0, 0.1);
}

body.exam-theme-light .test-layout.exam-shell.test-layout--speaking:is(.test-layout--real, .test-layout--practice) .exam-processing-state,
body.exam-theme-light:has(.test-layout.test-layout--speaking) .exam-modal-overlay--confirm {
    background: transparent;
}

/* ============================
   IELTSX 1:1 — part 7: results and review in the shell of parts 3-6
   (ResultView, ReviewView, WritingResultView, SpeakingResultView,
   SpeakingReviewView). A result or a review opens in the mode of the test:
   Real 054316 / 054336 / 050008 / A2 t00210, Practice 170511 / 170535 /
   044338 / 044429. The selectors repeat the shell of parts 3-6 and add the
   screen class, which outranks the shell and the S2-H rules.
   ============================ */

/* Result, Real: the title over a red "0 seconds remaining", then fullscreen
   and the speaker at the right edge; no Options and no Finish up there. */
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar [data-exam-settings] {
    display: none;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar [data-exam-fullscreen] {
    grid-column: 7;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar :is(.exam-volume-mark, .exam-result-audio) {
    grid-column: 9;
    grid-row: 1 / span 2;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    color: var(--exam-text);
}

.test-layout.exam-shell:is(.exam-result-layout, .exam-review-layout):is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) > .exam-topbar .exam-topbar__timer {
    color: #ff3131;
}

/* Result, Practice: the title, the time in the middle and nothing on the
   right; the bottom bar stays empty (170511, 044338). */
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__actions,
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .exam-result-bottom__finish {
    display: none;
}

/* "Exam Results": a one-line 62px banner. */
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) > .exam-part-banner {
    min-height: 62px;
}

/* The result scrolls in the whole width under the banner, so the scrollbar
   sits at the right edge; the cards stay 1540px in the middle. */
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) > .exam-result-content {
    width: 100%;
    margin: 0;
    padding-right: 20px;
    padding-left: 20px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) > .exam-result-content > :not(.exam-result-bottom) {
    max-width: 1540px;
    margin-right: auto;
    margin-left: auto;
}

/* Review, Real: the title alone in the middle of the bar, then fullscreen,
   the speaker and Options (054336). */
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar span#testTitle {
    grid-row: 1 / span 2;
    align-self: center;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > .exam-topbar .exam-topbar__timer {
    display: none;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening.test-layout--real > .exam-topbar .exam-volume-mark {
    grid-column: 7;
    grid-row: 1 / span 2;
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    color: var(--exam-text);
}

/* Review bottom bar: the bar of parts 3-6; the current number is boxed by
   the shared ::after, not by the S2-H outline. */
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .question-nav .qn-dot.is-current {
    outline: none;
}

/* Result body (054326 Real, 170523 Practice): the page scrolls above the
   66px bottom bar; 20px row names (Real regular, Practice semibold), a red
   count and an 18px "mistakes"; a divider 30px under the last card, then
   Report Issue / Review Mistakes (dark, framed) and a light Finish. */
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) > :is(.exam-result-content, .speaking-result-scroll) {
    margin-bottom: 66px;
    padding-bottom: 40px;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > :is(.exam-result-content, .speaking-result-scroll)::-webkit-scrollbar {
    width: 23px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > :is(.exam-result-content, .speaking-result-scroll)::-webkit-scrollbar-thumb {
    border: 0;
    border-right: 3px solid transparent;
    border-radius: 0;
    background: var(--lx-thumb);
    background-clip: padding-box;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real > :is(.exam-result-content, .speaking-result-scroll)::-webkit-scrollbar-track {
    background: transparent;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > :is(.exam-result-content, .speaking-result-scroll)::-webkit-scrollbar {
    width: 19px;
    background: #fcfcfc;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > :is(.exam-result-content, .speaking-result-scroll)::-webkit-scrollbar-track {
    background: #fcfcfc;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > :is(.exam-result-content, .speaking-result-scroll)::-webkit-scrollbar-thumb {
    border: 4px solid #fcfcfc;
    border-radius: 10px;
    background: #8b8b8b;
    background-clip: padding-box;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > :is(.exam-result-content, .speaking-result-scroll)::-webkit-scrollbar-button:single-button {
    display: block;
    width: 19px;
    height: 19px;
    background-color: #fcfcfc;
    background-repeat: no-repeat;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > :is(.exam-result-content, .speaking-result-scroll)::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10'%3E%3Cpath d='M5 0h3l5 10H0z' fill='%238b8b8b'/%3E%3C/svg%3E");
    background-position: 50% 6px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > :is(.exam-result-content, .speaking-result-scroll)::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10'%3E%3Cpath d='M0 0h13L8 10H5z' fill='%238b8b8b'/%3E%3C/svg%3E");
    background-position: 50% 4px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-heading span {
    font-weight: 400;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-rows > div strong {
    font-size: 20px;
    font-weight: 400;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .exam-result-rows > div strong {
    font-weight: 600;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-rows > div > span {
    font-size: 18px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-rows > div > span b {
    font-size: 20px;
    font-weight: 400;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-actions {
    gap: 20px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--p7-rule);
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-actions :is(.exam-secondary-btn, .exam-primary-btn) {
    min-height: 0;
    height: 45px;
    padding: 0 30px;
    border: 1px solid var(--p7-rule);
    border-radius: 6px;
    background: var(--p7-surface);
    color: var(--exam-text);
    font-size: 18px;
    font-weight: 400;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice .exam-result-actions :is(.exam-secondary-btn, .exam-primary-btn) {
    font-weight: 600;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-actions .exam-primary-btn {
    border-color: var(--p7-primary-bg);
    background: var(--p7-primary-bg);
    color: var(--p7-primary-text);
}

/* Report window of a result: the privacy line, small, under the field. */
.question-complaint-note {
    margin: 8px 0 0;
    color: var(--exam-muted, #9ca3af);
    font-size: 13px;
    line-height: 18px;
}

/* Rows 15px apart by part, 10px apart by question type (054326, 170523). */
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-rows {
    gap: 15px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-rows--types {
    gap: 10px;
}

/* Heading, section pill, band card and incorrect numbers of 054316
   (measured: 37.5px title, 17.5px blue pill text, a 222px card with the
   title, the band, "out of 9" and the share; 35px pills 10px apart). */
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-heading h1 {
    margin-bottom: 5px;
    font-size: 37.5px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading) .exam-result-heading span,
.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-result-heading > span {
    padding: 12px 15px;
    color: #2563eb;
    font-size: 17.5px;
    line-height: 21px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading) .exam-band-card {
    min-height: 0;
    justify-content: flex-start;
    padding: 34px 0 33px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading) .exam-band-card h2 {
    margin: 0 0 13px;
    font-size: 22.5px;
    line-height: 27px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading) .exam-band-card strong {
    color: #2563eb;
    font-size: 46px;
    line-height: 55px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading) .exam-band-card span {
    margin: 3px 0 0;
    font-size: 17.5px;
    line-height: 21px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading) .exam-band-card p {
    margin: 14px 0 0;
    font-size: 17.5px;
    line-height: 21px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-panel {
    padding-top: 30px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-panel h2 {
    margin-bottom: 22px;
    font-size: 22.5px;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading) .exam-incorrect-list button {
    min-height: 35px;
    padding: 0 15px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 17px;
    font-weight: 400;
}

/* Practice result: the title in the middle of the 56px bar, as the test. */
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__identity {
    align-items: center;
    padding-top: 0;
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--practice > .exam-topbar .exam-topbar__identity span#testTitle {
    margin-top: 0;
}

/* Review panes (054336 Real, 170535 Practice): the transcript in a framed
   card, the questions under two tabs, a 25x34 number, grey option circles
   55px apart without letters, green right answers, "→ answer" and a blue
   "Explain More ›"; no rules between the questions. */
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-pane:first-child {
    padding: 29px 21px 42px 25px;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-pane--questions {
    padding: 25px 23px 42px 25px;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading).test-layout--real .exam-review-pane::-webkit-scrollbar {
    width: 21px;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading).test-layout--real .exam-review-pane::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 0;
    background: var(--lx-thumb);
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading).test-layout--real .exam-review-pane::-webkit-scrollbar-track {
    background: transparent;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading).test-layout--practice .exam-review-pane::-webkit-scrollbar {
    width: 19px;
    background: #fcfcfc;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading).test-layout--practice .exam-review-pane::-webkit-scrollbar-track {
    background: #fcfcfc;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading).test-layout--practice .exam-review-pane::-webkit-scrollbar-thumb {
    border: 4px solid #fcfcfc;
    border-radius: 10px;
    background: #8b8b8b;
    background-clip: padding-box;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading).test-layout--practice .exam-review-pane::-webkit-scrollbar-button:single-button {
    display: block;
    width: 19px;
    height: 19px;
    background-color: #fcfcfc;
    background-repeat: no-repeat;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading).test-layout--practice .exam-review-pane::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10'%3E%3Cpath d='M5 0h3l5 10H0z' fill='%238b8b8b'/%3E%3C/svg%3E");
    background-position: 50% 6px;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading).test-layout--practice .exam-review-pane::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10'%3E%3Cpath d='M0 0h13L8 10H5z' fill='%238b8b8b'/%3E%3C/svg%3E");
    background-position: 50% 4px;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-source {
    min-height: 0;
    padding: 0;
}

/* Transcript card. */
.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-transcript {
    padding: 28px 31px 30px;
    border: 1px solid var(--p7-rule);
    border-radius: 12px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-transcript-title {
    margin: 0 0 31px;
    font-size: 20px;
    line-height: 24px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-transcript-part {
    margin: 0 0 27px;
    font-size: 22.5px;
    line-height: 27px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-transcript-row {
    display: grid;
    grid-template-columns: 41px minmax(0, 1fr);
    column-gap: 15px;
    margin: 0 0 17px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-transcript-time {
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 26px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-transcript-row strong {
    display: block;
    color: var(--lx-muted, #9ca3af);
    font-size: 17.5px;
    font-weight: 400;
    line-height: 26px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-transcript-row p {
    margin: 0;
    font-size: 20px;
    line-height: 32px;
}

/* Reading passage: the passage of the test, 35px lines for the marks. */
.test-layout.exam-shell.exam-review-layout.test-layout--reading .exam-review-passage {
    padding-bottom: 40px;
    line-height: calc(35px * var(--lx-fs, 1));
}

/* Tabs. */
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-tabs {
    gap: 0;
    margin: 0 0 25px;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-tabs button {
    border-radius: 6px;
    color: var(--exam-text);
    font-size: 17.5px;
    font-weight: 400;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-tabs button.is-active {
    background: var(--p7-surface);
}

/* Questions. */
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-question-context {
    margin: 0;
    padding: 0;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-question {
    grid-template-columns: 25px minmax(0, 1fr);
    column-gap: 11px;
    padding: 0 0 62px;
    border-bottom: 0;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-question__number {
    width: 25px;
    height: 34px;
    border-radius: 3px;
    font-size: 20px;
    font-weight: 400;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-question__content {
    padding-top: 4px;
    font-size: 20px;
    line-height: 26px;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-options {
    gap: 0;
    margin: 16px 0 0 -37px;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-option {
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 55px;
    padding-left: 10px;
    font-size: 20px;
    line-height: 26px;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-option__control {
    margin: 0;
    border: 1px solid var(--p7-option-border);
    background: var(--p7-option-bg);
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-option.is-answer .exam-review-option__label {
    color: var(--p7-correct);
    font-weight: 400;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-option.is-selected-wrong .exam-review-option__label {
    color: var(--p7-wrong);
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-question__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin: 32px 0 0 -36px;
    padding-left: 12px;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-question__footer .exam-review-question__correct {
    margin: 0;
    color: var(--p7-correct);
    font-size: 20px;
    line-height: 26px;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-explain {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--p7-link);
    font: inherit;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-explain[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-explanation {
    margin: 14px 0 0 -14px;
    padding: 14px 16px;
    border: 1px solid var(--p7-rule);
    border-radius: 6px;
    background: var(--p7-surface);
    font-size: 17.5px;
    line-height: 26px;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-explanation[hidden] {
    display: none;
}

/* Reading review passage (170535): the title 18px under the pane top, the
   subtitle, then lettered paragraphs with the letter in a 40px column. */
.test-layout.exam-shell.exam-review-layout.test-layout--reading .exam-review-pane:first-child {
    padding-top: 0;
}

.test-layout.exam-shell.exam-review-layout.test-layout--reading .exam-review-passage {
    padding: 0 0 40px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--reading .exam-review-passage > :is(h2, h3, h4):first-child {
    margin: 18px 0 32px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--reading .exam-review-passage p.passage-subtitle {
    margin-bottom: 32px;
    line-height: calc(35px * var(--lx-fs, 1));
}

.test-layout.exam-shell.exam-review-layout.test-layout--reading .exam-review-passage p.passage-para--lettered {
    position: relative;
    display: block;
    padding-left: 40px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--reading .exam-review-passage p > strong.passage-letter {
    position: absolute;
    top: 0;
    left: 0;
    display: inline;
    line-height: calc(35px * var(--lx-fs, 1));
}

/* Evidence: a brown band with an amber underline and a yellow "Q1" tag
   (170535, 054336). */
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-evidence-mark {
    padding: 3px 0;
    border-bottom: 2px solid var(--p7-mark-line);
    border-radius: 0;
    background: var(--p7-mark-bg);
    color: inherit;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-evidence-mark[data-review-question]::before {
    content: "Q" attr(data-review-question);
    margin-right: 7px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--p7-mark-line);
    color: #000000;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
}

/* The review divider of both sections: a 4px rule with the blue round
   handle (054336, 170535), not the framed arrow of the Reading test. */
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-resizer {
    width: 4px;
    background: var(--p7-divider);
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-resizer::after {
    content: "⋮";
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 999px;
    background: #4285f4;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading).test-layout--practice .exam-review-explain {
    font-weight: 600;
}

/* Writing review (C t02200): the read-only answer box runs to the bottom
   bar, its text a little smaller than the editor's. */
.test-layout.exam-shell.writing-review-layout.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-right-pane {
    display: flex;
    flex-direction: column;
}

.test-layout.exam-shell.writing-review-layout.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-review-answer {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    resize: none;
    font-size: calc(17.5px * var(--lx-fs, 1));
    line-height: calc(25px * var(--lx-fs, 1));
}

/* Writing result before review: "No Feedback Available" (A2 t00210). */
.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-no-feedback {
    padding: 34px 20px 36px;
    border: 1px solid var(--p7-rule);
    border-radius: 12px;
    text-align: center;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-no-feedback h2 {
    margin: 0 0 14px;
    font-size: 22.5px;
    line-height: 27px;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-no-feedback p {
    margin: 0;
    color: var(--lx-muted, #9ca3af);
    font-size: 17.5px;
    line-height: 24px;
}

/* "AI Analysis" under the task title, without "Premium" (050008). */
.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-deep-evaluation > header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 16px;
    border: 1px solid var(--p7-badge-line);
    border-radius: 4px;
    background: var(--p7-badge-bg);
    color: var(--p7-badge-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-no-feedback h2 {
    color: var(--exam-text);
}

/* Writing result cards (050008): 30px titles, a 75px band, a 15px badge. */
.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-result-heading {
    gap: 0;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-result-band {
    min-height: 0;
    justify-content: flex-start;
    padding: 30px 0 30px;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-result-band h2 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 36px;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-result-band > strong {
    font-size: 75px;
    line-height: 88px;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-result-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 3px 14px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-deep-evaluation > header h2 {
    font-size: 30px;
    line-height: 36px;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-task-band span {
    font-size: 30px;
    font-weight: 700;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-task-band strong {
    font-size: 75px;
}

.test-layout.exam-shell.exam-result-layout.test-layout--writing .writing-ai-warning p {
    font-size: 17.5px;
    line-height: 25px;
}

/* Speaking result: Finish is in the buttons below (decision 9.9), never in
   the top bar of either mode. */
.test-layout.exam-shell.exam-result-layout.speaking-result-shell #speakingResultTopFinish {
    display: none;
}

/* Speaking review: the bar of parts 3-6 stays in the last row of the page. */
.test-layout.exam-shell.speaking-review-page.test-layout--speaking > .question-nav {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
}

.test-layout.exam-shell.speaking-review-page.test-layout--speaking > .speaking-review-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

.test-layout.exam-shell.speaking-review-page.test-layout--speaking > .question-nav {
    flex: 0 0 65px;
}

/* Speaking review content (044429): the note 24px under the banner, 20px
   questions, 14px labels and 17.5px answers. */
.test-layout.exam-shell.speaking-review-page.test-layout--speaking .speaking-review-guidance {
    margin-top: 24px;
    padding-top: 13px;
    padding-bottom: 13px;
}

.test-layout.exam-shell.speaking-review-page.test-layout--speaking .speaking-review-card header h3 {
    font-size: 20px;
}

.test-layout.exam-shell.speaking-review-page.test-layout--speaking .speaking-review-columns h3 {
    font-size: 14px;
    letter-spacing: 0;
}

.test-layout.exam-shell.speaking-review-page.test-layout--speaking .speaking-review-columns p {
    font-size: 17.5px;
    line-height: 26px;
}

/* Speaking result before a review: the "No Feedback Available" card of the
   Writing result (decision 8.2), its saved / processing line kept small. */
.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-result-hero.is-pending {
    min-height: 0;
    margin-top: 30px;
    padding: 34px 20px 36px;
    border: 1px solid var(--p7-rule);
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-result-hero.is-pending h2 {
    margin: 0 0 10px;
    font-size: 22.5px;
    line-height: 27px;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-result-hero.is-pending .speaking-result-summary {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lx-muted, #9ca3af);
    font-size: 17.5px;
    line-height: 24px;
    text-align: center;
}

/* Speaking result buttons: Report Issue, Review Transcript, a red Finish. */
.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-result-actions {
    gap: 20px;
    margin-top: 30px;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-result-actions :is(.exam-secondary-btn, .exam-primary-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: 45px;
    padding: 0 30px;
    font-size: 17.5px;
    line-height: 1;
}

/* Part 7 colours: light (video 23-27-52, t165-235) and dark (054316 ...). */
.test-layout.exam-shell:is(.exam-result-layout, .exam-review-layout) {
    --p7-rule: #e5e7eb;
    --p7-surface: #ffffff;
    --p7-primary-bg: #111827;
    --p7-primary-text: #ffffff;
    --p7-option-bg: #ffffff;
    --p7-option-border: #d1d5db;
    --p7-option-selected: #d1d5db;
    --p7-correct: #16a34a;
    --p7-wrong: #dc2626;
    --p7-link: #2563eb;
    --p7-mark-bg: #fef9c3;
    --p7-mark-line: #eab308;
    --p7-divider: #d1d5db;
    --p7-badge-line: #f59e0b;
    --p7-badge-bg: #fef3c7;
    --p7-badge-text: #92400e;
    --p7-tab-bg: #f3f4f6;
}

.exam-theme-dark .test-layout.exam-shell:is(.exam-result-layout, .exam-review-layout) {
    --p7-rule: #313535;
    --p7-surface: #191a1a;
    --p7-primary-bg: #e9e9e7;
    --p7-primary-text: #111111;
    --p7-option-bg: #a0a0a0;
    --p7-option-border: #888888;
    --p7-option-selected: #a0a0a0;
    --p7-correct: #22c55e;
    --p7-wrong: #ef4444;
    --p7-link: #3b82f6;
    --p7-mark-bg: #49311a;
    --p7-mark-line: #eab308;
    --p7-divider: #374151;
    --p7-badge-line: #92400e;
    --p7-badge-bg: #3a2a14;
    --p7-badge-text: #fbbf24;
    --p7-tab-bg: transparent;
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-tabs {
    border-radius: 6px;
    background: var(--p7-tab-bg);
}

/* Light: the circle the pupil chose is filled grey, the others are white. */
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-option.is-selected .exam-review-option__control {
    background: var(--p7-option-selected);
}

/* Text size on results and review (Options / Exam Settings, 050357): the
   text of the panes and the result rows grows a step as in the test
   (x1.125, x1.25); bars, banners, buttons and windows keep their size. */
body.exam-text-large .test-layout.exam-shell:is(.exam-result-layout, .exam-review-layout) :is(.exam-review-pane, .exam-result-content, .speaking-result-scroll, .speaking-review-scroll, #writingReviewTaskPane) {
    --lx-fs: 1.125;
    --lx-fs-title: calc(7 / 6);
    --lx-fs-sub: calc(10 / 9);
}

body.exam-text-extra-large .test-layout.exam-shell:is(.exam-result-layout, .exam-review-layout) :is(.exam-review-pane, .exam-result-content, .speaking-result-scroll, .speaking-review-scroll, #writingReviewTaskPane) {
    --lx-fs: 1.25;
    --lx-fs-title: calc(4 / 3);
    --lx-fs-sub: calc(4 / 3);
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-question__content,
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-option,
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-question__footer .exam-review-question__correct {
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(26px * var(--lx-fs, 1));
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-transcript-row strong {
    font-size: calc(17.5px * var(--lx-fs, 1));
    line-height: calc(26px * var(--lx-fs, 1));
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-transcript-row p {
    font-size: calc(20px * var(--lx-fs, 1));
    line-height: calc(32px * var(--lx-fs, 1));
}

.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-explanation {
    font-size: calc(17.5px * var(--lx-fs, 1));
    line-height: calc(26px * var(--lx-fs, 1));
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-rows > div strong,
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-rows > div > span b {
    font-size: calc(20px * var(--lx-fs, 1));
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking) .exam-result-rows > div > span {
    font-size: calc(18px * var(--lx-fs, 1));
}

.test-layout.exam-shell.speaking-review-page.test-layout--speaking .speaking-review-columns p {
    font-size: calc(17.5px * var(--lx-fs, 1));
    line-height: calc(26px * var(--lx-fs, 1));
}

.test-layout.exam-shell.speaking-review-page.test-layout--speaking .speaking-review-card header h3 {
    font-size: calc(20px * var(--lx-fs, 1));
}

body:not(.exam-theme-dark) .test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) .exam-review-tabs {
    padding: 3px;
}

/* The review panes end above the 65px bar of parts 3-6 at every width
   (the S2-H narrow rule kept 64px for its own 64px bar). */
.test-layout.exam-shell.exam-review-layout:is(.test-layout--listening, .test-layout--reading) > .exam-review-stage {
    padding-bottom: 68px;
}

/* ============================
   IELTSX 1:1 — part 7, rework of 17.10 (controller): the review player
   (054336), the divider handle of the Listening review, the Speaking result
   panels (044401, 044413), the Real check (054326) and the Writing review
   (C t02200).
   ============================ */

/* 1. The player of the Listening review banner: a dark box, ⟲ and ⟳ on dark
   40px squares, ▶ on a light 45px square, the time in 15px monospace, a thin
   track with a hollow round thumb and the "1x ⌄" box (054336 measured). */
.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-part-banner--with-audio .exam-review-audio {
    min-height: 65px;
    padding: 0 16px 0 15px;
    border: 0;
    border-radius: 8px;
    background: var(--p7-player-bg);
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player {
    grid-template-columns: 40px 45px 40px auto minmax(120px, 1fr) 96px;
    column-gap: 10px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player button {
    width: 40px;
    min-height: 0;
    height: 40px;
    padding: 0;
    border: 1px solid var(--p7-rule);
    border-radius: 6px;
    background: var(--p7-surface);
    color: var(--exam-text);
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player .exam-review-player__play {
    width: 45px;
    height: 45px;
    border: 0;
    background: var(--p7-primary-bg) !important;
    color: var(--p7-primary-text) !important;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player__icon[data-review-audio-skip="-10"] svg {
    transform: none;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player output {
    min-width: 0;
    margin: 0 21px 0 20px;
    font: 400 15px/1 Consolas, ui-monospace, SFMono-Regular, monospace;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player input[type="range"] {
    height: 20px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player input[type="range"]::-webkit-slider-runnable-track {
    height: 7px;
    border-radius: 4px;
    background: var(--p7-track);
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -6.5px;
    border: 2px solid var(--p7-thumb-ring);
    border-radius: 50%;
    background: var(--p7-surface);
    -webkit-appearance: none;
    appearance: none;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player input[type="range"]::-moz-range-track {
    height: 7px;
    border-radius: 4px;
    background: var(--p7-track);
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--p7-thumb-ring);
    border-radius: 50%;
    background: var(--p7-surface);
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-player__speed select {
    height: 40px;
    min-height: 0;
    padding: 0 30px 0 15px;
    border: 1px solid var(--p7-rule);
    border-radius: 6px;
    background: var(--p7-player-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d7e7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center;
    font-size: 15px;
    -webkit-appearance: none;
    appearance: none;
}

/* 2. The Listening review keeps its divider and the blue ⋮ handle: the old
   rule of the Listening test (.test-layout--listening .split-resizer, one
   pane) hid it once the review took the test classes. */
.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-resizer {
    display: block;
}

/* 3. Speaking result panels: a 1px frame without the coloured edge, the
   ⓘ / ◎ title, 22.5px sub-headings, dotted lists and a numbered plan with a
   bold lead (044401, 044413); "Score by criterion" in the same frame. */
.test-layout.exam-shell.exam-result-layout.speaking-result-shell :is(.speaking-feedback-card--feedback, .speaking-feedback-card--plan, .speaking-criteria-section) {
    margin-top: 30px;
    padding: 30px 30px 40px;
    border: 1px solid var(--p7-rule);
    border-radius: 12px;
    background: transparent;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell :is(.speaking-feedback-card--feedback, .speaking-feedback-card--plan) > h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-feedback-card--feedback section {
    padding-top: 0;
    border-top: 0;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-feedback-card--feedback h3 {
    margin: 46px 0 22px;
    font-size: 22.5px;
    font-weight: 600;
    line-height: 28px;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-feedback-card--feedback section:first-of-type h3 {
    margin-top: 30px;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-feedback-card ul {
    margin: 0;
    padding-left: 47px;
    list-style: disc;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-feedback-card :is(ul, ol) li {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 35px;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-feedback-card :is(ul, ol) li::marker {
    color: var(--lx-muted, #6b7280);
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-feedback-card--plan ol {
    margin: 45px 0 0;
    padding-left: 40px;
}

.test-layout.exam-shell.exam-result-layout.speaking-result-shell .speaking-feedback-card--plan li strong {
    font-weight: 600;
}

/* 4. Results in Real: the check of the bottom bar on a lighter 97px square,
   bold, as the qn-submit of parts 3-6 (054326). */
.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .exam-result-bottom__finish {
    width: 97px;
    border: 0;
    background: var(--exam-panel-soft);
    color: var(--exam-text);
}

.test-layout.exam-shell.exam-result-layout:is(.test-layout--listening, .test-layout--reading, .test-layout--writing, .test-layout--speaking).test-layout--real .exam-result-bottom__finish svg {
    width: 27px;
    height: 27px;
    stroke-width: 4.75;
}

/* 5. Writing review: no handle between the panes, the line over an answered
   task as grey as the one over "Part 1", the answer box 27px under the
   banner down to the bar (C t02200). */
.test-layout.exam-shell.writing-review-layout.test-layout--writing .question-nav .qn-dot.qn-answered::before {
    background: var(--lx-nav-bar);
}

.test-layout.exam-shell.writing-review-layout.test-layout--writing:is(.test-layout--real, .test-layout--practice) .writing-right-pane {
    padding-top: 27px;
    padding-bottom: 0;
}

/* Colours of the player. */
.test-layout.exam-shell.exam-review-layout {
    --p7-player-bg: #f3f4f6;
    --p7-track: #d1d5db;
    --p7-thumb-ring: #6b7280;
}

.exam-theme-dark .test-layout.exam-shell.exam-review-layout {
    --p7-player-bg: #202222;
    --p7-track: #494a49;
    --p7-thumb-ring: #80817f;
}

/* The banner of the Listening review holds the player: 98px tall, the player
   box 1277px wide at the right (054336: 605-1883 x 102-167). The panes below
   start 15px lower and keep the transcript card at 219 and the tabs at 224. */
.test-layout.exam-shell.exam-review-layout.test-layout--listening > .exam-part-banner.exam-part-banner--with-audio {
    min-height: 98px;
    grid-template-columns: minmax(230px, 1fr) minmax(420px, 1277px);
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-pane:first-child {
    padding-top: 21px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-pane--questions {
    padding-top: 26px;
}

.test-layout.exam-shell.exam-review-layout.test-layout--listening .exam-review-tabs {
    margin-bottom: 27px;
}

/* ============================
   IELTSX part 8 (LK-056): Mock Tests, the sections page of a Mock and the
   "Section submitted" card of a Mock section. IELTSX has no frame of these
   screens (TZ 118): they reuse the part 1 test card and buttons
   (.ieltsx-catalog-page wraps them) and the brief of the part 2 start
   screen. The owner sees every state before production.
   ============================ */

body.body--ielts .ielts-mock-heading {
    margin: 0 0 16px;
    color: var(--ix-text);
    font-family: var(--ix-font);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

body.body--ielts .ielts-mock-catalog .ielts-mock-toolbar {
    justify-content: flex-start;
    margin: 0 0 14px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-mock-results {
    max-width: none;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card--mock .ieltsx-mock-meta {
    gap: 8px;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    color: var(--ix-muted);
    font-size: 15px;
    white-space: nowrap;
}

body.body--ielts .ieltsx-catalog-page .ieltsx-test-card__duration svg {
    display: block;
    flex: 0 0 auto;
}

body.body--ielts.ielts-theme-light .ielts-mock-feature:nth-child(1) div {
    color: var(--ix-text);
}

/* The sections page */
body.body--ielts .ielts-mock-page {
    display: grid;
    gap: 24px;
}

body.body--ielts .ielts-mock-page .ielts-mock-heading {
    margin: 8px 0 0;
}

body.body--ielts .ielts-mock-brief {
    padding: 24px 28px;
    border: 1px solid var(--ix-border);
    border-radius: 12px;
    background: var(--ix-card);
    box-shadow: var(--ix-shadow);
    color: var(--ix-text);
}

body.body--ielts .ielts-mock-brief__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

body.body--ielts .ielts-mock-brief h2 {
    margin: 0;
    color: var(--ix-text);
    font-size: 20px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

body.body--ielts .ielts-mock-brief__attempt {
    color: var(--ix-muted);
    font-size: 14px;
    white-space: nowrap;
}

body.body--ielts .ielts-mock-brief__time {
    margin: 12px 0 0;
    color: var(--ix-muted);
}

body.body--ielts .ielts-mock-brief h3 {
    margin: 20px 0 0;
    color: var(--ix-text);
    font-size: 16px;
    font-weight: 600;
}

body.body--ielts .ielts-mock-brief ul {
    margin: 8px 0 0;
    padding-left: 20px;
    color: var(--ix-muted);
    line-height: 1.7;
}

body.body--ielts .ielts-mock-sections {
    display: grid;
    gap: 14px;
    margin: -8px 0 0;
}

body.body--ielts .ielts-mock-section {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border: 1px solid var(--ix-border);
    border-radius: 12px;
    background: var(--ix-card);
    box-shadow: var(--ix-shadow);
    color: var(--ix-text);
}

body.body--ielts .ielts-mock-section__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    margin: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--ix-icon-tile);
    font-size: inherit;
}

body.body--ielts .ielts-mock-section__icon svg {
    display: block;
}

body.body--ielts .ielts-mock-section--listening .ielts-mock-section__icon { color: #f59e0b; }
body.body--ielts .ielts-mock-section--reading .ielts-mock-section__icon { color: #10b981; }
body.body--ielts .ielts-mock-section--writing .ielts-mock-section__icon { color: #3b82f6; }
body.body--ielts .ielts-mock-section--speaking .ielts-mock-section__icon { color: #f43f5e; }

body.body--ielts .ielts-mock-section.is-locked .ielts-mock-section__icon {
    color: var(--ix-muted);
}

body.body--ielts .ielts-mock-section__main {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 6px;
}

body.body--ielts .ielts-mock-section h3 {
    margin: 0;
    color: var(--ix-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

body.body--ielts .ielts-mock-section__meta {
    margin: 0;
    color: var(--ix-muted);
    font-size: 15px;
}

body.body--ielts .ielts-mock-section__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

body.body--ielts .ielts-mock-section__badge {
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    border: 1px solid var(--ix-border);
    border-radius: 6px;
    background: var(--ix-chip);
    color: var(--ix-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

body.body--ielts .ielts-mock-section__badge svg {
    display: block;
    flex: 0 0 auto;
}

body.body--ielts .ielts-mock-section__badge--done {
    border-color: var(--ix-success-border);
    background: var(--ix-success-bg);
    color: var(--ix-success);
}

body.body--ielts .ielts-mock-section__badge--pending {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

body.body--ielts.ielts-theme-light .ielts-mock-section__badge--pending {
    color: #b45309;
}

body.body--ielts .ielts-mock-section__band {
    color: var(--ix-text);
    font-size: 18px;
    font-weight: 700;
}

body.body--ielts .ielts-mock-section__score {
    color: var(--ix-muted);
    font-size: 15px;
}

body.body--ielts .ielts-mock-section__action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

body.body--ielts .ielts-mock-hint {
    margin: -8px 0 0;
    color: var(--ix-muted);
    font-size: 15px;
    text-align: start;
}

body.body--ielts .ielts-mock-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 18px 24px;
    border: 1px solid var(--ix-border);
    border-radius: 12px;
    background: var(--ix-card);
    box-shadow: var(--ix-shadow);
    color: var(--ix-text);
}

body.body--ielts .ielts-mock-next p {
    margin: 0;
    color: var(--ix-muted);
}

body.body--ielts .ielts-mock-next--limit {
    justify-content: flex-start;
}

body.body--ielts .ielts-mock-next--limit .ielts-mock-next__text {
    flex: 1 1 260px;
    min-width: 0;
}

body.body--ielts .ielts-mock-next--limit strong {
    display: block;
    margin: 0 0 4px;
    color: var(--ix-text);
    font-size: 16px;
}

body.body--ielts .ielts-mock-next__icon {
    flex: 0 0 auto;
    color: var(--ix-muted);
}

body.body--ielts .ielts-mock-next__icon svg {
    display: block;
}

body.body--ielts .ielts-mock-readonly {
    margin: 0;
}

/* "Section submitted" in the exam of a Mock section */
body.body--ielts .exam-section-submitted {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: 48px 16px;
}

body.body--ielts .exam-section-submitted__card {
    width: min(100%, 520px);
    display: grid;
    justify-items: center;
    gap: 14px;
    color: var(--exam-text, var(--ix-text));
    text-align: center;
}

body.body--ielts .exam-section-submitted__icon {
    color: var(--ix-success);
}

body.body--ielts .exam-section-submitted__icon svg {
    display: block;
}

body.body--ielts .exam-section-submitted__card h2 {
    margin: 0;
    color: inherit;
    font-size: 24px;
    font-weight: 600;
}

body.body--ielts .exam-section-submitted__card h2:focus {
    outline: none;
}

body.body--ielts .exam-section-submitted__card p {
    margin: 0 0 8px;
    opacity: 0.8;
    line-height: 1.55;
}

@media (max-width: 768px) {
    body.body--ielts .ielts-mock-section {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 18px;
    }

    body.body--ielts .ielts-mock-section__main {
        flex: 1 1 calc(100% - 66px);
    }

    body.body--ielts .ielts-mock-section__action {
        flex: 1 1 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    body.body--ielts .ielts-mock-brief {
        padding: 20px;
    }
}

/* Mock on a phone (9.7): the title as in part 1, the three feature cards in
   one column with smaller spacing - no new composition (TZ 90). */
@media (max-width: 600px) {
    body.body--ielts .ielts-platform--mock .ielts-page-head h1 {
        font-size: 26px;
    }

    /* The icon tile keeps its size beside a long subtitle. */
    body.body--ielts .ielts-platform--mock .ielts-page-head__icon {
        flex: 0 0 auto;
    }

    body.body--ielts .ielts-mock-features {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 32px;
    }

    body.body--ielts .ielts-mock-feature {
        min-height: 0;
        padding: 18px 20px;
        gap: 8px;
    }

    body.body--ielts .ielts-mock-heading {
        font-size: 20px;
    }
}

/* Admin-only preview frame, never student runtime. */
body{padding:16px;overflow-wrap:anywhere} .ielts-preview-nav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.ielts-preview-nav button{padding:10px} .ielts-preview-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.ielts-preview-layout>section{min-width:0}.ielts-preview-layout audio{max-width:100%}@media(max-width:700px){.ielts-preview-layout{grid-template-columns:minmax(0,1fr)}}