/* Shared placeholders use the same quiet charcoal tones and square edges as the site. */
.loading-state { min-width: 0; width: 100%; padding-block: 12px; }
.loading-state-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.loading-skeleton { position: relative; overflow: hidden; pointer-events: none; isolation: isolate; }
.loading-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent 25%, #ffffff05 48%, transparent 72%); animation: loading-sweep 2.2s ease-in-out .2s 4; pointer-events: none; }
.loading-row { display: grid; gap: 12px; padding: 16px 0; }
.loading-bar { display: block; background: #c5c9cf0c; min-height: 10px; max-width: 100%; }
.loading-bar--title { width: 48%; height: 22px; margin-bottom: 14px; }
.loading-bar--medium { width: 68%; }
.loading-bar--short { width: 42%; }
.loading-bar--wide { width: 92%; }
.loading-bar--label { width: 30%; }
.loading-bar--input { height: 46px; width: 100%; border: 1px solid #ffffff0a; }
.loading-bar--button { height: 44px; margin-top: 12px; width: 100%; }
.loading-state--list .loading-row + .loading-row { border-top: 1px solid #ffffff08; }
.loading-state--card { padding: 24px; border: 1px solid #ffffff12; background: #080a0c; }
.loading-state--badge { position: absolute; inset: 5% 12% 4%; width: auto; display: grid; place-items: center; }
.loading-state--badge .loading-skeleton { width: min(75%, 310px); height: 88%; }
.loading-badge { height: 100%; padding: 28px 18px; display: flex; flex-direction: column; gap: 24px; border: 1px solid #ffffff13; background: #ffffff03; border-radius: 20px; }
.loading-bar--screen { height: 44%; width: 100%; border: 1px solid #ffffff0b; background: #ffffff06; }
.loading-badge-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; }
.loading-bar--key { width: 30px; height: 30px; }
@keyframes loading-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .loading-skeleton::after { animation: none; display: none; } }