:root{
  color-scheme:dark;
  --bg:#07101b;
  --bg-deep:#040a12;
  --panel:#111827;
  --panel-2:#1a2334;
  --surface:#202a3d;
  --surface-hover:#29364d;
  --page-background:radial-gradient(circle at 18% 10%,rgba(20,64,84,.26),transparent 34%),linear-gradient(145deg,var(--bg-deep),var(--bg) 58%,#091622);
  --channel-detail-bg:var(--page-background);
  --line:rgba(178,204,226,.13);
  --line-strong:rgba(178,204,226,.24);
  --text:#f5f8fb;
  --muted:#8da0b2;
  --muted-2:#637689;
  --brand-navy:#313848;
  --green:#039fa8;
  --green-deep:#039fa8;
  --amber:#039fa8;
  --red:#fb5c6a;
  --shadow:0 22px 70px rgba(0,0,0,.35);
  --radius-lg:24px;
  --radius-md:16px;
  --topbar:76px;
  --header-control-height:44px;
  --sidebar-width:340px;
  --sidebar-gutter:19px;
  --viewer-gutter:var(--sidebar-gutter);
  --viewer-right-edge:var(--viewer-gutter);
  --sidebar-background:radial-gradient(circle at 18% 0,rgba(255,255,255,.2),transparent 28%),radial-gradient(circle at 92% 12%,rgba(3,159,168,.88),transparent 38%),linear-gradient(180deg,#039FA8 0,rgba(3,159,168,.82) 42%,rgba(3,159,168,.34) 100%),#07131e;
  --font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-xs:11px;
  --font-sm:12px;
  --font-md:14px;
  --font-body:15px;
  --font-base:16px;
  --font-lg:18px;
  --font-xl:20px;
  --font-2xl:24px;
  --font-3xl:35px;
  --font-display:clamp(39px,5vw,64px);
  --font-display-mobile:clamp(38px,10vw,56px);
  --font-display-compact:clamp(30px,6vw,42px);
  --font-display-small:30px;
  font-family:var(--font-family);
}

*{box-sizing:border-box;letter-spacing:normal}
html{min-height:100%;background:var(--bg-deep);scrollbar-color:var(--surface-hover) var(--bg)}
body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden;background:var(--page-background);color:var(--text);font-family:var(--font-family);font-size:var(--font-body);line-height:1.5}
body.is-booting{height:100dvh;min-height:0;overflow:hidden}
body.is-booting #loginView,body.is-booting #appView{display:none!important}
body.login-active{display:grid;height:100dvh;min-height:0;overflow:hidden;padding:0;place-items:center}
body.app-active{height:100dvh;min-height:0;overflow:hidden}
button,input{font:inherit}
button{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:3px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;margin:-1px!important;padding:0!important;border:0!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.startup-splash{position:fixed;inset:0;z-index:1000;display:grid;background:radial-gradient(circle at 50% 44%,rgba(3,159,168,.13),transparent 30%),linear-gradient(145deg,#030a11,#081521 58%,#07111b);padding:24px;place-items:center;transition:opacity .24s ease,visibility .24s ease}.startup-splash.is-leaving{opacity:0;visibility:hidden;pointer-events:none}.startup-splash-content{display:flex;width:min(360px,88vw);align-items:center;flex-direction:column;text-align:center}.startup-splash-content>img{width:clamp(164px,45vw,220px);height:auto;margin-bottom:42px}.startup-splash-content>strong{margin-top:30px;color:#fff;font-size:var(--font-xl);font-weight:780}.startup-splash-content>p{min-height:21px;margin:7px 0 22px;color:var(--muted);font-size:var(--font-sm)}.startup-progress{width:min(280px,76vw);height:3px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.1)}.startup-progress i{display:block;width:8%;height:100%;border-radius:inherit;background:var(--green);box-shadow:0 0 18px rgba(3,159,168,.55);transition:width .3s ease}
.ambient{position:fixed;z-index:-1;border-radius:50%;filter:blur(120px);pointer-events:none}
.ambient-one{top:-18vw;left:-9vw;width:45vw;height:45vw;background:rgba(49,56,72,.2)}
.ambient-two{right:-18vw;bottom:-30vw;width:55vw;height:55vw;background:rgba(3,159,168,.1)}
.eyebrow{margin:0 0 5px;color:var(--green);font-size:var(--font-xs);font-weight:800;text-transform:uppercase}
.brand{display:inline-flex;align-items:center;color:var(--text);text-decoration:none}
.brand-logo{display:block;width:126px;height:auto;object-fit:contain}

/* Acceso */
.login-shell{position:relative;isolation:isolate;display:grid;width:100%;height:100dvh;margin:0;border:0;border-radius:0;background:#0a1723;grid-template-columns:minmax(0,1fr);overflow:hidden}
.login-shell::after{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 46%,rgba(4,14,22,.22),rgba(3,10,17,.48) 76%),linear-gradient(145deg,rgba(8,23,34,.2),rgba(3,12,20,.4));content:"";pointer-events:none}
.login-panel{position:relative;z-index:2;display:flex;min-height:0;padding:clamp(22px,4vh,34px);background:transparent;align-items:center;justify-content:center}
.login-content{display:flex;width:min(100%,460px);margin:auto;border:0;background:transparent;padding:28px 30px;align-items:stretch;justify-content:center;flex-direction:column;gap:20px}
.brand-login{display:flex;width:100%;justify-content:center}
.brand-login .brand-logo{width:190px}
.login-copy{display:grid;width:100%;margin:0;gap:8px;text-align:center}
.login-copy .eyebrow{margin:0}
.login-copy h1{margin:0;color:#fff;font-size:var(--font-2xl);font-weight:780;line-height:1.12}
.login-copy h1 span{color:var(--green);text-shadow:0 0 22px rgba(3,159,168,.2)}
.login-copy>p:last-child{margin:0;color:var(--muted);font-size:var(--font-md)}
.login-form{display:grid;width:100%;gap:24px}
.login-form label{display:grid;gap:0;color:#c8d3dd;font-size:var(--font-sm);font-weight:750}
.login-form input{width:100%;height:53px;border:1px solid var(--line-strong);border-radius:13px;background:rgba(3,10,17,.65);padding:0 16px;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}
.login-form input::placeholder{color:#5f7182}
.login-form input:focus{border-color:rgba(3,159,168,.72);box-shadow:0 0 0 4px rgba(3,159,168,.1)}
.password-field{position:relative;display:block}
.password-field input{padding-right:52px}
.password-field button{position:absolute;top:50%;right:8px;display:grid;width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--muted);place-items:center;transform:translateY(-50%);cursor:pointer}
.password-field button:hover{background:var(--surface);color:var(--text)}
.captcha-field{display:grid;grid-template-columns:minmax(0,1fr) 152px 46px;align-items:center;gap:9px}
.captcha-field input{text-transform:uppercase}
.captcha-field input::placeholder{text-transform:none}
.captcha-image{display:block;height:56px;overflow:hidden;border:1px solid var(--line-strong);border-radius:12px;background:#07101b}
.captcha-image img{display:block;width:100%;height:100%;object-fit:fill;transform:scale(1.08,1.14);transform-origin:center}
.captcha-field button{display:grid;width:46px;height:53px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--green);place-items:center;cursor:pointer;transition:background .18s,border-color .18s}
.captcha-field button:hover{border-color:rgba(3,159,168,.55);background:var(--surface-hover)}
.captcha-field button svg{width:19px;height:19px}
.captcha-help{margin-top:-3px;color:var(--muted-2);font-size:var(--font-xs);font-weight:500}
.form-error{margin:0;padding:10px 12px;border:1px solid rgba(251,92,106,.28);border-radius:10px;background:rgba(251,92,106,.08);color:#ff9da6;font-size:var(--font-md)}
.primary-button{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;margin-top:3px;border:0;border-radius:13px;background:#fff;color:#07101b;font-weight:850;box-shadow:0 12px 34px rgba(255,255,255,.16);cursor:pointer;transition:transform .18s,background-color .18s,box-shadow .18s}
.primary-button:hover{background:#f2f6f8;box-shadow:0 14px 38px rgba(255,255,255,.22);transform:translateY(-1px)}
.primary-button:disabled{cursor:wait;filter:saturate(.4);transform:none}
.primary-button svg{width:18px;height:18px;stroke-width:2.4}
.login-exclusive{display:block;margin-top:1px;color:rgba(218,228,236,.68);font-size:var(--font-xs);font-weight:500;text-align:center}
.login-visual{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;background:#0a1723}
.login-visual::before{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:42px 42px;content:"";mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 75%,transparent)}
.login-visual::after{position:absolute;inset:-4%;z-index:0;background:url("login-callejon-huaylas-desktop.jpg") center/cover no-repeat;content:"";filter:brightness(1.16) saturate(1.06);transform:translate3d(-.7%,0,0) scale(1.04);animation:backdropDrift 20s ease-in-out infinite alternate;will-change:transform}
.signal-orbit{position:absolute;top:50%;left:50%;z-index:2;border:1px solid rgba(3,159,168,.16);border-radius:50%;opacity:.42;transform:translate(-50%,-50%)}
.orbit-one{width:510px;height:510px;animation:orbitPulse 5s ease-in-out infinite}.orbit-two{width:740px;height:740px;border-color:rgba(3,159,168,.08);animation:orbitPulse 6.5s ease-in-out -2.4s infinite reverse}
.signal-card{position:absolute;z-index:2;border:0;background:transparent;box-shadow:none}
.signal-main{top:50%;left:50%;display:grid;width:min(540px,78%);min-height:310px;border-radius:28px;padding:38px;opacity:.42;transform:translate(-50%,-50%) rotate(-2deg);place-items:center}
.signal-main::before{display:none}
.signal-glyph{position:relative;display:flex;width:108px;height:108px;border:1px solid rgba(3,159,168,.28);border-radius:50%;background:rgba(3,159,168,.08);align-items:flex-end;justify-content:center;gap:8px;padding-bottom:30px;box-shadow:0 0 55px rgba(3,159,168,.16)}
.signal-glyph i{display:block;width:9px;border-radius:9px;background:var(--green);box-shadow:0 0 16px rgba(3,159,168,.4)}
.signal-glyph i:nth-child(1){height:17px;opacity:.55}.signal-glyph i:nth-child(2){height:31px;opacity:.78}.signal-glyph i:nth-child(3){height:47px}
.signal-mini{display:flex;align-items:flex-end;justify-content:center;gap:6px;min-width:94px;min-height:66px;padding:15px 19px;border-radius:16px;opacity:.62;animation:float 5s ease-in-out infinite}
.signal-mini i{display:block;width:7px;border-radius:6px;background:var(--green)}.signal-mini i:nth-child(1){height:12px;opacity:.4}.signal-mini i:nth-child(2){height:22px;opacity:.65}.signal-mini i:nth-child(3){height:32px}
.mini-one{top:18%;right:7%;animation-delay:-1s}.mini-two{bottom:17%;left:7%;animation-delay:-3s}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes backdropDrift{to{transform:translate3d(.7%,-.5%,0) scale(1.07)}}
@keyframes orbitPulse{50%{opacity:.18;transform:translate(-50%,-50%) scale(1.035)}}

/* Aplicación */
.tv-app{position:relative;isolation:isolate;height:100dvh;min-height:0;overflow:hidden}.tv-app::before{position:fixed;top:0;bottom:0;left:0;z-index:0;width:var(--sidebar-width);background:var(--sidebar-background);box-shadow:24px 0 70px rgba(3,159,168,.16);content:"";pointer-events:none}
.topbar{position:relative;z-index:50;display:grid;height:var(--topbar);border-bottom:0;background:transparent;padding:0;grid-template-columns:var(--sidebar-width) minmax(0,1fr);align-items:center}
.topbar::before{display:none}.topbar>*{position:relative;z-index:1}.topbar>.brand,.topbar>.topbar-favorites,.topbar>.topbar-search,.topbar>.topbar-actions,.topbar>#menuButton{translate:0 4px}
.topbar::after{display:none}
.topbar>.brand{height:var(--header-control-height);margin-left:var(--sidebar-gutter);grid-column:1;grid-row:1;align-self:center;justify-self:start}.topbar>.brand picture{display:block;line-height:0}.topbar-favorites{display:flex;height:var(--header-control-height);margin-right:var(--sidebar-gutter);border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 12px;color:var(--muted);grid-column:1;grid-row:1;align-items:center;align-self:center;gap:7px;font-size:var(--font-sm);font-weight:750;justify-self:end;cursor:pointer;transition:border-color .16s,background .16s,color .16s}.topbar-favorites:hover,.topbar-favorites[aria-pressed="true"]{border-color:rgba(3,159,168,.32);background:rgba(3,159,168,.1);color:var(--green)}.topbar-favorites svg{width:17px;height:17px;fill:transparent}.topbar-favorites[aria-pressed="true"] svg{fill:currentColor}.topbar-search{width:clamp(220px,calc(100% - 590px),360px);margin:0 0 0 var(--viewer-gutter);grid-column:2;grid-row:1;align-self:center;justify-self:start}.topbar-actions{position:relative;display:flex;height:var(--header-control-height);margin-right:var(--viewer-right-edge);grid-column:2;grid-row:1;align-items:center;align-self:center;gap:13px;justify-self:end}
.user-button{display:flex;height:var(--header-control-height);border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 10px 0 6px;align-items:center;gap:9px;cursor:pointer}
.user-button>span:first-child{display:grid;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand-navy),var(--green-deep));font-size:var(--font-sm);font-weight:850;place-items:center}
.user-button>span:nth-child(2){max-width:130px;overflow:hidden;font-size:var(--font-sm);font-weight:700;text-overflow:ellipsis;white-space:nowrap}.user-button svg{width:14px}
.user-menu{position:absolute;top:52px;right:0;width:220px;border:1px solid var(--line-strong);border-radius:15px;background:#101d2a;padding:10px;box-shadow:0 18px 55px rgba(0,0,0,.42)}
.user-menu p{display:flex;margin:0 0 8px;padding:8px;flex-direction:column}.user-menu small{margin-top:2px;color:var(--muted);font-size:var(--font-xs)}.user-menu button{display:flex;width:100%;border:0;border-radius:10px;background:transparent;padding:10px;align-items:center;gap:9px;cursor:pointer}.user-menu .menu-adults{color:#dce6ed}.user-menu .menu-adults:hover{background:rgba(3,159,168,.09);color:var(--green)}.user-menu .menu-logout{color:#ff9ca5}.user-menu .menu-logout:hover{background:rgba(251,92,106,.08)}.user-menu svg{width:17px}
.icon-button{display:grid;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0;place-items:center;cursor:pointer}
.workspace{display:grid;height:calc(100dvh - var(--topbar));min-height:0;grid-template-columns:var(--sidebar-width) minmax(0,1fr);overflow:hidden}
.channel-panel{position:relative;z-index:1;display:flex;height:100%;min-height:0;border-right:1px solid rgba(3,159,168,.7);background:transparent;padding:clamp(9px,1.25vh,14px) var(--sidebar-gutter) 14px;flex-direction:column;overflow:hidden}
.panel-heading{display:flex;padding:0 7px 17px;align-items:center;justify-content:space-between}.panel-heading h2{margin:0;font-size:var(--font-xl)}
.panel-close{margin:0 0 10px auto}
.search-box{display:flex;height:var(--header-control-height);border:1px solid var(--line);border-radius:13px;background:rgba(2,9,16,.55);padding:0 11px;align-items:center;gap:9px;transition:border-color .2s}.search-box:focus-within{border-color:rgba(3,159,168,.55)}
.search-box svg{width:17px;color:var(--muted)}.search-box input{min-width:0;border:0;background:transparent;color:var(--text);outline:0;flex:1}.search-box input::placeholder{color:var(--muted-2)}.search-box kbd{border:1px solid var(--line);border-radius:5px;background:var(--surface);padding:0 6px;color:var(--muted);font-size:var(--font-xs);line-height:21px}
.category-list{min-height:0;overflow-y:auto;margin:0 -30px;padding:0 30px 30px;flex:1;scrollbar-width:none}
.category-list::-webkit-scrollbar{display:none;width:0;height:0}
.category-list.can-scroll-down{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 34px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 34px),transparent 100%)}
.channel-list>.channel-category{display:contents}
.channel-category>.current-category-header{position:sticky;top:0;z-index:3;pointer-events:none;transition:opacity .12s linear}
.channel-category>.channel-category-items{margin:0 -30px 18px;padding-inline:30px}
.channel-category>.current-category-header small{right:9px;width:28px;text-align:center}
.channel-category-items.is-under-heading{clip-path:inset(var(--category-heading-overlap) -30px 0);-webkit-mask-image:linear-gradient(to bottom,transparent var(--category-heading-overlap),#000 calc(var(--category-heading-overlap) + 20px));mask-image:linear-gradient(to bottom,transparent var(--category-heading-overlap),#000 calc(var(--category-heading-overlap) + 20px))}
.channel-list{min-height:0;padding:0 0 12px}
.current-category-header{position:relative;display:flex;min-height:44px;margin:0;background:none;padding:0 36px 10px;align-items:center;justify-content:center;flex:none}.current-category-header::after{position:absolute;right:4px;bottom:2px;left:4px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);box-shadow:0 0 9px rgba(255,255,255,.18);content:""}.current-category-header span{min-width:0;overflow:hidden;color:#fff;font-size:var(--font-base);font-weight:800;text-align:center;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-9px)}.current-category-header small{position:absolute;right:8px;color:rgba(255,255,255,.8);font-size:var(--font-xs);font-weight:750;transform:translateY(-9px)}.channel-category{margin:0 0 18px;border:0;background:none}.channel-category-items{padding:7px 0 0}
.channel-item{position:relative;display:grid;width:100%;min-height:66px;margin:4px 0;border:1px solid transparent;border-radius:14px;background:transparent;padding:8px;grid-template-columns:48px minmax(0,1fr) 28px;align-items:center;gap:10px;text-align:left;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}.channel-item:hover{z-index:1;background:rgba(32,42,61,.7);transform:scale(1.012)}.channel-item.is-active{border-color:#039FA8;background:linear-gradient(105deg,#039FA8,rgba(3,159,168,.72));color:#fff;box-shadow:0 8px 24px rgba(3,159,168,.16)}.channel-item.is-active::before{position:absolute;top:13px;bottom:13px;left:-1px;width:3px;border-radius:4px;background:#fff;content:""}.channel-item.is-active .channel-copy strong{color:#fff}.channel-item.is-active .channel-copy small{color:rgba(255,255,255,.78)}.channel-item.is-active .channel-logo{border-color:rgba(255,255,255,.3);color:#fff}.channel-item.is-active .channel-favorite{color:rgba(255,255,255,.82)}.channel-item.is-active .channel-favorite.is-active{color:#fff}
.channel-panel .channel-item.is-active{border-color:rgba(255,255,255,.34);background:rgba(7,25,36,.65);box-shadow:0 10px 28px rgba(0,0,0,.2)}
.channel-logo{display:grid;width:48px;height:48px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--muted);font-size:var(--font-xs);font-weight:900;place-items:center}.channel-logo img{width:125%;height:125%;max-width:none;object-fit:contain;padding:4px;align-self:start;justify-self:center}.channel-copy{min-width:0;display:flex;flex-direction:column}.channel-copy strong{overflow:hidden;font-size:var(--font-md);text-overflow:ellipsis;white-space:nowrap}.channel-copy small{margin-top:3px;color:var(--muted-2);font-size:var(--font-xs)}.channel-favorite{display:grid;width:28px;height:28px;border:0;background:transparent;padding:0;color:var(--muted-2);place-items:center;cursor:pointer}.channel-favorite:hover,.channel-favorite.is-active{color:var(--amber)}.channel-favorite svg{width:15px;height:15px;fill:transparent}.channel-favorite.is-active svg{fill:currentColor}
.channel-programme{display:block;width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap;-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%)}
.channel-panel .channel-programme{color:rgba(255,255,255,.76);font-weight:500}
.channel-panel .channel-favorite{border-radius:8px;color:rgba(255,255,255,.68);transition:color .16s ease,transform .16s ease}.channel-panel .channel-favorite:hover,.channel-panel .channel-favorite:focus-visible{background:transparent;color:#fff;outline:0;transform:scale(1.06)}.channel-panel .channel-favorite.is-active{background:transparent;color:#fff}.channel-panel .channel-item.is-active .channel-favorite{color:rgba(255,255,255,.76)}.channel-panel .channel-item.is-active .channel-favorite:hover,.channel-panel .channel-item.is-active .channel-favorite:focus-visible,.channel-panel .channel-item.is-active .channel-favorite.is-active{background:transparent;color:#fff}
.topbar-favorites{border-color:rgba(255,255,255,.3);background:rgba(3,12,18,.2);color:rgba(255,255,255,.88);backdrop-filter:blur(12px)}.topbar-favorites:hover,.topbar-favorites:focus-visible{border-color:rgba(255,255,255,.5);background:rgba(12,23,36,.48);color:#fff;outline:0;transform:translateY(-1px)}.topbar-favorites[aria-pressed="true"]{border-color:rgba(255,255,255,.46);background:var(--channel-detail-bg);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.channel-skeleton{display:grid;gap:9px}.channel-skeleton i{height:60px;border-radius:13px;background:linear-gradient(100deg,rgba(255,255,255,.025) 30%,rgba(255,255,255,.065) 50%,rgba(255,255,255,.025) 70%);background-size:260% 100%;animation:shimmer 1.4s infinite}.channel-skeleton i:nth-child(2){opacity:.88}.channel-skeleton i:nth-child(3){opacity:.72}.channel-skeleton i:nth-child(4){opacity:.56}.channel-skeleton i:nth-child(5){opacity:.4}
@keyframes shimmer{to{background-position-x:-120%}}
.list-empty{padding:38px 18px;color:var(--muted);font-size:var(--font-sm);text-align:center}

.viewer{display:grid;width:100%;height:100%;min-height:0;max-width:none;margin:0;background:transparent;padding:clamp(9px,1.25vh,14px) var(--viewer-gutter) clamp(12px,2vh,20px);grid-column:2;grid-template-rows:minmax(0,1fr);overflow:hidden}
.player-card{display:grid;height:calc(100% + 1px);margin-top:-1px;min-height:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(12,23,36,.78);grid-template-rows:minmax(0,1fr) auto;box-shadow:0 18px 54px rgba(0,0,0,.18);overflow:hidden}
.video-stage{position:relative;display:grid;height:100%;min-height:0;background:#020609;place-items:center;overflow:hidden}.video-stage video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}#videoPlayer{z-index:1}.video-stage .airplay-player{z-index:0;opacity:0;pointer-events:none}.video-stage.is-airplay-active #videoPlayer{opacity:0}.video-stage.is-airplay-active .airplay-player{z-index:2;opacity:1}
.video-stage:fullscreen{width:100vw;height:100vh}.video-stage:-webkit-full-screen{width:100vw;height:100vh}
.player-empty,.player-loading,.player-error{position:absolute;inset:0;z-index:3;display:flex;background:radial-gradient(circle at 50% 45%,#0d2533,#03080d 68%);padding:30px;align-items:center;justify-content:center;flex-direction:column;text-align:center}.player-empty strong,.player-error strong{margin-top:16px;font-size:var(--font-lg)}.player-empty p,.player-error p{margin:6px 0 0;color:var(--muted);font-size:var(--font-sm)}
.empty-signal{display:flex;height:54px;align-items:flex-end;gap:7px}.empty-signal i{display:block;width:9px;border-radius:8px;background:var(--green-deep)}.empty-signal i:nth-child(1){height:21px;opacity:.45}.empty-signal i:nth-child(2){height:36px;opacity:.7}.empty-signal i:nth-child(3){height:52px;box-shadow:0 0 25px rgba(3,159,168,.38)}
.player-loading{overflow:hidden;background:linear-gradient(to bottom,rgba(6,17,28,.6) 0,rgba(6,17,28,.45) 52%,rgba(6,17,28,.7) 100%);opacity:1;visibility:visible;backdrop-filter:none;isolation:isolate;transition:opacity .18s ease,visibility .18s ease}.player-loading.is-revealing{opacity:0;visibility:hidden;pointer-events:none}.loading-channel-glow{position:absolute;inset:0;display:grid;overflow:hidden;background:#142735;color:rgba(255,255,255,.32);font-size:clamp(54px,9vw,110px);font-weight:900;place-items:center;opacity:.78;z-index:0}.loading-channel-glow img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;transform:scale(1.35);filter:blur(72px) saturate(1.55) brightness(.68);opacity:1}.loading-channel-glow img.ambient-logo-next{opacity:0;transition:opacity .18s ease}.loading-channel-glow img.ambient-logo-next.is-loaded{opacity:1}.player-loading.is-buffering .loading-channel-glow{display:none}.player-loading .loading-spinner{--loader-idle:#fff;--loader-active:#039FA8;--loader-size:1px;position:relative;z-index:2;display:block;width:calc(12 * var(--loader-size));height:calc(12 * var(--loader-size));border-radius:50%;box-sizing:border-box;animation:bubble-loader .65s linear infinite alternate}@keyframes bubble-loader{0%{box-shadow:calc(-38 * var(--loader-size)) calc(-12 * var(--loader-size)) var(--loader-active),calc(-14 * var(--loader-size)) 0 var(--loader-idle),calc(14 * var(--loader-size)) 0 var(--loader-idle),calc(38 * var(--loader-size)) 0 var(--loader-idle)}33%{box-shadow:calc(-38 * var(--loader-size)) 0 var(--loader-idle),calc(-14 * var(--loader-size)) calc(-12 * var(--loader-size)) var(--loader-active),calc(14 * var(--loader-size)) 0 var(--loader-idle),calc(38 * var(--loader-size)) 0 var(--loader-idle)}66%{box-shadow:calc(-38 * var(--loader-size)) 0 var(--loader-idle),calc(-14 * var(--loader-size)) 0 var(--loader-idle),calc(14 * var(--loader-size)) calc(-12 * var(--loader-size)) var(--loader-active),calc(38 * var(--loader-size)) 0 var(--loader-idle)}100%{box-shadow:calc(-38 * var(--loader-size)) 0 var(--loader-idle),calc(-14 * var(--loader-size)) 0 var(--loader-idle),calc(14 * var(--loader-size)) 0 var(--loader-idle),calc(38 * var(--loader-size)) calc(-12 * var(--loader-size)) var(--loader-active)}}
.player-error{overflow:hidden;background:rgba(3,8,13,.88);align-items:center;justify-content:center;text-align:center}.error-channel-glow{position:absolute;inset:12% 22%;display:grid;background:transparent;color:rgba(255,255,255,.3);font-size:clamp(54px,9vw,110px);font-weight:900;place-items:center;opacity:.46;filter:blur(48px) saturate(2.15);transform:scale(1.55)}.error-channel-glow img{width:100%;height:100%;object-fit:contain}.player-error svg,.player-error strong,.player-error p,.player-error .player-retry-countdown,.player-error button{position:relative;z-index:1}.player-error svg{width:48px;height:48px;color:var(--green)}.player-error strong{max-width:min(520px,90%);text-align:center}.player-error p{max-width:min(520px,90%);text-align:center}.player-retry-countdown{margin-top:8px;color:var(--green);font-size:var(--font-sm);font-weight:700}.player-error button{margin-top:17px;border:1px solid rgba(3,159,168,.38);border-radius:10px;background:rgba(3,159,168,.12);padding:9px 17px;color:#eef7f8;font-size:var(--font-sm);font-weight:750;cursor:pointer}.player-error button:hover{background:rgba(3,159,168,.2)}
.player-error button{display:inline-flex;min-width:156px;min-height:40px;align-items:center;justify-content:center;gap:8px;text-align:center}.player-error button svg{width:17px;height:17px;color:currentColor;flex:0 0 17px}
.audio-prompt{position:absolute;right:0;bottom:0;left:0;z-index:7;display:flex;width:100%;height:96px;border:0;background:linear-gradient(to top,rgba(0,0,0,.84) 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,.16) 73%,transparent 100%);padding:46px 16px 5px;color:#f2f7f9;align-items:flex-end;justify-content:center;cursor:pointer;opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .22s ease,visibility .18s ease}.audio-prompt.is-hiding{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px)}.audio-prompt span{display:flex;min-height:38px;border:1px solid rgba(3,159,168,.2);border-radius:12px;background:rgba(3,12,17,.5);padding:8px 13px;align-items:center;gap:9px;font-size:var(--font-md);font-weight:500;box-shadow:0 9px 28px rgba(0,0,0,.24);transition:background .16s ease,color .16s ease,transform .16s ease}.audio-prompt:hover span{background:rgba(3,159,168,.13);color:#fff;transform:translateY(-1px)}.audio-prompt svg{width:20px;height:20px;color:var(--green);filter:drop-shadow(0 0 8px rgba(3,159,168,.25))}
.player-controls{position:absolute;right:0;bottom:0;left:0;z-index:6;display:flex;width:100%;height:96px;border:0;border-radius:0;background:linear-gradient(to top,rgba(0,0,0,.84) 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,.16) 73%,transparent 100%);padding:46px 16px 5px;align-items:flex-end;justify-content:flex-end;gap:8px;box-shadow:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px);transition:opacity .18s ease,transform .22s ease,visibility .18s ease}.video-stage:hover .player-controls,.video-stage:focus-within .player-controls,.video-stage.is-controls-visible .player-controls{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.volume-control{display:flex;align-items:center;gap:7px}.control-divider{display:block;width:1px;height:23px;margin:0 2px;background:linear-gradient(transparent,rgba(255,255,255,.26),transparent)}.player-controls button{position:relative;display:grid;width:38px;height:38px;border:1px solid transparent;border-radius:10px;background:transparent;color:#f4f7fa;padding:0;place-items:center;flex:0 0 38px;cursor:pointer;text-shadow:0 1px 8px rgba(0,0,0,.9);transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease}.player-controls button:hover,.player-controls button[aria-pressed="true"]{border-color:rgba(3,159,168,.18);background:rgba(3,159,168,.15);color:var(--green);transform:translateY(-1px)}.player-controls button:disabled{opacity:.35;cursor:not-allowed;transform:none}.player-controls svg{width:20px;height:20px;flex:none;stroke-width:1.8;filter:drop-shadow(0 1px 5px rgba(0,0,0,.8))}.player-controls input[type="range"]{--volume-level:100%;width:116px;height:16px;margin:0 3px 0 0;border:0;background:transparent;padding:0;appearance:none;-webkit-appearance:none;accent-color:var(--green);cursor:pointer;filter:drop-shadow(0 1px 4px rgba(0,0,0,.8))}.player-controls input[type="range"]::-webkit-slider-runnable-track{height:4px;border:0;border-radius:999px;background:linear-gradient(to right,var(--green) 0,var(--green) var(--volume-level),rgba(255,255,255,.28) var(--volume-level),rgba(255,255,255,.28) 100%)}.player-controls input[type="range"]::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4px;border:2px solid var(--green);border-radius:50%;background:#fff;appearance:none;-webkit-appearance:none;box-shadow:0 1px 6px rgba(0,0,0,.55)}.player-controls input[type="range"]::-moz-range-track{height:4px;border:0;border-radius:999px;background:rgba(255,255,255,.28)}.player-controls input[type="range"]::-moz-range-progress{height:4px;border-radius:999px;background:var(--green)}.player-controls input[type="range"]::-moz-range-thumb{width:9px;height:9px;border:2px solid var(--green);border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.55)}
@media (hover:none),(pointer:coarse){.video-stage:hover:not(.is-controls-visible) .player-controls{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px)}.player-controls button:hover:not([aria-pressed="true"]){border-color:transparent;background:transparent;color:#f4f7fa;transform:none}}
.player-controls button::after{position:absolute;bottom:calc(100% + 8px);left:50%;z-index:3;width:max-content;max-width:190px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:rgba(5,12,18,.96);padding:6px 9px;color:#eef4f7;content:attr(aria-label);font-size:var(--font-xs);font-weight:500;line-height:1.2;text-align:center;text-shadow:none;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.38);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,4px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease}.player-controls button:hover::after,.player-controls button:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}#fullscreenButton::after{right:0;left:auto;transform:translateY(4px)}#fullscreenButton:hover::after,#fullscreenButton:focus-visible::after{transform:translateY(0)}
.player-controls #remoteButton.is-remote-disconnect svg{width:23px;height:23px;stroke-width:2.6}
.video-stage:fullscreen:hover .player-controls,.video-stage:fullscreen:focus-within .player-controls,.video-stage:-webkit-full-screen:hover .player-controls,.video-stage:-webkit-full-screen:focus-within .player-controls{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px)}.video-stage:fullscreen.is-controls-visible .player-controls,.video-stage:-webkit-full-screen.is-controls-visible .player-controls{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.video-stage.is-audio-blocked .player-controls{opacity:0;visibility:hidden;pointer-events:none}
.cast-status{position:absolute;inset:0;z-index:8;display:flex;background:radial-gradient(circle at 50% 46%,rgba(3,159,168,.13),transparent 42%),linear-gradient(145deg,#02070c,#051019);padding:clamp(22px,5vw,48px);align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:16px}.cast-status::before{position:absolute;width:min(360px,68%);aspect-ratio:1;border:1px solid rgba(3,159,168,.08);border-radius:50%;background:radial-gradient(circle,rgba(3,159,168,.09),transparent 68%);content:"";filter:blur(2px);pointer-events:none}.cast-status-icon,.cast-status-copy,.cast-status button{position:relative;z-index:1}.cast-status-icon{display:grid;width:74px;height:74px;border:1px solid rgba(3,159,168,.32);border-radius:22px;background:rgba(3,159,168,.12);color:var(--green);place-items:center;box-shadow:0 16px 46px rgba(0,0,0,.28),0 0 32px rgba(3,159,168,.1)}.cast-status-icon svg{width:35px;height:35px;stroke-width:1.7}.cast-status-copy{display:grid;max-width:min(480px,90%);gap:4px}.cast-status-copy span{color:#a9bac7;font-size:var(--font-sm);font-weight:600}.cast-status-copy strong{overflow:hidden;color:#fff;font-size:clamp(18px,2.2vw,24px);font-weight:780;text-overflow:ellipsis;white-space:nowrap}.cast-status button{display:flex;min-width:150px;height:44px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#fff;padding:0 18px;color:#07101b;align-items:center;justify-content:center;gap:8px;font-size:var(--font-sm);font-weight:820;cursor:pointer;transition:background .16s ease,transform .16s ease,opacity .16s ease}.cast-status button:hover{background:#edf3f5;transform:translateY(-1px)}.cast-status button:disabled{opacity:.55;cursor:wait;transform:none}.cast-status button svg{width:17px;height:17px;stroke-width:2.2}.video-stage.is-casting .player-controls,.video-stage.is-casting .audio-prompt,.video-stage.is-casting .player-empty,.video-stage.is-casting .player-loading,.video-stage.is-casting .player-error,.video-stage.is-pip-active .player-controls,.video-stage.is-pip-active .audio-prompt,.video-stage.is-pip-active .player-empty,.video-stage.is-pip-active .player-loading,.video-stage.is-pip-active .player-error{display:none!important}
.now-playing{display:grid;min-height:96px;padding:10px 16px;grid-template-columns:64px minmax(120px,.75fr) minmax(240px,1.6fr) 44px;align-items:center;gap:14px}.active-logo{display:grid;width:64px;height:64px;overflow:hidden;border:1px solid var(--line);border-radius:15px;background:transparent;color:var(--muted);font-size:var(--font-sm);font-weight:900;place-items:center}.active-logo img{width:125%;height:125%;max-width:none;object-fit:contain;padding:4px;align-self:start;justify-self:center}.channel-identity{min-width:0}.channel-identity h1{margin:0;overflow:hidden;font-size:var(--font-xl);text-overflow:ellipsis;white-space:nowrap}.channel-guide{display:grid;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.channel-guide p{display:grid;min-width:0;min-height:66px;margin:0;border:1px solid var(--line);border-radius:12px;background:rgba(15,29,43,.58);padding:8px 10px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label time" "title title";align-content:center;column-gap:8px;line-height:1.25}.channel-guide span{grid-area:label;color:var(--green);font-size:var(--font-xs);font-weight:850}.channel-guide time{grid-area:time;color:var(--muted);font-size:var(--font-xs);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.channel-guide strong{display:block;grid-area:title;min-width:0;overflow:hidden;margin-top:3px;color:#dce5ec;font-size:var(--font-md);font-weight:400;text-overflow:clip;white-space:nowrap;-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%)}
.favorite-button{display:grid;width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--muted);place-items:center;cursor:pointer}.favorite-button:hover,.favorite-button[aria-pressed="true"]{border-color:rgba(3,159,168,.34);color:var(--amber)}.favorite-button svg{fill:transparent}.favorite-button[aria-pressed="true"] svg{fill:currentColor}.favorite-button:disabled{opacity:.4;cursor:default}
.mobile-channel-carousel{display:none}
.toast{position:fixed;right:22px;bottom:22px;z-index:100;max-width:min(390px,calc(100vw - 44px));border:1px solid var(--line-strong);border-radius:13px;background:#152536;padding:12px 15px;color:#dce6ed;box-shadow:var(--shadow);font-size:var(--font-sm)}
.profile-modal{position:fixed;inset:0;z-index:1100;display:grid;background:rgba(2,7,12,.7);padding:22px;place-items:center;backdrop-filter:blur(12px)}
.profile-modal-card{width:min(470px,100%);max-height:calc(100dvh - 44px);overflow-y:auto;border:1px solid var(--line-strong);border-radius:22px;background:#0b1724;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.56);animation:profileModalIn .2s ease-out}
.profile-modal-header{display:grid;grid-template-columns:48px minmax(0,1fr) 38px;align-items:center;gap:12px}.profile-modal-icon{display:grid;width:48px;height:48px;border:1px solid rgba(3,159,168,.28);border-radius:14px;background:rgba(3,159,168,.1);color:var(--green);place-items:center}.profile-modal-icon svg{width:25px;height:25px}.profile-modal-header p{margin:0 0 2px;color:var(--green);font-size:var(--font-xs);font-weight:800;text-transform:uppercase}.profile-modal-header h2{margin:0;font-size:var(--font-xl);line-height:1.2}.profile-modal-close{display:grid;width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--muted);padding:0;place-items:center;cursor:pointer}.profile-modal-close:hover{background:var(--surface);color:#fff}.profile-modal-close svg{width:18px;height:18px}
.adult-unavailable{display:flex;margin-top:20px;border:1px solid rgba(3,159,168,.25);border-radius:14px;background:rgba(3,159,168,.08);padding:16px;align-items:flex-start;gap:12px}.adult-unavailable>span{display:grid;width:42px;height:42px;border-radius:12px;background:rgba(3,159,168,.12);color:var(--green);place-items:center;flex:none}.adult-unavailable svg{width:23px;height:23px}.adult-unavailable strong{display:block;color:#eef7f8;font-size:var(--font-md)}.adult-unavailable p{margin:4px 0 0;color:#9fb1bf;font-size:var(--font-sm);line-height:1.45}
.profile-form{display:grid;gap:16px}#adultAccessForm{margin-top:24px}.profile-form h3{margin:0;color:#e8eef3;font-size:var(--font-md)}.profile-form label{display:grid;gap:7px;color:#bcc9d4;font-size:var(--font-xs);font-weight:750}.profile-form input{width:100%;height:48px;border:1px solid var(--line-strong);border-radius:12px;background:#07111b;padding:0 14px;color:#fff;font-size:16px;outline:0}.profile-form input:focus{border-color:rgba(3,159,168,.68);box-shadow:0 0 0 3px rgba(3,159,168,.09)}.pin-input-field{position:relative;display:block}.profile-form .pin-input-field input{padding-right:50px}.pin-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.profile-form button{height:48px;border-radius:12px;font-weight:800;cursor:pointer}.profile-form .pin-visibility{position:absolute;top:50%;right:6px;display:grid;width:36px;height:36px;border:0;border-radius:9px;background:transparent;padding:0;color:var(--muted);place-items:center;transform:translateY(-50%)}.profile-form .pin-visibility:hover{background:var(--surface);color:var(--green)}.profile-form .pin-visibility svg{width:18px;height:18px}.profile-form button:disabled{opacity:.58;cursor:wait}.profile-primary{border:0;background:#fff;color:#07101b}.profile-primary:hover{background:#f1f5f7}.profile-primary.is-disable{border:1px solid rgba(3,159,168,.32);background:rgba(3,159,168,.1);color:#eaf6f7}.profile-primary.is-disable:hover{background:rgba(3,159,168,.17)}.profile-secondary{border:1px solid var(--line-strong);background:var(--surface);color:#e6edf2}.profile-secondary:hover{border-color:rgba(3,159,168,.35);background:var(--surface-hover)}.profile-divider{height:1px;margin:24px 0;background:var(--line)}.profile-message{margin:16px 0 0;border:1px solid rgba(3,159,168,.25);border-radius:10px;background:rgba(3,159,168,.08);padding:10px 12px;color:#bde5e7;font-size:var(--font-sm)}.profile-message.is-error{border-color:rgba(251,92,106,.28);background:rgba(251,92,106,.08);color:#ffadb4}
@keyframes profileModalIn{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
.access-blocker{position:fixed;inset:0;z-index:1000;display:grid;background:rgba(2,7,12,.68);padding:22px;place-items:center;backdrop-filter:blur(15px) saturate(.65)}
.access-blocker-card{display:flex;width:min(440px,100%);border:1px solid rgba(178,204,226,.2);border-radius:24px;background:rgba(7,16,27,.92);padding:34px 32px;text-align:center;align-items:center;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.access-blocker-icon{display:grid;width:76px;height:76px;margin-bottom:18px;border:1px solid rgba(3,159,168,.38);border-radius:50%;background:rgba(3,159,168,.12);color:var(--green);place-items:center;box-shadow:0 0 46px rgba(3,159,168,.2)}
.access-blocker-icon svg{width:38px;height:38px;stroke-width:1.65}
.access-blocker-eyebrow{margin:0 0 7px;color:var(--green);font-size:var(--font-xs);font-weight:800;text-transform:uppercase}
.access-blocker-card h2{margin:0;color:#fff;font-size:28px;line-height:1.12}
.access-blocker-card>p:last-of-type{max-width:350px;margin:13px 0 24px;color:#b8c5d0;font-size:var(--font-md);line-height:1.55}
.access-blocker-card button{display:flex;width:100%;height:50px;border:0;border-radius:13px;background:#fff;color:#07101b;font-weight:850;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:transform .18s,background-color .18s}
.access-blocker-card button:hover{background:#f2f6f8;transform:translateY(-1px)}
.access-blocker-card button:disabled{opacity:.65;cursor:wait;transform:none}
.access-blocker-card button svg{width:19px;height:19px;stroke-width:2.2}
body.app-blocked #appView{pointer-events:auto}
body.app-blocked .workspace{filter:blur(13px) brightness(.45);pointer-events:none;user-select:none;transform:scale(1.015)}
body.app-blocked .topbar{z-index:1002;border-color:transparent;background:transparent;pointer-events:none;backdrop-filter:none}
body.app-blocked .topbar>:not(.topbar-actions){opacity:0;pointer-events:none}
body.app-blocked .topbar-actions{z-index:1;pointer-events:auto}
body.app-blocked .user-button{border-color:rgba(178,204,226,.24);background:rgba(7,16,27,.9);box-shadow:0 12px 34px rgba(0,0,0,.35)}
body.app-blocked .access-blocker-card{animation:blockerIn .22s ease-out}
@keyframes blockerIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.mobile-only{display:none}

@media(max-width:1050px){
  :root{--sidebar-width:300px;--viewer-gutter:18px;--viewer-right-edge:18px}
  .video-stage{min-height:0;max-height:none}
  .viewer{padding-top:10px;padding-bottom:14px}
  .now-playing{grid-template-columns:58px minmax(100px,.7fr) minmax(200px,1.5fr) 40px;gap:10px}.active-logo{width:58px;height:58px}
}

@media(max-width:820px){
  :root{--topbar:66px;--viewer-gutter:15px;--viewer-right-edge:15px}
  .mobile-only{display:grid}.desktop-only{display:none!important}
  .login-form input,.search-box input{font-size:16px}
  .login-shell{display:grid;width:100%;height:100dvh;max-height:none;margin:0;border-radius:0}
  .login-panel{padding:clamp(18px,4vh,28px)}
  .login-visual{display:block}
  .login-visual::after{background-image:url("login-callejon-huaylas-mobile.jpg");background-position:center}
  .tv-app::before{display:none}.topbar{display:flex;background:transparent;padding:0 15px;backdrop-filter:none}.topbar>.brand{position:absolute;left:50%;height:42px;margin:0;transform:translateX(-50%)}.topbar .user-button{height:42px}.topbar>.topbar-favorites{width:42px;height:42px;margin:0 0 0 8px;padding:0;justify-content:center}.topbar>.topbar-favorites span{display:none}.topbar>.topbar-search{display:none!important}.topbar-actions{height:42px;margin:0 0 0 auto;gap:7px}.mobile-panel-actions{display:flex;width:100%;margin:0 0 8px;align-items:center;justify-content:flex-end;gap:8px;flex:none}.mobile-panel-actions .panel-close{margin:0}.mobile-favorites-slot{display:block;width:auto;margin:0;flex:none}.mobile-search-slot{display:block;width:100%;margin:0 0 8px;flex:none}.mobile-search-slot .topbar-search{display:flex!important;width:100%;height:42px;margin:0;border-radius:13px;padding:0 13px;align-items:center;gap:10px;flex:none}.mobile-search-slot .topbar-search svg{width:18px;height:18px;align-self:center;flex:0 0 18px}.mobile-search-slot .topbar-search input{height:100%;padding:0;font-size:16px;line-height:1.2;appearance:none;-webkit-appearance:none}.mobile-search-slot .topbar-search kbd{display:none}.mobile-favorites-slot .topbar-favorites{width:42px;height:42px;margin:0;padding:0;justify-content:center}.mobile-favorites-slot .topbar-favorites span{display:none}
  .workspace{display:block;height:calc(100dvh - var(--topbar));overflow:hidden}
  .channel-panel{position:fixed;top:0;bottom:0;left:0;z-index:80;width:min(360px,89vw);height:100dvh;border-right-color:var(--line-strong);background:var(--sidebar-background);padding-top:max(24px,env(safe-area-inset-top));transform:translateX(-105%);transition:transform .24s ease;box-shadow:25px 0 70px rgba(0,0,0,.44)}
  .channel-panel.is-open{transform:translateX(0)}
  .panel-backdrop{position:fixed;inset:0;z-index:70;width:100%;height:100%;border:0;background:rgba(0,5,9,.72);padding:0;backdrop-filter:blur(3px)}
  .viewer{display:grid;height:100%;padding:12px;grid-template-rows:minmax(0,1fr)}
  .video-stage:hover:not(.is-controls-visible) .player-controls{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px)}
  .loading-channel-glow{inset:0;width:auto;height:auto;aspect-ratio:auto;opacity:.78;filter:none;transform:none}
  .loading-channel-glow img{object-fit:cover;transform:scale(1.35);filter:blur(46px) saturate(1.55) brightness(.68)}
  .video-stage:fullscreen .loading-channel-glow,.video-stage:-webkit-full-screen .loading-channel-glow{inset:0;width:auto;height:auto;aspect-ratio:auto;opacity:.78;filter:none;transform:none}
  .video-stage:fullscreen .loading-channel-glow img,.video-stage:-webkit-full-screen .loading-channel-glow img{filter:blur(72px) saturate(1.55) brightness(.68)}
  .now-playing{min-height:158px;padding:10px 12px;grid-template-columns:52px minmax(0,1fr) 40px;grid-template-rows:auto auto;gap:8px 11px}.active-logo{width:52px;height:52px;border-radius:12px}.channel-identity h1{font-size:var(--font-lg)}.channel-guide{grid-column:1/-1;grid-row:2}.favorite-button{width:40px;height:40px}
  .mobile-channel-carousel{display:block;overflow-x:auto;overflow-y:hidden;padding:5px 0 9px;scroll-snap-type:none;scroll-padding-inline:40%;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%)}
  .mobile-channel-carousel::-webkit-scrollbar{display:none;width:0;height:0}
  .mobile-channel-track.is-repositioning .mobile-channel-slide,.mobile-channel-track.is-repositioning .mobile-channel-slide-logo{transition:none}
  .mobile-channel-track{display:grid;width:calc(var(--channel-count,1) * 20%);height:78px;padding-inline:40%;box-sizing:content-box;grid-auto-flow:column;grid-auto-columns:calc(100% / var(--channel-count,1));align-items:center;justify-items:center;gap:0}
  .mobile-channel-slide{position:relative;display:grid;width:60px;height:60px;aspect-ratio:1/1;border:0;border-radius:12px;background:transparent;padding:0;color:#c6d2db;place-items:center;cursor:pointer;opacity:.68;scroll-snap-align:none;scroll-snap-stop:normal;transform:scale(.88);transition:width .22s ease,height .22s ease,opacity .2s ease,transform .22s ease,filter .2s ease,background-color .2s ease,box-shadow .2s ease}
  .mobile-channel-slide[data-center-offset="-1"],.mobile-channel-slide[data-center-offset="1"]{opacity:.88;transform:scale(.94)}
  .mobile-channel-slide[data-center-offset="-2"],.mobile-channel-slide[data-center-offset="2"]{opacity:.46;filter:saturate(.72)}
  .mobile-channel-slide.is-centered{width:72px;height:72px;min-width:72px;min-height:72px;aspect-ratio:1/1;border:1px solid #039FA8;background:linear-gradient(105deg,#039FA8,rgba(3,159,168,.72));color:#fff;opacity:1;transform:scale(1);box-shadow:0 8px 24px rgba(3,159,168,.16)}
  .mobile-channel-slide:active:not(.is-centered){opacity:1;transform:scale(.88)}
  .mobile-channel-slide-logo{display:grid;width:56px;height:56px;aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:rgba(3,10,17,.54);font-size:11px;font-weight:850;place-items:center;transition:width .22s ease,height .22s ease,border-radius .22s ease}
  .mobile-channel-slide-logo img{width:125%;height:125%;max-width:none;object-fit:contain;padding:3px;align-self:start;justify-self:center}
  .mobile-channel-slide.is-centered .mobile-channel-slide-logo{width:66px;height:66px;border-radius:12px;background:transparent;color:#fff}
}

@media(max-width:560px){
  .topbar .brand-logo{width:96px}
  .user-button{border:0;background:transparent;padding-right:2px}.user-button>svg{display:none}
  .viewer{padding:10px}
  .player-card{border-radius:18px}
  .video-stage{min-height:0}
  .audio-prompt{height:82px;padding:37px 8px 5px}.audio-prompt span{min-height:35px;padding:7px 11px;font-size:var(--font-sm)}
  .player-controls{right:0;bottom:0;left:0;height:82px;padding:37px 8px 5px;gap:6px}.player-controls button{width:35px;height:35px;flex-basis:35px}.player-controls svg{width:19px;height:19px}.player-controls input[type="range"]{width:86px}.control-divider{height:21px}
  .cast-status{padding:20px;gap:13px}.cast-status-icon{width:64px;height:64px;border-radius:19px}.cast-status-icon svg{width:31px;height:31px}.cast-status-copy strong{font-size:var(--font-lg)}.cast-status button{height:42px;min-width:142px}
  .now-playing{padding:9px 10px}.channel-guide{gap:6px}.channel-guide p{min-height:60px;padding:7px 8px}.channel-guide strong{font-size:var(--font-sm)}.mobile-channel-carousel{padding-block:4px 8px}.mobile-channel-track{height:74px}.mobile-channel-slide{width:58px;height:58px}.mobile-channel-slide-logo{width:54px;height:54px}.mobile-channel-slide.is-centered{width:68px;height:68px;min-width:68px;min-height:68px}.mobile-channel-slide.is-centered .mobile-channel-slide-logo{width:62px;height:62px}
  .login-panel{padding:16px}.login-content{border-radius:20px;padding:24px 20px}
  .captcha-field{grid-template-columns:minmax(0,1fr) 142px 44px}.captcha-field button{width:44px}.captcha-image{height:53px}
  .profile-modal{padding:14px}.profile-modal-card{max-height:calc(100dvh - 28px);border-radius:19px;padding:20px}.pin-fields{grid-template-columns:1fr}
  .access-blocker{padding:18px}.access-blocker-card{border-radius:21px;padding:28px 22px}.access-blocker-icon{width:68px;height:68px}.access-blocker-card h2{font-size:24px}
}

@media(max-width:420px){.captcha-field{grid-template-columns:minmax(0,1fr) 44px}.captcha-image{grid-column:1/2;grid-row:1;width:100%}.captcha-field input{grid-column:1/-1;grid-row:2}.captcha-field button{grid-column:2;grid-row:1}}

@media(hover:none){.player-controls button::after{display:none}}

@media(max-width:380px){
  .topbar .brand-logo{width:82px}.viewer{padding:7px}.now-playing{grid-template-columns:46px minmax(0,1fr) 38px;gap:7px}.active-logo{width:46px;height:46px}.channel-guide{gap:5px}.channel-guide p{padding:6px}.channel-guide time,.channel-guide span{font-size:10px}
}

@media(max-height:760px){
  .login-panel{padding:18px clamp(20px,4vw,30px)}
  .login-content{padding:22px 26px;gap:14px}
  .brand-login .brand-logo{width:165px}
  .login-copy{gap:6px}
  .login-copy h1{font-size:var(--font-2xl);line-height:1}
  .login-copy>p:last-child{margin-top:7px}
  .login-form{gap:13px}
  .login-form label{gap:0}
  .login-form input{height:45px}
  .captcha-image{height:45px}
  .captcha-field button{height:45px}
  .primary-button{height:45px}
  .form-error{padding:6px 9px;font-size:var(--font-xs)}
}

@media(max-height:650px){
  body.login-active{padding:0}
  .login-shell{height:100dvh}
  .login-panel{padding:8px 14px}
  .login-content{padding:10px 18px;gap:6px}
  .brand-login .brand-logo{width:116px}
  .login-copy{gap:2px}
  .login-copy .eyebrow{display:block;font-size:9px}
  .login-copy h1{font-size:18px;line-height:1.08}
  .login-copy>p:last-child{display:block;margin:0;font-size:11px}
  .login-form{gap:8px}
  .login-form label{gap:0;font-size:10px}
  .login-form input,.captcha-image,.captcha-field button,.primary-button{height:39px}
  .captcha-help{display:block;margin-top:0;font-size:9px;line-height:1.15}
  .primary-button{margin-top:1px}
  .login-exclusive{margin-top:-2px;font-size:8px}
}

@media(max-height:520px){
  body.login-active{padding:0}
  .login-shell{height:100dvh;border-radius:0}
  .login-panel{padding:4px 10px;justify-content:center}
  .login-content{padding:7px 14px;gap:4px;border-radius:16px}
  .brand-login{display:flex}
  .brand-login .brand-logo{width:92px}
  .login-copy{display:grid;gap:1px}
  .login-copy .eyebrow{font-size:8px}
  .login-copy h1{font-size:15px;line-height:1.05}
  .login-copy>p:last-child{font-size:9px}
  .login-form{gap:5px}
  .login-form label{gap:0;font-size:9px}
  .login-form input,.captcha-image,.captcha-field button,.primary-button{height:33px}
  .captcha-help{font-size:8px}
  .primary-button{font-size:11px}
  .login-exclusive{font-size:7px}
}

@media(min-width:821px) and (min-height:521px){
  .login-content{width:min(100%,540px);padding-left:42px;padding-right:42px;gap:0}
  .brand-login{margin-bottom:30px}
  .login-copy{margin-bottom:36px}
  .brand-login .brand-logo{width:190px}
  .login-form{gap:22px}
  .login-form label{gap:0}
}

@media(max-width:820px){
  .login-content{gap:0}
  .brand-login{margin-bottom:22px}
  .login-copy{margin-bottom:28px}
}

@media(max-height:760px){
  .brand-login{margin-bottom:20px}
  .login-copy{margin-bottom:26px}
}

@media(max-height:650px){
  .brand-login{margin-bottom:14px}
  .login-copy{margin-bottom:18px}
}

@media(max-height:520px){
  .brand-login{margin-bottom:4px}
  .login-copy{margin-bottom:5px}
}

@media(min-height:651px){
  .login-form{gap:26px}
  .brand-login{margin-bottom:32px}
  .login-copy{margin-bottom:38px}
}

@media(min-width:821px) and (min-height:651px){
  .login-form{gap:30px}
  .brand-login{margin-bottom:38px}
  .login-copy{margin-bottom:44px}
}

.player-loading{background:#01060a;backdrop-filter:none;box-shadow:none}

.player-controls .volume-control{margin-right:auto}

.player-notice{position:absolute;top:16px;left:50%;z-index:12;display:flex;width:max-content;max-width:calc(100% - 32px);min-height:48px;border:1px solid rgba(3,159,168,.38);border-radius:13px;background:rgba(5,16,25,.94);padding:10px 14px;color:#eef7f8;align-items:center;gap:10px;box-shadow:0 14px 38px rgba(0,0,0,.42);backdrop-filter:blur(12px);transform:translateX(-50%);animation:playerNoticeIn .18s ease-out}.player-notice svg{width:23px;height:23px;color:var(--green);flex:none}.player-notice span{overflow:hidden;font-size:var(--font-sm);font-weight:650;line-height:1.35;text-align:left;text-overflow:ellipsis}@keyframes playerNoticeIn{from{opacity:0;transform:translate(-50%,-7px)}to{opacity:1;transform:translate(-50%,0)}}

@media(max-width:820px){.loading-channel-glow{display:none}.player-notice{top:10px;max-width:calc(100% - 20px);min-height:44px;padding:9px 11px}.player-notice svg{width:21px;height:21px}.player-notice span{font-size:var(--font-xs)}}

@media(max-width:820px) and (orientation:portrait){#videoPlayer,.video-stage .airplay-player{inset:50% 0 auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:fill;transform:translateY(-50%)}.video-stage:fullscreen #videoPlayer,.video-stage:fullscreen .airplay-player,.video-stage:-webkit-full-screen #videoPlayer,.video-stage:-webkit-full-screen .airplay-player{inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;transform:none}}
@media(max-width:820px) and (orientation:portrait){.video-stage:fullscreen,.video-stage:-webkit-full-screen{position:fixed;top:50%;left:50%;width:100vh;height:100vw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}}

.video-stage.is-video-fill #videoPlayer,.video-stage.is-video-fill .airplay-player{inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transform:none}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(orientation:landscape) and (max-height:520px) and (max-width:940px){
  .viewer{padding:7px}.video-stage{height:100%;min-height:0;aspect-ratio:auto}.now-playing{min-height:146px;padding-top:6px;padding-bottom:6px}.channel-panel{top:0}
}

/* El ambiente de transición debe quedar visible también en móvil. */
.player-loading{background:#01060a}
.player-loading.is-buffering{background:transparent}
.player-loading .loading-spinner{animation:bubble-loader-ambient .65s linear infinite alternate}
@keyframes bubble-loader-ambient{0%{box-shadow:calc(-38 * var(--loader-size)) calc(-12 * var(--loader-size)) var(--loader-active),calc(-14 * var(--loader-size)) 0 var(--loader-idle),calc(14 * var(--loader-size)) 0 var(--loader-idle),calc(38 * var(--loader-size)) 0 var(--loader-idle)}33%{box-shadow:calc(-38 * var(--loader-size)) 0 var(--loader-idle),calc(-14 * var(--loader-size)) calc(-12 * var(--loader-size)) var(--loader-active),calc(14 * var(--loader-size)) 0 var(--loader-idle),calc(38 * var(--loader-size)) 0 var(--loader-idle)}66%{box-shadow:calc(-38 * var(--loader-size)) 0 var(--loader-idle),calc(-14 * var(--loader-size)) 0 var(--loader-idle),calc(14 * var(--loader-size)) calc(-12 * var(--loader-size)) var(--loader-active),calc(38 * var(--loader-size)) 0 var(--loader-idle)}100%{box-shadow:calc(-38 * var(--loader-size)) 0 var(--loader-idle),calc(-14 * var(--loader-size)) 0 var(--loader-idle),calc(14 * var(--loader-size)) 0 var(--loader-idle),calc(38 * var(--loader-size)) calc(-12 * var(--loader-size)) var(--loader-active)}}
@media(max-width:820px){.loading-channel-glow,.video-stage:fullscreen .loading-channel-glow,.video-stage:-webkit-full-screen .loading-channel-glow{display:none!important}}
@media(max-width:820px){.topbar::before{display:none}}

/* La reconexión y sus errores se apoyan siempre en el último fotograma.
   El ambiente del logo queda reservado exclusivamente al cambio de canal. */
.player-loading.is-reconnecting{background:transparent}
.player-loading.is-reconnecting .loading-channel-glow{display:none!important}
.player-error{background:rgba(3,8,13,.62)}
.player-error #playerErrorMessage{margin-top:10px;color:#b5c1cc;font-size:var(--font-md);font-weight:400;line-height:1.5;text-align:center}
.player-error button{border-color:#fff;background:transparent;color:#fff;transition:background .18s ease,border-color .18s ease}
.player-error button:hover{border-color:var(--green);background:var(--green);color:#fff;box-shadow:none}
.player-error .error-channel-glow{display:none!important}
.player-loading.is-reconnecting.is-before-first-frame .loading-channel-glow{display:grid!important}
.player-error.is-before-first-frame .error-channel-glow{inset:0;display:grid!important;overflow:hidden;background:#142735;opacity:.78;filter:none;transform:none}
.player-error.is-before-first-frame .error-channel-glow img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;transform:scale(1.35);filter:blur(72px) saturate(1.55) brightness(.68)}
@media(max-width:820px){.player-loading.is-before-first-frame .loading-channel-glow,.player-error.is-before-first-frame .error-channel-glow{display:none!important}}
.topbar-favorites{transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}

/* Los artes incluyen el nombre en su franja inferior. Se recorta esa franja
   sin ampliar el eje horizontal, para conservar completos y centrados los símbolos. */
.channel-logo img,.active-logo img,.mobile-channel-slide-logo img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;align-self:center;justify-self:center;clip-path:inset(0 0 30% 0);transform:translateY(7.5%)}

/* El teclado cambia la selección sin fundidos; el zoom responde solo al ratón. */
.channel-item{transition:none}
.channel-item:hover{background:transparent;transform:none}
@media(min-width:821px) and (hover:hover) and (pointer:fine){
  .channel-panel:not(.is-keyboard-navigating) .channel-item{transition:transform .12s ease}
  .channel-panel:not(.is-keyboard-navigating) .channel-item:hover{transform:scale(1.02)}
}
.channel-item:focus,.channel-item:focus-visible{outline:0;outline-offset:0}

/* Mensajes legibles y centrados en el control parental y el catálogo. */
.profile-message{padding:16px 20px;border-color:rgba(3,159,168,.5);background:rgba(3,159,168,.18);color:#effcfc;font-size:var(--font-base);font-weight:600;line-height:1.5;text-align:center}
.pin-code-input:not(:placeholder-shown):not(.is-pin-visible){color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--text)}
.pin-code-mask{position:absolute;top:50%;left:14px;display:block;color:var(--text);font-size:var(--font-base);line-height:1;pointer-events:none;transform:translateY(-50%)}
.pin-code-input.is-pin-visible+.pin-code-mask,.pin-code-input:placeholder-shown+.pin-code-mask{display:none}
.list-empty{padding:24px 16px;color:#fff;font-size:var(--font-md);font-weight:500;line-height:1.5;text-align:center}

@media(max-width:820px){
  .mobile-panel-actions,.mobile-search-slot{margin-bottom:16px}
  .mobile-search-slot .topbar-search input::placeholder{color:#9aaebd;opacity:1}
  .current-category-header span,.current-category-header small{transform:translateY(-2px)}
  /* El carrusel conserva el arte completo, incluido su nombre incorporado. */
  .mobile-channel-slide-logo img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;align-self:center;justify-self:center;clip-path:none;transform:none}
}

/* Permitir la recarga nativa al tirar hacia abajo, sin alargar el diseño.
   Los diálogos y el menú abierto conservan su bloqueo de desplazamiento. */
@media(max-width:820px){
  html{overflow-y:auto;overscroll-behavior-y:auto}
  body.login-active,body.app-active{overflow-x:clip;overflow-y:visible;overscroll-behavior-y:auto}
  body.profile-modal-open{overflow:hidden}
}

/* Bienvenida y acceso manual. */
body.login-active .login-shell{overflow-y:auto}
body.login-active .login-panel{min-height:min-content}
.welcome-content{display:grid;gap:22px;text-align:center}
.welcome-content h1{margin:0;color:var(--text);font-size:clamp(25px,4vw,32px);font-weight:780;line-height:1.25;letter-spacing:normal}
.welcome-content h1 span{color:#32c5ca}
.welcome-content p{max-width:370px;margin:0 auto;color:#d0dce5;font-size:15px;line-height:1.65;text-wrap:pretty}
.welcome-actions{display:grid;gap:12px;margin-top:8px}
.welcome-actions .primary-button{height:auto;min-height:52px;margin:0;padding:14px 18px;font-size:15px;text-decoration:none}
.welcome-secondary{min-height:52px;border:1px solid rgba(210,230,240,.35);border-radius:13px;background:rgba(6,19,29,.5);padding:14px 12px;color:#fff;font-size:14px;font-weight:650;line-height:1.4;cursor:pointer;transition:background .2s,border-color .2s}
.welcome-secondary:hover{border-color:#32c5ca;background:rgba(3,159,168,.15)}
.welcome-back{justify-self:center;border:0;background:transparent;padding:5px 10px;color:#cad9e4;font-size:12px;cursor:pointer}
.welcome-back:hover{color:white;text-decoration:underline}
.welcome-actions a:focus-visible,.welcome-secondary:focus-visible,.welcome-back:focus-visible{outline:2px solid #32c5ca;outline-offset:4px}
.login-shell.is-welcome .login-content{width:min(100%,520px);gap:0;padding:30px 28px}
.login-shell.is-welcome .brand-login{margin:0 0 32px}
.login-shell.is-welcome .brand-logo{width:210px}
.login-shell.is-welcome .form-error{margin:18px 0 0;text-align:center}
@media(max-width:480px){
  .login-shell.is-welcome .login-panel{padding:24px 20px}
  .login-shell.is-welcome .login-content{padding:18px 4px}
  .login-shell.is-welcome .brand-logo{width:190px}
  .welcome-content{gap:20px}
  .welcome-content p{font-size:14px}
}
@media(max-height:600px){
  .login-shell.is-welcome .login-panel{padding:22px 20px}
  .login-shell.is-welcome .login-content{padding:0 8px}
  .login-shell.is-welcome .brand-login{margin-bottom:20px}
  .login-shell.is-welcome .brand-logo{width:155px}
  .welcome-content{gap:14px}
  .welcome-content h1{font-size:24px}
}

.welcome-secondary{display:flex;align-items:center;justify-content:center;gap:8px}
.welcome-actions svg,#loginButton svg{width:20px;height:20px;flex:0 0 20px;stroke-width:1.8}

.welcome-actions .primary-button,.welcome-actions .welcome-secondary{font-family:inherit;font-size:15px;font-weight:750;line-height:1.4;letter-spacing:normal}

/* Buscador sobre canales; controles alineados con el reproductor. */
@media(min-width:821px){
  .topbar>.topbar-search{grid-column:1;grid-row:1;width:calc(100% - 2 * var(--sidebar-gutter));margin:0 var(--sidebar-gutter);justify-self:stretch}
  .topbar>.brand{grid-column:2;grid-row:1;margin:0;justify-self:center}
  .topbar>.topbar-favorites{grid-column:2;grid-row:1;justify-self:start;margin:0 0 0 var(--viewer-gutter)}
  .topbar>.brand .brand-logo{width:126px}
}
.topbar .topbar-favorites{padding:0 10px 0 6px;gap:9px;font-size:var(--font-sm);font-weight:700;color:var(--text)}
.topbar .topbar-favorites .favorite-emblem{display:grid;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand-navy),var(--green-deep));place-items:center;flex:0 0 30px}
.topbar .topbar-favorites .favorite-emblem svg{width:17px;height:17px}
.topbar .topbar-favorites[aria-pressed="true"]{color:var(--text)}
@media(min-width:821px) and (max-width:1100px){
  .topbar>.brand .brand-logo{width:105px}
  .topbar .user-button>span:nth-child(2){max-width:85px}
  .topbar .topbar-favorites{gap:6px}
}
@media(max-width:820px){
  .topbar>.topbar-favorites{width:42px;margin-left:8px;padding:0;justify-content:center}
  .topbar>.topbar-favorites .favorite-emblem{display:grid}
  .topbar>.topbar-favorites>span:nth-child(2){display:none}
}
@media(min-width:821px){
  .topbar>.topbar-search{background:rgba(7,25,36,.65);border-color:rgba(219,239,246,.2)}
  .topbar>.topbar-search input::placeholder{color:#c0d3dc;opacity:1}
  .topbar>.topbar-search>svg{color:#c0d3dc}
}
@media(max-width:820px){
  .mobile-favorites-slot .topbar-favorites,.mobile-favorites-slot .topbar-favorites:hover,.mobile-favorites-slot .topbar-favorites[aria-pressed="true"]{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0;color:var(--text);box-shadow:none}
  .mobile-favorites-slot .topbar-favorites .favorite-emblem{display:grid;width:20px;height:20px;border-radius:0;background:none;place-items:center}
  .mobile-favorites-slot .topbar-favorites .favorite-emblem svg{width:20px;height:20px;fill:none}
}

@media(max-width:820px){.channel-panel .channel-item.is-active{background:rgba(2,9,16,.55)}}

/* Desktop information shares the existing control overlay; mobile keeps its footer. */
.volume-slider-popover{display:contents}
@media(min-width:821px){
  .player-controls,.player-controls *{text-shadow:none!important}
  .player-card{height:calc(100% - 3px);grid-template-rows:minmax(0,1fr)}
  .player-controls{display:grid;height:172px;padding:79px 16px 16px;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px}
  .player-controls .now-playing{display:contents}
  .player-controls .active-logo{grid-column:1;grid-row:1;width:72px;height:72px;border-color:rgba(255,255,255,.15);background:rgba(4,10,18,.35);border-radius:13px}
  .player-controls .active-logo img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;padding:4px;align-self:center;justify-self:center;clip-path:none;transform:none}
  .player-controls .channel-identity{display:none}
  .player-controls,.player-controls .active-logo,.player-controls .channel-guide span,.player-controls .channel-guide strong,.player-controls .channel-guide time,.player-controls button::after{font-size:var(--font-md)}
  .player-controls .channel-guide{grid-column:2;grid-row:1;height:72px;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:4px;text-shadow:none}
  .player-controls .channel-guide p{display:flex;min-height:0;border:0;border-radius:0;background:none;padding:0;align-items:center;justify-content:flex-start;gap:5px}
  .player-controls .channel-guide span{order:0;flex:none}
  .player-controls .channel-guide time{order:2;flex:none}
  .player-controls .channel-guide time::before{content:"|";margin-right:5px;color:inherit}
  .player-controls .channel-guide strong{order:1;flex:0 1 auto;margin:0;font-size:var(--font-md);text-overflow:clip;-webkit-mask-image:none;mask-image:none}
  .player-controls .channel-guide time{font-size:var(--font-md);color:#dce5ec}
  .player-controls .channel-guide strong.is-overflowing{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}
  .desktop-player-actions{grid-column:3;grid-row:1;justify-self:end;display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,34px);grid-auto-flow:column;gap:4px 6px;align-items:center}
  .desktop-player-actions button{width:34px;height:34px;min-width:0;flex-basis:34px;border-radius:9px}
  .desktop-player-actions .volume-control{position:relative;width:34px;height:34px;margin:0;justify-content:center;grid-column:1;grid-row:1}
  .desktop-player-actions #favoriteButton{grid-column:1;grid-row:2}
  .desktop-player-actions #pipButton{grid-column:2;grid-row:1}
  .desktop-player-actions #remoteButton{grid-column:2;grid-row:2}
  .desktop-player-actions #fitButton{grid-column:3;grid-row:1}
  .desktop-player-actions #fullscreenButton{grid-column:3;grid-row:2}
  .desktop-player-actions .volume-slider-popover{position:absolute;bottom:100%;left:50%;display:grid;width:38px;height:148px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(4,10,18,.94);place-items:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%);transition:opacity .15s ease,visibility .15s ease}
  .desktop-player-actions .volume-control:hover .volume-slider-popover,.desktop-player-actions .volume-control:focus-within .volume-slider-popover{opacity:1;visibility:visible;pointer-events:auto}
  .desktop-player-actions input[type="range"]{position:absolute;left:50%;top:50%;width:116px;height:22px;margin:0;transform:translate(-50%,-50%) rotate(-90deg)}
  .desktop-player-actions #volumeButton::after{display:none}
}
@media(min-width:821px) and (max-width:1100px){
  .player-controls{padding-right:12px;padding-left:12px;grid-template-columns:72px minmax(0,1fr) auto;gap:8px}
  .desktop-player-actions{column-gap:2px}
}

@media(min-width:821px){
  .video-stage:hover:not(.is-controls-visible):not(:focus-within) .player-controls{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px)}
}

@media(min-width:821px){
  .player-controls .channel-guide span,.player-controls .channel-guide strong,.player-controls .channel-guide time{font-size:15px;line-height:30px}
}

@media(min-width:821px){
  .player-controls .channel-guide{margin-left:8px}
  .player-controls .channel-guide time{font-weight:400;color:#dce5ec}
}

@media(min-width:821px){
  .desktop-player-actions button::after{left:auto;right:0;transform:translateY(4px);white-space:normal;width:max-content;max-width:190px}
  .desktop-player-actions button:hover::after,.desktop-player-actions button:focus-visible::after{transform:translateY(0)}
}

@media(max-width:820px){
  .channel-guide{grid-template-columns:minmax(0,1fr);gap:6px;border:1px solid var(--line);border-radius:12px;background:rgba(15,29,43,.58);padding:9px 8px}
  .channel-guide p{display:flex;min-height:20px;border:0;border-radius:0;background:none;padding:0;align-items:center;gap:4px}
  .channel-guide span,.channel-guide strong,.channel-guide time{font-size:var(--font-sm);line-height:20px}
  .channel-guide span{order:0;flex:none;color:var(--green)}
  .channel-guide strong{order:1;flex:0 1 auto;margin:0;color:#fff;-webkit-mask-image:none;mask-image:none}
  .channel-guide strong.is-overflowing{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 12px),transparent)}
  .channel-guide time{order:2;flex:none;color:#fff;font-weight:400}
  .channel-guide time::before{content:"|";margin-right:4px;color:inherit}
}