/* ── Skeleton Loaders — Sprint 19 ── */

.skeleton {
    display: block;
    background: linear-gradient(90deg,
        var(--surface-hover, #252245) 25%,
        var(--border-light, #342d89) 37%,
        var(--surface-hover, #252245) 63%);
    background-size: 400% 100%;
    animation: skeletonShimmer 1.4s ease infinite;
    border-radius: 4px;
}

@keyframes skeletonShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-circle { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }

.skeleton-card {
    background: var(--surface, #1d1e36);
    border: 1px solid var(--border, #342d89);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light, #252745);
}

.skeleton-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface, #1d1e36);
    border: 1px solid var(--border, #342d89);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
}

.skeleton-stat-lines { display: flex; flex-direction: column; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; opacity: 0.6; }
}