.dc-spin { display: inline-flex; align-items: center; gap: var(--dc-3); font-family: var(--dc-font); }
.dc-spin__ring {
flex: none; width: 22px; height: 22px;
border: 3px solid color-mix(in srgb, var(--dc-brand) 22%, transparent);
border-top-color: var(--dc-brand);
border-radius: var(--dc-r-full);
animation: dc-spin-turn 800ms linear infinite;
}
.dc-spin__ring--sm { width: 16px; height: 16px; border-width: 2px; }
.dc-spin__ring--lg { width: 34px; height: 34px; }
.dc-spin__ring--on {
width: 16px; height: 16px; border-width: 2px;
border-color: color-mix(in srgb, var(--dc-text-on) 40%, transparent);
border-top-color: var(--dc-text-on);
}
.dc-spin__text { font-size: 14px; color: var(--dc-text); }
.dc-spin__sub { font-size: 12px; color: var(--dc-text-mute); }
.dc-spin__btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--dc-2);
min-height: 44px; padding: 0 var(--dc-5);
border: 0; border-radius: var(--dc-r-sm);
background: var(--dc-brand); color: var(--dc-text-on);
font-size: 15px; font-weight: 600;
}
.dc-spin__btn[aria-disabled="true"] { opacity: .75; cursor: default; }
.dc-spin--page {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--dc-2); min-height: 190px; padding: var(--dc-6);
border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
background: var(--dc-surface); text-align: center;
}
@keyframes dc-spin-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.dc-spin__ring { animation-duration: 1800ms !important; }
}