.pulse-ring {
  width: 2.5rem; height: 2.5rem;
  border: 3px solid #f3f3f3;
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: spin 1s linear infinite;
  display: flex; align-items: center; justify-content: center;
}
.pulse-ring i { display: none; } /* Hide the lucide icon inside the spinner */

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.loading-state { text-align: center; color: var(--text-main); font-weight: 500; font-size: 0.875rem; margin: auto; }

.fade-in { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@keyframes modalSlideIn { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }