.skel-bar {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: var(--color-skel-fill, var(--color-skeleton));
}

.skel-bar-title  { height: 10px; width: 96px; }
.skel-bar-desc   { height: 10px; width: 88%; opacity: 0.75; }
.skel-bar-author { width: 80px; height: 12px; }
.skel-bar-header { width: 140px; height: 18px; }

.is-phone .skel-bar-desc { display: none; }
.is-phone .skel-bar-title { width: 70%; }

.skel-rr-line-1 { width: 60%; height: 10px; }
.skel-rr-line-2 { width: 40%; height: 10px; }
.is-phone .skel-rr-line-1 { width: 70%; }
.is-phone .skel-rr-line-2 { display: none; }

.skel-square {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: var(--color-skel-fill, var(--color-skeleton));
}

.skel-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-skel-fill, var(--color-skeleton));
}

.skel-pill {
    width: 80px;
    height: 24px;
    border-radius: 100px;
    background: var(--color-skel-fill, var(--color-skeleton));
}

.skel-rect {
    width: 60px;
    height: 24px;
    border-radius: 4px;
    background: var(--color-skel-fill, var(--color-skeleton));
}

@keyframes skel-shimmer {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.95; }
}

.skel-bar, .skel-square, .skel-circle, .skel-pill, .skel-rect {
    animation: skel-shimmer 1.6s ease-in-out infinite;
}