body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #333;
}

#quiz-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#question-text {
  font-size: 18px;
  margin-bottom: 16px;
  color: #333;
}

#options-list {
  list-style: none;
  padding: 0;
}

#options-list li {
  margin-bottom: 10px;
}

.option-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  background: #fafafa;
  cursor: pointer;
  border-radius: 4px;
}

.option-btn.selected {
  background: #dbeafe;
  border-color: #2563eb;
}

#controls {
  margin-top: 20px;
  text-align: right;
}

#controls button {
  padding: 10px 16px;
  border: none;
  background: #2563eb;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}


#controls button:disabled {
  background: #999;
}

.hidden {
  display: none;
}

.option-btn.correct {
  background: #dcfce7;
  border-color: #16a34a;
}

.option-btn.incorrect {
  background: #fee2e2;
  border-color: #dc2626;
}

#feedback {
  margin-top: 16px;
  font-weight: bold;
}

#feedback.correct {
  color: #16a34a;
}

#feedback.incorrect {
  color: #dc2626;
}
#explanation {
  margin-top: 10px;
  padding: 12px;
  background: #f1f5f9;
  border-left: 4px solid #2563eb;
  font-size: 14px;
}