.course-test-dialog {
    background: #fff;
    border: 1px solid #e0e8f5;
    border-radius: 1rem;
    color: #101450;
    margin: auto;
    max-height: calc(100dvh - 3rem);
    padding: 0;
    width: min(75rem, calc(100vw - 2.5rem));
    box-shadow: 0 30px 100px rgb(15 23 42 / 30%);
}
.course-test-dialog::backdrop { background: rgb(38 53 78 / 55%); backdrop-filter: blur(5px); }
.course-test-dialog [hidden] { display: none !important; }
.course-test-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; min-height: 37rem; }
.course-test-main { display: flex; flex-direction: column; min-width: 0; }
.course-test-header { align-items: center; border-bottom: 1px solid #e0e8f5; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 1.75rem; padding: 1.75rem 0 1.5rem; }
.course-test-icon { align-items: center; border: 1px solid #d8e3f7; border-radius: .75rem; color: #0866ff; display: flex; flex-shrink: 0; font-size: 1.75rem; height: 3.75rem; justify-content: center; width: 3.5rem; }
.course-test-heading { flex: 1 1 14rem; min-width: 0; }
.course-test-heading h2 { color: #101450; font-size: 1.7rem; font-weight: 800; letter-spacing: -.05em; margin: 0 0 .25rem; }
.course-test-heading p { color: #6878ab; font-size: .93rem; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.course-test-badges { display: flex; flex-wrap: wrap; gap: .55rem; }
.course-test-badges > span { align-items: center; background: #f6f9ff; border: 1px solid #d9e4f7; border-radius: .55rem; color: #6374a5; display: flex; font-size: .85rem; gap: .5rem; padding: .6rem .7rem; white-space: nowrap; }
.course-test-badges i { color: #101450; font-size: 1.05rem; }
.course-test-badges > span:last-child i { color: #f3124b; }
.course-test-close { align-items: center; background: transparent; border: 0; border-radius: .5rem; color: #6a79a9; cursor: pointer; display: flex; font-size: 1.4rem; height: 2.25rem; justify-content: center; position: absolute; right: 1rem; top: .8rem; width: 2.25rem; z-index: 2; }
.course-test-close:hover { background: #eaf0ff; color: #101450; }
.course-test-body { flex: 1; max-height: calc(100dvh - 12rem); min-height: 20rem; overflow-y: auto; padding: 1.5rem 1.75rem; }
.course-test-question-number { color: #6c7bac; font-size: 1rem; margin: 0 0 .7rem; }
.course-test-prompt { color: #101450; font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.35; margin: 0 0 1.3rem; outline: none; }
.course-test-options { display: grid; gap: .65rem; }
.course-test-option { align-items: center; background: #fff; border: 1px solid #d9e3f3; border-radius: .6rem; color: #101450; cursor: pointer; display: flex; font-size: 1rem; gap: 1.15rem; min-height: 3.6rem; padding: .8rem 1.15rem; text-align: left; transition: border-color .15s, background .15s; width: 100%; }
.course-test-option:hover:not(:disabled) { background: #f5f9ff; border-color: #0866ff; }
.course-test-option-indicator { align-items: center; border: 3px solid #7b88b3; border-radius: 50%; display: flex; flex-shrink: 0; height: 1.8rem; justify-content: center; width: 1.8rem; }
.course-test-option-indicator i { font-size: .8rem; }
.course-test-options--boolean { gap: 1.2rem; padding-top: .75rem; }
.course-test-options--boolean .course-test-option { font-size: 1.35rem; min-height: 6rem; }
.course-test-footer { display: flex; margin-top: 1.25rem; }
.course-test-footer .course-primary-button { border-radius: .6rem; gap: .75rem; justify-content: center; min-height: 3rem; padding: .75rem 1.2rem; width: 100%; }
.course-test-footer button:disabled { cursor: not-allowed; opacity: .45; }
.course-test-sidebar { background: #f8fbff; border-left: 1px solid #dfe8f5; padding: 2.7rem 1.35rem 1.5rem; }
.course-test-sidebar > h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 1rem; }
.course-test-counters { display: grid; gap: .45rem; grid-template-columns: 1fr 1fr; }
.course-test-counters > div { align-items: center; background: #fff; border: 1px solid #d8e3f5; border-radius: .6rem; display: flex; gap: .55rem; min-width: 0; padding: .65rem .5rem; }
.course-test-counter-icon { align-items: center; background: #0866ff; border-radius: 50%; color: #fff; display: flex; flex-shrink: 0; height: 1.75rem; justify-content: center; width: 1.75rem; }
.course-test-counter-icon--error { background: #fa164c; }
.course-test-counters strong { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.course-test-counters > div > span > span { color: #6a79a9; display: block; font-size: .8rem; margin-top: .15rem; }
.course-test-error-count { color: #f3124b; }
.course-test-time { border-bottom: 1px solid #dfe8f5; margin-top: 1.9rem; padding-bottom: 1.2rem; }
.course-test-time p { display: flex; flex-wrap: wrap; font-size: .85rem; font-weight: 750; gap: .5rem; justify-content: space-between; margin: 0 0 .5rem; }
.course-test-time progress { --countdown-color: #0866ff; appearance: none; border: 0; border-radius: 1rem; display: block; height: .6rem; overflow: hidden; width: 100%; }
.course-test-time progress[data-stage="warning"] { --countdown-color: #f97316; }
.course-test-time progress[data-stage="danger"] { --countdown-color: #ef4444; }
.course-test-time progress::-webkit-progress-bar { background: #dce5f2; }
.course-test-time progress::-webkit-progress-value { background: var(--countdown-color); border-radius: 1rem; }
.course-test-time progress::-moz-progress-bar { background: var(--countdown-color); border-radius: 1rem; }
.course-test-remaining { color: #6374a5; display: block; font-size: .8rem; margin-top: .65rem; }
.course-test-answered { color: #6a79a9; display: block; font-size: .75rem; margin-top: .5rem; }
.course-test-question-grid { display: grid; gap: .4rem; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 1.1rem; }
.course-test-question-tile { background: #fff; border: 1px solid #d6e1f4; border-radius: .5rem; color: #6575a6; cursor: pointer; font-size: .9rem; font-weight: 700; min-height: 2.5rem; padding: .35rem; }
.course-test-question-tile[aria-current] { border: 2px solid #0866ff; color: #0866ff; }
.course-test-question-tile:disabled { cursor: default; opacity: .8; }
.course-test-matching { display: grid; gap: 5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: relative; }
.course-test-matching-column { display: grid; grid-auto-rows: minmax(4rem, auto); gap: 1rem; min-width: 0; z-index: 1; }
.course-test-match { background: #fff; border: 1px solid #d3dff5; border-radius: .6rem; color: #101450; cursor: pointer; font-size: .92rem; line-height: 1.4; min-height: 4rem; overflow-wrap: anywhere; padding: .9rem 1.35rem; position: relative; text-align: left; }
.course-test-match--left { font-weight: 750; padding-right: 1.65rem; }
.course-test-match--right { padding-left: 1.65rem; }
.course-test-match[aria-pressed="true"] { background: #eff6ff; border-color: #0866ff; color: #0866ff; }
.course-test-match-dot { background: #fff; border: 2px solid #93add6; border-radius: 50%; height: .95rem; position: absolute; top: calc(50% - .475rem); width: .95rem; }
.course-test-match--left .course-test-match-dot { right: -.5rem; }
.course-test-match--right .course-test-match-dot { left: -.5rem; }
.course-test-match[aria-pressed="true"] .course-test-match-dot { background: #0866ff; border-color: #0866ff; }
.course-test-connections { height: 100%; inset: 0; overflow: visible; pointer-events: none; position: absolute; width: 100%; }
.course-test-connections path { fill: none; stroke-width: 2; }
.course-test-connections path[data-correct="true"] { stroke: #16a34a; }
.course-test-connections path[data-correct="false"] { stroke: #e11d48; }
.course-test-sentence { color: #101450; font-size: 1.35rem; line-height: 3.5rem; overflow-wrap: anywhere; padding: .8rem 0; }
.course-test-blank { background: #fff; border: 2px solid #d1ddf3; border-radius: .65rem; color: #101450; display: inline-block; font: inherit; font-size: 1.08rem; height: 3.5rem; line-height: normal; margin: .2rem .35rem; max-width: calc(100% - .7rem); padding: .7rem 1rem; vertical-align: middle; width: 14rem; }
.course-test-blank::placeholder { color: #98a6ca; }
.course-test-hint { color: #6e7eaf; font-size: .9rem; line-height: 1.6; margin: 1rem 0 0; }
.course-test-hint:empty { display: none; }
.course-test-feedback { border-radius: .6rem; font-size: .9rem; line-height: 1.6; margin-top: 1rem; padding: .85rem 1rem; }
.course-test-solutions { margin: .5rem 0 0; padding-left: 1.25rem; }
.course-test-error { background: #fff1f2; border: 1px solid #fecdd3; border-radius: .6rem; color: #be123c; font-size: .9rem; line-height: 1.5; margin-top: 1rem; padding: .8rem 1rem; }
.course-test-option[data-correct="true"], .course-test-match[data-correct="true"], .course-test-blank[data-correct="true"] { background: #f0fdf4; border-color: #22c55e; color: #15803d; }
.course-test-option[data-correct="false"], .course-test-match[data-correct="false"], .course-test-blank[data-correct="false"] { background: #fff1f2; border-color: #f43f5e; color: #be123c; }
.course-test-option[data-correct] .course-test-option-indicator { border-color: currentColor; color: #fff; }
.course-test-option[data-correct="true"] .course-test-option-indicator { background: #16a34a; }
.course-test-option[data-correct="false"] .course-test-option-indicator { background: #e11d48; }
.course-test-match[data-correct="true"] .course-test-match-dot { background: #16a34a; border-color: #16a34a; }
.course-test-match[data-correct="false"] .course-test-match-dot { background: #e11d48; border-color: #e11d48; }
.course-test-feedback[data-correct="true"] { background: #f0fdf4; color: #15803d; }
.course-test-feedback[data-correct="false"] { background: #fff1f2; color: #be123c; }
.course-test-question-tile[data-correct="true"] { background: #16a34a; border-color: #16a34a; color: #fff; }
.course-test-question-tile[data-correct="false"] { background: #e11d48; border-color: #e11d48; color: #fff; }
.course-test-question-tile[data-correct][aria-current] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0866ff; }
.course-test-result-intro { align-items: center; display: flex; gap: 1.3rem; margin-bottom: 1.5rem; }
.course-test-finished-icon { align-items: center; background: #e1fbef; border-radius: 50%; color: #098452; display: flex; flex: 0 0 4rem; font-size: 2rem; height: 4rem; justify-content: center; }
.course-test-result-intro h3 { font-size: 1.85rem; font-weight: 800; letter-spacing: -.035em; margin: 0 0 .25rem; outline: none; }
.course-test-result-intro p { color: #6374a5; line-height: 1.5; margin: 0; }
.course-test-result-metrics { display: grid; gap: .9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.6rem; }
.course-test-result-metric { align-items: center; border: 1px solid #d8e3f5; border-radius: .65rem; display: flex; gap: .85rem; min-width: 0; padding: 1rem; }
.course-test-metric-icon { align-items: center; background: #edf5ff; border-radius: 50%; color: #0866ff; display: flex; flex: 0 0 2.8rem; font-size: 1.7rem; height: 2.8rem; justify-content: center; }
.course-test-result-metric--error .course-test-metric-icon { background: #fff0f3; color: #f3124b; }
.course-test-result-metric strong { display: block; font-size: 1.65rem; font-weight: 800; line-height: 1.15; }
.course-test-result-metric > span > span { color: #6374a5; display: block; margin-top: .2rem; }
.course-test-review-heading { font-size: 1.3rem; font-weight: 800; letter-spacing: -.035em; margin: 0 0 .8rem; }
.course-test-mistakes { display: grid; gap: .65rem; }
.course-test-mistake { align-items: start; border: 1px solid #d8e3f5; border-radius: .65rem; display: flex; gap: 1.4rem; padding: 1rem; }
.course-test-mistake-number { background: #ffedf1; border: 0; border-radius: 50%; color: #cf123b; cursor: pointer; flex: 0 0 2.8rem; font-size: 1.1rem; font-weight: 800; height: 2.8rem; }
.course-test-mistake-number:hover { background: #ffe0e8; }
.course-test-mistake-detail { min-width: 0; overflow-wrap: anywhere; }
.course-test-mistake h5 { font-size: .95rem; font-weight: 800; line-height: 1.45; margin: 0 0 .5rem; }
.course-test-review-answer { align-items: baseline; color: #596b9b; display: flex; flex-wrap: wrap; font-size: .85rem; gap: .2rem .75rem; line-height: 1.5; margin-top: .3rem; }
.course-test-review-label { font-weight: 650; }
.course-test-review-answer--error .course-test-review-label { color: #f3124b; }
.course-test-review-answer--correct .course-test-review-label { color: #0866ff; }
.course-test-review-answer ul { flex: 1 1 10rem; list-style: none; margin: 0; padding: 0; }
.course-test-timeout-label { color: #cf123b; font-size: .8rem; margin: 0 0 .5rem; }
.course-test-perfect { background: #eafff4; border-radius: .65rem; color: #098452; margin: 0; padding: 1rem; }
.course-test-result-actions { border-top: 1px solid #dfe8f5; display: flex; flex-wrap: wrap; gap: .65rem; justify-content: flex-end; margin: 0 1.75rem; padding: 1rem 0 1.3rem; }
.course-test-result-actions button { border-radius: .6rem; font-size: .95rem; gap: .7rem; min-height: 3rem; padding: .75rem 1.3rem; }
.course-test-result-actions button:disabled { opacity: .45; }
.course-test-dialog--result .course-test-body { max-height: calc(100dvh - 18rem); }
.course-test-dialog--result .course-test-time { border-bottom: 0; border-top: 1px solid #dfe8f5; margin-top: .9rem; padding: .95rem 0 .4rem; }
.course-test-dialog--result .course-test-time p { font-size: 1rem; }
.course-test-dialog--result .course-test-question-tile[data-correct="true"] { background: #0866ff; border-color: #0866ff; }
.course-test-dialog--result .course-test-question-tile[data-correct="false"] { background: #ffe6eb; border-color: #ffb8c9; color: #ed1747; }
.course-test-dialog button:focus-visible { outline: 3px solid #0866ff; outline-offset: 3px; }
.course-test-dialog .course-test-blank:focus { outline: none; box-shadow: none; }
.course-test-dialog .course-test-blank:focus-visible:not([readonly]) { background: #f8fafc; }
.course-test-dialog button:disabled { cursor: default; }
@media (max-width: 850px) {
    .course-test-layout { grid-template-columns: minmax(0, 1fr); min-height: auto; }
    .course-test-header { margin: 0 1.2rem; padding: 1.4rem 0 1rem; padding-right: 1.5rem; }
    .course-test-heading h2 { font-size: 1.45rem; }
    .course-test-body { max-height: none; min-height: 14rem; padding: 1.2rem; }
    .course-test-sidebar { border-left: 0; border-top: 1px solid #dfe8f5; display: grid; gap: .8rem 1.2rem; grid-template-columns: 1fr 1fr; padding: 1.2rem; }
    .course-test-sidebar > h3 { display: none; }
    .course-test-time { border-bottom: 0; margin: 0; padding: 0; }
    .course-test-question-grid { grid-column: 1 / -1; grid-template-columns: repeat(10, minmax(0, 1fr)); margin: 0; }
    .course-test-footer { grid-column: 1 / -1; margin-top: 0; }
    .course-test-dialog--result .course-test-body { max-height: none; }
    .course-test-dialog--result .course-test-sidebar > h3 { display: block; grid-column: 1 / -1; margin: 0; }
    .course-test-dialog--result .course-test-time { border-top: 0; margin: 0; padding: 0; }
    .course-test-result-actions { margin: 0 1.2rem; }
}
@media (max-width: 520px) {
    .course-test-dialog { border-radius: .85rem; max-height: calc(100dvh - 1.25rem); width: calc(100vw - 1.25rem); }
    .course-test-icon { font-size: 1.4rem; height: 3rem; width: 2.75rem; }
    .course-test-heading { flex-basis: 9rem; }
    .course-test-header { gap: .65rem; }
    .course-test-badges { width: 100%; }
    .course-test-badges > span { font-size: .78rem; }
    .course-test-matching { gap: 1.8rem; }
    .course-test-match { font-size: .8rem; padding: .7rem; }
    .course-test-match--left { padding-right: .8rem; }
    .course-test-match--right { padding-left: .8rem; }
    .course-test-sidebar { gap: .85rem; grid-template-columns: 1fr; }
    .course-test-question-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .course-test-option { font-size: .92rem; gap: .75rem; padding: .75rem; }
    .course-test-sentence { font-size: 1.1rem; line-height: 3rem; }
    .course-test-blank { font-size: .95rem; height: 3rem; width: 11rem; }
    .course-test-result-intro { gap: .8rem; }
    .course-test-result-intro h3 { font-size: 1.5rem; }
    .course-test-result-metrics { gap: .5rem; }
    .course-test-result-metric { flex-direction: column; gap: .4rem; padding: .7rem .3rem; text-align: center; }
    .course-test-result-metric strong { font-size: 1.3rem; }
    .course-test-result-metric > span > span { font-size: .75rem; }
    .course-test-mistake { gap: .7rem; padding: .8rem; }
    .course-test-result-actions button { flex: 1 1 auto; justify-content: center; padding: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .course-test-dialog * { transition: none; scroll-behavior: auto; } }