/* ========== Скелетон / шиммер — анимация загрузки (адаптация под светлую и тёмную тему) ========== */

/* Светлая тема */
:root {
    --skeleton-from: #E5E7EB;
    --skeleton-mid: #F3F4F6;
    --skeleton-to: #E5E7EB;
}

/* Тёмная тема */
html.dark {
    --skeleton-from: #2D3748;
    --skeleton-mid: #4A5568;
    --skeleton-to: #2D3748;
}

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

.skeleton {
    background: linear-gradient(
        90deg,
        var(--skeleton-from) 0%,
        var(--skeleton-mid) 40%,
        var(--skeleton-to) 80%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
}

.skeleton-text {
    display: inline-block;
    min-width: 3ch;
    height: 1.2em;
    vertical-align: middle;
}

.skeleton-block {
    display: block;
    min-height: 1em;
}

.skeleton-card {
    background: linear-gradient(
        90deg,
        var(--skeleton-from) 0%,
        var(--skeleton-mid) 40%,
        var(--skeleton-to) 80%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 1rem;
}

/* Статичный скелетон при отключённой анимации (доступность) */
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton-card {
        animation: none;
        background: var(--skeleton-mid);
    }
}