.quiz-directory-hero { background:linear-gradient(180deg,#f4f9ff 0,#fff 100%); }
.quiz-hero-points { display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;color:var(--muted);font-weight:750; }
.quiz-hero-points span { display:inline-flex;align-items:center;gap:7px; }
.directory-count { min-height:1.5em;margin:0 0 18px;color:var(--muted);font-weight:700; }
.quiz-directory .quiz-card { display:flex;flex-direction:column;min-height:100%; }
.quiz-card h2 { font-size:1.35rem;line-height:1.25;margin:18px 0 9px; }
.quiz-card .arrow { margin-top:auto;padding-top:20px; }
.quiz-meta { display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 14px;color:var(--muted);font-size:.82rem;font-weight:750; }
.quiz-meta span { padding:5px 9px;background:#f1f6fb;border:1px solid var(--line);border-radius:999px; }
.quiz-card-progress { margin-top:2px;color:var(--muted);font-size:.82rem;font-weight:750; }
.mini-progress,.quiz-progress { height:7px;background:#e5edf5;border-radius:99px;overflow:hidden;margin-top:7px; }
.mini-progress i,.quiz-progress i { display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:inherit;transition:width .25s ease; }
.quiz-empty { padding:42px;text-align:center;background:#f7f9fc;border:1px dashed var(--line);border-radius:var(--radius); }
.quiz-empty h2 { margin-top:0; }
.quiz-empty p { color:var(--muted);margin-bottom:0; }
.quiz-heading { padding-bottom:24px; }
.quiz-heading h1 { font-size:clamp(2.3rem,5vw,4.2rem);margin:6px 0 10px; }
.quiz-title-row { display:flex;align-items:center;gap:18px;margin-top:18px; }
.quiz-title-row>.icon { width:64px;height:64px;flex:0 0 auto;font-size:1.4rem; }
.quiz-section { padding-top:22px; }
.quiz-section>.container { max-width:920px; }
.quiz-live-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:15px;overflow:hidden; }
.quiz-live-stats>div { padding:15px 18px;background:#fff; }
.quiz-live-stats span { display:block;color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em; }
.quiz-live-stats strong { display:block;margin-top:3px;font-size:1.2rem; }
.quiz-progress { height:9px;margin:13px 0 25px; }
.quiz-question-card { background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,5vw,42px);box-shadow:0 14px 40px rgba(29,55,84,.09); }
.question-kicker { display:flex;justify-content:space-between;gap:18px;color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em; }
.question-kicker span:last-child { color:var(--cyan);text-align:right; }
.quiz-question-card h2 { font-size:clamp(1.45rem,3.5vw,2rem);line-height:1.28;margin:17px 0 24px;letter-spacing:-.02em; }
.question-code,.quiz-explanation pre { margin:0 0 24px;padding:18px;background:#0b192a;color:#d6e7f8;border:1px solid #263e59;border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
.quiz-options { display:grid;gap:11px; }
.quiz-option { display:grid;grid-template-columns:38px 1fr;align-items:center;gap:13px;width:100%;padding:14px 16px;border:1px solid #cfdbe7;border-radius:12px;background:#fff;color:var(--text);font:inherit;font-weight:650;text-align:left;cursor:pointer;transition:.16s; }
.quiz-option:hover:not(:disabled),.quiz-option:focus-visible { border-color:#5795d2;background:#f2f8ff;transform:translateY(-1px);outline:none;box-shadow:0 0 0 3px rgba(23,105,194,.12); }
.quiz-option:disabled { cursor:default;opacity:1; }
.option-marker { width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#edf4fb;color:#315a83;font-weight:900; }
.quiz-option.correct { border-color:#2b9b69;background:#effaf5;color:#145b3b; }
.quiz-option.correct .option-marker { background:#21895c;color:#fff; }
.quiz-option.incorrect { border-color:#cf6262;background:#fff3f3;color:#792c2c; }
.quiz-option.incorrect .option-marker { background:#bd4545;color:#fff; }
.quiz-option.muted { opacity:.58; }
.quiz-explanation { margin-top:24px;padding:22px;border-radius:14px;border-left:5px solid; }
.quiz-explanation.is-correct { background:#effaf5;border-color:#21895c; }
.quiz-explanation.is-incorrect { background:#fff5f2;border-color:#d1654d; }
.answer-result { margin:0 0 6px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem; }
.quiz-explanation h3 { margin:0 0 7px;font-size:1.25rem; }
.quiz-explanation p { margin:8px 0;color:#31485e; }
.quiz-explanation pre { margin-top:16px;margin-bottom:14px; }
.quiz-explanation .takeaway { padding-top:12px;border-top:1px solid rgba(30,75,103,.15); }
.quiz-navigation { display:flex;justify-content:space-between;gap:12px;margin-top:28px; }
.quiz-navigation button:disabled { opacity:.45;cursor:not-allowed;transform:none; }
.quiz-utility { display:flex;justify-content:space-between;gap:20px;margin:15px 4px;color:var(--muted);font-size:.86rem; }
.text-button { border:0;background:none;color:#1769c2;font:inherit;font-weight:800;padding:0;cursor:pointer; }
.text-button:hover { text-decoration:underline; }
.quiz-results { text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,6vw,58px);box-shadow:0 14px 40px rgba(29,55,84,.09); }
.score-ring { --score:0deg;width:180px;height:180px;margin:22px auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--cyan) var(--score),#e5edf5 0);position:relative; }
.score-ring:before { content:"";position:absolute;inset:13px;background:#fff;border-radius:50%; }
.score-ring>div { position:relative;display:grid; }
.score-ring strong { font-size:2.6rem;line-height:1; }
.score-ring span { color:var(--muted);font-weight:750; }
.quiz-results h2 { font-size:clamp(2rem,5vw,3rem);margin:10px 0; }
.quiz-results>p { max-width:620px;margin:0 auto;color:var(--muted);font-size:1.08rem; }
.quiz-result-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px 0; }
.quiz-result-stats>div { padding:15px 10px;background:#f5f8fc;border:1px solid var(--line);border-radius:12px; }
.quiz-result-stats strong { display:block;font-size:1.45rem;color:var(--blue); }
.quiz-result-stats span { color:var(--muted);font-size:.8rem;font-weight:750; }
.quiz-results .actions { justify-content:center; }
.missed-review { margin-top:25px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius); }
.missed-review h2 { margin:0; }
.missed-review>p { color:var(--muted); }
.missed-review button { display:block;width:100%;padding:14px 16px;margin-top:10px;border:1px solid var(--line);border-radius:11px;background:#f8fafc;color:var(--text);text-align:left;cursor:pointer; }
.missed-review button:hover { border-color:#72a3d3;background:#f0f7ff; }
.missed-review button span { display:block;color:var(--muted);font-size:.78rem;font-weight:750; }
.missed-review button strong { display:block;margin-top:2px; }
.perfect-score { margin-top:22px;text-align:center; }
@media(max-width:760px){
  .quiz-live-stats { grid-template-columns:1fr 1fr; }
  .quiz-live-stats>div:last-child { grid-column:1/-1; }
  .quiz-title-row { align-items:flex-start; }
  .quiz-title-row>.icon { width:50px;height:50px; }
  .question-kicker,.quiz-utility { flex-direction:column;gap:6px; }
  .question-kicker span:last-child { text-align:left; }
  .quiz-result-stats { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .quiz-question-card { padding:20px 16px; }
  .quiz-option { grid-template-columns:32px 1fr;padding:12px 10px; }
  .option-marker { width:30px;height:30px; }
  .quiz-navigation { flex-direction:column-reverse; }
  .quiz-navigation .button { width:100%; }
  .quiz-results .actions { flex-direction:column; }
  .quiz-results .button { width:100%; }
}
@media(prefers-reduced-motion:reduce){.quiz-option,.mini-progress i,.quiz-progress i{transition:none}}