/* 1. Ring spinner */
.spinner-ring {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}

/* 2. Dots */
.spinner-dots { display: flex; gap: 5px; }
.spinner-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: dotPulse 1.2s infinite;
}
.spinner-dots span:nth-child(2) { animation-delay: 0.2s; }
.spinner-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes dotPulse { 0%,80%,100% { transform: scale(0); } 40% { transform: scale(1); } }