:root {
    --ai-font-display: "Nunito", "Trebuchet MS", "Avenir Next", "Segoe UI", sans-serif;
    --ai-font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
    --ai-color-cream: #fff8ea;
    --ai-color-cream-strong: #fff2d2;
    --ai-color-mint: #dff4e6;
    --ai-color-mint-soft: #edf8ef;
    --ai-color-grass: #82ca78;
    --ai-color-grass-deep: #3da056;
    --ai-color-sun: #ffd774;
    --ai-color-sun-soft: #fff1b9;
    --ai-color-coral: #f7b6a4;
    --ai-color-coral-soft: #ffe4d7;
    --ai-color-sky: #dff4fb;
    --ai-color-paper: rgba(255, 252, 246, 0.96);
    --ai-color-paper-strong: #fffdf8;
    --ai-color-paper-soft: #f7fff6;
    --ai-color-border: #d9e7cc;
    --ai-color-border-strong: #8ac88d;
    --ai-color-outline: rgba(82, 126, 83, 0.18);
    --ai-color-text: #24412b;
    --ai-color-text-muted: #5f7564;
    --ai-shadow-card: 0 22px 46px rgba(95, 126, 82, 0.16);
    --ai-shadow-soft: 0 12px 26px rgba(101, 120, 84, 0.12);
    --ai-shadow-press: 0 4px 0 rgba(42, 122, 58, 0.22);
    --ai-radius-xl: 34px;
    --ai-radius-lg: 26px;
    --ai-radius-md: 20px;
    --ai-radius-sm: 16px;
    --ai-space-1: 8px;
    --ai-space-2: 12px;
    --ai-space-3: 16px;
    --ai-space-4: 20px;
    --ai-space-5: 24px;
    --ai-space-6: 32px;
    --ai-space-7: 40px;
    --ai-transition-fast: 180ms ease;
    --ai-transition-base: 260ms ease;
}

/* Part B: centered listening task with image-first game controls. */
body[data-screen="final-mock-stage"]:has(.part-b-scene-shell) {
    background: #dff1ef;
}

body[data-screen="final-mock-stage"]:has(.part-b-scene-shell) #app-container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body[data-screen="final-mock-stage"]:has(.part-b-scene-shell) main {
    position: relative;
    min-height: 100vh;
    padding: 28px clamp(20px, 5vw, 72px) 38px;
    background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,0.78) 0 5%, transparent 5.2%),
        radial-gradient(circle at 86% 9%, rgba(255,255,255,0.72) 0 6%, transparent 6.2%),
        linear-gradient(180deg, #dff3f3 0 43%, #edf1d5 43% 67%, #b7d79b 67% 100%);
    overflow: hidden;
}

body[data-screen="final-mock-stage"]:has(.part-b-scene-shell) main::before,
body[data-screen="final-mock-stage"]:has(.part-b-scene-shell) main::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

body[data-screen="final-mock-stage"]:has(.part-b-scene-shell) main::before {
    inset: auto -6vw -12vh -6vw;
    height: 42vh;
    border-radius: 45% 55% 0 0 / 30% 34% 0 0;
    background:
        radial-gradient(circle at 18% 35%, rgba(91,151,82,0.42) 0 10%, transparent 10.5%),
        radial-gradient(circle at 76% 22%, rgba(244,194,92,0.26) 0 7%, transparent 7.5%),
        #a5cb88;
    opacity: 0.86;
}

body[data-screen="final-mock-stage"]:has(.part-b-scene-shell) main::after {
    width: 180px;
    height: 180px;
    left: 5vw;
    bottom: 10vh;
    border-radius: 48% 52% 45% 55%;
    background: rgba(83,145,75,0.2);
    box-shadow: 74vw -8vh 0 rgba(107,165,83,0.14);
}

.part-b-scene-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 980px);
    margin: 0 auto;
}

.part-b-topbar {
    margin: 0 0 12px;
}

.part-b-home-btn,
.part-b-warm-nav {
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid #d3aa55;
    border-radius: 15px;
    background: #f8dda0;
    color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(123,91,37,0.13);
}

.part-b-home-btn:hover,
.part-b-warm-nav:hover {
    transform: translateY(-2px);
    background: #ffe6ae;
    box-shadow: 0 6px 0 #c39c46, 0 12px 18px rgba(123,91,37,0.16);
}

.part-b-home-btn:active,
.part-b-warm-nav:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #c39c46, 0 5px 10px rgba(123,91,37,0.12);
}

.part-b-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 14px;
}

body[data-screen="final-mock-stage"] .part-b-status-row .section-title,
body[data-screen="final-mock-stage"] .part-b-status-row .exam-stage-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    padding: 7px 15px;
    border-radius: 999px;
    box-sizing: border-box;
    color: #4c6049;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgba(77,104,73,0.09);
}

.part-b-section-pill {
    border: 1px solid rgba(140,188,137,0.42);
    background: rgba(240,249,235,0.9);
}

.part-b-progress-pill {
    border: 1px solid rgba(215,185,120,0.4);
    background: rgba(255,250,239,0.9);
}

body[data-screen="final-mock-stage"] .part-b-stage-shell {
    width: min(100%, 880px);
    max-width: none;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 24px;
    background:
        radial-gradient(circle at 18px 18px, rgba(209,190,145,0.12) 0 1.4px, transparent 1.6px) 0 0 / 18px 18px,
        #fffaf0;
    box-shadow: 0 7px 0 rgba(126,102,68,0.11), 0 24px 48px rgba(55,70,47,0.18);
}

.part-b-task {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.part-b-audio-row {
    justify-content: center;
    margin: 0 0 6px;
}

body[data-screen="final-mock-stage"] .part-b-audio-btn {
    width: auto;
    min-width: 190px;
    min-height: 56px;
    margin: 0;
    padding: 0 24px;
    border: 1px solid #cd7968;
    border-radius: 16px;
    background: #df907d;
    color: #fff;
    box-shadow: 0 5px 0 #b96758, 0 12px 22px rgba(141,75,62,0.18);
    font-weight: 700;
}

body[data-screen="final-mock-stage"] .part-b-audio-btn:hover {
    transform: translateY(-2px);
    background: #e99a86;
    box-shadow: 0 7px 0 #b96758, 0 15px 24px rgba(141,75,62,0.2);
}

body[data-screen="final-mock-stage"] .part-b-audio-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #b96758, 0 7px 14px rgba(141,75,62,0.16);
}

body[data-screen="final-mock-stage"] .part-b-audio-btn:disabled {
    transform: none;
    border-color: #b8b9b4;
    background: #d7d9d5;
    color: #767973;
    box-shadow: 0 4px 0 #afb1ad;
    cursor: not-allowed;
}

.part-b-audio-status {
    margin: 0 auto 8px;
    text-align: center;
}

.part-b-question-title {
    margin: 0 0 20px !important;
    text-align: center;
    color: #4c3b2c !important;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.4;
}

.part-b-reference-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 520px);
    margin: 0 auto 24px;
    padding: 12px;
    border: 1px solid #e3d8bf;
    border-radius: 18px;
    background: rgba(255,255,255,0.75);
    box-shadow: 0 5px 0 rgba(171,145,94,0.13), 0 14px 24px rgba(91,76,49,0.1);
    box-sizing: border-box;
}

.part-b-reference-image img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 12px;
}

.stage-objective .part-b-image-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body[data-screen="final-mock-stage"] .stage-objective .part-b-image-options .mock-image-option,
body[data-screen="final-mock-stage"] .stage-objective .part-b-text-options .drill-option {
    position: relative;
    width: 100%;
    margin: 0;
    border: 2px solid #dacdb2;
    border-radius: 18px;
    background: #fffdf7;
    color: #4c3b2c;
    box-shadow: 0 5px 0 #c9b991, 0 12px 20px rgba(91,76,49,0.1);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

body[data-screen="final-mock-stage"] .stage-objective .part-b-image-options .mock-image-option {
    min-height: 190px;
    padding: 16px;
}

body[data-screen="final-mock-stage"] .stage-objective .part-b-text-options {
    width: min(100%, 640px);
    margin: 0 auto;
    gap: 16px;
}

body[data-screen="final-mock-stage"] .stage-objective .part-b-text-options .drill-option {
    min-height: 60px;
    padding: 0 22px;
    justify-content: center;
    text-align: center;
    font-weight: 700;
}

body[data-screen="final-mock-stage"] .stage-objective .part-b-image-options .mock-image-option:hover,
body[data-screen="final-mock-stage"] .stage-objective .part-b-text-options .drill-option:hover {
    transform: translateY(-3px);
    border-color: #7dbf9c;
    box-shadow: 0 8px 0 #b6cfae, 0 16px 24px rgba(67,107,76,0.14);
}

body[data-screen="final-mock-stage"] .stage-objective .part-b-image-options .mock-image-option:active,
body[data-screen="final-mock-stage"] .stage-objective .part-b-text-options .drill-option:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #b6cfae, 0 8px 14px rgba(67,107,76,0.12);
}

body[data-screen="final-mock-stage"] .stage-objective .part-b-image-options .mock-image-option.option-selected,
body[data-screen="final-mock-stage"] .stage-objective .part-b-text-options .drill-option.option-selected {
    border-color: #3f9f72;
    background: #ecf8ea;
    box-shadow: 0 6px 0 #70ad7d, 0 14px 24px rgba(54,124,76,0.16), inset 0 0 0 2px rgba(255,255,255,0.8);
}

body[data-screen="final-mock-stage"] .stage-objective .mock-image-option.option-selected::after,
body[data-screen="final-mock-stage"] .stage-objective .drill-option.option-selected::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #3f9f72;
    color: #fff;
    font-size: 0.94rem;
    line-height: 1;
    box-shadow: 0 3px 0 #2c7955;
}

body[data-screen="final-mock-stage"] .stage-objective .drill-option.correct,
body[data-screen="final-mock-stage"] .stage-objective .mock-image-option.correct {
    border-color: #3f9f72;
    background: #eaf8e8;
    box-shadow: 0 5px 0 #70ad7d;
}

body[data-screen="final-mock-stage"] .stage-objective .drill-option.wrong,
body[data-screen="final-mock-stage"] .stage-objective .mock-image-option.wrong {
    border-color: #d9796d;
    background: #fff0eb;
    box-shadow: 0 5px 0 #c98578;
}

.part-b-stage-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(188,167,126,0.25);
}

.part-b-stage-nav .nav-btn {
    width: 100%;
    min-height: 52px;
    margin: 0;
    border-radius: 15px;
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.25;
}

.part-b-stage-nav .part-b-forward-btn {
    border: 1px solid #428f91;
    background: #62bcb9;
    color: #fff;
    box-shadow: 0 4px 0 #428f91, 0 9px 16px rgba(58,124,126,0.16);
}

.part-b-stage-nav .part-b-forward-btn:hover {
    transform: translateY(-2px);
    background: #70c8c3;
    box-shadow: 0 6px 0 #428f91, 0 12px 18px rgba(58,124,126,0.18);
}

.part-b-stage-nav .part-b-forward-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #428f91, 0 5px 10px rgba(58,124,126,0.13);
}

.part-b-stage-nav .nav-btn:disabled {
    transform: none;
    border-color: #b8b9b4;
    background: #d7d9d5;
    color: #767973;
    box-shadow: 0 4px 0 #afb1ad;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    body[data-screen="final-mock-stage"]:has(.part-b-scene-shell) main {
        padding: 18px 14px 26px;
    }

    .part-b-status-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    body[data-screen="final-mock-stage"] .part-b-status-row .section-title,
    body[data-screen="final-mock-stage"] .part-b-status-row .exam-stage-meta {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 0.8rem;
    }

    body[data-screen="final-mock-stage"] .part-b-stage-shell {
        padding: 22px 16px 18px;
        border-radius: 21px;
    }

    .stage-objective .part-b-image-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    body[data-screen="final-mock-stage"] .stage-objective .part-b-image-options .mock-image-option {
        min-height: 164px;
        padding: 12px;
    }

    .part-b-stage-nav {
        gap: 12px;
        margin-top: 22px;
        padding-top: 16px;
    }

    .part-b-stage-nav .nav-btn {
        width: auto;
        min-height: 50px;
        padding: 0 12px;
    }
}

@media (max-width: 430px) {
    .stage-objective .part-b-image-options {
        grid-template-columns: 1fr;
    }

    body[data-screen="final-mock-stage"] .stage-objective .part-b-image-options .mock-image-option {
        min-height: 150px;
    }
}

html,
body {
    min-height: 100%;
}

body {
    font-family: var(--ai-font-body);
    color: var(--ai-color-text);
    background:
        radial-gradient(circle at 16px 16px, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.55) 2px, transparent 2.2px) 0 0 / 18px 18px,
        radial-gradient(circle at 85% 10%, rgba(255, 233, 170, 0.72) 0, rgba(255, 233, 170, 0) 16%),
        radial-gradient(circle at 10% 0%, rgba(201, 240, 217, 0.7) 0, rgba(201, 240, 217, 0) 22%),
        linear-gradient(180deg, #f5fff4 0%, #eef9f4 18%, #fff9ea 62%, #f6fff4 100%);
    position: relative;
    overflow-x: hidden;
    line-height: 1.5;
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    inset: auto auto 0 0;
}

body::before {
    width: 30vw;
    height: 18vh;
    left: -6vw;
    bottom: -2vh;
    background:
        radial-gradient(circle at 50% 50%, rgba(162, 228, 136, 0.92) 0%, rgba(126, 206, 104, 0.88) 56%, rgba(126, 206, 104, 0) 57%);
    opacity: 0.62;
    filter: blur(12px);
}

body::after {
    width: 28vw;
    height: 16vh;
    right: -6vw;
    bottom: 0;
    left: auto;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 214, 118, 0.8) 0%, rgba(255, 214, 118, 0.7) 46%, rgba(255, 214, 118, 0) 47%);
    opacity: 0.38;
    filter: blur(16px);
}

#app-container {
    margin: var(--ai-space-6) auto;
    background:
        linear-gradient(180deg, rgba(255, 254, 250, 0.97) 0%, rgba(252, 255, 248, 0.96) 100%);
    border: 1px solid rgba(255,255,255,0.76);
    border-radius: var(--ai-radius-xl);
    box-shadow: var(--ai-shadow-card);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

/* These screens are island scenes, not cards inside another card. */
body[data-screen="home"] #app-container,
body[data-screen="final-list"] #app-container,
body[data-screen="retry-list"] #app-container {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

/* The island landing and mock lists share the quiet leaf pattern, not the white-dot grid. */
body[data-screen="home"],
body[data-screen="final-list"],
body[data-screen="retry-list"] {
    background-color: #bdf3d2;
    background-image: url("../images/home-leaf-pattern.svg");
    background-repeat: repeat;
    background-size: 384px 384px;
}

body[data-screen="home"]::before,
body[data-screen="home"]::after,
body[data-screen="final-list"]::before,
body[data-screen="final-list"]::after,
body[data-screen="retry-list"]::before,
body[data-screen="retry-list"]::after {
    display: none;
}

main {
    padding: var(--ai-space-6);
    box-sizing: border-box;
}

.home-shell {
    position: relative;
    min-height: calc(100vh - 128px);
    padding: var(--ai-space-5) 0;
}

.home-mode-grid {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    gap: var(--ai-space-5);
}

.home-mode-grid .mode-card {
    position: relative;
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 18px 22px 20px 22px;
    background:
        linear-gradient(180deg, rgba(255,251,244,0.98) 0%, rgba(248,255,244,0.95) 100%);
    box-shadow: var(--ai-shadow-soft);
    padding: var(--ai-space-6);
    min-height: 168px;
    overflow: hidden;
    box-sizing: border-box;
    transition:
        transform var(--ai-transition-base),
        box-shadow var(--ai-transition-base),
        border-color var(--ai-transition-fast),
        background-color var(--ai-transition-fast);
}

.home-mode-grid .mode-card:hover {
    transform: translateY(-3px);
    border-color: rgba(142, 211, 155, 0.92);
    box-shadow: 0 22px 42px rgba(68, 115, 80, 0.18);
}

.home-mode-grid .mode-card h3 {
    margin: 0;
    font-family: var(--ai-font-display);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.25;
    color: var(--ai-color-text);
}

.home-mode-grid .mode-card p {
    margin: var(--ai-space-2) 0 0;
    color: var(--ai-color-text-muted);
    font-size: 0.98rem;
}

.mode-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--ai-space-3);
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.86);
    color: var(--ai-color-primary-strong);
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(95, 133, 95, 0.12);
}

.mode-card.mode-card-final {
    background: linear-gradient(180deg, #fff8ea 0%, #eef9d9 100%);
}

.mode-card.mode-card-retry {
    background: linear-gradient(180deg, #fffaf1 0%, #fff0c8 100%);
}

.mode-card.mode-card-practice {
    background: linear-gradient(180deg, #f7fcff 0%, #dff3ff 100%);
}

.mode-card.mode-card-parent {
    background: linear-gradient(180deg, #fff9fb 0%, #ffe6ef 100%);
}

.question-card,
.feedback-box,
.cat-progress,
.drill-summary,
.image-fallback,
.metric,
.report-item {
    border-radius: var(--ai-radius-md);
}

.question-card,
.feedback-box,
.cat-progress,
.drill-summary {
    background:
        linear-gradient(180deg, rgba(255,252,246,0.98) 0%, rgba(248,255,245,0.94) 100%);
    border: 1px solid rgba(255,255,255,0.88);
    box-shadow: 0 14px 28px rgba(82, 112, 86, 0.08);
    box-sizing: border-box;
    overflow: hidden;
}

.action-btn,
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border-radius: 999px;
    font-family: var(--ai-font-display);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition:
        transform var(--ai-transition-fast),
        box-shadow var(--ai-transition-fast),
        background-color var(--ai-transition-fast),
        border-color var(--ai-transition-fast);
}

.action-btn {
    background: linear-gradient(180deg, #6fd36f 0%, #44b45c 100%);
    border: 1px solid rgba(42, 145, 68, 0.4);
    box-shadow:
        0 12px 18px rgba(68, 180, 92, 0.24),
        0 4px 0 rgba(50, 137, 64, 0.28);
    color: #fff;
}

.action-btn:hover {
    background: linear-gradient(180deg, #7bd97a 0%, #41ab57 100%);
    transform: translateY(-2px);
    box-shadow:
        0 14px 22px rgba(68, 180, 92, 0.26),
        0 5px 0 rgba(50, 137, 64, 0.28);
}

.action-btn:active,
.nav-btn:active {
    transform: translateY(2px);
    box-shadow: 0 4px 10px rgba(72, 96, 74, 0.16);
}

.nav-btn {
    background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(247, 253, 241, 0.9) 100%);
    color: var(--ai-color-text);
    border: 1px solid rgba(200, 232, 206, 0.95);
    box-shadow:
        0 8px 18px rgba(98, 123, 102, 0.1),
        0 3px 0 rgba(175, 208, 172, 0.42);
}

.nav-btn.primary {
    color: #fff;
    background: linear-gradient(180deg, #6fd36f 0%, #44b45c 100%);
    border-color: rgba(42, 145, 68, 0.4);
}

.action-btn:focus-visible,
.nav-btn:focus-visible,
.mode-card:focus-visible,
.topic-choice-card:focus-visible,
.exam-card:focus-visible {
    outline: 3px solid rgba(255, 214, 116, 0.65);
    outline-offset: 3px;
}

.mock-image-option,
.drill-option,
.option-label {
    border-radius: var(--ai-radius-sm);
}

.cat-track-line,
.cat-track-fill {
    border-radius: 999px;
}

input[type="text"],
input[type="number"],
textarea,
select {
    font-family: var(--ai-font-body);
    border-radius: var(--ai-radius-sm);
    border: 1px solid #d5e6d1;
    box-shadow: inset 0 1px 3px rgba(45, 79, 56, 0.05);
    line-height: 1.6;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.tag,
.badge,
.mode-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--ai-color-primary-soft);
    color: var(--ai-color-primary-strong);
    font-weight: 700;
}

progress,
.progress-bar,
.progress-track {
    accent-color: var(--ai-color-primary);
}

.selection-shell {
    max-width: 780px;
    margin: 0 auto;
}

.selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ai-space-4);
    margin-bottom: var(--ai-space-5);
}

.selection-header-copy {
    min-width: 0;
}

.selection-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--ai-space-2);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    color: var(--ai-color-primary-strong);
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(95, 133, 95, 0.12);
}

.selection-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-family: var(--ai-font-display);
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    line-height: 1.2;
    color: var(--ai-color-text);
    padding: 12px 22px 12px 24px;
    border-radius: 999px 999px 999px 18px;
    background:
        linear-gradient(180deg, rgba(255, 247, 219, 0.96) 0%, rgba(255, 234, 177, 0.94) 100%);
    box-shadow:
        0 10px 18px rgba(255, 214, 116, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.82);
}

.selection-title::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    transform: translateY(-50%);
}

.selection-subtitle {
    margin: var(--ai-space-2) 0 0;
    color: var(--ai-color-text-muted);
    line-height: 1.6;
}

.exam-list {
    gap: var(--ai-space-4);
}

.exam-card {
    position: relative;
    padding: var(--ai-space-4);
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 28px 34px 28px 34px;
    background:
        radial-gradient(circle at 20px 20px, rgba(255,255,255,0.75) 0, rgba(255,255,255,0.75) 2px, transparent 2.2px) 0 0 / 18px 18px,
        linear-gradient(180deg, rgba(255,253,248,0.96) 0%, rgba(247,255,244,0.92) 100%);
    box-shadow: 0 16px 28px rgba(82, 112, 86, 0.1);
    transition:
        transform var(--ai-transition-base),
        box-shadow var(--ai-transition-base),
        border-color var(--ai-transition-fast);
    box-sizing: border-box;
    overflow: hidden;
}

.exam-card:hover {
    transform: translateY(-4px);
    border-color: rgba(142, 211, 155, 0.95);
    box-shadow: 0 22px 34px rgba(76, 120, 86, 0.14);
}

.exam-card::after {
    content: "";
    position: absolute;
    inset: 18px 20px auto auto;
    width: 58px;
    height: 44px;
    border-radius: 56% 44% 54% 46%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,0.82) 0, rgba(255,255,255,0) 24%),
        linear-gradient(180deg, rgba(255, 214, 116, 0.54) 0%, rgba(255,241,205,0.12) 100%);
    transform: rotate(14deg);
}

.exam-card-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ai-space-4);
    min-width: 0;
    width: 100%;
}

.exam-card-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--ai-space-2);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ai-color-primary-soft);
    color: var(--ai-color-primary-strong);
    font-size: 0.82rem;
    font-weight: 700;
}

.exam-card .exam-title {
    display: block;
    font-size: 1.15rem;
    font-family: var(--ai-font-display);
    font-weight: 800;
    line-height: 1.25;
    color: var(--ai-color-text);
}

.exam-card-caption {
    margin-top: var(--ai-space-2);
    color: var(--ai-color-text-muted);
    font-size: 0.95rem;
}

.exam-card-action {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 54px;
    padding: 0 24px;
    justify-self: end;
}

.exam-list .exam-card:nth-child(2n) {
    transform: rotate(-0.45deg);
}

.exam-list .exam-card:nth-child(2n + 1) {
    transform: rotate(0.45deg);
}

.exam-list .exam-card:hover {
    transform: translateY(-4px) rotate(0deg);
}

.mock-intro-card {
    max-width: 760px;
    margin: 0 auto;
}

.mock-intro-actions {
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ai-space-5);
}

.mock-intro-hero {
    padding: var(--ai-space-6);
    border-radius: 34px 40px 30px 38px;
    background:
        linear-gradient(180deg, rgba(255,252,245,0.98) 0%, rgba(241,255,238,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.88);
    box-shadow: var(--ai-shadow-card);
    box-sizing: border-box;
}

.mock-intro-hero .home-title {
    margin-bottom: var(--ai-space-2);
    text-align: left;
}

.mock-intro-copy {
    margin: 0 0 var(--ai-space-5);
    color: var(--ai-color-text-muted);
    line-height: 1.6;
}

/* Final-mock entry: one calm task surface, with the same controls used on the list page. */
body[data-screen="final-intro"] #app-container {
    margin: 0 auto;
    min-height: 100vh;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body[data-screen="final-intro"] {
    background-color: #bdf3d2;
    background-image: url("../images/home-leaf-pattern.svg");
    background-repeat: repeat;
    background-size: 384px 384px;
}

body[data-screen="final-intro"]::before,
body[data-screen="final-intro"]::after {
    display: none;
}

body[data-screen="final-intro"] main {
    padding-top: 0;
}

body[data-screen="final-intro"] .mock-intro-shell {
    width: min(100%, 640px);
    max-width: 640px;
    margin: 0 auto;
}

body[data-screen="final-intro"] .mock-intro-top-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: clamp(96px, 18vh, 284px);
    margin: 0;
}

body[data-screen="final-intro"] .mock-intro-top-action .nav-btn {
    min-height: 0;
    padding: 10px 20px;
    border: 1px solid #d3aa55;
    border-radius: 14px;
    background: #f8dda0;
    color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(123, 91, 37, 0.13);
    width: auto;
    align-self: flex-start;
    flex: 0 0 auto;
}

body[data-screen="final-intro"] .mock-intro-card {
    max-width: none;
    margin: 0;
}

body[data-screen="final-intro"] .mock-intro-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title start"
        "scores scores";
    align-items: center;
    gap: var(--ai-space-4);
    padding: clamp(22px, 4vw, 32px) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body[data-screen="final-intro"] .mock-intro-title {
    grid-area: title;
    min-width: 0;
    margin: 0;
    color: var(--ai-color-text);
    font-family: var(--ai-font-display);
    font-size: clamp(1.45rem, 4vw, 2rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body[data-screen="final-intro"] .mock-intro-score-strip {
    grid-area: scores;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border-top: 1px solid rgba(91, 132, 95, 0.18);
}

body[data-screen="final-intro"] .mock-intro-score {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    padding: var(--ai-space-3) var(--ai-space-2) 0;
    color: var(--ai-color-text-muted);
    text-align: center;
}

body[data-screen="final-intro"] .mock-intro-score + .mock-intro-score {
    border-left: 1px solid rgba(91, 132, 95, 0.18);
}

body[data-screen="final-intro"] .mock-intro-score strong {
    color: var(--ai-color-text);
    font-family: var(--ai-font-display);
    font-size: clamp(1.45rem, 5vw, 1.85rem);
    line-height: 1;
}

body[data-screen="final-intro"] .mock-intro-score span {
    font-size: 0.86rem;
    line-height: 1.25;
}

body[data-screen="final-intro"] .mock-intro-start {
    grid-area: start;
    width: auto;
    min-width: 88px;
    min-height: 44px;
    padding: 0 16px;
}

@media (max-width: 560px) {
    body[data-screen="final-intro"] .mock-intro-top-action .nav-btn {
        width: auto;
        min-height: 44px;
        padding: 0 16px;
        white-space: nowrap;
    }

    body[data-screen="final-intro"] .mock-intro-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--ai-space-3);
    }

    body[data-screen="final-intro"] .mock-intro-start {
        width: auto;
        min-height: 44px;
    }
}

.exam-stage-shell {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--ai-space-6);
    border-radius: 32px 38px 28px 36px;
    background:
        linear-gradient(180deg, rgba(255,252,245,0.98) 0%, rgba(244,255,240,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.88);
    box-shadow: var(--ai-shadow-card);
    box-sizing: border-box;
}

.exam-stage-meta {
    margin: 0 0 var(--ai-space-5);
    color: var(--ai-color-text-muted);
    font-weight: 600;
}

.exam-stage-nav {
    justify-content: space-between;
    align-items: center;
    gap: var(--ai-space-3);
}

.stage-read-aloud .question-text {
    margin-bottom: var(--ai-space-5);
    padding: var(--ai-space-6);
    border-radius: 28px 32px 24px 30px;
    background: linear-gradient(180deg, rgba(255,252,246,0.96) 0%, rgba(244,255,240,0.84) 100%);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 16px 28px rgba(84, 118, 88, 0.1);
    color: var(--ai-color-text);
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.speaking-actions {
    gap: var(--ai-space-3);
    margin-bottom: var(--ai-space-4);
}

.speaking-actions .action-btn {
    min-height: 52px;
    padding: 0 18px;
}

.record-btn {
    background: linear-gradient(180deg, #69c7ff 0%, #4caef0 100%);
    box-shadow:
        0 12px 20px rgba(76, 174, 240, 0.22),
        0 4px 0 rgba(69, 141, 201, 0.22);
}

.record-btn:hover {
    background: linear-gradient(180deg, #79d1ff 0%, #429edc 100%);
}

.btn-quiet,
.btn-secondary {
    background: rgba(255,255,255,0.92);
    color: var(--ai-color-text);
    border: 1px solid #cfe8d4;
    box-shadow:
        0 8px 18px rgba(98, 123, 102, 0.1),
        0 3px 0 rgba(204, 220, 201, 0.42);
}

.speaking-transcript {
    margin-top: 0;
    padding: 16px 18px !important;
    min-height: 56px !important;
    background: rgba(240, 250, 255, 0.92) !important;
    border: 1px solid #cde8f6;
    border-radius: var(--ai-radius-md);
    color: #2b6f96 !important;
    font-style: normal !important;
    line-height: 1.6;
    box-sizing: border-box;
}

.speaking-confirm-box {
    margin-top: var(--ai-space-4);
    padding: var(--ai-space-4);
    border-radius: 28px 32px 24px 30px;
    background: rgba(255,253,248,0.94);
    border: 1px solid #d7ecdc;
    box-shadow: 0 10px 20px rgba(85, 116, 89, 0.08);
    box-sizing: border-box;
}

.speaking-confirm-box label {
    display: inline-block;
    margin-bottom: var(--ai-space-2);
    color: var(--ai-color-text);
    font-weight: 700;
}

.speaking-confirm-input {
    width: 100%;
    min-height: 136px;
    padding: 14px 16px;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.6;
}

.mock-audio-status {
    margin-bottom: var(--ai-space-3);
    color: var(--ai-color-text-muted) !important;
}

.question-action-row .compact-btn {
    min-height: 48px;
    padding: 0 18px;
    background: linear-gradient(180deg, #ffd969 0%, #f6b841 100%);
    color: #6a4b00;
    box-shadow:
        0 12px 20px rgba(246, 184, 65, 0.22),
        0 4px 0 rgba(215, 160, 53, 0.22);
}

.question-action-row .compact-btn:hover {
    background: linear-gradient(180deg, #ffe17d 0%, #efb02e 100%);
}

.stage-objective .question-text,
.stage-topic-select .question-text,
.stage-topic-prep .question-text,
.stage-topic-speaking .question-text,
.stage-ai-qa .question-text {
    margin-bottom: var(--ai-space-4);
    color: var(--ai-color-text);
}

.stage-objective .mock-image-option-grid {
    gap: var(--ai-space-4);
}

.stage-objective .mock-image-option,
.stage-objective .drill-option {
    min-height: 168px;
    padding: var(--ai-space-4);
    border: 1px solid rgba(255,255,255,0.92);
    background:
        radial-gradient(circle at 20px 20px, rgba(255,255,255,0.7) 0, rgba(255,255,255,0.7) 2px, transparent 2.2px) 0 0 / 18px 18px,
        rgba(255,253,248,0.94);
    box-shadow: 0 14px 24px rgba(83, 110, 88, 0.1);
    box-sizing: border-box;
}

.stage-objective .drill-option {
    min-height: 56px;
    justify-content: center;
}

.stage-objective .mock-image-option:hover,
.stage-objective .drill-option:hover {
    transform: translateY(-2px);
    border-color: rgba(142, 211, 155, 0.95);
    box-shadow: 0 18px 28px rgba(76, 120, 86, 0.14);
}

.stage-objective .mock-image-option.option-selected,
.stage-objective .drill-option.option-selected {
    background: linear-gradient(180deg, rgba(239,251,234,0.98) 0%, rgba(225,247,216,0.98) 100%);
    border-color: #67c26f;
    box-shadow: 0 20px 30px rgba(69, 153, 79, 0.18);
}

.stage-objective .mock-image-option img,
.stage-objective .image-fallback img {
    border-radius: var(--ai-radius-md);
}

.stage-objective .image-fallback {
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,247,223,0.92) 100%);
    border: 1px dashed #efc767;
}

.stage-objective .mock-image-debug {
    margin-top: var(--ai-space-2);
}

.topic-selection-grid {
    gap: var(--ai-space-4);
}

.topic-choice-card {
    padding: var(--ai-space-4);
    min-height: 240px;
    justify-content: flex-start;
    text-align: center;
    border-radius: 28px 34px 26px 32px;
    background:
        radial-gradient(circle at 20px 20px, rgba(255,255,255,0.72) 0, rgba(255,255,255,0.72) 2px, transparent 2.2px) 0 0 / 18px 18px,
        rgba(255,253,248,0.94);
    border: 1px solid rgba(255,255,255,0.92);
    box-shadow: 0 14px 24px rgba(83, 110, 88, 0.1);
    box-sizing: border-box;
}

.topic-choice-card:hover {
    transform: translateY(-4px);
}

.topic-choice-card.topic-selected {
    border-color: #67c26f;
    background: linear-gradient(180deg, rgba(239,251,234,0.98) 0%, rgba(225,247,216,0.98) 100%);
    box-shadow: 0 20px 30px rgba(69, 153, 79, 0.18);
}

.topic-choice-card img {
    width: 132px;
    height: 132px;
    object-fit: cover;
    border-radius: 26px;
    margin: 0 auto var(--ai-space-3);
    box-shadow: 0 12px 20px rgba(80, 108, 83, 0.14);
}

.topic-choice-card h3 {
    margin: 0;
    width: 100%;
}

.practice-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.practice-mode-grid .mode-card {
    min-height: 148px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.practice-mode-grid .mode-card h3 {
    margin: 0;
}

.topic-prep-card,
.topic-speaking-confirm-box {
    background: rgba(255,255,255,0.92);
}

.topic-prep-card {
    padding: var(--ai-space-4);
    border-radius: 28px 34px 26px 32px;
    border: 1px solid rgba(255,255,255,0.92);
    box-shadow: 0 14px 24px rgba(83, 110, 88, 0.1);
    box-sizing: border-box;
}

.topic-prep-countdown-card {
    margin-top: var(--ai-space-4);
    padding: var(--ai-space-4);
    text-align: center;
    border-radius: var(--ai-radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(239,251,234,0.98) 100%);
    border: 1px solid #d8ecd5;
}

.topic-prep-countdown {
    font-size: 34px;
    color: #06b640;
    font-weight: 700;
}

.ai-qa-question-card {
    padding: var(--ai-space-4);
    margin-bottom: var(--ai-space-4);
    border-radius: var(--ai-radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(243,247,255,0.96) 100%);
    border: 1px solid rgba(209, 224, 255, 0.92);
    box-shadow: 0 14px 24px rgba(83, 110, 88, 0.1);
}

.ai-qa-question-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--ai-space-2);
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef5ff;
    color: #3f6ca8;
    font-size: 0.82rem;
    font-weight: 700;
}

.ai-qa-question-text {
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--ai-color-text);
}

.ai-qa-confirm-box {
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(246,249,255,0.92) 100%);
}

.result-top-actions {
    justify-content: space-between;
    align-items: center;
}

.result-hero-card {
    max-width: 780px;
    margin: 0 auto var(--ai-space-5);
    padding: var(--ai-space-6);
    border-radius: 34px 40px 30px 38px;
    background:
        linear-gradient(180deg, rgba(255,252,245,0.98) 0%, rgba(240,255,236,0.96) 100%);
    border: 1px solid rgba(255,255,255,0.88);
    box-shadow: var(--ai-shadow-card);
    box-sizing: border-box;
}

.result-section-card {
    max-width: 780px;
    margin: 0 auto var(--ai-space-5);
    padding: var(--ai-space-5);
    border-radius: 30px 36px 28px 34px;
    background: rgba(255,252,246,0.95);
    border: 1px solid rgba(255,255,255,0.88);
    box-shadow: 0 16px 28px rgba(82, 112, 86, 0.1);
    box-sizing: border-box;
}

.result-section-title {
    display: inline-flex;
    align-items: center;
    margin: 0 0 var(--ai-space-4);
    padding: 10px 18px 10px 20px;
    border-radius: 999px 999px 999px 18px;
    background: linear-gradient(180deg, rgba(255,245,214,0.95) 0%, rgba(255,232,167,0.92) 100%);
    font-family: var(--ai-font-display);
    font-size: 1.28rem;
    line-height: 1.2;
    color: var(--ai-color-text);
    box-shadow: 0 8px 16px rgba(255, 214, 116, 0.16);
}

.result-review-item {
    margin-top: var(--ai-space-3);
    padding-top: var(--ai-space-3);
    border-top: 1px dashed #d9e5db;
    line-height: 1.65;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.result-check {
    display: inline-flex;
    margin-top: var(--ai-space-1);
    font-weight: 700;
}

.result-check.ok {
    color: #2e7d32;
}

.result-check.bad {
    color: #c62828;
}

.teacher-example-line {
    margin: 0 0 var(--ai-space-3);
    line-height: 1.75;
}

.teacher-example-line:last-child {
    margin-bottom: 0;
}

.ai-review-card [style*="background:#f3e5f5"] {
    background: linear-gradient(180deg, rgba(244,237,255,0.96) 0%, rgba(251,247,255,0.96) 100%) !important;
    border: 1px solid #e2d7fb !important;
    border-radius: var(--ai-radius-lg) !important;
    padding: var(--ai-space-4) !important;
}

.speaking-card {
    border-radius: var(--ai-radius-xl);
    border: 1px solid rgba(255,255,255,0.88);
    box-shadow: var(--ai-shadow-card);
    background: rgba(255,255,255,0.94);
}

.feedback-box,
.speaking-note {
    border-radius: var(--ai-radius-lg);
}

.report-item {
    line-height: 1.7;
}

[data-screen="final-list"] .exam-card,
[data-screen="retry-list"] .exam-card {
    min-height: 110px;
}

[data-screen="home"] .selection-title,
[data-screen="retry-list"] .selection-title,
[data-screen="practice-home"] .selection-title,
[data-screen="parent-center"] .selection-title {
    max-width: 100%;
}

/* Mock lists use one interactive frame per exam, with the island scene as their page surface. */
[data-screen="retry-list"] .selection-title,
[data-screen="practice-home"] .selection-title {
    display: block;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

[data-screen="final-list"] .final-list-shell {
    display: grid;
    grid-template-rows: minmax(64px, 1fr) auto minmax(0, 1fr);
    width: min(100%, 640px);
    max-width: 640px;
    min-height: calc(100dvh - (var(--ai-space-6) * 2));
}

[data-screen="final-list"] .final-list-shell::after {
    content: "";
    grid-row: 3;
}

[data-screen="final-list"] .final-list-top-action {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

[data-screen="retry-list"] .selection-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--ai-space-5);
}

[data-screen="final-list"] .selection-header .nav-btn,
[data-screen="retry-list"] .selection-header .nav-btn {
    min-height: 0;
    padding: 10px 20px;
    border-radius: 14px;
    border: 1px solid #d3aa55;
    background: #f8dda0;
    color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(123, 91, 37, 0.13);
    width: auto;
    align-self: flex-start;
    flex: 0 0 auto;
}

[data-screen="retry-list"] .selection-header .nav-btn {
    order: -1;
}

[data-screen="retry-list"] .selection-title {
    margin-top: var(--ai-space-5);
}

[data-screen="retry-list"] .selection-title::after,
[data-screen="final-list"] .exam-card::after,
[data-screen="retry-list"] .exam-card::after {
    display: none;
}

[data-screen="final-list"] .exam-list {
    grid-row: 2;
    width: 100%;
    margin: 0;
    gap: 10px;
}

[data-screen="retry-list"] .exam-list {
    margin-top: var(--ai-space-3);
    gap: var(--ai-space-2);
}

[data-screen="final-list"] .exam-card,
[data-screen="retry-list"] .exam-card {
    min-height: 0;
    padding: var(--ai-space-3);
    border-color: rgba(255, 255, 255, 0.84);
    border-radius: 18px 22px 20px 22px;
    background: rgba(255, 253, 248, 0.9);
    box-shadow: 0 5px 12px rgba(82, 112, 86, 0.08);
    transform: none;
}

[data-screen="final-list"] .exam-card {
    padding: 10px var(--ai-space-3);
}

[data-screen="final-list"] .exam-list .exam-card:nth-child(2n),
[data-screen="final-list"] .exam-list .exam-card:nth-child(2n + 1),
[data-screen="retry-list"] .exam-list .exam-card:nth-child(2n),
[data-screen="retry-list"] .exam-list .exam-card:nth-child(2n + 1) {
    transform: none;
}

[data-screen="final-list"] .exam-card-action,
[data-screen="retry-list"] .exam-card-action {
    width: auto;
    min-width: 88px;
    min-height: 48px;
    padding: 0 18px;
}

[data-screen="final-list"] .exam-card-action {
    min-height: 44px;
    padding: 0 16px;
}

[data-screen="final-list"] .exam-card-content,
[data-screen="retry-list"] .exam-card-content {
    min-height: 64px;
    align-items: center;
}

[data-screen="final-list"] .exam-card-content {
    min-height: 44px;
}

/* Retry mocks and child practice use the same single-layer island list as the
   final mocks: one scene, one top action area, and one interactive card per entry. */
body[data-screen="practice-home"] #app-container {
    margin: 0 auto;
    min-height: 100vh;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body[data-screen="practice-home"] {
    background-color: #bdf3d2;
    background-image: url("../images/home-leaf-pattern.svg");
    background-repeat: repeat;
    background-size: 384px 384px;
}

body[data-screen="practice-home"]::before,
body[data-screen="practice-home"]::after {
    display: none;
}

[data-screen="retry-list"] .island-list-shell,
[data-screen="practice-home"] .island-list-shell {
    display: grid;
    grid-template-rows: minmax(64px, 1fr) auto minmax(0, 1fr);
    width: min(100%, 640px);
    max-width: 640px;
    min-height: calc(100dvh - (var(--ai-space-6) * 2));
}

[data-screen="retry-list"] .island-list-shell::after,
[data-screen="practice-home"] .island-list-shell::after {
    content: "";
    grid-row: 3;
}

[data-screen="retry-list"] .island-list-top-action,
[data-screen="practice-home"] .island-list-top-action {
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

[data-screen="retry-list"] .island-list-top-action .nav-btn,
[data-screen="practice-home"] .island-list-top-action .nav-btn {
    min-height: 0;
    padding: 10px 20px;
    border: 1px solid #d3aa55;
    border-radius: 14px;
    background: #f8dda0;
    color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(123, 91, 37, 0.13);
    width: auto;
    align-self: flex-start;
    flex: 0 0 auto;
}

[data-screen="retry-list"] .island-list-shell .exam-list,
[data-screen="practice-home"] .island-list-shell .exam-list {
    grid-row: 2;
    width: 100%;
    margin: 0;
    gap: 10px;
}

[data-screen="retry-list"] .island-list-shell .exam-card,
[data-screen="practice-home"] .island-list-shell .exam-card {
    min-height: 0;
    padding: 10px var(--ai-space-3);
    border-color: rgba(255, 255, 255, 0.84);
    border-radius: 18px 22px 20px 22px;
    background: rgba(255, 253, 248, 0.9);
    box-shadow: 0 5px 12px rgba(82, 112, 86, 0.08);
    transform: none;
}

[data-screen="retry-list"] .island-list-shell .exam-card::after,
[data-screen="practice-home"] .island-list-shell .exam-card::after {
    display: none;
}

[data-screen="retry-list"] .island-list-shell .exam-list .exam-card:nth-child(2n),
[data-screen="retry-list"] .island-list-shell .exam-list .exam-card:nth-child(2n + 1),
[data-screen="practice-home"] .island-list-shell .exam-list .exam-card:nth-child(2n),
[data-screen="practice-home"] .island-list-shell .exam-list .exam-card:nth-child(2n + 1) {
    transform: none;
}

[data-screen="retry-list"] .island-list-shell .exam-card-content,
[data-screen="practice-home"] .island-list-shell .exam-card-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 44px;
    align-items: center;
    gap: var(--ai-space-3);
}

[data-screen="retry-list"] .island-list-shell .exam-card-action,
[data-screen="practice-home"] .island-list-shell .exam-card-action {
    width: auto;
    min-width: 88px;
    min-height: 44px;
    padding: 0 16px;
}

@media (max-width: 768px) {
    #app-container {
        margin: 0;
        min-height: 100vh;
        border-radius: 0;
    }

    main {
        padding: var(--ai-space-5);
    }

    .home-shell {
        min-height: calc(100vh - 96px);
    }

    .home-mode-grid .mode-card {
        min-height: 150px;
        padding: var(--ai-space-5);
    }

    .exam-stage-shell {
        padding: var(--ai-space-5);
    }

    .selection-header,
    .exam-card-content,
    .mock-intro-actions,
    .result-top-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .selection-title {
        align-self: flex-start;
        max-width: 100%;
    }

    .exam-card-content {
        grid-template-columns: 1fr;
    }

    .exam-card-action {
        width: 100%;
    }

    .topic-choice-card {
        min-height: 220px;
    }

    .practice-mode-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .home-mode-grid {
        grid-template-columns: 1fr;
    }

    .home-mode-grid .mode-card {
        min-height: 138px;
    }

    main {
        padding: var(--ai-space-4);
    }

    .exam-stage-shell,
    .result-hero-card,
    .result-section-card,
    .mock-intro-hero {
        padding: var(--ai-space-4);
    }

    .selection-title,
    .result-section-title {
        font-size: 1.05rem;
    }

    .action-btn,
    .nav-btn,
    .exam-card-action,
    .question-action-row .compact-btn,
    .speaking-actions .action-btn {
        width: 100%;
        min-height: 50px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 768px) {
    [data-screen="retry-list"] .selection-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    [data-screen="final-list"] .final-list-shell {
        grid-template-rows: minmax(60px, 1fr) auto minmax(0, 1fr);
        min-height: calc(100dvh - (var(--ai-space-5) * 2));
    }

    [data-screen="practice-home"] .selection-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--ai-space-3);
    }

    /* Keep the child-practice back action identical to the mock-list header. */
    body[data-screen="practice-home"] .island-list-top-action {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
    }

    [data-screen="final-list"] .exam-card-content,
    [data-screen="retry-list"] .exam-card-content {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--ai-space-3);
    }

}

@media (max-width: 560px) {
    [data-screen="final-list"] .selection-header .nav-btn,
    [data-screen="retry-list"] .selection-header .nav-btn,
    [data-screen="practice-home"] .selection-header .nav-btn {
        width: auto;
        min-height: 44px;
        padding: 0 16px;
        white-space: nowrap;
    }
}

/* Keep Part B's component system above legacy exam-stage declarations. */
body[data-screen="final-mock-stage"] .part-b-topbar {
    justify-content: flex-start;
}

body[data-screen="final-mock-stage"] .part-b-home-btn,
body[data-screen="final-mock-stage"] .part-b-stage-nav .part-b-warm-nav {
    width: auto;
    border: 1px solid #d3aa55;
    background: #f8dda0;
    color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(123,91,37,0.13);
}

body[data-screen="final-mock-stage"] .part-b-status-row .part-b-section-pill,
body[data-screen="final-mock-stage"] .part-b-status-row .part-b-progress-pill {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

body[data-screen="final-mock-stage"] .part-b-audio-row {
    justify-content: center;
}

body[data-screen="final-mock-stage"] .part-b-stage-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 16px;
}

body[data-screen="final-mock-stage"] .part-b-stage-nav .nav-btn {
    width: 100%;
}

body[data-screen="final-mock-stage"] .part-b-stage-nav .part-b-forward-btn {
    border: 1px solid #428f91;
    background: #62bcb9;
    color: #fff;
    box-shadow: 0 4px 0 #428f91, 0 9px 16px rgba(58,124,126,0.16);
}

@media (max-width: 720px) {
    body[data-screen="final-mock-stage"] .part-b-home-btn {
        width: auto;
    }

    body[data-screen="final-mock-stage"] .part-b-stage-nav {
        gap: 12px;
    }
}

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

/* Part A uses the viewport as three deliberate zones: status, task, navigation. */
body[data-screen="part-a"] .exam-page {
    min-height: calc(100dvh - 48px);
    grid-template-rows: auto minmax(0, 1fr) auto;
}

body[data-screen="part-a"] .exam-page .exam-toolbar {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

body[data-screen="part-a"] .exam-page .exam-status-group {
    align-self: auto;
    width: auto;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

/* Part B shares Part A's header: home action left, stage and progress grouped right. */
body[data-screen="final-mock-stage"] .exam-page.part-b-scene-shell > .exam-toolbar {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

body[data-screen="final-mock-stage"] .exam-page.part-b-scene-shell > .exam-toolbar .part-b-status-row {
    width: auto;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end;
}

/* Part C uses the same top action split as Parts A and B. */
body[data-screen="final-mock-stage"] .exam-page.part-c-scene-shell > .exam-toolbar {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

body[data-screen="final-mock-stage"] .exam-page.part-c-scene-shell > .exam-toolbar .part-c-status-row {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 0 auto;
    align-self: center;
    align-items: center;
    justify-content: flex-end;
}

/* Part D keeps the same left home action and right status group as Parts B and C. */
body[data-screen="final-mock-stage"] .exam-page.part-d-scene-shell > .exam-toolbar {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

body[data-screen="final-mock-stage"] .exam-page.part-d-scene-shell > .exam-toolbar .part-d-status-row {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 0 auto;
    align-self: center;
    align-items: center;
    justify-content: flex-end;
}

/* Reuse Part A's approved home action exactly for every mock stage. */
body[data-screen="final-mock-stage"] .final-mock-topbar .part-b-home-btn,
body[data-screen="final-mock-stage"] .final-mock-topbar .part-c-home-btn,
body[data-screen="final-mock-stage"] .final-mock-topbar .part-d-home-btn {
    width: auto;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #d6b65f;
    border-radius: 13px;
    background: #f8dda0;
    color: #684f2f;
    font-family: var(--ai-font-body);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.25;
    box-shadow: 0 4px 0 #c39c46, 0 9px 18px rgba(123, 91, 37, 0.13);
    backdrop-filter: blur(8px);
}

body[data-screen="final-mock-stage"] .final-mock-topbar .part-b-home-btn:hover,
body[data-screen="final-mock-stage"] .final-mock-topbar .part-c-home-btn:hover,
body[data-screen="final-mock-stage"] .final-mock-topbar .part-d-home-btn:hover {
    transform: translateY(-1px);
    background: #fbe5b0;
    box-shadow: 0 5px 0 #c39c46, 0 11px 20px rgba(123, 91, 37, 0.15);
}

body[data-screen="final-mock-stage"] .final-mock-topbar .part-b-home-btn:active,
body[data-screen="final-mock-stage"] .final-mock-topbar .part-c-home-btn:active,
body[data-screen="final-mock-stage"] .final-mock-topbar .part-d-home-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #c39c46, 0 4px 9px rgba(123, 91, 37, 0.1);
}

body[data-screen="part-a"] .exam-page .exam-stage-shell {
    align-self: center;
}

body[data-screen="part-a"] .part-a-speaking-actions .record-btn {
    align-self: center;
    margin-inline: auto;
}

/* The first Part A screen has one forward action, so it follows the card's right edge. */
body[data-screen="part-a"] .exam-page .exam-navigation:has(.part-a-forward-btn:only-child) {
    display: flex;
    justify-content: flex-end;
}

body[data-screen="part-a"] .exam-page .exam-navigation .part-a-forward-btn:only-child {
    width: 50%;
}

@media (max-width: 640px) {
    body[data-screen="part-a"] .exam-page {
        min-height: calc(100dvh - 32px);
    }

    body[data-screen="part-a"] .exam-page .exam-toolbar {
        gap: 12px;
    }
}

/* Part A visual sample: a focused reading task inside a quiet outdoor scene. */
body[data-screen="part-a"] {
    --part-a-sky: #dff3f3;
    --part-a-horizon: #eaf2d9;
    --part-a-field: #b9d799;
    --part-a-field-deep: #82b66c;
    --part-a-paper: #fffaf0;
    --part-a-paper-edge: #eadfca;
    --part-a-ink: #5a4637;
    --part-a-muted: #716d61;
    --part-a-coral: #e98f78;
    --part-a-coral-deep: #c96d5b;
    --part-a-mint: #62bcb9;
    --part-a-mint-deep: #428f91;
    background:
        radial-gradient(ellipse at 16% 15%, rgba(255, 255, 255, 0.82) 0 8%, transparent 8.5%),
        radial-gradient(ellipse at 80% 10%, rgba(255, 255, 255, 0.66) 0 7%, transparent 7.5%),
        linear-gradient(180deg, var(--part-a-sky) 0 48%, var(--part-a-horizon) 48% 66%, var(--part-a-field) 66% 100%);
    color: var(--part-a-ink);
    overflow-x: hidden;
}

body[data-screen="part-a"]::before {
    width: 360px;
    height: 380px;
    left: -110px;
    bottom: -90px;
    background:
        radial-gradient(circle at 42% 20%, rgba(85, 148, 79, 0.76) 0 22%, transparent 23%),
        radial-gradient(circle at 65% 31%, rgba(105, 169, 91, 0.7) 0 24%, transparent 25%),
        radial-gradient(circle at 34% 44%, rgba(120, 179, 99, 0.66) 0 28%, transparent 29%),
        linear-gradient(90deg, transparent 42%, rgba(132, 102, 70, 0.46) 42% 50%, transparent 50%);
    opacity: 0.72;
    filter: blur(0.2px);
}

body[data-screen="part-a"]::after {
    width: 100%;
    height: 155px;
    left: 0;
    right: 0;
    bottom: -72px;
    background:
        radial-gradient(ellipse at 8% 90%, rgba(75, 139, 69, 0.54) 0 12%, transparent 12.5%),
        radial-gradient(ellipse at 28% 100%, rgba(101, 157, 79, 0.5) 0 16%, transparent 16.5%),
        radial-gradient(ellipse at 72% 100%, rgba(92, 151, 75, 0.48) 0 17%, transparent 17.5%),
        radial-gradient(ellipse at 94% 88%, rgba(72, 132, 67, 0.52) 0 13%, transparent 13.5%);
    opacity: 0.78;
    filter: none;
}

body[data-screen="part-a"] #app-container {
    width: min(1120px, calc(100% - 48px));
    max-width: none;
    min-height: calc(100vh - 48px);
    margin: 24px auto;
    background: rgba(250, 247, 235, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 36px;
    box-shadow: none;
    backdrop-filter: blur(2px);
    overflow: visible;
}

body[data-screen="part-a"] main {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 48px);
    padding: 30px 48px 42px;
    overflow: visible;
}

.part-a-scene-shell {
    position: relative;
    width: 100%;
    max-width: 930px;
    margin: 0 auto;
    padding: 70px 0 22px;
    box-sizing: border-box;
}

.part-a-scene-shell::before {
    content: "";
    position: absolute;
    inset: 42px 6% 0;
    z-index: -1;
    border-radius: 44% 56% 47% 53% / 50% 44% 56% 50%;
    background: rgba(255, 250, 232, 0.34);
    box-shadow: 0 32px 70px rgba(64, 91, 58, 0.11);
    backdrop-filter: blur(8px);
}

.final-mock-topbar {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    margin: 0;
}

body[data-screen="part-a"] .final-mock-topbar .nav-btn {
    width: auto;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #d6b65f;
    border-radius: 13px;
    background: #f8dda0;
    color: #684f2f;
    font-family: var(--ai-font-body);
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.25;
    box-shadow: 0 4px 0 #c39c46, 0 9px 18px rgba(123, 91, 37, 0.13);
    backdrop-filter: blur(8px);
}

body[data-screen="part-a"] .final-mock-topbar .nav-btn:hover {
    transform: translateY(-1px);
    background: #fbe5b0;
    box-shadow: 0 5px 0 #c39c46, 0 11px 20px rgba(123, 91, 37, 0.15);
}

body[data-screen="part-a"] .final-mock-topbar .nav-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #c39c46, 0 4px 9px rgba(123, 91, 37, 0.1);
}

.part-a-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 14px;
}

body[data-screen="part-a"] .part-a-status-row .section-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid rgba(70, 119, 88, 0.14);
    border-radius: 999px;
    background: rgba(239, 249, 239, 0.82);
    color: #486a53;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: none;
    backdrop-filter: blur(8px);
}

body[data-screen="part-a"] .part-a-status-row .section-title::before,
body[data-screen="part-a"] .part-a-status-row .section-title::after {
    display: none;
}

body[data-screen="part-a"] .part-a-status-row .exam-stage-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid rgba(112, 101, 77, 0.13);
    border-radius: 999px;
    background: rgba(255, 250, 239, 0.8);
    color: var(--part-a-muted);
    font-size: 0.84rem;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: none;
    backdrop-filter: blur(8px);
}

body[data-screen="part-a"] .exam-stage-shell.stage-read-aloud {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding: 34px 44px 28px;
    border: 1px solid var(--part-a-paper-edge);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12px 12px, rgba(116, 92, 60, 0.035) 0 1px, transparent 1.2px) 0 0 / 22px 22px,
        var(--part-a-paper);
    box-shadow:
        0 8px 0 rgba(126, 102, 68, 0.12),
        0 24px 54px rgba(55, 70, 47, 0.18);
    overflow: visible;
}

body[data-screen="part-a"] .exam-stage-shell.stage-read-aloud::before,
body[data-screen="part-a"] .exam-stage-shell.stage-read-aloud::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

body[data-screen="part-a"] .exam-stage-shell.stage-read-aloud::before {
    width: 76px;
    height: 38px;
    left: -38px;
    top: 54px;
    border-radius: 70% 30% 65% 35%;
    background: rgba(111, 169, 91, 0.72);
    transform: rotate(-16deg);
}

body[data-screen="part-a"] .exam-stage-shell.stage-read-aloud::after {
    width: 70px;
    height: 34px;
    right: -34px;
    bottom: 64px;
    border-radius: 35% 65% 32% 68%;
    background: rgba(238, 188, 95, 0.68);
    transform: rotate(13deg);
}

.part-a-task {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

body[data-screen="part-a"] .stage-read-aloud .question-text.part-a-prompt {
    text-align: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--part-a-ink);
    font-family: var(--ai-font-display), "Trebuchet MS", var(--ai-font-body);
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: 0;
    text-wrap: balance;
}

.part-a-speaking-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    width: 100%;
    margin: 8px 0 0;
}

body[data-screen="part-a"] .part-a-speaking-actions .record-btn {
    width: min(100%, 410px);
    min-height: 64px;
    padding: 0 28px;
    border: 1px solid #c86655;
    border-radius: 17px;
    background: var(--part-a-coral);
    color: #fffdf8;
    font-family: var(--ai-font-body);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.3;
    box-shadow:
        0 5px 0 var(--part-a-coral-deep),
        0 12px 22px rgba(165, 89, 72, 0.2);
}

body[data-screen="part-a"] .part-a-speaking-actions .record-btn:hover {
    transform: translateY(-2px);
    background: #ee9983;
    box-shadow:
        0 7px 0 var(--part-a-coral-deep),
        0 15px 24px rgba(165, 89, 72, 0.22);
}

body[data-screen="part-a"] .part-a-speaking-actions .record-btn:active,
body[data-screen="part-a"] .part-a-speaking-actions .record-btn.recording {
    transform: translateY(4px);
    box-shadow:
        0 1px 0 var(--part-a-coral-deep),
        0 5px 10px rgba(165, 89, 72, 0.16);
}

body[data-screen="part-a"] .part-a-speaking-actions .btn-quiet {
    width: auto;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid #cddbd2;
    border-radius: 13px;
    background: #f2f8f3;
    color: #54705c;
    font-family: var(--ai-font-body);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 3px 0 #b9c9bf;
}

body[data-screen="part-a"] .part-a-task:has(.speaking-confirm-input:placeholder-shown) .part-a-speaking-actions .btn-quiet {
    display: none;
}

body[data-screen="part-a"] .part-a-speaking-actions .btn-quiet:hover {
    transform: translateY(-1px);
    background: #f7fbf8;
    box-shadow: 0 4px 0 #b9c9bf;
}

body[data-screen="part-a"] .part-a-speaking-actions .btn-quiet:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #b9c9bf;
}

body[data-screen="part-a"] .mock-audio-status {
    width: 100%;
    margin: 9px 0 0;
    text-align: center;
}

.part-a-feedback {
    width: min(100%, 650px);
    margin-top: 10px;
}

body[data-screen="part-a"] .part-a-task > .part-a-recording-status {
    width: min(100%, 410px);
    min-height: 0 !important;
    margin: 0 0 12px;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: #5e7464 !important;
    font-family: var(--ai-font-body);
    font-size: 0.9rem;
    font-style: normal !important;
    line-height: 1.45;
    text-align: center;
    box-shadow: none;
}

body[data-screen="part-a"] .part-a-confirm-box {
    max-height: 420px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #d9e2d7;
    border-radius: 16px;
    background: rgba(255, 253, 247, 0.92);
    box-shadow: 0 8px 18px rgba(69, 81, 61, 0.07);
    opacity: 1;
    overflow: hidden;
    transition: max-height var(--ai-transition-base), opacity var(--ai-transition-fast), padding var(--ai-transition-base), margin var(--ai-transition-base);
}

body[data-screen="part-a"] .part-a-confirm-box label {
    margin-bottom: 8px;
    color: #5e5a4e;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.4;
}

body[data-screen="part-a"] .part-a-confirm-box .speaking-confirm-input {
    min-height: 88px;
    padding: 11px 13px;
    border: 1px solid #d8d4c9;
    border-radius: 12px;
    background: #fffef9;
    color: var(--part-a-ink);
    font-family: var(--ai-font-body);
    font-size: 0.96rem;
    line-height: 1.55;
    box-shadow: inset 0 1px 3px rgba(75, 65, 51, 0.04);
}

body[data-screen="part-a"] .part-a-feedback:has(.speaking-confirm-input:placeholder-shown) .part-a-confirm-box {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
}

body[data-screen="part-a"] .exam-stage-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(128, 115, 89, 0.11);
}

body[data-screen="part-a"] .exam-stage-nav .nav-btn {
    width: auto;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 15px;
    font-family: var(--ai-font-body);
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.25;
}

body[data-screen="part-a"] .exam-stage-nav .part-a-warm-nav {
    border: 1px solid #d6b65f;
    background: #f8dda0;
    color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(123, 91, 37, 0.13);
}

body[data-screen="part-a"] .exam-stage-nav .part-a-warm-nav:hover {
    transform: translateY(-1px);
    background: #fbe5b0;
    box-shadow: 0 5px 0 #c39c46, 0 11px 18px rgba(123, 91, 37, 0.15);
}

body[data-screen="part-a"] .exam-stage-nav .part-a-warm-nav:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #c39c46, 0 4px 8px rgba(123, 91, 37, 0.1);
}

body[data-screen="part-a"] .exam-stage-nav .nav-btn.primary {
    border: 1px solid var(--part-a-mint-deep);
    background: var(--part-a-mint);
    color: #fff;
    box-shadow: 0 4px 0 var(--part-a-mint-deep), 0 9px 16px rgba(58, 124, 126, 0.16);
}

body[data-screen="part-a"] .part-a-warm-nav:disabled,
body[data-screen="part-a"] .part-a-forward-btn:disabled {
    border-color: #c8c9c3;
    background: #dedfd9;
    color: #858781;
    box-shadow: 0 3px 0 #b9bbb5;
    transform: none;
    cursor: not-allowed;
}

body[data-screen="part-a"] .exam-stage-nav .nav-btn.primary:hover {
    transform: translateY(-1px);
    background: #6bc7c3;
    box-shadow: 0 5px 0 var(--part-a-mint-deep), 0 11px 18px rgba(58, 124, 126, 0.18);
}

body[data-screen="part-a"] .exam-stage-nav .nav-btn.primary:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--part-a-mint-deep), 0 4px 8px rgba(58, 124, 126, 0.12);
}

@media (max-width: 720px) {
    body[data-screen="part-a"] #app-container {
        width: calc(100% - 20px);
        min-height: calc(100vh - 20px);
        margin: 10px auto;
        border-radius: 26px;
    }

    body[data-screen="part-a"] main {
        min-height: calc(100vh - 20px);
        padding: 20px 18px 28px;
    }

    .part-a-scene-shell {
        padding-top: 58px;
    }

    body[data-screen="part-a"] .exam-stage-shell.stage-read-aloud {
        padding: 26px 24px 22px;
        border-radius: 24px;
    }

    body[data-screen="part-a"] .exam-stage-shell.stage-read-aloud::before,
    body[data-screen="part-a"] .exam-stage-shell.stage-read-aloud::after {
        display: none;
    }

    body[data-screen="part-a"] .stage-read-aloud .question-text.part-a-prompt {
        font-size: clamp(2rem, 10vw, 3rem);
    }
}

@media (max-width: 430px) {
    body[data-screen="part-a"] {
        background:
            radial-gradient(ellipse at 18% 10%, rgba(255, 255, 255, 0.72) 0 10%, transparent 10.5%),
            linear-gradient(180deg, var(--part-a-sky) 0 47%, var(--part-a-horizon) 47% 67%, var(--part-a-field) 67% 100%);
    }

    body[data-screen="part-a"]::before {
        width: 210px;
        height: 230px;
        left: -92px;
        bottom: -56px;
        opacity: 0.46;
    }

    body[data-screen="part-a"]::after {
        height: 88px;
        bottom: -45px;
        opacity: 0.5;
    }

    body[data-screen="part-a"] #app-container {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    body[data-screen="part-a"] main {
        min-height: 100vh;
        padding: 16px 14px 22px;
    }

    .part-a-scene-shell {
        padding-top: 54px;
    }

    .part-a-status-row {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 11px;
    }

    body[data-screen="part-a"] .part-a-status-row .section-title,
    body[data-screen="part-a"] .part-a-status-row .exam-stage-meta {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    body[data-screen="part-a"] .exam-stage-shell.stage-read-aloud {
        padding: 22px 16px 18px;
        border-radius: 21px;
        box-shadow: 0 6px 0 rgba(126, 102, 68, 0.11), 0 18px 36px rgba(55, 70, 47, 0.15);
    }

    .part-a-speaking-actions {
        gap: 22px;
    }

    body[data-screen="part-a"] .part-a-speaking-actions .record-btn {
        width: 100%;
        min-height: 64px;
        padding: 0 16px;
        font-size: 0.96rem;
    }

    body[data-screen="part-a"] .part-a-speaking-actions .btn-quiet {
        width: auto;
        min-height: 48px;
    }

    body[data-screen="part-a"] .part-a-task > .part-a-recording-status {
        margin-bottom: 10px;
        font-size: 0.84rem;
    }

    body[data-screen="part-a"] .part-a-confirm-box {
        padding: 13px;
    }

    body[data-screen="part-a"] .part-a-confirm-box .speaking-confirm-input {
        min-height: 78px;
    }

    body[data-screen="part-a"] .exam-stage-nav {
        margin-top: 14px;
        padding-top: 14px;
    }

    body[data-screen="part-a"] .exam-stage-nav .nav-btn {
        flex: 1 1 0;
        width: auto;
        padding: 0 12px;
    }
}

/* Part C: topic choice, preparation, and presentation in one calm scene. */
body[data-screen="final-mock-stage"]:has(.part-c-scene-shell) {
    background: #e6f2eb;
}

body[data-screen="final-mock-stage"]:has(.part-c-scene-shell) #app-container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body[data-screen="final-mock-stage"]:has(.part-c-scene-shell) main {
    position: relative;
    min-height: 100vh;
    padding: 28px clamp(20px, 5vw, 72px) 38px;
    background:
        radial-gradient(circle at 13% 12%, rgba(255,255,255,0.8) 0 5%, transparent 5.3%),
        radial-gradient(circle at 88% 11%, rgba(255,255,255,0.7) 0 6%, transparent 6.3%),
        linear-gradient(180deg, #e2f2f1 0 42%, #f4eed2 42% 68%, #b9d69a 68% 100%);
    overflow: hidden;
}

body[data-screen="final-mock-stage"]:has(.part-c-scene-shell) main::before,
body[data-screen="final-mock-stage"]:has(.part-c-scene-shell) main::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

body[data-screen="final-mock-stage"]:has(.part-c-scene-shell) main::before {
    inset: auto -8vw -13vh -8vw;
    height: 43vh;
    border-radius: 52% 48% 0 0 / 29% 33% 0 0;
    background:
        radial-gradient(circle at 22% 28%, rgba(245,186,121,0.26) 0 7%, transparent 7.4%),
        radial-gradient(circle at 78% 20%, rgba(78,145,82,0.24) 0 10%, transparent 10.5%),
        #a9cd8c;
}

body[data-screen="final-mock-stage"]:has(.part-c-scene-shell) main::after {
    width: 160px;
    height: 190px;
    right: 4vw;
    bottom: 8vh;
    border-radius: 54% 46% 48% 52%;
    background: rgba(91,151,82,0.16);
    box-shadow: -78vw -4vh 0 rgba(91,151,82,0.14);
}

.part-c-scene-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 1020px);
    margin: 0 auto;
}

.part-c-topbar {
    justify-content: flex-start;
    margin: 0 0 12px;
}

body[data-screen="final-mock-stage"] .part-c-home-btn,
body[data-screen="final-mock-stage"] .part-c-stage-nav .part-c-warm-nav {
    width: auto;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid #d3aa55;
    border-radius: 15px;
    background: #f8dda0;
    color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(123,91,37,0.13);
}

body[data-screen="final-mock-stage"] .part-c-home-btn:hover,
body[data-screen="final-mock-stage"] .part-c-stage-nav .part-c-warm-nav:hover {
    transform: translateY(-2px);
    background: #ffe6ae;
    box-shadow: 0 6px 0 #c39c46, 0 12px 18px rgba(123,91,37,0.16);
}

body[data-screen="final-mock-stage"] .part-c-home-btn:active,
body[data-screen="final-mock-stage"] .part-c-stage-nav .part-c-warm-nav:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #c39c46, 0 5px 10px rgba(123,91,37,0.12);
}

.part-c-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 14px;
}

body[data-screen="final-mock-stage"] .part-c-status-row .part-c-section-pill,
body[data-screen="final-mock-stage"] .part-c-status-row .part-c-progress-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 36px;
    max-width: none;
    margin: 0;
    padding: 7px 15px;
    border-radius: 999px;
    box-sizing: border-box;
    color: #4c6049;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgba(77,104,73,0.09);
}

.part-c-section-pill {
    border: 1px solid rgba(140,188,137,0.42);
    background: rgba(240,249,235,0.92);
}

.part-c-progress-pill {
    border: 1px solid rgba(215,185,120,0.4);
    background: rgba(255,250,239,0.92);
}

body[data-screen="final-mock-stage"] .part-c-stage-shell {
    width: min(100%, 900px);
    max-width: none;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 24px;
    background:
        radial-gradient(circle at 18px 18px, rgba(211,180,128,0.11) 0 1.4px, transparent 1.6px) 0 0 / 18px 18px,
        #fffaf0;
    box-shadow: 0 7px 0 rgba(126,102,68,0.11), 0 24px 48px rgba(55,70,47,0.18);
}

body[data-screen="final-mock-stage"] .part-c-theme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body[data-screen="final-mock-stage"] .part-c-theme-grid .topic-choice-card {
    position: relative;
    min-height: 254px;
    margin: 0;
    padding: 16px;
    border: 2px solid #dacdb2;
    border-radius: 18px;
    background: #fffdf7;
    color: #4c3b2c;
    box-shadow: 0 5px 0 #c9b991, 0 12px 20px rgba(91,76,49,0.1);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

body[data-screen="final-mock-stage"] .part-c-theme-grid .topic-choice-card:hover {
    transform: translateY(-4px);
    border-color: #7dbf9c;
    box-shadow: 0 9px 0 #b6cfae, 0 17px 25px rgba(67,107,76,0.14);
}

body[data-screen="final-mock-stage"] .part-c-theme-grid .topic-choice-card:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #b6cfae, 0 8px 14px rgba(67,107,76,0.12);
}

body[data-screen="final-mock-stage"] .part-c-theme-grid .topic-choice-card.topic-selected {
    transform: translateY(-3px);
    border-color: #3f9f72;
    background: #ecf8ea;
    box-shadow: 0 7px 0 #70ad7d, 0 16px 26px rgba(54,124,76,0.16), inset 0 0 0 2px rgba(255,255,255,0.82);
}

body[data-screen="final-mock-stage"] .part-c-theme-grid .topic-choice-card.topic-selected::after {
    content: "✓";
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #3f9f72;
    color: #fff;
    line-height: 1;
    box-shadow: 0 3px 0 #2c7955;
}

body[data-screen="final-mock-stage"] .part-c-theme-grid .topic-choice-card img {
    width: 100%;
    height: 168px;
    margin: 0 auto 14px;
    border-radius: 13px;
    object-fit: contain;
    background: #fff;
    box-shadow: none;
}

body[data-screen="final-mock-stage"] .part-c-theme-grid .topic-choice-card h3 {
    color: #4c3b2c;
    font-size: 1rem;
    line-height: 1.35;
}

.part-c-prep-task,
.part-c-speaking-task {
    width: 100%;
    min-width: 0;
}

.part-c-theme-title,
.part-c-speaking-prompt {
    margin: 0 0 18px !important;
    text-align: center;
    color: #4c3b2c !important;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.45;
}

body[data-screen="final-mock-stage"] .part-c-prep-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.part-c-prep-image,
.part-c-speaking-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.part-c-prep-image img,
.part-c-speaking-image img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 14px;
}

body[data-screen="final-mock-stage"] .part-c-prep-card .topic-prep-countdown-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 148px;
    min-height: 52px;
    margin: 0 auto;
    padding: 0 20px;
    border: 1px solid rgba(210, 174, 87, 0.78);
    border-radius: 999px;
    background: rgba(255, 239, 194, 0.9);
    box-shadow: 0 2px 0 rgba(185, 143, 58, 0.38);
    box-sizing: border-box;
}

body[data-screen="final-mock-stage"] .part-c-prep-card .topic-prep-countdown {
    color: #7c5b25;
    font-family: var(--ai-font-display);
    font-size: 1.15rem;
    font-weight: 750;
    line-height: 1.25;
}

.part-c-speaking-topic {
    display: grid;
    grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid #e3d8bf;
    border-radius: 19px;
    background: rgba(255,255,255,0.74);
    box-shadow: 0 5px 0 rgba(171,145,94,0.13), 0 14px 24px rgba(91,76,49,0.1);
}

.part-c-speaking-topic .part-c-speaking-prompt {
    margin: 0 !important;
    text-align: left;
}

body[data-screen="final-mock-stage"] .part-c-speaking-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 22px;
    margin: 0 auto 18px;
}

body[data-screen="final-mock-stage"] .part-c-speaking-actions .record-btn {
    width: min(100%, 430px);
    align-self: center;
    margin-inline: auto;
    min-height: 64px;
    margin-block: 0;
    padding: 0 24px;
    border: 1px solid #cd7968;
    border-radius: 16px;
    background: #df907d;
    color: #fff;
    box-shadow: 0 5px 0 #b96758, 0 12px 22px rgba(141,75,62,0.18);
    font-size: 1rem;
    font-weight: 700;
}

body[data-screen="final-mock-stage"] .part-c-speaking-actions .record-btn:hover {
    transform: translateY(-2px);
    background: #e99a86;
    box-shadow: 0 7px 0 #b96758, 0 15px 24px rgba(141,75,62,0.2);
}

body[data-screen="final-mock-stage"] .part-c-speaking-actions .record-btn:active,
body[data-screen="final-mock-stage"] .part-c-speaking-actions .record-btn.recording {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #b96758, 0 7px 14px rgba(141,75,62,0.16);
}

body[data-screen="final-mock-stage"] .part-c-speaking-actions .btn-quiet {
    width: auto;
    min-height: 48px;
    margin: 0;
    padding: 0 22px;
    border: 1px solid #cfbea0;
    border-radius: 14px;
    background: #fffdf7;
    color: #66533a;
    box-shadow: 0 3px 0 #c9b991, 0 8px 14px rgba(91,76,49,0.1);
}

body[data-screen="final-mock-stage"] .part-c-speaking-task:has(.speaking-confirm-input:placeholder-shown) .part-c-speaking-actions .btn-quiet {
    display: none;
}

body[data-screen="final-mock-stage"] .part-c-speaking-task > .part-c-recording-status {
    width: min(100%, 390px);
    min-height: 0 !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: #5e7464 !important;
    font-family: var(--ai-font-body);
    font-size: 0.9rem;
    font-style: normal !important;
    line-height: 1.45;
    text-align: center;
    box-shadow: none;
}

body[data-screen="final-mock-stage"] .part-c-speaking-task .speaking-transcript:not(.part-c-recording-status) {
    min-height: 42px !important;
    margin: 0;
    padding: 10px 14px !important;
    border: 0;
    border-radius: 10px;
    background: rgba(241,247,239,0.86) !important;
    color: #657264 !important;
    text-align: center;
}

body[data-screen="final-mock-stage"] .part-c-speaking-task .topic-speaking-confirm-box {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #d9d0bd;
    border-radius: 16px;
    background: rgba(255,253,248,0.88);
    box-shadow: none;
}

body[data-screen="final-mock-stage"] .part-c-speaking-task .speaking-confirm-input {
    min-height: 112px;
    border: 1px solid #d7cbb5;
    border-radius: 12px;
    background: #fffefb;
}

body[data-screen="final-mock-stage"] .part-c-stage-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 16px;
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(188,167,126,0.25);
}

body[data-screen="final-mock-stage"] .part-c-stage-nav .nav-btn {
    width: 100%;
    min-height: 52px;
    margin: 0;
    border-radius: 15px;
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.25;
}

body[data-screen="final-mock-stage"] .part-c-stage-nav .part-c-forward-btn {
    border: 1px solid #428f91;
    background: #62bcb9;
    color: #fff;
    box-shadow: 0 4px 0 #428f91, 0 9px 16px rgba(58,124,126,0.16);
}

body[data-screen="final-mock-stage"] .part-c-stage-nav .part-c-forward-btn:hover {
    transform: translateY(-2px);
    background: #70c8c3;
    box-shadow: 0 6px 0 #428f91, 0 12px 18px rgba(58,124,126,0.18);
}

body[data-screen="final-mock-stage"] .part-c-stage-nav .part-c-forward-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #428f91, 0 5px 10px rgba(58,124,126,0.13);
}

body[data-screen="final-mock-stage"] .part-c-stage-nav .nav-btn:disabled {
    transform: none;
    border-color: #b8b9b4;
    background: #d7d9d5;
    color: #767973;
    box-shadow: 0 4px 0 #afb1ad;
    cursor: not-allowed;
}

@media (max-width: 760px) {
    body[data-screen="final-mock-stage"]:has(.part-c-scene-shell) main {
        padding: 18px 14px 26px;
    }

    .part-c-status-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    body[data-screen="final-mock-stage"] .part-c-status-row .part-c-section-pill,
    body[data-screen="final-mock-stage"] .part-c-status-row .part-c-progress-pill {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 0.8rem;
    }

    body[data-screen="final-mock-stage"] .part-c-stage-shell {
        padding: 22px 16px 18px;
        border-radius: 21px;
    }

    body[data-screen="final-mock-stage"] .part-c-theme-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body[data-screen="final-mock-stage"] .part-c-theme-grid .topic-choice-card {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        align-items: center;
        min-height: 126px;
        gap: 14px;
        text-align: left;
    }

    body[data-screen="final-mock-stage"] .part-c-theme-grid .topic-choice-card img {
        width: 104px;
        height: 92px;
        margin: 0;
    }

    body[data-screen="final-mock-stage"] .part-c-theme-grid .topic-choice-card h3 {
        text-align: left;
    }

    .part-c-speaking-topic {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    body[data-screen="final-mock-stage"] .part-c-prep-card .topic-prep-countdown-card {
        min-height: 52px;
    }

    .part-c-speaking-topic .part-c-speaking-prompt {
        text-align: center;
    }

    body[data-screen="final-mock-stage"] .part-c-stage-nav {
        gap: 12px;
        margin-top: 22px;
        padding-top: 16px;
    }

    body[data-screen="final-mock-stage"] .part-c-stage-nav .nav-btn {
        width: auto;
        min-height: 50px;
        padding: 0 12px;
    }
}

/* Part D: one question, one listening action, and one response at a time. */
body[data-screen="final-mock-stage"]:has(.part-d-scene-shell) {
    background: #e3f1ef;
}

body[data-screen="final-mock-stage"]:has(.part-d-scene-shell) #app-container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body[data-screen="final-mock-stage"]:has(.part-d-scene-shell) main {
    position: relative;
    min-height: 100vh;
    padding: 28px clamp(20px, 5vw, 72px) 38px;
    background:
        radial-gradient(circle at 14% 12%, rgba(255,255,255,0.8) 0 5%, transparent 5.3%),
        radial-gradient(circle at 87% 10%, rgba(255,255,255,0.72) 0 6%, transparent 6.3%),
        linear-gradient(180deg, #dff1f2 0 44%, #f2eed5 44% 68%, #b5d296 68% 100%);
    overflow: hidden;
}

body[data-screen="final-mock-stage"]:has(.part-d-scene-shell) main::before,
body[data-screen="final-mock-stage"]:has(.part-d-scene-shell) main::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

body[data-screen="final-mock-stage"]:has(.part-d-scene-shell) main::before {
    inset: auto -7vw -14vh -7vw;
    height: 44vh;
    border-radius: 48% 52% 0 0 / 28% 32% 0 0;
    background:
        radial-gradient(circle at 18% 30%, rgba(240,181,114,0.23) 0 7%, transparent 7.4%),
        radial-gradient(circle at 82% 22%, rgba(83,145,75,0.24) 0 10%, transparent 10.5%),
        #a6ca87;
}

body[data-screen="final-mock-stage"]:has(.part-d-scene-shell) main::after {
    width: 180px;
    height: 180px;
    left: 4vw;
    bottom: 8vh;
    border-radius: 48% 52% 46% 54%;
    background: rgba(85,145,79,0.16);
    box-shadow: 76vw -5vh 0 rgba(85,145,79,0.14);
}

.part-d-scene-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 920px);
    margin: 0 auto;
}

.part-d-topbar {
    justify-content: flex-start;
    margin: 0 0 12px;
}

body[data-screen="final-mock-stage"] .part-d-home-btn,
body[data-screen="final-mock-stage"] .part-d-stage-nav .part-d-warm-nav {
    width: auto;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid #d3aa55;
    border-radius: 15px;
    background: #f8dda0;
    color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(123,91,37,0.13);
}

body[data-screen="final-mock-stage"] .part-d-home-btn:hover,
body[data-screen="final-mock-stage"] .part-d-stage-nav .part-d-warm-nav:hover {
    transform: translateY(-2px);
    background: #ffe6ae;
    box-shadow: 0 6px 0 #c39c46, 0 12px 18px rgba(123,91,37,0.16);
}

body[data-screen="final-mock-stage"] .part-d-home-btn:active,
body[data-screen="final-mock-stage"] .part-d-stage-nav .part-d-warm-nav:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #c39c46, 0 5px 10px rgba(123,91,37,0.12);
}

.part-d-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 14px;
}

body[data-screen="final-mock-stage"] .part-d-status-row .part-d-section-pill,
body[data-screen="final-mock-stage"] .part-d-status-row .part-d-progress-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 36px;
    max-width: none;
    margin: 0;
    padding: 7px 15px;
    border-radius: 999px;
    box-sizing: border-box;
    color: #4c6049;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgba(77,104,73,0.09);
}

.part-d-section-pill {
    border: 1px solid rgba(140,188,137,0.42);
    background: rgba(240,249,235,0.92);
}

.part-d-progress-pill {
    border: 1px solid rgba(215,185,120,0.4);
    background: rgba(255,250,239,0.92);
}

body[data-screen="final-mock-stage"] .part-d-stage-shell {
    width: min(100%, 800px);
    max-width: none;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 24px;
    background:
        radial-gradient(circle at 18px 18px, rgba(211,180,128,0.11) 0 1.4px, transparent 1.6px) 0 0 / 18px 18px,
        #fffaf0;
    box-shadow: 0 7px 0 rgba(126,102,68,0.11), 0 24px 48px rgba(55,70,47,0.18);
}

.part-d-task {
    width: 100%;
    min-width: 0;
}

.part-d-question-panel {
    margin-bottom: 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.part-d-theme-title {
    margin: 0 0 14px !important;
    text-align: center;
    color: #6a5a45 !important;
    font-size: 0.95rem !important;
    font-weight: 650 !important;
    line-height: 1.35;
}

body[data-screen="final-mock-stage"] .part-d-question-row {
    justify-content: center;
    margin: 0;
}

body[data-screen="final-mock-stage"] .part-d-question-btn {
    width: min(100%, 600px);
    min-height: 68px;
    margin: 0;
    padding: 14px 24px;
    border: 2px solid #d7b65f;
    border-radius: 17px;
    background: #ffe29a;
    color: #5c4528;
    box-shadow: 0 6px 0 #c7a148, 0 14px 24px rgba(129,95,37,0.16);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    font-weight: 700;
    line-height: 1.45;
    white-space: normal;
}

body[data-screen="final-mock-stage"] .part-d-question-btn:hover {
    transform: translateY(-2px);
    background: #ffe8ad;
    box-shadow: 0 8px 0 #c7a148, 0 17px 26px rgba(129,95,37,0.18);
}

body[data-screen="final-mock-stage"] .part-d-question-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #c7a148, 0 8px 14px rgba(129,95,37,0.13);
}

.part-d-speaking-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin: 0 auto 18px;
}

body[data-screen="final-mock-stage"] .part-d-speaking-actions .record-btn {
    width: min(100%, 430px);
    min-height: 64px;
    margin: 0;
    padding: 0 24px;
    border: 1px solid #5b9e9f;
    border-radius: 16px;
    background: #6ebfbc;
    color: #fff;
    box-shadow: 0 5px 0 #428f91, 0 12px 22px rgba(58,124,126,0.18);
    font-size: 1rem;
    font-weight: 700;
}

body[data-screen="final-mock-stage"] .part-d-speaking-actions .record-btn:hover {
    transform: translateY(-2px);
    background: #7acac5;
    box-shadow: 0 7px 0 #428f91, 0 15px 24px rgba(58,124,126,0.2);
}

body[data-screen="final-mock-stage"] .part-d-speaking-actions .record-btn:active,
body[data-screen="final-mock-stage"] .part-d-speaking-actions .record-btn.recording {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #428f91, 0 7px 14px rgba(58,124,126,0.16);
}

body[data-screen="final-mock-stage"] .part-d-speaking-actions .btn-quiet {
    width: auto;
    min-height: 48px;
    margin: 0;
    padding: 0 22px;
    border: 1px solid #cfbea0;
    border-radius: 14px;
    background: #fffdf7;
    color: #66533a;
    box-shadow: 0 3px 0 #c9b991, 0 8px 14px rgba(91,76,49,0.1);
}

body[data-screen="final-mock-stage"] .part-d-task:has(.speaking-confirm-input:placeholder-shown) .part-d-speaking-actions .btn-quiet {
    display: none;
}

body[data-screen="final-mock-stage"] .part-d-task .speaking-transcript {
    min-height: 42px !important;
    margin: 0;
    padding: 10px 14px !important;
    border: 0;
    border-radius: 10px;
    background: rgba(241,247,239,0.86) !important;
    color: #657264 !important;
    text-align: center;
}

body[data-screen="final-mock-stage"] .part-d-task > .part-d-recording-status {
    width: min(100%, 390px);
    min-height: 0 !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: #5e7464 !important;
    font-family: var(--ai-font-body);
    font-size: 0.9rem;
    font-style: normal !important;
    line-height: 1.45;
    text-align: center;
    box-shadow: none;
}

body[data-screen="final-mock-stage"] .part-d-task .ai-qa-confirm-box {
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body[data-screen="final-mock-stage"] .part-d-task .speaking-confirm-input {
    min-height: 112px;
    border: 1px solid #d7cbb5;
    border-radius: 12px;
    background: #fffefb;
}

body[data-screen="final-mock-stage"] .part-d-stage-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 16px;
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(188,167,126,0.25);
}

body[data-screen="final-mock-stage"] .part-d-stage-nav .nav-btn {
    width: 100%;
    min-height: 52px;
    margin: 0;
    border-radius: 15px;
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.25;
}

body[data-screen="final-mock-stage"] .part-d-stage-nav .part-d-forward-btn {
    border: 1px solid #428f91;
    background: #62bcb9;
    color: #fff;
    box-shadow: 0 4px 0 #428f91, 0 9px 16px rgba(58,124,126,0.16);
}

body[data-screen="final-mock-stage"] .part-d-stage-nav .part-d-forward-btn:hover {
    transform: translateY(-2px);
    background: #70c8c3;
    box-shadow: 0 6px 0 #428f91, 0 12px 18px rgba(58,124,126,0.18);
}

body[data-screen="final-mock-stage"] .part-d-stage-nav .part-d-forward-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #428f91, 0 5px 10px rgba(58,124,126,0.13);
}

@media (max-width: 720px) {
    body[data-screen="final-mock-stage"]:has(.part-d-scene-shell) main {
        padding: 18px 14px 26px;
    }

    .part-d-status-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    body[data-screen="final-mock-stage"] .part-d-status-row .part-d-section-pill,
    body[data-screen="final-mock-stage"] .part-d-status-row .part-d-progress-pill {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 0.8rem;
    }

    body[data-screen="final-mock-stage"] .part-d-stage-shell {
        padding: 22px 16px 18px;
        border-radius: 21px;
    }

    .part-d-question-panel {
        padding: 0;
    }

    body[data-screen="final-mock-stage"] .part-d-question-btn {
        min-height: 64px;
        padding: 12px 16px;
    }

    body[data-screen="final-mock-stage"] .part-d-stage-nav {
        gap: 12px;
        margin-top: 22px;
        padding-top: 16px;
    }

    body[data-screen="final-mock-stage"] .part-d-stage-nav .nav-btn {
        width: auto;
        min-height: 50px;
        padding: 0 12px;
    }
}

/* Part C topic selection: shared toolbar/grid bounds and compact comparison cards. */
body[data-screen="final-mock-stage"] .part-c-scene-shell.part-c-topic-select {
    width: 100%;
    max-width: 1080px;
    padding: 0 24px;
    box-sizing: border-box;
}

body[data-screen="final-mock-stage"] .part-c-topic-select .part-c-stage-shell {
    width: 100%;
    max-width: none;
    padding: 24px;
    box-sizing: border-box;
}

body[data-screen="final-mock-stage"] .part-c-topic-select .part-c-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
    margin: 0;
}

body[data-screen="final-mock-stage"] .part-c-topic-select .topic-choice-card {
    --part-c-optical-scale: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 54px;
    align-items: stretch;
    width: 100%;
    height: 300px;
    min-height: 0;
    margin: 0;
    padding: 16px;
    border-width: 2px;
    box-sizing: border-box;
    overflow: visible;
}

body[data-screen="final-mock-stage"] .part-c-topic-select .topic-choice-card:nth-child(2) {
    --part-c-optical-scale: 1.035;
}

body[data-screen="final-mock-stage"] .part-c-topic-select .topic-choice-card:nth-child(3) {
    --part-c-optical-scale: 1.02;
}

body[data-screen="final-mock-stage"] .part-c-topic-select .topic-choice-card.topic-selected {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #70ad7d, 0 13px 22px rgba(54,124,76,0.15), inset 0 0 0 2px rgba(255,255,255,0.82);
}

body[data-screen="final-mock-stage"] .part-c-topic-select .topic-choice-card.topic-selected:hover {
    transform: translateY(-4px);
}

.part-c-theme-media {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 8px 14px 14px;
    box-sizing: border-box;
}

body[data-screen="final-mock-stage"] .part-c-topic-select .part-c-theme-media img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 220px;
    max-height: 210px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 12px;
    object-fit: contain !important;
    background: transparent;
    transform: scale(var(--part-c-optical-scale));
    transform-origin: center;
}

.part-c-theme-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 8px 8px 0;
    border-top: 1px solid rgba(197,179,143,0.24);
    box-sizing: border-box;
}

body[data-screen="final-mock-stage"] .part-c-topic-select .part-c-theme-copy h3 {
    display: -webkit-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: #4c3b2c;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-screen="final-mock-stage"] .part-c-topic-select .topic-choice-card.topic-selected::after {
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    body[data-screen="final-mock-stage"] .part-c-scene-shell.part-c-topic-select {
        padding: 0 16px;
    }

    body[data-screen="final-mock-stage"] .part-c-topic-select .part-c-stage-shell {
        padding: 16px;
    }

    body[data-screen="final-mock-stage"] .part-c-topic-select .part-c-theme-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    body[data-screen="final-mock-stage"] .part-c-topic-select .topic-choice-card {
        grid-template-columns: 120px minmax(0, 1fr);
        grid-template-rows: 1fr;
        align-items: center;
        height: 156px;
        padding: 14px;
    }

    .part-c-theme-media {
        width: 120px;
        height: 128px;
        padding: 8px;
    }

    body[data-screen="final-mock-stage"] .part-c-topic-select .part-c-theme-media img {
        width: 112px !important;
        height: 112px !important;
        max-width: 112px;
        max-height: 112px;
    }

    .part-c-theme-copy {
        justify-content: flex-start;
        min-height: 0;
        padding: 10px 8px 10px 16px;
        border-top: 0;
        border-left: 1px solid rgba(197,179,143,0.24);
    }

    body[data-screen="final-mock-stage"] .part-c-topic-select .part-c-theme-copy h3 {
        font-size: 0.9rem;
        text-align: left;
    }

body[data-screen="final-mock-stage"] .part-c-topic-select .topic-choice-card.topic-selected::after {
        top: 14px;
        right: 14px;
    }
}

/* Shared exam flow: one toolbar, one task card, one navigation row. */
body[data-screen="part-a"] #app-container,
body[data-screen="final-mock-stage"]:has(.exam-page) #app-container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

body[data-screen="part-a"] main,
body[data-screen="final-mock-stage"]:has(.exam-page) main {
    display: block;
    min-height: 100vh;
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
}

.exam-page {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 22px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

body[data-screen="final-mock-stage"] .exam-page.part-c-topic-select {
    padding: 0;
}

.exam-page::before {
    display: none;
}

.exam-page .exam-toolbar {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.exam-page .exam-toolbar > .nav-btn {
    flex: 0 0 auto;
}

.exam-page .exam-status-group {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: auto;
    margin: 0;
    padding: 0;
}

.exam-page .exam-status-group .section-title,
.exam-page .exam-status-group .exam-stage-meta {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

body[data-screen="part-a"] .exam-page .exam-stage-shell,
body[data-screen="final-mock-stage"] .exam-page .exam-stage-shell {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: clamp(24px, 3.5vw, 36px);
    border: 1px solid rgba(220, 207, 181, 0.82);
    border-radius: 24px;
    background:
        radial-gradient(circle at 18px 18px, rgba(211, 190, 145, 0.08) 0 1.2px, transparent 1.4px) 0 0 / 20px 20px,
        #fffaf0;
    box-shadow: 0 5px 0 rgba(126, 102, 68, 0.1), 0 18px 36px rgba(55, 70, 47, 0.14);
    box-sizing: border-box;
    overflow: visible;
}

body[data-screen="part-a"] .exam-page .exam-stage-shell::before,
body[data-screen="part-a"] .exam-page .exam-stage-shell::after {
    display: none;
}

body[data-screen="part-a"] .exam-page .exam-navigation,
body[data-screen="final-mock-stage"] .exam-page .exam-navigation {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body[data-screen="part-a"] .exam-page .exam-navigation .nav-btn,
body[data-screen="final-mock-stage"] .exam-page .exam-navigation .nav-btn {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 18px;
    border-radius: 15px;
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.25;
}

/* Nested panels are layout groups; the exam-stage shell is the single Level 1 card. */
.exam-page .part-c-speaking-topic,
.exam-page .part-d-question-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.exam-page .question-text.part-a-prompt {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0 26px;
}

body[data-screen="part-a"] .exam-page .part-a-confirm-box,
body[data-screen="final-mock-stage"] .exam-page .topic-speaking-confirm-box,
body[data-screen="final-mock-stage"] .exam-page .ai-qa-confirm-box {
    margin-top: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.exam-page .speaking-confirm-box label {
    display: block;
    margin: 0 0 10px;
}

.exam-page .speaking-confirm-input {
    width: 100%;
    box-sizing: border-box;
}

.exam-page .part-b-reference-image {
    border-color: rgba(218, 205, 178, 0.72);
    background: rgba(255, 255, 255, 0.46);
    box-shadow: none;
}

/* Preserve the original image sizing and mat; make its border blend into the reference area. */
.exam-page .part-b-reference-image img {
    border-color: transparent !important;
    background: rgba(255, 255, 255, 0.46) !important;
}

body[data-screen="final-mock-stage"] .exam-page .stage-objective .part-b-image-options .mock-image-option,
body[data-screen="final-mock-stage"] .exam-page .stage-objective .part-b-text-options .drill-option {
    box-shadow: 0 3px 0 #c9b991, 0 8px 15px rgba(91, 76, 49, 0.08);
}

body[data-screen="final-mock-stage"] .exam-page .stage-objective .part-b-image-options .mock-image-option:hover,
body[data-screen="final-mock-stage"] .exam-page .stage-objective .part-b-text-options .drill-option:hover {
    box-shadow: 0 5px 0 #b6cfae, 0 11px 18px rgba(67, 107, 76, 0.12);
}

.exam-page .part-c-speaking-topic {
    padding: 0;
}

.exam-page .part-d-question-panel {
    margin-bottom: 28px;
    padding: 0;
}

body[data-screen="final-mock-stage"] .exam-page .part-d-question-btn {
    box-shadow: 0 4px 0 #c7a148, 0 10px 18px rgba(129, 95, 37, 0.13);
}

@media (max-width: 640px) {
    body[data-screen="part-a"] main,
    body[data-screen="final-mock-stage"]:has(.exam-page) main {
        padding: 16px;
    }

    .exam-page {
        gap: 20px;
    }

    .exam-page .exam-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 14px;
    }

    .exam-page .exam-toolbar > .nav-btn {
        justify-self: start;
        width: auto;
    }

    .exam-page .exam-status-group {
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
    }

    .exam-page .exam-status-group .section-title,
    .exam-page .exam-status-group .exam-stage-meta {
        min-height: 36px;
        padding: 7px 10px;
        font-size: 0.8rem;
    }

    body[data-screen="part-a"] .exam-page .exam-stage-shell,
    body[data-screen="final-mock-stage"] .exam-page .exam-stage-shell {
        padding: 20px 16px;
        border-radius: 21px;
        box-shadow: 0 4px 0 rgba(126, 102, 68, 0.1), 0 14px 28px rgba(55, 70, 47, 0.13);
    }

    body[data-screen="part-a"] .exam-page .exam-navigation,
    body[data-screen="final-mock-stage"] .exam-page .exam-navigation {
        gap: 12px;
        margin-top: 8px;
    }

    body[data-screen="part-a"] .exam-page .exam-navigation .nav-btn,
    body[data-screen="final-mock-stage"] .exam-page .exam-navigation .nav-btn {
        min-height: 50px;
        padding: 0 12px;
    }

    .exam-page .question-text.part-a-prompt {
        padding: 4px 0 22px;
    }

    body[data-screen="part-a"] .exam-page .part-a-confirm-box,
    body[data-screen="final-mock-stage"] .exam-page .topic-speaking-confirm-box,
    body[data-screen="final-mock-stage"] .exam-page .ai-qa-confirm-box {
        margin-top: 22px;
    }

    .exam-page .part-d-question-panel {
        margin-bottom: 24px;
    }
}

/* Keep the full Part C speaking workflow visible on common 720px-tall laptops. */
@media (min-width: 761px) and (max-height: 820px) {
    body[data-screen="final-mock-stage"] .part-c-topic-speaking .part-c-stage-shell {
        padding: 24px 36px;
    }

    body[data-screen="final-mock-stage"] .part-c-topic-speaking .part-c-speaking-topic {
        min-height: 0;
        margin-bottom: 14px;
    }

    body[data-screen="final-mock-stage"] .part-c-topic-speaking .part-c-speaking-image img {
        max-height: 170px;
    }

    body[data-screen="final-mock-stage"] .part-c-topic-speaking .part-c-speaking-actions {
        margin: 0 auto 12px;
    }

    body[data-screen="final-mock-stage"] .part-c-topic-speaking .topic-speaking-confirm-box {
        margin-top: 14px;
    }

    body[data-screen="final-mock-stage"] .part-c-topic-speaking .speaking-confirm-input {
        min-height: 84px;
    }

    body[data-screen="final-mock-stage"] .part-c-topic-speaking .part-c-stage-nav {
        margin-top: 8px;
    }
}

/* Part A/C/D share one recording-state language without matching navigation CTAs. */
body[data-screen="part-a"] .part-a-speaking-actions .record-btn,
body[data-screen="final-mock-stage"] .part-c-speaking-actions .record-btn,
body[data-screen="final-mock-stage"] .part-d-speaking-actions .record-btn {
    width: min(100%, 390px);
    min-height: 64px;
    padding: 0 24px;
    border: 1px solid #7186c5;
    border-radius: 19px;
    background: #8499d8 !important;
    color: #fff;
    box-shadow: 0 6px 0 #5e72b2, 0 13px 22px rgba(76, 94, 155, 0.2);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Part D pairs the spoken answer with its question, so both controls share one width. */
body[data-screen="final-mock-stage"] .exam-page.part-d-scene-shell .part-d-speaking-actions .record-btn {
    width: min(100%, 600px);
}

body[data-screen="part-a"] .part-a-speaking-actions .record-btn:hover,
body[data-screen="final-mock-stage"] .part-c-speaking-actions .record-btn:hover,
body[data-screen="final-mock-stage"] .part-d-speaking-actions .record-btn:hover {
    transform: translateY(-2px);
    background: #92a6e2 !important;
    box-shadow: 0 8px 0 #5e72b2, 0 16px 24px rgba(76, 94, 155, 0.22);
}

body[data-screen="part-a"] .part-a-speaking-actions .record-btn:active,
body[data-screen="part-a"] .part-a-speaking-actions .record-btn.recording,
body[data-screen="final-mock-stage"] .part-c-speaking-actions .record-btn:active,
body[data-screen="final-mock-stage"] .part-c-speaking-actions .record-btn.recording,
body[data-screen="final-mock-stage"] .part-d-speaking-actions .record-btn:active,
body[data-screen="final-mock-stage"] .part-d-speaking-actions .record-btn.recording {
    transform: translateY(4px);
    border-color: #c46f60;
    background: #df907d !important;
    box-shadow: 0 2px 0 #b96758, 0 6px 12px rgba(141, 75, 62, 0.17);
    animation: final-mock-recording-pulse 1.35s ease-in-out infinite;
}

body[data-screen="part-a"] .part-a-speaking-actions .record-btn.recording-complete,
body[data-screen="final-mock-stage"] .part-c-speaking-actions .record-btn.recording-complete,
body[data-screen="final-mock-stage"] .part-d-speaking-actions .record-btn.recording-complete {
    transform: none;
    border-color: #668f5d;
    background: #7eaa70 !important;
    box-shadow: 0 5px 0 #557c4c, 0 12px 20px rgba(74, 113, 66, 0.18);
    animation: none;
}

body[data-screen="part-a"] .speaking-transcript.speech-result-error,
body[data-screen="final-mock-stage"] .speaking-transcript.speech-result-error {
    border-color: rgba(196, 111, 96, 0.36);
    background: rgba(255, 239, 235, 0.92) !important;
    color: #b85f56 !important;
}

body[data-screen="part-a"] .part-a-recording-status.speech-result-error {
    border: 0;
    background: transparent !important;
}

body[data-screen="final-mock-stage"] .part-c-recording-status.speech-result-error {
    border: 0;
    background: transparent !important;
}

body[data-screen="final-mock-stage"] .part-d-recording-status.speech-result-error {
    border: 0;
    background: transparent !important;
}

@keyframes final-mock-recording-pulse {
    0%, 100% {
        box-shadow: 0 2px 0 #b96758, 0 6px 12px rgba(141, 75, 62, 0.17), 0 0 0 0 rgba(223, 144, 125, 0.28);
    }
    50% {
        box-shadow: 0 2px 0 #b96758, 0 6px 12px rgba(141, 75, 62, 0.17), 0 0 0 7px rgba(223, 144, 125, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-screen="part-a"] .part-a-speaking-actions .record-btn.recording,
    body[data-screen="final-mock-stage"] .part-c-speaking-actions .record-btn.recording,
    body[data-screen="final-mock-stage"] .part-d-speaking-actions .record-btn.recording {
        animation: none;
    }
}

/* Parent center pilot: adult, restrained Animal Island surface model. */
#app-container:has(.parent-center-page) {
    width: 100%; max-width: none; min-height: 100vh; margin: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
}

main:has(.parent-center-page) { padding: 24px; }

.parent-center-page {
    color: #24412b; font-family: var(--ai-font-body); line-height: 1.65;
}

.selection-shell.parent-center-page {
    width: 100%; max-width: 780px; min-width: 0; margin: 0 auto; box-sizing: border-box;
}

.parent-center-page > .toolbar {
    align-items: center; gap: 16px; margin: 0 0 20px;
}

.parent-center-page .nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 18px;
    border: 1px solid #c39c46; border-radius: 15px;
    background: #f8dda0; color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(104, 79, 47, 0.14);
    font-family: var(--ai-font-body); font-size: 0.95rem; line-height: 1.3;
}

.parent-center-page .nav-btn.primary {
    margin-left: auto; border-color: #2f7e43; background: #3da056; color: #fff;
    box-shadow: 0 4px 0 #2f7e43, 0 9px 16px rgba(47, 126, 67, 0.18);
}

.parent-center-page .nav-btn:hover {
    transform: translateY(-1px); box-shadow: 0 5px 0 rgba(67, 91, 62, 0.34), 0 11px 18px rgba(55, 70, 47, 0.16);
}

.parent-center-page .nav-btn:active {
    transform: translateY(2px); box-shadow: 0 2px 0 rgba(67, 91, 62, 0.34), 0 5px 10px rgba(55, 70, 47, 0.14);
}

.parent-center-page .nav-btn:focus-visible { outline: 3px solid #ffd774; }

.parent-center-page > .home-title {
    margin: 0 0 20px; color: #24412b;
    font-family: var(--ai-font-body); font-size: clamp(1.45rem, 4vw, 2rem);
    font-weight: 750; line-height: 1.2; text-align: left;
}

.parent-center-page .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px;
}

.parent-center-page .metric {
    min-width: 0; min-height: auto; padding: 16px 12px; overflow: visible;
    border: 1px solid rgba(116, 166, 127, 0.32); border-radius: 16px;
    background: rgba(223, 244, 230, 0.72); box-shadow: none;
}

.parent-center-page .metric strong {
    color: #2f7e43; font-family: var(--ai-font-display); font-size: clamp(1.35rem, 3vw, 1.75rem);
    line-height: 1.05;
}

.parent-center-page .metric span {
    margin-top: 6px; color: #5f7564; font-family: var(--ai-font-body);
    font-size: 0.88rem; line-height: 1.35;
}

.question-card.parent-center-section {
    min-width: 0; margin: 0 0 20px; padding: 20px 22px; overflow: visible;
    border: 1px solid rgba(220, 207, 181, 0.82); border-radius: 20px;
    background: #fffaf0;
    box-shadow: 0 5px 0 rgba(126, 102, 68, 0.1), 0 14px 28px rgba(55, 70, 47, 0.11);
    overflow-wrap: anywhere;
}

.question-card.parent-center-section > h3 {
    margin: 0 0 12px; color: #4c3b2c; font-family: var(--ai-font-body);
    font-size: clamp(1.1rem, 2vw, 1.28rem); font-weight: 700; line-height: 1.4;
}

.parent-center-page .report-item {
    min-width: 0; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(188, 167, 126, 0.25);
    border-radius: 0; background: transparent; box-shadow: none; overflow-wrap: anywhere;
}

.parent-center-page .parent-wrong-item { padding: 20px 0; }

.parent-center-page .parent-wrong-header {
    display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
}

.parent-center-page .parent-wrong-title { color: #4c3b2c; font-size: 1rem; line-height: 1.45; }

.parent-center-page .parent-wrong-count {
    flex: 0 0 auto; color: #a55449; font-size: 0.88rem; font-weight: 700;
}

.parent-center-page .parent-wrong-answer-row {
    display: flex; align-items: center; gap: 12px; min-width: 0; margin: 14px 0 0; padding: 14px 0;
    border-top: 1px solid rgba(188, 167, 126, 0.25); border-bottom: 1px solid rgba(188, 167, 126, 0.25);
}

.parent-center-page .parent-wrong-answer {
    display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 0;
}

.parent-center-page .parent-wrong-answer-label { flex: 0 0 auto; color: #5f7564; font-weight: 700; }

.parent-center-page .parent-wrong-answer-value { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }

.parent-center-page .parent-wrong-answer-child .parent-wrong-answer-value { color: #a55449; }

.parent-center-page .parent-wrong-answer-correct .parent-wrong-answer-value { color: #2f7e43; }

.parent-center-page .parent-wrong-answer-arrow { flex: 0 0 auto; color: #8b806e; font-weight: 700; }

.parent-center-page .parent-wrong-guidance {
    padding: 14px 0 0; color: #24412b; line-height: 1.65;
}

.parent-center-page .parent-wrong-practice { margin-top: 14px; border-top: 1px solid rgba(188, 167, 126, 0.2); }

.parent-center-page .parent-wrong-guidance-title { display: block; margin-bottom: 4px; color: #4c3b2c; }

.parent-center-page .parent-wrong-guidance-copy { margin: 0; overflow-wrap: anywhere; }

.parent-center-page .parent-wrong-details {
    margin-top: 14px; padding-top: 4px; border-top: 1px solid rgba(188, 167, 126, 0.2);
}

.parent-center-page .parent-wrong-details > summary {
    display: inline-flex; align-items: center; min-height: 44px; color: #5f7564; cursor: pointer; list-style: none;
}

.parent-center-page .parent-wrong-details > summary::-webkit-details-marker { display: none; }

.parent-center-page .parent-wrong-details > summary::after { content: "〉"; display: inline-block; margin-left: 6px; }

.parent-center-page .parent-wrong-details[open] > summary::after { transform: rotate(90deg); }

.parent-center-page .parent-wrong-detail-content { padding: 4px 0 8px; color: #5f7564; line-height: 1.65; }

.parent-center-page .parent-wrong-detail-line {
    display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 8px 12px; margin: 0 0 10px;
}

.parent-center-page .parent-wrong-detail-line > span { min-width: 0; overflow-wrap: anywhere; }

.parent-center-page .parent-wrong-option-details > strong { display: block; margin-bottom: 6px; }

.parent-center-page .parent-wrong-option-details > ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; }

.parent-center-page .parent-wrong-option-details li { padding-left: 2px; overflow-wrap: anywhere; }

.parent-center-page .parent-wrong-option-details li > span + span { margin-left: 8px; color: #24412b; }

.question-card.parent-center-guide {
    border-color: rgba(220, 207, 181, 0.52); background: rgba(255, 248, 234, 0.68); box-shadow: none;
}

@media (min-width: 900px) and (max-height: 760px) {
    main:has(.parent-center-page) { padding: 16px 24px; }
    .parent-center-page > .toolbar,
    .parent-center-page > .home-title,
    .parent-center-page .metric-grid { margin-bottom: 14px; }
    .question-card.parent-center-section { margin-bottom: 14px; padding: 16px 20px; }
}

@media (max-width: 640px) {
    main:has(.parent-center-page) { padding: 16px; }
    .parent-center-page > .toolbar {
        flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px;
    }
    .parent-center-page .nav-btn { width: 100%; min-height: 48px; }
    .parent-center-page .nav-btn.primary { margin-left: 0; }
    .parent-center-page > .home-title { margin-bottom: 16px; }
    .parent-center-page .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px;
    }
    .parent-center-page .metric { padding: 14px 10px; }
    .parent-center-page .parent-wrong-answer-row { flex-direction: column; align-items: stretch; gap: 14px; }
    .parent-center-page .parent-wrong-answer { display: grid; gap: 4px; }
    .parent-center-page .parent-wrong-answer-arrow { display: none; }
    .parent-center-page .parent-wrong-answer-correct {
        padding-top: 12px; border-top: 1px solid rgba(188, 167, 126, 0.2);
    }
    .parent-center-page .parent-wrong-detail-line { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .question-card.parent-center-section { margin-bottom: 16px; padding: 16px; border-radius: 18px; }
}

/* Child practice home: one page shell and four skill entries. */
.selection-shell.child-practice-home {
    display: block; width: 100%; max-width: 780px; min-width: 0; min-height: auto; margin: 0 auto;
    color: #24412b; font-family: var(--ai-font-body); box-sizing: border-box;
}

.selection-shell.child-practice-home::after { display: none; }

.child-practice-home > .child-practice-home-toolbar {
    display: flex; align-items: center; justify-content: flex-start; margin: 0 0 16px;
}

.child-practice-home-toolbar .nav-btn.child-practice-home-back {
    width: auto; min-height: 44px; padding: 0 18px;
    border: 1px solid #c39c46; border-radius: 15px;
    background: #f8dda0; color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(123, 91, 37, 0.13);
    font-family: var(--ai-font-body); line-height: 1.3;
}

.child-practice-home-title {
    margin: 0 0 20px; color: #24412b;
    font-family: var(--ai-font-body); font-size: clamp(1.55rem, 4vw, 2.15rem);
    font-weight: 800; line-height: 1.2; text-align: left;
}

.child-practice-home .exam-list.child-practice-home-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    width: 100%; margin: 0;
}

.child-practice-home .exam-card.child-practice-home-card {
    min-width: 0; min-height: 92px; padding: 18px 20px;
    border: 1px solid rgba(220, 207, 181, 0.82); border-radius: 20px;
    background: #fffaf0;
    box-shadow: 0 5px 0 rgba(126, 102, 68, 0.1), 0 13px 24px rgba(55, 70, 47, 0.1);
    transform: none; box-sizing: border-box;
}

.exam-card.child-practice-home-card:hover {
    border-color: rgba(76, 139, 88, 0.48);
    box-shadow: 0 6px 0 rgba(89, 119, 76, 0.16), 0 16px 26px rgba(55, 70, 47, 0.13);
    transform: none;
}

.exam-card.child-practice-home-card:active {
    box-shadow: 0 2px 0 rgba(89, 119, 76, 0.2), 0 7px 14px rgba(55, 70, 47, 0.11);
    transform: none;
}

.child-practice-home .exam-card.child-practice-home-card::after { display: none; }

.child-practice-home .exam-card.child-practice-home-card-listening {
    border-color: rgba(61, 160, 86, 0.32); background: #e8f6e8;
}

.child-practice-home .exam-card.child-practice-home-card-speaking {
    border-color: rgba(66, 143, 145, 0.32); background: #e2f2f1;
}

.child-practice-home .exam-card.child-practice-home-card-reading {
    border-color: rgba(195, 156, 70, 0.4); background: #fff8ea;
}

.child-practice-home .exam-card.child-practice-home-card-writing {
    border-color: rgba(126, 170, 112, 0.38); background: #eef4dc;
}

.child-practice-home .exam-card-content.child-practice-home-card-content {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    min-width: 0; min-height: 56px; gap: 16px;
}

.child-practice-home .child-practice-home-card-title {
    min-width: 0; color: #24412b; font-family: var(--ai-font-body);
    font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 800; line-height: 1.35;
    overflow-wrap: anywhere;
}

.child-practice-home .exam-card-action.child-practice-home-card-action {
    width: auto; min-width: 72px; min-height: 44px; padding: 0 16px;
    border: 1px solid #2f7e43; border-radius: 14px;
    background: #3da056; color: #fff;
    box-shadow: 0 4px 0 #2f7e43, 0 8px 14px rgba(47, 126, 67, 0.16);
    font-family: var(--ai-font-body); line-height: 1.3; transform: none;
}

.child-practice-home .child-practice-home-card-speaking .child-practice-home-card-action {
    border-color: #428f91; background: #62bcb9;
    box-shadow: 0 4px 0 #428f91, 0 8px 14px rgba(66, 143, 145, 0.16);
}

.child-practice-home .child-practice-home-card-reading .child-practice-home-card-action {
    border-color: #a7792f; background: #d3a548;
    box-shadow: 0 4px 0 #a7792f, 0 8px 14px rgba(167, 121, 47, 0.16);
}

.child-practice-home .child-practice-home-card-writing .child-practice-home-card-action {
    border-color: #557c4c; background: #7eaa70;
    box-shadow: 0 4px 0 #557c4c, 0 8px 14px rgba(85, 124, 76, 0.16);
}

@media (min-width: 900px) and (max-height: 760px) {
    .child-practice-home > .child-practice-home-toolbar { margin-bottom: 12px; }
    .child-practice-home-title { margin-bottom: 14px; }
    .child-practice-home .exam-list.child-practice-home-list { gap: 12px; }
    .child-practice-home .exam-card.child-practice-home-card { min-height: 82px; padding: 14px 18px; }
}

@media (max-width: 640px) {
    .selection-shell.child-practice-home { max-width: 100%; }
    .child-practice-home > .child-practice-home-toolbar { margin-bottom: 16px; }
    .child-practice-home-toolbar .nav-btn.child-practice-home-back { min-height: 44px; }
    .child-practice-home-title { margin-bottom: 16px; font-size: clamp(1.5rem, 8vw, 1.9rem); }
    .child-practice-home .exam-list.child-practice-home-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .child-practice-home .exam-card.child-practice-home-card {
        grid-column: auto; min-height: 72px; padding: 12px 14px;
    }
    .child-practice-home .exam-card-content.child-practice-home-card-content { min-height: 48px; gap: 12px; }
    .child-practice-home .exam-card-action.child-practice-home-card-action {
        min-width: 64px; min-height: 44px; padding: 0 12px;
    }
}

/* Listening practice: stable scene, one task surface, and explicit answer states. */
body[data-screen]:has(.listening-practice-page) {
    align-items: stretch;
    background-color: #dff1e4;
    background-image: none;
}

body[data-screen]:has(.listening-practice-page) #app-container {
    width: 100%; max-width: none; min-height: 100vh; margin: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none;
}

body[data-screen]:has(.listening-practice-page) main {
    min-height: 100vh; padding: 24px;
    background: linear-gradient(180deg, #dff3f3 0 42%, #edf1d5 42% 68%, #b7d79b 68% 100%);
}

.listening-practice-page,
.listening-practice-page * { box-sizing: border-box; }

.listening-practice-page {
    width: 100%; max-width: 900px; min-width: 0; margin: 0 auto;
    color: #24412b;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}

.listening-practice-page.listening-practice-report-page { max-width: 780px; }

.listening-practice-page > .toolbar {
    display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
}

.listening-practice-page .nav-btn {
    width: auto; min-width: 44px; min-height: 44px; padding: 0 18px;
    border-radius: 15px; font-family: inherit; font-size: 0.95rem; line-height: 1.3;
}

.listening-practice-page .nav-btn.listening-practice-back {
    border: 1px solid #c39c46; background: #f8dda0; color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(104, 79, 47, 0.14);
}

.listening-practice-page .nav-btn.listening-practice-exit,
.listening-practice-page .nav-btn.listening-practice-parent-link {
    border: 1px solid rgba(116, 166, 127, 0.48); background: #edf8ef; color: #315e3b;
    box-shadow: 0 3px 0 rgba(85, 124, 76, 0.28), 0 8px 15px rgba(55, 70, 47, 0.1);
}

.listening-practice-page .nav-btn.listening-practice-continue {
    border: 1px solid #2f7e43; background: #3da056; color: #fff;
    box-shadow: 0 4px 0 #2f7e43, 0 9px 16px rgba(47, 126, 67, 0.18);
}

.listening-practice-page .nav-btn:hover {
    transform: translateY(-1px); box-shadow: 0 5px 0 rgba(67, 91, 62, 0.3), 0 11px 18px rgba(55, 70, 47, 0.14);
}

.listening-practice-page .nav-btn:active {
    transform: translateY(2px); box-shadow: 0 2px 0 rgba(67, 91, 62, 0.28), 0 5px 10px rgba(55, 70, 47, 0.12);
}

.listening-practice-page .nav-btn:focus-visible,
.listening-practice-page .action-btn:focus-visible { outline: 3px solid #ffd774; outline-offset: 3px; }

.listening-practice-page > .cat-progress {
    margin: 0 0 14px; padding: 4px 4px 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
}

.listening-practice-page .cat-track { margin-bottom: 4px; }

.question-card.listening-practice-task,
.question-card.listening-practice-report-card {
    width: 100%; min-width: 0; margin: 0; padding: 24px 28px;
    border: 1px solid rgba(220, 207, 181, 0.82); border-radius: 24px;
    background: #fffaf0;
    box-shadow: 0 5px 0 rgba(126, 102, 68, 0.1), 0 18px 36px rgba(55, 70, 47, 0.14);
    color: #4c3b2c; overflow: hidden;
}

.listening-practice-task .listening-practice-section-title {
    margin: 0 0 16px; padding: 0 0 12px;
    border-bottom: 1px solid rgba(188, 167, 126, 0.25);
    color: #4c3b2c; font-family: inherit; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.4;
}

.listening-practice-task .listening-practice-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    align-items: center; margin: 0 0 16px;
}

.listening-practice-task .listening-practice-actions > :only-child { grid-column: 1 / -1; max-width: 360px; }

.listening-practice-task .listening-practice-actions .listening-practice-audio,
.listening-practice-task .feedback-box .action-btn {
    width: 100%; min-width: 0; min-height: 48px; padding: 0 18px;
    border: 1px solid rgba(116, 166, 127, 0.55); border-radius: 15px;
    background: #edf8ef; color: #315e3b;
    box-shadow: 0 3px 0 rgba(85, 124, 76, 0.28), 0 8px 15px rgba(55, 70, 47, 0.1);
    font-family: inherit;
}

.listening-practice-task .listening-practice-actions .listening-practice-next {
    width: 100%; min-width: 0; min-height: 48px; padding: 0 18px;
    border: 1px solid #2f7e43; border-radius: 15px;
    background: #3da056; color: #fff;
    box-shadow: 0 4px 0 #2f7e43, 0 9px 16px rgba(47, 126, 67, 0.18);
    font-family: inherit;
}

.listening-practice-task .listening-practice-actions .listening-practice-audio:hover,
.listening-practice-task .feedback-box .action-btn:hover {
    background: #e3f3e7; color: #315e3b; transform: translateY(-1px);
}

.listening-practice-task .listening-practice-actions .listening-practice-next:hover {
    background: #49aa61; color: #fff; transform: translateY(-1px);
}

.listening-practice-task .listening-practice-prompt {
    margin: 0 0 16px; color: #4c3b2c;
    font-family: inherit; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.45;
    overflow-wrap: anywhere;
}

.listening-practice-task .listening-practice-options {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
    width: min(100%, 640px); margin: 16px auto 0;
}

.listening-practice-page .listening-practice-option {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
    width: 100%; min-width: 0; min-height: 52px; margin: 0; padding: 13px 16px;
    border: 2px solid #dacdb2; border-radius: 18px;
    background: #fffdf8; color: #4c3b2c;
    box-shadow: 0 3px 0 rgba(126, 102, 68, 0.16), 0 8px 14px rgba(55, 70, 47, 0.08);
    font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.35;
    text-align: left; overflow-wrap: anywhere;
}

.listening-practice-page .listening-practice-option:not(:disabled):hover {
    border-color: #8ac88d; background: #f8fff5;
    box-shadow: 0 4px 0 rgba(80, 145, 89, 0.22), 0 10px 16px rgba(55, 70, 47, 0.1);
    transform: translateY(-1px);
}

.listening-practice-page .listening-practice-option:not(:disabled):active {
    transform: translateY(2px); box-shadow: 0 1px 0 rgba(80, 145, 89, 0.2), 0 5px 10px rgba(55, 70, 47, 0.08);
}

.listening-practice-page .listening-practice-option:disabled { cursor: default; opacity: 1; }

.listening-practice-page .listening-practice-option:disabled:not(.correct):not(.wrong) {
    border-color: #ddd6c8; background: #f8f5ee; color: #716d61; box-shadow: none;
}

.listening-practice-page .listening-practice-option.correct {
    border-color: #3f9f72; background: #ecf8ea; color: #245f3d; box-shadow: 0 3px 0 rgba(63, 159, 114, 0.24);
}

.listening-practice-page .listening-practice-option.wrong {
    border-color: #b85f56; background: rgba(255, 239, 235, 0.92); color: #8d443d; box-shadow: 0 3px 0 rgba(184, 95, 86, 0.2);
}

.listening-practice-option-copy { min-width: 0; overflow-wrap: anywhere; }

.listening-practice-option-marker {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; background: #5f7564; color: #fff; font-size: 0.95rem;
}

.listening-practice-option.correct .listening-practice-option-marker { background: #3f9f72; }
.listening-practice-option.wrong .listening-practice-option-marker { background: #b85f56; }

.listening-practice-feedback:empty { display: none; }

.listening-practice-task .feedback-box {
    margin: 18px 0 0; padding: 16px 18px;
    border: 0; border-left: 4px solid #3f9f72; border-radius: 14px;
    background: rgba(236, 248, 234, 0.82); box-shadow: none;
    color: #24412b; font-family: inherit; line-height: 1.65;
}

.listening-practice-task .feedback-box.needs-work {
    border-left-color: #b85f56; background: rgba(255, 239, 235, 0.78);
}

.listening-practice-task .feedback-box.good > strong::before { content: "✓ "; color: #2f7e43; }
.listening-practice-task .feedback-box.needs-work > strong::before { content: "✕ "; color: #b85f56; }

.listening-practice-task .feedback-box .toolbar { margin: 14px 0 0; }
.listening-practice-task .feedback-box .action-btn { max-width: 240px; }

.listening-practice-page .listening-practice-report-title {
    margin: 0 0 16px; color: #24412b;
    font-family: inherit; font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.2; text-align: left;
}

.listening-practice-report-card { line-height: 1.65; }
.listening-practice-report-heading { display: block; color: #4c3b2c; font-size: 1.18rem; }
.listening-practice-report-score { margin: 14px 0 8px; color: #2f7e43; font-size: 1.08rem; font-weight: 700; }
.listening-practice-report-copy { margin: 0; color: #5f7564; overflow-wrap: anywhere; }

@media (min-width: 900px) and (max-height: 760px) {
    body[data-screen]:has(.listening-practice-page) main { padding: 16px 24px 22px; }
    .listening-practice-page > .toolbar { margin-bottom: 10px; }
    .listening-practice-page > .cat-progress { margin-bottom: 10px; }
    .question-card.listening-practice-task { padding: 18px 24px; }
    .listening-practice-task .listening-practice-section-title,
    .listening-practice-task .listening-practice-actions,
    .listening-practice-task .listening-practice-prompt { margin-bottom: 12px; }
    .listening-practice-task .listening-practice-options { gap: 12px; margin-top: 12px; }
    .listening-practice-page .listening-practice-option { min-height: 46px; padding: 10px 14px; }
}

@media (max-width: 640px) {
    body[data-screen]:has(.listening-practice-page) main { padding: 16px; }
    .listening-practice-page > .listening-practice-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .listening-practice-page > .listening-practice-report-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .listening-practice-page .nav-btn { width: 100%; min-height: 48px; padding: 0 14px; }
    .question-card.listening-practice-task,
    .question-card.listening-practice-report-card { padding: 20px 16px; border-radius: 21px; }
    .listening-practice-task .listening-practice-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .listening-practice-task .listening-practice-actions > :only-child { max-width: none; }
    .listening-practice-task .listening-practice-actions .listening-practice-audio,
    .listening-practice-task .listening-practice-actions .listening-practice-next { min-height: 50px; padding: 0 12px; }
    .listening-practice-page .listening-practice-option { min-height: 52px; padding: 13px 14px; }
    .listening-practice-task .feedback-box { padding: 14px; }
    .listening-practice-task .feedback-box .action-btn { width: 100%; max-width: none; min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .listening-practice-page .cat-track-fill,
    .listening-practice-page .cat-walker,
    .listening-practice-page .action-btn,
    .listening-practice-page .nav-btn { transition: none; }
}

/* Speaking practice: one calm task surface with explicit recording states. */
body:has(.speaking-practice-page) {
    align-items: stretch;
    background-color: #dff1e4;
    background-image: none;
}

body:has(.speaking-practice-page) #app-container {
    width: 100%; max-width: none; min-height: 100vh; margin: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none;
}

body:has(.speaking-practice-page) main {
    min-height: 100vh; padding: 24px;
    background: linear-gradient(180deg, #def2f0 0 40%, #edf1d5 40% 68%, #b8d79c 68% 100%);
}

.speaking-practice-page,
.speaking-practice-page * { box-sizing: border-box; }

.speaking-practice-page {
    width: 100%; max-width: 900px; min-width: 0; margin: 0 auto;
    color: #24412b;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}

.speaking-practice-page > .speaking-practice-toolbar {
    display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
}

.speaking-practice-page .nav-btn.speaking-practice-back {
    width: auto; min-width: 44px; min-height: 44px; padding: 0 18px;
    border: 1px solid #c39c46; border-radius: 15px;
    background: #f8dda0; color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(104, 79, 47, 0.14);
    font-family: inherit; font-size: 0.95rem;
}

.speaking-practice-page .nav-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 rgba(67, 91, 62, 0.3), 0 11px 18px rgba(55, 70, 47, 0.14); }
.speaking-practice-page .nav-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(67, 91, 62, 0.28), 0 5px 10px rgba(55, 70, 47, 0.12); }
.speaking-practice-page .nav-btn:focus-visible,
.speaking-practice-page .action-btn:focus-visible { outline: 3px solid #ffd774; outline-offset: 3px; }

.speaking-page.speaking-practice-page > .cat-progress,
.speaking-practice-empty-page > .cat-progress {
    margin: 0 0 14px; padding: 4px 4px 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
}

.speaking-card.speaking-practice-task,
.question-card.speaking-practice-task {
    width: 100%; min-width: 0; margin: 0; padding: 24px 28px;
    border: 1px solid rgba(220, 207, 181, 0.82); border-radius: 24px;
    background: #fffaf0;
    box-shadow: 0 5px 0 rgba(126, 102, 68, 0.1), 0 18px 36px rgba(55, 70, 47, 0.14);
    color: #4c3b2c; overflow: hidden;
}

.speaking-practice-task .speaking-practice-meta {
    margin: 0 0 8px; color: #5f7564; font-size: 0.92rem; line-height: 1.45;
}

.speaking-practice-task .speaking-practice-title {
    margin: 0 0 16px; padding: 0 0 12px;
    border-bottom: 1px solid rgba(188, 167, 126, 0.25);
    color: #4c3b2c; font-family: inherit; font-size: clamp(1.25rem, 3vw, 1.65rem); line-height: 1.35;
    overflow-wrap: anywhere;
}

.speaking-practice-task .speaking-practice-top-actions,
.speaking-practice-task .speaking-practice-recording-actions {
    display: flex; align-items: stretch; gap: 12px; margin: 0 0 16px;
}

.speaking-practice-task .speaking-practice-top-actions > *,
.speaking-practice-task .speaking-practice-recording-actions > * { min-width: 0; min-height: 48px; }

.speaking-practice-task .action-btn.speaking-practice-audio {
    border: 1px solid #438fa6; background: #67b6c4; color: #173f4a;
    box-shadow: 0 4px 0 #438fa6, 0 9px 16px rgba(67, 143, 166, 0.18);
}

.speaking-practice-task .action-btn.speaking-practice-next {
    margin-left: auto; border: 1px solid #2f7e43; background: #3da056; color: #fff;
    box-shadow: 0 4px 0 #2f7e43, 0 9px 16px rgba(47, 126, 67, 0.18);
}

.speaking-practice-task .speaking-practice-instruction {
    margin: 0 0 16px; padding: 0; color: #4c3b2c;
    font-family: inherit; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.55;
    overflow-wrap: anywhere;
}

.speaking-practice-media { margin: 16px 0; text-align: center; }
.speaking-practice-image {
    display: block; width: min(100%, 360px); height: auto; max-height: 260px; margin: 0 auto;
    border: 0; border-radius: 16px; background: transparent; object-fit: contain;
}

.speaking-practice-recording-area { margin-top: 20px; min-width: 0; }

.speaking-practice-task .action-btn.speaking-practice-record {
    flex: 1 1 320px; border: 1px solid #438fa6; background: #67b6c4; color: #173f4a;
    box-shadow: 0 4px 0 #438fa6, 0 9px 16px rgba(67, 143, 166, 0.18);
}

.speaking-practice-task .action-btn.speaking-practice-rerecord {
    flex: 0 1 180px; border: 1px solid #b7cab9; background: #f4f8f2; color: #315e3b;
    box-shadow: 0 3px 0 rgba(85, 124, 76, 0.24), 0 8px 14px rgba(55, 70, 47, 0.08);
}

.speaking-practice-transcript {
    width: 100%; min-width: 0; min-height: 56px; margin: 0; padding: 15px 18px;
    border: 1px solid #b9dce3; border-left: 4px solid #67b6c4; border-radius: 14px;
    background: #eef9fa; color: #2f6572; font-style: normal; line-height: 1.6;
    overflow-wrap: anywhere;
}

.speaking-practice-transcript.speech-result-error {
    border-color: #e4b0a7; border-left-color: #c96857; background: #fff1ed; color: #994a3e;
}

.speaking-practice-task .speaking-practice-confirm {
    margin-top: 18px; padding: 18px 0 0;
    border: 0; border-top: 1px solid rgba(188, 167, 126, 0.28); border-radius: 0; background: transparent;
}

.speaking-practice-confirm label { color: #315e3b; }

.speaking-practice-task .speaking-practice-confirm-input {
    min-height: 104px; border: 1px solid #b9d3bd; border-radius: 14px;
    background: #fffdf8; color: #2f3b2f; font-family: inherit; line-height: 1.65;
}

.speaking-practice-task .speaking-practice-review-area {
    display: block; width: 100%; margin: 18px 0 0;
}

.speaking-practice-task .action-btn.speaking-practice-review-button {
    width: min(100%, 300px); min-height: 48px;
    border: 1px solid #2f7e43; background: #3da056; color: #fff;
    box-shadow: 0 4px 0 #2f7e43, 0 9px 16px rgba(47, 126, 67, 0.18);
}

.speaking-practice-task .speaking-ai-result {
    width: 100%; min-width: 0; margin: 16px 0 0; padding: 16px 18px;
    border: 0; border-left: 4px solid #67b6c4; border-radius: 14px;
    background: #eef9fa; color: #24412b; box-shadow: none; line-height: 1.65;
    overflow-wrap: anywhere;
}

.speaking-practice-ai-message { padding: 0; }
.speaking-practice-ai-message-error { color: #994a3e; }

.speaking-practice-review-report { text-align: left; }
.speaking-practice-review-title { margin: 0 0 10px; color: #315e3b; font-size: 1.05rem; }
.speaking-practice-review-score { color: #2f7e43; font-size: 1.15rem; font-weight: 800; }
.speaking-practice-review-notice {
    margin: 0 0 12px; padding: 10px 12px;
    border: 1px solid #e0c57b; border-radius: 10px; background: #fff6dc; color: #765a1f;
}

.speaking-practice-task .speaking-ai-result > .speaking-note {
    margin: 16px 0 0; padding: 14px 0 0;
    border: 0; border-top: 1px solid rgba(103, 182, 196, 0.34); border-radius: 0;
    background: transparent; box-shadow: none;
}

.speaking-practice-task .speaking-practice-note {
    margin: 18px 0 0; padding: 16px 0 0;
    border: 0; border-top: 1px solid rgba(188, 167, 126, 0.28); border-radius: 0;
    background: transparent; color: #5f624f; box-shadow: none; line-height: 1.7;
}

.speaking-practice-empty-title { margin: 0 0 16px; color: #24412b; font-family: inherit; }
.speaking-practice-empty-task p { margin: 0; line-height: 1.65; }

@media (min-width: 900px) and (max-height: 760px) {
    body:has(.speaking-practice-page) main { padding: 16px 24px 22px; }
    .speaking-practice-page > .speaking-practice-toolbar,
    .speaking-practice-page > .cat-progress { margin-bottom: 10px; }
    .speaking-card.speaking-practice-task { padding: 18px 24px; }
    .speaking-practice-task .speaking-practice-title { margin-bottom: 12px; padding-bottom: 9px; }
    .speaking-practice-task .speaking-practice-instruction,
    .speaking-practice-task .speaking-practice-top-actions,
    .speaking-practice-task .speaking-practice-recording-actions { margin-bottom: 12px; }
    .speaking-practice-recording-area { margin-top: 14px; }
    .speaking-practice-task .speaking-practice-confirm,
    .speaking-practice-task .speaking-practice-review-area,
    .speaking-practice-task .speaking-practice-note { margin-top: 14px; }
    .speaking-practice-task .speaking-practice-confirm-input { min-height: 82px; }
    .speaking-practice-image { max-height: 130px; }
}

@media (max-width: 640px) {
    body:has(.speaking-practice-page) main { padding: 16px; }
    .speaking-practice-page .nav-btn.speaking-practice-back { width: 100%; min-height: 48px; }
    .speaking-card.speaking-practice-task,
    .question-card.speaking-practice-task { padding: 20px 16px; border-radius: 21px; }
    .speaking-practice-task .speaking-practice-top-actions,
    .speaking-practice-task .speaking-practice-recording-actions { flex-direction: column; }
    .speaking-practice-task .speaking-practice-top-actions > *,
    .speaking-practice-task .speaking-practice-recording-actions > * { width: 100%; min-height: 50px; }
    .speaking-practice-task .action-btn.speaking-practice-next { margin-left: 0; }
    .speaking-practice-task .action-btn.speaking-practice-record,
    .speaking-practice-task .action-btn.speaking-practice-rerecord { flex: 0 1 auto; }
    .speaking-practice-task .action-btn.speaking-practice-review-button { width: 100%; min-height: 50px; }
    .speaking-practice-transcript,
    .speaking-practice-task .speaking-ai-result { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .speaking-practice-page .cat-track-fill,
    .speaking-practice-page .cat-walker,
    .speaking-practice-page .action-btn,
    .speaking-practice-page .nav-btn { transition: none; }
}

/* Semifinal mock: legacy two-part exam flow in one stable island scene. */
.semifinal-mock-list,
.semifinal-mock-list * { box-sizing: border-box; }

.semifinal-mock-list {
    color: #24412b;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}

.semifinal-mock-list .semifinal-mock-list-back {
    min-width: 44px; min-height: 44px; padding: 0 18px;
    border: 1px solid #c39c46; border-radius: 15px;
    background: #f8dda0; color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(104, 79, 47, 0.14);
    font-family: inherit;
}

.semifinal-mock-list .semifinal-mock-list-card {
    border: 1px solid rgba(220, 207, 181, 0.82); background: #fffaf0;
    box-shadow: 0 4px 0 rgba(126, 102, 68, 0.1), 0 12px 24px rgba(55, 70, 47, 0.1);
}

.semifinal-mock-list .semifinal-mock-list-title {
    color: #4c3b2c; font-family: inherit; font-size: 1.15rem; line-height: 1.35;
}

.semifinal-mock-list .action-btn.semifinal-mock-list-enter {
    min-width: 88px; min-height: 44px; padding: 0 16px;
    border: 1px solid #2f7e43; border-radius: 15px;
    background: #3da056; color: #fff;
    box-shadow: 0 4px 0 #2f7e43, 0 9px 16px rgba(47, 126, 67, 0.16);
    font-family: inherit;
}

body:has(.semifinal-mock-page) {
    align-items: stretch; background-color: #dff1e4; background-image: none;
}

body:has(.semifinal-mock-page) #app-container {
    width: 100%; max-width: none; min-height: 100vh; margin: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none;
}

body:has(.semifinal-mock-page) main {
    min-height: 0; padding: 20px 24px;
    background: linear-gradient(180deg, #dff3f3 0 41%, #edf1d5 41% 68%, #b7d79b 68% 100%);
}

.semifinal-mock-page,
.semifinal-mock-page * { box-sizing: border-box; }

.semifinal-mock-page {
    width: 100%; max-width: 1080px; min-width: 0; margin: 0 auto;
    color: #24412b;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}

body:has(.semifinal-mock-question-page) header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: min(100%, 1080px); margin: 0 auto; padding: 16px 24px 0;
    background: transparent; color: #24412b;
}

body:has(.semifinal-mock-question-page) header h1 {
    min-width: 0; margin: 0; color: #24412b;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.6rem); line-height: 1.3; overflow-wrap: anywhere;
}

body:has(.semifinal-mock-question-page) #exam-status {
    display: flex; flex: 0 0 auto; align-items: center; gap: 10px;
    color: #315e3b; font-family: inherit;
}

body:has(.semifinal-mock-question-page) #exam-status span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 76px; min-height: 36px; padding: 0 12px;
    border: 1px solid rgba(116, 166, 127, 0.48); border-radius: 999px;
    background: #edf8ef; color: #315e3b;
}

.semifinal-mock-question-page .semifinal-mock-section-title {
    width: auto; margin: 0 0 12px; padding: 0;
    border: 0; color: #315e3b;
    font-family: inherit; font-size: 0.95rem; font-weight: 700; line-height: 1.4;
}

.question-card.semifinal-mock-task {
    width: 100%; min-width: 0; margin: 0; padding: 24px 28px;
    border: 1px solid rgba(220, 207, 181, 0.82); border-radius: 24px;
    background: #fffaf0;
    box-shadow: 0 5px 0 rgba(126, 102, 68, 0.1), 0 18px 36px rgba(55, 70, 47, 0.14);
    color: #4c3b2c; overflow: hidden;
}

.semifinal-mock-task .semifinal-mock-question-text {
    margin: 0 0 16px; color: #4c3b2c;
    font-family: inherit; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5;
    overflow-wrap: anywhere;
}

.semifinal-mock-audio-row { display: flex; margin: 0 0 16px; }

.semifinal-mock-task .action-btn.semifinal-mock-audio {
    width: min(100%, 390px); min-height: 48px; padding: 0 18px;
    border: 1px solid #438f91; border-radius: 15px;
    background: #62bcb9; color: #173f40;
    box-shadow: 0 4px 0 #428f91, 0 9px 16px rgba(66, 143, 145, 0.17);
    font-family: inherit;
}

.semifinal-mock-media { margin: 16px 0; text-align: center; }
.semifinal-mock-image {
    display: block; width: min(100%, 360px); height: auto; max-height: 260px; margin: 0 auto;
    border: 0; border-radius: 14px; background: transparent; object-fit: contain;
}

.semifinal-mock-task .semifinal-mock-options {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
    width: min(100%, 640px); margin: 16px auto 0;
}

.semifinal-mock-task .option-label.semifinal-mock-option {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    width: 100%; min-width: 0; min-height: 52px; margin: 0; padding: 13px 16px;
    border: 2px solid #dacdb2; border-radius: 18px;
    background: #fffdf8; color: #4c3b2c;
    box-shadow: 0 3px 0 rgba(126, 102, 68, 0.16), 0 8px 14px rgba(55, 70, 47, 0.08);
    font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.35;
    overflow-wrap: anywhere;
}

.semifinal-mock-option input[type="radio"] { width: 22px; height: 22px; margin: 0; accent-color: #3f9f72; }
.semifinal-mock-option-copy { min-width: 0; overflow-wrap: anywhere; }

.semifinal-mock-task .semifinal-mock-option:has(input:checked) {
    border-color: #3f9f72; background: #ecf8ea;
    box-shadow: 0 3px 0 rgba(63, 159, 114, 0.24), 0 8px 14px rgba(55, 70, 47, 0.08);
}

.semifinal-mock-option:has(input:checked)::after {
    content: "✓"; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; background: #3f9f72; color: #fff;
}

.semifinal-mock-sort-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px;
    width: 100%; margin: 18px 0 0;
}

.semifinal-mock-sort-item {
    min-width: 0; padding: 12px; text-align: center;
    border: 2px solid #dacdb2; border-radius: 18px; background: #fffdf8;
}

.semifinal-mock-sort-image {
    display: block; width: 100%; height: 112px; margin: 0 auto 10px; object-fit: contain;
    border: 0; border-radius: 12px; background: transparent;
}

.semifinal-mock-sort-label { color: #5f7564; font-size: 0.92rem; font-weight: 700; }
.semifinal-mock-sort-input {
    width: 50px; min-height: 44px; padding: 6px; text-align: center;
    border: 2px solid #3f9f72; border-radius: 10px; background: #fff; color: #24412b;
    font-family: inherit; font-size: 1rem; font-weight: 700;
}

.semifinal-mock-speaking-theme,
.semifinal-mock-draw-title {
    margin: 0 0 12px; color: #4c3b2c; font-family: inherit;
    font-size: clamp(1.2rem, 3vw, 1.55rem); line-height: 1.4; overflow-wrap: anywhere;
}

.semifinal-mock-speaking-prompt { margin: 0 0 16px; color: #5f7564; line-height: 1.6; }
.semifinal-mock-recording-area { width: 100%; min-width: 0; margin-top: 20px; }

.semifinal-mock-task .action-btn.semifinal-mock-record {
    width: min(100%, 390px); min-height: 64px; padding: 0 20px;
    border: 1px solid #5e72b2; border-radius: 18px;
    background: #8499d8; color: #fff;
    box-shadow: 0 5px 0 #5e72b2, 0 10px 18px rgba(94, 114, 178, 0.2);
    font-family: inherit;
}

.semifinal-mock-page #speech-result.semifinal-mock-transcript {
    width: 100%; min-width: 0; min-height: 56px; margin: 16px 0 0; padding: 14px 18px;
    border: 1px solid #b9dce3; border-left: 4px solid #8499d8; border-radius: 14px;
    background: #eef4fb; color: #435b86; font-style: normal; line-height: 1.6;
    overflow-wrap: anywhere;
}

.semifinal-mock-page #speech-result.semifinal-mock-transcript.speech-result-error {
    border-color: #e4b0a7; border-left-color: #b85f56; background: #fff1ed; color: #994a3e;
}

.semifinal-mock-draw-box { padding: 0; text-align: center; }
.semifinal-mock-draw-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px;
}

.semifinal-mock-draw-card {
    min-width: 0; min-height: 156px; padding: 22px 16px;
    border: 2px dashed #62bcb9; border-radius: 18px; background: #eef9f7; color: #24412b;
    cursor: pointer;
}

.semifinal-mock-draw-icon { display: block; font-size: 3rem; line-height: 1; }
.semifinal-mock-draw-card p { margin: 12px 0 0; font-weight: 700; }
.semifinal-mock-draw-result-title { margin: 0 0 16px; color: #315e3b; font-size: 1.25rem; }
.semifinal-mock-draw-result-media { margin-bottom: 16px; }

body:has(.semifinal-mock-question-page) #exam-footer {
    width: min(100%, 1080px); margin: 0 auto; padding: 10px 24px 20px;
    align-items: center; gap: 16px; border: 0; background: transparent;
}

body:has(.semifinal-mock-question-page) #exam-footer .nav-btn {
    min-width: min(46%, 300px); min-height: 52px; padding: 0 20px;
    border: 1px solid #c39c46; border-radius: 15px;
    background: #f8dda0; color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(104, 79, 47, 0.14);
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}

body:has(.semifinal-mock-question-page) #exam-footer .nav-btn.primary {
    margin-left: auto; border-color: #428f91; background: #62bcb9; color: #173f40;
    box-shadow: 0 4px 0 #428f91, 0 9px 16px rgba(66, 143, 145, 0.17);
}

.semifinal-mock-list .nav-btn:focus-visible,
.semifinal-mock-list .action-btn:focus-visible,
.semifinal-mock-list-card:focus-visible,
.semifinal-mock-page .action-btn:focus-visible,
.semifinal-mock-page .semifinal-mock-sort-input:focus-visible,
.semifinal-mock-page .semifinal-mock-option:focus-within,
.semifinal-mock-page .semifinal-mock-draw-card:focus-visible,
body:has(.semifinal-mock-question-page) #exam-footer .nav-btn:focus-visible {
    outline: 3px solid #ffd774; outline-offset: 3px;
}

.semifinal-mock-page .action-btn:disabled {
    border-color: #b9bcb7; background: #d7d9d5; color: #767973;
    box-shadow: 0 3px 0 #b9bcb7; cursor: not-allowed; transform: none;
}

.semifinal-mock-result-page { max-width: 780px; }
.semifinal-mock-result-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px;
}

.semifinal-mock-result-title {
    min-width: 0; margin: 0; color: #24412b; font-family: inherit;
    font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.2; overflow-wrap: anywhere;
}

.semifinal-mock-result-page .nav-btn.semifinal-mock-result-back {
    flex: 0 0 auto; min-width: 44px; min-height: 44px; margin: 0; padding: 0 18px;
    border: 1px solid #c39c46; border-radius: 15px;
    background: #f8dda0; color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(104, 79, 47, 0.14);
    font-family: inherit;
}

.question-card.semifinal-mock-result-task {
    width: 100%; min-width: 0; margin: 0; padding: 24px 28px;
    border: 1px solid rgba(220, 207, 181, 0.82); border-radius: 24px;
    background: #fffaf0;
    box-shadow: 0 5px 0 rgba(126, 102, 68, 0.1), 0 18px 36px rgba(55, 70, 47, 0.14);
    color: #4c3b2c; overflow: hidden;
}

.semifinal-mock-result-item {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px;
    margin: 0; padding: 16px 0;
    border: 0; border-bottom: 1px solid rgba(188, 167, 126, 0.28);
    line-height: 1.7; overflow-wrap: anywhere;
}

.semifinal-mock-result-marker {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; color: #fff; font-weight: 800;
}

.semifinal-mock-result-item.is-correct .semifinal-mock-result-marker { background: #3f9f72; }
.semifinal-mock-result-item.needs-review .semifinal-mock-result-marker { background: #b85f56; }
.semifinal-mock-speaking-result .semifinal-mock-result-marker { background: #8499d8; font-size: 0.7rem; }
.semifinal-mock-result-copy { min-width: 0; }
.semifinal-mock-answer.is-correct { color: #2f7e43; font-weight: 700; }
.semifinal-mock-answer.needs-review { color: #a34f46; font-weight: 700; }

.semifinal-mock-speaking-summary { margin: 8px 0 0; }
.semifinal-mock-speaking-summary p { margin: 6px 0; }
.semifinal-mock-topic-title { color: #315e3b; }
.semifinal-mock-recorded-answer { font-size: 1rem; }

.semifinal-mock-reference {
    margin-top: 12px; padding: 14px 0 0;
    border-top: 1px solid rgba(188, 167, 126, 0.24); line-height: 1.65;
}

.semifinal-mock-reference p { margin: 0 0 10px; }
.semifinal-mock-reference-title { color: #2f7e43; font-weight: 700; }
.semifinal-mock-rubric-title { color: #8a672a; font-weight: 700; }
.semifinal-mock-ai-area { margin-top: 16px; text-align: left; }

.semifinal-mock-result-page .action-btn.semifinal-mock-ai-button {
    min-height: 48px; padding: 0 18px;
    border: 1px solid #438f91; border-radius: 15px;
    background: #62bcb9; color: #173f40;
    box-shadow: 0 4px 0 #428f91, 0 9px 16px rgba(66, 143, 145, 0.17);
    font-family: inherit;
}

.semifinal-mock-ai-result {
    width: 100%; min-width: 0; margin: 16px 0 0; padding: 16px 18px;
    border: 0; border-left: 4px solid #62bcb9; border-radius: 14px;
    background: #eef9f7; color: #24412b; text-align: left; line-height: 1.65;
    overflow-wrap: anywhere;
}

.semifinal-mock-ai-result:empty { display: none; }
.semifinal-mock-review-report { text-align: left; }
.semifinal-mock-review-title { margin: 0 0 10px; color: #315e3b; font-size: 1.05rem; }
.semifinal-mock-review-score { color: #2f7e43; font-size: 1.15rem; font-weight: 800; }
.semifinal-mock-review-notice {
    margin: 0 0 12px; padding: 10px 12px;
    border: 1px solid #e0c57b; border-radius: 10px; background: #fff6dc; color: #765a1f;
}
.semifinal-mock-ai-message { padding: 0; }
.semifinal-mock-ai-message-error { color: #994a3e; }

.semifinal-mock-ai-result > .speaking-note {
    margin: 16px 0 0; padding: 14px 0 0;
    border: 0; border-top: 1px solid rgba(98, 188, 185, 0.34); border-radius: 0;
    background: transparent; box-shadow: none;
}

.semifinal-mock-result-score {
    margin: 18px 0 0; padding: 18px 0 0;
    border-top: 2px solid rgba(188, 167, 126, 0.3); color: #2f7e43;
    font-family: inherit; font-size: 1.2rem; line-height: 1.5; text-align: center;
}

.semifinal-mock-result-score span { color: #5f7564; font-size: 0.8em; font-weight: 500; }

@media (min-width: 900px) and (max-height: 760px) {
    body:has(.semifinal-mock-question-page) header { padding-top: 10px; }
    body:has(.semifinal-mock-page) main { padding-top: 12px; padding-bottom: 12px; }
    .question-card.semifinal-mock-task { padding: 18px 24px; }
    .semifinal-mock-task .semifinal-mock-question-text,
    .semifinal-mock-audio-row { margin-bottom: 12px; }
    .semifinal-mock-image { max-height: 150px; }
    .semifinal-mock-sort-image { height: 82px; }
    .semifinal-mock-recording-area { margin-top: 14px; }
    body:has(.semifinal-mock-question-page) #exam-footer { padding-top: 8px; padding-bottom: 14px; }
}

@media (max-width: 640px) {
    body:has(.semifinal-mock-question-page) header {
        display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px 0;
    }
    body:has(.semifinal-mock-question-page) #exam-status { justify-content: space-between; gap: 8px; }
    body:has(.semifinal-mock-question-page) #exam-status span { flex: 1 1 0; min-width: 0; }
    body:has(.semifinal-mock-page) main { padding: 14px 16px; }
    .question-card.semifinal-mock-task,
    .question-card.semifinal-mock-result-task { padding: 20px 16px; border-radius: 21px; }
    .semifinal-mock-task .action-btn.semifinal-mock-audio,
    .semifinal-mock-task .action-btn.semifinal-mock-record { width: 100%; }
    .semifinal-mock-sort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .semifinal-mock-sort-item { padding: 10px; }
    .semifinal-mock-sort-image { height: 96px; }
    .semifinal-mock-draw-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
    .semifinal-mock-draw-card { min-height: 112px; }
    body:has(.semifinal-mock-question-page) #exam-footer { gap: 12px; padding: 8px 16px 16px; }
    body:has(.semifinal-mock-question-page) #exam-footer .nav-btn {
        flex: 1 1 0; min-width: 0; width: auto; min-height: 50px;
    }
    .semifinal-mock-result-header { align-items: stretch; flex-direction: column; }
    .semifinal-mock-result-page .nav-btn.semifinal-mock-result-back { width: 100%; min-height: 48px; }
    .semifinal-mock-result-page .action-btn.semifinal-mock-ai-button { width: 100%; min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    .semifinal-mock-list .action-btn,
    .semifinal-mock-list .nav-btn,
    .semifinal-mock-page .action-btn,
    body:has(.semifinal-mock-question-page) #exam-footer .nav-btn { transition: none; }
}

/* Reading practice: one calm task surface with explicit answer feedback. */
body:has(.reading-practice-page) {
    align-items: stretch;
    background: #dff1e4;
}

body:has(.reading-practice-page) #app-container {
    width: 100%; max-width: none; min-height: 100vh; margin: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none;
}

body:has(.reading-practice-page) main {
    min-height: 100vh; padding: 24px;
    background: linear-gradient(180deg, #e4f4e8 0 46%, #f5efd7 46% 72%, #bdd9a3 72% 100%);
}

.reading-practice-page,
.reading-practice-page * { box-sizing: border-box; }

.reading-practice-page {
    width: 100%; max-width: 820px; min-width: 0; margin: 0 auto;
    color: #24412b;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}

.reading-practice-page .reading-practice-toolbar {
    display: flex; align-items: center; margin: 0 0 16px;
}

.reading-practice-page .nav-btn.reading-practice-back {
    width: auto; min-width: 44px; min-height: 44px; padding: 0 18px;
    border: 1px solid #c39c46; border-radius: 15px;
    background: #f8dda0; color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(104, 79, 47, 0.14);
    font-family: inherit; line-height: 1.3;
}

.reading-practice-page .reading-practice-title {
    margin: 0 0 18px; color: #24412b;
    font-size: clamp(1.65rem, 4vw, 2.2rem); font-weight: 800; line-height: 1.2;
}

.reading-practice-page .question-card.reading-practice-task {
    margin: 0; padding: clamp(20px, 4vw, 32px);
    border: 1px solid rgba(139, 159, 111, 0.38); border-radius: 24px;
    background: #fffdf7;
    box-shadow: 0 7px 0 rgba(91, 116, 75, 0.13), 0 18px 34px rgba(55, 70, 47, 0.12);
    overflow: visible;
}

.reading-practice-page .reading-practice-passage {
    margin: 0 0 24px; padding: 20px 22px;
    border-left: 5px solid #d3a548; border-radius: 0 16px 16px 0;
    background: #fff5d9;
}

.reading-practice-page .reading-practice-section-title {
    margin: 0 0 10px; color: #315e3b;
    font-size: 1.05rem; font-weight: 800; line-height: 1.35;
}

.reading-practice-page .reading-practice-passage p {
    margin: 0; color: #2f3f33;
    font-size: clamp(1.15rem, 2.5vw, 1.35rem); line-height: 1.85;
    overflow-wrap: anywhere;
}

.reading-practice-page .reading-practice-question {
    margin: 0; padding: 0;
}

.reading-practice-page .reading-practice-question-text {
    margin: 0 0 16px; color: #263b2b;
    font-size: clamp(1.08rem, 2.3vw, 1.25rem); font-weight: 700; line-height: 1.55;
    overflow-wrap: anywhere;
}

.reading-practice-page .reading-practice-options {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
}

.reading-practice-page .reading-practice-option {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center;
    min-width: 0; min-height: 52px; gap: 12px; padding: 12px 14px;
    border: 2px solid #d7e4d5; border-radius: 16px;
    background: #fff; color: #2f3f33; cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.reading-practice-page .reading-practice-option:hover {
    border-color: #78a77d;
    box-shadow: 0 5px 12px rgba(55, 70, 47, 0.08);
}

.reading-practice-page .reading-practice-option.is-selected {
    border-color: #3d8a50; background: #edf8ef;
}

.reading-practice-page .reading-practice-option.is-correct {
    border-color: #3d8a50; background: #e8f6e8;
}

.reading-practice-page .reading-practice-option.is-wrong {
    border-color: #cf765f; background: #fff0e9;
}

.reading-practice-page .reading-practice-option:has(input:disabled) { cursor: default; }
.reading-practice-page .reading-practice-option:has(input:disabled):hover { box-shadow: none; }

.reading-practice-page .reading-practice-option input {
    width: 20px; height: 20px; margin: 0; accent-color: #3d8a50;
}

.reading-practice-page .reading-practice-option-copy {
    min-width: 0; font-size: 1.02rem; line-height: 1.5; overflow-wrap: anywhere;
}

.reading-practice-page .reading-practice-option-status {
    color: #315e3b; font-size: 0.92rem; font-weight: 800; line-height: 1.35;
}

.reading-practice-page .reading-practice-option.is-wrong .reading-practice-option-status { color: #9d4638; }

.reading-practice-page .reading-practice-feedback {
    margin: 20px 0 0; padding: 14px 16px;
    border-left: 5px solid #3d8a50; background: #edf8ef;
    color: #315e3b; line-height: 1.55;
}

.reading-practice-page .reading-practice-feedback.is-wrong {
    border-left-color: #cf765f; background: #fff0e9; color: #873d32;
}

.reading-practice-page .reading-practice-feedback p { margin: 5px 0 0; overflow-wrap: anywhere; }

.reading-practice-page .reading-practice-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-top: 22px;
}

.reading-practice-page .reading-practice-hint {
    margin: 0; color: #586b5c; font-size: 0.95rem; line-height: 1.5;
}

.reading-practice-page .action-btn.reading-practice-submit {
    width: auto; min-width: 132px; min-height: 48px; padding: 0 22px;
    border: 1px solid #2f7e43; border-radius: 15px;
    background: #3da056; color: #fff;
    box-shadow: 0 4px 0 #2f7e43, 0 9px 16px rgba(47, 126, 67, 0.16);
    font-family: inherit; font-weight: 800; line-height: 1.3;
}

.reading-practice-page .action-btn.reading-practice-submit:disabled {
    border-color: #aeb9ae; background: #d8ded8; color: #6a756b; box-shadow: none; cursor: not-allowed;
}

@media (max-width: 640px) {
    body:has(.reading-practice-page) main { padding: 16px; }
    .reading-practice-page .reading-practice-title { margin-bottom: 15px; }
    .reading-practice-page .question-card.reading-practice-task { padding: 18px 16px; border-radius: 21px; }
    .reading-practice-page .reading-practice-passage { margin-bottom: 20px; padding: 17px 16px; }
    .reading-practice-page .reading-practice-option { grid-template-columns: 22px minmax(0, 1fr); }
    .reading-practice-page .reading-practice-option-status { grid-column: 2; justify-self: start; }
    .reading-practice-page .reading-practice-actions { align-items: stretch; flex-direction: column; gap: 10px; }
    .reading-practice-page .action-btn.reading-practice-submit { width: 100%; min-height: 48px; }
}

/* Writing practice: one focused writing surface with calm completion feedback. */
body:has(.writing-practice-page) {
    align-items: stretch;
    background: #dff1e4;
}

body:has(.writing-practice-page) #app-container {
    width: 100%; max-width: none; min-height: 100vh; margin: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none;
}

body:has(.writing-practice-page) main {
    min-height: 100vh; padding: 24px;
    background: linear-gradient(180deg, #e4f4e8 0 46%, #f5efd7 46% 72%, #bdd9a3 72% 100%);
}

.writing-practice-page,
.writing-practice-page * { box-sizing: border-box; }

.writing-practice-page {
    width: 100%; max-width: 820px; min-width: 0; margin: 0 auto;
    color: #24412b;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}

.writing-practice-page .writing-practice-toolbar {
    display: flex; align-items: center; margin: 0 0 16px;
}

.writing-practice-page .nav-btn.writing-practice-back {
    width: auto; min-width: 44px; min-height: 44px; padding: 0 18px;
    border: 1px solid #c39c46; border-radius: 15px;
    background: #f8dda0; color: #684f2f;
    box-shadow: 0 4px 0 #c39c46, 0 9px 16px rgba(104, 79, 47, 0.14);
    font-family: inherit; line-height: 1.3;
}

.writing-practice-page .writing-practice-title {
    margin: 0 0 18px; color: #24412b;
    font-size: clamp(1.65rem, 4vw, 2.2rem); font-weight: 800; line-height: 1.2;
}

.writing-practice-page .question-card.writing-practice-task {
    margin: 0; padding: clamp(20px, 4vw, 32px);
    border: 1px solid rgba(139, 159, 111, 0.38); border-radius: 24px;
    background: #fffdf7;
    box-shadow: 0 7px 0 rgba(91, 116, 75, 0.13), 0 18px 34px rgba(55, 70, 47, 0.12);
    overflow: visible;
}

.writing-practice-page .writing-practice-prompt {
    margin: 0 0 22px; padding: 18px 20px;
    border-left: 5px solid #d3a548; border-radius: 0 16px 16px 0;
    background: #fff5d9;
}

.writing-practice-page .writing-practice-section-title {
    display: block; margin: 0 0 9px; color: #315e3b;
    font-size: 1.05rem; font-weight: 800; line-height: 1.35;
}

.writing-practice-page .writing-practice-prompt p,
.writing-practice-page .writing-practice-requirement p {
    margin: 0; color: #2f3f33;
    font-size: clamp(1.08rem, 2.3vw, 1.25rem); line-height: 1.65;
    overflow-wrap: anywhere;
}

.writing-practice-page .writing-practice-requirement {
    margin: 0 0 22px;
}

.writing-practice-page .writing-practice-response {
    margin: 0;
}

.writing-practice-page .writing-practice-answer {
    display: block; width: 100%; min-width: 0; min-height: 132px; padding: 14px 16px;
    resize: vertical; border: 2px solid #b8cfb8; border-radius: 16px;
    background: #fff; color: #263b2b;
    font-family: inherit; font-size: 1.08rem; line-height: 1.65;
    box-shadow: inset 0 2px 5px rgba(55, 70, 47, 0.06);
}

.writing-practice-page .writing-practice-answer:focus {
    border-color: #3d8a50; outline: 3px solid rgba(61, 138, 80, 0.2); outline-offset: 2px;
}

.writing-practice-page .writing-practice-answer[readonly] {
    border-color: #cbd6ca; background: #f4f7f2; color: #344638; cursor: default;
}

.writing-practice-page .writing-practice-feedback {
    margin: 20px 0 0; padding: 15px 17px;
    border-left: 5px solid #3d8a50; background: #edf8ef;
    color: #315e3b; line-height: 1.55;
}

.writing-practice-page .writing-practice-feedback.is-complete {
    border-left-color: #d3a548; background: #fff5d9; color: #684f2f;
}

.writing-practice-page .writing-practice-feedback h3 {
    margin: 0; font-size: 1.02rem; font-weight: 800; line-height: 1.45;
}

.writing-practice-page .writing-practice-feedback p {
    margin: 8px 0 0; overflow-wrap: anywhere;
}

.writing-practice-page .writing-practice-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-top: 22px;
}

.writing-practice-page .writing-practice-hint {
    min-height: 24px; margin: 0; color: #873d32; font-size: 0.95rem; font-weight: 700; line-height: 1.5;
}

.writing-practice-page .action-btn.writing-practice-submit {
    width: auto; min-width: 132px; min-height: 48px; padding: 0 22px;
    border: 1px solid #2f7e43; border-radius: 15px;
    background: #3da056; color: #fff;
    box-shadow: 0 4px 0 #2f7e43, 0 9px 16px rgba(47, 126, 67, 0.16);
    font-family: inherit; font-weight: 800; line-height: 1.3;
}

.writing-practice-page .action-btn.writing-practice-submit:disabled {
    border-color: #aeb9ae; background: #d8ded8; color: #6a756b; box-shadow: none; cursor: not-allowed;
}

@media (max-width: 640px) {
    body:has(.writing-practice-page) main { padding: 16px; overflow-x: hidden; }
    .writing-practice-page .writing-practice-title { margin-bottom: 15px; }
    .writing-practice-page .question-card.writing-practice-task { padding: 18px 16px; border-radius: 21px; }
    .writing-practice-page .writing-practice-prompt { padding: 17px 16px; }
    .writing-practice-page .writing-practice-actions { align-items: stretch; flex-direction: column; gap: 10px; }
    .writing-practice-page .action-btn.writing-practice-submit { width: 100%; min-height: 48px; }
}