:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --line: #d7dee8;
    --line-strong: #c4cdd9;
    --text: #1f2937;
    --muted: #5f6b7a;
    --muted-2: #7e8a98;
    --brand: #0f6cbf;
    --brand-dark: #0a58a2;
    --success: #237804;
    --success-bg: #edf9e8;
    --danger: #c62828;
    --danger-bg: #fff1f1;
    --warning-bg: #fff8e8;
    --shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
    --radius: 16px;
    --radius-sm: 12px;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
}

body {
    min-width: 320px;
}

button,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

textarea {
    resize: vertical;
}

.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 24px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 10px rgba(10, 31, 68, 0.04);
}

.topbar-left,
.topbar-right,
.user-box,
.monitor-badges,
.monitor-actions,
.nav-actions,
.summary-actions,
.finish-actions,
.question-card-head,
.results-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.logo-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f6cbf, #3696e3);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.brand-title {
    font-weight: 800;
    font-size: 1rem;
}

.brand-subtitle,
.side-label,
.section-kicker,
.answer-hint,
.save-note,
.summary-table th,
.summary-table td,
.results-summary,
.score-label,
.score-sub,
.monitor-badge,
.sidebar-head p,
.rule-card p,
.monitor-card p,
.welcome-side,
.user-name {
    color: var(--muted);
}

.brand-subtitle,
.section-kicker,
.side-label,
.score-label {
    font-size: 0.82rem;
}

.user-box {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-soft);
}

.user-name {
    font-size: 0.94rem;
    font-weight: 600;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dbe7f5;
    color: #103d68;
    font-weight: 800;
}

.monitor-badges {
    flex-wrap: wrap;
}

.monitor-badge,
.timer-pill,
.status-chip,
.points-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 0.86rem;
    font-weight: 600;
}

.monitor-badge.is-ready,
.status-chip.is-ready {
    color: var(--success);
    background: var(--success-bg);
    border-color: #b7dfad;
}

.monitor-badge.is-problem {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: #efbcbc;
}

.timer-pill {
    min-width: 92px;
    color: var(--danger);
    background: #fff6f6;
    border-color: #efc0c0;
    font-family: var(--mono);
    font-size: 1rem;
}

.page-wrap {
    flex: 1;
    padding: 28px;
}

.screen {
    display: none;
}

.screen.active {
    display: block;
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.wide-card {
    padding: 28px;
}

.welcome-layout,
.exam-layout,
.results-layout {
    display: grid;
    gap: 24px;
}

.welcome-layout {
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr);
    align-items: start;
}

.welcome-main {
    padding: 32px;
}

.welcome-main h1,
.summary-head h2,
.finish-card h2,
.results-head h2,
.question-card-head h2 {
    margin: 0;
    line-height: 1.15;
}

.welcome-main h1 {
    font-size: clamp(2rem, 3vw, 2.7rem);
    margin-top: 6px;
    margin-bottom: 16px;
}

.lead {
    margin: 0 0 24px;
    font-size: 1.04rem;
    line-height: 1.65;
}

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

.rule-card,
.monitor-card,
.side-block {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

.rule-card {
    padding: 18px;
}

.rule-title,
.side-value,
.monitor-card h2,
.sidebar-head h3,
.question-card-head h2,
.summary-head h2,
.finish-card h2,
.results-head h2,
.score-value {
    color: var(--text);
    font-weight: 800;
}

.rule-title,
.monitor-card h2,
.side-value {
    margin-bottom: 8px;
}

.rule-card p,
.monitor-card p,
.sidebar-head p,
.finish-card p,
.results-summary,
.answer-hint,
.save-note {
    margin: 0;
    line-height: 1.55;
}

.monitor-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 26px;
    background: linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
}

.welcome-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.welcome-footer p {
    margin: 0;
    color: var(--muted);
}

.welcome-side {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.side-block {
    padding: 18px;
}

.muted-note {
    font-size: 0.95rem;
    line-height: 1.6;
}

.exam-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 360px);
    align-items: start;
}

.question-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.question-card {
    padding: 28px;
}

.question-card-head {
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.question-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.question-content {
    padding: 24px 0 8px;
    font-size: 1rem;
    line-height: 1.7;
}

.question-content p,
.question-content ol,
.question-content ul {
    margin-top: 0;
    margin-bottom: 14px;
}

.question-content ul,
.question-content ol {
    padding-left: 22px;
}

.formula-block {
    display: inline-flex;
    align-items: center;
    min-height: 60px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid #dbe6f2;
    background: #f7fbff;
    font-family: var(--mono);
    font-size: 1.15rem;
}

.diagram-wrap {
    margin-top: 12px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfdff;
    padding: 8px;
}

.diagram-wrap svg {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.diagram-wrap .shape {
    stroke: #244b74;
    stroke-width: 3;
    fill: none;
}

.diagram-wrap .helper {
    stroke: #7795b5;
    stroke-width: 2.5;
    stroke-dasharray: 8 8;
}

.diagram-wrap text {
    font-family: var(--sans);
    font-size: 16px;
    fill: #1f2937;
}

.answer-box {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f9fbfd;
}

.answer-box label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}

.answer-box textarea {
    width: 100%;
    min-height: 150px;
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    line-height: 1.55;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.answer-box textarea:focus {
    border-color: #66a8de;
    box-shadow: 0 0 0 4px rgba(15, 108, 191, 0.12);
}

.answer-hint,
.save-note {
    margin-top: 10px;
    font-size: 0.92rem;
}

.save-note {
    font-weight: 600;
}

.nav-actions,
.summary-actions,
.finish-actions {
    justify-content: space-between;
    flex-wrap: wrap;
}

.sidebar {
    padding: 24px;
    position: sticky;
    top: 96px;
}

.sidebar-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}

.sidebar-head h3 {
    margin: 0 0 6px;
}

.question-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.qnav-btn {
    min-height: 66px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 8px 10px;
    text-align: left;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.qnav-btn:hover {
    transform: translateY(-1px);
    border-color: #9fc4e8;
}

.qnav-btn .num {
    display: block;
    font-weight: 800;
    font-size: 1rem;
    color: var(--text);
}

.qnav-btn .state {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--muted);
}

.qnav-btn.is-current {
    border-color: var(--brand);
    background: #eef6fd;
    box-shadow: inset 0 0 0 1px var(--brand);
}

.qnav-btn.is-answered {
    background: #f1f8eb;
    border-color: #b7d8a5;
}

.sidebar-foot {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.summary-wrap,
.finish-card,
.results-main {
    max-width: 1180px;
    margin: 0 auto;
}

.summary-head,
.results-head {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.summary-table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.summary-table th,
.summary-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.summary-table thead th {
    background: #f7f9fc;
    color: var(--text);
    font-weight: 800;
}

.summary-table tbody tr:last-child td {
    border-bottom: 0;
}

.summary-table tbody tr {
    cursor: pointer;
}

.summary-table tbody tr:hover {
    background: #fafcff;
}

.finish-card {
    max-width: 640px;
    padding: 40px;
    text-align: center;
}

.finish-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ebf8e7;
    color: var(--success);
    font-size: 2rem;
    font-weight: 800;
}

.results-layout {
    grid-template-columns: 1fr;
}

.results-head {
    gap: 20px;
}

.score-card {
    min-width: 200px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #f8fbff;
}

.score-value {
    font-size: 1.7rem;
    margin: 6px 0 4px;
}

.results-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.summary-mini {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f9fbfd;
}

.summary-mini strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.result-item {
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: #fbfcfe;
    border-bottom: 1px solid var(--line);
}

.result-head h3 {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.result-body {
    display: grid;
    grid-template-columns: 1.1fr 0.95fr;
}

.result-question,
.result-answer {
    padding: 20px;
}

.result-question {
    background: #fff;
}

.result-answer {
    border-left: 1px solid var(--line);
    background: #fcfdff;
}

.answer-preview {
    min-height: 84px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    white-space: pre-wrap;
    line-height: 1.6;
}

.mark-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.mark-btn {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--text);
    font-weight: 700;
}

.mark-btn.active-correct {
    background: #eef9e6;
    border-color: #b6d8a0;
    color: var(--success);
}

.mark-btn.active-wrong {
    background: #fff2f2;
    border-color: #efbcbc;
    color: var(--danger);
}

.result-pill {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--muted);
    background: #fff;
}

.result-pill.correct {
    color: var(--success);
    background: var(--success-bg);
    border-color: #b7dfad;
}

.result-pill.wrong {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: #efbcbc;
}

.hidden {
    display: none !important;
}

.btn {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 700;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
    box-shadow: 0 8px 18px rgba(15, 108, 191, 0.18);
}

.btn-primary:hover {
    box-shadow: 0 10px 24px rgba(15, 108, 191, 0.22);
}

.btn-large {
    min-height: 52px;
    padding: 0 24px;
}

.btn-secondary {
    color: var(--text);
    background: #fff;
    border-color: var(--line-strong);
}

.btn-secondary:hover {
    background: #f8fbff;
    border-color: #aab8c8;
}

.btn-danger {
    color: #fff;
    background: linear-gradient(180deg, #cf3b36 0%, #b52e2a 100%);
    box-shadow: 0 8px 18px rgba(181, 46, 42, 0.16);
}

.btn-danger-outline {
    width: 100%;
    color: var(--danger);
    background: #fff;
    border-color: #efbcbc;
}

@media (max-width: 1100px) {
    .welcome-layout,
    .exam-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

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

    .result-body {
        grid-template-columns: 1fr;
    }

    .result-answer {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 760px) {
    .topbar,
    .page-wrap,
    .welcome-main,
    .welcome-side,
    .question-card,
    .sidebar,
    .wide-card,
    .finish-card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .topbar {
        padding-top: 12px;
        padding-bottom: 12px;
        align-items: flex-start;
    }

    .page-wrap {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .rules-grid,
    .results-summary,
    .question-grid {
        grid-template-columns: 1fr;
    }

    .monitor-card,
    .welcome-footer,
    .question-card-head,
    .summary-head,
    .results-head,
    .nav-actions,
    .summary-actions,
    .finish-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .question-meta {
        justify-content: flex-start;
    }

    .summary-table th,
    .summary-table td {
        padding: 12px;
    }

    .result-head,
    .result-question,
    .result-answer {
        padding: 16px;
    }

    .monitor-badges {
        width: 100%;
    }

    .monitor-badge,
    .user-box,
    .timer-pill {
        width: 100%;
        justify-content: center;
    }
}

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

.hero-check-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
}

.hero-check-card p,
.preflight-item-sub,
.preflight-stage-copy,
.preflight-note-box,
.preview-note,
.preflight-runtime-note,
.signal-card,
.guard-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.hero-check-title,
.signal-card-title,
.preflight-item-title,
.phrase-label,
.guard-card h2,
.preflight-head h2,
.preflight-stage-label {
    font-weight: 800;
    color: var(--text);
}

.hero-check-card.accent-blue {
    border-color: #cfe2f7;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
}

.hero-check-card.accent-orange {
    border-color: #f2d9bc;
    background: linear-gradient(180deg, #fffdf9 0%, #fff6ea 100%);
}

.hero-check-card.accent-green {
    border-color: #cde5c2;
    background: linear-gradient(180deg, #fcfffb 0%, #f2faef 100%);
}

.hero-check-card.accent-purple {
    border-color: #ddcff3;
    background: linear-gradient(180deg, #fdfbff 0%, #f6f1ff 100%);
}

.monitor-card-hero {
    margin-bottom: 0;
}

.preflight-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
    gap: 24px;
    align-items: start;
}

.preflight-main,
.preflight-side {
    padding: 28px;
}

.preflight-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.preflight-head h2 {
    margin: 6px 0 10px;
    line-height: 1.15;
}

.preflight-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.preflight-progress-pill {
    min-height: 38px;
    min-width: 124px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef6fd;
    border: 1px solid #c7ddf4;
    color: var(--brand);
    font-weight: 800;
}

.preflight-stage-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fcfdff 0%, #f7fafd 100%);
    padding: 22px;
    margin-bottom: 18px;
}

.preflight-stage-label {
    font-size: 0.92rem;
    margin-bottom: 6px;
}

.preflight-actions-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.preflight-runtime-note {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #dce3ed;
    background: #fff;
    font-weight: 600;
}

.preflight-runtime-note[data-tone="success"] {
    border-color: #b7dfad;
    background: var(--success-bg);
    color: var(--success);
}

.preflight-runtime-note[data-tone="error"] {
    border-color: #efbcbc;
    background: var(--danger-bg);
    color: var(--danger);
}

.preflight-signal-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 18px;
}

.signal-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    padding: 18px;
}

.signal-card-title {
    margin-bottom: 12px;
}

.signal-card-title-sm {
    margin-top: 18px;
}

.preview-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background: #101822;
    object-fit: cover;
    border: 1px solid #cfdae7;
}

.preview-note {
    margin-top: 10px;
}

.audio-meter-shell {
    width: 100%;
    height: 16px;
    border-radius: 999px;
    background: #e9eef5;
    overflow: hidden;
    border: 1px solid #d5dde7;
}

.audio-meter-bar {
    width: 6%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #70bd4f 0%, #f4c54a 60%, #df5f4f 100%);
    transition: width 0.1s linear;
}

.screen-box {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed var(--line-strong);
    color: var(--muted);
    font-weight: 700;
    text-align: center;
    padding: 12px;
}

.screen-box.ready {
    background: var(--success-bg);
    border-style: solid;
    border-color: #b7dfad;
    color: var(--success);
}

.phrase-box {
    margin-top: 16px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #d9e6f4;
    background: #f7fbff;
}

.phrase-text {
    font-size: 1.12rem;
    line-height: 1.45;
    font-weight: 800;
    color: #14395e;
    margin: 6px 0 8px;
}

.phrase-sub {
    color: var(--muted);
    line-height: 1.5;
}

.preflight-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preflight-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fafcfe;
    padding: 14px;
}

.preflight-item.current {
    border-color: #9fc4e8;
    background: #f2f8fe;
}

.preflight-item.done {
    border-color: #b7dfad;
    background: var(--success-bg);
}

.preflight-item-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e7eef6;
    color: #244b74;
    font-weight: 800;
}

.preflight-item.done .preflight-item-icon {
    background: #d8efcf;
    color: var(--success);
}

.preflight-note-box {
    margin-top: 18px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #f9fbfd;
}

.centered-actions {
    justify-content: center !important;
    align-items: center;
}

.finish-actions.centered-actions .btn {
    min-width: 230px;
}

.results-page-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.guard-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(6px);
}

.guard-card {
    width: min(560px, 100%);
    padding: 28px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #dbe3ee;
    box-shadow: 0 20px 40px rgba(8, 22, 45, 0.18);
    text-align: center;
}

.guard-card h2 {
    margin: 6px 0 10px;
}

.guard-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

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

.qnav-btn {
    min-height: 74px;
}

.qnav-btn .num {
    font-size: 0.95rem;
}

.qnav-btn .state {
    margin-top: 6px;
}

.finish-actions {
    justify-content: center;
}

@media (max-width: 1180px) {
    .preflight-layout,
    .preflight-signal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .hero-check-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .preflight-main,
    .preflight-side {
        padding-left: 16px;
        padding-right: 16px;
    }

    .preflight-head,
    .preflight-actions-row,
    .guard-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .finish-actions.centered-actions .btn,
    .results-page-actions .btn,
    .guard-actions .btn {
        width: 100%;
        min-width: 0;
    }
}


/* --- v5 overrides --- */
.topbar-right {
    gap: 16px;
}

.monitor-badges,
.guard-overlay {
    display: none !important;
}

.formula-block {
    display: block;
    width: fit-content;
    min-width: min(100%, 280px);
    max-width: 100%;
    margin: 14px 0 4px;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid #dbe6f2;
    background: linear-gradient(180deg, #f9fcff 0%, #f2f8fe 100%);
    font-family: var(--sans);
    font-size: 1.12rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.formula-block .katex-display {
    margin: 0;
}

.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
}

.instruction-stage-card {
    min-height: 520px;
    display: flex;
    flex-direction: column;
}

.instruction-illustration {
    position: relative;
    height: 250px;
    margin-top: 20px;
    border-radius: 20px;
    border: 1px solid #d7e2ef;
    background: radial-gradient(circle at top, #ffffff 0%, #f2f7fc 68%, #e8f1fa 100%);
    overflow: hidden;
}

.instruction-illustration .scene {
    position: absolute;
    inset: 0;
}

.instruction-illustration .camera-chip,
.instruction-illustration .window-box,
.instruction-illustration .desk-surface,
.instruction-illustration .desk-items span,
.instruction-illustration .frame-outline,
.instruction-illustration .person-head,
.instruction-illustration .person-body,
.instruction-illustration .desk-mini,
.instruction-illustration .screen-mini,
.instruction-illustration .microphone-stick,
.instruction-illustration .microphone-top,
.instruction-illustration .sound-wave,
.instruction-illustration .final-ring,
.instruction-illustration .final-check,
.instruction-illustration .room-wall,
.instruction-illustration .room-floor,
.instruction-illustration .scan-line {
    position: absolute;
}

.stage-room .room-wall {
    inset: 18px 24px 68px;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(180deg, #fefefe 0%, #eef5fc 100%);
    border: 1px solid #dbe7f3;
}

.stage-room .room-floor {
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 64px;
    border-radius: 10px 10px 18px 18px;
    background: linear-gradient(180deg, #dfe9f4 0%, #d0dceb 100%);
}

.stage-room .window-box {
    width: 76px;
    height: 88px;
    right: 42px;
    top: 54px;
    border-radius: 14px;
    border: 1px solid #bfd3ea;
    background: linear-gradient(180deg, #ffffff 0%, #dcebfa 100%);
}

.stage-room .camera-chip,
.stage-desk .camera-chip {
    width: 56px;
    height: 56px;
    left: 46px;
    top: 96px;
    border-radius: 18px;
    background: linear-gradient(180deg, #0f6cbf 0%, #2d8cdb 100%);
    box-shadow: 0 10px 24px rgba(15,108,191,0.22);
}

.stage-room .camera-chip::after,
.stage-desk .camera-chip::after {
    content: '';
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
}

.stage-room .scan-line,
.stage-desk .scan-line.horizontal {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(15,108,191,0) 0%, rgba(15,108,191,0.75) 50%, rgba(15,108,191,0) 100%);
}

.stage-room .scan-line.left {
    width: 160px;
    left: 82px;
    top: 110px;
    transform-origin: left center;
    animation: sweepRoomLeft 2.8s ease-in-out infinite;
}

.stage-room .scan-line.right {
    width: 170px;
    left: 82px;
    top: 138px;
    transform-origin: left center;
    animation: sweepRoomRight 2.8s ease-in-out infinite;
}

.stage-desk .desk-surface {
    left: 42px;
    right: 42px;
    bottom: 34px;
    height: 96px;
    border-radius: 22px;
    background: linear-gradient(180deg, #eef3f8 0%, #dae4ef 100%);
    border: 1px solid #d4dfe9;
}

.stage-desk .desk-items span {
    display: block;
    top: 118px;
    width: 54px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #d6e0ea;
}

.stage-desk .desk-items span:nth-child(1) { left: 148px; }
.stage-desk .desk-items span:nth-child(2) { left: 220px; width: 78px; }
.stage-desk .desk-items span:nth-child(3) { left: 316px; width: 46px; }

.stage-desk .scan-line.horizontal {
    left: 118px;
    right: 34px;
    top: 122px;
    animation: scanDesk 2.2s ease-in-out infinite;
}

.stage-framing .frame-outline {
    inset: 26px 36px;
    border-radius: 26px;
    border: 2px dashed #a8c5e5;
}

.stage-framing .person-head {
    width: 58px;
    height: 58px;
    left: 92px;
    top: 70px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f8c99f 0%, #e9ae7f 100%);
}

.stage-framing .person-body {
    width: 96px;
    height: 90px;
    left: 72px;
    top: 126px;
    border-radius: 22px 22px 14px 14px;
    background: linear-gradient(180deg, #356da4 0%, #234f7a 100%);
}

.stage-framing .desk-mini {
    width: 140px;
    height: 22px;
    right: 54px;
    bottom: 66px;
    border-radius: 999px;
    background: #c7d6e6;
}

.stage-framing .screen-mini {
    width: 108px;
    height: 70px;
    right: 70px;
    top: 74px;
    border-radius: 14px;
    border: 1px solid #bfd4ea;
    background: linear-gradient(180deg, #ffffff 0%, #e8f3fe 100%);
    box-shadow: 0 10px 18px rgba(34,77,122,0.08);
}

.stage-framing .frame-outline::after {
    content: '';
    position: absolute;
    inset: 16px;
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(15,108,191,0) 0%, rgba(15,108,191,0.06) 50%, rgba(15,108,191,0) 100%);
    animation: pulseFrame 2.4s ease-in-out infinite;
}

.stage-phrase .microphone-stick {
    width: 14px;
    height: 88px;
    left: 50%;
    top: 96px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, #8091a3 0%, #5c6d7e 100%);
}

.stage-phrase .microphone-top {
    width: 80px;
    height: 92px;
    left: 50%;
    top: 46px;
    transform: translateX(-50%);
    border-radius: 38px;
    background: linear-gradient(180deg, #1f2937 0%, #475569 100%);
    box-shadow: 0 16px 26px rgba(31,41,55,0.18);
}

.stage-phrase .sound-wave {
    border: 3px solid rgba(15,108,191,0.3);
    border-radius: 50%;
    left: 50%;
    top: 92px;
    transform: translate(-50%, -50%);
    animation: pulseWave 2.1s ease-out infinite;
}

.stage-phrase .wave-a { width: 110px; height: 110px; }
.stage-phrase .wave-b { width: 150px; height: 150px; animation-delay: .35s; }
.stage-phrase .wave-c { width: 190px; height: 190px; animation-delay: .7s; }

.stage-final .final-ring {
    width: 124px;
    height: 124px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #f5fcf1 0%, #e3f3d9 72%, #d6ebc8 100%);
    border: 1px solid #c8e4b8;
    animation: pulseDone 2.2s ease-in-out infinite;
}

.stage-final .final-check {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 58px;
    line-height: 1;
    color: #2f7a14;
    font-weight: 800;
}

.result-answer-value {
    white-space: normal;
}

.result-mark-actions .btn.active-mark {
    border-color: #7cb7ec;
    background: #eef6fd;
}

.result-mark-actions .btn.active-mark.wrong-mark {
    border-color: #efbcbc;
    background: #fff4f4;
}

.save-note[data-tone="success"] {
    color: var(--success);
}

.save-note[data-tone="error"] {
    color: var(--danger);
}

.save-note[data-tone="pending"] {
    color: var(--brand);
}

@keyframes sweepRoomLeft {
    0%, 100% { transform: rotate(-18deg) scaleX(0.85); opacity: .55; }
    50% { transform: rotate(18deg) scaleX(1); opacity: 1; }
}

@keyframes sweepRoomRight {
    0%, 100% { transform: rotate(16deg) scaleX(0.82); opacity: .45; }
    50% { transform: rotate(-14deg) scaleX(1); opacity: 1; }
}

@keyframes scanDesk {
    0%, 100% { transform: translateY(-18px); opacity: .5; }
    50% { transform: translateY(46px); opacity: 1; }
}

@keyframes pulseFrame {
    0%, 100% { transform: translateX(-12px); opacity: .25; }
    50% { transform: translateX(14px); opacity: .75; }
}

@keyframes pulseWave {
    0% { opacity: .85; transform: translate(-50%, -50%) scale(.72); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
}

@keyframes pulseDone {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(63,139,24,0.16); }
    50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 0 18px rgba(63,139,24,0); }
}

@media (max-width: 1100px) {
    .preflight-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .instruction-stage-card {
        min-height: auto;
    }

    .instruction-illustration {
        height: 210px;
    }

    .preflight-head {
        flex-direction: column;
    }
}

/* v6 refinements */
.question-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.question-nav-card {
    appearance: none;
    width: 100%;
    min-height: 88px;
    padding: 14px 16px;
    border: 1px solid #cad5e2;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset;
}

.question-nav-card:hover {
    transform: translateY(-1px);
    border-color: #9fc4e8;
    box-shadow: 0 10px 18px rgba(16, 24, 40, 0.06);
}

.question-nav-card.current {
    border-color: #0f6cbf;
    background: linear-gradient(180deg, #f4f9ff 0%, #e9f3fe 100%);
    box-shadow: inset 0 0 0 1px #0f6cbf;
}

.question-nav-card.answered {
    border-color: #c8dfb8;
    background: linear-gradient(180deg, #fbfff8 0%, #f2faec 100%);
}

.question-nav-title {
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--text);
    line-height: 1.2;
}

.question-nav-state {
    font-size: 0.88rem;
    color: var(--muted);
}

.preflight-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
}

.preflight-main,
.preflight-side {
    padding: 24px;
}

.preflight-head {
    margin-bottom: 14px;
}

.preflight-head h2 {
    margin-bottom: 8px;
}

.instruction-stage-card {
    min-height: 0;
    padding: 20px;
}

.preflight-stage-card {
    background: #ffffff;
}

.preflight-stage-label {
    margin-bottom: 4px;
    font-size: .85rem;
    letter-spacing: .01em;
}

.preflight-stage-copy {
    font-size: 0.98rem;
    line-height: 1.55;
}

.preflight-runtime-note {
    margin-top: 14px;
    padding: 12px 14px;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 600;
    background: #f9fbfd;
}

.preflight-checklist {
    gap: 10px;
}

.preflight-item {
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
}

.preflight-item-title {
    font-size: .96rem;
    line-height: 1.35;
}

.preflight-item-sub {
    font-size: .85rem;
    line-height: 1.4;
}

.preflight-note-box {
    margin-top: 14px;
    padding: 14px;
    font-size: .93rem;
    line-height: 1.5;
}

.instruction-illustration {
    height: 240px;
    margin-top: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f8fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.instruction-illustration .scene-card {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instruction-illustration .illustration-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.svg-scan-left,
.svg-scan-right,
.svg-scan-line,
.svg-bob,
.svg-pulse,
.svg-wave {
    transform-origin: center;
}

.svg-scan-left {
    animation: sweepRoomLeft 2.8s ease-in-out infinite;
}

.svg-scan-right {
    animation: sweepRoomRight 2.8s ease-in-out infinite;
}

.svg-scan-line {
    animation: scanDesk 2.1s ease-in-out infinite;
}

.svg-bob {
    animation: iconBob 1.8s ease-in-out infinite;
}

.svg-bob.delay-2 { animation-delay: .2s; }
.svg-bob.delay-3 { animation-delay: .4s; }

.svg-pulse {
    animation: pulseFrame 2.4s ease-in-out infinite;
}

.svg-wave {
    animation: pulseWave 2.1s ease-out infinite;
}

.svg-wave.delay-2 { animation-delay: .35s; }
.svg-wave.delay-3 { animation-delay: .7s; }

.scene-card-phrase {
    padding-top: 18px;
}

.phrase-bubble {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 420px);
    padding: 12px 16px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #cfe0f1;
    box-shadow: 0 8px 16px rgba(16, 24, 40, 0.06);
    color: #14395e;
    font-weight: 800;
    font-size: 0.96rem;
    line-height: 1.45;
    text-align: center;
}

.phrase-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 18px;
    height: 18px;
    transform: translateX(-50%) rotate(45deg);
    background: #ffffff;
    border-right: 1px solid #cfe0f1;
    border-bottom: 1px solid #cfe0f1;
}

.formula-block {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 14px 0 6px;
    padding: 18px 20px;
    text-align: center;
}

.formula-block .katex-display {
    margin: 0;
}

@keyframes iconBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

@media (max-width: 960px) {
    .preflight-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .question-grid {
        grid-template-columns: 1fr;
    }

    .question-nav-card {
        min-height: 78px;
        border-radius: 16px;
    }

    .instruction-illustration {
        height: 220px;
        padding: 14px;
    }

    .phrase-bubble {
        width: calc(100% - 12px);
        font-size: .9rem;
        padding: 10px 12px;
    }
}


/* v7 fixes */
.result-answer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.result-answer-box-correct {
    background: #f8fbff;
    border-color: #cfe0f1;
}

.result-empty-answer {
    color: var(--muted);
    font-style: italic;
}

.frame-lock-note {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: min(94%, 430px);
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.96);
    border: 1px solid #cfe0f1;
    box-shadow: 0 8px 16px rgba(16, 24, 40, 0.06);
    color: #14395e;
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.4;
    text-align: center;
}

.scene-card-framing {
    padding-top: 24px;
}

@media (max-width: 820px) {
    .result-answer-grid {
        grid-template-columns: 1fr;
    }

    .frame-lock-note {
        font-size: 0.86rem;
        width: min(96%, 360px);
    }
}


/* v8 results visibility fixes */
.result-question-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
}

.result-question-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfe;
}

.result-question-head h3 {
    margin: 4px 0 0;
}

.result-question-body {
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
}

.result-answer-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 24px;
}

.result-answer-panel {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    padding: 16px 18px;
}

.result-answer-panel-correct {
    background: #f8fbff;
    border-color: #cfe0f1;
}

.result-answer-label {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
}

.result-answer-value {
    min-height: 28px;
    white-space: pre-wrap;
    line-height: 1.65;
    color: var(--text);
}

.result-answer-value .katex-display {
    margin: 0.35em 0;
}

.result-mark-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 24px 24px;
}

@media (max-width: 820px) {
    .result-question-head,
    .result-mark-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .result-question-head,
    .result-question-body,
    .result-answer-stack,
    .result-mark-actions {
        padding-left: 18px;
        padding-right: 18px;
    }
}