/* Hels TV: one dark liquid-glass world (same family as Picks). TV-first: big type, one main button, white focus ring for the remote. */
:root{
  color-scheme:dark;
  --ink:#06070a; --fg:#f5f6f8; --dim:rgba(235,238,245,.66); --faint:rgba(235,238,245,.38);
  --glass:rgba(255,255,255,.08); --glass-hi:rgba(255,255,255,.16); --edge:rgba(255,255,255,.16);
  --accent:#ff375f;
  --f:-apple-system,"SF Pro Display",BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  --pad:3rem;
}
/* 1280px wide = 16px; a 1920 TV = 24px, so the whole layout scales like the mockup */
html{font-size:calc(100vw / 80)}
@media (max-width:899px){html{font-size:16px}:root{--pad:18px}}
*{box-sizing:border-box;margin:0}
html,body{background:var(--ink);color:var(--fg);font-family:var(--f);-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
img{display:block}
.hide{display:none!important}
.dim{color:var(--dim)}

/* glass */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 .9rem 2.1rem rgba(0,0,0,.35)}

/* focus: ring only when the remote / keyboard is used */
.f{outline:none;transition:transform .18s ease,box-shadow .18s ease}
.kbd .f:focus{box-shadow:0 0 0 .25rem var(--ink),0 0 0 .44rem #fff,0 1.1rem 2.5rem rgba(0,0,0,.55);transform:scale(1.06);z-index:3}
.kbd .nav .f:focus,.kbd .seg .f:focus{transform:none}
body:not(.kbd) .f:focus-visible{box-shadow:0 0 0 2px #fff}
.kbd .still:focus,.kbd .poster:focus{transform:scale(1.09)}

/* backdrop */
.bd{position:absolute;top:0;right:0;bottom:0;left:0;background:#111 center/cover no-repeat;transition:opacity .6s}
.bd.fade::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:
  linear-gradient(90deg,var(--ink) 0%,rgba(6,7,10,.86) 30%,rgba(6,7,10,.25) 62%,rgba(6,7,10,.1)),
  linear-gradient(0deg,var(--ink) 4%,rgba(6,7,10,.6) 34%,rgba(6,7,10,0) 60%)}

/* top bar (wide) */
.top{position:absolute;left:var(--pad);right:var(--pad);top:1.6rem;display:flex;align-items:center;justify-content:space-between;z-index:20}
.top .side{flex:1;display:flex}.top .side.r{justify-content:flex-end}
.logo{font-weight:900;font-size:1.375rem;letter-spacing:-.03em}.logo i{font-style:normal;color:var(--accent)}
.nav{display:flex;gap:.2rem;padding:.3rem;border-radius:999px;background:rgba(60,60,67,.42)}
.nav .f{padding:.56rem 1.25rem;border-radius:999px;font-size:.94rem;font-weight:600;color:rgba(255,255,255,.78);display:flex;align-items:center}
.nav .f.on{background:#fff;color:#000}
.nav .sr{padding:.56rem 1rem}.nav .sr svg{width:1.1rem;height:1.1rem}
.icons{display:flex;gap:.6rem;align-items:center}
.ib{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center}
.ib svg{width:1.2rem;height:1.2rem}
.av{width:2.6rem;height:2.6rem;border-radius:50%;background:linear-gradient(135deg,#ff9f0a,#ff375f);display:grid;place-items:center;font-weight:800;font-size:.95rem}

/* hero */
/* home: one screen = big picture + one button + Continue Watching peeking at the bottom */
.hero-zone{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:6rem 0 1.5rem}
.hero-zone .bd{bottom:auto;height:100vh}
.hero-zone .hero{margin-bottom:2.4rem}
.hero-zone .syn{-webkit-line-clamp:2}
.hero-zone .row{position:relative;z-index:5;margin-bottom:0}
.hero{position:relative;padding:0 var(--pad);max-width:calc(33rem + 2*var(--pad));z-index:4}
.chip{display:inline-flex;gap:.5rem;align-items:center;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.chip b{background:var(--accent);color:#fff;padding:.2rem .5rem;border-radius:.375rem;letter-spacing:.06em}
.title{font-size:4.75rem;font-weight:900;letter-spacing:-.05em;line-height:.92;margin:.9rem 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:.08em}
.title.long{font-size:3.4rem}
.title-logo{max-width:26rem;max-height:9rem;object-fit:contain;object-position:left bottom;margin:1rem 0}
.meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;color:var(--dim);font-size:.95rem;font-weight:500}
.meta .q{border:1px solid var(--faint);border-radius:.3rem;padding:.06rem .375rem;font-size:.75rem;font-weight:700;color:var(--fg)}
.syn{color:var(--dim);font-size:1rem;line-height:1.45;margin:.9rem 0 1.5rem;max-width:30rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.btns{display:flex;gap:.75rem;align-items:center}
/* buttons like Netflix: soft rounded rectangles, semibold text, big solid icon */
.play,.sec{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;height:3.4rem;padding:0 2.2rem 0 1.8rem;border-radius:.4rem;font-weight:600;font-size:1.25rem;letter-spacing:-.01em;white-space:nowrap}
.play{background:#fff;color:#000}
.play svg{width:1.6rem;height:1.6rem}
.sec{background:rgba(109,109,110,.7);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sec svg{width:1.5rem;height:1.5rem}
.sec.on{background:rgba(255,255,255,.22)}
.btns{flex-wrap:wrap}
.lft{flex-basis:100%;display:flex;align-items:center;gap:.8rem;margin:1rem 0 0;color:var(--dim);font-size:.9rem;font-weight:500}
.lft i{display:block;width:9rem;height:.2rem;border-radius:1rem;background:rgba(255,255,255,.28);overflow:hidden}
.lft b{display:block;height:100%;background:#e50914}
.round{width:3.5rem;height:3.5rem;border-radius:50%;display:grid;place-items:center}
.round svg{width:1.4rem;height:1.4rem}
.round.on{background:rgba(255,255,255,.9);color:#000}

/* rows */
.rows{position:relative;z-index:5;padding:2.2rem 0 4rem}
.row{margin-bottom:2rem}
.rowlab{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;margin:0 var(--pad) .75rem}
.rail{display:flex;gap:1rem;overflow-x:auto;overflow-y:visible;padding:.7rem var(--pad);margin:-.7rem 0;scrollbar-width:none;scroll-behavior:smooth}
.rail::-webkit-scrollbar{display:none}
.still{position:relative;flex:none;width:14.5rem;aspect-ratio:16/9;border-radius:.75rem;overflow:hidden;background:#1a1b20 center/cover no-repeat;text-align:left}
.still::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.75))}
.still.art::after{background:linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.45))}
.still .t{position:absolute;left:.75rem;bottom:.9rem;right:.75rem;z-index:2;font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.still .t small{display:block;font-weight:500;font-size:.75rem;color:var(--dim)}
.bar{position:absolute;left:.75rem;right:.75rem;bottom:.45rem;height:3px;border-radius:2px;background:rgba(255,255,255,.25);z-index:2}
.bar i{display:block;height:100%;border-radius:2px;background:#fff}
@media (hover:hover) and (pointer:fine){
  .still,.poster,.play,.sec{transition:transform .18s ease,box-shadow .18s ease}
  .still:hover,.poster:hover{transform:scale(1.04);box-shadow:0 1rem 2rem rgba(0,0,0,.55)}
  .play:hover{transform:scale(1.03)}
  .nav .f:not(.on):hover,.az .f:hover{background:rgba(255,255,255,.14)}
}
.poster{position:relative;flex:none;width:9.4rem;aspect-ratio:2/3;border-radius:.75rem;overflow:hidden;background:#1a1b20 center/cover no-repeat;text-align:left}
.poster .nm{position:absolute;left:.6rem;right:.6rem;bottom:.7rem;font-weight:800;font-size:1rem;line-height:1.05}
.poster.noimg{background:linear-gradient(160deg,#2a1730,#0d1a2b)}
.poster .tick,.still .tick{position:absolute;top:.5rem;right:.5rem;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;font-size:.8rem;z-index:2}

/* library grid */
.page{padding:7rem var(--pad) 5rem;position:relative;z-index:2}
.page h1{font-size:2.6rem;font-weight:900;letter-spacing:-.04em;margin-bottom:1rem}
.page h1 small{font-size:.45em;font-weight:600;color:var(--faint);letter-spacing:0;vertical-align:middle}
/* A–Z: letter headings + jump bar on the right (like Plex) */
.page.withaz{padding-right:calc(var(--pad) + 2.4rem)}
.poster.flash{box-shadow:0 0 0 .2rem #fff,0 1rem 2rem rgba(0,0,0,.6)}
.az{position:fixed;right:.9rem;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;padding:.35rem .2rem;border-radius:999px}
.az .f,.az span{display:block;width:1.7rem;height:1.42rem;line-height:1.42rem;text-align:center;font-size:.72rem;font-weight:700;border-radius:.5rem}
.az span{color:var(--faint);opacity:.45}
.kbd .az .f:focus{transform:scale(1.3);background:#fff;color:#000;box-shadow:none}
.seg{display:flex;gap:.3rem;padding:.3rem;border-radius:999px;width:max-content;margin:0 0 1.4rem}
.seg .f{padding:.5rem 1.1rem;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--dim)}
.seg .f.on{background:var(--glass-hi);color:var(--fg)}
.lrow{display:flex;align-items:center;flex-wrap:wrap;margin:0 0 1.4rem}
.lrow .seg{margin:0 1rem 0 0}
.scan{display:flex;align-items:center;padding:.5rem 1rem;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--dim);background:var(--glass)}
.scan svg{width:1.05rem;height:1.05rem;margin-right:.5rem;flex:none}
.scan:hover{color:var(--fg)}
.scan.busy{color:var(--fg)}.scan.busy svg{animation:sp 1s linear infinite}
.tv .scan{background:rgba(58,58,62,.88)}
.tv .kbd .scan:focus{box-shadow:none;background:#fff;color:#000;transform:scale(1.06)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.4rem,1fr));gap:1.4rem 1rem}
.grid .poster{width:auto}
.empty{color:var(--dim);font-size:1.05rem;line-height:1.5;max-width:34rem;padding:2rem 0}
.aura{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0;pointer-events:none}
.aura i{position:absolute;width:40rem;height:40rem;border-radius:50%;filter:blur(80px);opacity:.3}
.aura::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(6,7,10,.2),var(--ink) 70%)}

/* detail */
/* detail page: one full screen like Netflix / Apple TV, then Cast & Crew and About below */
.detail-zone{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:6rem 0 1.5rem}
.detail-zone .bd{bottom:auto;height:100vh}
.detail-zone .hero{position:relative;padding:0 var(--pad);width:auto;max-width:calc(40rem + 2*var(--pad));margin-bottom:2.2rem;z-index:4}
.detail-zone>.row{position:relative;z-index:5;margin-bottom:0}
.tagline{font-size:1.05rem;font-style:italic;color:var(--dim);margin:-.3rem 0 .8rem}
.score{font-weight:600;color:var(--fg);display:inline-flex;align-items:center}
.tomato{display:inline-block;width:.85rem;height:.85rem;border-radius:50%;background:#fa320a;margin-right:.35rem}
.credits{font-size:.9rem;color:var(--fg);line-height:1.6;margin:-.6rem 0 1.4rem;max-width:34rem}
.credits div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.credits span{color:var(--faint);margin-right:.35rem}
.person{flex:none;width:8.6rem;text-align:center;border-radius:.8rem;padding:.3rem 0}
.person .ph{display:flex;align-items:center;justify-content:center;width:7.4rem;height:7.4rem;margin:0 auto .65rem;border-radius:50%;background:#22232a center/cover no-repeat;font-weight:800;font-size:1.7rem;color:var(--dim);transition:transform .15s ease}
.person b{display:block;font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person small{display:block;font-size:.76rem;color:var(--dim);margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbd .person:focus{box-shadow:none;transform:none}
.kbd .person:focus .ph{transform:scale(1.08);box-shadow:0 0 0 .22rem var(--ink),0 0 0 .42rem #fff}
@media (hover:hover) and (pointer:fine){.person:hover .ph{transform:scale(1.05)}}
.about{margin:1.2rem var(--pad) 0;padding:2rem 0 0;border-top:1px solid rgba(255,255,255,.1);outline:none}
.kbd .about:focus{box-shadow:none;transform:none}
.about h3{font-size:1.2rem;font-weight:700;margin-bottom:.7rem}
.about .full{color:var(--dim);max-width:52rem;line-height:1.6;font-size:1rem;margin-bottom:2rem}
.about .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:2rem}
.about h4{font-size:.95rem;font-weight:700;margin-bottom:.9rem}
.about dl div{margin-bottom:.85rem}
.about dt{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.about dd{margin:.2rem 0 0;font-size:.95rem}
.phead{display:flex;align-items:center;margin-bottom:2rem}
.phead .ph{flex:none;display:flex;align-items:center;justify-content:center;width:7rem;height:7rem;border-radius:50%;margin-right:1.4rem;background:#22232a center/cover no-repeat;font-weight:800;font-size:1.8rem;color:var(--dim)}
.phead h1{margin-bottom:.2rem}
.below{position:relative;z-index:4;padding:0 0 .5rem}
.below .seg{margin-left:var(--pad)}
.ep{flex:none;width:15.6rem;text-align:left}
.ep .still{width:100%}
.ep h4{font-size:.95rem;font-weight:700;margin:.6rem 0 .2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep p{font-size:.8rem;color:var(--dim)}

/* search */
.sbox{display:flex;align-items:center;gap:.7rem;height:3.4rem;border-radius:999px;padding:0 1.2rem;margin-bottom:1.6rem;max-width:36rem}
.sbox svg{width:1.2rem;height:1.2rem;opacity:.7;flex:none}
.sbox input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:1.1rem}

/* login */
.login{position:relative;min-height:100vh;display:grid;place-items:center;padding:24px}
.card{position:relative;z-index:2;width:30rem;max-width:100%;border-radius:1.75rem;padding:2.2rem;text-align:center}
.card .logo{font-size:2rem;margin-bottom:1rem}
.card p{color:var(--dim);line-height:1.5;font-size:1rem}
.code{font-size:3.6rem;font-weight:900;letter-spacing:.12em;margin:1rem 0 .4rem;font-variant-numeric:tabular-nums}
.card .link{margin-top:1.6rem;color:var(--dim);font-size:.9rem;padding:.5rem 1rem;border-radius:999px}
.card input{display:block;width:100%;height:3.2rem;border-radius:.9rem;border:1px solid var(--edge);background:rgba(255,255,255,.06);padding:0 1rem;margin:.6rem 0;font-size:1rem;outline:none}
.card .play{width:100%;justify-content:center;margin-top:.8rem}
.err{color:#ffd60a;margin-top:.8rem;font-size:.9rem;min-height:1.2em}

/* player — like Apple's TV app player */
html.playing,html.playing body{overflow:hidden}
.player{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;z-index:100;color:#fff;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* the video box hugs the picture, so subtitles sit on the picture (not at the bottom of a tall phone screen) */
.player video{position:absolute;top:50%;left:0;width:100%;height:auto;max-height:100%;transform:translateY(-50%);background:#000}
.player.fill video{top:0;height:100%;max-height:none;transform:none}
/* subtitles like the Apple TV app: white text, soft shadow, no black box */
.player video::cue{background:transparent;color:#fff;font-family:var(--f);font-weight:600;line-height:1.3;text-shadow:0 0 2px #000,0 0 2px #000,0 0 4px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.55)} /* readable on white AND dark scenes */
.pl-tap{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}
.pl-ui{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;transition:opacity .3s ease}
.pl-ui button,.pl-ui .pl-bar,.pl-ui input{pointer-events:auto}
.player.idle .pl-ui{opacity:0}.player.idle .pl-ui *{pointer-events:none}.player.idle{cursor:none}
.pl-shade{position:absolute;left:0;right:0;pointer-events:none}
.pl-shade.t{top:0;height:10rem;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0))}
.pl-shade.b{bottom:0;height:17rem;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0))}
.pl-top{position:absolute;top:calc(env(safe-area-inset-top) + 1.4rem);left:calc(env(safe-area-inset-left) + var(--pad));right:calc(env(safe-area-inset-right) + var(--pad));display:flex;align-items:center}
.pl-sp{flex:1}
.pl-btn{width:2.9rem;height:2.9rem;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:.7rem;background:rgba(58,58,62,.62);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);transition:transform .15s ease,background .15s ease}
.pl-top>.pl-btn:first-child{margin-left:0}
.pl-btn svg{width:1.3rem;height:1.3rem}
.pl-vol{display:flex;align-items:center;margin-left:.7rem}
.pl-vol .pl-btn{margin-left:0}
.pl-vol input{width:6.5rem;margin:0 0 0 .6rem;accent-color:#fff;cursor:pointer}
.pl-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center}
.pl-skip{width:4.6rem;height:4.6rem;margin:0 2.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease}
.pl-skip svg{width:2.8rem;height:2.8rem}
.pl-pp{width:5.8rem;height:5.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease}
.pl-pp svg{width:3.4rem;height:3.4rem}
.pl-mid{text-shadow:none}
.pl-btn:active,.pl-skip:active,.pl-pp:active{transform:scale(.86)}
.pl-bot{position:absolute;left:calc(env(safe-area-inset-left) + var(--pad));right:calc(env(safe-area-inset-right) + var(--pad));bottom:calc(env(safe-area-inset-bottom) + 1.6rem)}
.pl-title b{display:block;font-size:1.3rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-title span{display:block;font-size:.9rem;color:rgba(255,255,255,.7);margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-bar{position:relative;height:2.4rem;margin-top:.4rem;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.pl-track{position:relative;width:100%;height:.36rem;border-radius:1rem;background:rgba(255,255,255,.28);overflow:hidden;transition:height .18s ease}
.pl-track i{position:absolute;left:0;top:0;bottom:0;display:block;width:0}
.pl-track .buf{background:rgba(255,255,255,.28)}
.pl-track .pos{background:#fff}
.player.drag .pl-track,.kbd .pl-bar:focus .pl-track{height:.9rem}
.kbd .pl-bar:focus{box-shadow:none;transform:none}
.pl-bub{position:absolute;bottom:2.5rem;left:0;transform:translateX(-50%);padding:.35rem .75rem;border-radius:.6rem;background:rgba(44,44,48,.92);font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transition:opacity .15s ease;pointer-events:none}
.player.drag .pl-bub{opacity:1}
.pl-times{display:flex;justify-content:space-between;margin-top:.1rem;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .pl-bar:hover .pl-track{height:.6rem}
  .pl-btn:hover{background:rgba(96,96,102,.78)}
  .pl-skip:hover,.pl-pp:hover{background:rgba(255,255,255,.12)}
}
.pl-rip{position:absolute;top:0;bottom:0;width:38%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none}
.pl-rip.l{left:0;background:radial-gradient(120% 75% at 0% 50%,rgba(255,255,255,.2),rgba(255,255,255,0) 70%)}
.pl-rip.r{right:0;background:radial-gradient(120% 75% at 100% 50%,rgba(255,255,255,.2),rgba(255,255,255,0) 70%)}
.pl-rip svg{width:3rem;height:3rem}
.pl-rip b{margin-top:.5rem;font-size:.85rem;font-weight:600}
.pl-rip.go{animation:rip .75s ease-out}
@keyframes rip{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.pl-sheet{position:absolute;z-index:6;top:calc(env(safe-area-inset-top) + 5.2rem);right:calc(env(safe-area-inset-right) + var(--pad));width:19rem;max-height:calc(100% - 7.5rem);overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:1rem;padding:.3rem 0 .6rem;background:rgba(38,38,42,.92);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 1.2rem 3rem rgba(0,0,0,.5)}
.pl-sheet h5{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);padding:.9rem 1.1rem .35rem}
.pl-sheet button{display:flex;align-items:center;width:100%;padding:.68rem 1.1rem;font-size:1rem;text-align:left}
.pl-sheet .ck{width:1.6rem;flex:none;display:inline-flex}
.pl-sheet .ck svg{width:1.05rem;height:1.05rem}
.kbd .pl-sheet .f:focus{transform:none;box-shadow:none;background:rgba(255,255,255,.16)}
@media (hover:hover){.pl-sheet button:hover{background:rgba(255,255,255,.08)}}
.player.menu .pl-tap{z-index:5}
.pl-err{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);width:27rem;max-width:90%;text-align:center;padding:2rem 1.6rem;border-radius:1.4rem;background:rgba(30,30,34,.96)}
.pl-err h3{font-size:1.3rem;margin-bottom:.5rem}
.pl-err p{color:var(--dim);margin-bottom:1.4rem;line-height:1.45;font-size:.95rem}
.pl-err div{display:flex;justify-content:center}
.pl-err .sec{margin-left:.8rem}
.pill{position:absolute;z-index:4;right:calc(env(safe-area-inset-right) + var(--pad));bottom:calc(env(safe-area-inset-bottom) + 10rem);height:3rem;padding:0 1.4rem;border-radius:.6rem;display:flex;align-items:center;font-weight:600;font-size:1rem;background:rgba(255,255,255,.94);color:#000;transition:bottom .3s ease}
.pill svg{margin-left:.5rem}
.player.idle .pill{bottom:calc(env(safe-area-inset-bottom) + 2rem)}
.spin{position:absolute;z-index:3;left:50%;top:50%;width:3.2rem;height:3.2rem;margin:-1.6rem;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:#fff;animation:sp .8s linear infinite;pointer-events:none}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);z-index:200;padding:.8rem 1.4rem;border-radius:999px;font-size:.95rem}

/* phone */
.dock{display:none}
@media (max-width:899px){
  .top .nav{display:none}
  .top{top:calc(env(safe-area-inset-top) + 12px)}
  .hero-zone{display:block;min-height:0;padding:54vh 0 0}
  .hero-zone .bd{height:72vh;bottom:auto;background-position:72% center}
  .hero-zone .bd.fade::after{background:linear-gradient(180deg,rgba(6,7,10,0) 38%,rgba(6,7,10,.7) 70%,var(--ink) 99%)}
  .hero{padding:0 var(--pad);width:100%;max-width:none;text-align:center}
  .hero-zone .hero{margin-bottom:26px}
  .hero .syn{display:none}
  .title{font-size:2.6rem}.title.long{font-size:2rem}
  .title-logo{max-width:78%;max-height:96px;margin:0 auto 12px;object-position:center bottom}
  .meta{justify-content:center}
  .btns{justify-content:center}
  .hero .play,.hero .sec{flex:1;height:46px;font-size:16px;padding:0 14px;gap:8px;border-radius:6px}
  .hero .play svg{width:20px;height:20px}.hero .sec svg{width:18px;height:18px}
  .hero .btns{margin-top:16px}
  .lft{justify-content:center;font-size:13px;margin-top:12px}.lft i{width:110px;height:3px}
  .rows{padding:22px 0 110px}
  .page.withaz{padding-right:34px}
  .az{right:3px;padding:4px 1px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .az .f,.az span{width:24px;height:17px;line-height:17px;font-size:10.5px;color:var(--accent)}
  .az span{color:var(--faint)}
  .rowlab{font-size:17px}
  .still{width:200px}.poster{width:118px}.ep{width:220px}
  .page{padding:70px var(--pad) 110px}
  .page h1{font-size:34px}
  .grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .detail-zone{display:block;min-height:0;padding:50vh 0 0}
  .detail-zone .bd{height:70vh;background-position:68% center}
  .detail-zone .bd.fade::after{background:linear-gradient(180deg,rgba(6,7,10,0) 35%,rgba(6,7,10,.75) 68%,var(--ink) 99%)}
  .detail-zone .hero{margin-bottom:22px}
  .detail-zone .syn{display:-webkit-box;-webkit-line-clamp:3;text-align:left;margin:12px 0 0;font-size:14.5px}
  .tagline{font-size:14px;margin:-4px 0 8px}
  .credits{text-align:left;font-size:13px;margin:10px 0 0}
  .person{width:96px}.person .ph{width:84px;height:84px;font-size:22px}.person b{font-size:12.5px}.person small{font-size:11px}
  .about{margin:12px var(--pad) 0;padding-top:22px}
  .about .full{font-size:14.5px}
  .about .cols{grid-template-columns:1fr 1fr;grid-gap:18px}
  .about dd{font-size:14px}
  .phead .ph{width:76px;height:76px;margin-right:14px;font-size:22px}
  .below{padding-bottom:6px}
  .rows .row:last-child,.about{margin-bottom:0}
  .rows{padding-bottom:120px}
  .pl-top{top:calc(env(safe-area-inset-top) + 12px);left:calc(env(safe-area-inset-left) + 16px);right:calc(env(safe-area-inset-right) + 16px)}
  .pl-btn{width:40px;height:40px;margin-left:10px}.pl-btn svg{width:19px;height:19px}
  .pl-skip{width:58px;height:58px;margin:0 26px}.pl-skip svg{width:38px;height:38px}
  .pl-pp{width:76px;height:76px}.pl-pp svg{width:46px;height:46px}
  .pl-bot{left:calc(env(safe-area-inset-left) + 16px);right:calc(env(safe-area-inset-right) + 16px);bottom:calc(env(safe-area-inset-bottom) + 12px)}
  .pl-title b{font-size:16px}.pl-title span{font-size:12.5px}
  .pl-bar{height:34px;margin-top:4px}.pl-track{height:5px}.player.drag .pl-track{height:12px}
  .pl-bub{bottom:36px;font-size:15px}
  .pl-times{font-size:12px}
  .pl-sheet{left:8px;right:8px;top:auto;bottom:calc(env(safe-area-inset-bottom) + 8px);width:auto;max-height:72%;border-radius:18px}
  .pl-sheet button{padding:12px 18px;font-size:16px}.pl-sheet h5{padding:14px 18px 6px;font-size:12px}
  .pill{right:16px;bottom:calc(env(safe-area-inset-bottom) + 120px);height:40px;font-size:14px;padding:0 16px}
  .pl-rip svg{width:36px;height:36px}.pl-rip b{font-size:12px}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:7px 6px calc(env(safe-area-inset-bottom) + 6px);
    background:rgba(16,16,20,.84);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-top:1px solid rgba(255,255,255,.08)}
  .dock .f{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px 0;color:rgba(235,238,245,.45);font-size:10.5px;font-weight:600}
  .dock .f.on{color:#fff}
  .dock svg{width:25px;height:25px}
}

/* ===== TV mode (Samsung TV): speed first. No blur, no blurred shadows, only transform animates. ===== */
.btns{gap:1.1rem}
.tv *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.tv .aura{display:none}
.tv .glass{background:rgba(38,40,46,.94);box-shadow:none;border-color:rgba(255,255,255,.12)}
.tv .nav{background:rgba(38,40,46,.94)}
.tv .sec{background:rgba(90,90,92,.92)}
.tv .sec.on{background:rgba(130,130,132,.92)}
.tv .f{transition:transform .12s ease-out}
.tv .still,.tv .poster{will-change:transform}
.tv .kbd .f:focus{box-shadow:0 0 0 .22rem #fff}
.tv .kbd .seg .f:focus{box-shadow:inset 0 0 0 .16rem #fff}
/* TV top menu = Apple TV style (he picked it 2026-11-12, replaces Netflix B): solid dark pill bar, current page = grey pill,
   focused = white pill with black words that grows a little. Weight never changes, so the words never shift;
   only transform + colour change (cheap on the TV, no blur). */
.tv .nav{background:rgba(38,40,46,.94);border:0}
.tv .nav .f{font-size:1rem;color:rgba(255,255,255,.8);font-weight:600;position:relative}
.tv .nav .f.on{background:rgba(255,255,255,.2);color:#fff}
.tv .kbd .nav .f:focus{box-shadow:none;background:#fff;color:#000;transform:scale(1.12);z-index:1}
.tv .kbd .play:focus{box-shadow:0 0 0 .22rem rgba(255,255,255,.55)}
.tv .still:hover,.tv .poster:hover{transform:none;box-shadow:none}
.tv .bd{transition:none}
.tv .pl-btn{background:rgba(58,58,62,.88)}
.tv .pl-btn svg,.tv .pl-skip svg,.tv .pl-pp svg{display:block;margin:auto} /* centre icons even where <button> ignores flex (old TV browser) */
.tv .pl-sheet{background:rgba(38,38,42,.97)}


/* ===== Old TV browser (Samsung 2021 = Chromium 76): no flex "gap", no aspect-ratio, no inset.
   Give it explicit sizes + margins so the layout is identical there. ===== */
.tv .still{height:8.16rem}
.tv .ep .still{height:8.78rem}
.tv .poster{height:14.1rem}
.tv .grid .poster{height:0;padding-top:150%}
.tv .nav>*+*{margin-left:.2rem}
.tv .icons>*+*{margin-left:.6rem}
.tv .meta .q,.tv .meta .score{margin-left:.6rem}
.tv .btns>*+*{margin-left:1.1rem}
.tv .btns>.lft{margin-left:0}
.tv .play>svg,.tv .sec>svg{margin-right:.75rem}
.tv .lft>i{margin-right:.8rem}
.tv .rail>*+*{margin-left:1rem}
.tv .seg>*+*{margin-left:.3rem}
.tv .sbox>svg{margin-right:.7rem}
.tv .chip b{margin-right:.5rem}

.tv .person .ph{will-change:transform}


/* pull-to-refresh */
.ptr{position:fixed;z-index:60;top:calc(env(safe-area-inset-top) + 6px);left:50%;width:36px;height:36px;border-radius:50%;background:rgba(44,44,48,.92);display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(-50%,0);pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.ptr i{width:16px;height:16px;border-radius:50%;border:2.4px solid rgba(255,255,255,.28);border-top-color:#fff}
.ptr.ready i{border-color:#fff}
.ptr.busy{opacity:1!important;transition:transform .2s ease}
.ptr.busy i{border-color:rgba(255,255,255,.28);border-top-color:#fff;animation:sp .8s linear infinite}

/* player v2 — Apple layout: ✕ PiP ⤢ top-left · AirPlay/volume top-right · title with 💬 and ⋯ above the bar */
.pl-row{display:flex;align-items:flex-end}
.pl-row .pl-title{flex:1;min-width:0}
.pl-row .pl-btn{margin-left:.7rem}
.pl-top .pl-vol{margin-left:.7rem}
.pl-sheet{top:auto;bottom:calc(env(safe-area-inset-bottom) + 9.2rem)}
.pl-none{padding:.5rem 1.1rem .8rem;color:var(--dim);font-size:.95rem}
.player.fill video{object-fit:cover}
.player.rot{right:auto;bottom:auto;transform-origin:top left;transform:rotate(90deg) translateY(-100%)}
@media (max-width:899px){
  .pl-row .pl-btn{margin-left:10px}
  .pl-sheet{top:auto;bottom:calc(env(safe-area-inset-bottom) + 8px)}
  .player.rot .pl-sheet{left:auto;right:16px;width:340px;max-height:80%;bottom:12px}
  .player.rot .pl-top{top:14px;left:20px;right:20px}
  .player.rot .pl-bot{left:20px;right:20px;bottom:12px}
}
.pl-sheet .dl{align-items:flex-start}
.pl-sheet .dln{min-width:0;flex:1;font-size:.92rem;line-height:1.3;word-break:break-word}
.pl-sheet .dln small{display:block;color:var(--dim);font-size:.78rem;margin-top:.15rem}
.pl-sheet .ck svg{width:1.05rem;height:1.05rem}
.pl-shift{display:flex;flex-wrap:wrap;padding:.2rem .9rem .5rem}
.pl-sheet .pl-shift button{width:auto;flex:1;justify-content:center;margin:.2rem;padding:.6rem .5rem;border-radius:.6rem;background:rgba(255,255,255,.1);font-size:.92rem;font-weight:600}
.pl-sheet .pl-none b{color:#fff;font-weight:600}
.pl-now{display:inline-block;margin-top:.45rem;color:#fff;font-weight:600}

/* genre row + rating badge (Movies / Series) */
.genres{display:flex;overflow-x:auto;scrollbar-width:none;margin:-.4rem calc(-1 * var(--pad)) 1.4rem;padding:.4rem var(--pad)}
.genres::-webkit-scrollbar{display:none}
.gchip{flex:none;padding:.45rem 1rem;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--dim);background:rgba(255,255,255,.08);margin-right:.5rem;white-space:nowrap}
.gchip.on{background:#fff;color:#000}
.kbd .gchip:focus{transform:scale(1.06)}
.poster .rate{position:absolute;left:.45rem;bottom:.45rem;z-index:2;padding:.15rem .45rem;border-radius:.4rem;background:rgba(0,0,0,.72);font-size:.75rem;font-weight:700;color:#ffd60a}
@media (max-width:899px){.gchip{font-size:13px;padding:7px 13px;margin-right:7px}.genres{margin-bottom:16px}.poster .rate{font-size:11px}}
@media (max-width:899px){.page .seg{display:flex;width:100%;max-width:100%}.page .seg .f{flex:1;padding:8px 4px;font-size:13.5px;text-align:center;white-space:nowrap}}
.gsep{flex:none;width:1px;margin:.35rem .7rem .35rem .2rem;background:rgba(255,255,255,.18)}
.empty .link{color:var(--accent);font-weight:600;margin-left:.3rem}
/* IMDb badge */
.imdb{display:inline-flex;align-items:center;font-weight:700;color:#fff}
.imdb b{background:#f5c518;color:#000;font-weight:900;font-size:.72em;letter-spacing:-.02em;padding:.05em .3em;border-radius:.22em;margin-right:.32em;line-height:1.25}
.poster .rate{color:#fff}
/* IMDb rating slider */
.rslide{display:flex;align-items:center;max-width:34rem;margin:0 0 .9rem;padding:.55rem .9rem;border-radius:999px;background:rgba(255,255,255,.07)}
.rslide .imdb b{font-size:.8rem}
.rslide input{flex:1;margin:0 .9rem;accent-color:#f5c518;height:1.6rem;cursor:pointer}
.rslide output{min-width:6.5rem;text-align:right;font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums}
.kbd .rslide input:focus{box-shadow:none;transform:none;outline:2px solid #fff;outline-offset:4px;border-radius:4px}
@media (max-width:899px){.rslide{padding:8px 14px}.rslide output{min-width:88px;font-size:13px}.rslide input{margin:0 10px}}
@media (max-width:899px) and (orientation:portrait){.player video::cue{font-size:15px}}
@media (max-width:899px) and (orientation:landscape){.player video::cue{font-size:19px}}
/* Chromecast: "Playing on <TV>" screen behind the controls */
.pl-casting{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(60% 60% at 50% 45%,#1d2330,#000)}
.player.casting .pl-casting{display:flex}
.player.casting video{visibility:hidden}
.pl-casting svg{width:4rem;height:4rem;color:rgba(255,255,255,.85);margin-bottom:1rem}
.pl-casting b{font-size:1.3rem;font-weight:700}
.pl-casting small{margin-top:.4rem;color:var(--dim);font-size:.9rem}
.player.casting .pl-mid{top:auto;bottom:calc(env(safe-area-inset-bottom) + 9.5rem);transform:translateX(-50%)}
/* our own subtitles (same look on iPhone, iPad, laptop, TV): white, soft shadow, no box */
.pl-cue{position:absolute;left:4%;right:4%;bottom:10%;z-index:2;text-align:center;pointer-events:none;color:#fff;font-family:var(--f);font-weight:600;line-height:1.3;transition:bottom .25s ease;
  text-shadow:0 0 2px #000,0 0 2px #000,0 0 4px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.55)}
.pl-cue span{display:inline-block;max-width:92%}
.player.casting .pl-cue{display:none}

/* ===== Account sheet: approve another device's Quick Connect code (phone / iPad / laptop / TV) ===== */
.acct{position:fixed;top:0;left:0;right:0;bottom:0;z-index:150;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55)}
.acct-box{width:100%;max-width:26rem;background:#1c1d22;border-radius:1.4rem 1.4rem 0 0;padding:.7rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom));text-align:center;animation:acctUp .22s ease-out}
@keyframes acctUp{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){.acct{align-items:center}.acct-box{border-radius:1.4rem;padding-top:1.4rem;padding-bottom:1.6rem}.acct .grab{display:none}}
.acct .grab{display:block;width:2.3rem;height:.3rem;border-radius:.2rem;background:rgba(255,255,255,.25);margin:0 auto 1rem}
.acct .who{display:flex;align-items:center;text-align:left;margin-bottom:1.3rem}
.acct .who .av{flex:none;margin-right:.75rem}
.acct .who b{display:block;font-size:1rem}.acct .who small{color:var(--dim);font-size:.8rem}
.acct h3{font-size:1.1rem;font-weight:700;margin-bottom:.25rem}
.acct p{color:var(--dim);font-size:.85rem}
.acct .qcbox{position:relative;display:flex;justify-content:center;margin:1rem 0 .4rem;cursor:text}
.acct .qcbox i{font-style:normal;width:2.3rem;height:2.9rem;margin:0 .2rem;border-radius:.65rem;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}
.acct .qcbox i.c{box-shadow:inset 0 0 0 2px #fff}
.acct .qcbox input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;font-size:16px;color:transparent;caret-color:transparent;background:transparent!important;border:0!important;box-shadow:none!important;outline:0;-webkit-appearance:none;appearance:none;padding:0}
.acct .acct-err{min-height:1.2rem;color:#ff6b6b;font-size:.8rem;margin-bottom:.5rem}
.acct-btn{display:block;width:100%;padding:.85rem;border-radius:.8rem;background:#fff;color:#000;font-weight:700;font-size:1rem}
.acct-btn:disabled{background:rgba(255,255,255,.14);color:rgba(255,255,255,.4)}
.acct-out{display:block;margin:1rem auto 0;padding:.4rem 1rem;color:var(--dim);font-size:.92rem}
.acct-ok{padding:.6rem 0 1.3rem}
.acct-ok .tick{width:3.6rem;height:3.6rem;border-radius:50%;background:#30d158;margin:0 auto .8rem;display:flex;align-items:center;justify-content:center}
.acct-ok b{display:block;font-size:1.1rem}.acct-ok small{color:var(--dim);font-size:.82rem}
.tv .acct-box{animation:none}
.kbd .acct .f:focus{transform:none}
.kbd .acct .qcbox input:focus{box-shadow:none}
/* TV remote scrubbing (Apple TV / Netflix style): picture of the moment above the playhead, OK plays from there */
.pl-track .ghost{background:rgba(255,255,255,.55);width:0}
.pl-head,.pl-thumb,.pl-hint{display:none}
.player.scrub .pl-head{display:block;position:absolute;top:50%;width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;border-radius:50%;background:#fff;box-shadow:0 0 0 .3rem rgba(255,255,255,.25)}
.player.scrub .pl-track{height:.6rem}
.player.scrub .pl-thumb{display:block;position:absolute;bottom:2.4rem;left:0;width:17rem;margin-left:-8.5rem;text-align:center;pointer-events:none}
.pl-thumb .pic{display:none;height:9.56rem;border-radius:.6rem;background:#1c1c1e no-repeat;border:.18rem solid #fff;box-shadow:0 .8rem 2rem rgba(0,0,0,.6)}
.pl-thumb.has .pic{display:block}
.pl-thumb b{display:block;margin-top:.45rem;font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 .1rem .5rem rgba(0,0,0,.7)}
.pl-thumb:not(.has) b{font-size:2.9rem;letter-spacing:-.02em}
.pl-thumb span{display:inline-block;margin-top:.25rem;font-size:.95rem;font-weight:700;color:#000;background:#ffd60a;border-radius:99px;padding:.08rem .6rem;font-variant-numeric:tabular-nums}
.player.scrub .pl-hint{display:table;margin:.7rem auto 0;font-size:.95rem;font-weight:600;color:rgba(255,255,255,.85);background:rgba(0,0,0,.45);padding:.3rem .9rem;border-radius:99px;white-space:nowrap}
.pl-hint b{background:rgba(255,255,255,.9);color:#000;border-radius:.25rem;padding:0 .3rem;margin-right:.35rem;font-weight:800}
.pl-hint i{display:inline-block;width:1.2rem}
.player.scrub .pl-mid,.player.scrub .pl-top,.player.scrub .pl-row,.player.scrub .pl-bub,.player.scrub .pill{visibility:hidden}
.player.scrub .pl-ui{opacity:1;transition:none}
.acct.kb .acct-box{padding-bottom:1.1rem;border-radius:1.4rem 1.4rem 0 0}
/* No pinch / double-tap zoom on iPhone + iPad (Safari ignores user-scalable=no): only scrolling is allowed */
html,body{touch-action:pan-x pan-y}

/* ===== Play on TV: TV picker (uses the account sheet look) + remote bar at the bottom ===== */
.tvlist p{color:var(--dim);font-size:.9rem;text-align:center;padding:.8rem 0}
.tvrow{display:flex;align-items:center;width:100%;text-align:left;padding:.8rem .9rem;border-radius:.8rem;background:rgba(255,255,255,.06);margin-bottom:.5rem}
.tvrow svg{width:1.4rem;height:1.4rem;flex:none;margin-right:.8rem}
.tvrow b{display:block;font-size:.95rem}.tvrow small{display:block;color:var(--dim);font-size:.75rem;margin-top:.1rem}
.tvrow.off{opacity:.45}
.sec.tvb{padding:0 1.2rem}
@media (max-width:899px){.hero .sec.tvb{flex:none;width:52px;padding:0}}
.rbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 5.4rem);z-index:120;width:calc(100% - 20px);max-width:28rem;display:flex;align-items:center;padding:.6rem .7rem;border-radius:1rem;background:rgba(28,29,34,.96);box-shadow:0 .6rem 2rem rgba(0,0,0,.5)}
.rbar img{width:2.4rem;height:3.4rem;border-radius:.35rem;object-fit:cover;margin-right:.7rem;flex:none}
.rbar span{flex:1;min-width:0}
.rbar b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rbar small{display:block;color:var(--dim);font-size:.75rem}
.rbar button{width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,.12);margin-left:.4rem;display:flex;align-items:center;justify-content:center;flex:none}
.rbar button svg{width:1.1rem;height:1.1rem}
@media (min-width:900px){.rbar{bottom:1.5rem}}

/* Login code: always inside the screen and truly centred (the long Jellyfin address used to push the card off to the right) */
.login{grid-template-columns:minmax(0,1fr)}
.card{min-width:0}
.code{padding-left:.12em}
.qchint{font-size:.78rem;margin-top:.2rem;overflow-wrap:anywhere;word-break:break-all}
@media (max-width:899px){.code{font-size:13vw}.card{padding:1.8rem 1.3rem}}

/* finger / mouse drag on the bar: the picture of that moment above your finger (Trickplay), time under it */
.player.drag.thumbs .pl-thumb.has{display:block;position:absolute;bottom:2.4rem;left:0;width:17rem;margin-left:-8.5rem;text-align:center;pointer-events:none}
.player.drag.thumbs .pl-thumb span{display:none}
.player.drag.thumbs .pl-bub{opacity:0}
@media (max-width:899px){.player.drag.thumbs .pl-thumb.has{width:12rem;margin-left:-6rem;bottom:30px}.player.drag.thumbs .pl-thumb b{font-size:1.05rem}}
/* Back button on movie pages: dark disc so it shows on white posters too (Avatar) */
.ib.glass{background:rgba(18,18,22,.62);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.tv .ib.glass{background:rgba(18,18,22,.85);box-shadow:none}
/* Search box: no white rectangle around the typing field on iPhone (focus ring is for the TV remote); the whole pill lights up on TV */
.sbox input,.sbox input:focus,.sbox input:focus-visible{-webkit-appearance:none;appearance:none;border-radius:0;box-shadow:none!important;transform:none!important;outline:none}
.sbox input::-webkit-search-decoration,.sbox input::-webkit-search-cancel-button{-webkit-appearance:none}
.kbd .sbox:focus-within{box-shadow:0 0 0 .2rem #fff}
.pl-btn.airon,.pl-btn.airon:hover{background:#fff;color:#000}
/* 0.9.27 recent searches (shown while the search box is empty) */
#srec{max-width:36rem;margin:-.6rem 0 1.4rem}
.srh{display:flex;align-items:center;justify-content:space-between;margin-bottom:.2rem}
.srh h2{font-size:1.15rem;font-weight:700;color:var(--fg)}
.srclear{font-size:1rem;color:rgba(255,255,255,.55);padding:.5rem .2rem}
.srow{display:flex;align-items:center;width:100%;padding:.8rem .2rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.1rem;text-align:left;color:rgba(255,255,255,.88)}
.srow svg{width:1.15rem;height:1.15rem;opacity:.5;margin-right:.85rem;flex:none}
.srow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbd .srow:focus,.kbd .srclear:focus{transform:none;box-shadow:none;background:rgba(255,255,255,.12);border-radius:.7rem}
@media (max-width:899px){#srec{margin:-6px 0 18px}.srh h2{font-size:17px}.srclear{font-size:15px}.srow{font-size:16px;padding:12px 2px}.srow svg{width:17px;height:17px;margin-right:12px}}
/* iPhone: the cursor was drawn under the search box (2026-11-12). The text field now fills the whole pill and the pill
   has no see-through blur on touch screens, so iOS has nothing to misplace it against. */
.sbox input{align-self:stretch;height:auto;padding:0;line-height:normal}
@media (hover:none){.sbox.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.1)}}
.acct-ver{text-align:center;margin-top:.6rem;font-size:.8rem;color:var(--faint)}
/* 0.9.30 AirPlay: which quality the TV gets */
.pl-q{display:inline-block;margin-top:.45rem;font-style:normal;font-size:.8rem;font-weight:600;padding:.25rem .65rem;border-radius:999px;background:rgba(255,255,255,.16);color:#fff}
@media (max-width:899px){.pl-q{font-size:11.5px;margin-top:6px}}