:root{--vmring:rgb(59,130,246);--vmglow:0 0 0 2px rgba(59,130,246,.45),0 0 14px 3px rgba(59,130,246,.45)} /* z248focus: one focus colour site-wide (Sign in glow) */
:root{--bg:#0b0b10;--fg:#f2f2f5;--mut:#9a9aa8;--accent:#1e3a8a;--acc:var(--accent);--card:#17171f;--ring:var(--accent)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
:focus{outline:none}:focus-visible,.kb :focus{outline:3px solid var(--vmring);outline-offset:3px}
header{position:sticky;top:0;z-index:20;display:flex;gap:16px;align-items:center;padding:12px 4vw;background:linear-gradient(#000d,#0000)}
.brand{display:inline-flex;align-items:center;line-height:0}.brand img{height:26px;width:auto;display:block}
.search{flex:1;max-width:520px}.search input{width:100%;padding:10px 14px;border-radius:24px;border:1px solid #333;background:#000a;color:var(--fg);font-size:15px}
nav{display:flex;gap:8px;margin-left:auto}nav button,.btn{background:#ffffff1a;border:0;padding:9px 16px;border-radius:8px;transition:.15s}
nav button:hover,.btn:hover{background:#ffffff33}.btn.pri{background:var(--fg);color:#000;font-weight:700}.btn.pri:hover{background:#ddd}
.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;text-align:center;
 background:radial-gradient(ellipse at top,#0c1836 0,#0b0b10 60%)}
.center h1{font-size:clamp(28px,5vw,52px);margin:0;font-weight:900}.center .sub{color:var(--mut)}
.choices{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.choice{width:200px;height:150px;border-radius:14px;border:2px solid #333;background:var(--card);font-size:22px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:.2s}
.choice:hover,.choice:focus{transform:scale(1.06);border-color:var(--vmring)}.choice span{font-size:44px}
form.login{display:flex;flex-direction:column;gap:12px;width:min(360px,90vw)}form.login input{padding:14px;border-radius:8px;border:1px solid #333;background:#16161d;color:var(--fg);font-size:16px}
.err{color:#6b8cff;min-height:1.2em}
.hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;padding:0 4vw 6vh;margin-top:-64px;background-size:cover;background-position:center top}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b10ee 0,#0b0b1066 55%,#0000),linear-gradient(0deg,var(--bg) 0,#0000 40%)}
.hero>div{position:relative;max-width:640px}.hero img.logo{max-width:min(420px,70vw);max-height:150px;display:block;margin-bottom:12px}
.hero h1{font-size:clamp(28px,5vw,56px);margin:0 0 8px}.hero p{color:#ddd;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.row{padding:8px 4vw 4px}.row h2{font-size:19px;margin:12px 0 8px}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 4px 14px;scrollbar-width:none}.strip::-webkit-scrollbar{display:none}
.card{flex:0 0 auto;width:150px;scroll-snap-align:start;transition:transform .18s;position:relative}
.card img{width:150px;height:225px;object-fit:cover;border-radius:8px;background:var(--card);display:block}
.card:hover,.card:focus{transform:scale(1.07);z-index:2}.card .t{font-size:13px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ccc}
.card.wide{width:260px}.card.wide img{width:260px;height:146px}
.bar{position:absolute;left:6px;right:6px;top:138px;height:4px;background:#fff4;border-radius:2px}.bar i{display:block;height:100%;background:var(--acc);border-radius:2px}
.card:not(.wide) .bar{top:216px}
.tile{flex:0 0 auto;width:210px;height:118px;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:.18s;border:2px solid #ffffff14;box-shadow:0 2px 10px #0006;overflow:hidden}
.tile .logo-i{object-fit:contain;display:block;pointer-events:none}
.tile:hover,.tile:focus{transform:scale(1.06);border-color:#fff8}.tile small{display:block;font-size:12px;font-weight:500;opacity:.75}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;padding:10px 4vw 40px}.grid .card,.grid .card img{width:100%}.grid .card img{height:auto;aspect-ratio:2/3}
.tabs{display:flex;gap:8px;padding:0 4vw}.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:8px 12px;font-size:16px;color:var(--mut)}.tabs button.on{color:var(--fg);border-color:var(--acc)}
.hubhead{padding:24px 4vw 12px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.hubhead h1{margin:0;font-size:clamp(28px,4vw,44px)}.hubhead input{padding:9px 14px;border-radius:20px;border:1px solid #333;background:#000a;color:var(--fg);min-width:240px}
.meta{display:flex;gap:12px;flex-wrap:wrap;color:#ccc;font-size:14px;align-items:center}.badge{border:1px solid #fff6;border-radius:4px;padding:1px 6px;font-size:12px}
.badge.st{background:var(--acc);border:0;font-weight:700;color:#fff}
.title-body{padding:10px 4vw 40px;display:grid;grid-template-columns:1fr;gap:16px}
.sel{display:flex;gap:12px;flex-wrap:wrap}.sel label{display:flex;flex-direction:column;font-size:12px;color:var(--mut);gap:4px}
select{background:#16161d;color:var(--fg);border:1px solid #333;border-radius:6px;padding:8px;max-width:280px}
.eps{display:flex;flex-direction:column;gap:10px}.ep{display:flex;gap:14px;padding:10px;border-radius:10px;background:var(--card);text-align:left;border:0;align-items:flex-start}
.ep:hover,.ep:focus{background:#24242e}.ep img{width:200px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;flex:0 0 auto;background:#000}
.ep b{display:block}.ep p{margin:4px 0 0;color:var(--mut);font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cast .card img{border-radius:50%;width:110px;height:110px}.cast .card{width:110px;text-align:center}
.player{position:fixed;inset:0;background:#000;z-index:50}.player video{width:100%;height:100%;background:#000}
.player .back{position:absolute;top:16px;left:16px;z-index:2;background:#0008;border:0;padding:10px 16px;border-radius:8px;font-size:16px}
.player .ttl{position:absolute;top:22px;left:110px;z-index:2;text-shadow:0 1px 3px #000;transition:opacity .4s}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#222;padding:10px 18px;border-radius:8px;z-index:99}
.empty{color:var(--mut);padding:20px 4vw}.loading{padding:40px 4vw;color:var(--mut)}
@media(max-width:640px){header{flex-wrap:wrap;gap:8px}.search{order:3;flex-basis:100%;max-width:none}.card,.card img{width:112px}.card img{height:168px}
.card:not(.wide) .bar{top:160px}.tile{width:150px;height:86px;font-size:18px}.ep img{width:120px}.hero{min-height:52vh}}
.hubhead .hublogo img{height:56px;max-width:60vw;object-fit:contain;display:block}
.title-body .row.flush{padding-left:0;padding-right:0}
.login .pw{position:relative;display:block}
.login .pw input{width:100%;box-sizing:border-box;padding-right:48px}
.login .pw .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:20px;cursor:pointer;padding:6px;border-radius:6px;line-height:1}
.login .pw .eye:focus-visible{outline:2px solid var(--vmring)}
.ctile{background:#000;border:1px solid #fff3}.ctile span{font-size:17px;font-weight:600;color:#fff;letter-spacing:.02em}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:0 4vw 40px}
.ctry-tile{position:relative;height:100px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#000;color:#fff;text-decoration:none;border:1px solid #fff3;transition:.18s}
.ctry-tile span{font-weight:600;font-size:16px;text-align:center;padding:0 10px;letter-spacing:.02em}.ctry-tile small{font-size:12px;opacity:.55}
.ctry-tile:hover,.ctry-tile:focus{transform:scale(1.05);border-color:#fff8}
.hublogo.ctry{border-radius:12px;padding:18px 40px;margin:0;background:#000;border:1px solid #fff3}
.hublogo.ctry span{color:#fff;font-size:34px;font-weight:600;letter-spacing:.02em}
/* streamer corner tab: size S, bottom-right, only top-left rounded */
.card:not(.wide){container-type:inline-size}
.st-tab{--m:14cqw;position:absolute;right:0;top:calc(100cqw * 1.5 - var(--th));--th:calc(var(--m)*1.4);display:flex;gap:calc(var(--m)*.22);align-items:center;padding:calc(var(--m)*.2) calc(var(--m)*.26);border-top-left-radius:calc(var(--m)*.38);border-bottom-right-radius:8px;background:rgba(14,16,22,.52);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(255,255,255,.14);pointer-events:none}
.card .st-tab img{width:var(--m);height:var(--m);object-fit:contain;display:block;border-radius:0;background:none}
.card .st-tab img.wide{width:calc(var(--m)*1.85)}
/* ES/EN language chip: same frosted style/size as st-tab, bottom-left mirror */
.lg-tab{--m:14cqw;position:absolute;left:0;top:calc(100cqw * 1.5 - var(--m)*1.4);height:calc(var(--m)*1.4);box-sizing:border-box;display:flex;align-items:center;padding:0 calc(var(--m)*.32);border-top-right-radius:calc(var(--m)*.38);border-bottom-left-radius:8px;background:rgba(14,16,22,.52);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(255,255,255,.14);color:#fff;font:700 calc(var(--m)*.62)/1 system-ui,sans-serif;letter-spacing:.04em;pointer-events:none;white-space:nowrap}

/* pre-built hero carousel (5s crossfade) */
.hero.carousel{padding:0;display:block;min-height:0;height:68vh;overflow:hidden;background:#000}
.hero.carousel:before{display:none}
.hero.carousel .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;display:flex;align-items:flex-end;padding:0 4vw 8vh}
.hero.carousel .slide.on{opacity:1;pointer-events:auto}
.hero.carousel img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero.carousel .slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b10ee 0,#0b0b1066 55%,#0000),linear-gradient(0deg,var(--bg) 0,#0000 40%)}
.hero.carousel .cap{position:relative;z-index:1;max-width:640px}
.hero.carousel .cap img.logo{max-width:min(420px,70vw);max-height:150px;display:block;margin-bottom:12px}
.hnav{position:absolute;top:45%;z-index:2;background:#0006;color:#fff;border:0;font-size:38px;width:48px;height:64px;border-radius:8px;cursor:pointer;opacity:.6}
.hnav:hover,.hnav:focus{opacity:1}.hnav.prev{left:10px}.hnav.next{right:10px}
.dots{position:absolute;z-index:2;right:4vw;bottom:3vh;display:flex;gap:8px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#fff6;padding:0;cursor:pointer}.dots button.on{background:#fff;width:24px;border-radius:5px}
@media (max-width:700px){.hero.carousel{height:60vh}.hnav{display:none}.hero.carousel .slide{padding-bottom:6vh}}
/* title page poster */
.hero.detail{gap:32px}.hero.detail img.poster{position:relative;width:min(240px,22vw);aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 10px 40px #000c;flex:none}
@media (max-width:700px){.hero.detail img.poster{width:110px}.hero.detail{gap:14px;align-items:flex-end}}
/* neutral streamer chip (no brand colors) */
.hero .meta .badge.st{background:#000000b3;color:#fff;border:0;font:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none;padding:2px 8px;border-radius:4px}

.person{display:flex;gap:28px;padding:24px 4vw 8px;align-items:flex-start}.person img.poster{width:min(220px,30vw);aspect-ratio:2/3;object-fit:cover;border-radius:10px;flex:none}
.person h1{margin:0 0 8px;font-size:clamp(26px,4vw,44px)}.person p{color:#ccc;max-width:820px;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.noph{display:block;background:#1a1a22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Crect width='100' height='150' fill='%231a1a22'/%3E%3Ccircle cx='50' cy='52' r='22' fill='%235a5a6a'/%3E%3Cpath d='M18 138c0-24 14.3-42 32-42s32 18 32 42' fill='%235a5a6a'/%3E%3C/svg%3E") center center/cover no-repeat;flex:none}
.cast .noph{width:110px;height:110px;border-radius:50%}
.person .noph.poster,.noph.poster{width:min(220px,30vw);aspect-ratio:2/3;border-radius:10px}
@media (max-width:700px){.person .noph.poster,.noph.poster{width:140px}}
@media (max-width:700px){.person{flex-direction:column}.person img.poster{width:140px}}
/* monochrome logo tiles: streamers white-on-black, studios black-on-white (originals in logos/ untouched) */
.tile.st-w img.logo-i{filter:brightness(0) invert(1)}
.tile.sd-k img.logo-i{filter:brightness(0)}
/* page end: breathing room + footer */
#app{padding-bottom:72px}
#foot{text-align:center;color:#6b6b75;font-size:12px;padding:8px 0 calc(32px + env(safe-area-inset-bottom));letter-spacing:.02em}
.hero.carousel>.slide{max-width:none;position:absolute}
.tile.picks{background:#000;border:1px solid #fff3;color:#fff;font-weight:700;font-size:17px;text-align:center;padding:0 10px;display:flex;align-items:center;justify-content:center}
header{padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:14px}
/* hover-grow never clipped: strips bleed to the page edge with inner padding; edge tiles grow inward */
.row .strip{margin:0 -4vw;padding:12px 4vw 16px;scroll-padding:0 4vw}
.title-body .row.flush .strip{margin:0;padding-left:8px;padding-right:8px}
.strip>.edge-l{transform-origin:left center}.strip>.edge-r{transform-origin:right center}

/* elegant profile picker */
.choice{background:#0e0e12cc;border:1px solid #ffffff2e;border-radius:14px;font-family:inherit;font-size:19px;font-weight:600;color:#fff;height:190px;width:190px;gap:10px;backdrop-filter:blur(6px)}
.choice:hover,.choice:focus{transform:scale(1.03);border-color:#ffffffb3;box-shadow:0 0 24px #ffffff26;outline:none}
.choice span.mono{width:68px;height:68px;border-radius:50%;border:1px solid #ffffff59;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:300;color:#fff}
.choice small,.choice .sub{color:#9a9aa5;font-size:13px;font-weight:400}
/* fixed top bar: content always starts below it */
header#top{position:fixed;top:0;left:0;right:0;z-index:100;background:#0b0b10f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}
header#top .search{margin:0 auto}.player{z-index:200}
body.hdr #app{padding-top:var(--hh,72px)}
.hero,.hero.carousel{margin-top:0}
/* JC 2026-10-12: poster titles ALWAYS visible below the card (EN club = English name, ES club = Spanish name) */
.card .t{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;line-height:1.25;min-height:2.5em;visibility:visible!important;opacity:1!important;color:#ddd}
.cast .card .t{min-height:0}

#profBtn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid #fff3;font-weight:500}#profBtn:hover{border-color:#fff8;background:#ffffff14}
.hubsticky{position:sticky;top:var(--hh,72px);z-index:30;background:#0b0b10f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}.hubsticky .hubhead{padding-top:14px;padding-bottom:10px}.hubsticky .tabs{padding-bottom:4px}
.choice .lvn{font-size:30px;font-weight:200;color:#fff;font-family:inherit}
#app{min-height:calc(100vh - var(--hh,72px))}body.ld #foot{visibility:hidden}
/* Explore tiles pages */
.tilehead{display:flex;align-items:baseline;gap:18px;padding:18px 4vw 0}.tilehead h1{font-size:28px;font-weight:600;letter-spacing:.04em;margin:0}
.tilehead .more{color:#aaa;font-size:14px;text-decoration:none}.tilehead .more:hover{color:#fff}
.row h2 a{color:inherit;text-decoration:none}.row h2 a:hover{text-decoration:underline}.row h2 small{font-size:.7em;opacity:.5;font-weight:400}
.card.person img,.card.person .noph{width:150px;height:225px;border-radius:8px;object-fit:cover;background-color:#1a1a22}
.card .t.sub{color:#888;min-height:0}.card .cap{font-size:11.5px;line-height:1.3;color:#9a9a9a;margin-top:3px}

/* person cards in Explore tiles: do not inherit the person-page layout */
.card.person{display:block;padding:0;gap:0}

/* Oscar captions: fixed 3-line area + '+N' popover (2026-10-13) */
.card .cap{position:relative;height:calc(11.5px*1.3*3 + 20px);overflow:visible}
.card .cap .capmore{display:inline-block;margin-top:2px;font:600 11px Inter,system-ui,sans-serif;color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:10px;padding:1px 8px;cursor:pointer}
.card .cap .capfull{display:none}
#cappop{position:fixed;z-index:1000;max-width:260px;background:#111;border:1px solid #fff3;border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.4;color:#ddd;box-shadow:0 8px 24px #000c}
.ctile.on{border-color:#fff}
.tilehead h1 a{color:inherit;text-decoration:none}
.hero .meta{flex-wrap:wrap;row-gap:4px}
.hero .meta{color:#fff}
.pinfo h1 .life{font-weight:300;opacity:.7;font-size:.6em}.pinfo .facts{display:flex;flex-direction:column;gap:4px;color:#fff;font-size:14px;margin:6px 0 12px}.pinfo .facts b{font-weight:600;margin-right:6px;color:#fff}.pinfo .facts .cnt{color:#aaa}
.pinfo p.bio{display:block;-webkit-line-clamp:unset;color:#ddd;line-height:1.5}.bio-more{background:none;border:1px solid #fff3;color:#fff;border-radius:14px;padding:4px 12px;min-height:32px;cursor:pointer;font:inherit;font-size:13px}
#navbar{position:fixed;left:0;top:var(--hh,72px);height:2px;width:0;background:#fff;z-index:150;opacity:0;pointer-events:none;box-shadow:0 0 6px #fff8}
#navbar.go{opacity:1;width:70%;transition:width 3s cubic-bezier(.1,.7,.2,1),opacity .05s}
#navbar.done{opacity:0;width:100%;transition:width .2s,opacity .3s .15s}
#app.naving{opacity:.55;transition:opacity .12s .05s}
.pageback{display:inline-flex;align-items:center;min-height:40px;margin:16px 4vw 24px;padding:6px 14px;background:transparent;border:1px solid #fff3;border-radius:20px;color:#fff;font:inherit;font-size:14px;cursor:pointer;position:relative;z-index:3}
.pageback:hover{border-color:#fff8}
.pageback+.hero{margin-top:0}
@media (max-width:600px){.pageback{margin:12px 4vw 16px;min-height:44px}}
.title-body .sel+.acts{margin-top:4px}.title-body .sel{margin-bottom:6px}
#app{position:relative}.pageback:has(+ .hero){position:absolute;top:calc(var(--hh,72px) + 4px);left:0;margin:12px 4vw}
#profMenu{position:fixed;z-index:300;min-width:200px;background:#0b0b10f7;border:1px solid #fff3;border-radius:12px;padding:6px;box-shadow:0 12px 32px #000c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#profMenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;background:none;border:0;border-radius:8px;color:#fff;font:inherit;font-size:15px;text-align:left;cursor:pointer}
#profMenu button:hover,#profMenu button:focus{background:#ffffff14;outline:none}#profMenu .ck{width:16px;display:inline-block;text-align:center}
/* skeletons (2026-10-13) */
.skel{pointer-events:none}.loading.skel{padding:0;text-align:left;color:transparent}
.sk{background:linear-gradient(90deg,#16161c 0,#22222a 40%,#16161c 80%);background-size:300% 100%;animation:skm 1.4s ease-in-out infinite;border-radius:8px}
.sk-hero{height:min(62vh,560px);border-radius:0;margin-bottom:18px}
.sk-h2{width:180px;height:18px;margin:18px 0 10px;border-radius:5px}
.sk-card{flex:0 0 auto;width:150px;aspect-ratio:2/3}
@media (max-width:600px){.sk-card{width:calc((100vw - 8vw - 20px) / 3.35)}.sk-hero{height:52vh}}
@keyframes skm{0%{background-position:100% 0}100%{background-position:-100% 0}}
.card img{background:#16161c}
.card img.ld{animation:fi .28s ease-out}
@keyframes fi{from{opacity:.15}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}.card img.ld{animation:none}#navbar.go,#navbar.done{transition:none}}

/* ===== Mobile / iPhone layout (2026-10-13) ===== */
html,body{overflow-x:hidden;max-width:100%}
body{overscroll-behavior-x:none}
#app{overflow-x:clip}
.strip{overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
img,video{max-width:100%}
@media (hover:none){.card:hover,.card:focus,.tile:hover,.tile:focus,.choice:hover,.choice:focus,.ctry-tile:hover,.ctry-tile:focus{transform:none}}
@media (max-width:600px){
  header#top{flex-wrap:nowrap;gap:6px;padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left));min-height:52px}
  header#top .brand img{height:14px;width:auto}
  header#top .search{order:0;flex:0 0 44px;max-width:44px;margin:0 0 0 auto;position:static}
  header#top .search input{width:44px;height:44px;padding:0;border-radius:22px;font-size:16px;color:transparent;cursor:pointer;
    background:#000a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") center/18px no-repeat}
  header#top .search input::placeholder{color:transparent}
  header#top .search:focus-within{position:absolute;left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));top:calc(6px + env(safe-area-inset-top));max-width:none;z-index:5}
  header#top .search:focus-within input{width:100%;padding:0 14px 0 40px;color:var(--fg);background-position:14px center;cursor:text}
  header#top .search:focus-within input::placeholder{color:#888}
  nav{display:flex;gap:6px}nav button{min-height:44px;padding:0 10px;font-size:13px}
  .row{padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right))}
  .row h2{font-size:17px}
  .card,.card img{width:calc((100vw - 8vw - 20px) / 3.35)}.card img{height:auto;aspect-ratio:2/3}
  .card:not(.wide) .bar{top:auto;bottom:auto}
  .card .t{font-size:12px}
  .tile{width:calc((100vw - 8vw - 10px) / 2.3);height:auto;aspect-ratio:16/9;min-height:44px}.ctile span{font-size:14px;text-align:center;padding:0 6px}
  .grid{grid-template-columns:repeat(3,1fr);gap:10px;padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right))}
  .hero,.hero.carousel{width:100%;min-height:0;height:58vh}
  .hero.carousel .slide{padding:0 5vw 5vh}
  .hero h1,.hero.carousel h1{font-size:clamp(22px,7vw,32px)}
  .hero p,.hero.carousel p{-webkit-line-clamp:2;font-size:14px}
  .hero.carousel .cap img.logo,.hero img.logo{max-width:60vw;max-height:80px}
  .hero .acts .btn,.btn{min-height:44px;display:inline-flex;align-items:center}
  .hero.detail{flex-direction:row;height:auto;min-height:0;padding:80px 5vw 20px}
  .hero.detail img.poster{width:30vw}
  .hero.detail>div{min-width:0}
  .title-body{padding:10px 4vw 30px}
  .ep{gap:10px}.ep img{width:112px}
  .tabs button{min-height:44px}
  .choice{width:min(42vw,170px)!important;min-height:44px}
  .tilehead h1{font-size:22px}
  #foot{padding:24px 4vw calc(24px + env(safe-area-inset-bottom));font-size:12px}
  .person{flex-direction:column}
}
.title-body{grid-template-columns:minmax(0,1fr)}.title-body>*{min-width:0}.sel{display:flex;flex-wrap:wrap;gap:10px}.sel label{min-width:0;max-width:100%}.sel select{max-width:100%;min-height:44px}
@media (max-width:600px){.card.wide,.card.wide img{width:62vw}.card.wide img{height:auto;aspect-ratio:16/9}}
.meta .sc{display:inline-flex;align-items:center;gap:5px;color:#fff}.meta .sc .ic{height:1em;width:auto;display:block;color:#fff}.meta .sc .ic.rt{height:1.05em}
.player .back{top:calc(14px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;background:#000a;border:1px solid #fff3;border-radius:20px;color:#fff;font:inherit;font-size:14px;cursor:pointer}.player .back:hover{border-color:#fff8}
.player .ttl{left:50%;transform:translateX(-50%);top:calc(22px + env(safe-area-inset-top));max-width:calc(100vw - 2 * 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:15px;font-weight:600}
@media (max-width:600px){.player .ttl{max-width:calc(100vw - 2 * 120px);font-size:13px}.player .back{min-height:44px}}
/* JC button style (2026-10-13): one pill for every button = the inner-page Volver pill */
.btn,.btn.pri,.hero .acts .btn,.pageback,.player .back,.bio-more{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 20px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .15s,background .15s}
.btn.pri{border-color:rgba(255,255,255,.6);font-weight:600}
.btn:hover,.btn:focus,.btn.pri:hover,.pageback:hover,.player .back:hover{background:rgba(255,255,255,.12);border-color:var(--vmring);color:#fff}
.pageback{min-height:40px;padding:6px 16px;font-size:14px}
/* player bar: Volver pill + title in one row, title left-aligned ~28px after the pill, gradient for readability */
.player .pbar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:28px;padding:calc(14px + env(safe-area-inset-top)) 4vw 40px max(4vw,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,.35) 60%,rgba(0,0,0,0) 100%);pointer-events:none;transition:opacity .4s}
.player .pbar>*{pointer-events:auto}
.player .pbar .back{position:static;margin:0;flex:none;min-height:40px;padding:6px 16px;font-size:14px}
.player .pbar .ttl{position:static;transform:none;left:auto;top:auto;max-width:none;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:16px;font-weight:600;text-shadow:0 1px 3px #000}
@media (max-width:600px){.player .pbar{gap:16px}.player .pbar .ttl{font-size:13px}.player .pbar .back{min-height:44px}}
/* hover-grow (2026-10-13): grow from centre, smaller scale, gap > growth so neighbours never touch; edge tiles grow inward */
.strip{gap:18px}
.tile,.ctile,.ctry-tile{transform-origin:center}
.tile:hover,.tile:focus,.ctile:hover,.ctile:focus,.ctry-tile:hover,.ctry-tile:focus{transform:scale(1.04)}
.card{transform-origin:center}.card:hover,.card:focus{transform:scale(1.05)}
.strip>.edge-l,.strip>:first-child{transform-origin:left center}.strip>.edge-r,.strip>:last-child{transform-origin:right center}
@media (hover:none){.tile:hover,.tile:focus,.ctile:hover,.ctile:focus,.card:hover,.card:focus{transform:none}}
/* award captions (2026-10-13): hover scales only the poster; 3 one-line captions + '+N' on its own line, fixed height */
.card:has(.cap):hover,.card:has(.cap):focus{transform:none}
.card:has(.cap) img{transition:transform .18s;transform-origin:center}
.card:has(.cap):hover img,.card:has(.cap):focus img{transform:scale(1.04)}
.strip>.card:has(.cap):first-child img{transform-origin:left center}.strip>.card:has(.cap):last-child img{transform-origin:right center}
.card .cap{height:calc(3 * 1.35em + 26px);overflow:hidden;line-height:1.35;font-size:11.5px}
.card .cap .cl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:1.35em}
.card .cap .capmore{display:block;width:max-content;margin-top:4px;line-height:16px}
.ynav{position:sticky;top:var(--hh,72px);z-index:25;background:#0b0b10f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 4vw 8px;border-bottom:1px solid #ffffff12;margin-bottom:8px}
.ynav .ydec,.ynav .yyrs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.ynav .yyrs{margin-top:8px}.ynav .ydec::-webkit-scrollbar,.ynav .yyrs::-webkit-scrollbar{display:none}
.ypill{flex:none;display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.ypill.sm{min-height:28px;padding:2px 11px;font-size:12px}.ypill.on,.ypill:hover{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.12)}
.ynav .ysel{display:none}
@media (max-width:600px){.ynav .ydec,.ynav .yyrs{display:none}.ynav .ysel{display:block;min-height:44px;padding:0 14px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;font:inherit}}

.hubhead .hublogo.wl img{filter:brightness(0) invert(1)} /* new streamer hubs: white logo on black (2026-10-13) */
.ctile{display:flex;align-items:center;justify-content:center;padding:0 14%;text-align:center}.ctile span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance;text-align:center;line-height:1.25;max-width:100%}
html,body{overflow-x:clip!important}body{overflow-y:visible}
.tilehead{position:sticky;top:var(--hh,72px);z-index:30;background:#0b0b10f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tilehead~.ynav{top:calc(var(--hh,72px) + var(--th,64px))}
.er-sent{flex:0 0 1px;align-self:stretch}.er-sk{display:flex;gap:18px;flex:none}
a.tile.ctile{display:flex;align-items:center;justify-content:center;padding:0 12%;overflow:hidden;text-align:center;box-sizing:border-box}
a.tile.ctile span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance;text-align:center;max-width:100%;line-height:1.25;word-break:normal;overflow-wrap:anywhere}
/* z31: episode next-up line + in-player audio/subs menu (thin pill) */
.title-body .epnext{font-size:14px;color:var(--mut);margin-bottom:2px}
.player .pbar .trkB{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.player .pbar .trkB:hover,.player .pbar .trkB:focus{border-color:var(--vmring);background:rgba(255,255,255,.12)}
.player .trkM{position:absolute;top:calc(64px + env(safe-area-inset-top));right:4vw;min-width:220px;max-width:min(320px,90vw);max-height:70vh;overflow:auto;background:rgba(10,10,10,.92);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.player .trkM[hidden]{display:none}
.player .trkM .h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#999;padding:8px 10px 4px}
.player .trkM button{all:unset;cursor:pointer;padding:9px 12px 9px 30px;border-radius:8px;font-size:14px;color:#fff;position:relative}
.player .trkM button:hover,.player .trkM button:focus{background:rgba(255,255,255,.1)}
.player .trkM button.on::before{content:'✓';position:absolute;left:10px}
@media (max-width:600px){.player .pbar .trkB{min-height:44px;font-size:13px;padding:6px 12px}.player .trkM{right:3vw}}
/* z31: season poster tiles */
.seasons{display:flex;gap:16px;overflow-x:auto;padding:10px 4px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.seasons::-webkit-scrollbar{display:none}
.stile{all:unset;flex:none;width:130px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transform-origin:center;transition:transform .18s}
.stile .sp{position:relative;display:block;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#111;outline:1px solid transparent;outline-offset:2px}
.stile .sp img{width:100%;height:100%;object-fit:cover;display:block}
.stile .slab{position:absolute;inset:auto 0 0 0;padding:22px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:13px;font-weight:600;text-align:center}
.stile.on .sp{outline:1px solid #fff}
.stile b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stile small{font-size:12px;color:var(--mut)}
.stile:hover,.stile:focus{transform:scale(1.04)}.stile:focus .sp{outline-color:#fffa}
@media (max-width:600px){.stile{width:104px}.seasons{gap:12px}}
@media (hover:none){.stile:hover{transform:none}}
/* z31: resume progress in play button + highlighted episode */
#playB{position:relative;overflow:hidden}#playB .pbp{position:absolute;left:20px;right:20px;bottom:6px;height:2px;background:#fff3;border-radius:1px}#playB .pbp i{display:block;height:100%;background:#fff}
.eps .ep.cur{outline:1px solid #fff;outline-offset:2px;border-radius:8px}
/* z31: in-page search fields readable (white text, 85% placeholder); top-bar #q untouched */
#app input[type=search],#hq{color:#fff;-webkit-text-fill-color:#fff}
#app input[type=search]::placeholder,#hq::placeholder{color:#fff;opacity:.85;-webkit-text-fill-color:rgba(255,255,255,.85)}
.sel select:disabled{opacity:1;color:#fff;-webkit-text-fill-color:#fff;cursor:default}
/* z31: Volver pinned under the top bar on every inner page */
.backrail{position:sticky;top:var(--hh,72px);z-index:35;height:0;overflow:visible;pointer-events:none}
.backrail .pageback{position:absolute;top:10px;left:max(4vw,env(safe-area-inset-left));margin:0;pointer-events:auto}
.backrail+*{padding-top:60px}.backrail+.hero{padding-top:0}
.pageback.inbar{position:static;margin:10px 4vw 0;flex:none}
.hubsticky:has(>.pageback.inbar),.tilehead:has(>.pageback.inbar){display:flex;flex-wrap:wrap;align-items:center}
.hubsticky>.pageback.inbar~*,.tilehead>.pageback.inbar~*{min-width:0}
@media (max-width:600px){.backrail .pageback{top:8px}.pageback.inbar{margin:8px 4vw 0}}
/* z31: shape-matched skeletons */
.sk.sk-tile{border:2px solid transparent;box-shadow:none;border-radius:12px}
.sk.sk-wide{aspect-ratio:16/9;height:auto;border-radius:8px}
.sk.sk-ep{height:96px;border-radius:8px;margin-bottom:10px}
/* z31: text tiles — span takes full inner width so balanced 2-line text is visible and centered */
a.tile.ctile span,.ctile span{flex:1 1 auto;width:100%;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:center;line-height:1.25}
.strip{scroll-padding-right:4vw}.strip::after{content:'';flex:0 0 4vw}
/* z31b: Volver rail is a real sticky strip (no overlap with headings) */
.backrail{height:auto;overflow:visible;pointer-events:auto;padding:8px max(4vw,env(safe-area-inset-left));background:#0b0b10f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.backrail .pageback{position:static;margin:0}
.backrail+*{padding-top:0}
/* z31b: text tiles — plain block text, no mid-word breaks */
a.tile.ctile,.ctile{padding:0 10%}
a.tile.ctile span,.ctile span{display:block;width:100%;max-height:2.5em;overflow:hidden;overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance}
/* z32: brand-colored logo masks (tiles + hub headers) */
.logo-m{display:block;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.hubhead .hublogo .logo-m{flex:none}
/* z32: narrow screens — no tile clipped at the right edge: rows end with padding equal to the left margin */
@media (max-width:600px){.strip{padding-right:4vw;scroll-padding-inline:4vw}.strip>*:last-child{margin-right:0}}
/* z32: % padding resolved against the row width (blanked text on wide screens); use fixed padding */
a.tile.ctile,.ctile{padding:0 18px}@media (max-width:600px){a.tile.ctile,.ctile{padding:0 10px}}
/* z32f: second top-bar search (people/countries/genres/...) */
header#top .search{flex:1 1 0;max-width:340px;margin:0}header#top .search:first-of-type{margin-left:auto}header#top .search.s2{margin-right:auto;position:relative}
.q2r{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:300px;max-height:70vh;overflow:auto;background:rgba(10,10,10,.96);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:6px;z-index:60;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.q2r[hidden]{display:none}.q2r .h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#999;padding:8px 10px 4px}
.q2r a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#fff;text-decoration:none;font-size:14px}.q2r a:hover,.q2r a:focus{background:rgba(255,255,255,.1);outline:none}
.q2r .av{flex:none;width:28px;height:28px;border-radius:50%;background:#1a1a22 center/cover}.q2r .av.noph{background:#1a1a22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Crect width='100' height='150' fill='%231a1a22'/%3E%3Ccircle cx='50' cy='52' r='22' fill='%235a5a6a'/%3E%3Cpath d='M18 138c0-24 14.3-42 32-42s32 18 32 42' fill='%235a5a6a'/%3E%3C/svg%3E") center 30%/85% no-repeat}.q2r .none{padding:12px;color:#999;font-size:14px}
@media (max-width:600px){
  header#top .search.s2{order:0;flex:0 0 44px;max-width:44px;margin:0;position:static}
  header#top .search.s2 input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Ccircle cx='9' cy='6' r='3.2'/%3E%3Cpath d='M3 17c.7-3.4 3.2-5.4 6-5.4s5.3 2 6 5.4'/%3E%3C/svg%3E")}
  header#top .search:first-of-type{margin-left:auto}
  header#top .search.s2:focus-within{position:absolute}
  .q2r{position:fixed;top:calc(58px + env(safe-area-inset-top));left:10px;right:10px;min-width:0}
  nav button{padding:0 8px}
}
/* z32f: genres separated by a wrap-safe dot attached to the following genre (never starts a line) */
.meta .g+.g::before{content:"· ";margin-left:-.15em}
.title-body .acts+.sel{margin-top:10px}
header#top .search input:focus{outline:none;border-color:var(--vmring)}
@media (max-width:600px){header#top .search.s2:focus-within{position:absolute;left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));top:calc(6px + env(safe-area-inset-top));max-width:none;flex:none;z-index:5}header#top .search.s2:focus-within input{width:100%;padding:0 14px 0 40px;background-position:14px center}}
@media (max-width:600px){nav button{white-space:nowrap;font-size:12px;padding:0 9px}#profBtn svg{display:none}header#top .search,header#top .search.s2{flex-basis:40px;max-width:40px}header#top .search input{width:40px;height:40px}header#top .search:focus-within input{background-color:#000;width:100%}header#top .brand{flex:none}}
/* z32g: in-progress episode card next to Ver */
.acts{align-items:center;flex-wrap:wrap}
.epcard{display:inline-flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(0,0,0,.45);color:#fff;text-decoration:none;max-width:min(420px,100%);transform-origin:center;transition:transform .18s,border-color .15s}
.epcard:hover,.epcard:focus{border-color:var(--vmring);transform:scale(1.03)}
.epcard .th{position:relative;flex:none;width:128px;aspect-ratio:16/9;border-radius:8px;background:#111 center/cover}
.epcard .pb{position:absolute;left:6px;right:6px;bottom:5px;height:3px;background:#fff4;border-radius:2px}.epcard .pb i{display:block;height:100%;background:#fff;border-radius:2px}
.epcard .tx{display:flex;flex-direction:column;min-width:0;font-size:13px;line-height:1.3}.epcard .tx b{font-weight:600}.epcard .tx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.epcard .tx small{color:var(--mut);font-size:12px}
@media (max-width:600px){.epcard{width:100%}.epcard .th{width:112px}}
@media (hover:none){.epcard:hover{transform:none}}
/* z32g: dark, readable track pickers on every browser (iOS rendered white boxes with faint text) */
.sel select{-webkit-appearance:none;appearance:none;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;color:#fff;-webkit-text-fill-color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:8px 34px 8px 12px;font:inherit;font-size:15px;min-height:42px;opacity:1}
.sel select:focus{outline:none;border-color:var(--vmring)}.sel select option{background:#000;color:#fff}
/* z32h: slim, single-row sticky title bar (awards / by-year / tiles), same rhythm as hub sticky headers */
.tilehead{display:flex;flex-wrap:nowrap;align-items:center;gap:28px;padding:14px 4vw 10px;min-height:0;border-bottom:1px solid #ffffff12}
.tilehead>.pageback.inbar{margin:0;flex:none}
.tilehead h1{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.tilehead .more{flex:none;margin-left:auto}
.tilehead~.ynav{top:auto}
/* year jump: ONE compact row */
.ynav{display:flex;align-items:center;gap:10px;padding:8px 4vw;margin-bottom:8px;border-bottom:1px solid #ffffff12}
.ynav .yyrs{display:flex;gap:8px;margin:0;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.ynav .ydw{flex:none;position:relative;display:inline-flex}
.ynav .ydsel{-webkit-appearance:none;appearance:none;min-height:30px;padding:2px 30px 2px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center;color:#fff;-webkit-text-fill-color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ynav .ydsel option{background:#000;color:#fff}
@media (max-width:600px){
  .tilehead{gap:16px;padding:10px 4vw 8px}.tilehead h1{font-size:20px}
  .ynav{padding:6px 4vw}.ynav .ydw,.ynav .yyrs{display:none}
  .ynav .ysel{display:block;min-height:36px;padding:0 14px;-webkit-appearance:none;appearance:none;background:rgba(0,0,0,.45);color:#fff;-webkit-text-fill-color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;font:inherit;font-size:14px}
}
.card .cap .capmore[hidden]{display:none}
#app>.tilehead,#app>.tilehead:has(>.pageback.inbar){flex-wrap:nowrap;align-items:center;background:#0b0b10}
#app>.ynav{background:#0b0b10}
/* z32h: ONE accent for every selection / focus / active state = deep indigo */
:root{--accent:#1e3a8a;--acc:var(--accent);--ring:var(--accent)}
*{-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible,.kb :focus{outline:2px solid var(--vmring);outline-offset:2px}
input,select,textarea{accent-color:var(--accent);caret-color:var(--accent)}
header#top .search input:focus,#app input[type=search]:focus,#hq:focus,.sel select:focus,.ynav .ydsel:focus,.ynav .ysel:focus,.login input:focus{border-color:var(--vmring);box-shadow:0 0 0 1px var(--accent);outline:none}
.ypill.on,.ynav .ydsel{border-color:var(--accent)}.ypill.on{background:rgba(30,58,138,.18)}
.ctile.on,.stile.on .sp{border-color:var(--accent);outline-color:var(--accent)}
.stile:focus-visible .sp{outline:2px solid var(--vmring)}
.eps .ep.cur{outline-color:var(--accent)}
.dots button.on{background:var(--accent)}
.card .cap .capmore[aria-expanded=true]{border-color:var(--accent);background:rgba(30,58,138,.18)}
.btn:focus-visible,.pageback:focus-visible,.capmore:focus-visible,.ypill:focus-visible,.epcard:focus-visible,.tile:focus-visible,.card:focus-visible,.ctry-tile:focus-visible,.q2r a:focus-visible,.player .trkB:focus-visible{outline:2px solid var(--vmring);outline-offset:2px;border-color:var(--vmring)}
.player .trkM button.on,.player .trkM button[aria-checked=true]{color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.login .pw .eye:focus-visible{outline:2px solid var(--vmring)}
/* z32j: hub bar first, attached under the top bar; compact brand band; magnifier icons in every search */
#app>.hubsticky:first-child{margin-top:0}
#app>.hubsticky{display:flex;flex-wrap:nowrap;align-items:center;gap:20px;padding:0 4vw;min-height:64px;background:#0b0b10}
#app>.hubsticky>.pageback.inbar{margin:0;flex:none}
#app>.hubsticky .hubhead{flex:0 1 auto;align-self:stretch;display:flex;align-items:center;flex-wrap:nowrap;gap:20px;padding:0 22px;min-height:64px;margin:0}
#app>.hubsticky .hubhead h1.hublogo{margin:0;display:flex;align-items:center;flex:none}
#app>.hubsticky .hubhead input{min-width:200px;width:min(280px,30vw)}
#app>.hubsticky .tabs{margin-left:auto;padding:0;align-self:stretch;display:flex;align-items:stretch}
#app>.hubsticky .tabs button{display:flex;align-items:center}
#app>.hubsticky .hublogo.ctry{padding:0;border:0;background:none}#app>.hubsticky .hublogo.ctry span{font-size:24px}
#app>.hubsticky+.hero{margin-top:0}
#q,#q2,#hq,#app input[type=search]{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffffcc' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M11 11l3.6 3.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:13px center;background-size:15px 15px;padding-left:36px}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
@media (max-width:760px){
  #app>.hubsticky{flex-wrap:wrap;gap:12px;padding:12px 4vw;min-height:0}
  #app>.hubsticky>.pageback.inbar{flex:0 0 auto}
  #app>.hubsticky .hubhead{order:2;flex:1 1 100%;flex-wrap:wrap;gap:12px;padding:12px 14px;min-height:0;border-radius:10px}
  #app>.hubsticky .hubhead input{flex:1 1 160px;min-width:0;width:auto}
  #app>.hubsticky .tabs{order:3;flex:1 1 100%;margin:0}
}
/* z32k: every inner-page second row = the title page's slim Volver bar height (8px + 40px Volver + 8px) */
:root{--subh:56px}
#app>.backrail{min-height:var(--subh);display:flex;align-items:center;padding-top:0;padding-bottom:0}
#app>.backrail .pageback,#app>.hubsticky>.pageback.inbar,#app>.tilehead>.pageback.inbar{min-height:40px;height:40px;padding-top:0;padding-bottom:0}
#app>.hubsticky,#app>.tilehead{height:var(--subh);min-height:var(--subh);padding-top:0;padding-bottom:0}
#app>.hubsticky .hubhead{min-height:0;height:var(--subh);align-self:auto;padding:0 18px}
#app>.hubsticky .hubhead input{height:34px;padding-top:0;padding-bottom:0;font-size:14px}
#app>.hubsticky .tabs{height:var(--subh)}
#app>.tilehead h1{font-size:22px}
#app>.ynav{min-height:0}
@media (max-width:760px){
  #app>.hubsticky{height:auto;padding:8px 4vw 0;gap:8px}
  #app>.hubsticky>.pageback.inbar{height:40px}
  #app>.hubsticky .hubhead{height:var(--subh);padding:0 12px;flex-wrap:nowrap}
  #app>.hubsticky .hubhead input{height:36px;font-size:16px}
  #app>.hubsticky .tabs{height:44px}
  #app>.tilehead{height:var(--subh)}#app>.tilehead h1{font-size:18px}
}
/* z32k: everything in the top bar and sticky bars vertically centered, equal padding, no stray margins */
header#top{display:flex;align-items:center}
header#top>*{margin-top:0!important;margin-bottom:0!important;align-self:center}
header#top .brand{display:flex;align-items:center;height:40px;line-height:0}header#top .brand img{display:block;vertical-align:middle}
#app>.backrail,#app>.hubsticky,#app>.tilehead,#app>.ynav{align-items:center}
#app>.backrail>*,#app>.hubsticky>*,#app>.tilehead>*,#app>.ynav>*{margin-top:0;margin-bottom:0}
#app .pageback{display:inline-flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box}
@media (max-width:760px){#app>.hubsticky{padding:8px 4vw}#app>.hubsticky .tabs{height:40px}}
/* z32l: gear settings menu (same look as the profile menu) */
#outBtn{width:40px;height:40px;min-height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:1px solid #fff3;color:#fff}
#outBtn:hover{border-color:#fffa}#outBtn[aria-expanded=true]{border-color:var(--accent)}
.gmenu{position:fixed;z-index:300;min-width:280px;max-width:calc(100vw - 16px);background:#0b0b10f7;border:1px solid #fff3;border-radius:12px;padding:6px;box-shadow:0 12px 32px #000c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gmenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;background:none;border:0;border-radius:8px;color:#fff;font:inherit;font-size:15px;text-align:left;cursor:pointer}
.gmenu button:hover,.gmenu button:focus-visible{background:#ffffff14;outline:none}
.gmenu .gl{flex:1}.gmenu .gv{color:var(--mut);font-size:13px;white-space:nowrap}
.gmenu .ck{width:16px;display:inline-block;text-align:center;color:var(--accent);font-weight:700}
.gmenu button[aria-checked=true]{color:#fff}
.gmenu .gback{color:var(--mut);font-size:13px;min-height:36px}
.gmenu hr{border:0;border-top:1px solid #ffffff1a;margin:4px 6px}
.gmenu .gnote{color:var(--mut);font-size:12px;line-height:1.35;padding:6px 12px 8px}
@media (max-width:600px){#outBtn{width:40px;height:40px}.gmenu{left:8px;right:8px!important;min-width:0}}
#profMenu .ck{color:var(--accent);font-weight:700}
/* z32m: brand band = a pill matching Volver (40px tall, fully rounded, 8px above/below inside the 56px bar) */
#app>.hubsticky .hubhead{height:40px;min-height:40px;align-self:center;border-radius:20px;padding:0 5px 0 16px;gap:14px}
#app>.hubsticky .hubhead input{height:30px;border-radius:15px;font-size:13px;width:min(240px,26vw);min-width:160px}
#app>.hubsticky .hublogo.ctry span{font-size:17px}
@media (max-width:760px){
  #app>.hubsticky .hubhead{height:40px;padding:0 5px 0 14px;border-radius:20px}
  #app>.hubsticky .hubhead input{height:30px;font-size:16px;min-width:0;width:auto;flex:1 1 120px}
}
/* z32n: catalog filter indicator */
#outBtn{position:relative}#outBtn.cfon::after{content:'';position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #0b0b10}
.gmenu .gv.on{color:#fff}
.cfnote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 4vw 0;padding:8px 8px 8px 14px;border:1px solid #ffffff1f;border-radius:10px;background:#ffffff08;color:#ddd;font-size:13.5px;width:max-content;max-width:calc(100% - 8vw)}
.cfnote .cfoff{min-height:30px;padding:0 12px;border-radius:15px;border:1px solid #fff3;background:transparent;color:#fff;font:inherit;font-size:12.5px;cursor:pointer}.cfnote .cfoff:hover{border-color:#fffa}
.gmenu .gspin{width:12px;height:12px;margin-left:auto;border:1.5px solid #fff4;border-top-color:var(--accent);border-radius:50%;animation:gsp .7s linear infinite;flex:none}
@keyframes gsp{to{transform:rotate(360deg)}}
/* z32q: unified grouped search */
header#top .search{max-width:640px}
#gsp{position:fixed;top:var(--hh,72px);left:0;right:0;z-index:90;max-height:calc(100vh - var(--hh,72px));overflow:auto;background:#0b0b10;border-bottom:1px solid #ffffff1f;box-shadow:0 18px 40px #000c;-webkit-overflow-scrolling:touch}
#gsp[hidden]{display:none}
#gsp .gsp-in{padding:4px 0 18px}
#gsp .gsp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4vw 0;color:var(--mut);font-size:13px}
#gsp .gs-all{color:#fff;border:1px solid #fff3;border-radius:15px;padding:5px 12px;font-size:13px;text-decoration:none}#gsp .gs-all:hover,#gsp .gs-all:focus-visible{border-color:var(--vmring)}
.gs-row h2{font-size:17px}
.gs-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 4vw 6px;scrollbar-width:none}.gs-chips::-webkit-scrollbar{display:none}
.gs-chip{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:17px;border:1px solid #fff3;background:#ffffff0d;color:#fff;font-size:14px;text-decoration:none;white-space:nowrap}
.gs-chip:hover,.gs-chip:focus-visible{border-color:var(--vmring);outline:none}
@media (max-width:600px){#gsp{top:calc(52px + env(safe-area-inset-top));bottom:0;max-height:none}body.gsp-on{overflow:hidden}}
@media (min-width:601px){header#top .search{flex:1 1 auto;max-width:640px;margin:0 auto}}
/* z32r: rating limits menu + password gate */
#profMenu{max-height:calc(100vh - 80px);overflow:auto}#profMenu .rh{display:flex;align-items:center;gap:6px;padding:8px 12px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#999}
#profMenu hr{border:0;border-top:1px solid #ffffff1f;margin:6px 4px}#profMenu .rl{display:flex;flex-direction:column;line-height:1.2}#profMenu .rl small{color:#999;font-size:12px}
#pwGate{position:fixed;inset:0;z-index:400;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
#pwGate .pwbox{width:min(380px,100%);background:#111117;border:1px solid #fff3;border-radius:14px;padding:20px}
#pwGate h3{margin:0 0 8px;font-size:18px}#pwGate p{margin:0 0 14px;color:#bbb;font-size:14px;line-height:1.45}
#pwGate .pwrow{display:flex;gap:6px}#pwGate input{flex:1;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid #fff3;background:#000;color:#fff;font-size:16px}
#pwGate input:focus{outline:none;border-color:var(--vmring);box-shadow:0 0 0 2px var(--ring)}#pwGate .eye{min-width:44px;border-radius:10px;border:1px solid #fff3;background:#000;color:#fff}
#pwGate .err{min-height:20px;color:#6b8cff;font-size:13px;margin:8px 0}#pwGate .pwact{display:flex;justify-content:flex-end;gap:8px}
.card .why{font-size:11.5px;color:#9a9aa3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* z33 (JC 2026-10-14): compact sticky category pill bar (awards / Oscars), stacked: title bar -> categories -> decade+years */
#app>section.row.catbar{position:sticky;z-index:29;background:#0b0b10;margin:0;padding:6px 4vw;border-bottom:1px solid #ffffff12}
#app>section.row.catbar>h2{display:none}
#app>section.row.catbar .strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;margin:0}
#app>section.row.catbar .strip::-webkit-scrollbar{display:none}
#app>section.row.catbar a.tile.ctile{flex:none;width:auto;height:34px;min-height:34px;aspect-ratio:auto;padding:0 16px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);transform:none}
#app>section.row.catbar a.tile.ctile span{display:block;width:auto;max-height:none;max-width:none;white-space:nowrap;font-size:14px;font-weight:500;line-height:1;letter-spacing:0;-webkit-line-clamp:unset}
#app>section.row.catbar a.tile.ctile span br{display:none}
#app>section.row.catbar a.tile.ctile:hover{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.12)}
#app>section.row.catbar a.tile.ctile.on{border-color:var(--accent);background:rgba(30,58,138,.18)}
#app>.ynav{margin-bottom:0}
#app section.row[id^="y-"]{scroll-margin-top:calc(var(--stk,128px) + 8px)}
@media (max-width:600px){#app>section.row.catbar{padding:5px 4vw}#app>section.row.catbar a.tile.ctile{padding:0 13px}#app>section.row.catbar a.tile.ctile span{font-size:13px}}
.awi{width:1em;height:1em;vertical-align:-.14em;margin-right:.3em;flex:none;color:#fff}
.awin b{font-weight:700}
/* z34a: Filters icon beside the gear */
#filtBtn{position:relative;width:40px;height:40px;min-height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:1px solid #fff3;color:#fff;flex:none}
#filtBtn:hover{border-color:#fffa}#filtBtn.cfon::after{content:'';position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #0b0b10}
.gmenu .rh{display:flex;align-items:center;gap:6px;padding:8px 12px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#999}
.gmenu .rl{display:flex;flex-direction:column;line-height:1.2;text-align:left}.gmenu .rl small{color:#999;font-size:12px}
.gmenu{max-height:calc(100vh - 80px);overflow:auto}
@media (max-width:600px){#filtBtn,#outBtn{width:36px;height:36px;min-height:36px}header#top nav{gap:6px}#profBtn span{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* z34a: user avatar circle (initials) */
#profBtn{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;border:1px solid #fff3;background:transparent;display:inline-flex;align-items:center;justify-content:center;flex:none}
#profBtn .ini{font-size:13px;font-weight:600;letter-spacing:.04em;color:#fff;max-width:none}#profBtn:hover{border-color:#fffa}#profBtn svg{display:none}
.gmenu .uname{padding:10px 12px 6px;font-weight:600;color:#fff}
@media (max-width:600px){#profBtn{width:36px;height:36px;min-height:36px}#profBtn .ini{font-size:12px}}
#outBtn{display:none!important}.gmenu hr.soft{border-top-color:#ffffff14;margin:6px 10px}

/* z33c award logo tiles + emblem icons */
a.tile.awt{position:relative}a.tile.awt .awlogo{object-fit:contain;display:block;pointer-events:none}
a.tile.awt .awn{position:absolute;right:9px;bottom:6px;font-size:11px;opacity:.8;pointer-events:none}
.awi.awe{display:inline-block;width:1.5em;height:1em;background:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.scopehead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 4vw 0}.scopehead h2{margin:0;font-size:22px}.scopehead .cnt{color:#999;font-weight:400;font-size:16px}.scopehead a{color:#ddd;font-size:14px;text-decoration:none;border-bottom:1px solid #fff4}.scopehead a:hover{color:#fff;border-color:var(--accent)}

/* z34-rc row title counts */
section.row > h2 .rc{font-weight:300;opacity:.6;margin-left:.15em}




/* oscreq (JC 2026-10-14): complete-the-collection tiles */
/* ribbon (JC 2026-10-14): full-color + dark .25 veil + indigo corner banner (replaces grayscale) */
.card.miss .t{color:#888}.card.miss .t small{color:#666;font-size:11px}
.card.miss .cap{opacity:.6}
.card.miss:hover,.card.miss:focus-within{transform:none}
.card.miss .pw{position:relative;display:block;overflow:hidden;border-radius:8px}
.card.miss .pw img{border-radius:8px;display:block}
.card.miss .pw::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:8px;background:rgba(0,0,0,.25)}
.card.miss .pw::after{content:"Not available";position:absolute;top:14px;right:-34px;z-index:2;pointer-events:none;width:120px;padding:4px 0;background:var(--accent,#1e3a8a);color:#fff;font:700 8.5px/1.1 Inter,system-ui,sans-serif;letter-spacing:.03em;text-align:center;text-transform:uppercase;transform:rotate(45deg);box-shadow:0 1px 4px rgba(0,0,0,.45)}
html[lang=es] .card.miss .pw::after{content:"No disponible"}
html[lang=en] .card.miss .pw::after{content:"Not available"}
@media(max-width:640px){.card.miss .pw::after{top:15px;right:-30px;width:110px;font-size:6.5px;padding:3px 0}}
.reqb{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;display:block;width:auto;z-index:3;box-sizing:border-box;background:#000000c7;padding:3.2cqw 2cqw;border-radius:6px;border:1px solid var(--accent,#1e3a8a);color:#fff;font-weight:600;font-size:7cqw;line-height:1.15;font-family:inherit;cursor:pointer;letter-spacing:0;white-space:nowrap;text-align:center;overflow:hidden}
.reqb:hover,.reqb:focus-visible{background:var(--accent,#1e3a8a);outline:none}
.reqb.busy{opacity:.6;cursor:progress}
.reqb.done{border-color:#666;color:#ccc;background:#111111d9;cursor:default}
.reqb.lim{font-size:5.4cqw;padding:3.2cqw 1cqw;letter-spacing:0}
.tilehead .oonly{margin-left:auto;flex:none;height:32px;padding:0 14px;border-radius:16px;border:1px solid #ffffff33;background:transparent;color:#ddd;font:500 13px/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.tilehead .oonly.on{background:var(--accent,#1e3a8a);border-color:var(--accent,#1e3a8a);color:#fff}
.tilehead .oonly:focus-visible{outline:2px solid var(--accent,#1e3a8a);outline-offset:2px}
.tilehead h1 .rc{font-weight:300;font-size:.7em;opacity:.75;margin-left:6px}
@media(max-width:640px){.tilehead .oonly{height:28px;padding:0 10px;font-size:12px}}
.tilehead .oos{display:none}
@media(max-width:640px){.tilehead .ool{display:none}.tilehead .oos{display:inline}}
.card.miss{cursor:pointer}
/* award status badge on the poster (JC 2026-10-14): same look as .pbx i */
.card .awb{position:absolute;left:0;top:3cqw;width:100%;display:flex;justify-content:flex-start;padding-left:3cqw;box-sizing:border-box;pointer-events:none;z-index:2}
.card .awb i{display:inline-flex;align-items:center;justify-content:center;gap:1.2cqw;font:700 5cqw/1 Inter,system-ui,sans-serif;font-style:normal;color:#fff;background:rgba(15,15,20,.7);border-radius:1.7cqw;height:6.8cqw;min-width:19cqw;padding:0 2cqw;box-sizing:border-box;letter-spacing:.02em}
.card .awb .awi{width:1em;height:1em;margin:0;flex:none}
.card.miss .awb{opacity:1}
.cap .capn{opacity:.6}

/* vmx-brand */header#top .brand img{height:34px;width:auto}@media (max-width:600px){header#top .brand img{height:13px}}

/* myreq (JC 2026-10-14): My requests row badges, top-left like option B; pending keeps the veil + ribbon */
.card .awb.myqb{top:3cqw}
.card .awb.myqb.ok i{background:var(--accent,#1e3a8a)}
.card.myq{cursor:default}

/* myreq-fit (JC 2026-10-14): corner ribbon centred on the corner diagonal (centre d px from top and right edges; visible chord = 2.83*d) with padding at both ends; badges vertically centred */
.card.miss .pw::after{top:23px;right:-44px;width:150px;height:16px;padding:0;font-size:8px;line-height:16px;letter-spacing:.02em}
@media(max-width:640px){.card.miss .pw::after{top:16px;right:-33px;width:110px;height:12px;padding:0;font-size:6px;line-height:12px;letter-spacing:.02em}}
.card .awb.myqb i{height:auto;line-height:6.2cqw;font-size:4.6cqw;padding:.2cqw 2.6cqw .4cqw;display:inline-block}

/* langgap (JC 2026-10-14, option 4): bottom sheet on owned award titles missing Spanish audio/subs; replaces ESP/quality chips, award badge stays top-left */

.card .lsheet{position:absolute;left:0;top:0;width:100%;aspect-ratio:2/3;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;pointer-events:none;border-radius:8px;overflow:hidden}
.card .lsheet::before{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(8,10,20,.96) 0,rgba(8,10,20,.86) 50%,rgba(8,10,20,0))}
.card .lst{position:relative;text-align:center;color:#e3e8ff;font:600 5.6cqw/1.25 Inter,system-ui,sans-serif;padding:0 4cqw}
.card .lreqb{position:relative;pointer-events:auto;margin:2.6cqw 4cqw 4cqw;padding:2.6cqw 1cqw;border:0;border-radius:1.8cqw;background:var(--accent,#1e3a8a);color:#fff;font:700 5.6cqw/1.1 Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .lreqb:hover,.card .lreqb:focus-visible{background:#2747a8;outline:none}
.card .lreqb.busy{opacity:.6}
.card .lreqb.done{background:#111111d9;color:#ccc;box-shadow:inset 0 0 0 1px #666;cursor:default}
/* one-off: missing-title ribbon is deep red; My requests 'Ya disponible' is dark green */
.card.miss .pw::after{background:#b91c1c}
.card .awb.myqb.ok i{background:#166534}
.card .awb.myqb.pend i{background:var(--accent,#1e3a8a)}

/* awchips (JC 2026-10-14): award switcher row = thin brand-colored rectangles (same colors as the big award tiles) */
#app>section.row.catbar a.tile.ctile.awsw{border-radius:4px;background:var(--awbg,#000);border:1px solid rgba(255,255,255,.18);opacity:.62;transition:opacity .15s,box-shadow .15s}
#app>section.row.catbar a.tile.ctile.awsw span{color:var(--awfg,#fff);font-weight:600;letter-spacing:.02em}
#app>section.row.catbar a.tile.ctile.awsw:hover{background:var(--awbg,#000);opacity:.9;border-color:rgba(255,255,255,.4)}
#app>section.row.catbar a.tile.ctile.awsw.on{opacity:1;background:var(--awbg,#000);border:2px solid #1e3a8a;box-shadow:0 0 0 1px #1e3a8a,0 0 10px 2px rgba(30,58,138,.75)}

/* awlogo (JC 2026-10-14): small award logo inside switcher tiles; tiles 46px tall */
#app>section.row.catbar a.tile.ctile.awsw{height:48px;min-height:48px;gap:8px;padding:0 14px}
#app>section.row.catbar a.tile.ctile.awsw .awsl{flex:none;display:block;height:32px;background:var(--awfg,#fff);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
#app>section.row.catbar a.tile.ctile.awsw img.awsl{background:none;object-fit:contain}

/* mhero (JC 2026-10-14): phones = full-width 16:9 backdrop, compact caption overlapping its bottom, rows start higher */
@media (max-width:640px){
  #app .hero.carousel{height:calc(56.25vw + 136px);background:var(--bg)}
  #app .hero.carousel>.slide{padding:0 5vw 14px;align-items:flex-end}
  #app .hero.carousel img.bg{height:56.25vw;object-fit:cover;object-position:center}
  #app .hero.carousel .slide:after{background:linear-gradient(0deg,var(--bg) 0,var(--bg) calc(100% - 56.25vw + 2px),#0b0b10b3 calc(100% - 56.25vw + 40px),#0000 calc(100% - 56.25vw + 110px))}
  #app .hero.carousel .cap img.logo{max-height:52px;max-width:52vw;margin-bottom:6px}
  #app .hero.carousel h1{font-size:22px;margin:0 0 4px}
  #app .hero.carousel .meta{font-size:12px;row-gap:2px;margin:0}
  #app .hero.carousel p{font-size:13px;line-height:1.3;margin:4px 0 8px;-webkit-line-clamp:2}
  #app .hero.carousel .acts .btn{min-height:36px;padding:4px 14px;font-size:14px}
  #app .hero.carousel .dots{bottom:auto;left:auto;right:4vw;top:10px;transform:none;justify-content:flex-end}
}

/* paidonly (JC 2026-10-14): purchase-only titles = gray badge/button */
.card .awb.myqb.paid i{background:#4b5563}
.card.miss .reqb.paidb,.card.miss .reqb.paidb:disabled{background:#4b5563;color:#fff;border-color:#4b5563;opacity:1;cursor:default}
/* profiles (JC 2026-10-15): picker avatars + profile switch rows in the user menu */
.choice span.mono.pfav{border:none;font-size:34px;font-weight:600;color:#fff;box-shadow:0 4px 18px #0006}
.gmenu .pfdot{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;margin-right:9px;vertical-align:middle}
.gmenu [data-pf] small{color:#9a9aa5;font-weight:400;margin-left:6px}
.choice span.mono.pfav{overflow:hidden}.choice span.mono.pfav img,.gmenu .pfdot img{width:100%;height:100%;display:block;border-radius:50%}
.choice span.mono.pfav{width:96px;height:96px}
#profBtn .pfimg{width:100%;height:100%;border-radius:50%;display:block}

.gmenu .pfrow.cur{background:#ffffff1f;cursor:default;font-weight:600}
.gmenu .pfrow .pfck{margin-left:auto;color:#fff;font-weight:700}
.gmenu .pfrow .pfdot{width:28px;height:28px}

/* z60 hubtabs: back + Movies/Shows/All left, hub logo centered, pill tabs; top-bar search centered between logo and Filtros */
#app>.hubsticky{position:sticky}
#app>.hubsticky>.pageback.inbar{order:0}
#app>.hubsticky .tabs{order:1;margin-left:14px;margin-right:auto;height:auto;align-self:center;align-items:center;gap:8px;padding:0}
#app>.hubsticky .hubhead{order:2}
#app>.hubsticky .tabs button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;height:34px;padding:0 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:transparent;color:#cfd0d8;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
#app>.hubsticky .tabs button:hover,#app>.hubsticky .tabs button:focus-visible{background:rgba(255,255,255,.12);border-color:var(--vmring);color:#fff;outline:none}
#app>.hubsticky .tabs button.on{background:var(--accent,#1e3a8a);border-color:var(--accent,#1e3a8a);color:#fff;font-weight:600;box-shadow:0 0 0 1px #1e3a8a,0 0 10px 2px rgba(30,58,138,.75)}
#app>.hubsticky .tabs button.on:focus-visible{box-shadow:0 0 0 2px #fff,0 0 10px 2px rgba(30,58,138,.75)}
@media (min-width:761px){#app>.hubsticky .hubhead{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}}
@media (max-width:760px){
  #app>.hubsticky{flex-wrap:wrap;row-gap:10px}
  #app>.hubsticky .tabs{flex:1 1 auto;width:auto;margin-left:10px;height:44px;overflow-x:auto}
  #app>.hubsticky .tabs button{height:36px;min-height:36px;padding:0 13px;flex:none}
  #app>.hubsticky .hubhead{order:3;flex:1 1 100%;justify-content:center}
}
@media (min-width:601px){header#top>.search{flex:0 1 640px;margin-left:auto;margin-right:auto}header#top>.search~*{margin-left:0}}

/* z61: hub search placeholder 'Search only on X' fits on phones */
#hq{text-overflow:ellipsis}#hq::placeholder{text-overflow:ellipsis}
@media (max-width:600px){#hq::placeholder{font-size:14px}}

/* z62 ratings panel: Save / Cancel */
.gmenu .rlacts{display:flex;gap:8px;justify-content:flex-end;padding:8px 10px 10px;border-top:1px solid #ffffff14;position:sticky;bottom:0;background:inherit}
.gmenu .rlacts button{width:auto;min-height:38px;padding:0 16px;border-radius:999px;font-size:14px;justify-content:center;flex:none;transition:background-color .15s,border-color .15s}
.gmenu .rlacts .rlcancel{border:1px solid rgba(255,255,255,.28)}
.gmenu .rlacts .rlsave{background:var(--accent,#1e3a8a);border:1px solid var(--accent,#1e3a8a);font-weight:600;box-shadow:0 0 10px 1px rgba(30,58,138,.6)}
.gmenu .rlacts .rlsave:hover,.gmenu .rlacts .rlsave:focus-visible{background:#2a4bb0;border-color:#2a4bb0}

/* z63: note lives in the pinned footer, above the buttons */
.gmenu .rlfoot{position:sticky;bottom:-6px;margin:6px -6px -6px;padding:0 6px;border-top:1px solid #ffffff24;background:#0b0b10}
.gmenu .rlfoot .rlacts{position:static;border-top:0;padding-top:4px;background:none}
.gmenu .rlfoot .rlnote{padding:8px 10px 2px;font-size:12px;color:var(--mut)}

/* z64 Content filter (amber shield button + panel) */
#cwBtn{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;min-height:40px;padding:0 14px;border-radius:20px;border:1px solid #f59e0b;background:linear-gradient(135deg,#d97706,#b45309);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 0 10px 1px #b4530966;transition:filter .15s,box-shadow .15s}
#cwBtn:hover,#cwBtn:focus-visible{filter:brightness(1.12);box-shadow:0 0 14px 2px #d9770699;outline:none}
#cwBtn.cfon::after{content:'';position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #b45309}
@media (max-width:600px){#cwBtn{width:36px;height:36px;min-height:36px;padding:0;justify-content:center;border-radius:50%}#cwBtn .cwl{display:none}}
.gmenu.cwpanel{width:380px;border-color:#f59e0b88}
.gmenu .cwh{display:flex;align-items:center;gap:8px;padding:10px 12px 6px;font-weight:700;color:#fbbf24}
.gmenu .cwsrc{padding:0 12px 4px;font-size:11.5px;color:var(--mut)}
.gmenu .cwcat{padding:6px 12px 3px;font-size:13px}
.gmenu .cwseg{display:flex;gap:4px;padding:0 10px 6px;flex-wrap:wrap}
.gmenu .cwseg button.cwp{flex:1 1 0;width:auto;min-height:30px;padding:0 6px;justify-content:center;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:12px;color:#cfd0d8;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.gmenu .cwseg button.cwp:hover,.gmenu .cwseg button.cwp:focus-visible{background:rgba(255,255,255,.12);border-color:var(--vmring);color:#fff}
.gmenu .cwseg button.cwp.on{background:var(--accent,#1e3a8a);border-color:var(--accent,#1e3a8a);color:#fff;font-weight:600;box-shadow:0 0 8px 1px rgba(30,58,138,.75)}
.gmenu button.cwt{justify-content:space-between;min-height:38px;font-size:13px}
.gmenu .cwt .sw{flex:none;width:34px;height:20px;border-radius:10px;background:#333;position:relative;transition:background-color .15s}
.gmenu .cwt .sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#bbb;transition:left .15s}
.gmenu .cwt[aria-checked=true] .sw{background:var(--accent,#1e3a8a)}.gmenu .cwt[aria-checked=true] .sw::after{left:16px;background:#fff}
.cwblock{max-width:560px;margin:0 auto;padding:12vh 20px;text-align:center}.cwblock .cwshield{font-size:44px}.cwblock p{color:var(--mut)}.cwblock .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* z66: Reset all content filters */
.gmenu .cwh{justify-content:space-between}.gmenu .cwh .cwt1{display:inline-flex;align-items:center;gap:8px}
.gmenu .cwh button.cwreset{width:auto;min-height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:11.5px;font-weight:500;color:#e5e5ea;flex:none;transition:background-color .15s,border-color .15s}
.gmenu .cwh button.cwreset:hover,.gmenu .cwh button.cwreset:focus-visible{background:rgba(255,255,255,.12);border-color:var(--vmring);color:#fff}

/* z68 Display button + panel */
#filtBtn{width:auto;gap:7px;padding:0 14px;border-radius:20px;border:1px solid #22d3ee;background:linear-gradient(135deg,#0e7490,#155e75);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 0 10px 1px #0e749066;transition:filter .15s,box-shadow .15s}
#filtBtn:hover,#filtBtn:focus-visible{filter:brightness(1.12);box-shadow:0 0 14px 2px #0891b299;outline:none;border-color:#67e8f9}
#filtBtn.cfon::after{background:#fff;box-shadow:0 0 0 2px #155e75;top:3px;right:3px}
@media (max-width:600px){#filtBtn{width:36px;padding:0;justify-content:center;border-radius:50%}#filtBtn .dpl{display:none}}
.gmenu.dppanel{border-color:#22d3ee88}.gmenu .dph{color:#67e8f9}
.gmenu .dpseg button.cwp{flex:1 1 auto}

/* z70: Display panel header icon (teal) */
.gmenu .dph .cwt1 svg{color:#22d3ee;flex:none}

/* z71 title-page Audio / Subtitles chips */
#selBox .trkhid{display:none}
#selBox .tchip{position:relative;display:inline-flex}
#selBox .tcb{display:inline-flex;align-items:baseline;gap:8px;min-height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:14px;cursor:pointer;max-width:72vw;transition:background-color .15s,border-color .15s}
#selBox .tcb small{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
#selBox .tcb:hover,#selBox .tcb:focus-visible,#selBox .tcb[aria-expanded=true]{background:rgba(255,255,255,.12);border-color:var(--vmring);outline:none}
#selBox .tcb[disabled]{opacity:.55;cursor:default}
#selBox .tcl{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:240px;max-width:min(360px,calc(100vw - 24px));max-height:50vh;overflow:auto;background:#0b0b10f7;border:1px solid #fff3;border-radius:12px;padding:6px;box-shadow:0 12px 32px #000c}
#selBox .tcl button{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:0 10px;background:none;border:0;border-radius:8px;color:#fff;font:inherit;font-size:14px;text-align:left;cursor:pointer}
#selBox .tcl button:hover,#selBox .tcl button:focus-visible{background:#ffffff14;outline:none}
#selBox .tcl .ck{width:14px;flex:none;color:#fff}

/* z72 title page: single quiet 'Audio & subtitles' button + panel */
#selBox .tsing{position:relative;display:inline-flex}
#selBox .tsb{min-height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:transparent;color:#c9cad3;font:inherit;font-size:13px;font-weight:400;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
#selBox .tsb:hover,#selBox .tsb:focus-visible,#selBox .tsb[aria-expanded=true]{background:rgba(255,255,255,.08);border-color:var(--vmring);color:#fff;outline:none}
#selBox .tsp{position:absolute;top:calc(100% + 6px);left:0;z-index:60;display:flex;gap:6px;width:max-content;max-width:calc(100vw - 24px);max-height:55vh;overflow:auto;background:#0b0b10f7;border:1px solid #fff3;border-radius:12px;padding:6px;box-shadow:0 12px 32px #000c}
#selBox .tsp[hidden]{display:none}
#selBox .tsl{min-width:170px;flex:1 1 0}
#selBox .tsh{padding:8px 10px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#999}
#selBox .tsp button{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:0 10px;background:none;border:0;border-radius:8px;color:#fff;font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
#selBox .tsp button:hover,#selBox .tsp button:focus-visible{background:#ffffff14;outline:none}
#selBox .tsp button[disabled]{opacity:.5;cursor:default}
#selBox .tsp .ck{width:14px;flex:none}
@media (max-width:600px){#selBox .tsp{flex-direction:column;width:calc(100vw - 32px)}}

/* z73 Content filter: request your own filter */
.gmenu .cwreq{padding:4px 12px 8px}
.gmenu details.cwreq summary{cursor:pointer;font-size:13px;color:#e5e5ea;padding:6px 0;list-style-position:inside}
.gmenu .cwreq textarea{width:100%;box-sizing:border-box;margin-top:6px;padding:8px 10px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:#000a;color:#fff;font:inherit;font-size:13px;resize:vertical}
.gmenu .cwreq textarea:focus{outline:none;border-color:var(--vmring);box-shadow:0 0 0 1px var(--accent)}
.gmenu .cwreqr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.gmenu .cwreqm{font-size:12px;color:#fbbf24}
.gmenu .cwreqr button.cwreqs{width:auto;min-height:32px;padding:0 16px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:13px;justify-content:center;flex:none}
.gmenu .cwreqr button.cwreqs:hover,.gmenu .cwreqr button.cwreqs:focus-visible{background:rgba(255,255,255,.12);border-color:var(--vmring)}

/* z74 award chips: logo-only chips centered */
#app>section.row.catbar a.tile.ctile.awsw.lo{justify-content:center;padding:0 12px}

/* ===== TV mode (html.tv, Android TV app 'VideoMaxTV' UA) - desktop/mobile untouched ===== */
html.tv{scroll-padding-top:calc(var(--hh,77px) + 24px)}
html.tv header#top[hidden]{display:none}
html.tv body.hdr #app{padding-top:calc(var(--hh,77px) + 8px)}
html.tv header#top .brand img{height:40px;width:auto;max-width:200px;object-fit:contain}
html.tv #cwBtn,html.tv #filtBtn{white-space:nowrap;flex:none;padding:0 12px;font-size:13px;gap:6px}
html.tv #cwBtn .cwl,html.tv #filtBtn .dpl{white-space:nowrap}
html.tv header#top .search{min-width:0;flex:1 1 auto}
html.tv #app>.hubsticky .hubhead{position:static;transform:none;margin-left:auto;flex:0 1 auto;min-width:0}
html.tv #app>.hubsticky .hubhead input{min-width:0}
html.tv a:focus,html.tv button:focus,html.tv input:focus,html.tv select:focus,html.tv textarea:focus,html.tv summary:focus,html.tv [tabindex]:focus{outline:2px solid var(--vmring);outline-offset:3px;box-shadow:var(--vmglow)}
html.tv #cwBtn:focus,html.tv #filtBtn:focus,html.tv #profBtn:focus,html.tv #q:focus,html.tv #hq:focus,html.tv .card:focus,html.tv .tile:focus,html.tv .gmenu button:focus,html.tv #app .pageback:focus,html.tv .btn:focus{outline:2px solid var(--vmring);outline-offset:3px;box-shadow:var(--vmglow)}

/* z80: the [hidden] header stays hidden on every device (header#top{display:flex} was overriding it) */
header#top[hidden]{display:none}

/* z81 player: audio + CC icon buttons */
.player .pbar .trkI{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;min-height:42px;padding:0;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);border-radius:50%;color:#fff;cursor:pointer;transition:background-color .15s,border-color .15s}
.player .pbar .trkI:hover,.player .pbar .trkI:focus{border-color:var(--vmring);background:rgba(255,255,255,.12);outline:none}
.player .pbar .trkI+.trkI{margin-left:8px}
.player .trkM[data-m=a]{right:calc(4vw + 50px)}
@media (max-width:600px){.player .pbar .trkI{width:44px;height:44px}}

/* z82 TV playback: hide app chrome while a video plays */
html.tv body.playing header#top,html.tv body.playing #gearMenu,html.tv body.playing #profMenu,html.tv body.playing .gsp,html.tv body.playing #gsp,html.tv body.playing footer{display:none}
html.tv body.playing #app{padding-top:0}

/* z84 (JC): 'filter active' dot inside the Content filter button, centered between label end and right edge (gap == right padding) */
#cwBtn.cfon{padding-right:7px}
#cwBtn.cfon::after{position:static;flex:none;top:auto;right:auto;box-shadow:none}
html.tv #cwBtn.cfon{padding-right:6px}
@media (max-width:600px){#cwBtn.cfon{padding:0}#cwBtn.cfon::after{position:absolute;top:50%;right:3px;width:7px;height:7px;margin-top:-3.5px}}

/* z85 menu/panel close (x): subtle, sticky top-right */
.mclose{position:sticky;top:0;float:right;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:2px 2px 0 6px;padding:0;border:0;border-radius:50%;background:transparent;color:#ffffff80;cursor:pointer;transition:background .15s,color .15s}
.mclose svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mclose:hover,.mclose:focus-visible{background:#ffffff1a;color:#fff;outline:none}
#profMenu>.mclose{width:26px;min-height:26px;padding:0;gap:0;justify-content:center}

/* z86 (JC): optically center the active dot on the label cap height (measured at 3x: web 1.8px low, TV 0.3px) */
#cwBtn.cfon::after{transform:translateY(-2px)}
html.tv #cwBtn.cfon::after{transform:translateY(-.5px)}
@media (max-width:600px){#cwBtn.cfon::after{transform:none}}

.mclose{position:absolute;top:6px;right:6px;float:none;margin:0}
.mclose.inh{position:static;flex:none;margin:0 -4px 0 2px}
.player .trkM{position:absolute}.player .trkM>.mclose{top:4px;right:4px}
.gmenu button.mclose,#profMenu button.mclose,.player .trkM button.mclose{width:26px;min-height:26px;height:26px;padding:0;gap:0;justify-content:center;flex:none;border-radius:50%;color:#ffffff80;background:transparent}
.gmenu button.mclose:hover,.gmenu button.mclose:focus-visible,.player .trkM button.mclose:hover{background:#ffffff1a;color:#fff}
.gmenu>.mclose,#profMenu>.mclose{top:5px;right:5px}
.gmenu:has(>.mclose),#profMenu:has(>.mclose){padding-top:32px}
.player .trkM:has(>.mclose){padding-top:30px}
.cwh .cwreset{margin-left:auto}
.player .trkM>button.mclose{position:absolute;top:4px;right:4px;margin:0}
.player .trkM:has(>.mclose){padding-top:26px}

/* z91 TV: player fills the viewport (no fullscreen API), controls stay reachable */
html.tv body.playing .player{position:fixed;inset:0;width:100vw;height:100vh;background:#000;z-index:400}
html.tv body.playing .player video{position:fixed;inset:0;width:100vw;height:100vh;object-fit:contain;background:#000}
html.tv body.playing .player .pbar,html.tv body.playing .player .trkM{z-index:410}
html.tv body.playing .player .pbar:focus-within{opacity:1;visibility:visible}
html.tv body.playing{overflow:hidden}

/* z93 TV/remote mode (VideoMax App spec): ~65% of the previous TV sizing, crisp text, thin white focus on the poster only, no on-screen back */
html.tv{zoom:var(--tvz,.75);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.tv .strip{scroll-snap-type:none}html.tv .card{scroll-snap-align:none}
html.tv .backrail,html.tv #app .pageback,html.tv .player .pbar .back{display:none}
html.tv body a:focus,html.tv body button:focus,html.tv body input:focus,html.tv body select:focus,html.tv body textarea:focus,html.tv body summary:focus,html.tv body [tabindex]:focus{outline:1.5px solid #ffffffd9;outline-offset:2px;box-shadow:none}
html.tv body .card:focus,html.tv body .card:focus-visible{outline:none;box-shadow:none;border-color:transparent;transform:none}
html.tv body .card:focus>img,html.tv body .card:focus .pw img,html.tv body .card:focus>.noph{outline:2px solid var(--vmring);outline-offset:2px;box-shadow:none}
/* z216 (JC 2026-10-19): posters/thumbnails/cover art focus 1px wider; controls keep their outline */
html.tv body .card:focus>img,html.tv body .card:focus .pw img,html.tv body .card:focus>.noph{outline-width:3px}
html.tv body .ctile:focus,html.tv body .tile:focus,html.tv body .ctry-tile:focus{outline:2px solid var(--vmring);outline-offset:2px;box-shadow:none;transform:none}
html.tv body #top button:focus,html.tv body #top a:focus,html.tv body #top input:focus{outline:1.5px solid #ffffffb3;outline-offset:2px;box-shadow:none}
html.tv body.playing .player,html.tv body.playing .player video{width:100%;height:100%}
html.tv .tvx{--tvcw:300px}
/* z108 Streaming | Live TV switch next to the logo (JC 2026-10-17): white on dark, current one filled */
.modesw{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid #ffffff2e;border-radius:999px;background:#ffffff08;flex:none}
.modesw button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:#cfd0d8;font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.modesw button svg{width:15px;height:15px;flex:none}
.modesw button:hover,.modesw button:focus-visible{background:#ffffff17;color:#fff;outline:none}
.modesw button.on{background:#f2f2f5;color:#0b0b10}
header#top .modesw{margin-left:14px}
html.tv .modesw button:focus{outline:2px solid var(--vmring);outline-offset:2px}
@media (max-width:600px){header#top .modesw{margin-left:8px}.modesw{padding:2px}.modesw button{height:28px;padding:0 9px;font-size:11.5px;gap:0}.modesw button svg{display:none}}
@media (max-width:360px){.modesw button{padding:0 7px;font-size:11px}}
/* z109 phone: the switch is icon-only (labels stay as aria-label/title) so the top bar fits on 360-430 px screens */
@media (max-width:600px){header#top .modesw{margin-left:6px}.modesw button{width:36px;height:28px;padding:0;justify-content:center}.modesw button svg{display:block;width:17px;height:17px}.modesw button span{display:none}}
@media (max-width:380px){header#top .brand img{height:11px}header#top .modesw{margin-left:4px}.modesw button{width:32px}}
/* plhint (JC 2026-10-17): gray one-line hint under Poster language when Original is chosen */
.gmenu .plhint{margin-top:2px;font-size:12px;font-weight:300;color:#9a9ba6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmenu .plhint[hidden]{display:none}
/* reqshared (JC 2026-10-17): already-requested states (disabled, muted, longer label wraps) */
.reqb.done{font-size:5.6cqw;letter-spacing:0}
.reqb.oth{color:#b9bac4}
/* feedback (JC 2026-10-17): small dialog, white on dark */
#fbDlg{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000a6;padding:16px}
#fbDlg .fbc{width:min(480px,100%);background:#15151c;border:1px solid #ffffff1f;border-radius:14px;padding:18px 18px 16px;box-shadow:0 18px 50px #000a;color:#f2f2f5}
#fbDlg h2{margin:0 0 12px;font-size:17px;font-weight:600}
#fbDlg textarea{display:block;width:100%;box-sizing:border-box;min-height:120px;resize:vertical;background:#0b0b10;color:#f2f2f5;border:1px solid #ffffff2e;border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.4}
#fbDlg textarea::placeholder{color:#7d7e89}
#fbDlg textarea:focus{outline:none;border-color:#ffffffa0}
#fbDlg .fbr{display:flex;justify-content:space-between;gap:10px;min-height:18px;margin:6px 2px 10px;font-size:12px;color:#9a9ba6}
#fbDlg .fbm{color:#e8e8ee}
#fbDlg .fbacts{display:flex;justify-content:flex-end;gap:10px}
#fbDlg .fbacts button{height:36px;padding:0 16px;border-radius:999px;font:inherit;font-size:14px;cursor:pointer;border:1px solid #ffffff47;background:transparent;color:#e8e8ee}
#fbDlg .fbacts .pri{background:#f2f2f5;color:#0b0b10;border-color:#f2f2f5;font-weight:600}
#fbDlg .fbacts button:focus-visible{outline:2px solid var(--vmring);outline-offset:2px}
#fbDlg .fbacts .pri:disabled{opacity:.6}
.gmenu .fbitem .gl{display:inline-flex;align-items:center;gap:8px}
html.tv #fbDlg .fbc{width:min(620px,100%)}
/* feedback top-bar button (JC 2026-10-17): Ulysses + dito only; quiet pill, white on dark */
.fbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;margin:0 6px;border-radius:999px;border:1px solid #ffffff2e;background:transparent;color:#cfd0d8;font:inherit;font-size:12.5px;white-space:nowrap;cursor:pointer;flex:none}
.fbtn:hover,.fbtn:focus-visible{color:#fff;border-color:#ffffffa0;background:#ffffff14;outline:none}
html.tv .fbtn:focus{outline:2px solid var(--vmring);outline-offset:2px}
@media (max-width:600px){.fbtn{width:30px;padding:0;justify-content:center;margin:0 3px}.fbtn span{display:none}}
/* center rule (JC 2026-10-17): dialogs/menus center titles, hints, option groups and buttons */
.gmenu .dp-pl button.cwp{flex:1 1 0}
.gmenu .plhint{display:flex;gap:4px;padding:0 10px 6px;margin-top:-1px;overflow:visible;white-space:nowrap}
.gmenu .plhint>span,.gmenu .plhint>i{flex:1 1 0;display:flex;justify-content:center;min-width:0}
.gmenu .plhint>span{font-size:12px;font-weight:300;color:#9a9ba6}
.gmenu .plhint[hidden]{display:none}
.gmenu.cwpanel .rh{justify-content:center}
.gmenu.cwpanel .cwsrc,.gmenu.cwpanel .cwcat,.gmenu.cwpanel .gnote,.gmenu.cwpanel .rlnote{text-align:center}
.gmenu.cwpanel .cwseg{justify-content:center}
.gmenu.cwpanel .cwh{flex-wrap:wrap;justify-content:center;gap:6px 12px;text-align:center}
.gmenu .rlacts,.gmenu .rlfoot .rlacts{justify-content:center}
.gmenu details.cwreq summary{text-align:center}
.gmenu .cwreqr{flex-wrap:wrap;justify-content:center;text-align:center}
.player .trkM,.player .trkM .h{text-align:center}
.player .trkM button:not(.mclose){padding-right:30px}
#fbDlg h2,#fbDlg .fbr{text-align:center}
#fbDlg .fbr{justify-content:center;gap:14px}
#fbDlg .fbacts{justify-content:center}
#pwGate h3,#pwGate p,#pwGate .err{text-align:center}
#pwGate .pwact{justify-content:center}
/* fbshape (JC 2026-10-17, Ulysses feedback): Feedback pill has the same shape as Content filter / Display, same nav gap; dialog has a centered gray hint */
#top .fbtn{gap:7px;height:40px;min-height:40px;padding:0 14px;margin:0;border-radius:20px;border:1px solid #a78bfa;background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;font-size:14px;font-weight:600;box-shadow:0 0 10px 1px #7c3aed66;transition:filter .15s,box-shadow .15s}
#top .fbtn svg{width:16px;height:16px}
#top .fbtn:hover,#top .fbtn:focus-visible{filter:brightness(1.12);box-shadow:0 0 14px 2px #8b5cf699;border-color:#c4b5fd;background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;outline:none}
html.tv #top .fbtn{padding:0 12px;font-size:13px;gap:6px}
.tvctl .fbtn{gap:7px;height:34px;padding:0 14px;margin:0;font-size:13.5px;font-weight:600;color:#d6d7de}
.tvctl .fbtn svg{width:17px;height:17px}
@media (max-width:600px){#top .fbtn{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;justify-content:center}}
@media (max-width:640px){.tvctl .fbtn{width:34px;padding:0;justify-content:center}.tvctl .fbtn span{display:none}}
#fbDlg h2{margin-bottom:6px;text-align:center}
#fbDlg .fbhint{margin:0 0 12px;text-align:center;font-size:13px;font-weight:300;line-height:1.35;color:#9a9ba6}
#fbDlg textarea::placeholder{color:#8e8f9a}
#fbDlg .fbacts{justify-content:center}
/* nowrap (JC 2026-10-17): top-bar pills never wrap; the search field gives up width first; mid widths drop the Feedback/Display labels to icons */
#cwBtn,#filtBtn,#top .fbtn{flex:none;white-space:nowrap}
#cwBtn .cwl,#filtBtn .dpl,#top .fbtn span{white-space:nowrap}
header#top .search{min-width:0}
header#top .search input{min-width:0;max-width:100%}
@media (min-width:601px) and (max-width:1180px){#top .fbtn{width:40px;padding:0;justify-content:center}#top .fbtn span{display:none}}
@media (min-width:601px) and (max-width:900px){#filtBtn{width:40px;padding:0;justify-content:center}#filtBtn .dpl{display:none}}
@media (min-width:641px) and (max-width:1400px){.tvctl .fbtn{width:34px;padding:0;justify-content:center}.tvctl .fbtn span{display:none}}
/* lpmenu (JC 2026-10-17): long-press menu + Blocked content list; centered like the other dialogs */
#blkDlg{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;background:#000000a6;padding:16px}
#blkDlg .lpc{width:min(360px,100%);box-sizing:border-box;background:#15151c;border:1px solid #ffffff1f;border-radius:14px;padding:18px;box-shadow:0 18px 50px #000a;color:#f2f2f5;text-align:center}
#blkDlg .lpc{width:min(480px,100%)}
#blkDlg h2{margin:0 0 14px;font-size:16px;font-weight:600;line-height:1.3}
#blkDlg .lpacts{display:flex;flex-direction:column;align-items:stretch;gap:10px}
#blkDlg .lpacts{flex-direction:row;justify-content:center}
#blkDlg button{height:40px;padding:0 18px;border-radius:999px;font:inherit;font-size:14px;cursor:pointer;border:1px solid #ffffff47;background:transparent;color:#e8e8ee}
#blkDlg button:hover,#blkDlg button:focus-visible{background:#ffffff14;border-color:#ffffffa0;outline:none}
html.tv #blkDlg button:focus{outline:2px solid var(--vmring);outline-offset:2px;background:#ffffff1f}
#blkDlg .lpm{margin:10px 0 0;font-size:12.5px;color:#9a9ba6}
#blkDlg .lpm{margin:0 0 14px}
#blkDlg .blkl{list-style:none;margin:0 0 14px;padding:0;max-height:min(55vh,420px);overflow:auto;text-align:left}
#blkDlg .blkl li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px;border-bottom:1px solid #ffffff14}
#blkDlg .blkl li>span{min-width:0;font-size:14px;overflow-wrap:anywhere}
#blkDlg .blkl small{display:block;color:#9a9ba6;font-size:12px}
#blkDlg .blkl button{height:32px;font-size:13px;flex:none;padding:0 14px}
html.tv #blkDlg .lpc{width:min(620px,100%)}
.blkpage p{color:#9a9ba6}
/* long-press never shows the native callout / selection on cards */
a.card,a.ep,a.epcard,.gsp a{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* z473 (JC pt1402u) long press on every poster: no native callout, selection or drag */
a[href^="#/title/"],a[href^="#/play/"],[data-lp]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
a[href^="#/title/"] img,a[href^="#/play/"] img,[data-lp] img{-webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:auto}
a.card img,a.ep img,a.epcard img{-webkit-user-drag:none}
/* lpmenu2 (JC 2026-10-17): the long-press menu lives inside the pressed poster/card: that card dims to 50% and a poster-shaped panel (same aspect, ~11% inset) holds the two actions.
   #lpDlg is a transparent full-screen layer (a tap anywhere else closes); .lpsh is placed exactly over the card by JS; the card itself never moves or scales (.lpon). */
#lpDlg{position:fixed;inset:0;z-index:210;background:transparent;-webkit-tap-highlight-color:transparent}
#lpDlg .lpsh{position:fixed;box-sizing:border-box;background:#00000080;overflow:hidden;animation:lpin .12s ease-out}
#lpDlg .lpc{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:stretch;background:#121218e0;border:1px solid #ffffff2e;box-shadow:0 8px 26px #0009;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);outline:none;font-family:Inter,system-ui,sans-serif;line-height:1.15}
#lpDlg .lpc button{flex:1 1 0;min-height:0;min-width:0;margin:0;padding:0 5%;border-radius:.6em;border:1px solid #ffffff47;background:#ffffff0f;color:#f2f2f5;font:inherit;font-size:1em;font-weight:600;line-height:1.15;cursor:pointer;white-space:normal;overflow-wrap:anywhere;hyphens:manual;overflow:hidden;-webkit-user-select:none;user-select:none}
#lpDlg .lpc button:hover,#lpDlg .lpc button:focus-visible{background:#ffffff26;border-color:#ffffffb0;outline:none}
#lpDlg .lpc button:disabled{opacity:.55;cursor:default}
html.tv #lpDlg .lpc button:focus{background:#f2f2f5;color:#111;border-color:var(--vmring);outline:none}
@keyframes lpin{from{opacity:0}to{opacity:1}}
.card.lpon,.card.lpon:hover,.card.lpon:focus,.card.lpon img,.card.lpon:hover img,.card.lpon:focus img,a.ep.lpon,a.epcard.lpon,a.epcard.lpon:hover,a.epcard.lpon:focus{transform:none;transition:none}
/* onboarding + shared avatars + Live TV profile button (JC 2026-10-17) */
body:has(#app > .ob, #app > .obwel) #foot{display:none}
.ob{max-width:1180px;margin:0 auto;padding:28px 4vw 120px;min-height:100vh;box-sizing:border-box}
.obhd{text-align:center;max-width:680px;margin:0 auto 22px}
.obstep{color:var(--mut);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.obhd h1{margin:0 0 8px;font-size:clamp(22px,3vw,32px);font-weight:700}
.obhd p{margin:0;color:#b9bbc8;font-size:15px;line-height:1.45}
.obgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.obp{position:relative;padding:0;border:2px solid transparent;border-radius:10px;background:var(--card);aspect-ratio:2/3;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s}
.obp img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .15s}
.obp:hover,.obp:focus-visible{transform:scale(1.03);border-color:#ffffffa0;outline:none}
.obp.on{border-color:#fff}.obp.on img{opacity:.55}
.obck{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;color:#000;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.obp.on .obck{opacity:1;transform:scale(1)}
.obft{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 4vw calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#0b0b10 38%)}
.obcnt{min-width:110px;text-align:center;color:#b9bbc8;font-size:14px}
.obload{display:flex;justify-content:center;padding:28vh 0}
.obload .spin{width:34px;height:34px;border:3px solid #fff3;border-top-color:#fff;border-radius:50%;animation:gsp .8s linear infinite}
.avgrid{display:grid;grid-template-columns:repeat(5,minmax(0,140px));gap:18px;justify-content:center;margin:8px auto 0}
.avt{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px;border:2px solid transparent;border-radius:16px;background:none;color:#d6d7de;font:inherit;font-size:13.5px;cursor:pointer;transition:border-color .15s,background .15s}
.avt:hover,.avt:focus-visible{background:#ffffff12;border-color:#ffffff60;outline:none}
.avt.on{border-color:#fff;background:#ffffff14;color:#fff}
.avi{width:96px;height:96px;border-radius:50%;overflow:hidden;display:block}
.avi img{width:100%;height:100%;object-fit:cover;display:block}
.avsug{position:absolute;top:4px;right:4px;background:var(--fg);color:#000;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.obkids{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:10px}
.obkid,.obadd{display:flex;flex-direction:column;align-items:center;gap:10px;width:130px;color:#d6d7de;font-size:14px}
.obkid .pfav{width:96px;height:96px;font-size:36px}
.obadd{padding:0;border:0;background:none;font:inherit;cursor:pointer}
.obplus{width:92px;height:92px;border-radius:50%;border:2px dashed #ffffff60;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:300;color:#fff;transition:border-color .15s,background .15s}
.obadd:hover .obplus,.obadd:focus-visible .obplus{border-color:var(--vmring);background:#ffffff12}.obadd:focus-visible{outline:none}
.obnote{color:var(--mut);font-size:14px}
.obform{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.oblab{display:flex;flex-direction:column;gap:8px;color:#b9bbc8;font-size:14px}
.oblab input{min-height:46px;padding:0 14px;border-radius:10px;border:1px solid #fff3;background:#000;color:#fff;font-size:16px}
.oblab input:focus{outline:none;border-color:var(--vmring);box-shadow:0 0 0 2px var(--ring)}
.obages{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.obages button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border:1px solid #ffffff2e;border-radius:12px;background:none;color:#d6d7de;font:inherit;cursor:pointer}
.obages button b{font-size:14px}.obages button small{font-size:11.5px;color:var(--mut)}
.obages button.on{border-color:#fff;background:#ffffff14;color:#fff}.obages button:focus-visible{outline:2px solid var(--vmring);outline-offset:2px}
.obform .err{min-height:18px;color:#ff8a8a;font-size:14px;text-align:center}
.obwel{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;box-sizing:border-box;animation:obin .5s ease-out}
.obwav{width:120px;height:120px;border-radius:50%;overflow:hidden;margin-bottom:22px;box-shadow:0 10px 40px #0008}
.obwav img{width:100%;height:100%;object-fit:cover;display:block}
.obwel h1{margin:0 0 10px;font-size:clamp(26px,4vw,42px)}.obwel p{margin:0 0 26px;color:#b9bbc8;font-size:16px}
@keyframes obin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#avDlg{position:fixed;inset:0;z-index:400;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
#avDlg .avbox{width:min(760px,100%);max-height:92vh;overflow:auto;background:#111117;border:1px solid #fff3;border-radius:14px;padding:20px;box-sizing:border-box;text-align:center}
#avDlg h3{margin:0 0 14px;font-size:18px}#avDlg .pwact{display:flex;justify-content:center;margin-top:14px}
.avgrid.sm{gap:10px}.avgrid.sm .avi{width:84px;height:84px}
.tvprof{width:34px;height:34px;flex:none;padding:0;border:2px solid transparent;border-radius:50%;overflow:hidden;color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tvprof img{width:100%;height:100%;object-fit:cover;display:block}
.tvprof:hover,.tvprof:focus-visible{border-color:var(--vmring);outline:none}
html.tv .ob{max-width:1480px}html.tv .obgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}html.tv .obp:focus{transform:scale(1.06);border-color:var(--vmring);outline:none}html.tv .avt:focus{background:#ffffff1a;border-color:var(--vmring);outline:none}
@media (max-width:700px){.ob{padding:18px 14px 110px}.obgrid{grid-template-columns:repeat(3,1fr);gap:8px}.avgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.avi{width:78px;height:78px}.avgrid.sm .avi{width:64px;height:64px}
  .obages{grid-template-columns:repeat(3,1fr)}.obft{gap:10px}.obcnt{min-width:70px}.obkid,.obadd{width:100px}.obkid .pfav{width:78px;height:78px}.obplus{width:76px;height:76px}}
/* login2 + uilang (JC 2026-10-17): compact one-screen login, member placeholder, language dialog */
body.lgpage #foot{display:none}
.lgwrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:radial-gradient(ellipse at 50% 30%,#1e3a8a33,transparent 60%)}
.lgcard{width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.lglogo{width:76px;height:76px;border-radius:18px;display:block}
.lgword{font-weight:300;letter-spacing:.35em;font-size:12px;opacity:.7;margin-top:-6px}
.lgcard h1{margin:0;font-size:clamp(22px,3vw,28px);font-weight:700}
.lgcard form.login{width:100%;gap:10px}
.lgcard form.login .btn.pri{justify-content:center;width:100%;box-sizing:border-box}
.lgcard .err{min-height:18px;color:#ff8a8a;font-size:14px}
.lgfoot{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--mut);font-size:14px}
.lgfoot a,.lgjoin{color:#d6d7de;text-decoration:none;background:none;border:0;font:inherit;font-size:14px;cursor:pointer;padding:6px 4px;border-radius:6px}
.lgfoot a:hover,.lgjoin:hover,.lgfoot a:focus-visible,.lgjoin:focus-visible{color:#fff;text-decoration:underline;outline:none}
#lgDlg{position:fixed;inset:0;z-index:400;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
#lgDlg .avbox{width:min(400px,100%);background:#111117;border:1px solid #fff3;border-radius:14px;padding:22px;box-sizing:border-box;text-align:center}
#lgDlg h3{margin:0 0 12px;font-size:18px}#lgDlg .pwact{display:flex;justify-content:center;margin-top:14px}
.lgsoon{color:#b9bbc8;font-size:14px;line-height:1.45;margin:0}
.lgopts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.lgopt{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 16px;border:1px solid #ffffff2e;border-radius:12px;background:none;color:#d6d7de;font:inherit;font-size:15px;cursor:pointer}
.lgopt.on{border-color:#fff;background:#ffffff14;color:#fff}.lgopt:hover,.lgopt:focus-visible{border-color:#ffffffa0;outline:none}
@media (min-width:1600px){.lgcard{width:440px;gap:18px}.lglogo{width:96px;height:96px}.lgcard form.login input{font-size:18px}}
/* unrated toggle in the kids form (JC 2026-10-17) */
.obunr{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 14px;border:1px solid #ffffff2e;border-radius:12px;background:none;color:#d6d7de;font:inherit;font-size:15px;cursor:pointer;text-align:left}
.obunr:focus-visible{outline:2px solid var(--vmring);outline-offset:2px}
.obunr .sw{flex:none;width:40px;height:24px;border-radius:12px;background:#333;position:relative;transition:background-color .15s}
.obunr .sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#bbb;transition:left .15s}
.obunr[aria-checked=true] .sw{background:var(--accent)}.obunr[aria-checked=true] .sw::after{left:19px;background:#fff}
body.lgpage #app{padding-bottom:0;min-height:0}
.obopts{max-width:460px;margin:0 auto}.obopts .lgopt{min-height:54px;font-size:16px}.obunrn{margin:-2px 2px 0;font-size:13px;line-height:1.4;text-align:left}
/* login3 (JC 2026-10-17): language switch at the bottom, big blue Become a member, larger on desktop/TV */
.lgwrap{position:relative;flex-direction:column}
.lgjoin.btn{width:100%;justify-content:center;box-sizing:border-box;background:#1e3a8a;border-color:#1e3a8a;color:#fff;font-weight:600;padding:8px 20px;font-size:15px;text-decoration:none}
.lgjoin.btn:hover,.lgjoin.btn:focus-visible{background:#2a4aa8;border-color:var(--vmring);color:#fff;text-decoration:none;outline:none}
.lgtog{position:absolute;left:0;right:0;bottom:28px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--mut);font-size:14px}
.lgtog .on{color:#fff;font-weight:600}
.lgsw{position:relative;width:52px;height:28px;padding:0;border:1px solid #ffffff40;border-radius:14px;background:#22222c;cursor:pointer;transition:background-color .2s}
.lgsw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
.lgsw[aria-checked=true] i{left:27px}
.lgsw:focus-visible{outline:2px solid var(--vmring);outline-offset:3px}
@media (max-width:700px){.lgtog{bottom:calc(52px + env(safe-area-inset-bottom))}}
@media (min-width:1000px) and (min-height:700px){
  .lgcard{width:480px;gap:18px}.lglogo{width:112px;height:112px;border-radius:24px}.lgword{font-size:14px}.lgcard h1{font-size:38px}
  .lgcard form.login{gap:14px}.lgcard form.login input{padding:17px 18px;font-size:18px;border-radius:10px}
  .lgcard .btn.pri,.lgjoin.btn{min-height:56px;font-size:18px}.lgtog{font-size:16px;bottom:34px}}
@media (min-width:1800px) and (min-height:1000px){
  .lgcard{width:600px;gap:22px}.lglogo{width:140px;height:140px;border-radius:30px}.lgword{font-size:16px}.lgcard h1{font-size:48px}
  .lgcard form.login input{padding:21px 22px;font-size:22px}.login .pw .eye{font-size:26px}
  .lgcard .btn.pri,.lgjoin.btn{min-height:68px;font-size:22px}.lgtog{font-size:20px;bottom:44px}.lgsw{width:64px;height:34px;border-radius:17px}.lgsw i{width:26px;height:26px}.lgsw[aria-checked=true] i{left:33px}}
.lgjoin.btn{border-radius:999px}.lgcard .err:empty{min-height:4px}
html.tv .lgwrap{min-height:calc(100vh / var(--tvz,.75))}html.tv.lgz .lgwrap{min-height:calc(100vh / var(--tvzl,.9))}/* tvkbd (2026-10-17): no nested zoom on login/member (Android WebView lost taps/IME); login pages run at zoom 1 on TV */
html.tv.lgz{zoom:var(--tvzl,.9)}html.tv .lgtog{bottom:30px}
/* member (JC 2026-10-17): live request form (approved mockup) + JC admin list */
.mbcard{gap:9px}.mbcard .lglogo{width:52px;height:52px;border-radius:13px}.mbcard h1{font-size:22px}
.mbnote{margin:0;color:#b9bbc8;font-size:13px;line-height:1.4}
.mbf{width:100%;display:flex;flex-direction:column;gap:8px}
.mbf input,.mbf select{width:100%;padding:11px 12px;border-radius:8px;border:1px solid #333;background:#16161d;color:var(--fg);font:inherit;font-size:15px}
.mbf input:focus,.mbf select:focus{outline:none;border-color:var(--vmring);box-shadow:0 0 0 1px var(--accent)}
.mbph{display:flex;gap:8px}.mbph select{flex:0 0 112px}
.mbseg{display:flex;align-items:center;gap:8px}.mbseg span{color:var(--mut);font-size:13px;flex:none}
.mbopts{display:flex;flex:1;border:1px solid #333;border-radius:8px;overflow:hidden}
.mbopts button{flex:1;padding:9px;border:0;background:#16161d;color:#c9cad3;font:inherit;font-size:14px;cursor:pointer}
.mbopts button.on{background:#ffffff1a;color:#fff;font-weight:600}.mbopts button:focus-visible{outline:2px solid var(--vmring);outline-offset:-2px}
.mbhp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.mbf .err{min-height:16px;color:#ff8a8a;font-size:13px}
.mbf .mbsend{min-height:44px}
.mbback{color:#d6d7de;font-size:14px;text-decoration:none;padding:4px}.mbback:hover,.mbback:focus-visible{text-decoration:underline;color:#fff;outline:none}
.mbtick{width:68px;height:68px;border-radius:50%;background:#1e3a8a;display:flex;align-items:center;justify-content:center;font-size:34px;margin-top:8px}
@media (min-width:1000px) and (min-height:700px){.mbcard{gap:11px}.mbcard .lglogo{width:72px;height:72px;border-radius:18px}.mbcard h1{font-size:30px}.mbf input,.mbf select{padding:13px 14px;font-size:16px}.mbf .mbsend{min-height:52px;font-size:17px}.mbnote{font-size:14px}}
@media (min-width:1800px) and (min-height:1000px){.mbcard{gap:14px}.mbcard .lglogo{width:96px;height:96px;border-radius:22px}.mbcard h1{font-size:40px}.mbf input,.mbf select{padding:17px 18px;font-size:20px}.mbopts button{font-size:18px;padding:13px}.mbseg span{font-size:17px}.mbf .mbsend{min-height:64px;font-size:21px}.mbnote{font-size:17px}}
html.tv.lgz .mbcard{zoom:1}
.madm{padding:24px 4vw 60px}.madm h1{margin:0 0 6px;font-size:26px}.madm .mbnote{margin-bottom:16px}
.madmt{overflow-x:auto;border:1px solid #ffffff1f;border-radius:12px}
.madm table{width:100%;border-collapse:collapse;font-size:14px}.madm th,.madm td{padding:10px 12px;text-align:left;border-bottom:1px solid #ffffff14;white-space:nowrap}
.madm th{color:var(--mut);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.macts{display:flex;gap:8px}.macts .btn{min-height:34px;padding:4px 14px;font-size:13px}
.mst{padding:2px 10px;border-radius:999px;font-size:12px;background:#ffffff14}.mst.new{background:#1e3a8a}.mst.approved{background:#166534}.mst.denied{background:#7f1d1d}

/* slowconn (JC 2026-10-17): friendly slow-connection notice before playback */
#scDlg{position:fixed;inset:0;z-index:400;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
#scDlg .avbox{width:min(440px,100%);background:#111117;border:1px solid #fff3;border-radius:14px;padding:24px;box-sizing:border-box;text-align:center}
#scDlg .scic{font-size:34px;line-height:1;margin-bottom:6px}#scDlg h3{margin:0 0 8px;font-size:20px}#scDlg .pwact{justify-content:center;margin-top:16px}
html.tv #scDlg .avbox{zoom:1.5}
.mbts{display:flex;justify-content:center;min-height:65px}.mbts[hidden]{display:none}

/* peek (JC 2026-10-17): phones only, width set per row by JS (--pk) so the next tile's edge always shows */
.strip.pk>*,.seasons.pk>*{flex:0 0 var(--pk);width:var(--pk);min-width:0;max-width:none}
.strip.pk>* img,.seasons.pk>* img{width:100%}

/* pbarfit (2026-10-17): phone player bar wraps; icon buttons shrink to fit 7 in a row from 320 px up (Live TV fullscreen was cut off on iPhone) */
@media (max-width:600px){.player .pbar{flex-wrap:wrap;gap:10px 6px}.player .pbar .ttl{flex:1 1 calc(100% - 140px)}
.player .pbar .trkI{width:clamp(34px,calc((100vw - 8vw - 40px) / 7),44px);height:clamp(34px,calc((100vw - 8vw - 40px) / 7),44px);min-height:0}.player .pbar .trkI+.trkI{margin-left:0}}

/* pwchange (JC 2026-10-17): change-password dialog */
#pwcDlg{position:fixed;inset:0;z-index:400;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
#pwcDlg .avbox{width:min(420px,100%);background:#111117;border:1px solid #fff3;border-radius:14px;padding:22px;box-sizing:border-box;text-align:center;display:flex;flex-direction:column;gap:10px}
#pwcDlg h3{margin:0 0 4px;font-size:20px}
#pwcDlg .pw input{width:100%;box-sizing:border-box;padding:12px 48px 12px 14px;font-size:16px;border-radius:8px;border:1px solid #fff3;background:#000;color:#fff}
#pwcDlg .pw .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:20px;cursor:pointer;padding:6px;line-height:1}
#pwcDlg .pwchint{margin:0;font-size:13px;color:#ffffffa6}
#pwcDlg .err{min-height:18px;font-size:14px;color:#ff8a8a}
#pwcDlg .pwact{display:flex;gap:10px;justify-content:center;margin-top:4px}
#pwcDlg .mbtick{font-size:34px;color:#7ee2a8}
html.tv #pwcDlg .avbox{zoom:1.5}

/* addprof (JC 2026-10-17): add-profile dialog, one step per screen */
#apDlg{position:fixed;inset:0;z-index:400;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
#apDlg .avbox{width:min(460px,100%);max-height:92vh;overflow:auto;background:#111117;border:1px solid #fff3;border-radius:14px;padding:22px;box-sizing:border-box;text-align:center;display:flex;flex-direction:column;gap:12px}
#apDlg h3{margin:0;font-size:20px}#apDlg .pwchint{margin:0;font-size:14px;color:#ffffffb3}
#apDlg input{width:100%;box-sizing:border-box;padding:12px 14px;font-size:16px;border-radius:8px;border:1px solid #fff3;background:#000;color:#fff}
#apDlg .apkind{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#apDlg .apch{display:flex;flex-direction:column;gap:4px;padding:18px 12px;border-radius:12px;border:1px solid #fff3;background:#000;color:#fff;cursor:pointer;font:inherit}
#apDlg .apch b{font-size:17px}#apDlg .apch small{font-size:12px;color:#ffffffa6}
#apDlg .apch:hover,#apDlg .apch:focus{border-color:var(--vmring);outline:none}
#apDlg .apav{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
#apDlg .apav button{padding:0;border:2px solid transparent;border-radius:50%;background:none;cursor:pointer;aspect-ratio:1;overflow:hidden}
#apDlg .apav button img{width:100%;height:100%;object-fit:cover;display:block}
#apDlg .apav button.on{border-color:#fff}#apDlg .apav button:focus{outline:2px solid #6aa0ff;outline-offset:2px}
#apDlg .apages{display:flex;flex-direction:column;gap:8px}
#apDlg .apages button{padding:11px;border-radius:10px;border:1px solid #fff3;background:#000;color:#fff;font:inherit;cursor:pointer}
#apDlg .apages button.on{background:#fff;color:#000}
#apDlg .apunr{display:flex;align-items:center;gap:10px;justify-content:center;background:none;border:0;color:#fff;font:inherit;cursor:pointer;padding:6px}
#apDlg .apunr .tvsw{width:40px;height:22px;border-radius:11px;background:#ffffff40;position:relative;flex:none}
#apDlg .apunr .tvsw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
#apDlg .apunr[aria-checked=true] .tvsw{background:#1e3a8a}#apDlg .apunr[aria-checked=true] .tvsw i{left:20px}
#apDlg .err{min-height:18px;font-size:14px;color:#ff8a8a}#apDlg .pwact{display:flex;gap:10px;justify-content:center}
#apDlg .mbtick{font-size:34px;color:#7ee2a8}
html.tv #apDlg .avbox{zoom:1.5}

/* cfred (JC 2026-10-17): any filter/restriction on = red button (no dot); none = orange */
#cwBtn.cfon{background:linear-gradient(135deg,#dc2626,#991b1b);border-color:#f87171;padding-right:14px}
#cwBtn.cfon::after{content:none}
#cwBtn.cfon:hover,#cwBtn.cfon:focus-visible{box-shadow:0 0 14px 2px #dc262699}
html.tv #cwBtn.cfon{padding-right:12px}
@media (max-width:600px){#cwBtn.cfon{padding:0}}

/* picks3 (JC 2026-10-17): sticky "Choose movies/shows you like (round n of 3)" bar on the picks screens */
.ob .obbar{position:sticky;top:0;z-index:40;margin:-28px -4vw 18px;padding:calc(12px + env(safe-area-inset-top)) 4vw 12px;text-align:center;font-weight:700;font-size:16px;color:#fff;background:#0b0b10eb;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #ffffff1f}
@media (max-width:600px){.ob .obbar{margin:-18px -14px 14px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;font-size:15px}}
html.tv .ob .obbar{font-size:22px}

/* away6h (JC 2026-10-17): Streaming / Live TV chooser more prominent on phones */
@media (max-width:600px){html:not(.tv) .tvec{max-width:none;min-height:32vh;justify-content:center;padding:28px 18px;border-color:#ffffff40}
html:not(.tv) .tvec b{font-size:24px}html:not(.tv) .tvec small{font-size:15px}html:not(.tv) .tvec .tveic svg{width:44px;height:44px}}

/* filterbtn (JC 2026-10-18): Content filter + Display buttons use the same translucent black as the rest of the header; no orange / teal.
   The Content filter button never turns red: only its shield does, while a restriction is on. Chosen options inside the panels stay corporate blue. */
#cwBtn,#filtBtn,#cwBtn.cfon{border:1px solid #ffffff33;background:#0b0b10b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none;color:#fff;filter:none}
#cwBtn:hover,#cwBtn:focus-visible,#cwBtn.cfon:hover,#cwBtn.cfon:focus-visible,#filtBtn:hover,#filtBtn:focus-visible{filter:none;background:#ffffff14;border-color:#ffffff88;box-shadow:none}
#cwBtn svg{transition:color .15s,fill .15s}
#cwBtn.cfon svg{color:#ef4444;fill:#ef444433}
#filtBtn.cfon::after{background:var(--accent,#1e3a8a);box-shadow:0 0 0 2px #fff}
.gmenu.cwpanel,.gmenu.dppanel{border-color:#ffffff33}
.gmenu .cwh,.gmenu .dph{color:#fff}
.gmenu .dph .cwt1 svg{color:#fff}

/* fbsub (JC 2026-10-18): no subtitle under the Feedback title; the title sits a little further from the box */
#fbDlg h2{margin-bottom:14px}

/* modeswitch (JC 2026-10-18): Streaming / Live TV (and Live TV's eras) as one translucent pill track with a sliding white thumb; the inactive side is muted */
.modesw{--p:3px;--n:2;position:relative;display:inline-grid;grid-template-columns:repeat(var(--n),1fr);gap:0;padding:var(--p);border:1px solid #ffffff33;border-radius:999px;background:#0b0b10b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.modesw .mthumb{position:absolute;top:var(--p);bottom:var(--p);left:var(--p);width:calc((100% - 2 * var(--p)) / var(--n));border-radius:999px;background:#f2f2f5;box-shadow:0 1px 6px #0006;transform:translateX(calc(var(--i,0) * 100%));transition:transform .28s cubic-bezier(.3,.7,.2,1);pointer-events:none}
.modesw.live{--i:1}
.modesw button{position:relative;z-index:1;justify-content:center;background:transparent;color:#9a9aa8;transition:color .2s}
.modesw button:hover,.modesw button:focus-visible{background:transparent;color:#fff}
.modesw button.on,.modesw button.on:hover,.modesw button.on:focus-visible{background:transparent;color:#0b0b10}
.modesw button:focus-visible{outline:2px solid var(--vmring);outline-offset:2px}
html.tv .modesw button:focus{outline:2px solid var(--vmring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.modesw .mthumb{transition:none}}
@media (max-width:600px){.modesw{--p:2px}}
/* hclock (JC 2026-10-18): small clock between Display and the avatar, same on Streaming and Live TV */
.hclock{flex:none;font-variant-numeric:tabular-nums;color:#b9bbc8;font-size:14px;white-space:nowrap;padding:0 2px}
@media (max-width:600px){.hclock{font-size:11.5px;padding:0}}
/* hdrsame: Live TV eras in the centre of the shared header (Streaming's search spot) */
#eraSw{--n:3;flex:none;margin:0 auto}
#eraSw button{width:auto;padding:0 16px}
body.tvg header#top .search{visibility:hidden;pointer-events:none} /* z257gsdup: keep the slot so the right group stays put */
@media (max-width:600px){
  #eraSw{margin:0 0 0 auto}
  #eraSw:not(.open){--n:1}
  #eraSw:not(.open) button:not(.on){display:none}
  #eraSw:not(.open) .mthumb{display:none}
  #eraSw:not(.open) button.on{color:#fff;padding:0 10px;font-size:12px}
  #eraSw:not(.open) button.on::after{content:'';width:6px;height:6px;margin:-3px 0 0 6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
  #eraSw.open{position:absolute;left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));top:calc(6px + env(safe-area-inset-top));z-index:5;margin:0;background:#0b0b10f2}
  #eraSw.open button{height:36px;font-size:13px}
}

/* z183 logo-same (JC 2026-10-18): the wordmark never shrinks, so it is the same size and position on Streaming and Live TV */
header#top .brand{flex-shrink:0}header#top .modesw{flex-shrink:0}

/* z184 tvheader-fit (JC 2026-10-18): iPhone-width header fits on BOTH pages (same rules for Streaming and Live TV):
   tighter gaps, compact era pill, and the clock hides on phones narrower than 431px (the phone's own status bar shows the time) */
@media (max-width:430px){
  header#top{gap:4px}
  header#top .modesw{margin-left:4px}
  .hclock{display:none}
  header#top .brand img{height:11px}
  #eraSw:not(.open){flex:0 1 auto;min-width:0;overflow:hidden}
  #eraSw:not(.open) button.on{padding:0 7px;font-size:11.5px;min-width:0}
  #eraSw:not(.open) button.on{padding:0 9px}
  #eraSw:not(.open) button.on::after{display:none}
}
@media (max-width:380px){#eraSw:not(.open) button.on{font-size:11px;padding:0 7px}}

/* z185tiles (JC 2026-10-18): Explorar row image tiles (retro Style B); text is in the art, span kept visually hidden for screen readers */
a.tile.ctile.xtimg{padding:0;background:#0b1530;position:relative;overflow:hidden}
a.tile.ctile.xtimg img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
a.tile.ctile.xtimg span{position:absolute;width:1px;height:1px;max-height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* z184 clockfit (JC 2026-10-18): the clock is vertically centred in the bar and sits exactly midway between Display and the avatar (the bar gap on both sides), on every size.
   iPhone-width bars make room for it with slightly smaller icon buttons, tighter gaps and a 10px wordmark (same on Streaming and Live TV); only below 381px does it hide */
.hclock{display:inline-flex;align-items:center;justify-content:center;align-self:center;height:40px;line-height:1;padding:0;margin:0}
@media (max-width:430px){
  header#top{gap:3px}
  .hclock{display:inline-flex;height:32px;font-size:11px;letter-spacing:-.01em}
  header#top .brand img{height:10px}
  header#top #cwBtn,header#top #filtBtn,header#top #profBtn{width:32px;height:32px;min-width:32px;min-height:32px}
  #eraSw:not(.open) button.on{padding:0 6px}
}
@media (max-width:380px){.hclock{display:none}}


/* clockfit 2: on phones the bar keeps the clock (without AM/PM) between Display and the avatar */
@media (max-width:430px){header#top nav{gap:4px}.hclock .hcp{display:none}header#top #modeSw button{width:34px}}

/* pbarhide (JC 2026-10-18): idle player = top controls faded out + no cursor; visible again on any interaction */
.player.uih .pbar{opacity:0}
.player.uih .pbar>*{pointer-events:none}
.player.uih,.player.uih video{cursor:none}
html.tv .player.uih .pbar:focus-within{opacity:0}

/* castrect (JC 2026-10-18): Cast & Crew photos are 2:3 portrait rectangles like the posters (heads no longer cut off); name + character stay under each */
.cast .card img,.cast .noph{width:110px;height:auto;aspect-ratio:2/3;border-radius:8px;object-fit:cover;object-position:top center}

/* z193channels: 'Canales VideoMax' tiles + collection header (family name + color, small red era pill, same idea as the Live TV chip) */
a.tile.chtile{flex-direction:column;gap:5px;padding:8px;background:linear-gradient(135deg,var(--fc),#000c);color:#fff;text-align:center;text-decoration:none}
.chtile b{font-size:17px;font-weight:800;letter-spacing:.04em;line-height:1;text-transform:uppercase}
.chtile i,.chfam i{padding:2px 7px;border-radius:999px;background:#c8102e;color:#fff;font-size:9px;font-style:normal;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.chtile small{max-width:96%;color:#ffffffc4;font-size:11px;line-height:1.2}
.chfam{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:linear-gradient(135deg,var(--fc),#000a);font-size:.55em;vertical-align:middle;text-transform:uppercase}
.chsub{margin:0 4vw 6px;color:#9aa}
@media (max-width:600px){.chtile b{font-size:13px}.chtile small{display:none}.chtile i{font-size:8px}}

/* cast (JC 2026-10-18): the AirPlay / Cast button only shows while a target is available */
.player #castB[hidden]{display:none}
.player #castB.on{color:var(--accent)}

/* tesla (JC 2026-10-18, option B): Content filter + Display = wide card, categories left (red / blue dots), big minimal controls right */
.gmenu.tpanel{width:min(880px,calc(100vw - 16px));padding:0;display:flex;flex-direction:column;max-height:min(660px,calc(100vh - 90px));overflow:hidden;border-radius:18px;background:#0d0e14}
.gmenu.tpanel .cwh{flex:none;flex-wrap:nowrap;justify-content:space-between;gap:12px;padding:14px 18px 12px;border-bottom:1px solid #ffffff1f;text-align:left;font-size:16px}
.gmenu.tpanel .tsb{flex:1;min-height:0;display:grid;grid-template-columns:220px minmax(0,1fr)}
.gmenu.tpanel .tsn{display:flex;flex-direction:column;gap:4px;padding:12px 10px;border-right:1px solid #ffffff17;overflow:auto}
.gmenu.tpanel button.tsc{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:48px;padding:0 14px;border-radius:12px;font-size:14.5px;color:#c4c6d0;text-align:left;transition:background-color .15s,color .15s}
.gmenu.tpanel button.tsc:hover{background:#ffffff0d;color:#fff}
.gmenu.tpanel button.tsc.on{background:#ffffff17;color:#fff;font-weight:600}
.gmenu.tpanel button.tsc:focus-visible{outline:2px solid var(--accent,#1e3a8a);outline-offset:1px}
.gmenu.tpanel .tsd{flex:none;width:8px;height:8px;margin-left:auto;border-radius:50%}
.gmenu.tpanel .tsd.red{background:#ef4444;box-shadow:0 0 6px #ef4444aa}
.gmenu.tpanel .tsd.blue{background:#3b82f6;box-shadow:0 0 6px #3b82f6aa}
.gmenu.tpanel .tsp{min-height:0;overflow:auto;padding:14px 24px 18px}
.gmenu.tpanel input.tss{display:block;box-sizing:border-box;width:min(240px,100%);margin:0 0 6px auto;padding:7px 14px;border:1px solid #ffffff2e;border-radius:999px;background:#ffffff0d;color:#fff;font:inherit;font-size:13px}
.gmenu.tpanel input.tss:focus{outline:2px solid var(--accent,#1e3a8a);outline-offset:1px}
.gmenu.tpanel .tsec h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:21px;font-weight:600;color:#fff}
.gmenu.tpanel.tsq .tsec h3{margin-top:14px;font-size:15px}
.gmenu.tpanel .tsr{padding:10px 0 14px;border-bottom:1px solid #ffffff10}
.gmenu.tpanel .tsr:last-child{border-bottom:0}
.gmenu.tpanel .rh{justify-content:flex-start;padding:0 0 10px;font-size:13.5px;font-weight:500;color:#d6d7de}
.gmenu.tpanel .cwcat{padding:0 0 8px;text-align:left;font-size:13.5px;color:#d6d7de}
.gmenu.tpanel .cwseg{justify-content:flex-start;gap:6px;padding:0}
.gmenu.tpanel .cwseg button.cwp{min-height:40px;padding:0 16px;font-size:13px}
.gmenu.tpanel button.cwt{min-height:46px;padding:0;font-size:14px}
.gmenu.tpanel .cwt .sw{width:46px;height:28px;border-radius:14px}
.gmenu.tpanel .cwt .sw::after{width:24px;height:24px}
.gmenu.tpanel .cwt[aria-checked=true] .sw::after{left:20px}
.gmenu.tpanel button.tsi{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-height:0;padding:0;border:1px solid #ffffff55;border-radius:50%;font:italic 600 12px/1 Georgia,serif;color:#d6d7de}
.gmenu.tpanel button.tsi:hover,.gmenu.tpanel button.tsi[aria-expanded=true]{background:#ffffff1f;color:#fff}
.gmenu.tpanel .tsin{margin:-2px 0 10px;padding:9px 12px;border-radius:10px;background:#ffffff0d;font-size:12.5px;line-height:1.45;color:#c9cad3}
.gmenu.tpanel .rlfoot{flex:none;position:static;margin:0;padding:8px 18px 12px;border-top:1px solid #ffffff1f;background:#0b0b10}
.gmenu.tpanel .rlfoot .rlnote{padding:4px 0 2px;text-align:left}
.gmenu.tpanel .rlfoot .rlacts{justify-content:flex-end}
.gmenu.tpanel .cwreq{margin:0}
/* rating "slider": the pills become stops on a track, the chosen one is the knob */
.gmenu.tpanel .cwseg.tsl{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:2px 0 0}
.gmenu.tpanel .cwseg.tsl::before{content:'';position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:17px;height:4px;border-radius:2px;background:#ffffff26}
.gmenu.tpanel .cwseg.tsl button.cwp{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:0;padding:0 2px;border:0;border-radius:8px;background:none;box-shadow:none;font-size:12px;color:#a9abb6;white-space:nowrap}
.gmenu.tpanel .cwseg.tsl button.cwp::before{content:'';flex:none;box-sizing:border-box;width:16px;height:16px;margin-top:3px;border-radius:50%;background:#262934;border:2px solid #ffffff59;transition:width .15s,height .15s,margin .15s}
.gmenu.tpanel .cwseg.tsl button.cwp:hover::before{border-color:#fff}
.gmenu.tpanel .cwseg.tsl button.cwp.on{color:#fff;font-weight:600;background:none;box-shadow:none}
.gmenu.tpanel .cwseg.tsl button.cwp.on::before{width:26px;height:26px;margin-top:-2px;margin-bottom:-10px;background:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(30,58,138,.6)}
.gmenu.tpanel .cwseg.tsl button.cwp:focus-visible{outline:2px solid var(--accent,#1e3a8a);outline-offset:2px}
/* audio-quality range (two thumbs over one track, 8 stops) */
.gmenu.tpanel .aqr{position:relative;height:66px;margin:2px 4px 0}
.gmenu.tpanel .aqr .aqtk{position:absolute;left:12px;right:12px;top:12px;height:4px;border-radius:2px;background:#ffffff26}
.gmenu.tpanel .aqr .aqtk i{position:absolute;top:0;bottom:0;left:calc(var(--lo) / 7 * 100%);right:calc((7 - var(--hi)) / 7 * 100%);border-radius:2px;background:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,.6)}
.gmenu.tpanel .aqr input{position:absolute;left:0;right:0;top:0;width:100%;height:28px;margin:0;padding:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.gmenu.tpanel .aqr input::-webkit-slider-runnable-track{height:28px;background:none;border:0}
.gmenu.tpanel .aqr input::-moz-range-track{height:28px;background:none;border:0}
.gmenu.tpanel .aqr input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:24px;height:24px;margin-top:2px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 6px #000a;cursor:pointer}
.gmenu.tpanel .aqr input::-moz-range-thumb{pointer-events:auto;width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 6px #000a;cursor:pointer}
.gmenu.tpanel .aqr input:focus{outline:0}
.gmenu.tpanel .aqr input:focus-visible::-webkit-slider-thumb{box-shadow:var(--vmglow)}
.gmenu.tpanel .aqr input:focus-visible::-moz-range-thumb{box-shadow:var(--vmglow)}
.gmenu.tpanel .aqr .aqlo{z-index:2}.gmenu.tpanel .aqr .aqhi{z-index:3}.gmenu.tpanel .aqr.lotop .aqlo{z-index:4}
.gmenu.tpanel .aqr .aqs{position:absolute;left:12px;right:12px;top:32px;height:32px}
.gmenu.tpanel .aqr .aqs span{position:absolute;top:0;left:calc(var(--i) / 7 * 100%);transform:translateX(-50%);font-size:11px;color:#a9abb6;white-space:nowrap}
.gmenu.tpanel .aqr .aqs span:nth-child(even){top:15px}
.gmenu.tpanel .aqr .aqs span:first-child{transform:none;left:-12px}
.gmenu.tpanel .aqr .aqs span:last-child{transform:none;left:auto;right:-12px}
.gmenu.tpanel .aqv{margin-top:8px;font-size:13.5px;font-weight:600;color:#fff}
@media (max-width:600px){
  .gmenu.tpanel{max-height:calc(100dvh - 76px);border-radius:16px}
  .gmenu.tpanel .cwh{padding:10px 12px;font-size:15px}
  .gmenu.tpanel .cwh button.cwreset{font-size:11px;padding:0 8px}
  .gmenu.tpanel .tsb{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .gmenu.tpanel .tsn{flex-direction:row;gap:6px;padding:8px 10px;border-right:0;border-bottom:1px solid #ffffff17;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .gmenu.tpanel .tsn::-webkit-scrollbar{display:none}
  .gmenu.tpanel button.tsc{flex:none;width:auto;min-height:38px;gap:7px;padding:0 12px;border:1px solid #ffffff1f;border-radius:999px;font-size:13px;white-space:nowrap}
  .gmenu.tpanel button.tsc svg{width:16px;height:16px}
  .gmenu.tpanel .tsd{margin-left:0;width:7px;height:7px}
  .gmenu.tpanel .tsd:not(.red):not(.blue){display:none}
  .gmenu.tpanel .tsp{padding:10px 14px 14px}
  .gmenu.tpanel input.tss{width:100%;margin-bottom:8px}
  .gmenu.tpanel .tsec h3{font-size:17px;margin-bottom:6px}
  .gmenu.tpanel .tsr{padding:8px 0 12px}
  .gmenu.tpanel .cwseg button.cwp{min-height:36px;padding:0 10px;font-size:12px}
  .gmenu.tpanel .cwseg.tsl button.cwp{font-size:10.5px;padding:0}
  .gmenu.tpanel .aqr .aqs span{font-size:9.5px}
  .gmenu.tpanel .rlfoot{padding:6px 12px 10px}
  .gmenu.tpanel .rlfoot .rlnote{font-size:11px}
}

/* qcompact (z204, JC 2026-10-18): narrow top bar (any device, measured in app.js) -> magnifier button; .qon = full-width field over the bar + close button */
html.qcmp header#top .search{order:0;flex:0 0 40px;max-width:40px;min-width:40px;margin:0 0 0 auto;position:static}
html.qcmp header#top .search input{width:40px;min-width:40px;height:40px;padding:0;border-radius:20px;font-size:16px;color:transparent;cursor:pointer;
  background:#000a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") center/18px no-repeat}
html.qcmp header#top .search input::placeholder{color:transparent}
html.qcmp header#top .search.qon{position:absolute;left:0;right:0;top:0;bottom:0;height:auto;align-self:stretch;justify-self:stretch;max-width:none;min-width:0;margin:0;display:flex;align-items:center;z-index:30;
  padding:env(safe-area-inset-top) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));background:#0b0b10}
html.qcmp header#top .search.qon input{flex:1 1 auto;width:100%;max-width:none;height:44px;padding:0 50px 0 40px;color:var(--fg);background-color:#000;background-position:14px center;cursor:text}
html.qcmp header#top .search.qon input::placeholder{color:#888}
html.qcmp header#top .search.qon input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
header#top .search .qcl{display:none}
html.qcmp header#top .search.qon .qcl{display:flex;align-items:center;justify-content:center;position:absolute;right:calc(16px + env(safe-area-inset-right));top:50%;margin-top:calc(env(safe-area-inset-top) / 2 - 17px);
  width:34px;height:34px;padding:0;border:0;border-radius:17px;background:#ffffff1a;color:#fff;cursor:pointer}
html.qcmp header#top .search.qon .qcl:hover,html.qcmp header#top .search.qon .qcl:focus-visible{background:#ffffff33;outline:none}

/* z205tcolors (JC 2026-10-18): shared colors. --movc-red = the Content filter shield red when a filter is on; --movc-sechead = panel section-heading blue (labels, not buttons) */
:root{--movc-red:#ef4444;--movc-sechead:#5aa9ff}
#cwBtn.cfon svg{color:var(--movc-red);fill:color-mix(in srgb,var(--movc-red) 20%,transparent)}
.cfnote>span{color:var(--movc-red);font-weight:600}
.gmenu.tpanel .tsec h3{color:var(--movc-sechead)}
.gmenu.tpanel .tsec h3 button.tsi{color:#fff}

/* z206tabs (JC 2026-10-18): panel section tabs = folder-style tab bar, not pills. Blue text (--movc-sechead), inactive dimmer, selected brighter
   with a blue bar (left bar in the desktop column, 3px underline in the phone row). Blue 'changed' dots removed; red 'filter on' dots stay. Option pills unchanged. */
.gmenu.tpanel button.tsc{border:0;border-radius:0;background:transparent;color:var(--movc-sechead);opacity:.6;font-weight:500;transition:opacity .15s,color .15s}
.gmenu.tpanel button.tsc:hover{background:transparent;color:var(--movc-sechead);opacity:.88}
.gmenu.tpanel button.tsc.on{background:transparent;color:#8cc4ff;opacity:1;font-weight:600}
.gmenu.tpanel button.tsc::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:transparent;transition:background-color .15s}
.gmenu.tpanel button.tsc.on::before{background:var(--movc-sechead)}
.gmenu.tpanel .tsd.blue{display:none}
.gmenu.tpanel .tsd.red{background:var(--movc-red);box-shadow:0 0 6px #ef4444aa}
@media (max-width:600px){
  .gmenu.tpanel .tsn{gap:4px;padding:0 8px}
  .gmenu.tpanel button.tsc{border:0;border-radius:0;min-height:44px;padding:0 10px}
  .gmenu.tpanel button.tsc::before{top:auto;bottom:0;left:8px;right:8px;width:auto;height:3px;border-radius:3px 3px 0 0}
}

/* z211beta (JC 2026-10-19): BETA pill for features still in testing (Content filter Warnings + Themes, Playback audio quality) + one-line hint under it. Subtle muted amber outline, small caps */
.betap{display:inline-flex;align-items:center;flex:none;height:17px;padding:0 6px;border:1px solid #e0a84a73;border-radius:999px;background:#e0a84a14;color:#e7b464;font-family:inherit;font-size:9.5px;font-weight:600;line-height:1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.gmenu.tpanel .tsec h3 .betap{margin-left:-2px}
.gmenu.tpanel .rh .betap{margin-left:4px}
.gmenu.tpanel .betan{margin:-4px 0 12px;font-size:12px;line-height:1.4;color:#a9aab4}
.gmenu.tpanel .rh + .betan{margin:-6px 0 10px}
.gmenu.tpanel.tsq .betan{display:none}

/* z214teslafs: in-page fill + Tesla full screen offer */
body.vfill header#top,body.vfill footer,body.vfill nav.tabs{display:none}body.vfill .player{position:fixed;inset:0;z-index:300}
.tfsM{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;max-width:min(440px,90vw);padding:20px 22px;background:rgba(12,12,14,.94);border:1px solid rgba(255,255,255,.18);border-radius:16px;color:#fff;font-size:15px;line-height:1.45;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tfsM p{margin:0 0 16px}.tfsA{display:flex;gap:10px;flex-wrap:wrap}

/* z216 TV: no hero arrows (auto-rotate; More info opens the title showing) */
html.tv .hero.carousel .hnav{display:none}

/* z223setpw: invite page (reuses the login card) */
.spmsg{margin:0 0 4px;color:#c9cbd6;font-size:15px;line-height:1.45;text-align:center}
.splab{align-self:flex-start;font-size:13px;color:#a9abb8;margin:2px 0 -4px}
.sphint{min-height:18px;font-size:13px;line-height:18px;color:#a9abb8;text-align:left}.sphint.ok{color:#7fd69a}.sphint.bad{color:#ff8a80}
/* z224devchk: connection + device check, full-screen branded card */
#dcDlg{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;background:#06070c;overflow:auto;animation:dcIn .35s ease-out}
#dcDlg .dcbg{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 28%,#1e3a8a55,transparent 62%),radial-gradient(ellipse at 80% 90%,#7c3aed22,transparent 55%)}
#dcDlg .dcbg .dcvid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;opacity:.16;filter:blur(2px)}
#dcDlg .dcin{position:relative;width:min(520px,100%);text-align:center;color:#f1f1f5}
#dcDlg .dclogo{width:76px;height:76px;border-radius:18px;display:block;margin:0 auto 10px;box-shadow:0 10px 40px #0008}
#dcDlg .lgword{margin-bottom:26px}
#dcDlg h1{font-size:24px;line-height:1.3;margin:0 0 14px;font-weight:700}
#dcDlg .dcp{color:#c9c9d6;font-size:16px;line-height:1.55;margin:0 auto 24px;max-width:430px}
#dcDlg .dcfine{color:#8b8b9a;font-size:13px;line-height:1.5;margin:14px auto 0;max-width:420px}
#dcDlg .dcstep{color:#c9c9d6;font-size:15px;margin:18px 0 0;min-height:1.4em}
#dcDlg .dcring{position:relative;width:190px;height:190px;margin:8px auto 0}
#dcDlg .dcring svg{width:100%;height:100%;transform:rotate(-90deg)}
#dcDlg .dctr{fill:none;stroke:#ffffff14;stroke-width:7}
#dcDlg .dcpr{fill:none;stroke:#8fa8ff;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .3s ease;filter:drop-shadow(0 0 8px #8fa8ff88)}
#dcDlg .dcnum{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#dcDlg .dcnum b{font-size:44px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums}
#dcDlg .dcnum span{font-size:13px;color:#8b8b9a;letter-spacing:2px}
#dcDlg .dcring::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid #8fa8ff22;animation:dcPulse 2.2s ease-in-out infinite}
#dcDlg .dcok{width:74px;height:74px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:700;background:#16a34a22;color:#4ade80;border:2px solid #4ade8066;animation:dcPop .45s cubic-bezier(.2,1.6,.4,1)}
#dcDlg .dcok.slow{background:#f59e0b1f;color:#fbbf24;border-color:#fbbf2466}
#dcDlg .dcmb{font-size:16px;color:#c9c9d6;margin:-4px 0 22px}#dcDlg .dcmb b{font-size:34px;color:#fff;margin-right:4px}
#dcDlg .dcrow{display:flex;gap:12px;align-items:flex-start;text-align:left;background:#ffffff0a;border:1px solid #ffffff14;border-radius:14px;padding:14px 16px;margin:0 auto 24px}
#dcDlg .dcrow p{margin:0;color:#d6d6e0;font-size:15px;line-height:1.5}#dcDlg .dci{font-size:22px;line-height:1.2}
#dcDlg .dcact{display:flex;flex-direction:column;gap:10px;align-items:center}
#dcDlg .dcact .btn{min-width:240px;padding:13px 26px;font-size:16px;border-radius:999px}
body.dc-on{overflow:hidden}
@keyframes dcIn{from{opacity:0}to{opacity:1}}
@keyframes dcPulse{0%,100%{transform:scale(.96);opacity:.5}50%{transform:scale(1.04);opacity:1}}
@keyframes dcPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){#dcDlg,#dcDlg .dcok,#dcDlg .dcring::after{animation:none}}
html.tv #dcDlg .dcin{zoom:var(--tvz,1.5)}

/* z231chlogos: Streaming 'Canales VideoMax' tiles use the Live TV logo files */
.chtile.chlogo{background:#111}
.chtile.chlogo img{display:block;width:88%;max-width:160px;height:auto;aspect-ratio:3/1;border-radius:7px;object-fit:contain}

/* z234tvzap: Canales VideoMax tiles = the Live TV guide channel cell (tvch.css) inside a Streaming tile */
a.tile.chtile.chlv{padding:8px 10px;border:1px solid #ffffff12;background:#0b0b10b3;color:#e9e9ee;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
a.tile.chtile.chlv:hover,a.tile.chtile.chlv:focus{background:#ffffff14}
.chtile.chlv .tvc3c{width:100%;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.chtile.chlv .tvn{min-width:0;font-size:12px}
.chtile.chlv .tvlg1.l3{width:132px;height:44px;object-fit:contain;object-position:center}
.chtile.chlv .tvth{font-size:11px;-webkit-line-clamp:1}
@media (max-width:600px){.chtile.chlv .tvlg1.l3{width:84px;height:28px}.chtile.chlv .tvth,.chtile.chlv .tvn{display:none}}
html.tv .chtile.chlv .tvlg1.l3{width:150px;height:50px}

/* z240tvkbd: language toggle right under the heading on the sign-in screen */
.lgcard .lgtog{position:static;margin:-4px 0 4px}
/* z242join: join notes one sentence per line; Back to sign in spaced below Send request */
.mbnote .snt{display:block;text-wrap:balance}
.mbcard .mbback{margin-top:6px;display:inline-block}
/* z243mbopts: Preferred language buttons separated, focus ring fully visible (TV) */
.mbcard .mbopts{gap:8px;border:0;border-radius:0;overflow:visible}
.mbcard .mbopts button{position:relative;border:1px solid #333;border-radius:8px}
.mbcard .mbopts button:focus,.mbcard .mbopts button:focus-visible{z-index:1;outline:2px solid var(--vmring);outline-offset:2px}
/* z247: Back to sign in is a button like Sign in (no underline) */
.mbcard .btn.mbback{display:block;width:100%;box-sizing:border-box;margin-top:6px;text-decoration:none}
.mbcard .btn.mbback:hover,.mbcard .btn.mbback:focus,.mbcard .btn.mbback:focus-visible{text-decoration:none}

/* z248focus: TV + keyboard focus = blue ring + soft glow everywhere */
html.tv :focus{outline-color:var(--vmring)}
:focus-visible{outline-color:var(--vmring)}
/* z248lang: small Change language button at the bottom of sign-in; language screen heading */
.lgcard .btn.lglang{min-height:34px;font-size:13px;padding:6px 16px;background:transparent;border-color:#ffffff33;color:#c9cad3}
.tventry h1.lgpick{font-size:20px;font-weight:500}
/* z248focus: Live TV / chooser focus (tvch.css) in the same ring, overridden here so tvch.css stays untouched */
html body .tvtabs button:hover,html body .tvtabs button:focus-visible{border-color:var(--vmring)}
html body .tvp:hover,html body .tvp:focus-visible{border-color:var(--vmring)}
html.tv body .tvp:focus,html.tv body .tvch1:focus,html.tv body .tvtabs button:focus,html.tv body .tvclose:focus{outline-color:var(--vmring)}
html body #tvBtn:hover,html body #tvBtn:focus-visible{border-color:var(--vmring)}
html body .tvsa:hover,html body .tvsa:focus-visible,html body .tvlang:hover,html body .tvlang:focus-visible,html body .tvstream:hover,html body .tvstream:focus-visible{border-color:var(--vmring)}
html.tv body .tvrate button:focus,html.tv body .tvsa:focus,html.tv body .tvlang:focus,html.tv body .tvstream:focus{outline-color:var(--vmring)}
html body .ltseg button:hover,html body .ltseg button:focus-visible{border-color:var(--vmring)}
html body .ltact button:hover,html body .ltact button:focus-visible{border-color:var(--vmring)}
html.tv body #ltLang button:focus{outline-color:var(--vmring)}
html body .tvec:hover,html body .tvec:focus-visible{border-color:var(--vmring)}
html.tv body .tvec:focus{outline-color:var(--vmring)}
html.tv body .tvl:focus{outline-color:var(--vmring)}
/* z253cfgrid (JC 2026-10-21): avatar picker shows a peek of the next row so more rows read as scrollable; the grid scrolls, not the whole box */
#avDlg .avgrid{--avrow:144px;max-height:calc(var(--avrow) * 3.5);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;scroll-padding:8px 0;padding:4px 6px;box-sizing:border-box;align-content:start}
@media (max-height:640px){#avDlg .avgrid{max-height:calc(var(--avrow) * 2.5)}}
@media (max-width:700px){#avDlg .avgrid{--avrow:122px}}
/* z253cfgrid: new-profile avatar step = 4 full rows + half of the 5th peeking; the grid scrolls (row pitch follows the box width) */
#apDlg .apbox{container-type:inline-size}
#apDlg .apav{--avp:calc((100cqw - 44px) / 5 + 8px);max-height:calc(var(--avp) * 4.5 + 6px);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;scroll-padding:6px 0;padding:6px;box-sizing:border-box;align-content:start;flex:none}
/* z253cfgrid: wizard/dialog footers stay visible while the body scrolls (new profile, Change avatar) */
#apDlg .apbox .pwact,#avDlg .avbox .pwact{position:sticky;bottom:-22px;z-index:2;background:#111117;margin-bottom:-22px;padding:10px 0 22px;box-shadow:0 -10px 14px -6px #111117}

/* z255focusall: one blue focus ring (Sign in glow) on every focusable thing, TV + web. The :not(#_z) repeats only raise specificity so this wins over older per-element rules without !important. Selected state (fills like .on) stays; focus always adds the ring. */
html body :is(a,button,input,select,textarea,summary,[tabindex],[role=button],[role=tab],[role=option]):focus-visible:not(#_z):not(#_z):not(#_z),html body.kb :focus:not(#_z):not(#_z):not(#_z),html.tv body :is(a,button,input,select,textarea,summary,[tabindex],[role=button],[role=tab],[role=option]):focus:not(#_z):not(#_z):not(#_z){outline:2px solid var(--vmring);outline-offset:4px;box-shadow:var(--vmglow)}
/* guide rows sit in scroll boxes: draw the ring inside so it is never clipped */
html body :is(.tvch1,.tvp,.tvl):focus-visible:not(#_z):not(#_z):not(#_z):not(#_z),html.tv body :is(.tvch1,.tvp,.tvl):focus:not(#_z):not(#_z):not(#_z):not(#_z){outline:2px solid var(--vmring);outline-offset:-3px;box-shadow:inset 0 0 0 1px rgba(59,130,246,.45),inset 0 0 14px 2px rgba(59,130,246,.35)}
/* wordmark: room so the ring never touches the letters */
header#top .brand{padding:8px 14px;margin:-8px -14px;border-radius:10px}
html body header#top .brand:is(:focus,:focus-visible):not(#_z):not(#_z):not(#_z):not(#_z){outline:2px solid var(--vmring);outline-offset:2px;box-shadow:var(--vmglow);border-radius:10px}
/* small text buttons (Less/More etc.): a little air inside the ring */
.card .cap .capmore:focus-visible,html.tv .card .cap .capmore:focus{outline-offset:4px}
/* top nav pill icons (shield, sliders): centred with the label */
#top :is(#filtBtn,#cwBtn,.fbtn)>svg,#top :is(#filtBtn,#cwBtn,.fbtn)>img{display:block;flex:none;align-self:center;vertical-align:middle}
#top :is(#filtBtn .dpl,#cwBtn .cwl,.fbtn span){line-height:1;display:inline-flex;align-items:center}

/* z256obtop (JC 2026-10-21): taste picker + avatar step: title left, Skip / Next top-right in one solid sticky bar; posters scroll beneath */
.ob.obtopm{padding-bottom:40px}
.obtop{position:sticky;top:0;z-index:45;margin:-28px -4vw 22px;padding:0 4vw 14px;background:#0b0b10;border-bottom:1px solid #ffffff1f}
.obtop .obbar{position:static;margin:0 -4vw 12px;border-bottom:0}
.obtop .obhd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;max-width:none;margin:0;text-align:left;padding-top:12px}
.obtop .obhd .obhtx{min-width:0}
.obhact{position:relative;display:flex;align-items:center;gap:12px;flex:none}
.obhint{position:absolute;right:0;top:100%;margin-top:6px;white-space:nowrap;font-size:14px;font-weight:600;color:#9fe6ff;opacity:0;transition:opacity .3s;pointer-events:none}
.obhint.on{opacity:1}
html.tv .obhint{font-size:18px}
@media (max-width:700px){.obtop{margin:-18px -14px 16px;padding:0 14px 10px}.obtop .obbar{margin:0 -14px 10px}.obtop .obhd{flex-direction:column;align-items:stretch;gap:10px}.obtop .obhd p{display:none}.obhact{justify-content:flex-end}.obhact .obcnt{margin-right:auto}.obhint{top:auto;bottom:100%;margin:0 0 4px}}
/* z257gsdup: search panel covers the whole page below the header, so the page behind (sticky rows, its own Actors row) never shows under it */
#gsp{bottom:0;max-height:none;border-bottom:0}
body.gsp-on{overflow:hidden}

/* z259kidworlds: kids Home 'Worlds' tiles (one ring comes from the site-wide z255 focus rule) */
.kwrow .strip{gap:22px}
.kwt{flex:0 0 auto;position:relative;display:flex;align-items:center;width:300px;height:169px;border-radius:24px;overflow:hidden;text-decoration:none;padding:0 0 0 22px}
.kwt .logo-m{position:relative;z-index:1;display:block;width:46%;height:42%}
.kwt-w{position:relative;z-index:1;font-size:26px;line-height:1.05;font-weight:900;max-width:50%;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.kwt-p{position:absolute;right:-18px;top:16px;bottom:16px;display:flex}
.kwt-p img{height:100%;aspect-ratio:2/3;object-fit:cover;border-radius:12px;margin-left:-46px;box-shadow:0 6px 16px rgba(0,0,0,.5);transform:rotate(5deg)}
.kwt-all{width:340px}
@media (max-width:700px){.kwt{width:260px;height:146px}.kwt-all{width:300px}.kwt-w{font-size:22px}}

/* z258chhead: hub header logo replaces pill + title */
.chhead h1 .chhlg{height:1.6em;width:auto;vertical-align:middle;border-radius:6px}
/* z258chhead: sticky footer - footer sits at viewport bottom on short pages (JC) */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body>#app{flex:1 0 auto}
body>#foot{margin-top:auto;flex:none}

/* z255peek: native focus scrolling (no JS) also leaves room so the next item peeks */
.gmenu :focus-visible,.tpanel :focus-visible{scroll-margin:48px}

/* z258onering (JC): ONE single solid 3px blue line on whatever is focused, TV + web. Sits on the element's own border (offset -1px covers a 1px border), soft glow only, no second ring. Poster cards: line on the poster image only, not card/title. Replaces the z255focusall look. :not(#_z) repeats only raise specificity (no !important). */
html body :is(a,button,input,select,textarea,summary,[tabindex],[role=button],[role=tab],[role=option]):focus-visible:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb :focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body :is(a,button,input,select,textarea,summary,[tabindex],[role=button],[role=tab],[role=option]):focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:3px solid var(--vmring);outline-offset:-1px;box-shadow:0 0 10px rgba(59,130,246,.3)}
html body :is(.tvch1,.tvp,.tvl):is(:focus,:focus-visible):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline-offset:-3px;box-shadow:none}
html body header#top .brand:is(:focus,:focus-visible):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline-offset:0;box-shadow:0 0 10px rgba(59,130,246,.3)}
html body .card:is(:focus,:focus-visible):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:none;box-shadow:none}
html body .card:focus-visible:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) :is(.pw img,.noph),html body .card:focus-visible:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z)>img,html.tv body .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) :is(.pw img,.noph),html.tv body .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z)>img{outline:3px solid var(--vmring);outline-offset:0;box-shadow:0 0 10px rgba(59,130,246,.3)}
/* z261foottv: TV html zoom shrinks 100vh, so body fills viewport / zoom */
html.tv body{min-height:calc(100vh / var(--tvz,.75))}html.tv.lgz body{min-height:calc(100vh / var(--tvzl,.9))}

/* z263outcfm: sign-out confirm modal */
#outCfm{position:fixed;inset:0;z-index:2147482000;background:#000b;display:flex;align-items:center;justify-content:center}
#outCfm .ocbox{background:#14141b;border:1px solid #ffffff24;border-radius:16px;padding:26px 28px 22px;max-width:520px;width:88%;box-shadow:0 20px 60px #000}
#outCfm p{margin:0 0 22px;font-size:19px;line-height:1.45;color:#fff}
#outCfm .ocbt{display:flex;gap:12px;justify-content:flex-end}
#outCfm .btn{min-width:130px;padding:11px 18px;border-radius:10px;border:1px solid #ffffff33;background:#22222c;color:#fff;font:inherit;font-size:16px;cursor:pointer}
#outCfm .btn.pri{background:#b42323;border-color:#d43a3a}
/* z263c: centered two-line text, centered equal-width buttons, labels centered */
#outCfm .ocbox{text-align:center}
#outCfm p{margin:0 0 6px}#outCfm p.oc2{margin:0 0 22px;color:#c9cad3;font-size:17px}
#outCfm .ocbt{justify-content:center}
#outCfm .btn{display:inline-flex;align-items:center;justify-content:center;width:170px;min-width:0;height:48px;padding:0 12px;line-height:1;text-align:center;box-sizing:border-box}
/* /z263outcfm */
/* z266panefocus (JC 2026-10-22): only Audio (Playback) and Ratings (Content filter) get a taller box so every option fits; other sections keep 660px (Warnings peeks) */
.gmenu.tpanel[data-tsk=aud],.gmenu.tpanel[data-tsk=rat]{max-height:min(860px,calc(100vh - 90px))}
/* end z266panefocus */
/* z267playerbar (JC 2026-10-22): Up/Down audio + subtitle bar in the Streaming player. Undo: delete this block */
.player .pbx{position:absolute;left:0;right:0;bottom:0;z-index:420;padding:28px 4vw calc(28px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.75) 70%,transparent);display:flex;flex-direction:column;gap:14px}
.player .pbxr{display:flex;align-items:center;gap:18px;min-width:0}
.player .pbxh{flex:none;width:150px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#bbb}
.player .pbxl{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px;min-width:0}
.player .pbx button{all:unset;flex:none;cursor:pointer;padding:10px 18px 10px 34px;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font-size:17px;position:relative;white-space:nowrap}
.player .pbx button.on::before{content:'✓';position:absolute;left:13px}
.player .pbx button.on{background:rgba(255,255,255,.18)}
.player .pbx button:focus{outline:3px solid rgb(59,130,246);outline-offset:0;box-shadow:none}
.player .pbxn{color:#888;font-size:15px;padding:10px 0}
@media (max-width:600px){.player .pbxh{width:84px;font-size:12px}.player .pbx button{font-size:14px;padding:8px 12px 8px 28px}}
.player .pbxt .pbxl{justify-content:center;flex:1}.player .pbx .pbxt button{padding:10px 26px;min-width:64px;text-align:center;font-size:20px}
.player .pbxs{font-style:normal;font-size:13px;letter-spacing:1px;margin-left:6px;color:rgb(147,197,253);vertical-align:middle}
/* /z267playerbar */

/* z265mhead (JC 2026-10-22): phones - Content filter + Playback icon-only again (a later label rule had brought the words back, they spilled over each other); under 430 px no clock, one no-wrap row, the wordmark shrinks first. TV/desktop untouched. Undo: delete this block. */
@media (max-width:600px){#top #cwBtn .cwl,#top #filtBtn .dpl{display:none}}
@media (max-width:430px){header#top nav{flex-wrap:nowrap;min-width:0}header#top nav>*{flex-shrink:0}header#top .hclock{display:none}header#top .brand{flex:0 1 auto;min-width:0;overflow:hidden}header#top .brand img,header#top .brand svg{max-width:100%;height:auto}}
/* z266panefocus (JC 2026-10-22): no blue changed-dot on the Playback header button (Content filter unchanged) */
html body #filtBtn.cfon::after{content:none;display:none}
/* end z266panefocus dot */
/* z264herotop (JC 2026-10-22): Home hero art shows whole, top to bottom, starting right under the header. TV/laptop: art kept 16:9 at full hero height on the right (no crop), dark fade on the left for the text; phones: exact 16:9 box (no crop). Undo: delete this block. */
@media (min-width:701px){#app .hero.carousel{height:min(68vh,calc(100vh - var(--hh,72px) - 170px));background:var(--bg)}#app .hero.carousel img.bg{left:auto;right:0;width:auto;max-width:100%;aspect-ratio:16/9;height:100%;object-fit:cover;object-position:center top}#app .hero.carousel .slide:after{background:linear-gradient(90deg,var(--bg) 0,var(--bg) calc(100% - 177.78 * min(68vh,calc(100vh - var(--hh,72px) - 170px)) / 100),#0b0b10cc calc(100% - 177.78 * min(68vh,calc(100vh - var(--hh,72px) - 170px)) / 100 + 120px),#0b0b1040 70%,#0000),linear-gradient(0deg,var(--bg) 0,#0000 30%)}}
@media (max-width:700px){#app .hero.carousel img.bg{object-position:center top}}
/* z264wm: TV wordmark ~15% smaller inside the same focus ring so it has even room on all four sides. Undo: delete. */
html.tv body header#top .brand img{height:34px}
/* z264toggle: Streaming / Live TV is ONE switch: one 3px blue line around the whole pill when either side is focused (remote/keyboard); active side keeps the white thumb. Undo: delete. */
html body header#top .modesw [data-m]:is(:focus,:focus-visible):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:none;box-shadow:none}
html.tv body header#top .modesw:has([data-m]:focus):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb header#top .modesw:has([data-m]:focus-visible):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:3px solid rgb(59,130,246);outline-offset:2px;box-shadow:0 0 10px rgba(59,130,246,.3)}
/* z264avmenu: no X on the avatar menu (Up / Back close it). Undo: delete. */
#gearMenu[data-mode="user"]>.mclose{display:none}
/* /z264 */
/* z266panefocus close (JC 2026-10-22): no X on Playback / Content filter; Up from the top item or Back closes (the hidden X still runs the close) */
.gmenu.tpanel .mclose{display:none}
/* end z266panefocus close */
/* z266d (JC 2026-10-22): Playback / Content filter keep one fixed height (set from Audio / Ratings in tsWire) */
.gmenu.tpanel[data-fixh]{max-height:min(860px,calc(100vh - 90px))}
/* end z266d */

/* z271herofit (JC 2026-10-22): TV Home hero. vh is multiplied by the TV page zoom (--tvz), so the old height made the hero tiny on a 960-wide TV (logo cut off at the top) and taller than the screen at 1920. Now: hero fills the screen under the header minus ~150px for the next row; art is the whole 16:9 image (contain, never cropped) on the right. Undo: delete this block. */
html.tv{--z271h:calc(100vh / var(--tvz,.75) - var(--hh,77px) - 158px)}
@media (min-width:701px){html.tv #app .hero.carousel{height:var(--z271h)}html.tv #app .hero.carousel img.bg{height:100%;width:auto;max-width:100%;aspect-ratio:16/9;object-fit:contain;object-position:right top}html.tv #app .hero.carousel .slide{padding-bottom:28px}html.tv #app .hero.carousel .slide:after{background:linear-gradient(90deg,var(--bg) 0,var(--bg) calc(100% - 1.7778 * var(--z271h)),#0b0b10cc calc(100% - 1.7778 * var(--z271h) + 120px),#0b0b1040 70%,#0000),linear-gradient(0deg,var(--bg) 0,#0000 30%)}}
/* /z271herofit */

/* z276align (JC 2026-10-22): every title-page row (More like this, etc.) starts at the Cast & Crew margin */
.title-body .row{padding-left:0;padding-right:0}
.title-body .row .strip{margin:0;padding-left:8px;padding-right:8px}
/* /z276align */

/* z276avsticky */
html.tv .ob.obtopm>.obtop.obfix{position:fixed;top:0;left:0;right:0;margin:0;z-index:60}
/* /z276avsticky */

/* z281trick seek preview */
.player .vmtrick { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); border: 2px solid #fff; border-radius: 6px; background-repeat: no-repeat; box-shadow: 0 4px 18px rgba(0,0,0,.6); z-index: 30; pointer-events: none; opacity: 0; transition: opacity .15s; }
.player .vmtrick.on { opacity: 1; }
.player .vmtrick::after { content: attr(data-t); position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; color: #fff; font: 600 15px/1 system-ui, sans-serif; text-shadow: 0 1px 3px #000; }

/* z287 begin (JC 2026-10-22): season tiles get ONE focus ring, on the artwork only (button outline off, like poster cards); episode rows keep their single row ring, never on the thumb */
html body .stile:is(:focus,:focus-visible):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:none;box-shadow:none}
html body .stile:focus-visible:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .sp,html.tv body .stile:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .sp,html body.kb .stile:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .sp{outline:3px solid var(--vmring);outline-offset:0;box-shadow:0 0 10px rgba(59,130,246,.3)}
html body .ep:is(:focus,:focus-visible) img{outline:none;box-shadow:none}
/* z287 end */

/* z292 begin: TV player - no focus ring on the video surface; big auto-hiding bar; brief center icon */
html .player video,html .player video:focus,html .player video:focus-visible,html.tv body.playing .player video:focus{outline:0;box-shadow:none;border:0}
.player:focus,.player:focus-visible,.player:focus-within{outline:0;box-shadow:none}
.z292bar{position:fixed;left:4vw;right:4vw;bottom:5vh;z-index:405;display:flex;flex-direction:column;gap:1.2vh;opacity:0;transition:opacity .3s;pointer-events:none;text-shadow:0 2px 6px #000}
.z292bar.on{opacity:1}
.z292t{color:#fff;font-size:clamp(22px,3.4vh,44px);font-weight:600}
.z292p{height:clamp(8px,1.2vh,16px);background:rgba(255,255,255,.3);border-radius:99px;overflow:hidden}
.z292p i{display:block;height:100%;width:0;background:#fff;border-radius:99px}
.z292c{position:fixed;left:50%;top:50%;width:14vh;height:14vh;margin:-7vh 0 0 -7vh;border-radius:50%;background:rgba(0,0,0,.55);z-index:405;opacity:0;transition:opacity .3s;pointer-events:none}
.z292c.on{opacity:1}
.z292c::before{content:'';position:absolute;inset:0;margin:auto}
.z292c[data-s=play]::before{width:0;height:0;border-style:solid;border-width:3vh 0 3vh 5vh;border-color:transparent transparent transparent #fff;left:1vh}
.z292c[data-s=pause]::before{width:5vh;height:6vh;background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%)}
html.tv .player .pbar .trkI svg{width:32px;height:32px}
html.tv .player .pbar .back,html.tv .player .pbar .ttl{font-size:1.4em}
/* z292 end */

/* z293c: desktop row arrow buttons removed */

/* z294 begin: readable subtitles on TV */
html.tv .player video::cue{font-size:clamp(26px,4.4vh,56px);background:rgba(0,0,0,.6);color:#fff;line-height:1.25}
/* z294 end */
/* z295 shimmer */
.player .z295sh{position:absolute;inset:0;z-index:1;border-radius:0;pointer-events:none;opacity:1;transition:opacity .35s ease-out;display:flex;align-items:flex-end;padding:0 5vw 9vh}
.player .z295sh.off{opacity:0}
.player .z295sh.sub{opacity:.35}
.player .z295t{color:#fff;opacity:.45;font-size:clamp(18px,3vw,40px);font-weight:600;text-shadow:0 1px 4px #000}
.player .z295sh.sub .z295t{display:none}
/* /z295 */

/* z299 (JC 2026-10-22): TV app player failure message (no website-player fallback) */
.natFail{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.82)}
.natFailBox{max-width:min(90vw,640px);background:#16161c;color:#fff;border-radius:14px;padding:28px 32px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.natFailBox h2{margin:0 0 12px;font-size:1.6rem}
.natFailWhy{margin:0 0 18px;opacity:.8;font-size:1rem;word-break:break-word}
.natFailBtns{display:flex;gap:16px;justify-content:center;margin-top:8px}
.natFailBtns button{font:inherit;font-size:1.15rem;padding:10px 26px;border-radius:10px;border:2px solid transparent;background:#2b2b35;color:#fff;cursor:pointer}
.natFailBtns button:focus,.natFailBtns button:hover{outline:none;border-color:#fff;background:#3a3a48}
/* /z299 */

/* z301 begin: Mejora tu equipo dialog */
#z301Dlg{position:fixed;inset:0;z-index:2147482000;background:#000c;display:flex;align-items:center;justify-content:center}
#z301Dlg .z301box{background:#14141b;border:1px solid #ffffff24;border-radius:16px;padding:24px 26px 20px;max-width:620px;width:90%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px #000;color:#fff}
#z301Dlg h2{margin:0 0 10px;font-size:24px}
#z301Dlg .z301p{margin:0 0 14px;font-size:17px;line-height:1.45;color:#ddd}
#z301Dlg .z301l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#z301Dlg .z301l a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px;border-radius:12px;background:#ffffff0f;border:2px solid transparent;color:#fff;text-decoration:none}
#z301Dlg .z301l a:focus,#z301Dlg .z301l a:hover{border-color:#fff;background:#ffffff1f;outline:none}
#z301Dlg .z301pr{font-weight:700;color:#7fd67f}
#z301Dlg .z301n{grid-column:1 / -1;font-size:14px;color:#bbb}
#z301Dlg .z301f{font-size:13px;color:#999;margin:12px 0}
#z301Dlg .z301b{display:flex;justify-content:flex-end}
/* z301 end */

/* z304 begin: person episode filter chip */
.ppf{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0;padding:10px 14px;border-radius:10px;background:var(--card)}.ppf span{font-weight:700}
/* z304 end */

/* z306 compact audio/subtitle icons (JC Oct 23) */
.player .pbx .pbxi .pbxl{justify-content:center;flex:1}
.player .pbx .pbxi button{padding:12px 22px;font-size:19px}
.player .pbx .pbxi small{color:#bbb;font-size:14px;margin-left:8px}
.player .pbx[data-only] .pbxl{flex-wrap:wrap;overflow:visible}
/* /z306 */

/* z307pin: admin PIN keypad */
.z307o{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72)}
.z307b{background:#15171c;color:#fff;border-radius:18px;padding:24px 28px;width:min(92vw,400px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.z307b h3{margin:0 0 6px;font-size:1.5rem}
.z307h{margin:0 0 12px;opacity:.8;font-size:1rem;line-height:1.35}
.z307pw{width:100%;box-sizing:border-box;font-size:1.15rem;padding:12px;border-radius:10px;border:2px solid #444;background:#0d0e11;color:#fff;margin-bottom:12px}
.z307pw:focus{border-color:#fff;outline:none}
.z307d{display:flex;gap:16px;justify-content:center;margin:6px 0 4px}
.z307d i{width:20px;height:20px;border-radius:50%;border:2px solid #aaa}
.z307d i.on{background:#fff;border-color:#fff}
.z307e{min-height:1.3em;margin:4px 0 8px;color:#ff8a80;font-size:1rem}
.z307k{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.z307k button{font-size:2rem;font-weight:700;padding:14px 0;border-radius:14px;border:2px solid transparent;background:#262a33;color:#fff;cursor:pointer}
.z307k button.z307ok{background:#2e7d32;font-size:1.4rem}
.z307k button:focus,.z307f button:focus{outline:none;border-color:#fff;transform:scale(1.06)}
.z307f{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.z307f button{background:none;border:2px solid transparent;color:#cfd8dc;font-size:1rem;padding:8px 10px;border-radius:10px;cursor:pointer}
/* z501pin: iPhone - no double-tap zoom, no text selection or grey flash on the pad; .z501p = pressed flash for touch */
.z307o{touch-action:manipulation}
.z307k button,.z307f button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.z307k button.z501p{background:#4a5160}
/* /z307pin */

/* z311 (JC 2026-10-23): TV audio-quality = visible track + thumbs + two D-pad stepper rows; range inputs hidden on TV */
html.tv .gmenu.tpanel .aqr input{display:none}
html.tv .gmenu.tpanel .aqr .aqth{position:absolute;top:2px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#fff;box-shadow:0 1px 6px #000a;pointer-events:none}
html.tv .gmenu.tpanel .aqr .aqtl{left:calc(12px + (100% - 24px) * var(--lo) / 7)}
html.tv .gmenu.tpanel .aqr .aqtr{left:calc(12px + (100% - 24px) * var(--hi) / 7)}
html.tv .gmenu.tpanel .aqbs{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
html.tv .gmenu.tpanel .aqb{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;border:0;border-radius:8px;background:#ffffff14;color:#fff;font:inherit;font-size:15px;text-align:left}
html.tv .gmenu.tpanel .aqb .aqbv{color:#cfd3dc;font-weight:600}

/* z319focus (JC 2026-10-23): one focus standard everywhere: same blue ring + soft halo that slowly breathes (2 s), box-shadow on the focused element only; spacing so it is never clipped */
@keyframes vm319p{0%,100%{box-shadow:0 0 0 2px var(--vmring),0 0 6px 1px rgba(59,130,246,.30)}50%{box-shadow:0 0 0 3px var(--vmring),0 0 14px 4px rgba(59,130,246,.55)}}
html.tv:root body a:focus,html.tv:root body button:focus,html.tv:root body select:focus,html.tv:root body summary:focus,html.tv:root body [tabindex]:focus,html.tv:root body .tile:focus,html.tv:root body .ctile:focus,html.tv:root body .ctry-tile:focus,html.tv:root body .modesw button:focus,html.tv:root body #top button:focus,html.tv:root body #top a:focus,html.tv:root body .card:focus>img,html.tv:root body .card:focus .pw img,html.tv:root body .card:focus>.noph,html:root body.kb a:focus,html:root body.kb button:focus,html:root body.kb select:focus,html:root body.kb summary:focus,html:root body.kb [tabindex]:focus,html:root body.kb .tile:focus,html:root body.kb .ctile:focus,html:root body.kb .ctry-tile:focus,html:root body.kb .modesw button:focus,html:root body.kb #top button:focus,html:root body.kb #top a:focus,html:root body.kb .card:focus>img,html:root body.kb .card:focus .pw img,html:root body.kb .card:focus>.noph{outline:none;box-shadow:0 0 0 2px var(--vmring),0 0 8px 2px rgba(59,130,246,.4);animation:vm319p 2s ease-in-out infinite;transform:none}
html.tv:root body .card:focus,html:root body.kb .card:focus{outline:none;box-shadow:none;animation:none}
@media (prefers-reduced-motion:reduce){html.tv:root body a:focus,html.tv:root body button:focus,html.tv:root body select:focus,html.tv:root body summary:focus,html.tv:root body [tabindex]:focus,html.tv:root body .tile:focus,html.tv:root body .ctile:focus,html.tv:root body .ctry-tile:focus,html.tv:root body .modesw button:focus,html.tv:root body #top button:focus,html.tv:root body #top a:focus,html.tv:root body .card:focus>img,html.tv:root body .card:focus .pw img,html.tv:root body .card:focus>.noph,html:root body.kb a:focus,html:root body.kb button:focus,html:root body.kb select:focus,html:root body.kb summary:focus,html:root body.kb [tabindex]:focus,html:root body.kb .tile:focus,html:root body.kb .ctile:focus,html:root body.kb .ctry-tile:focus,html:root body.kb .modesw button:focus,html:root body.kb #top button:focus,html:root body.kb #top a:focus,html:root body.kb .card:focus>img,html:root body.kb .card:focus .pw img,html:root body.kb .card:focus>.noph{animation:none}}
html.tv .strip,body.kb .strip{padding-top:14px;padding-bottom:18px;padding-left:28px;padding-right:28px;scroll-padding-inline:28px}
html.tv .row .strip,body.kb .row .strip{padding-left:max(4vw,28px);padding-right:max(4vw,28px);scroll-padding-inline:max(4vw,28px)}
html.tv .title-body .row .strip,html.tv .title-body .row.flush .strip{padding-left:24px;padding-right:24px}
html.tv #app>section.row.catbar .strip{padding:10px 24px}
html.tv .ynav{padding-top:12px;padding-bottom:12px}
html.tv .gmenu,html.tv .tsp,html.tv .avgrid{scroll-padding:16px}

/* z321 (JC 2026-10-23): rating + audio-quality pills (chosen = steady blue ring, focused = z319 pulse), no big rectangle/track; rows padded so text never touches the ring; open top-bar menu icon stays lit; avatar-menu dividers */
.gmenu.tpanel .cwseg.tsl{display:flex;flex-wrap:wrap;gap:10px;padding:6px 6px 8px}
.gmenu.tpanel .cwseg.tsl::before{content:none;display:none}
.gmenu.tpanel .cwseg.tsl button.cwp{flex:none;flex-direction:row;align-items:center;justify-content:center;gap:0;width:auto;min-height:36px;padding:0 16px;border:1px solid #ffffff40;border-radius:999px;background:#ffffff0a;font-size:13px;color:#cfd0d8}
.gmenu.tpanel .cwseg.tsl button.cwp::before{content:none;display:none}
.gmenu.tpanel .cwseg.tsl button.cwp:hover{background:#ffffff1a;color:#fff}
.gmenu.tpanel .cwseg.tsl button.cwp.on{background:#ffffff14;border-color:var(--vmring);color:#fff;font-weight:600;box-shadow:0 0 0 2px var(--vmring)}
.gmenu.tpanel .cwseg.tsl button.cwp:focus-visible{outline:none}
.gmenu.tpanel button.cwt{padding:0 14px;border-radius:12px}
.gmenu.tpanel .tsr{padding-left:4px;padding-right:4px}
.gmenu.tpanel .tsp{padding-left:20px;padding-right:20px;scroll-padding:16px}
.gmenu hr.z321g{margin:6px 10px}
html.tv:root body #top button.z321act,html:root body.kb #top button.z321act{outline:none;box-shadow:0 0 0 2px var(--vmring),0 0 8px 2px rgba(59,130,246,.4);animation:vm319p 2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html.tv:root body #top button.z321act,html:root body.kb #top button.z321act{animation:none}}

/* z325 (JC 2026-10-23, approved after TV app 0.24 test): one ring width (--vmrw) + wider/stronger blue halo everywhere; ring is a box-shadow so it follows each element's own rounded corners; Streaming/Live TV = one pill ring; no white flash in the top bar; My requests cards ring on the poster frame; no snap/smooth CSS fighting the eased JS glide. Undo: delete this block. */
:root{--vmrw:3px}
@keyframes vm319p{0%,100%{box-shadow:0 0 0 var(--vmrw) var(--vmring),0 0 12px 3px rgba(59,130,246,.40)}50%{box-shadow:0 0 0 var(--vmrw) var(--vmring),0 0 24px 8px rgba(59,130,246,.62)}}
html.tv body a:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body button:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body input:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body select:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body textarea:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body summary:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body [tabindex]:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb a:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb button:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb input:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb select:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb textarea:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb summary:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb [tabindex]:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:none;box-shadow:0 0 0 var(--vmrw) var(--vmring),0 0 12px 3px rgba(59,130,246,.4);animation:vm319p 2s ease-in-out infinite}
html.tv body .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:none;box-shadow:none;animation:none}
html.tv body .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z)>img,html.tv body .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw img,html.tv body .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z)>.noph,html.tv body .stile:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .sp,html body.kb .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z)>img,html body.kb .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw img,html body.kb .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z)>.noph,html body.kb .stile:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .sp{outline:none;box-shadow:0 0 0 var(--vmrw) var(--vmring),0 0 12px 3px rgba(59,130,246,.4);animation:vm319p 2s ease-in-out infinite}
html.tv body .card.miss:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw img,html body.kb .card.miss:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw img{box-shadow:none;animation:none}
html.tv body .card.miss:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw,html body.kb .card.miss:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw{outline:none;box-shadow:0 0 0 var(--vmrw) var(--vmring),0 0 12px 3px rgba(59,130,246,.4);animation:vm319p 2s ease-in-out infinite}
html.tv body :is(.tvch1,.tvp,.tvl):focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb :is(.tvch1,.tvp,.tvl):focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:none;box-shadow:inset 0 0 0 var(--vmrw) var(--vmring),inset 0 0 16px 3px rgba(59,130,246,.4);animation:none}
html.tv body .modesw [data-m]:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb .modesw [data-m]:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:none;box-shadow:none;animation:none;background:transparent}
html.tv body header#top .modesw:has([data-m]:focus):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb header#top .modesw:has([data-m]:focus):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:none;box-shadow:0 0 0 var(--vmrw) var(--vmring),0 0 12px 3px rgba(59,130,246,.4);animation:vm319p 2s ease-in-out infinite}
html body header#top .search input,html body header#top #q{border-radius:20px}
html.tv body header#top :is(button,a,input),html body.kb header#top :is(button,a,input){transition:none}
html.tv body header#top :is(button,a,input):focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb header#top :is(button,a,input):focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){border-color:var(--vmring);filter:none}
body.kb .strip{scroll-snap-type:none}body.kb .card{scroll-snap-align:none}
html.tv #avDlg .avgrid,body.kb #avDlg .avgrid{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){html.tv body a:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body button:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body input:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body select:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body textarea:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body summary:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body [tabindex]:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html.tv body .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z)>img,html.tv body .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw img,html.tv body .card.miss:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw,html body.kb a:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb button:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb input:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb select:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb textarea:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb summary:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb [tabindex]:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z)>img,html body.kb .card:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw img,html body.kb .card.miss:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw{animation:none}}
/* /z325 */

/* z327 (JC 2026-10-23): season cards get ONE ring, on the whole card (z319 standard); the poster inside no longer draws its own */
html.tv body .stile:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .sp,html body.kb .stile:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .sp{outline:none;box-shadow:none;animation:none}
html body .stile{border-radius:10px}
/* z328 (JC 2026-10-23): award caption space only where a row really has caption lines (Oscars/award by-year pages). Category pages (e.g. Emmys > Best Drama Series) only carry Winner/Nominee, shown as the poster badge, so their rows drop the empty 3-line reserve and the next year row peeks from the bottom edge. Undo: delete this block (backup app.css.bak-pre-z328). */
.strip:not(:has(.cap .cl)) .card .cap{height:0;margin-top:0}
/* /z328 */

/* z329 (JC 2026-10-23): selected-but-not-focused = WHITE, only the focused item is blue (award switcher, accolade/category tiles, season tiles) */
#app>section.row.catbar a.tile.ctile.awsw.on:not(:focus),#app>section.row.catbar a.tile.ctile.on:not(:focus){border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.85);background:var(--awbg,rgba(255,255,255,.08))}
#app a.tile.ctile.on:not(:focus),#app .stile.on:not(:focus) .sp{border-color:#fff;outline-color:#fff}
/* z331 (JC 2026-10-23 ~7:00 PM ET): halo half of z325 (same blue, same --vmrw ring) + room so the glow is never clipped by strips. Undo: delete this block. */
:root{--vmglow:0 0 0 2px rgba(59,130,246,.45),0 0 7px 2px rgba(59,130,246,.45)}
@keyframes vm319p{0%,100%{box-shadow:0 0 0 var(--vmrw) var(--vmring),0 0 6px 2px rgba(59,130,246,.40)}50%{box-shadow:0 0 0 var(--vmrw) var(--vmring),0 0 12px 4px rgba(59,130,246,.62)}}
html.tv body .card.miss:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw,html body.kb .card.miss:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .pw,html.tv body header#top .modesw:has([data-m]:focus):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb header#top .modesw:has([data-m]:focus):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){box-shadow:0 0 0 var(--vmrw) var(--vmring),0 0 6px 2px rgba(59,130,246,.4)}
html.tv body :is(.tvch1,.tvp,.tvl):focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb :is(.tvch1,.tvp,.tvl):focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){box-shadow:inset 0 0 0 var(--vmrw) var(--vmring),inset 0 0 8px 2px rgba(59,130,246,.4)}
html.tv body .strip:not(#_z),html body.kb .strip:not(#_z){padding-top:16px;padding-bottom:18px;padding-left:max(16px,var(--z331pl,16px))}
html.tv body .catbar .strip:not(#_z),html body.kb .catbar .strip:not(#_z){padding:14px 16px}
/* /z331 */

/* z338: every dialog button = same rounded pill + rounded focus ring (Cancel was squarish) */
html body .pwact button:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body .rlacts button:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body .dcact button:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body #outCfm button:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body .z307f button:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body [role=dialog] .btn:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body [role=dialog] button.cancel:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){border-radius:999px}
html body .pwact button:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body .rlacts button:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body .dcact button:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body #outCfm button:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body .z307f button:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body [role=dialog] .btn:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body [role=dialog] button.cancel:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:none;border-radius:999px;box-shadow:0 0 0 var(--vmrw,2px) var(--vmring),0 0 6px 2px rgba(59,130,246,.40);animation:vm319p 2s ease-in-out infinite}

/* z349 (JC 2026-10-24): award switcher chips = same wide shape as the big award tiles (~1.9:1) at the current 48px height; logo fitted inside */
#app>section.row.catbar a.tile.ctile.awsw{flex:0 0 92px;width:92px;min-width:92px;max-width:92px;height:48px;min-height:48px;padding:0 8px;gap:4px;justify-content:center;overflow:hidden;box-sizing:border-box}
#app>section.row.catbar a.tile.ctile.awsw .awsl{max-width:100%;max-height:34px;flex:0 1 auto;min-width:0}
#app>section.row.catbar a.tile.ctile.awsw span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* z349: request pill on posters fits inside the poster (wraps to 2 centered lines, smaller font) */
.card .lreqb{box-sizing:border-box;max-width:calc(100% - 8cqw);white-space:normal;text-align:center;font-size:4.6cqw;line-height:1.2;padding:2cqw 2.5cqw;overflow-wrap:anywhere}

/* z350 (JC 2026-10-24): award chip logos = same 30px visible height (equal space above/below, Golden Globes reference), trimmed per award in JS; Venice lion only */
#app>section.row.catbar a.tile.ctile.awsw{padding:0 7px}
#app>section.row.catbar a.tile.ctile.awsw .awsl.awc350{flex:none;max-width:none;max-height:none;-webkit-mask-size:100% 100%;mask-size:100% 100%}
#app>section.row.catbar a.tile.ctile.awsw img.awsl.awc350{object-fit:fill}

/* z351 begin (JC Oct 24 12:42 AM ET): subtitle styles. Classic = white + soft outline, no box (default); Yellow; Boxed = old look */
html.ss-cls video::cue,html.ss-yel video::cue,html.tv.ss-cls .player video::cue,html.tv.ss-yel .player video::cue{background:transparent;background-color:transparent;color:#fff;font-family:"Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:1.1em;line-height:1.25;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 4px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.8)}
html.ss-yel video::cue,html.tv.ss-yel .player video::cue{color:#ffd84a}
html.tv.ss-cls .player video::cue,html.tv.ss-yel .player video::cue{font-size:clamp(28px,4.8vh,60px)}
html.ss-box video::cue{background:rgba(0,0,0,.75);color:#fff;padding:.1em .45em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* z352: Large subtitles (~128%), all styles */
html.sz-l video::cue{font-size:1.4em}
html.tv.sz-l .player video::cue{font-size:clamp(36px,6.1vh,76px)}
video::-webkit-media-text-track-display{transform:translateY(-4%)}
/* z351 end */

/* z355 autoplay card */
.player .z355 { position: absolute; right: 4vw; bottom: 12vh; z-index: 60; max-width: min(92vw, 640px); }
.player .z355c { display: flex; gap: 16px; align-items: center; background: rgba(12, 12, 16, 0.92); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); color: #fff; }
.player .z355.ask .z355c { flex-direction: column; align-items: flex-start; }
.player .z355t { flex: 0 0 auto; width: 200px; aspect-ratio: 16 / 9; border-radius: 8px; background: #222 center / cover no-repeat; }
.player .z355h { font-size: 1.25rem; font-weight: 700; }
.player .z355n { font-weight: 400; opacity: 0.8; font-size: 1rem; }
.player .z355s { opacity: 0.75; margin-top: 4px; font-size: 0.9rem; }
.player .z355e { margin-top: 2px; font-size: 1rem; }
.player .z355b { display: flex; gap: 10px; margin-top: 12px; }
.player .z355b .btn:focus, .player .z355b .btn:focus-visible { outline: 3px solid var(--vmring, rgb(59, 130, 246)); outline-offset: 2px; }
.player .z355p { background: var(--vmring, rgb(59, 130, 246)); color: #fff; border-color: transparent; }
@media (max-width: 600px) { .player .z355 { left: 3vw; right: 3vw; bottom: 8vh; } .player .z355t { width: 120px; } }

/* z359 kiosk mode dialog */
.z359b { max-width: 640px; text-align: left; }
.z359b h3 { margin: 0 0 8px; }
.z359b h4 { margin: 14px 0 6px; font-size: 1rem; }
.z359dv { font-size: 1.1rem; font-weight: 600; margin: 0 0 6px; }
.z359st { opacity: .85; margin: 0 0 8px; }
.z359st.on { color: #6fd38b; }
.z359m { background: rgba(30, 110, 230, .18); border-radius: 8px; padding: 8px 12px; }
.z359g { margin: 0 0 12px; padding-left: 22px; line-height: 1.45; }
.z359k { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.z359a { padding: 10px 18px; border-radius: 10px; border: 2px solid transparent; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; cursor: pointer; }
.z359a:focus, .z359a:hover { border-color: #fff; background: #1e6ee6; outline: none; }

#app .hero.carousel .dots button.on{background:var(--vmring)} /* z365 corporate blue dots */
/* z366herosmall (JC 2026-10-24 pt1196u): Home hero shorter so 1.5 rows show under it (first row whole + half the next) on TV and desktop. Art = whole 16:9 image scaled down (never cropped), anchored right; more black on the left with logo/text/button on it; same left fade. Phones untouched. Undo: delete this block. */
@media (min-width:701px){
#app{--z366h:clamp(240px,calc(100vh - var(--hh,72px) - 450px),62vh)}
html.tv #app{--z366h:clamp(240px,calc(100vh / var(--tvz,.75) - var(--hh,77px) - 450px),calc(62vh / var(--tvz,.75)))}
#app .hero.carousel,html.tv #app .hero.carousel{height:var(--z366h)}
#app .hero.carousel img.bg,html.tv #app .hero.carousel img.bg{left:auto;right:0;height:100%;width:auto;max-width:100%;aspect-ratio:16/9;object-fit:contain;object-position:right top}
#app .hero.carousel .slide:after,html.tv #app .hero.carousel .slide:after{background:linear-gradient(90deg,var(--bg) 0,var(--bg) calc(100% - 1.7778 * var(--z366h)),#0b0b10cc calc(100% - 1.7778 * var(--z366h) + 120px),#0b0b1040 calc(100% - 1.7778 * var(--z366h) + 45%),#0000),linear-gradient(0deg,var(--bg) 0,#0000 30%)}
#app .hero.carousel .slide,html.tv #app .hero.carousel .slide{padding-bottom:14px}
#app .hero.carousel .cap{max-width:min(560px,46vw)}
#app .hero.carousel .cap img.logo{max-height:calc(var(--z366h) * .3);max-width:min(340px,36vw);margin-bottom:8px}
#app .hero.carousel h1{font-size:clamp(22px,calc(var(--z366h) * .11),44px);margin:0 0 6px}
#app .hero.carousel .meta{font-size:14px}
#app .hero.carousel p{-webkit-line-clamp:2;font-size:14px;line-height:1.35;margin:6px 0 10px}
#app .hero.carousel .acts .btn{min-height:36px;padding:4px 16px}
}
@media (min-width:701px) and (max-height:820px){html:not(.tv) #app .hero.carousel p{-webkit-line-clamp:1}}
html.tv #app .hero.carousel p{-webkit-line-clamp:1}
/* /z366herosmall */

/* z368herotint (JC 2026-10-24 pt1198u): Home hero left panel + fade use a dark colour from the title's own art (slide style --z368t/a/b from /opt/movc/build_herotint.py; white text >=10:1). No tint = black as before. Colour crossfades with the slide opacity transition. Undo: delete this block. */
@media (min-width:701px){
#app .hero.carousel .slide,html.tv #app .hero.carousel .slide{background:var(--z368t,var(--bg))}
#app .hero.carousel .slide:after,html.tv #app .hero.carousel .slide:after{background:linear-gradient(90deg,var(--z368t,var(--bg)) 0,var(--z368t,var(--bg)) calc(100% - 1.7778 * var(--z366h)),var(--z368a,#0b0b10cc) calc(100% - 1.7778 * var(--z366h) + 120px),var(--z368b,#0b0b1040) calc(100% - 1.7778 * var(--z366h) + 45%),#0000),linear-gradient(0deg,var(--bg) 0,#0000 30%)}
}
/* /z368herotint */
/* z371herofade (JC 2026-10-24 pt1201u): hero left tint->backdrop fade about twice as wide with more stops (eased) so no visible edge. Bottom fade unchanged. Undo: delete this block. */
#app .hero.carousel .slide:after,html.tv #app .hero.carousel .slide:after{background:linear-gradient(90deg,var(--z368t,var(--bg)) 0,var(--z368t,var(--bg)) calc(100% - 1.7778 * var(--z366h) - 140px),var(--z371e,#0b0b10e6) calc(100% - 1.7778 * var(--z366h) - 40px),var(--z368a,#0b0b10cc) calc(100% - 1.7778 * var(--z366h) + 80px),var(--z371n,#0b0b1099) calc(100% - 1.7778 * var(--z366h) + 220px),var(--z371s,#0b0b1066) calc(100% - 1.7778 * var(--z366h) + 380px),var(--z368b,#0b0b1040) calc(100% - 1.7778 * var(--z366h) + 60%),var(--z371f,#0b0b101f) calc(100% - 1.7778 * var(--z366h) + 80%),#0000),linear-gradient(0deg,var(--bg) 0,#0000 30%)}
/* /z371herofade */


/* z370 previews (JC TEST, own account only): clip sits exactly over the hero backdrop (JS copies its box), under the tint fade + text; mute toggle bottom-right. Undo: delete this block. */
#app .hero.carousel .slide video.z370v{position:absolute;object-fit:contain;opacity:0;transition:opacity .8s ease;pointer-events:none;background:#000}
#app .hero.carousel .z370m{position:absolute;right:2vw;bottom:calc(3vh + 22px);z-index:5;width:44px;height:44px;border-radius:50%;border:2px solid #fff9;background:#0008;color:#fff;font-size:20px;line-height:1;cursor:pointer}
/* /z370 */
/* z373 (JC pt1205u): preview clip = same box as img.bg (16:9, right-anchored, full height) and the same soft left + bottom fades as the backdrop (mask), under the z368/z371 tint overlay; 0.8 s crossfade. Undo: delete this block. */
#app .hero.carousel .slide video.z370v,html.tv #app .hero.carousel .slide video.z370v{left:auto;right:0;top:0;bottom:auto;height:100%;width:auto;max-width:100%;aspect-ratio:16/9;object-fit:contain;background:#000;transition:opacity .8s ease;-webkit-mask-image:linear-gradient(90deg,#0000 0,#0003 8%,#0009 20%,#000 42%),linear-gradient(0deg,#0000 0,#0008 12%,#000 32%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#0000 0,#0003 8%,#0009 20%,#000 42%),linear-gradient(0deg,#0000 0,#0008 12%,#000 32%);mask-composite:intersect}
#app .hero.carousel .slide:after{z-index:0}
/* /z373 */

/* z374 (JC pt1206u): on/off pill for the Home switches in the profile menu; clip box comes from JS (px). Undo: delete this block. */
.gmenu .z374s{position:relative;flex:none;width:38px;height:22px;border-radius:11px;background:#ffffff33;transition:background .2s}
.gmenu .z374s:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.gmenu .z374r[aria-checked=true] .z374s{background:var(--accent,#2a7fff)}
.gmenu .z374r[aria-checked=true] .z374s:after{transform:translateX(16px)}
.gmenu .z374r:focus .z374s{box-shadow:0 0 0 2px #fff}
/* /z374 */

/* z377 (JC): clip wrapper = exact img.bg box (px from JS); soft fades drawn as overlays in the slide tint (left/top) and page bg (bottom), same look as the picture, works in Safari. Undo: delete this block. */
#app .hero.carousel .slide .z377w{position:absolute;overflow:hidden;opacity:0;transition:opacity .8s ease;pointer-events:none}
#app .hero.carousel .slide .z377w video.z370v,html.tv #app .hero.carousel .slide .z377w video.z370v{position:absolute;left:0;top:0;right:auto;bottom:auto;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:contain;opacity:1;transition:none;-webkit-mask-image:none;mask-image:none;background:#000}
#app .hero.carousel .slide .z377w:after{content:"";position:absolute;inset:-1px;background:linear-gradient(90deg,var(--z368t,var(--bg)) 0,var(--z371e,#0b0b10e6) 6%,var(--z368a,#0b0b10cc) 14%,var(--z371n,#0b0b1099) 24%,var(--z371f,#0b0b101f) 40%,#0000 52%),linear-gradient(0deg,var(--bg) 0,#0b0b10b3 10%,#0000 32%),linear-gradient(180deg,var(--z368t,var(--bg)) 0,#0000 12%)}
/* /z377 */

/* z378 (JC pt1216u): phones - the wordmark sits in a <picture>, so the earlier height:auto rule let it render full size (219px) and pushed Playback + the avatar off the right edge of every iPhone. Pin it small and let it shrink; menu taps never wait for double-tap zoom. Undo: delete this block. */
@media (max-width:600px){header#top .brand picture{display:flex;min-width:0;max-width:100%}header#top .brand picture img{height:13px;width:auto;max-width:100%;object-fit:contain;object-position:left center}}
@media (max-width:360px){header#top .brand picture img{height:11px}}
.gmenu,.gmenu button,#outCfm button,header#top nav button{touch-action:manipulation}
/* /z378 */

/* z383 (JC 10:41 AM ET): no seam where the tint meets the picture. The backdrop's own left edge is feathered (transparent -> opaque over 42% of its width, eased), so the slide's tint background shows through it; no border/shadow. Undo: delete this block. */
#app .hero.carousel img.bg,html.tv #app .hero.carousel img.bg{-webkit-mask-image:linear-gradient(90deg,#0000 0,#0000000d 5%,#00000026 10%,#0000004d 16%,#00000080 22%,#000000b3 28%,#000000d9 34%,#000000f2 39%,#000 44%);mask-image:linear-gradient(90deg,#0000 0,#0000000d 5%,#00000026 10%,#0000004d 16%,#00000080 22%,#000000b3 28%,#000000d9 34%,#000000f2 39%,#000 44%);border:0;box-shadow:none;outline:0}
/* /z383 */

/* z387 begin (JC Oct 24 ~11 AM ET) */
/* 1: Live TV / player subtitle box: extra side padding, subtle rounded corners, semi-opaque black (Con fondo + TV default box) */
html.ss-box video::cue,html.tv .player video::cue{padding:.1em .5em;border-radius:.25em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.tv.ss-box .player video::cue,html.ss-box .player video::cue{background:rgba(0,0,0,.72)}
/* 2: blocked count badge */
#gearMenu [data-g="blk"] .gv.z387n{min-width:1.6em;text-align:center;padding:0 .45em;border-radius:999px;background:#ffffff1f;font-variant-numeric:tabular-nums}
/* 3: PIN pad without OK: empty slot */
.z307k .z387sp{visibility:hidden;pointer-events:none}
/* 5: change-password eye inside the field */
#pwcDlg .pw{position:relative;display:block}
#pwcDlg .pw .eye{right:8px;border-radius:6px}
#pwcDlg .pw .eye:focus-visible,html.tv #pwcDlg .pw .eye:focus{outline:2px solid var(--vmring);outline-offset:0}
/* 6: bigger Feedback dialog */
#fbDlg .fbc{width:min(760px,60vw);padding:24px 24px 20px}
#fbDlg h2{font-size:22px}
#fbDlg .fbhint{font-size:15px}
#fbDlg textarea{min-height:13.5em;font-size:17px;line-height:1.45}
#fbDlg .fbacts button{height:42px;font-size:16px;padding:0 20px}
html.tv #fbDlg .fbc{width:min(1100px,62vw)}
html.tv #fbDlg textarea{font-size:22px}
@media (max-width:700px){#fbDlg .fbc{width:100%;padding:18px}#fbDlg textarea{min-height:11em;font-size:16px}}
/* z387 item 8: option pills in Playback / Content filter: SELECTED = solid blue fill, FOCUSED = glowing blue border only; both visible at once */
html body .gmenu .cwseg button.cwp.on:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){background:var(--accent,#1e3a8a);border-color:var(--accent,#1e3a8a);color:#fff;font-weight:600;box-shadow:none;outline:none}
html body .gmenu .cwseg button.cwp:not(.on):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):is(:focus,:focus-visible,:hover){background:rgba(255,255,255,.06);outline:none}
html body .gmenu .cwseg button.cwp:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):is(:focus,:focus-visible){border-color:var(--vmring);outline:none;box-shadow:0 0 0 2px var(--vmring),0 0 14px 2px var(--vmring)}
/* z387 end */
/* z391 vmBanner (JC pt1252u 11:23 AM ET): Home hero + every title page, desktop and TV only (phones keep the old hero). Text left on the art colour, the distinct picture in the middle with both edges feathered (live CSS, no seam), the whole poster (member's poster language, never cropped) on the right. Undo: delete this block + the z391 blocks in app.js. */
@media (min-width:701px){
#app .hero.vmb,html.tv #app .hero.vmb{--vmbH:var(--z366h)}
#app .hero.vmb.vmbd,html.tv #app .hero.vmb.vmbd{--vmbH:clamp(360px,62vh,640px);position:relative;height:var(--vmbH);padding:0;display:block;background:var(--z368t,var(--bg));overflow:hidden}
html.tv #app .hero.vmb.vmbd{--vmbH:clamp(360px,calc(62vh / var(--tvz,.75)),720px)}
#app .hero.vmb .slide,html.tv #app .hero.vmb .slide{background:var(--z368t,var(--bg))}
#app .hero.vmb.vmbd .slide,html.tv #app .hero.vmb.vmbd .slide{position:absolute;inset:0;max-width:none;display:flex;align-items:center;padding:0 4vw}
#app .hero.vmb .slide img.bg,html.tv #app .hero.vmb .slide img.bg{position:absolute;top:0;bottom:auto;left:26%;right:calc(4vw + var(--vmbH) * .5733 + 1.5vw);width:auto;max-width:none;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 25%;-webkit-mask-image:linear-gradient(90deg,#0000 0,#0000000d 5%,#00000026 10%,#0000004d 16%,#00000080 22%,#000000b3 28%,#000000d9 34%,#000000f2 39%,#000 44%,#000 82%,#00000080 91%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#0000000d 5%,#00000026 10%,#0000004d 16%,#00000080 22%,#000000b3 28%,#000000d9 34%,#000000f2 39%,#000 44%,#000 82%,#00000080 91%,#0000 100%)}
#app .hero.vmb .slide:after,html.tv #app .hero.vmb .slide:after{background:linear-gradient(0deg,var(--bg) 0,#0000 22%);z-index:1;pointer-events:none}
#app .hero.vmb .slide img.vmbp,html.tv #app .hero.vmb .slide img.vmbp{position:absolute;right:4vw;top:50%;transform:translateY(-50%);height:86%;width:auto;aspect-ratio:2/3;object-fit:contain;border-radius:10px;box-shadow:0 12px 40px #000a;z-index:2}
#app .hero.vmb .slide .cap,html.tv #app .hero.vmb .slide .cap{position:relative;z-index:3;max-width:min(34vw,560px)}
#app .hero.vmb.vmbd .cap img.logo{max-height:calc(var(--vmbH) * .3);max-width:min(380px,30vw);margin-bottom:10px}
#app .hero.vmb.vmbd .cap p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
#app .hero.vmb.vmbd .cap .acts{margin-top:14px;flex-wrap:wrap}
}
@media (max-width:700px){#app .hero.vmb img.vmbp{display:none}}
/* /z391 */
/* z393: masked in-app password fields (text input, so no browser autofill/save) + centered password dialogs */
.z393pw{-webkit-text-security:disc;text-security:disc}.z393pw.z393show{-webkit-text-security:none;text-security:none}
#pwGate .pwbox{text-align:center;display:flex;flex-direction:column;align-items:stretch}
#pwGate .pwbox h3,#pwGate .pwbox p{text-align:center}
#pwGate .pwrow{justify-content:center;width:100%}#pwGate .pwrow input{text-align:center;min-width:0}
#pwGate .pwact{justify-content:center;margin-top:4px}#pwGate .pwact .btn{min-width:120px}
/* z391b (JC 12:06 PM ET: banner too tall) — whole banner ~2/3 height, contents scaled with it, first row visible below. Undo: delete this block. */
@media (min-width:701px){
#app .hero.vmb,html.tv #app .hero.vmb{--vmbH:calc(var(--z366h) * .667)}
#app .hero.carousel.vmb,html.tv #app .hero.carousel.vmb{height:var(--vmbH)}
#app .hero.vmb.vmbd,html.tv #app .hero.vmb.vmbd{--vmbH:clamp(240px,41vh,427px);min-height:0}
html.tv #app .hero.vmb.vmbd{--vmbH:clamp(240px,calc(41vh / var(--tvz,.75)),480px)}
#app .hero.vmb .slide .cap,html.tv #app .hero.vmb .slide .cap{zoom:.72;max-width:min(47vw,778px)}
#app .hero.vmb .cap img.logo,html.tv #app .hero.vmb .cap img.logo{max-height:calc(var(--vmbH) * .42)}
#app .hero.vmb.vmbd .cap p{-webkit-line-clamp:3}
#app .hero.vmb .slide img.vmbp,html.tv #app .hero.vmb .slide img.vmbp{height:88%}
}
/* /z391b */
/* z394 (JC pt1260u 12:22 PM ET: z391b too short) — vmBanner double the z391b height, capped so the first row below still peeks; caption back to full size. Undo: delete this block. */
@media (min-width:701px){
#app .hero.vmb{--vmbH:min(calc(var(--z366h) * 1.334),calc(100vh - 260px))}
html.tv #app .hero.vmb{--vmbH:min(calc(var(--z366h) * 1.334),calc(100vh / var(--tvz,.75) - 300px))}
#app .hero.vmb.vmbd{--vmbH:min(82vh,calc(100vh - 230px))}
html.tv #app .hero.vmb.vmbd{--vmbH:min(calc(82vh / var(--tvz,.75)),calc(100vh / var(--tvz,.75) - 290px))}
#app .hero.vmb .slide .cap,html.tv #app .hero.vmb .slide .cap{zoom:1;max-width:min(34vw,560px)}
#app .hero.vmb .cap img.logo,html.tv #app .hero.vmb .cap img.logo{max-height:calc(var(--vmbH) * .3)}
#app .hero.vmb.vmbd .cap p{-webkit-line-clamp:4}
}
/* /z394 */
/* z397: panels and dialogs keep their own scrolling (no chaining to the page) */
#gearMenu,#gearMenu *,[aria-modal="true"],[aria-modal="true"] *{overscroll-behavior:contain}
/* /z397 */
/* z398 (JC 2026-10-24): TV/keyboard focus rings only the poster/thumbnail, not the whole tile (season tiles, episode rows) */
html.tv body :is(.stile,.ep):focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z),html body.kb :is(.stile,.ep):focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z){outline:none;box-shadow:none;animation:none}
html.tv body .stile:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .sp,html body.kb .stile:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) .sp,html.tv body .ep:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) img,html body.kb .ep:focus:not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z):not(#_z) img{outline:none;box-shadow:0 0 0 var(--vmrw,3px) var(--vmring),0 0 12px 3px rgba(59,130,246,.4)}
/* z402 (JC 2026-10-24 2:31-2:35 PM): hero landings paint as one unit (fade the composed slide in once all pictures are decoded) */
#app .hero.z402w .slide,#app .hero.z402w .slide.on{opacity:0}
#app .hero.vmbd.z402w>*{opacity:0}
#app .hero.vmbd>*{transition:opacity .6s ease}
/* z402: 2/3 of the z394 height; left text scaled the same; poster = row-card size in the bottom-right corner; backdrop gets the freed width */
#app .hero.vmb{--vmbH:calc(min(calc(var(--z366h) * 1.334),calc(100vh - 260px)) * .667);--vmbPW:150px;--vmbPH:225px;--vmbPad:clamp(14px,2.2vw,28px)}
html.tv #app .hero.vmb{--vmbH:calc(min(calc(var(--z366h) * 1.334),calc(100vh / var(--tvz,.75) - 300px)) * .667)}
#app .hero.vmb.vmbd{--vmbH:calc(min(82vh,calc(100vh - 230px)) * .667)}
html.tv #app .hero.vmb.vmbd{--vmbH:calc(min(calc(82vh / var(--tvz,.75)),calc(100vh / var(--tvz,.75) - 290px)) * .667)}
@media (max-width:640px){#app .hero.vmb{--vmbPW:112px;--vmbPH:168px}}
#app .hero.vmb .slide .cap,html.tv #app .hero.vmb .slide .cap{zoom:.667;max-width:min(51vw,840px)}
#app .hero.vmb .slide img.vmbp,html.tv #app .hero.vmb .slide img.vmbp{top:auto;bottom:var(--vmbPad);right:calc(var(--vmbPad) + 2vw);transform:none;height:min(var(--vmbPH),calc(var(--vmbH) - 2 * var(--vmbPad)));width:auto;max-width:var(--vmbPW);aspect-ratio:2/3;object-fit:contain;border-radius:8px}
#app .hero.vmb .slide img.bg,html.tv #app .hero.vmb .slide img.bg{right:0;width:74%;object-fit:cover}
/* z410 (JC 2:49 PM): taste-picker posters use the site focus style: glowing ring on the poster only; selected = solid blue */
html body .obgrid .obp:is(:focus,:focus-visible){border-color:var(--vmring);box-shadow:var(--vmglow);outline:none}
html body .obgrid .obp.on{border-color:var(--vmring);background:var(--vmring)}
html body .obgrid .obp.on:is(:focus,:focus-visible){border-color:#fff;box-shadow:var(--vmglow)}
/* z411: bottom Skip/Next pair under the taste-picker grid */
.ob .obbot{display:flex;justify-content:center;gap:16px;margin:28px 0 12px}.ob .obbot[hidden]{display:none}.ob .obend{height:1px}
/* z416 (JC OK 12:41 AM Oct 25): taller Home hero (desktop ~411px at 900 tall, TV 225px) so menu + hero + Continue Watching + an edge of the next row fit one screen;
   backdrop moved left (62% wide) and faded on both edges; row-size poster bottom-right sits on the faded colour */
#app .hero.carousel.vmb{--vmbH:clamp(300px,calc(100vh - 489px),520px)}
html.tv #app .hero.carousel.vmb{--vmbH:225px}
#app .hero.carousel.vmb .slide img.bg,html.tv #app .hero.carousel.vmb .slide img.bg{left:auto;right:calc(var(--vmbPW) + 4 * var(--vmbPad));width:62%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
#app .hero.carousel.vmb .slide::after,#app .hero.carousel.vmb .slide::before{display:none}
#app .hero.carousel.vmb + .row{margin-top:10px}#app .hero.carousel.vmb + .row + .row{margin-top:6px}

/* z421 (JC 1:00 AM Oct 25): seasonal row standout header: bigger title, drawn SVG badge, end-date subline, rule fading in the holiday color */
.row.seas h2.sh{display:flex;align-items:center;gap:14px;margin:18px 0 12px;font-size:30px;font-weight:800;letter-spacing:.2px;line-height:1.05}
.row.seas .sh .ic{flex:0 0 auto;width:50px;height:50px;border-radius:12px;background:radial-gradient(circle at 30% 25%,var(--hol2),#0f172a);box-shadow:0 0 0 2px var(--hol),0 0 18px -2px var(--hol);display:grid;place-items:center}
.row.seas .sh .ic svg{width:72%;height:72%}
.row.seas .sh .tx{display:flex;flex-direction:column}
.row.seas .sh .tx small{font-size:13px;font-weight:600;color:var(--hol);text-transform:uppercase;letter-spacing:1.5px;margin-top:5px}
.row.seas .sh::after{content:"";flex:1;height:2px;margin-left:10px;background:linear-gradient(90deg,var(--hol),transparent 70%);opacity:.6}
@media (max-width:700px){.row.seas h2.sh{font-size:22px;gap:10px}.row.seas .sh .ic{width:38px;height:38px;border-radius:10px}.row.seas .sh .tx small{font-size:11px}}

/* z423 (JC pt1308u): kids Worlds seasonal tile (holiday gradient, drawn badge + name left, fanned posters right) + seasonal collection page header */
.kwt-seas{}
.kws-l{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;max-width:52%}
.kws-l .kwt-w{max-width:none;color:#fff;font-size:24px}
.kws-ic{width:46px;height:46px;border-radius:12px;background:rgba(0,0,0,.35);display:grid;place-items:center}
.kws-ic svg{width:74%;height:74%}
.seashead h1.sh{display:flex;align-items:center;gap:14px;font-size:30px;font-weight:800}
.seashead .sh .ic{flex:0 0 auto;width:50px;height:50px;border-radius:12px;background:radial-gradient(circle at 30% 25%,var(--hol2),#0f172a);box-shadow:0 0 0 2px var(--hol),0 0 18px -2px var(--hol);display:grid;place-items:center}
.seashead .sh .ic svg{width:72%;height:72%}
.seashead .sh .tx{display:flex;flex-direction:column}
.seashead .sh .tx small{font-size:13px;font-weight:600;color:var(--hol);text-transform:uppercase;letter-spacing:1.5px;margin-top:5px}
@media (max-width:700px){.kws-l .kwt-w{font-size:20px}.kws-ic{width:38px;height:38px}}
/* z425 (JC 2:08 AM Oct 25): seasonal badge + glow never clipped: row paints above the hero, header gets breathing room, badge keeps a margin for its (tighter) glow; glow also lit inside the box */
#app>.row.seas{position:relative;z-index:1;overflow:visible;padding-top:14px}
.row.seas h2.sh,.seashead h1.sh{overflow:visible;padding:8px 0 6px}
.row.seas h2.sh{margin:8px 0 10px}
.row.seas .sh .ic,.seashead .sh .ic{margin:6px;box-shadow:0 0 0 2px var(--hol),0 0 12px -3px var(--hol),inset 0 0 14px -4px var(--hol)}

/* z426 (JC pt1314u 2:31 AM Oct 25): Home hero text + buttons at actor-page size (name 26-44px, info 15px, bio 16px, buttons 42px/15px); poster equal gap right and bottom. Undo: delete this block. */
#app .hero.carousel.vmb .slide .cap,html.tv #app .hero.carousel.vmb .slide .cap{zoom:1;max-width:min(42vw,620px)}
#app .hero.carousel.vmb .cap img.logo,html.tv #app .hero.carousel.vmb .cap img.logo{max-height:calc(var(--vmbH) * .34);max-width:min(380px,32vw);margin-bottom:10px}
#app .hero.carousel.vmb h1{font-size:clamp(26px,4vw,44px);margin:0 0 8px}
#app .hero.carousel.vmb .meta{font-size:15px}
#app .hero.carousel.vmb .cap p{font-size:16px;line-height:1.5;margin:8px 0 12px;-webkit-line-clamp:3}
#app .hero.carousel.vmb .acts .btn,html.tv #app .hero.carousel.vmb .acts .btn{min-height:42px;padding:8px 20px;font-size:15px}
#app .hero.carousel.vmb .slide img.vmbp,html.tv #app .hero.carousel.vmb .slide img.vmbp{right:var(--vmbPad);bottom:var(--vmbPad)}
html.tv #app .hero.carousel.vmb .cap p{-webkit-line-clamp:2}
@media (max-width:700px){#app .hero.carousel.vmb .slide .cap{max-width:none}#app .hero.carousel.vmb .cap p{font-size:15px;-webkit-line-clamp:2}#app .hero.carousel.vmb .acts .btn{min-height:42px;padding:8px 20px;font-size:15px}}
/* /z426 */
/* z426b TV: hero is 225px tall there, so logo capped and overview 1 line to keep everything inside */
html.tv #app .hero.carousel.vmb .cap img.logo{max-height:64px;margin-bottom:6px}
html.tv #app .hero.carousel.vmb .cap p{-webkit-line-clamp:1;margin:4px 0 8px}
/* /z426b */

/* z439 (JC pt1332u): Play now countdown fill, 15 s, synced with the timer */
.player .z355p.z439 { position: relative; overflow: hidden; isolation: isolate; background: rgba(59, 130, 246, 0.35); }
.player .z355p.z439::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left center; background: rgb(59, 130, 246); }
.player .z355p.z439go::before { animation: z439f 15s linear forwards; }
.player .z355p .z439l { position: relative; white-space: nowrap; }
@keyframes z439f { 0% { transform: scaleX(0); background: rgb(59, 130, 246); } 60% { background: rgb(99, 102, 241); } 100% { transform: scaleX(1); background: rgb(34, 197, 94); } }
@media (prefers-reduced-motion: reduce) { .player .z355p.z439go::before { animation-timing-function: steps(15, end); } }
.player .z355i { min-width: 0; }
@media (max-width: 600px) { .player .z355c { gap: 12px; padding: 12px; } .player .z355t { width: 96px; } .player .z355b { flex-wrap: wrap; gap: 8px; } }

/* z441: speed/device check - two score cards, linear bar + live stats, centered standard-size Continue */
#dcDlg .dcin{width:min(560px,100%)}
#dcDlg .dcbar{height:6px;border-radius:999px;background:#ffffff14;overflow:hidden;width:min(320px,90%);margin:18px auto 0}
#dcDlg .dcbar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#3b82f6,#8fa8ff,#a78bfa);box-shadow:0 0 10px #8fa8ff88}
#dcDlg .dcstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px;margin:16px auto 0}
#dcDlg .dcstats div{background:#ffffff08;border:1px solid #ffffff12;border-radius:10px;padding:8px 4px}
#dcDlg .dcstats b{display:block;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
#dcDlg .dcstats span{display:block;font-size:11px;color:#8b8b9a;margin-top:2px;letter-spacing:.5px}
#dcDlg .dcsc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px auto 24px;text-align:center}
#dcDlg .dccard{background:#ffffff0a;border:1px solid #ffffff14;border-radius:14px;padding:14px 12px;--dcc:#4ade80}
#dcDlg .dccard.l2{--dcc:#fbbf24}#dcDlg .dccard.l1{--dcc:#f87171}
#dcDlg .dcct{font-size:12px;color:#8b8b9a;letter-spacing:2px;text-transform:uppercase}
#dcDlg .dcrt{font-size:22px;font-weight:700;color:var(--dcc);margin:4px 0 8px}
#dcDlg .dclv{display:flex;gap:5px;justify-content:center}
#dcDlg .dclv i{width:26px;height:6px;border-radius:3px;background:#ffffff1a}#dcDlg .dclv i.on{background:var(--dcc)}
#dcDlg .dcmv{font-size:13px;color:#c9c9d6;margin-top:8px;min-height:1.2em}
#dcDlg .dccard p{margin:6px 0 0;font-size:14px;line-height:1.45;color:#d6d6e0}
#dcDlg .dcact .btn{min-width:0;height:42px;padding:0 32px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;text-align:center;margin:0 auto;align-self:center;width:auto}
@media (max-width:480px){#dcDlg .dcsc{grid-template-columns:1fr}#dcDlg .dcstats{grid-template-columns:repeat(2,1fr)}#dcDlg .dcring{width:160px;height:160px}}
/* z442 (JC pt1340u Oct 25 2:45 PM ET): desktop hero arrows (10px+48px) no longer touch text or poster: 20px gap each side. Poster keeps equal right and bottom gap (both 78px). TV/phone have no arrows so unchanged. Undo: delete this block. */
@media (min-width:701px){html:not(.tv) #app .hero.carousel.vmb .slide{padding-left:78px}html:not(.tv) #app .hero.carousel.vmb .slide img.vmbp{right:78px;bottom:78px;height:min(var(--vmbPH),calc(var(--vmbH) - 156px))}}
/* /z442 */
/* z443 (JC pt1341u Oct 25 3:00 PM ET): hero banner breathing room. Title logo never touches the top (24px top/bottom pad, smaller logo cap, safe centering), 18px between logo/title and the 2025 meta line, poster centered top-to-bottom (same right gap). Undo: delete this block. */
#app .hero.vmb .slide,html.tv #app .hero.vmb .slide{padding-top:24px;padding-bottom:24px;align-items:safe center}
#app .hero.vmb .cap img.logo,html.tv #app .hero.vmb .cap img.logo,#app .hero.carousel.vmb .cap img.logo,html.tv #app .hero.carousel.vmb .cap img.logo{max-height:calc(var(--vmbH) * .26);margin-bottom:18px}
#app .hero.vmb .cap h1,#app .hero.carousel.vmb h1{margin-bottom:14px}
#app .hero.vmb .slide img.vmbp,html.tv #app .hero.vmb .slide img.vmbp,#app .hero.carousel.vmb .slide img.vmbp,html.tv #app .hero.carousel.vmb .slide img.vmbp{top:50%;bottom:auto;transform:translateY(-50%)}
@media (min-width:701px){html:not(.tv) #app .hero.carousel.vmb .slide{padding-top:24px;padding-bottom:24px}html:not(.tv) #app .hero.carousel.vmb .slide img.vmbp{top:50%;bottom:auto}}
html.tv #app .hero.carousel.vmb .cap img.logo{max-height:56px;margin-bottom:12px}
@media (max-width:700px){#app .hero.carousel .cap img.logo,#app .hero .cap img.logo{margin-bottom:12px}}
/* /z443 */
/* z443b (JC 3:05 PM ET Inside Out 2): Play never touches the bottom; overview 2 lines + small More/Less toggle (expanded text scrolls inside the hero); genres stay together on one line (no orphan "· Comedy"). Undo: delete this block. */
#app .hero .cap > p,#app .hero.carousel.vmb .cap p,html.tv #app .hero.carousel.vmb .cap p{-webkit-line-clamp:2;margin-bottom:4px}
#app .hero .cap.z443x > p,#app .hero.carousel.vmb .cap.z443x p,html.tv #app .hero.carousel.vmb .cap.z443x p{-webkit-line-clamp:unset;display:block;max-height:max(4.5em,calc(var(--vmbH,60vh) - 250px));overflow-y:auto;overscroll-behavior:contain}
#app .hero .z443m{background:none;border:0;padding:2px 6px;margin:0 0 8px -6px;color:#fff;opacity:.85;font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:6px}
#app .hero .z443m[hidden]{display:none}
#app .hero .z443m:hover{opacity:1}
#app .hero .z443m:focus-visible,html.tv #app .hero .z443m:focus{outline:none;box-shadow:0 0 0 var(--vmrw,3px) var(--vmring),0 0 12px 3px rgba(59,130,246,.4);opacity:1}
#app .hero .meta .z443g,#app .hero .meta span.z443g{display:inline-flex;flex:none;flex-wrap:nowrap;gap:inherit;white-space:nowrap;max-width:100%}
#app .hero .cap .acts{margin-bottom:0}
@media (min-width:701px){#app .hero.carousel.vmb .slide,html:not(.tv) #app .hero.carousel.vmb .slide{padding-bottom:28px;padding-top:28px}}
/* /z443b */

/* z444 (JC): channel tiles = number + logo only, logo centered; channel page tabs = standard pills */
.chtile.chlv .tvc3c{gap:0}
.chhead .tabs{gap:8px;padding:0;align-items:center}
.chhead .tabs button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;height:34px;padding:0 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:transparent;color:#cfd0d8;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.chhead .tabs button:hover,.chhead .tabs button:focus-visible{background:rgba(255,255,255,.12);border-color:var(--vmring);color:#fff;outline:none}
.chhead .tabs button.on{background:var(--accent,#1e3a8a);border-color:var(--accent,#1e3a8a);color:#fff;font-weight:600;box-shadow:0 0 0 1px #1e3a8a,0 0 10px 2px rgba(30,58,138,.75)}
html.tv body .chhead .tabs button:focus{outline:none;border-color:var(--vmring);background:rgba(255,255,255,.12);color:#fff;box-shadow:0 0 0 2px var(--vmring)}
html.tv body .chhead .tabs button.on:focus{background:var(--accent,#1e3a8a);box-shadow:0 0 0 2px #fff,0 0 10px 2px rgba(30,58,138,.75)}
.chsub{margin-right:4vw}
.chtile.chlv .tvc3c{grid-template-rows:auto;row-gap:0}.chtile.chlv .tvc3c .tvn{grid-row:1}

/* z445: request-status pop-up (centered, fits phone/Mac/TV) */
#vmNotice{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#vmNotice .vmnbox{box-sizing:border-box;width:min(460px,100%);max-height:100%;overflow:auto;background:#121218f2;border:1px solid #ffffff2e;border-radius:18px;box-shadow:0 16px 40px #000c;padding:26px 24px 22px;text-align:center;color:#fff}
#vmNotice .vmntxt{margin:0 0 20px;font-size:17px;line-height:1.45;overflow-wrap:anywhere}
#vmNotice .vmnok{justify-content:center;min-width:110px}

/* z446: same pills as z444 channel tabs for every sub-page bar */
.z446tabs{display:flex;gap:8px;align-items:center;padding:6px 4vw 4px}
.tilehead .z446tabs{padding:0}
.z446tabs button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;height:34px;padding:0 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:transparent;color:#cfd0d8;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.z446tabs button:hover,.z446tabs button:focus-visible{background:rgba(255,255,255,.12);border-color:var(--vmring);color:#fff;outline:none}
.z446tabs button.on{background:var(--accent,#1e3a8a);border-color:var(--accent,#1e3a8a);color:#fff;font-weight:600;box-shadow:0 0 0 1px #1e3a8a,0 0 10px 2px rgba(30,58,138,.75)}
html.tv body .z446tabs button:focus{outline:none;border-color:var(--vmring);background:rgba(255,255,255,.12);color:#fff;box-shadow:0 0 0 2px var(--vmring)}
html.tv body .z446tabs button.on:focus{background:var(--accent,#1e3a8a);box-shadow:0 0 0 2px #fff,0 0 10px 2px rgba(30,58,138,.75)}
.chtile.chlv .tvc3c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:100%} .chtile.chlv .tvc3c .tvn{min-width:0;margin:0;line-height:1;text-align:center} /* z446: number centered above the logo */
/* z447 (JC pt1348u): STANDARD edge for dark tiles (one variable) + poster-stack category tiles */
:root{--vmedge:rgba(255,255,255,.34)}
.tile.dk,a.tile.chtile.chlv,a.tile.ctile:not(.xtimg),a.tile.ctile.pstk{border:1px solid var(--vmedge)}
a.tile.ctile.on,.tile.dk.on{border-color:var(--accent)}
/* /z447 */
/* z447fmt (JC 2026-10-25): per-device audio/video format toggle rows */
.gmenu .fmtlist{display:flex;flex-direction:column;gap:6px;margin:4px 0 14px}
.gmenu .fmtlist .fmtrow{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:48px;padding:8px 14px;border-radius:14px;background:#ffffff0d;border:1px solid #ffffff24;color:#fff;text-align:left;cursor:pointer;font:inherit}
.gmenu .fmtlist .fmtrow:focus-visible,body.kb .gmenu .fmtlist .fmtrow:focus{outline:none;border-color:#fff;box-shadow:0 0 0 2px var(--accent,#1e3a8a)}
.gmenu .fmtl{display:flex;flex-direction:column;gap:2px;min-width:0}
.gmenu .fmtl b{font-size:14.5px;font-weight:600}
.gmenu .fmtl small{font-size:12px;color:#f5c26b;line-height:1.3}
.gmenu .fmtsw{flex:none;position:relative;width:46px;height:26px;border-radius:999px;background:#ffffff2e;transition:background .15s}
.gmenu .fmtsw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.gmenu .fmtrow.on .fmtsw{background:var(--accent,#1e3a8a);box-shadow:0 0 8px 1px rgba(30,58,138,.75)}
.gmenu .fmtrow.on .fmtsw i{left:23px}
.fmtdlg{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);padding:20px}
.fmtdlg .fmtbox{max-width:460px;width:100%;background:#15161c;border:1px solid #ffffff2e;border-radius:18px;padding:22px 22px 18px;color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.fmtdlg h3{margin:0 0 10px;font-size:18px}
.fmtdlg p{margin:0 0 18px;font-size:14.5px;line-height:1.45;color:#d6d7de}
.fmtdlg .fmtacts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.fmtdlg .fmtb{min-height:42px;padding:8px 18px;border-radius:999px;border:1px solid #ffffff40;background:#ffffff12;color:#fff;font:600 14.5px/1 system-ui,sans-serif;cursor:pointer}
.fmtdlg .fmtb.fmtgo{background:var(--accent,#1e3a8a);border-color:var(--accent,#1e3a8a)}
.fmtdlg .fmtb:focus{outline:none;border-color:#fff;box-shadow:0 0 0 2px #fff}
/* z449 (JC pt1376u 3:50 PM ET): hero action buttons (Play, My List, trailer etc.) = STANDARD pill, same as Back / Streaming|Live TV: 40px tall, 14px text, 0 18px padding, full radius, icon+text centred with an 8px gap. Title/episode banners zoom the caption to .667, so the button row is zoomed back to 1. Play = primary (white), others secondary. Undo: delete this block. */
#app .hero.vmb:not(.carousel) .cap>.acts{zoom:1.4993}
#app .hero .acts>.btn,#app .hero .acts>a.btn,html.tv #app .hero .acts>.btn,#app .hero.carousel.vmb .acts>.btn,html.tv #app .hero.carousel.vmb .acts>.btn{box-sizing:border-box;height:40px;min-height:40px;padding:0 18px;border-radius:999px;font-size:14px;line-height:1;gap:8px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;vertical-align:middle}
#app .hero .acts>.btn.pri,html.tv #app .hero .acts>.btn.pri,#app .hero.carousel.vmb .acts>.btn.pri{background:#f2f2f5;color:#0b0b10;border-color:#f2f2f5;font-weight:600}
#app .hero .acts>.btn.pri:hover,#app .hero .acts>.btn.pri:focus{background:#fff;color:#0b0b10}
#app .hero .acts>.btn:not(.pri){font-weight:600;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.3);color:#fff}
#app .hero .acts{align-items:center;gap:10px}
@media (max-width:700px){#app .hero .acts>.btn,#app .hero.carousel.vmb .acts>.btn{height:44px;min-height:44px}}
#app .hero .acts>#playB .pbp{background:#0b0b1033}#app .hero .acts>#playB .pbp i{background:#0b0b10}
/* /z449 */

/* z450 (JC Oct 25 3:42 PM ET, pt1371u): Live TV never shows the seek-preview thumbnail (.vmtrick). Channel switch jumps the video to the live
   point (tvch.js seekLive), which fired the "seeking" preview; its async show() finished after "seeked" and cancelled the hide, so it stuck.
   Live TV has no scrubbing, so it is hidden there. Undo: restore app.css/index.html .bak-pre-z450. */
body.tvch .player .vmtrick { display: none; }
/* z455: z451 spacer removed (it moved the channel number; JC wants number fixed). */
/* z453hc (JC pt1357u Oct 25 3:27 PM ET): hero arrows (prev and next) at the true vertical center of the hero at every width (was top:45% with no offset: low on short heroes, high on tall ones). Poster stays centered (z443), so arrow and poster share one center. Horizontal z442 gaps unchanged. Undo: delete this block. */
#app .hero.carousel .hnav{top:50%;transform:translateY(-50%)}
/* /z453hc */
.seaslink{display:block;color:inherit;text-decoration:none;cursor:pointer;border-radius:12px}.seaslink:focus-visible{outline:2px solid var(--hol,#f97316);outline-offset:4px} /* z454 seasonal header link */

/* z456 (JC pt1374u): ONE standard poster-stack tile (.pstk) = Directors tile geometry. Used by World Movies/Shows, seasonal (Halloween, Christmas...) and any STK tile. All sizes in % of the tile, so every tile size matches. */
:is(a.tile.ctile,a.kwt).pstk{position:relative;overflow:hidden;container-type:size;padding:0;border:1px solid var(--vmedge);background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 70%,#000))}
:is(a.tile.ctile,a.kwt).pstk .pstk-l{position:absolute;clip:auto;clip-path:none;z-index:5;left:7.5%;top:50%;transform:translateY(-50%);width:36%;max-width:36%;height:auto;max-height:none;margin:0;padding:0;flex:none;display:block;overflow:visible;-webkit-line-clamp:unset;white-space:normal;text-wrap:balance;overflow-wrap:normal;word-break:normal;text-align:left;color:#fff;font-weight:800;font-size:15px;font-size:13cqh;line-height:1.12;letter-spacing:0;text-shadow:0 2px 8px rgba(0,0,0,.35)}
:is(a.tile.ctile,a.kwt).pstk .pstk-p{position:absolute;clip:auto;clip-path:none;inset:0;width:auto;height:auto;max-height:none;margin:0;padding:0;display:block;overflow:visible;-webkit-line-clamp:unset}
:is(a.tile.ctile,a.kwt).pstk .pstk-p img{position:absolute;top:8.5%;left:calc(44.5% + var(--i) * 15.6%);width:31.5%;height:auto;aspect-ratio:2/3;object-fit:cover;margin:0;border-radius:11%/7.5%;box-shadow:-6px 8px 22px rgba(0,0,0,.55);z-index:calc(4 - var(--i));transform:rotate(5deg);transform-origin:50% 100%;filter:brightness(calc(1 - var(--i) * .22))}
/* z461: labels/posters were clipped by the xtimg hidden-label rule; label 11cqh = Directors */
/* z466: label 13cqh / 36% wide = Directors cap height */
/* /z456 */
/* z457 (JC Oct 25 4:22 PM ET, option 3): channel number in tile top-left corner; logo card exactly centered in every Live TV channel tile. Undo: restore .bak-pre-z457. */
a.tile.chtile.chlv{position:relative}
.chtile.chlv .tvc3c .tvn{position:absolute;top:9px;left:11px;font-size:12px;line-height:1;color:#cfd0d8;margin:0}
.chtile.chlv .tvc3c .tvera{position:absolute;bottom:7px;left:0;right:0;text-align:center}
html.tv .chtile.chlv .tvc3c .tvn{top:10px;left:12px;font-size:14px}

/* z458: notice Upgrade now (standard pill, primary solid blue, TV ring) + highlights list */
#vmNotice .vmnacts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#vmNotice .vmnhl{margin:-8px auto 20px;padding:0 0 0 20px;text-align:left;font-size:16px;line-height:1.45;max-width:360px}
#vmNotice .vmnhl li{margin:4px 0;overflow-wrap:anywhere}
#vmNotice .btn.vmnup{justify-content:center;min-width:150px;background:#1e3a8a;border-color:#1e3a8a;color:#fff;font-weight:600}
#vmNotice .btn.vmnup:hover,#vmNotice .btn.vmnup:focus-visible{background:#2a4aa8;border-color:var(--vmring);color:#fff;outline:2px solid var(--vmring);outline-offset:2px}
html.tv body #vmNotice .btn.vmnup:focus{background:#2a4aa8;border-color:var(--vmring);outline:2px solid var(--vmring);outline-offset:3px;box-shadow:var(--vmglow)}

/* z459 heroStd (JC pt1379u): ONE hero. Title pages + Live TV use the Home slide markup (.hero.carousel.zhs) so every Home hero rule applies. Live TV = same hero inside a rounded card (.tvprev.zhwrap); Streaming = edge to edge. Undo: restore .bak-pre-z459. */
body .tvprev.zhwrap,html.tv body .tvprev.zhwrap{display:block;min-height:0;padding:0;margin:4px 3vw 14px;border:1px solid var(--vmedge,#ffffff24);border-radius:18px;overflow:hidden;background:none;animation:none}
.tvprev.zhwrap .hero.carousel{margin:0}
#app .hero.zhs .zhpend{visibility:hidden}
#app .hero.zhs .zhnow{display:flex;align-items:center;gap:10px;font-size:15px;color:#fff;min-height:42px}
#app .hero.zhs .zhnow .tvbar{width:clamp(120px,14vw,220px)}
#app .hero.zhs .zhctl{flex-direction:column;align-items:flex-start;gap:4px}
#app .hero.zhs .tvnx,#app .hero.zhs .tvfut{font-size:13px;color:#c9cbd6}
#app .hero.zhs .meta .tvpc img{height:20px;width:auto;margin-right:6px;vertical-align:middle}
/* /z459 */
/* z460 (JC pt1387u 4:25 PM ET, iPhone): Live TV channel list scrolls with a finger on phones/tablets. Cause: every row had a live blur (backdrop-filter) inside the scrolling list; iOS Safari stops scrolling such a list after a tap until the app is reopened. Touch screens get a solid row and a GPU scroll layer. Also the Live TV player no longer shows the gray loading title under the NOW bar. Undo: delete this block. */
@media (pointer:coarse){html:not(.tv) .tvx .tvlb{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;transform:translateZ(0)}html:not(.tv) .tvx .tvlb .tvl{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0d0d13f2;touch-action:pan-y}}
body.tvch .player .z295sh .z295t{display:none}
/* /z460 */
/* z462 fmtgroups: formats-inside line + fixed (always on) Standard row */
.gmenu .fmtl .fmtin{font-size:12px;color:#ffffffa6;line-height:1.3}
.gmenu .fmtlist .fmtrow.fix{cursor:default;opacity:.8}
/* z467 (JC 4:22 PM ET Oct 25): hovered first/last card in ANY horizontal row (posters, seasons, episodes, tiles) grows inward, so its full outline never gets clipped by the scrolling row */
:is(.strip,.seasons)>:first-child{transform-origin:left center}:is(.strip,.seasons)>:last-child{transform-origin:right center}:is(.strip,.seasons)>:only-child{transform-origin:center}
/* z468 phoneCard (JC pt1393u 5:01 PM ET Oct 25): on phones, home, movie, show and Live TV heroes sit inside the same rounded card, so logo, info, description and buttons all stay inside the frame. Volver stays where it is (above the card). TV and Mac untouched. Undo: delete this block. */
@media (max-width:700px){html:not(.tv) #app .hero.carousel{margin:6px 3vw 16px;width:auto;max-width:94vw;box-sizing:border-box;border:1px solid var(--vmedge,#ffffff24);border-radius:18px;overflow:hidden;background:#0d0d13;isolation:isolate}}
@media (max-width:640px){html:not(.tv) .tvx .tvprev.c3{margin:6px 3vw 16px;width:auto;max-width:94vw;box-sizing:border-box;border:1px solid var(--vmedge,#ffffff24);border-radius:18px;overflow:hidden;isolation:isolate}html:not(.tv) .tvx .tvprev.c3 .tvpi{margin:-34px 12px 0;height:224px}}
/* /z468 */
/* z469 (JC pt1395u 5:31 PM ET Oct 25): seasonal page (#/seas/*, every promotion) gets Netflix-style breathing room: header clear of the nav, gap before pills, gap before grid, left edge = rows (4vw) */
.tilehead.seashead{position:relative;top:auto;padding:32px 4vw 6px;border-bottom:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.seashead h1.sh{margin:0;line-height:1.1}.seashead h1.sh .rc{font-size:18px;font-weight:500;color:#9a9aa6;margin-left:4px}
.seashead+.z446tabs{padding:18px 4vw 26px}
.seashead~.grid{padding-top:6px;gap:18px;overflow:visible}
html.tv .tilehead.seashead{padding:44px 4vw 8px}html.tv .seashead+.z446tabs{padding:22px 4vw 32px}html.tv .seashead~.grid{gap:24px;padding-top:10px}
@media (max-width:600px){.tilehead.seashead{padding:20px max(4vw,env(safe-area-inset-left)) 4px}.seashead h1.sh{font-size:24px}.seashead+.z446tabs{padding:14px max(4vw,env(safe-area-inset-left)) 18px}.seashead~.grid{gap:12px}}
/* z470 (JC 5:36 PM ET Oct 25): seasonal page icon + glow clear of the nav line (>=20px), icon centred with title block */
.tilehead.seashead{padding-top:40px}.seashead h1.sh{align-items:center;padding:0}.seashead .sh .ic{margin:0 4px 0 0}.seashead .sh .tx{justify-content:center}
html.tv .tilehead.seashead{padding-top:52px}
@media (max-width:600px){.tilehead.seashead{padding-top:28px}}
/* z471: z469/z470 seasonal spacing lost to #app>.tilehead (fixed sub-bar height, padding 0); seasonal header now sizes to content, same values, ID-level selector */
#app>.tilehead.seashead{height:auto;min-height:0;padding:40px 4vw 4px;background:none;border-bottom:0}
html.tv #app>.tilehead.seashead{padding:52px 4vw 6px}
@media (max-width:600px){#app>.tilehead.seashead{padding:28px max(4vw,env(safe-area-inset-left)) 2px}}
/* z472 nocrop: video always contain + black bars (JC hard rule) */

/* z479 hero legibility A (soft text shadow) + larger hero text, JC pt1421u */
#app .hero h1,#app .hero p,#app .hero .meta,#app .hero .zhnow,#app .hero .tvnx,#app .hero .tvfut,#app .hero .cap a{text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.8)}
#app .hero img.logo{filter:drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 0 18px rgba(0,0,0,.6))}
@media (min-width:701px){html body #app .hero.carousel.vmb .cap p,html body #app .hero.carousel .cap p{font-size:19px;line-height:1.45}
html body #app .hero.carousel.vmb .meta,html body #app .hero.carousel .meta{font-size:17px}
html body #app .hero.zhs .zhnow{font-size:17px}
html body #app .hero.zhs .tvnx,html body #app .hero.zhs .tvfut{font-size:14.5px}
html body #app .hero.carousel.vmb .cap img.logo{max-height:calc(var(--vmbH) * .3);max-width:min(430px,36vw)}
html.tv body #app .hero.carousel.vmb .cap img.logo{max-height:66px}}
@media (max-width:700px){html body #app .hero.carousel .cap p,html body #app .hero.carousel p{font-size:14px}
html body #app .hero.carousel .meta{font-size:13px}
html body #app .hero.carousel .cap img.logo{max-height:58px;max-width:56vw}}

/* z486 (JC pt1426u): seasonal header no longer a link; award/festival Home rows */
.seaslink.z486h{cursor:default}
.row.z486aw h2.z486t{display:flex;align-items:center;gap:10px}
.row.z486aw h2.z486t .awi{flex:none;width:22px;height:22px}
.row.z486aw h2.z486t small{display:block;margin-top:2px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#c9a961}
html.tv .row.z486aw h2.z486t small{font-size:15px}
.row.z486aw .card.miss .pw img{filter:grayscale(.5) brightness(.5)}
.row.z486aw .card.miss:hover .pw img,.row.z486aw .card.miss:focus-within .pw img{filter:grayscale(.2) brightness(.75)}
/* /z486 */

/* z492 vmreq: beta request answers in search */
.gs-rq h2{display:flex;align-items:center;gap:12px}
.rqmine{font:inherit;font-size:13px;padding:5px 12px;border-radius:16px;border:1px solid #555;background:#222;color:#eee;cursor:pointer}
.rql{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;padding:0}
.rqi{min-width:0;display:flex;align-items:center;gap:12px;background:#1a1a1a;border-radius:8px;padding:8px}
.rqp{flex:0 0 54px;height:80px;border-radius:4px;overflow:hidden;background:#2a2a2a}
.rqp img{width:100%;height:100%;object-fit:cover}
.rqt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:14px}
.rqt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rqt small{color:#999}
.rqs{font-size:13px;color:#aaa}
.rq-own .rqs{color:#6fd08c}
.rq-svc .rqs{color:#b9a3ff}
.rqb{flex:0 0 auto;font:inherit;font-size:14px;padding:8px 14px;border-radius:6px;border:0;background:#e50914;color:#fff;cursor:pointer;text-decoration:none}
.rq-own .rqb{background:#fff;color:#000}
.rqb.done,.rqb:disabled{background:#444;color:#ddd;cursor:default}
.rqb:focus-visible,.rqmine:focus-visible{outline:3px solid #fff;outline-offset:2px}
#rqDlg{position:fixed;inset:0;z-index:200;padding:16px;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}
#rqDlg .rqc{width:min(520px,100%);max-height:80vh;overflow:auto;background:#15151c;border:1px solid #ffffff1f;border-radius:14px;padding:18px;color:#f2f2f5}
#rqDlg h2{margin:0 0 12px;font-size:17px;font-weight:600}
.rqmi{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:8px 0;border-bottom:1px solid #333}
.rqmi .rqs{margin-left:auto}
.rqx{margin-top:12px}
@media (max-width:640px){.rql{grid-template-columns:minmax(0,1fr)}.gs-rq{max-width:100%;overflow:hidden}}
/* z492 end */

/* z495 (JC 2026-10-27 1:31 PM ET): sharp Play icon + hero description always full, no More/Less. Undo: restore app.css.bak-pre-z495 */
.btn svg.z495p{display:inline-block;width:.95em;height:.95em;margin-right:.45em;vertical-align:-.1em;shape-rendering:geometricPrecision}
#app .hero .cap > p,#app .hero .cap.z443x > p,html.tv #app .hero .cap > p,#app .hero.carousel.vmb .cap p,html.tv #app .hero.carousel.vmb .cap p{-webkit-line-clamp:unset!important;line-clamp:unset!important;display:block!important;max-height:none!important;overflow:visible!important}
#app .hero .z443m,html.tv #app .hero .z443m{display:none!important}
/* z496 (JC 2026-10-27 1:32 PM ET): hero buttons crisp - no dark text-shadow (from the hero text rule) and no blur layer behind the solid Play pill. Undo: restore app.css.bak-pre-z496 */
#app .hero .acts .btn,#app .hero .acts a.btn,#app .hero .cap a.btn,html.tv #app .hero .acts .btn{text-shadow:none!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#app .hero .acts .btn.pri,html.tv #app .hero .acts .btn.pri{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* z503swipe (JC 2026-10-28): phones swipe the hero sideways; browser keeps vertical scroll, quick fade while swiping */
.hero.carousel:not(.zhs){touch-action:pan-y}
.hero.carousel.z503s .slide{transition-duration:.35s}
/* z504edge (JC 2026-10-28): phones - Playback button and avatar sat 10px from the screen edge; top bar now 16px each side plus the iPhone safe area. Undo: restore app.css.bak-pre-z504edge */
@media (max-width:600px){header#top{padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}}