.live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    width: 100%;
    margin-top: 20px;
}

.live-grid[data-count="1"] { max-width: 720px; margin-right: auto; margin-left: auto; }
.live-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.live-card {
    overflow: hidden;
    color: #c99e53;
    background: #1a0f08;
    border: 1px solid #8b5a2b;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.live-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #120a05;
}

.live-card__cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    color: #c99e53;
    cursor: pointer;
    background-color: #1a0f08;
    background-position: center;
    background-size: cover;
    border: 0;
}

.live-card__cover:disabled { cursor: default; }

.live-card__cover-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.live-card__cover::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(rgba(18, 10, 5, .12), rgba(18, 10, 5, .55)); }
.live-card__play-icon { position: relative; z-index: 2; width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent #c99e53; }
.live-card__cover-btn { position: relative; z-index: 2; padding: 7px 18px; font-weight: 700; background: rgba(26, 15, 8, .72); border: 1px solid #c99e53; border-radius: 18px; }
.live-card__badge, .live-card__status { position: absolute; top: 10px; z-index: 3; padding: 4px 9px; color: #fff; font-size: 12px; background: rgba(0, 0, 0, .68); border-radius: 4px; }
.live-card__badge { left: 10px; background: #fb7299; }
.live-card__status { right: 10px; }
.live-card__status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: #f33; border-radius: 50%; animation: livePulse 1.2s infinite; }
.live-card__iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; }
.live-card__player-actions { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: none; gap: 8px; }
.is-playing .live-card__player-actions { display: flex; }
.live-card__player-actions button, .live-card__player-actions a, .live-card__link { padding: 6px 10px; color: #f1d296; background: rgba(26, 15, 8, .9); border: 1px solid #c99e53; border-radius: 4px; text-decoration: none; cursor: pointer; }
.live-card__details { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 12px; }
.live-card__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-card__online { margin-left: auto; color: #a78048; font-size: 12px; white-space: nowrap; }
.live-card__link { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.live-card.is-error .live-card__status { color: #f1d296; }

.live-placeholder {
    grid-column: 1 / -1;
    min-height: 220px;
    padding: 40px 20px;
    color: #8f6a36;
    text-align: center;
    background: #1a0f08;
    border: 1px solid rgba(201, 158, 83, .28);
    border-radius: 8px;
}
.live-placeholder__title { margin-bottom: 8px; color: #c99e53; font-size: 22px; font-weight: 700; }
.live-placeholder__desc { font-size: 13px; }

@keyframes livePulse { 50% { opacity: .3; } }

@media (max-width: 768px) {
    .live-grid, .live-grid[data-count="2"] { grid-template-columns: 1fr; }
    .live-card__details { flex-wrap: wrap; }
    .live-card__title { flex: 1 1 100%; }
}