.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-timer{ font-family:var(--mono); font-size:1.1rem; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 14px;}
.quiz-timer.low{ color:var(--rose); border-color:var(--rose);}
.quiz-progress{ flex:1; min-width:160px; height:8px; background:var(--parchment-2); border-radius:999px; overflow:hidden; margin:0 16px;}
.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:1px 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:rgba(124,144,120,0.25); border-color:var(--sage);}
.opt-btn.incorrect{ background:rgba(164,93,93,0.15); border-color:var(--rose);}
.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-actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;}

.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;}
}