/* =============================================
   IB MOCK TRAINER — quiz.css
   Quiz screen styles
   ============================================= */

/* ---- QUIZ HEADER ---- */
.quiz-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--bg-card); border-bottom: 1.5px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}

.quiz-meta { display: flex; align-items: center; gap: 10px; }
#quiz-progress-text { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); }

.timer {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-card-2); border-radius: 100px;
  padding: 6px 14px; font-weight: 700; font-size: 0.95rem;
}
.timer.warning { background: #FEF9C3; color: #92400E; }
.timer.danger { background: #FEE2E2; color: #991B1B; animation: pulse 0.8s infinite; }
body.dark-mode .timer.warning { background: #422006; color: #FDE68A; }
body.dark-mode .timer.danger { background: #7F1D1D; color: #FCA5A5; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ---- PROGRESS BAR ---- */
.quiz-progress-bar {
  height: 5px; background: var(--border);
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 0 4px 4px 0;
  transition: width 0.4s ease;
}

/* ---- QUIZ BODY ---- */
.quiz-body {
  flex: 1; padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  max-width: 780px; margin: 0 auto; width: 100%;
}

.quiz-top-stats {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.stat-chip {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 100px; padding: 7px 16px;
  font-size: 0.88rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.stat-chip span { color: var(--accent); font-size: 1rem; }

/* ---- QUESTION CARD ---- */
.question-card {
  background: var(--bg-card); border-radius: var(--radius);
  padding: 28px; width: 100%;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--border);
  animation: slideIn 0.28s ease;
}
@keyframes slideIn { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: none; } }

.question-tag {
  display: inline-block;
  background: var(--bg-card-2); color: var(--accent);
  border-radius: 100px; padding: 4px 14px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.question-text {
  font-size: 1.08rem; line-height: 1.65;
  font-weight: 500; color: var(--text);
  margin-bottom: 22px;
}

/* ---- OPTIONS ---- */
.options-grid { display: flex; flex-direction: column; gap: 10px; }

.option-btn {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg); border: 2px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  cursor: pointer; text-align: left; width: 100%;
  font-family: var(--font-body); font-size: 0.96rem; color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  line-height: 1.5;
}
.option-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-card-2); transform: translateX(3px); }
.option-btn:disabled { cursor: default; transform: none; }

.option-letter {
  width: 28px; height: 28px; min-width: 28px;
  background: var(--border); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}

.option-btn.selected { border-color: var(--accent); background: var(--bg-card-2); }
.option-btn.selected .option-letter { background: var(--accent); color: #fff; }

.option-btn.correct { border-color: #10B981; background: #D1FAE5; }
.option-btn.correct .option-letter { background: #10B981; color: #fff; }
body.dark-mode .option-btn.correct { background: #064E3B; }

.option-btn.wrong { border-color: #EF4444; background: #FEE2E2; }
.option-btn.wrong .option-letter { background: #EF4444; color: #fff; }
body.dark-mode .option-btn.wrong { background: #7F1D1D; }

.option-btn.reveal-correct { border-color: #10B981; background: rgba(16,185,129,0.08); }

/* ---- FEEDBACK BOX ---- */
.feedback-box {
  margin-top: 18px; border-radius: var(--radius-sm);
  padding: 18px 20px; border-left: 5px solid var(--accent);
  background: var(--bg-card-2);
  animation: fadeIn 0.2s ease;
}
.feedback-box.correct-fb { border-color: #10B981; background: #D1FAE5; }
.feedback-box.wrong-fb { border-color: #EF4444; background: #FEE2E2; }
body.dark-mode .feedback-box.correct-fb { background: #064E3B; }
body.dark-mode .feedback-box.wrong-fb { background: #7F1D1D; }

.feedback-result { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.feedback-result.ok { color: #059669; }
.feedback-result.fail { color: #DC2626; }

.feedback-explanation { font-size: 0.92rem; line-height: 1.6; color: var(--text); margin-bottom: 10px; }
.feedback-distractors { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.feedback-distractors strong { color: var(--text); }

#btn-next { margin-top: 4px; }

/* ---- MOTIVATOR ---- */
.motivator {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border-radius: var(--radius);
  padding: 14px 22px; font-weight: 700; font-size: 1rem;
  text-align: center; width: 100%;
  animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- EXAM MODE overlay note ---- */
.exam-mode-note {
  text-align: center; color: var(--text-muted);
  font-size: 0.82rem; padding: 8px 0;
}

@media (max-width: 540px) {
  .quiz-body { padding: 16px 12px; }
  .question-card { padding: 18px 14px; }
  .question-text { font-size: 0.97rem; }
  .option-btn { font-size: 0.9rem; padding: 12px 12px; }
  .quiz-top-stats { gap: 6px; }
  .stat-chip { font-size: 0.8rem; padding: 5px 12px; }
}

/* ============================== GE ADDITIONS ============================== */
/* Stimulus box */
.q-stimulus{background:var(--bg-ge);border:1.5px solid var(--border-ge);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:16px;font-size:0.9rem;line-height:1.65;color:var(--text)}
.q-stimulus strong{display:block;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--accent-ge);font-weight:700;margin-bottom:6px}
.q-stimulus table{width:100%;border-collapse:collapse;font-size:0.82rem;margin-top:8px}
.q-stimulus table th{background:rgba(5,150,105,0.12);padding:6px 10px;text-align:left;font-weight:700;border:1px solid var(--border-ge)}
.q-stimulus table td{padding:6px 10px;border:1px solid var(--border-ge)}

/* Written answer area */
.written-area{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.written-area textarea{width:100%;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:0.93rem;resize:vertical;outline:none;transition:border-color var(--transition)}
.written-area textarea:focus{border-color:var(--accent-ge)}

/* Feedback model / steps */
.feedback-model{background:var(--bg-ge);border-left:4px solid var(--accent-ge);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px;font-size:0.88rem;line-height:1.65}
.feedback-model strong{display:block;color:var(--accent-ge);font-size:0.78rem;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px}
.feedback-steps{background:#FEF9C3;border-left:4px solid var(--accent-ge-2);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px;font-size:0.88rem;line-height:1.7}
body.dark-mode .feedback-steps{background:#422006}
.feedback-steps strong{display:block;color:var(--accent-ge-2);font-size:0.78rem;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px}
.feedback-steps ol{padding-left:18px}
.feedback-steps li{margin-bottom:4px}

/* GE options color override */
.ge-question .option-btn.correct{border-color:#059669;background:#D1FAE5}
.ge-question .option-btn.correct .option-letter{background:#059669}
body.dark-mode .ge-question .option-btn.correct{background:#064E3B}
.ge-question .option-btn:hover:not(:disabled){border-color:var(--accent-ge);background:var(--bg-ge)}

/* ============================== QUIZ BASE STYLES ============================== */
#screen-quiz{background:var(--bg);flex-direction:column}
.quiz-header{display:flex;align-items:center;gap:10px;padding:14px 20px;background:var(--bg-card);border-bottom:1.5px solid var(--border);position:sticky;top:0;z-index:50}
.quiz-meta{flex:1;display:flex;align-items:center;gap:8px;font-size:0.85rem;font-weight:600;color:var(--text-muted)}
.timer{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--text);background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;transition:border-color 0.3s,color 0.3s}
.timer.warning{border-color:#F59E0B;color:#F59E0B}
.timer.danger{border-color:#EF4444;color:#EF4444;animation:pulse 0.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.55}}
.quiz-progress-bar{height:4px;background:var(--bg-card-2);width:100%}
.progress-fill{height:100%;background:var(--accent);transition:width 0.4s ease;border-radius:0 2px 2px 0}
.ge-question .progress-fill{background:var(--accent-ge)}
.quiz-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px 16px 40px;gap:16px;max-width:760px;margin:0 auto;width:100%}
.quiz-top-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.stat-chip{background:var(--bg-card);border:1.5px solid var(--border);border-radius:100px;padding:6px 14px;font-size:0.82rem;font-weight:600;color:var(--text-muted)}
.question-card{background:var(--bg-card);border-radius:var(--radius);border:2px solid var(--border);padding:24px 22px;width:100%;box-shadow:var(--shadow);animation:cardIn 0.28s ease}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.question-tag{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);margin-bottom:10px}
.question-text{font-size:1.02rem;line-height:1.65;color:var(--text);margin-bottom:18px;font-weight:500}
.options-grid{display:grid;gap:10px}
.option-btn{display:flex;align-items:center;gap:12px;background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;cursor:pointer;text-align:left;font-family:var(--font-body);font-size:0.9rem;color:var(--text);transition:border-color 0.18s,background 0.18s,transform 0.12s;line-height:1.45}
.option-btn:hover:not(:disabled){border-color:var(--accent);background:var(--bg-card-2);transform:translateX(2px)}
.option-letter{background:var(--accent);color:#fff;border-radius:6px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.82rem;flex-shrink:0}
.option-btn.correct{border-color:#059669;background:#D1FAE5}
.option-btn.correct .option-letter{background:#059669}
.option-btn.wrong{border-color:#EF4444;background:#FEE2E2}
.option-btn.wrong .option-letter{background:#EF4444}
.option-btn.reveal-correct:not(.wrong){border-color:#059669;border-style:dashed}
body.dark-mode .option-btn.correct{background:#064E3B}
body.dark-mode .option-btn.wrong{background:#7F1D1D}
.feedback-box{margin-top:14px;background:var(--bg-card);border-radius:var(--radius-sm);padding:16px;border:2px solid var(--border);display:flex;flex-direction:column;gap:10px}
.feedback-box.correct-fb{border-color:#059669}
.feedback-box.wrong-fb{border-color:#EF4444}
.feedback-result{font-weight:700;font-size:1rem}
.feedback-result.ok{color:#059669}
.feedback-result.fail{color:#EF4444}
.feedback-explanation{color:var(--text-muted);font-size:0.9rem;line-height:1.6}
.feedback-distractors{color:var(--text-muted);font-size:0.85rem;line-height:1.6}
.feedback-distractors strong{display:block;color:var(--text);margin-bottom:4px}
.motivator{background:linear-gradient(135deg,var(--accent),#9B59B6);color:#fff;border-radius:var(--radius-sm);padding:12px 16px;font-weight:700;font-size:0.92rem;text-align:center;animation:fadeIn 0.3s ease}