.quiz-main { padding: clamp(36px, 7vw, 80px) 0; background: radial-gradient(900px 420px at 80% 0%, rgba(210, 167, 90, .12), transparent 60%), linear-gradient(180deg, var(--ink-2), var(--ink)); min-height: 72vh; }
.quiz-card { max-width: 760px; }
.quiz-intro { margin-bottom: 22px; }
.quiz-progress-wrap { display: grid; gap: 10px; margin-bottom: 28px; font: 700 .8rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.quiz-progress { height: 6px; border-radius: 999px; background: var(--ink-3); overflow: hidden; }
.quiz-progress span { display: block; height: 100%; width: 25%; background: var(--accent); border-radius: inherit; transition: width .25s ease; }
#quiz-stage h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); outline: none; }
.quiz-answers { display: grid; gap: 12px; margin-top: 24px; }
.answer-option { width: 100%; min-height: 64px; padding: 16px 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-2); color: var(--text); font: 600 1.02rem/1.35 var(--sans); text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.answer-option:hover:not(:disabled) { border-color: var(--accent); transform: translateX(2px); }
.answer-option.is-selected { border-color: var(--accent); background: rgba(210, 167, 90, .16); }
.answer-option:disabled:not(.is-selected) { opacity: .55; }
.quiz-back { margin-top: 22px; padding: 8px 0; border: 0; background: none; color: var(--muted); font: 600 .95rem/1 var(--sans); cursor: pointer; }
.quiz-back:hover { color: var(--text); }
.quiz-result { display: grid; justify-items: start; }
.quiz-cover { width: 120px; border-radius: 4px; margin-bottom: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.quiz-result .btn { margin-top: 6px; }
.quiz-fallback { margin-top: 18px; color: var(--muted); font-size: .95rem; }