:root{
  --correct:#1e9b6e;
  --incorrect:#d9534f;
  --neutral:#f6c85f;
  --card-bg:#fbfbff;
  --muted:#666;
}

/* Base card and option styling */
.question-card{ background:var(--card-bg); border-radius:10px; padding:14px; border:1px solid #ececec; }
.options label{
  display:block;
  padding:12px 14px;
  border-radius:10px;
  margin:8px 0;
  background:#fff;
  border:1px solid #eee;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  cursor:pointer;
  user-select:none;
}
.options label:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,0.04); }

/* Feedback states */
.options label.correct{ background:linear-gradient(90deg, rgba(30,155,110,0.08), rgba(30,155,110,0.03)); border-color:var(--correct); color:var(--correct); }
.options label.incorrect{ background:linear-gradient(90deg, rgba(217,83,79,0.06), rgba(217,83,79,0.02)); border-color:var(--incorrect); color:var(--incorrect); }
.options label.neutral{ background:linear-gradient(90deg, rgba(246,200,95,0.06), rgba(246,200,95,0.02)); border-color:var(--neutral); color:var(--muted); }

/* Feedback badge */
.feedback-badge{ display:inline-block; margin-left:10px; font-weight:700; font-size:0.95rem; }

/* Progress bar */
.progress-wrap{ width:100%; background:#eee; height:10px; border-radius:999px; overflow:hidden; margin:10px 0 18px; }
.progress-bar{ height:100%; background:linear-gradient(90deg,var(--correct),#4fcf9b); width:0%; transition:width .35s ease; }

/* Mobile adjustments */
@media (max-width:720px){
  body{ padding:12px; font-size:16px; }
  .question-card{ padding:16px; border-radius:12px; }
  .footer-actions{ position:sticky; bottom:0; background:linear-gradient(#fff, rgba(255,255,255,0.95)); padding:12px 0; z-index:40; display:flex; justify-content:center; }
  #submitAnswersBtn{ width:92%; max-width:480px; font-size:1.05rem; padding:12px 16px; }
  .mobile-nav{ display:flex; gap:8px; justify-content:center; padding:10px 0; }
  .mobile-nav button{ padding:8px 12px; border-radius:8px; border:1px solid #ddd; background:#fff; cursor:pointer; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .options label, .progress-bar{ transition:none; transform:none; }
}


/* Unanswered highlight and modal styles */
.question-card.highlight-unanswered { box-shadow: 0 8px 30px rgba(30,155,110,0.12); border-color: #1e9b6e; transform: translateY(-3px); transition: box-shadow .25s, transform .15s; }

.advice-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; z-index:9999;
}
.advice-modal {
  width: min(520px, 92%); background:#fff; border-radius:10px; padding:18px; box-shadow:0 12px 40px rgba(0,0,0,0.12);
  font-family:inherit; color:#111;
}
.advice-modal h3{ margin:0 0 8px 0; font-size:1.05rem; }
.advice-modal p{ margin:0 0 12px 0; color:#444; }
.advice-modal .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.advice-modal button{ padding:8px 12px; border-radius:8px; border:1px solid #ddd; background:#f7f8fb; cursor:pointer; }
.advice-modal button.primary{ background:#1e9b6e; color:#fff; border-color:transparent; }



.question-card:focus, .question-card *:focus { outline: 3px solid rgba(30,155,110,0.18); outline-offset: 4px; }