/* quiz.css */
.quiz-wrap { max-width: 760px; margin: 0 auto; padding: 2rem 1rem; }
.quiz-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:10px; }
.quiz-score-badge { background:var(--brand-saffron); color:#fff; padding:6px 18px; border-radius:var(--r-pill); font-weight:700; font-size:0.9rem; }
.quiz-timer { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--text-primary); background:var(--bg-card); padding:6px 16px; border-radius:var(--r-pill); border:1.5px solid var(--border); }
.quiz-timer.danger { color:var(--danger); border-color:var(--danger); animation: pulse 0.6s infinite alternate; }
@keyframes pulse { from{transform:scale(1)} to{transform:scale(1.05)} }

.progress-info { display:flex; justify-content:space-between; font-size:0.8rem; color:var(--text-muted); font-weight:600; margin-bottom:4px; }
.quiz-question-card { background:var(--bg-card); border-radius:var(--r-xl); border:1px solid var(--border); padding:2rem; box-shadow:var(--shadow-card); margin-bottom:1.5rem; }
.q-type-badge { display:inline-block; background:var(--info-bg); color:var(--info); padding:3px 12px; border-radius:var(--r-pill); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:1rem; }
.q-element-preview { text-align:center; padding:1rem 0; }
.q-el-box { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:90px; height:90px; border-radius:14px; margin-bottom:0.5rem; }
.q-el-num { font-size:0.7rem; opacity:0.8; }
.q-el-sym { font-family:var(--font-display); font-size:2.4rem; font-weight:700; line-height:1; }
.q-el-mass { font-size:0.65rem; opacity:0.7; }
.q-text { font-size:1.1rem; font-weight:700; color:var(--text-primary); margin-bottom:0.5rem; text-align:center; line-height:1.4; }
.q-hint { font-size:0.85rem; color:var(--text-muted); text-align:center; margin-bottom:1.5rem; }

.options-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.option-btn {
  padding:14px 16px;
  border-radius:var(--r-md);
  border:2px solid var(--border);
  background:var(--bg-card2);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:0.92rem;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:all var(--t-fast);
  line-height:1.3;
}
.option-btn:hover:not(:disabled) { border-color:var(--brand-saffron); background:rgba(255,107,0,0.06); transform:translateX(3px); }
.option-btn.correct { border-color:var(--success)!important; background:var(--success-bg)!important; color:var(--success)!important; }
.option-btn.wrong   { border-color:var(--danger)!important;  background:var(--danger-bg)!important;  color:var(--danger)!important; }
.option-btn:disabled { cursor:not-allowed; }

.q-explanation { background:var(--bg-card2); border-radius:var(--r-md); padding:12px 16px; margin-top:1rem; font-size:0.88rem; color:var(--text-secondary); border-left:3px solid var(--brand-saffron); display:none; }
.q-explanation.show { display:block; }

.quiz-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; }

/* Results */
.results-card { text-align:center; padding:2.5rem 2rem; }
.result-circle { width:120px; height:120px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 1.5rem; border:4px solid var(--brand-saffron); background:rgba(255,107,0,0.08); }
.result-score { font-family:var(--font-display); font-size:2.5rem; font-weight:700; color:var(--brand-saffron); line-height:1; }
.result-label { font-size:0.75rem; color:var(--text-muted); font-weight:600; }
.result-title { font-family:var(--font-display); font-size:1.8rem; font-weight:700; margin-bottom:0.5rem; }
.result-sub { color:var(--text-secondary); margin-bottom:1.5rem; }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:1.5rem; }
.rs-box { background:var(--bg-card2); border-radius:var(--r-md); padding:12px; }
.rs-num { font-family:var(--font-display); font-size:1.5rem; font-weight:700; }
.rs-label { font-size:0.72rem; color:var(--text-muted); font-weight:600; }

/* Quiz settings */
.quiz-setup { text-align:center; max-width:480px; margin:0 auto; padding:2rem 1rem; }
.setup-title { font-family:var(--font-display); font-size:2rem; font-weight:700; margin-bottom:0.5rem; }
.setup-sub { color:var(--text-secondary); margin-bottom:2rem; }
.setup-option { background:var(--bg-card); border:2px solid var(--border); border-radius:var(--r-lg); padding:14px 18px; margin-bottom:10px; cursor:pointer; text-align:left; transition:all var(--t-fast); display:flex; align-items:center; gap:12px; }
.setup-option:hover { border-color:var(--brand-saffron); }
.setup-option.selected { border-color:var(--brand-saffron); background:rgba(255,107,0,0.05); }
.setup-option-icon { font-size:1.5rem; }
.setup-option-label { font-weight:700; font-size:0.95rem; }
.setup-option-desc { font-size:0.78rem; color:var(--text-muted); }

@media(max-width:560px) {
  .options-grid { grid-template-columns:1fr; }
  .quiz-question-card { padding:1.2rem; }
  .result-stats { grid-template-columns:1fr 1fr 1fr; }
}