.wpmock {
    --wpmock-ink: #1f2933;
    --wpmock-muted: #536471;
    --wpmock-line: #d2dce2;
    --wpmock-panel: #ffffff;
    --wpmock-soft: #f4f7f8;
    --wpmock-accent: #087f8c;
    --wpmock-accent-dark: #056370;
    --wpmock-button: #4f7f94;
    --wpmock-button-dark: #386577;
    --wpmock-warn: #b45309;
    color: var(--wpmock-ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: 0 auto;
    max-width: 1180px;
}

.wpmock *,
.wpmock *::before,
.wpmock *::after {
    box-sizing: border-box;
}

.wpmock [hidden] {
    display: none !important;
}

.wpmock__intro,
.wpmock__runner,
.wpmock__report-card {
    background: var(--wpmock-panel);
    border: 1px solid var(--wpmock-line);
    border-radius: 4px;
    padding: 28px 32px;
}

.wpmock__eyebrow {
    color: var(--wpmock-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.wpmock h2,
.wpmock h3 {
    color: var(--wpmock-ink);
    line-height: 1.2;
    margin: 0 0 12px;
}

.wpmock p {
    color: var(--wpmock-muted);
    line-height: 1.6;
}

.wpmock__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.wpmock__meta span {
    background: var(--wpmock-soft);
    border: 1px solid var(--wpmock-line);
    border-radius: 999px;
    color: var(--wpmock-ink);
    display: inline-flex;
    font-size: 0.92rem;
    padding: 6px 12px;
}

.wpmock__button {
    align-items: center;
    background: var(--wpmock-button);
    border: 1px solid var(--wpmock-button-dark);
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px;
    text-transform: none;
}

.wpmock .wpmock__button {
    background: var(--wpmock-button) !important;
    border-color: var(--wpmock-button-dark) !important;
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    text-transform: none !important;
}

.wpmock__button:hover,
.wpmock__button:focus {
    background: var(--wpmock-button-dark);
    border-color: var(--wpmock-button-dark);
    color: #ffffff;
}

.wpmock__button:disabled {
    background: #e5e9ec;
    border-color: #c9d2d8;
    color: #88949b;
    cursor: not-allowed;
    opacity: 1;
}

.wpmock__button--secondary {
    background: #eef3f5;
    border-color: #bdccd4;
    color: #2f6277;
}

.wpmock .wpmock__button--secondary {
    background: #eef3f5 !important;
    border-color: #bdccd4 !important;
    color: #2f6277 !important;
}

.wpmock__button--secondary:hover,
.wpmock__button--secondary:focus {
    background: var(--wpmock-soft);
    color: var(--wpmock-accent-dark);
}

.wpmock__button--submit {
    background: #315f78;
    border-color: #21495f;
}

.wpmock .wpmock__button--submit {
    background: #315f78 !important;
    border-color: #21495f !important;
    color: #ffffff !important;
}

.wpmock .wpmock__button:disabled {
    background: #e5e9ec !important;
    border-color: #c9d2d8 !important;
    color: #88949b !important;
}

.wpmock__runner {
    display: none;
}

.wpmock__runner.is-active {
    display: block;
}

.wpmock.is-reporting .wpmock__runner {
    display: none !important;
}

.wpmock__topbar {
    align-items: center;
    border-bottom: 1px solid var(--wpmock-line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: -4px 0 0;
    padding-bottom: 16px;
}

.wpmock__topbar span {
    color: var(--wpmock-muted);
    display: block;
    font-size: 0.9rem;
    margin-top: 3px;
}

.wpmock__timer {
    background: var(--wpmock-soft);
    border: 1px solid var(--wpmock-line);
    border-radius: 4px;
    color: var(--wpmock-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    min-width: 96px;
    padding: 8px 12px;
    text-align: center;
}

.wpmock__timer-progress {
    background: #e8eef1;
    border-radius: 999px;
    height: 8px;
    margin: 14px 0 28px;
    overflow: hidden;
}

.wpmock__timer-progress span {
    background: var(--wpmock-accent);
    display: block;
    height: 100%;
    transition: width 0.25s linear;
    width: 100%;
}

.wpmock__timer.is-warning {
    border-color: var(--wpmock-warn);
    color: var(--wpmock-warn);
}

.wpmock__question {
    border: 0;
    display: none;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
}

.wpmock__question.is-active {
    display: block;
}

.wpmock__question legend {
    color: var(--wpmock-ink);
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 18px;
    text-align: center;
    width: 100%;
}

.wpmock__question legend span {
    color: var(--wpmock-accent);
    display: block;
    font-size: 0.96rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.wpmock__prompt {
    background: var(--wpmock-soft);
    border: 1px solid var(--wpmock-line);
    border-radius: 4px;
    font-size: 1.06rem;
    line-height: 1.65;
    margin: 0 0 22px;
    padding: 22px 26px;
}

.wpmock__prompt p:last-child {
    margin-bottom: 0;
}

.wpmock__media {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
}

.wpmock__source-audio {
    display: none;
}

.wpmock__audio-status {
    align-items: center;
    background: var(--wpmock-soft);
    border: 1px solid var(--wpmock-line);
    border-radius: 4px;
    color: var(--wpmock-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 0 18px;
    padding: 12px 14px;
    text-align: center;
}

.wpmock__audio-play {
    font-size: 0.9rem;
    padding: 8px 12px;
}

.wpmock__media img {
    border: 1px solid var(--wpmock-line);
    border-radius: 8px;
    display: block;
    height: auto;
    max-height: 420px;
    max-width: 100%;
    object-fit: contain;
}

.wpmock__missing-media {
    background: #fff8e6;
    border: 1px solid #ecd28b;
    border-radius: 4px;
    color: #75540a;
    padding: 12px 14px;
}

.wpmock__missing-inline {
    color: #8a4f08;
    font-style: italic;
}

.wpmock input[type="text"],
.wpmock select,
.wpmock textarea {
    border: 1px solid #c7d4d7;
    border-radius: 4px;
    color: var(--wpmock-ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 11px 12px;
    width: 100%;
}

.wpmock input[type="text"]:focus,
.wpmock select:focus,
.wpmock textarea:focus {
    border-color: var(--wpmock-accent);
    box-shadow: 0 0 0 2px rgba(8, 127, 140, 0.14);
    outline: 0;
}

.wpmock textarea {
    min-height: 150px;
    resize: vertical;
}

.wpmock__response input[type="text"] {
    min-height: 64px;
}

.wpmock__fib-passage {
    line-height: 1.85;
}

.wpmock select.wpmock__fib-select {
    display: inline-block;
    margin: 0 4px;
    min-width: 150px;
    padding: 5px 28px 5px 8px;
    vertical-align: baseline;
    width: auto;
}

.wpmock__blank-input {
    display: inline-block;
    margin: 0 4px;
    max-width: 190px;
    min-width: 120px;
    padding: 5px 8px !important;
    vertical-align: baseline;
    width: auto !important;
}

.wpmock__drag-fib {
    display: grid;
    gap: 18px;
}

.wpmock__drag-blank {
    align-items: center;
    background: #f8fbfc;
    border: 1px dashed #9bb5bb;
    border-radius: 6px;
    display: inline-flex;
    justify-content: center;
    margin: 0 4px;
    min-height: 38px;
    min-width: 128px;
    padding: 3px 8px;
    vertical-align: middle;
}

.wpmock__drag-blank.is-filled {
    background: #eef8f7;
    border-color: var(--wpmock-accent);
    border-style: solid;
}

.wpmock__drag-blank.is-over,
.wpmock__word-bank.is-over {
    box-shadow: 0 0 0 3px rgba(8, 127, 140, 0.16);
}

.wpmock__drag-blank-text {
    color: var(--wpmock-muted);
    font-size: 0.9rem;
}

.wpmock__word-bank {
    align-content: start;
    align-items: center;
    background: #f6f8f9;
    border: 1px solid var(--wpmock-border);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 70px;
    padding: 12px;
}

.wpmock__word-token {
    background: #ffffff;
    border: 1px solid #b9cdd1;
    border-radius: 999px;
    color: var(--wpmock-ink);
    cursor: grab;
    font: inherit;
    min-height: 34px;
    padding: 6px 14px;
}

.wpmock__word-token:active {
    cursor: grabbing;
}

.wpmock__word-token.is-selected {
    background: var(--wpmock-accent);
    border-color: var(--wpmock-accent);
    color: #ffffff;
}

.wpmock__word-token.is-dragging {
    opacity: 0.55;
}

.wpmock__instructions {
    color: var(--wpmock-muted);
    margin: 0 0 14px;
}

.wpmock__item-timer {
    display: grid;
    gap: 6px;
    margin: 0 0 18px;
}

.wpmock__item-timer span {
    color: var(--wpmock-muted);
    display: flex;
    font-size: 0.94rem;
    justify-content: space-between;
}

.wpmock__item-timer strong {
    color: var(--wpmock-ink);
    font-variant-numeric: tabular-nums;
}

.wpmock__item-timer div {
    background: #e8eef1;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.wpmock__item-timer i {
    background: var(--wpmock-accent);
    display: block;
    height: 100%;
    transition: width 0.2s linear;
    width: 100%;
}

.wpmock__response {
    display: grid;
    gap: 10px;
}

.wpmock__editbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wpmock__editbar button {
    background: #eef3f5;
    border: 1px solid #b9c8d0;
    border-radius: 3px;
    color: #273947;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    min-height: 32px;
    padding: 5px 14px;
}

.wpmock__editbar button:hover,
.wpmock__editbar button:focus {
    background: #dfe9ed;
}

.wpmock__editbar span {
    color: var(--wpmock-muted);
    margin-left: auto;
}

.wpmock__choices {
    display: grid;
    gap: 10px;
}

.wpmock__choices label {
    align-items: flex-start;
    border: 1px solid var(--wpmock-line);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 12px;
}

.wpmock__choices label:has(input:checked) {
    border-color: var(--wpmock-accent);
    box-shadow: inset 0 0 0 1px var(--wpmock-accent);
}

.wpmock__reorder {
    display: grid;
    gap: 12px;
}

.wpmock__reorder label {
    align-items: center;
    border: 1px solid var(--wpmock-line);
    border-radius: 4px;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 90px;
    padding: 12px;
}

.wpmock__highlight {
    background: var(--wpmock-soft);
    border: 1px solid var(--wpmock-line);
    border-radius: 4px;
    font-size: 1.06rem;
    line-height: 2.35;
    padding: 20px 22px;
}

.wpmock__highlight label {
    display: inline-flex;
    margin: 0 4px 6px 0;
}

.wpmock__highlight input {
    position: absolute;
    opacity: 0;
}

.wpmock__highlight span {
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 3px 6px;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.wpmock__highlight span:hover,
.wpmock__highlight input:focus + span {
    border-color: #89b7c0;
    box-shadow: 0 0 0 2px rgba(8, 127, 140, 0.12);
}

.wpmock__highlight input:checked + span,
.wpmock__highlight-token.is-selected span {
    background: #ffe066;
    border-color: #b88700;
    box-shadow: inset 0 -2px 0 #d59600, 0 0 0 1px rgba(184, 135, 0, 0.2);
    color: #1f2933;
    font-weight: 700;
}

.wpmock__speaking {
    border: 1px dashed #abc0c5;
    border-radius: 8px;
    display: grid;
    gap: 16px;
    padding: 16px;
}

.wpmock__speaking-timers {
    display: grid;
    gap: 12px;
}

.wpmock__speaking-timer {
    display: grid;
    gap: 6px;
}

.wpmock__speaking-timer span {
    color: var(--wpmock-muted);
    display: flex;
    font-size: 0.94rem;
    justify-content: space-between;
}

.wpmock__speaking-timer strong {
    color: var(--wpmock-ink);
    font-variant-numeric: tabular-nums;
}

.wpmock__speaking-timer div {
    background: #e8eef1;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.wpmock__speaking-timer i {
    background: var(--wpmock-accent);
    display: block;
    height: 100%;
    transition: width 0.2s linear;
    width: 100%;
}

.wpmock__speaking-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.wpmock__speaking .is-recording {
    background: #a73521;
}

.wpmock__speaking audio {
    margin-top: 12px;
    width: 100%;
}

.wpmock__actions {
    border-top: 1px solid var(--wpmock-line);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 18px;
}

.wpmock__report {
    margin-top: 18px;
}

.wpmock__score {
    color: var(--wpmock-accent);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    margin: 10px 0;
}

.wpmock__section-report {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 18px 0;
    padding: 0;
}

.wpmock__section-report li {
    align-items: center;
    background: var(--wpmock-soft);
    border: 1px solid var(--wpmock-line);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
}

.wpmock__note {
    font-size: 0.92rem;
}

.wpmock__error,
.walnut-pte-mock-error {
    background: #fff3ef;
    border: 1px solid #f1b9a6;
    border-radius: 6px;
    color: #7a2c16;
    padding: 12px;
}

@media (max-width: 680px) {
    .wpmock {
        margin: 16px 0;
    }

    .wpmock__intro,
    .wpmock__runner,
    .wpmock__report-card {
        padding: 18px;
    }

    .wpmock__topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .wpmock__timer {
        width: 100%;
    }

    .wpmock__actions {
        flex-direction: column-reverse;
    }

    .wpmock__button {
        width: 100%;
    }
}