:root {
    --skeleton-screen-padding: 1rem;
    --skeleton-surface-radius: 1rem;
    --skeleton-shimmer-duration: 1.35s;
}

.skeleton-screen {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: var(--skeleton-screen-padding);
    overflow: hidden;
}

.skeleton-screen.hidden {
    display: none;
}

.skeleton-layout,
.skeleton-surface,
.skeleton-line,
.skeleton-chip,
.skeleton-block {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.skeleton-surface {
    border: 1px solid var(--color-white-10);
    border-radius: var(--skeleton-surface-radius);
    background: linear-gradient(180deg, var(--color-white-10) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
}

.skeleton-line,
.skeleton-chip {
    background: var(--color-white-10);
    border-radius: 999px;
}

.skeleton-line {
    height: 0.9rem;
}

.skeleton-line--title {
    width: 68%;
    height: 1.2rem;
}

.skeleton-line--long {
    width: 92%;
}

.skeleton-line--medium {
    width: 68%;
}

.skeleton-line--short {
    width: 40%;
}

.skeleton-chip {
    width: 4rem;
    height: 1.75rem;
}

.skeleton-block {
    height: 3.25rem;
    border-radius: 1rem;
    background: linear-gradient(90deg, var(--color-violet-40) 0%, var(--color-aqua-30) 100%);
}

.skeleton-block--wide {
    width: 60%;
}

.skeleton-block--medium {
    width: 42%;
}

.skeleton-block--short {
    width: 33%;
}

.skeleton-surface::after,
.skeleton-line::after,
.skeleton-chip::after,
.skeleton-block::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);
    animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}