.live-now {
background: light-dark(#f4f7f9, #161b1d);
padding: 1rem;
border-radius: 0.85rem;
font-size: 0.9rem;
}

/* --- item --- */
.live-now__item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem;
margin-bottom: 0.5rem;
border-radius: 0.75rem;
background: light-dark(#fff, rgba(255,255,255,.03));
transition: background .2s ease;
}
.live-now__item:hover {
background: light-dark(#f1f1f1, rgba(255,255,255,.05));
}

/* --- link --- */
.live-now__link {
display: flex;
align-items: center;
justify-content: space-between;
gap:1rem;
width: 100%;
color: light-dark(#111, #dce6eb);
text-decoration: none;
}

/* --- thumb --- */
.live-now__thumb {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 0.5rem;
object-fit: cover;
background: light-dark(#e5e9ec, rgba(255,255,255,.08));
}

/* --- text --- */
.live-now__title {
flex: 1;
line-height: 1.3;
font-weight: 500;
}

.live-now__count {
font-weight: 600;
font-size: 0.8rem;
color: light-dark(#007489, #58d3f7);
}

/* --- skeleton --- */
.live-now__item--skeleton {
overflow: hidden;
background: light-dark(#eef2f4, rgba(255,255,255,.02));
}

.live-now__thumb-skeleton {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 0.5rem;
background: linear-gradient(90deg,
light-dark(#e0e5ea, rgba(255,255,255,.05)) 25%,
light-dark(#f2f6f8, rgba(255,255,255,.1)) 50%,
light-dark(#e0e5ea, rgba(255,255,255,.05)) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite linear;
}

.live-now__text-skeleton {
flex: 1;
height: 12px;
border-radius: 4px;
margin-left: 0.6rem;
background: linear-gradient(90deg,
light-dark(#e0e5ea, rgba(255,255,255,.05)) 25%,
light-dark(#f2f6f8, rgba(255,255,255,.1)) 50%,
light-dark(#e0e5ea, rgba(255,255,255,.05)) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite linear;
}

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

/* --- error --- */
.live-now__error {
padding: 0.8rem;
text-align: center;
font-size: 0.9rem;
opacity: 0.7;
color: light-dark(#333, #c8d1d6);
}