.live-tv-page { padding:0 36px 28px; color:var(--ott-text); }
.live-tv-heading { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin:0 0 8px; }
.live-tv-heading h1 { margin:0; font-size:22px; font-weight:800; color:var(--ott-text); }
.live-tv-count { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--ott-border); border-radius:20px; background:var(--ott-panel); color:var(--ott-muted); font-size:12px; font-weight:700; white-space:nowrap; }
.live-tv-count .fa { color:#58b66c; font-size:8px; }
.live-tv-stage { position:relative; width:min(100%,calc((100dvh - 340px) * 1.777778)); max-width:1200px; aspect-ratio:16/9; margin:0 auto; background:#000; border:12px solid #000; border-radius:14px; overflow:hidden; }
.live-tv-stage .video-js { position:absolute; inset:0; width:100%; height:100%; background:#000; }
.live-tv-stage .vjs-tech { object-fit:contain; }
.live-tv-stage .vjs-error-display { display:none; }
.live-tv-stage .video-js .vjs-control-bar { z-index:4; }
.live-tv-message { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; background:#000; color:#e9edf5; text-align:center; pointer-events:none; }
.live-tv-message[hidden],.live-tv-unmute[hidden],.live-tv-empty[hidden] { display:none!important; }
.live-tv-message>.fa { font-size:32px; color:#98a6bf; }
.live-tv-message p { margin:0; max-width:45ch; font-size:14px; }
.live-tv-stage .live-tv-message button { pointer-events:auto; border:1px solid #64748b; border-radius:20px; background:#172135; color:#fff; padding:7px 20px; font-weight:700; }
.live-tv-stage .live-tv-unmute { position:absolute; z-index:5; bottom:54px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:9px 18px; border-radius:24px; background:#141b2ee8; color:#fff; border:1px solid #a3acc766; white-space:nowrap; font-size:13px; font-weight:700; }
.live-tv-now { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin:12px 0 10px; font-size:13px; }
.live-tv-now strong { color:var(--ott-text); }
.live-tv-now>span:last-child { color:var(--ott-muted); }
.live-tv-on-air { display:inline-flex; align-items:center; gap:5px; color:var(--ott-accent); font-size:10px; font-weight:800; letter-spacing:.8px; }
.live-tv-on-air .fa { font-size:7px; }
.live-tv-browser { min-width:0; }
.live-tv-tools { display:flex; gap:16px; align-items:center; margin-bottom:8px; min-width:0; }
.live-tv-categories { display:flex; flex:1; min-width:0; align-items:center; gap:7px; overflow-x:auto; scrollbar-width:none; padding:3px 0; }
.live-tv-categories::-webkit-scrollbar,.live-tv-rail::-webkit-scrollbar { display:none; }
.live-tv-category { display:inline-flex; align-items:center; flex:none; gap:6px; padding:6px 12px; white-space:nowrap; border-radius:20px; border:1px solid var(--ott-border); background:var(--ott-panel); color:var(--ott-text); font-size:12px; font-weight:700; line-height:1.3; }
.live-tv-category .fa { font-size:7px; color:var(--channel-color,var(--ott-accent)); }
.live-tv-category[aria-pressed=true] { background:var(--channel-color,var(--ott-accent)); border-color:transparent; color:#fff; }
.live-tv-category[aria-pressed=true] .fa { color:#fff; }
.live-tv-search { flex:none; display:flex; align-items:center; gap:8px; width:180px; margin:0; padding:6px 10px; border:1px solid var(--ott-border); border-radius:20px; background:var(--ott-panel); color:var(--ott-muted); }
.live-tv-search input { min-width:0; width:100%; padding:0; margin:0; height:22px; border:0; background:transparent; color:var(--ott-text); font-size:12px; outline:none; }
.live-tv-search input::placeholder { color:var(--ott-muted); }
.live-tv-search:focus-within { border-color:var(--ott-link); }
.live-tv-rail-wrap { display:flex; align-items:center; gap:8px; min-width:0; }
.live-tv-rail { display:flex; gap:8px; flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:4px 2px 8px; scroll-snap-type:x proximity; }
.live-tv-channel { display:flex; flex:none; flex-direction:column; gap:6px; align-items:center; width:90px; padding:7px 6px; border:2px solid transparent; border-radius:12px; background:var(--ott-panel); color:var(--ott-text); scroll-snap-align:start; transition:border-color .15s,background .15s; }
.live-tv-channel[aria-pressed=true] { border-color:var(--ott-link); background:var(--ott-accent-wash); }
.live-tv-channel:hover { background:var(--ott-raised); }
.live-tv-channel img { width:72px; height:72px; object-fit:contain; border-radius:7px; }
.live-tv-channel>.fa { height:72px; display:flex; align-items:center; font-size:32px; color:var(--ott-muted); }
.live-tv-channel-name { display:block; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; font-weight:700; line-height:1.4; text-align:center; }
.live-tv-arrow { display:flex; flex:none; align-items:center; justify-content:center; width:30px; height:36px; padding:0; border:1px solid var(--ott-border); border-radius:10px; background:var(--ott-panel); color:var(--ott-text); font-size:20px; }
.live-tv-arrow:disabled { opacity:.35; cursor:default; }
.live-tv-empty { padding:18px; text-align:center; color:var(--ott-muted); font-size:13px; }
.live-tv-page button:focus-visible { outline:2px solid var(--ott-link); outline-offset:3px; }
@media(max-width:1199px) { .live-tv-page { padding:0 24px 24px; } }
@media(max-width:767px) { .live-tv-tools { flex-wrap:wrap; gap:8px; } .live-tv-categories { flex-basis:100%; } .live-tv-search { width:100%; max-width:250px; margin-left:auto; } .live-tv-stage { width:100%; border-width:8px; } }
@media(max-width:575px) { .live-tv-page { padding:4px 16px 24px; } .live-tv-heading { margin-bottom:12px; } .live-tv-heading h1 { font-size:20px; } .live-tv-count { font-size:11px; } .live-tv-stage { border-width:5px; border-radius:10px; } .live-tv-now { margin:10px 0 14px; font-size:12px; } .live-tv-channel { width:82px; } .live-tv-channel img { width:64px; height:64px; } .live-tv-arrow { width:26px; height:34px; } .live-tv-rail-wrap { gap:5px; } .live-tv-message { gap:8px; padding:12px; } .live-tv-message>.fa { font-size:24px; } .live-tv-message p { font-size:12px; } .live-tv-stage .live-tv-unmute { bottom:42px; padding:7px 13px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .live-tv-channel { transition:none; } }

/* Channel switching stays inside the Video.js fullscreen surface. */
.live-tv-stage .video-js .live-tv-channels-button { display:flex; flex:none; align-items:center; justify-content:center; gap:6px; width:auto; padding:0 9px; font-size:12px; }
.live-tv-stage .live-tv-channels-button .vjs-icon-placeholder { font-size:14px; }
.live-tv-stage .live-tv-channels-button .vjs-icon-placeholder::before { content:none; }
.live-tv-stage .live-tv-channels-label { font:600 12px/1.2 Nunito,sans-serif; }
.live-tv-stage .live-tv-picker { position:absolute; z-index:6; top:12px; right:12px; bottom:42px; display:flex; flex-direction:column; gap:8px; width:300px; max-width:calc(100% - 24px); padding:12px; border:1px solid var(--ott-border); border-radius:10px; background:var(--ott-popup,var(--ott-panel)); color:var(--ott-text); box-shadow:0 8px 30px #0006; font:13px/1.4 Nunito,sans-serif; }
.live-tv-stage .live-tv-picker[hidden],.live-tv-stage #live-tv-picker-empty[hidden] { display:none!important; }
.live-tv-picker-heading { display:flex; flex:none; align-items:center; justify-content:space-between; gap:8px; }
.live-tv-stage .live-tv-picker h2 { color:var(--ott-text); font:800 15px/1.4 Nunito,sans-serif; margin:0; }
.live-tv-stage .live-tv-picker-heading button { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--ott-border); border-radius:6px; color:var(--ott-text); background:var(--ott-raised); font-size:14px; }
.live-tv-stage #live-tv-picker-search { flex:none; width:100%; min-height:32px; margin:0; padding:6px 9px; border:1px solid var(--ott-border); border-radius:6px; background:var(--ott-panel); color:var(--ott-text); font:13px/1.4 Nunito,sans-serif; }
.live-tv-picker-list { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.live-tv-stage .live-tv-picker-list button { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:5px 6px; margin-bottom:3px; text-align:left; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ott-text); font:13px/1.4 Nunito,sans-serif; }
.live-tv-stage .live-tv-picker-list button:hover { background:var(--ott-raised); }
.live-tv-stage .live-tv-picker-list button[aria-pressed=true] { border-color:var(--ott-link); background:var(--ott-accent-wash); }
.live-tv-picker-list img { flex:none; width:38px; height:38px; object-fit:contain; border-radius:4px; }
.live-tv-picker-list span { min-width:0; }
.live-tv-picker-list strong,.live-tv-picker-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live-tv-picker-list small { color:var(--ott-muted); font-size:11px; }
.live-tv-stage #live-tv-picker-empty { margin:0; color:var(--ott-muted); font:13px/1.4 Nunito,sans-serif; }
.live-tv-stage .live-tv-picker button:focus-visible,.live-tv-stage #live-tv-picker-search:focus-visible,.live-tv-stage .live-tv-channels-button:focus-visible { outline:2px solid var(--ott-link); outline-offset:-2px; }
.live-tv-stage .video-js.live-tv-picker-open .vjs-control-bar,.live-tv-stage .video-js.vjs-error .vjs-control-bar,.live-tv-stage .video-js.live-tv-status-visible .vjs-control-bar { display:flex!important; opacity:1; visibility:visible; transform:none; pointer-events:auto; }
@media(max-width:575px) { .live-tv-stage .live-tv-picker { top:6px; right:6px; bottom:36px; max-width:calc(100% - 12px); padding:6px; gap:5px; } }

@media(max-width:575px) { .live-tv-stage .live-tv-channels-label { display:none; } .live-tv-stage .video-js .live-tv-channels-button { padding:0 7px; } }