:root{color-scheme:dark;--ink:#eef7ff;--muted:#9fb5c8;--line:rgba(166,203,226,.19);--panel:#0a2233;--panel-2:#0d2a3d;--blue:#31c6f4;--focus:#ffd166;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020a11;color:var(--ink)}
body{min-width:300px}
.tv-app{min-height:100vh;background:radial-gradient(circle at 18% -10%,#123c59 0,transparent 35%),linear-gradient(150deg,#061724,#02090f 62%)}
.tv-topbar{height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 max(18px,calc((100vw - 1440px)/2));border-bottom:1px solid var(--line);background:rgba(3,15,24,.91);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.tv-brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}
.tv-brand-logo{display:block;width:42px;height:42px;border-radius:11px;box-shadow:0 9px 28px rgba(22,151,214,.28)}
.tv-brand>span:last-child{display:flex;align-items:baseline;gap:7px}
.tv-brand strong{font-family:Georgia,"Times New Roman",serif;font-size:1.23rem}
.tv-brand small{color:#57cff4;font-weight:950;letter-spacing:.16em}
.tv-top-status{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.79rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.tv-top-status time{color:#fff;font-variant-numeric:tabular-nums;border-left:1px solid var(--line);padding-left:12px}
.tv-live-pulse{width:8px;height:8px;border-radius:99px;background:#35e087;box-shadow:0 0 0 5px rgba(53,224,135,.11)}
.tv-main{width:min(1440px,100%);margin:0 auto;padding:22px 20px 54px}
.tv-viewer{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#06131d;box-shadow:0 26px 70px rgba(0,0,0,.42)}
.tv-screen{position:relative;aspect-ratio:16/9;max-height:calc(100vh - 190px);min-height:260px;background:#000;overflow:hidden}
.tv-player-mount,.tv-player-mount iframe,.tv-player-mount video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.tv-player-mount video{object-fit:contain}
.tv-boot-screen{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;background:radial-gradient(circle,#0e3852,#02070b 70%);text-align:center}
.tv-boot-logo{display:grid;place-items:center;width:82px;height:82px;border:2px solid #43c9ee;border-radius:22px;background:#092d58;font-size:2rem;font-weight:950;letter-spacing:-.08em;box-shadow:0 0 42px rgba(49,198,244,.27)}
.tv-boot-screen strong{font:700 1.55rem Georgia,serif}
.tv-boot-screen small{color:#a9bfd0}
.tv-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;background:rgba(0,7,12,.82);z-index:7}
.tv-loading span{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color:var(--blue);animation:tv-spin .9s linear infinite}
.tv-loading p{margin:12px 0 0;font-size:.82rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
@keyframes tv-spin{to{transform:rotate(360deg)}
}
.tv-channel-overlay{position:absolute;left:24px;top:23px;z-index:9;display:flex;align-items:center;gap:15px;max-width:min(620px,calc(100% - 48px));padding:14px 18px 14px 14px;border:1px solid rgba(255,255,255,.22);border-left:5px solid var(--channel-accent,var(--blue));border-radius:13px;background:rgba(2,12,20,.92);box-shadow:0 14px 38px rgba(0,0,0,.35);backdrop-filter:blur(8px);animation:tv-overlay-in .22s ease-out}
.tv-channel-overlay b{display:grid;place-items:center;min-width:56px;height:46px;border-radius:9px;background:#102e42;font-size:1.35rem;font-variant-numeric:tabular-nums}
.tv-channel-overlay div{display:grid;gap:3px;min-width:0}
.tv-channel-overlay strong{font-size:1.03rem}
.tv-channel-overlay span{overflow:hidden;color:#aec2d1;font-size:.8rem;white-space:nowrap;text-overflow:ellipsis}
@keyframes tv-overlay-in{from{transform:translateY(-10px);opacity:0}
}
.tv-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:stretch;min-height:44px;border-top:1px solid var(--line);background:linear-gradient(180deg,#0c2638,#071924)}
.tv-control-center{display:flex;min-width:0;height:44px;overflow:hidden}
.tv-control{min-width:58px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-left:1px solid var(--line);background:transparent;color:#d9e9f4;padding:7px 10px;font:inherit;cursor:pointer}
.tv-control:first-child{border-left:0;border-right:1px solid var(--line)}
.tv-control:hover{background:#12354a;color:#fff}
.tv-control:focus-visible,.tv-channel-card:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.tv-control span{font-size:.7rem;font-weight:900;color:#69d5f4}
.tv-control b{font-size:.7rem;white-space:nowrap}
.tv-channel-step b{font-size:1.05rem}
.tv-now-playing{flex:0 1 clamp(160px,22vw,290px);display:flex;align-items:center;gap:7px;padding:0 12px;min-width:0}
.tv-now-playing span{color:#7f9bb0;font-size:.55rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.tv-now-playing strong,.tv-now-playing small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tv-now-playing strong{font-size:.79rem}
.tv-now-playing small{color:#9fb5c6;font-size:.61rem}
.tv-controls:not(.has-alerts) .tv-now-playing{flex:1}
.tv-guide{margin-top:20px;padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(8,29,43,.9);box-shadow:0 18px 54px rgba(0,0,0,.28)}
.tv-guide[hidden]{display:none}
.tv-guide-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:17px}
.tv-guide-heading p,.tv-guide-heading h1{margin:0}
.tv-guide-heading p{color:#58d2f4;font-size:.7rem;font-weight:950;text-transform:uppercase;letter-spacing:.13em}
.tv-guide-heading h1{margin-top:4px;font:700 1.7rem Georgia,serif}
.tv-guide-heading>span{color:#a5bbcb;font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.tv-channel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tv-channel-card{min-width:0;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:11px;border:1px solid rgba(166,203,226,.18);border-left:4px solid var(--channel-accent,var(--blue));border-radius:12px;background:#0b2435;color:#eaf6ff;padding:11px;text-align:left;font:inherit;cursor:pointer}
.tv-channel-card:hover{background:#10334a;border-color:rgba(166,203,226,.42)}
.tv-channel-card.is-current{background:#12405b;box-shadow:inset 0 0 0 1px var(--channel-accent,var(--blue))}
.tv-card-number{display:grid;place-items:center;width:48px;height:48px;border-radius:9px;background:#051722;color:#fff;font-weight:950;font-variant-numeric:tabular-nums}
.tv-channel-card.is-current .tv-card-number{background:var(--channel-accent,var(--blue));color:#04121c}
.tv-card-copy{display:grid;min-width:0;gap:2px}
.tv-card-copy strong,.tv-card-copy span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tv-card-copy strong{font-size:.86rem}
.tv-card-copy span{color:#8fa9bb;font-size:.68rem}
.tv-card-copy small{margin-top:3px;color:#50d593;font-size:.61rem;font-weight:950;text-transform:uppercase;letter-spacing:.09em}
.tv-guide-note{margin:16px 0 0;color:#738da0;font-size:.72rem;line-height:1.45}
.tv-offline{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;padding:30px;text-align:center;background:radial-gradient(circle,#1c3443,#03090d)}
.tv-offline strong{font-size:1.35rem}
.tv-offline p{max-width:520px;color:#aec0cd;line-height:1.5}
.tv-offline a{color:#6bdcff}
.tv-stream-retry{margin-top:4px;border:1px solid rgba(135,224,255,.68);border-radius:9px;background:#159cca;color:#02121c;padding:9px 18px;font:900 .76rem/1 inherit;cursor:pointer}
.tv-stream-retry:hover,.tv-stream-retry:focus-visible{background:#75e2ff;outline:3px solid var(--focus);outline-offset:2px}

.tv-start-gate{position:absolute;z-index:15;inset:0;display:grid;place-content:center;justify-items:center;gap:9px;padding:26px;text-align:center;background:radial-gradient(circle at 50% 38%,#123d58 0,#04131f 47%,#01070b 100%)}
.tv-start-gate img{width:74px;height:74px;border-radius:20px;box-shadow:0 14px 40px rgba(20,143,214,.32)}
.tv-start-gate strong{margin-top:4px;font:700 1.45rem Georgia,"Times New Roman",serif}
.tv-start-gate button,.tv-playback-retry button{margin-top:6px;border:1px solid rgba(135,224,255,.7);border-radius:10px;background:linear-gradient(180deg,#42cef4,#1798ca);color:#02121c;padding:11px 24px;font:900 .82rem/1 inherit;letter-spacing:.04em;cursor:pointer;box-shadow:0 10px 28px rgba(21,165,216,.28)}
.tv-start-gate button:hover,.tv-start-gate button:focus-visible,.tv-playback-retry button:hover,.tv-playback-retry button:focus-visible{background:#75e2ff;outline:3px solid var(--focus);outline-offset:2px}
.tv-playback-retry{position:absolute;z-index:14;left:50%;top:50%;display:grid;justify-items:center;gap:6px;transform:translate(-50%,-50%);min-width:220px;padding:18px;border:1px solid rgba(166,203,226,.35);border-radius:13px;background:rgba(2,14,23,.94);box-shadow:0 18px 50px rgba(0,0,0,.5);text-align:center}
.tv-playback-retry strong{font-size:.86rem}
.tv-alert-dock{flex:1;min-width:0;height:44px;border-left:1px solid rgba(166,203,226,.22);background:#061a27}
.tv-controls:not(.has-alerts) .tv-alert-dock{display:none}
.tv-alert-ticker{width:100%;height:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;background:#061a27}
.tv-alert-label{display:flex;align-items:center;gap:7px;padding:0 13px;border-right:1px solid rgba(166,203,226,.22);background:#09283a;color:#fff}
.tv-alert-label span,.tv-alert-restore span{width:7px;height:7px;border-radius:50%;background:#ffb43c;box-shadow:0 0 0 4px rgba(255,180,60,.12)}
.tv-alert-label strong{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.tv-alert-window{min-width:0;overflow:hidden}
.tv-alert-track{display:flex;width:max-content;height:100%;align-items:center;animation:tv-alert-scroll var(--ticker-duration,32s) linear infinite;will-change:transform}
.tv-alert-window:hover .tv-alert-track,.tv-alert-window:focus-within .tv-alert-track{animation-play-state:paused}
.tv-alert-item{display:flex;align-items:center;gap:8px;height:100%;padding:0 23px;color:#f4f9fc;text-decoration:none;font-size:.76rem;font-weight:780;white-space:nowrap;border-right:1px solid rgba(166,203,226,.2)}
.tv-alert-item:hover,.tv-alert-item:focus-visible{background:#12394f;color:#fff;outline:0}
.tv-alert-item em{color:#67d8f7;font-size:.62rem;font-style:normal;font-weight:950;letter-spacing:.09em;text-transform:uppercase}
.tv-alert-item.is-weather em{color:#ffd166}
.tv-alert-item.is-emergency em{color:#ff8790}
.tv-alert-item time{color:#afc5d4;font-size:.67rem}
.tv-alert-item b{color:#7ce2fb;font-size:.64rem}
.tv-alert-hide{display:flex;align-items:center;justify-content:center;gap:5px;min-width:62px;border:0;border-left:1px solid rgba(166,203,226,.22);background:#082131;color:#bcd0dd;font:inherit;cursor:pointer}
.tv-alert-hide:hover,.tv-alert-hide:focus-visible{background:#153d52;color:#fff;outline:0}
.tv-alert-hide span{font-size:1.1rem;line-height:1}
.tv-alert-hide b{font-size:.62rem}
.tv-alert-restore{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;border:0;background:#082131;color:#eaf5fb;font:800 .62rem/1 inherit;cursor:pointer}
.tv-alert-restore:hover,.tv-alert-restore:focus-visible{background:#12394f;outline:2px solid var(--focus)}
@keyframes tv-alert-scroll{to{transform:translateX(-50%)}}
.tv-loading[hidden],.tv-channel-overlay[hidden],.tv-guide[hidden],.tv-start-gate[hidden],.tv-playback-retry[hidden],.tv-alert-ticker[hidden],.tv-alert-restore[hidden]{display:none!important}

@media(max-width:980px){.tv-channel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.tv-screen{max-height:none}
.tv-control{min-width:54px;padding:7px 8px}
.tv-control b{display:none}
.tv-channel-step b{display:block}
}

@media(max-width:700px){.tv-topbar{height:62px;padding:0 14px}
.tv-brand-logo{width:36px;height:36px;border-radius:9px}
.tv-brand strong{font-size:1.04rem}
.tv-top-status>span:nth-child(2){display:none}
.tv-main{padding:12px 10px 38px}
.tv-viewer,.tv-guide{border-radius:12px}
.tv-screen{min-height:190px}
.tv-controls{grid-template-columns:auto minmax(0,1fr) auto}
.tv-guide-button,#tvFullscreen{display:none}
.tv-control-center{height:38px}
.tv-control{min-width:46px;padding:5px 7px}
.tv-now-playing{flex:0 1 92px;padding:0 8px}
.tv-now-playing span,.tv-now-playing small{display:none}
.tv-now-playing strong{font-size:.72rem}
.tv-guide{margin-top:12px;padding:15px}
.tv-guide-heading h1{font-size:1.35rem}
.tv-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tv-channel-card{grid-template-columns:42px minmax(0,1fr);padding:8px;gap:8px}
.tv-card-number{width:40px;height:40px}
.tv-channel-overlay{left:10px;top:10px;max-width:calc(100% - 20px);padding:9px 11px 9px 9px}
.tv-channel-overlay b{min-width:42px;height:38px;font-size:1.05rem}
.tv-channel-overlay span{font-size:.68rem}
.tv-start-gate{padding:18px;gap:6px}
.tv-start-gate img{width:54px;height:54px;border-radius:15px}
.tv-start-gate strong{font-size:1.05rem}
.tv-start-gate button{padding:9px 20px;font-size:.72rem}
.tv-playback-retry{min-width:190px;padding:14px}
.tv-alert-dock{height:38px}
.tv-alert-ticker{height:100%}
.tv-alert-label{padding:0 8px}
.tv-alert-label strong{display:none}
.tv-alert-item{gap:6px;padding:0 14px;font-size:.67rem}
.tv-alert-item em{font-size:.54rem}
.tv-alert-item time{font-size:.58rem}
.tv-alert-item b{display:none}
.tv-alert-hide{min-width:34px}
.tv-alert-hide b{display:none}
.tv-alert-restore{padding:0 7px;font-size:.58rem}
}

@media(max-width:420px){.tv-channel-grid{grid-template-columns:1fr}
.tv-guide-heading>span{display:none}
.tv-card-copy strong{font-size:.9rem}
.tv-controls.has-alerts .tv-now-playing{display:none}
.tv-controls.has-alerts .tv-alert-dock{border-left:0}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}
.tv-loading span{animation:none}
.tv-alert-track{animation:none}
.tv-channel-overlay{animation:none}
.tv-alert-window{overflow:auto}
}