[hidden] { display: none !important; }
.brand-mark { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.guide-scroll { max-height: min(76vh, 860px); overflow: auto; position: relative; }
.live-scroll { height: 544px; max-height: none; overflow: auto hidden; }
.guide-grid { --slot-height: 120px; min-width: 0; position: relative; }
.live-grid { min-width: 980px; overflow: hidden; }
.time-header, .channel-header, .time-label { position: absolute; }
.time-header { left: 0; top: 0; width: 76px; height: 64px; z-index: 8; }
.channel-header { top: 0; height: 64px; z-index: 6; }
.time-label { left: 0; width: 76px; z-index: 5; }
.live-time-mask { position: absolute; left: 0; top: 0; bottom: 0; z-index: 8; width: 76px; border-right: 1px solid #313741; background: #20242a; pointer-events: none; }
.live-time-header { display: flex; align-items: center; justify-content: center; gap: 4px; }
.live-scroll-button { display: grid; min-width: 28px; height: 28px; place-items: center; border: 1px solid #313741; border-radius: 6px; background: #000; color: #f6f0e8; font-weight: 800; }
.live-scroll-button:disabled { cursor: default; opacity: 0.28; }
.live-grid .time-header { z-index: 11; }
.live-grid .time-label { z-index: 10; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: #009440; z-index: 2; box-shadow: 0 0 0 1px rgba(0, 148, 64, 0.25); pointer-events: none; }
.guide-grid .now-line { right: auto; width: 76px; z-index: 12; }
.live-card-now-line { position: absolute; right: 0; height: 2px; background: #009440; z-index: 2; box-shadow: 0 0 0 1px rgba(0, 148, 64, 0.25); pointer-events: none; }
.guide-channel-select select { max-width: 100%; }
.program-card { z-index: 1; }
.program-card > * { position: relative; z-index: 3; }
.program-card:focus-visible { outline: 2px solid #ffcb00; outline-offset: -3px; }
.program-card.active-card { outline: 2px solid #009440; outline-offset: -3px; }
.program-card.active-current { background: #009440; }
.program-card.active-current .text-muted { color: rgba(246, 240, 232, 0.82); }
.status-live-button { min-height: 2.25rem; border-radius: 0.375rem; border: 1px solid #009440; padding: 0 0.75rem; background: #009440; color: #fff; font-size: 0.75rem; font-weight: 800; }
.status-live-button.is-live { cursor: default; background: #000; color: #009440; }
.status-live-button.is-watch-live { background: #009440; color: #fff; }
.progress-live-tick { position: absolute; top: 50%; z-index: 2; width: 2px; height: 16px; background: #009440; box-shadow: 0 0 0 1px rgba(0, 148, 64, 0.25); transform: translate(-1px, -50%); pointer-events: none; }
.card-play-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(0, 0, 0, 0.34); opacity: 0; transition: opacity 150ms ease; pointer-events: none; }
.program-card:hover .card-play-overlay, .program-card:focus-visible .card-play-overlay { opacity: 1; }
.program-card.active-current:hover .card-play-overlay, .program-card.active-current:focus-visible .card-play-overlay { opacity: 0; }
.watch-live-badge { border-radius: 0.375rem; background: #009440; padding: 0.5rem 0.75rem; color: #fff; font-size: 0.75rem; font-weight: 800; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.player-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 6, 7, 0.15), rgba(5, 6, 7, 0.72)); }
.poster-play { position: relative; z-index: 1; display: grid; width: 76px; height: 76px; place-items: center; border-radius: 9999px; background: #f04f3c; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); }
.poster-play::before { content: ""; width: 0; height: 0; margin-left: 5px; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 22px solid #fff; }
.play-glyph, .icon-play-button span { display: block; width: 0; height: 0; margin-left: 2px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid currentColor; }
.icon-play-button span { border-top-width: 6px; border-bottom-width: 6px; border-left-width: 9px; }
.restart-glyph { display: block; font-size: 18px; font-weight: 800; line-height: 1; transform: translateY(-1px); }
.youtube-glyph { position: relative; display: block; width: 20px; height: 14px; border-radius: 4px; background: #f04f3c; }
.youtube-glyph::after { content: ""; position: absolute; left: 8px; top: 3px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #fff; }