/* quiz-style.css */
.math-quiz-container { font-family: 'Segoe UI', Arial, sans-serif; max-width: 800px; margin: auto; background: #fff; min-height: 500px; padding: 20px; }
.quiz-main-title { text-align: center; color: #1a237e; margin-bottom: 20px; font-size: 2em; border-bottom: 4px solid #2196F3; padding-bottom: 10px; }
.quiz-sticky-header { position: sticky; top: 0; z-index: 1000; background: #ffffff; padding: 12px; border-bottom: 3px solid #2196F3; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.timer-box { font-size: 1.1em; font-weight: bold; color: #d32f2f; background: #ffebee; padding: 6px 15px; border-radius: 5px; }
.score-box { font-size: 1.1em; font-weight: bold; color: #1a237e; background: #e8eaf6; padding: 6px 15px; border-radius: 5px; }
.btn-action { padding: 15px 35px; font-size: 1.1em; border-radius: 8px; cursor: pointer; font-weight: bold; border: none; transition: 0.3s; }
.btn-start { background: #2196F3; color: white; width: 100%; }
.btn-nav { background: #607d8b; color: white; flex: 1; }
.btn-nav:disabled { background: #ccc !important; cursor: not-allowed; opacity: 0.5; }
.quiz-item { display: none; padding: 20px; background: #fff; border: 1px solid #e1e8ed; border-radius: 12px; margin-top: 20px; }
.quiz-item.active { display: block; }
.question-text { font-weight: bold; font-size: 1.2em; color: #1a237e; margin-bottom: 20px; }
.options-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.options-list li { padding: 15px; border: 2px solid #edf2f7; border-radius: 8px; cursor: pointer; background: #f8fafc; }
.correct-choice { background: #d4edda !important; border-color: #28a745 !important; color: #155724; }
.wrong-choice { background: #f8d7da !important; border-color: #dc3545 !important; color: #721c24; }
.explanation-box { display: none; padding: 15px; background: #fff9c4; border-radius: 8px; margin-top: 15px; border-left: 5px solid #fbc02d; overflow-x: auto; }
.nav-container { display: flex; justify-content: space-between; margin-top: 30px; gap: 10px; }
#quiz-results-card { display: none; text-align: center; padding: 40px; background: #f0f7ff; border-radius: 15px; border: 3px solid #2196F3; }
@media (max-width: 600px) { .options-list { grid-template-columns: 1fr; } }