/* ==========================================================================
  PROGRESS TRACKER
  ========================================================================== */

.progress-tracker {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.progress-item {
  flex: 1;
  min-width: 100px;
  padding: var(--space-sm);
  background: var(--gray-100);
  border-radius: 12px;
  text-align: center;
  border: 2px solid var(--gray-300);
}

.progress-item.pending {
  background: var(--gray-100);
  border-color: var(--gray-400);
  color: var(--color-text-secondary);
}

.progress-item.correct {
  background: #d4edda;
  border-color: var(--color-success);
  color: var(--color-success);
  font-weight: 600;
}

.progress-item.incorrect {
  background: #f8d7da;
  border-color: #dc3545;
  color: #dc3545;
  font-weight: 600;
}

.progress-item-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.progress-item-icon {
  font-size: 24px;
  margin-top: 4px;
}