/* QUIZ.CSS */
body {
  background:radial-gradient(ellipse at top,#0d2544 0%,var(--bg) 65%);
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; padding:68px 14px 36px;
}
.quiz-topbar {
  width:100%; max-width:440px;
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.quiz-section-lbl { font-size:15px; font-weight:900; color:var(--cyan); text-shadow:0 0 12px rgba(0,212,255,0.4); }
.quiz-counter { font-size:14px; color:var(--muted); font-weight:600; }
.progress-track {
  width:100%; max-width:440px; height:5px;
  background:rgba(255,255,255,0.08); border-radius:99px; margin-bottom:20px; overflow:hidden;
}
.progress-fill {
  height:100%; background:linear-gradient(90deg,var(--cyan),var(--gold));
  border-radius:99px; transition:width 0.45s ease;
}
.question-card { width:100%; max-width:440px; padding:26px 22px 22px; }
.question-num { font-size:12px; font-weight:700; color:var(--cyan); letter-spacing:1px; margin-bottom:10px; opacity:0.7; }
.question-text { font-size:20px; font-weight:800; line-height:1.55; color:var(--text); margin-bottom:22px; text-align:right; }
.options-list { display:flex; flex-direction:column; gap:11px; }
.option-btn {
  background:rgba(255,255,255,0.05); border:1.5px solid rgba(255,255,255,0.11);
  border-radius:13px; color:var(--text);
  font-family:'Tajawal',sans-serif; font-size:17px; font-weight:600;
  padding:15px 17px; text-align:right; cursor:pointer;
  transition:background 0.18s,border-color 0.18s; direction:rtl; width:100%;
}
.option-btn.selected { background:rgba(0,212,255,0.14); border-color:var(--cyan); color:var(--cyan); }
.option-btn.correct  { background:rgba(0,230,118,0.14); border-color:var(--green); color:var(--green); }
.option-btn.wrong    { background:rgba(255,77,77,0.12);  border-color:var(--danger); color:var(--danger); }
.option-btn.locked   { cursor:default; pointer-events:none; }
.quiz-action-btn { width:100%; max-width:440px; margin-top:16px; display:none; }