.card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid #f1f5f9;
}

.card-clickable {
  cursor: pointer;
}

.card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-highlighted {
  border: 2px solid hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.1);
}