.quiz-section { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0 96px; scroll-margin-top: 28px; }
.quiz-heading { display: grid; grid-template-columns: 1fr minmax(260px, 430px); align-items: end; gap: 40px; margin-bottom: 24px; }
.quiz-heading h2 { margin: 0; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.15; letter-spacing: -.04em; }
.quiz-heading p:last-child { margin: 0; color: var(--muted); }
.quiz-levels { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.quiz-levels button { min-height: 44px; min-width: 78px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--white); font-weight: 800; cursor: pointer; }
.quiz-levels button[aria-pressed="true"] { color: #fff; background: #00546f; border-color: #00546f; }
.quiz-panel { min-height: 388px; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.quiz-progress { display: flex; justify-content: space-between; gap: 16px; color: var(--teal-deep); font-size: 14px; font-weight: 800; }
.quiz-question { margin: 28px 0 22px; font-size: clamp(21px, 2.5vw, 29px); line-height: 1.4; }
.quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quiz-option { min-height: 62px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--white); text-align: left; font-size: 16px; line-height: 1.4; cursor: pointer; }
.quiz-option:hover:not(:disabled) { border-color: var(--teal); }
.quiz-option.is-correct { border-color: #28785e; background: #dff5e8; color: #144b3a; font-weight: 750; }
.quiz-option.is-incorrect { border-color: #ae5150; background: #fcebea; color: #772d32; }
.quiz-option:disabled { cursor: default; }
.quiz-feedback { min-height: 27px; margin: 20px 0 10px; font-weight: 750; }
.quiz-feedback.success { color: #176448; }
.quiz-feedback.error { color: #a03d3f; }
.quiz-next { min-height: 46px; padding: 9px 20px; border: 0; border-radius: 999px; color: #fff; background: #00546f; font-weight: 800; cursor: pointer; }
.quiz-next[hidden] { display: none; }
.quiz-section button:focus-visible { outline: 3px solid #e5a937; outline-offset: 3px; }
[data-theme="dark"] .quiz-levels button[aria-pressed="true"], [data-theme="dark"] .quiz-next { background: #176b80; }
[data-theme="dark"] .quiz-option.is-correct { background: #1c463a; color: #daf7e7; }
[data-theme="dark"] .quiz-option.is-incorrect { background: #5a3033; color: #ffe8e8; }
[data-theme="dark"] .quiz-feedback.success { color: #9ce7bd; }
[data-theme="dark"] .quiz-feedback.error { color: #ffadad; }
@media (max-width: 700px) { .quiz-heading { grid-template-columns: 1fr; gap: 10px; } .quiz-options { grid-template-columns: 1fr; } }
/* The six short mock exams share this focused test surface. */
.quiz-section { padding-top: 36px; }
.quiz-heading { align-items: center; }
.quiz-heading h2 { max-width: 650px; }
.quiz-levels { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.quiz-levels button { border-radius: 16px; min-height: 58px; font-size: 17px; transition: transform .16s, background .16s; }
.quiz-levels button:hover { transform: translateY(-2px); }
.quiz-levels button:nth-child(1)[aria-pressed=true] { background:#086d87; border-color:#086d87; }
.quiz-levels button:nth-child(2)[aria-pressed=true] { background:#2d7381; border-color:#2d7381; }
.quiz-levels button:nth-child(3)[aria-pressed=true] { background:#415eab; border-color:#415eab; }
.quiz-levels button:nth-child(4)[aria-pressed=true] { background:#784fa6; border-color:#784fa6; }
.quiz-levels button:nth-child(5)[aria-pressed=true] { background:#ae536e; border-color:#ae536e; }
.quiz-levels button:nth-child(6)[aria-pressed=true] { background:#b45e39; border-color:#b45e39; }
.quiz-panel { position:relative; overflow:hidden; background:var(--paper); border:1px solid var(--line); box-shadow:0 24px 65px rgba(4,54,72,.1); min-height:430px; }
.quiz-panel::before { content:''; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,#0d8299,#4e76c7,#a255a6,#dc8150); }
.quiz-progress { display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; justify-content:space-between; padding-top:8px; }
#quiz-timer { font-variant-numeric:tabular-nums; font-size:20px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:14px; padding:7px 14px; }
#quiz-timer.is-urgent { color:#b1383b; border-color:#b1383b; }
.quiz-track { height:7px; margin:18px 0 0; border-radius:99px; background:var(--line); overflow:hidden; }
.quiz-track span { display:block; width:0; height:100%; border-radius:99px; background:linear-gradient(90deg,#17a6aa,#6a65bf,#db785d); transition:width .25s; }
.quiz-eyebrow,.quiz-type { display:inline-block; font-size:13px; font-weight:850; letter-spacing:.06em; color:#176c82; }
.quiz-start { padding:clamp(35px,7vw,75px) 0 24px; max-width:680px; }
.quiz-start h3 { margin:12px 0; font-size:clamp(32px,5vw,56px); line-height:1.05; letter-spacing:-.04em; }
.quiz-start p { color:var(--muted); font-size:18px; line-height:1.65; }
.quiz-primary { min-height:52px; padding:12px 25px; border:0; border-radius:15px; background:#00546f; color:white; font:inherit; font-weight:800; cursor:pointer; margin-top:17px; }
.quiz-primary:hover,.quiz-next:hover { background:#06718e; }
.quiz-task { padding:26px 0 0; }
.quiz-task-top { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.quiz-type { padding:9px 13px; border-radius:99px; background:#dff4f3; }
.quiz-task-R .quiz-type { color:#574994; background:#eeeafb; }
.quiz-task-G .quiz-type { color:#975027; background:#ffeedf; }
.quiz-step { color:var(--muted); font-weight:750; font-variant-numeric:tabular-nums; }
.quiz-audio { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:18px; margin-top:23px; border:1px solid #abdfe3; border-radius:18px; background:#eafafa; color:#164658; }
.quiz-audio div { flex:1 1 170px; }
.quiz-audio strong,.quiz-audio small { display:block; }
.quiz-audio small { margin-top:3px; font-size:13px; }
.quiz-audio audio { width:min(100%,300px); height:42px; }
.quiz-sound-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:white; background:#147d96; font-size:25px; }
.quiz-passage { margin:22px 0 0; padding:19px 23px; border:0; border-left:4px solid #7568bb; border-radius:0 14px 14px 0; color:var(--ink); background:var(--white); font-size:19px; line-height:1.85; }
.quiz-question { margin:25px 0 20px; }
.quiz-option { display:flex; align-items:center; gap:14px; min-height:70px; border-radius:16px; transition:border-color .15s,transform .15s; }
.quiz-option:hover { transform:translateY(-2px); }
.quiz-option[aria-pressed=true] { border:2px solid #087b93; background:#e1f6f5; box-shadow:0 5px 18px rgba(0,100,128,.12); }
.quiz-letter { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px; background:#e7eff2; font-weight:850; color:#2b5f70; }
.quiz-option[aria-pressed=true] .quiz-letter { background:#087b93; color:#fff; }
.quiz-next { border-radius:15px; min-height:50px; }
.quiz-result { padding:29px 0 5px; }
.quiz-result-main { display:flex; gap:26px; align-items:center; margin:20px 0 26px; }
.quiz-result h3 { margin:0 0 7px; font-size:clamp(27px,4vw,42px); }
.quiz-result p { line-height:1.55; }
.quiz-score-ring { display:grid; place-content:center; text-align:center; flex:none; width:150px; height:150px; border-radius:50%; color:#07556e; background:var(--white); border:9px solid #59bcc3; box-shadow:0 0 0 5px #dbf5f2; }
.quiz-score-ring strong { font-size:43px; line-height:1; font-variant-numeric:tabular-nums; }
.quiz-score-ring small { font-size:13px; }
.quiz-score-note { color:var(--muted); font-size:14px; }
.quiz-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:27px; }
.quiz-stat { padding:17px; border:1px solid var(--line); background:var(--white); border-radius:15px; }
.quiz-stat strong,.quiz-stat span { display:block; }
.quiz-stat strong { font-size:25px; color:#096b82; }
.quiz-stat span { color:var(--muted); font-size:14px; }
.quiz-result h4 { font-size:21px; margin:0 0 12px; }
.quiz-reviews { display:grid; gap:9px; }
.quiz-review { background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.quiz-review.right { border-left:4px solid #269875; }
.quiz-review.wrong { border-left:4px solid #d17a5c; }
.quiz-review summary { display:flex; justify-content:space-between; gap:12px; padding:15px; cursor:pointer; }
.quiz-review summary strong { color:#176c82; }
.quiz-review.wrong summary strong { color:#ae5136; }
.quiz-review>div { padding:0 16px 16px; }
.quiz-review p { margin:8px 0; }
.quiz-review audio { max-width:100%; }
[data-theme=dark] .quiz-type { background:#1c5054; color:#b9eeea; }
[data-theme=dark] .quiz-task-R .quiz-type { background:#39325f; color:#dcd5ff; }
[data-theme=dark] .quiz-task-G .quiz-type { background:#60452f; color:#ffe2c7; }
[data-theme=dark] .quiz-audio { background:#133e4c; border-color:#386d78; color:#e7f6f9; }
[data-theme=dark] .quiz-option[aria-pressed=true] { background:#164b56; color:#fff; }
[data-theme=dark] .quiz-letter { background:#244551; color:#e0f5f6; }
[data-theme=dark] .quiz-score-ring { color:#dbfcf8; }
@media(max-width:700px) { .quiz-levels { grid-template-columns:repeat(3,1fr); } .quiz-panel { padding:22px; } .quiz-progress { gap:8px; } #quiz-score { order:3; width:100%; } .quiz-audio audio { width:100%; } .quiz-result-main { align-items:flex-start; } .quiz-score-ring { width:110px; height:110px; border-width:7px; } .quiz-score-ring strong { font-size:36px; } }
@media(max-width:420px) { .quiz-result-main { flex-direction:column; } .quiz-stats { gap:5px; } .quiz-stat { padding:10px; } .quiz-stat strong { font-size:21px; } }