.spinner {
  width:20px;height:20px;border:2px solid var(--gray-200);
  border-top-color:var(--primary);border-radius:50%;
  animation:spin .7s linear infinite;flex-shrink:0;
}
.spinner--sm    { width:16px;height:16px; }
.spinner--lg    { width:32px;height:32px;border-width:3px; }
.spinner--white { border-color:rgba(255,255,255,.3);border-top-color:#fff; }
@keyframes spin { to{transform:rotate(360deg)} }

.skeleton {
  background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;border-radius:var(--radius-sm);
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.skeleton--text   { height:14px; }
.skeleton--title  { height:20px;width:60%; }
.skeleton--avatar { width:40px;height:40px;border-radius:50%; }
.skeleton--card   { height:80px; }