/* CM001 kit — feedback.css (@layer cm.components). Spinner + skeleton + shared keyframes. */
@layer cm.components {
  .cm-spinner {
    display: inline-block; width: var(--spin-size, 20px); height: var(--spin-size, 20px); border-radius: 50%;
    border: 2.5px solid color-mix(in srgb, var(--brand) 22%, transparent); border-top-color: var(--brand);
    animation: cm-spin .6s linear infinite; vertical-align: middle;
  }
  .cm-spin-lbl { margin-inline-start: 8px; color: var(--text-2); font-size: 13px; }

  .cm-skel-lines { display: flex; flex-direction: column; gap: 8px; }
  .cm-skeleton {
    display: block; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--text) 8%, var(--surface-2)) 37%, var(--surface-2) 63%);
    background-size: 400% 100%; animation: cm-shimmer 1.4s ease infinite;
  }
  .cm-skeleton--block { height: 60px; border-radius: var(--radius-md, 10px); }
}

@keyframes cm-spin { to { transform: rotate(360deg); } }
@keyframes cm-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cm-spinner, .cm-skeleton, .btn-spin { animation-duration: 0s !important; } }