:root { color-scheme: light; --ink: #173b42; --muted: #547078; --paper: #f2f7f5; --line: #cbdcd8; --teal: #087e82; --coral: #bd4f3b; --gold: #e5b34b; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font: 16px/1.55 "Avenir Next", Avenir, "Segoe UI", sans-serif; }
.test-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px clamp(20px, 5vw, 72px); background: #123f46; color: #fff; }
.wordmark { color: #fff; font-size: 18px; font-weight: 800; text-decoration: none; }
.back-link { color: #d7f2e8; text-decoration: underline; text-underline-offset: 3px; }
.test-main { width: min(920px, calc(100% - 32px)); margin: 40px auto 64px; }
.test-intro { padding: clamp(22px, 5vw, 46px); background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--teal); }
.eyebrow { margin: 0 0 8px; color: var(--teal); font-size: 12px; font-weight: 800; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(28px, 6vw, 42px); line-height: 1.12; }
.test-intro > p:not(.eyebrow) { max-width: 640px; color: var(--muted); }
.test-selectors { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto; align-items: end; gap: 14px; margin-top: 24px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
select, button { min-height: 44px; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
select { width: 100%; padding: 0 10px; background: #fff; color: var(--ink); }
button { padding: 0 16px; background: #fff; color: var(--ink); cursor: pointer; font-weight: 700; }
button:hover { border-color: var(--teal); }
.primary-button { border-color: var(--teal); background: var(--teal); color: #fff; }
.test-workspace { margin-top: 20px; }
.empty-state, .question-panel, .result-panel { display: grid; gap: 8px; padding: 24px; background: #fff; border: 1px solid var(--line); }
.empty-state span, .question-count, .feedback { color: var(--muted); }
.question-panel h2, .result-panel h2 { margin: 0; font-size: 22px; }
.question-count { margin: 0; font-size: 13px; font-weight: 700; }
.answer-list { display: grid; gap: 8px; margin: 8px 0; }
.answer-option { min-height: 48px; text-align: left; }
.answer-option[aria-pressed="true"] { border-color: var(--teal); background: #e5f4f0; }
.feedback { min-height: 24px; margin: 0; }
.feedback.correct { color: #16734c; }
.feedback.incorrect { color: var(--coral); }
.question-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.progress-track { height: 8px; overflow: hidden; background: #e6eeeb; }
.progress-bar { height: 100%; width: 0; background: var(--gold); transition: width .25s ease; }
.result-score { margin: 0; color: var(--teal); font-size: 28px; font-weight: 800; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (max-width: 640px) { .test-header { padding: 14px 16px; } .test-main { margin-top: 18px; } .test-selectors { grid-template-columns: 1fr; } .primary-button { width: 100%; } }