@keyframes skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    display: inline-block;
    background: linear-gradient(90deg, #eef0f3 0%, #f7f8fa 50%, #eef0f3 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 0;
    line-height: 1;
}

.skeleton-block { display: block; height: 14px; margin-bottom: 8px; width: 100%; }
.skeleton-h1    { display: block; height: 28px; width: 60%; margin-bottom: 12px; }
.skeleton-h2    { display: block; height: 20px; width: 40%; margin-bottom: 10px; }
.skeleton-line  { display: block; height: 12px; margin-bottom: 6px; }
.skeleton-line.short { width: 50%; }
.skeleton-line.med   { width: 75%; }
.skeleton-line.long  { width: 92%; }
.skeleton-card { padding: 16px; border: 1px solid #eef0f3; }
.skeleton-img  { display: block; aspect-ratio: 16/9; width: 100%; }
.skeleton-img.square { aspect-ratio: 1/1; }
.skeleton-circle { display: inline-block; width: 48px; height: 48px; border-radius: 50%; }
.skeleton-pill   { display: inline-block; height: 26px; width: 100px; border-radius: 13px; }

.skeleton-loaded .skeleton { display: none !important; }