/* Base look & feel tweaks used by the shortcode */
.correct {
  background-color: #d1fae5; /* green-100 */
  border: 2px solid #34d399; /* green-400 */
}
.incorrect {
  background-color: #fee2e2; /* red-100 */
  border: 2px solid #ef4444; /* red-500 */
}

/* Spinner (used in quiz + notes generating) */
.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #4a5568;
  animation: spin 1s ease infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Progress bar & snackbar transitions */
#usageBarFill { transition: width .25s ease; }
#quizSnackbar { transition: opacity .25s ease; opacity: 0; }