.quiz-shell{ max-width:720px; margin:0 auto; padding:30px 0 70px;}
.quiz-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.quiz-progress{ flex:1; min-width:160px; height:8px; background:var(--parchment-2); border-radius:999px; overflow:hidden;}
.quiz-progress > div{ height:100%; background:var(--gold); width:0%; transition:width .25s ease;}
.quiz-score{ font-family:var(--mono); font-size:0.9rem; color:var(--teal);}

.quiz-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;}
.quiz-qnum{ font-family:var(--mono); font-size:0.75rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.1em;}
.quiz-question{ font-family:var(--serif); font-size:1.4rem; margin:10px 0 22px; color:var(--teal-deep);}
.quiz-options{ display:grid; gap:10px;}
.opt-btn{
  text-align:left; padding:14px 16px; border-radius:10px; border:2px solid var(--line);
  background:var(--parchment); cursor:pointer; font-family:var(--sans); font-size:0.98rem; color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.opt-btn:hover{ border-color:var(--gold);}
.opt-btn.correct{ background:#DCEEDF; border-color:#2E8B45; color:#1B4D2A; font-weight:600;}
.opt-btn.incorrect{ background:#FBDEDE; border-color:#C23B3B; color:#7A1F1F; font-weight:600;}
.opt-btn[disabled]{ cursor:default;}

.quiz-hint{ margin-top:16px; font-size:0.9rem; color:var(--teal); font-style:italic; min-height:1.2em;}
.quiz-explain{
  margin-top:18px; background:var(--parchment-2); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; font-size:0.95rem; line-height:1.6; color:var(--ink);
}
.quiz-readmore{ display:block; margin-top:8px; font-family:var(--mono); font-size:0.78rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.04em;}
.quiz-actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;}
.explain-gate{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.opt-btn[disabled]{ opacity:0.85;}
.btn[disabled]{ opacity:0.5; cursor:not-allowed; transform:none !important;}

.quiz-end{ text-align:center; padding:50px 20px;}
.quiz-end .big-score{ font-family:var(--serif); font-size:3rem; color:var(--teal-deep); margin:10px 0;}

@media(max-width:520px){
  .quiz-question{ font-size:1.2rem;}
}