/* Palette lifted from the Android app's Ink object (ui/Theme.kt): stone
   greys and antique gold, not the blue-slate the marketing pages use. The
   two clients are meant to read as one product, and the app is the one that
   moved — so the web player follows it. */
:root{--bg:#0d0f11;--panel:#191c1f;--panel2:#23272b;--line:#3b4046;--well:#111315;--ink:#ecedef;--muted:#9a9da3;--amber:#c98b32;--amber-light:#d9a24a;--amber2:#8a5a1e;--logo-gold:#f5c518;--on-amber:#171006;--blue:#4fc8e0;--violet:#9b8cf2;--ok:#5fc48d;--danger:#e07070;--rail:108px;--top:72px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:Sora,system-ui,sans-serif;overflow-x:hidden}button,input{font:inherit}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 80% -5%,rgba(141,182,218,.12),transparent 68%),radial-gradient(650px 450px at 5% 35%,rgba(242,167,67,.07),transparent 70%);z-index:0}.topbar{height:var(--top);position:fixed;inset:0 0 auto var(--rail);z-index:30;display:flex;align-items:center;padding:0 clamp(20px,4vw,64px);gap:42px;background:linear-gradient(180deg,rgba(8,11,16,.98),rgba(8,11,16,.84) 75%,transparent);backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.brand img{width:116px;height:auto}.brand span{padding-left:12px;border-left:1px solid var(--line);color:var(--amber)}.desktop-nav{display:flex;align-items:center;gap:5px}.nav-item{border:0;background:none;color:var(--muted);padding:11px 14px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;transition:.2s}.nav-item:hover,.nav-item.active{color:#fff;background:rgba(255,255,255,.07)}.nav-item.active{box-shadow:inset 0 -2px var(--amber)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.icon-button,.profile-button{border:1px solid var(--line);background:rgba(17,23,32,.84);color:var(--ink);height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center}.icon-button{width:42px;cursor:pointer}.icon-button svg,.search-box svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.8}.profile-button{padding:0 15px 0 7px;gap:9px;text-decoration:none;font-size:12px;font-weight:600}.profile-button>span:first-child{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#0a1119;font-size:13px}.profile-button:focus-visible,.icon-button:focus-visible,.nav-item:focus-visible,.media-card:focus-visible,.rail-button:focus-visible,.mobile-nav button:focus-visible{outline:3px solid var(--amber);outline-offset:3px}#app-main{position:relative;z-index:1;padding:var(--top) clamp(20px,4vw,64px) 90px;margin-left:var(--rail)}.search-panel{padding:18px 0 4px;max-width:680px}.search-panel label{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}.search-box{height:50px;display:flex;align-items:center;gap:12px;border:1px solid #405063;border-radius:14px;background:rgba(17,23,32,.92);padding:0 15px;box-shadow:0 14px 45px #0005}.search-box input{width:100%;border:0;outline:0;color:var(--ink);background:none;font-size:15px}.search-box kbd{font-size:11px;padding:3px 7px;border:1px solid var(--line);border-radius:5px;color:var(--muted)}.boot-state,.empty-state,.error-state{min-height:55vh;display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted);gap:12px}.spinner{width:28px;height:28px;border:3px solid #293441;border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hero{min-height:min(65vh,650px);margin:0 calc(-1 * clamp(20px,4vw,64px));padding:clamp(100px,17vh,170px) clamp(20px,4vw,64px) 70px;display:flex;align-items:flex-end;position:relative;isolation:isolate;background-position:center;background-size:cover}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bg) 0%,rgba(8,11,16,.82) 35%,rgba(8,11,16,.2) 75%),linear-gradient(0deg,var(--bg) 0%,transparent 45%)}.hero-copy{width:min(610px,90vw)}.eyebrow{margin:0 0 12px;color:var(--amber);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.hero h1{font-size:clamp(35px,5vw,66px);line-height:1.02;letter-spacing:-.05em;margin:0 0 15px}.hero p{font-size:14px;line-height:1.65;color:#c3ced8;max-width:62ch}.hero-actions,.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.primary,.secondary{border:0;border-radius:11px;padding:12px 19px;font-weight:700;font-size:13px;cursor:pointer}.primary{background:var(--amber);color:#1a1005}.primary:hover{background:#ffc066}.secondary{background:rgba(255,255,255,.11);color:#fff;border:1px solid #ffffff1f}.content-stack{display:grid;gap:37px;padding-top:12px}.rail-section{min-width:0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:0 0 15px}.section-head h2{font-size:20px;letter-spacing:-.025em;margin:0}.section-head p{font-size:12px;color:var(--muted);margin:4px 0 0}.rail-controls{display:flex;gap:6px}.rail-button{width:35px;height:35px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--panel);cursor:pointer}.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(138px,15vw,206px);gap:14px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;padding:4px 4px 16px;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:24px 15px;padding:22px 0}.media-card{min-width:0;border:0;padding:0;text-align:left;background:none;color:var(--ink);cursor:pointer;scroll-snap-align:start;border-radius:12px;position:relative}.poster{aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:linear-gradient(145deg,#243344,#121821);border:1px solid rgba(255,255,255,.08);position:relative;box-shadow:0 12px 25px rgba(0,0,0,.22);transition:transform .24s var(--ease),border-color .24s,box-shadow .24s}.media-card:hover .poster,.media-card:focus-visible .poster{transform:translateY(-5px) scale(1.018);border-color:#f2a743aa;box-shadow:0 18px 34px #0009}.poster img{width:100%;height:100%;display:block;object-fit:cover}.poster img.broken{display:none}.poster:after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,#06090ecc);pointer-events:none}.card-title{display:block;margin:10px 2px 0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-meta{display:block;margin:4px 2px 0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-track{position:absolute;z-index:2;left:8px;right:8px;bottom:8px;height:3px;background:#ffffff4a;border-radius:10px;overflow:hidden}.progress-track i{height:100%;display:block;background:var(--amber)}.badge{position:absolute;z-index:2;left:8px;top:8px;border-radius:6px;padding:4px 7px;background:#090d12d9;color:white;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.live-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.live-card{display:flex;align-items:center;gap:14px;padding:14px;background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;min-height:85px}.live-card:hover,.live-card:focus-visible{border-color:var(--amber);transform:translateY(-2px)}.channel-logo{width:58px;height:58px;object-fit:contain;border-radius:10px;background:#0b1017;padding:7px;flex:0 0 auto}.live-card .card-title{margin:0}.live-card .card-meta{margin-top:6px}.page-head{padding:55px 0 5px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.page-head h1{font-size:clamp(31px,4vw,48px);letter-spacing:-.045em;margin:0}.page-head p{color:var(--muted);margin:7px 0 0}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.chip{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:8px 13px;font-size:11px;cursor:pointer}.chip.active,.chip:hover{color:#181005;background:var(--amber);border-color:var(--amber)}.load-more{display:block;margin:15px auto 40px}.calendar-list{display:grid;gap:14px;padding:25px 0}.day-group{display:grid;grid-template-columns:105px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}.day-label strong{display:block;font-size:28px}.day-label span{color:var(--muted);font-size:11px;text-transform:uppercase}.release-row{display:grid;grid-template-columns:56px 1fr auto;gap:13px;align-items:center;padding:8px;border-radius:10px;cursor:pointer}.release-row:hover{background:var(--panel)}.release-row img{width:56px;height:82px;object-fit:cover;border-radius:7px;background:var(--panel2)}.release-row h3{font-size:13px;margin:0 0 6px}.release-row p{font-size:11px;color:var(--muted);margin:0;line-height:1.45}.date-badge{font-size:10px;color:var(--amber);text-transform:uppercase}.detail-dialog{width:min(980px,calc(100vw - 30px));max-height:calc(100vh - 30px);padding:0;border:1px solid #ffffff25;border-radius:20px;background:#10161e;color:var(--ink);box-shadow:0 35px 100px #000d;overflow:auto}.detail-dialog::backdrop{background:#030508d9;backdrop-filter:blur(8px)}.dialog-close{position:fixed;z-index:3;margin:17px 0 0 calc(min(980px,calc(100vw - 30px)) - 58px);width:38px;height:38px;border:1px solid #ffffff33;background:#090d12d9;color:white;border-radius:50%;font-size:24px;cursor:pointer}.detail-hero{min-height:420px;padding:180px 45px 40px;background-position:center;background-size:cover;position:relative;isolation:isolate}.detail-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#10161e 4%,transparent 75%),linear-gradient(90deg,#10161ee8,transparent)}.detail-hero h2{font-size:clamp(31px,5vw,54px);letter-spacing:-.045em;max-width:650px;margin:0}.detail-meta{display:flex;gap:12px;flex-wrap:wrap;color:#c1ccd6;font-size:12px;margin:13px 0}.detail-hero p{max-width:650px;color:#c3cdd7;font-size:13px;line-height:1.7}.episodes{padding:0 45px 45px}.episodes h3{margin:0 0 18px}.episode{width:100%;display:grid;grid-template-columns:155px 1fr auto;gap:18px;align-items:center;padding:12px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-align:left;cursor:pointer}.episode:hover{background:#ffffff08}.episode img{width:155px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--panel2)}.episode strong{display:block;font-size:13px}.episode p{font-size:11px;color:var(--muted);line-height:1.5;margin:6px 0}.episode span{color:var(--muted);font-size:11px}.player-shell{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center}.player-shell[hidden]{display:none}.player-shell video{width:100%;height:100%;object-fit:contain;background:#000}.player-header{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:15px;padding:24px;background:linear-gradient(#000c,transparent);opacity:0;transition:opacity .2s}.player-shell:hover .player-header,.player-header:focus-within{opacity:1}.player-header div{display:flex;flex-direction:column;gap:4px}.player-header span{font-size:11px;color:#b5c0ca}.player-close{width:43px;height:43px;border:1px solid #ffffff44;border-radius:50%;background:#0007;color:#fff;font-size:22px;cursor:pointer}.player-error{position:absolute;max-width:540px;padding:18px 22px;border:1px solid #743a3a;border-radius:12px;background:#210f12e8;color:#ffc4c4;text-align:center;font-size:13px}.toast{position:fixed;z-index:200;left:50%;bottom:30px;transform:translate(-50%,30px);opacity:0;pointer-events:none;padding:11px 16px;border:1px solid var(--line);border-radius:10px;background:#151d27;color:#fff;font-size:12px;box-shadow:0 15px 45px #0009;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.mobile-nav{display:none}.skeleton .poster{background:linear-gradient(100deg,#151d27 25%,#24303c 42%,#151d27 62%);background-size:300% 100%;animation:shimmer 1.4s infinite}.skeleton .card-title{height:12px;width:75%;border-radius:5px;background:#1e2833}.skeleton .card-meta{height:9px;width:45%;border-radius:5px;background:#151d27}@keyframes shimmer{to{background-position:-100% 0}}
@media(max-width:850px){:root{--top:62px;--rail:0px}.topbar{padding:0 17px}.desktop-nav{display:none}.brand span{display:none}.profile-button #profile-name{display:none}.profile-button{padding:0;width:42px}.profile-button>span:first-child{width:30px;height:30px}#app-main{padding-left:17px;padding-right:17px;padding-bottom:95px}.hero{min-height:58vh;margin:0 -17px;padding-left:17px;padding-right:17px}.hero:after{background:linear-gradient(0deg,var(--bg) 0%,rgba(8,11,16,.42) 68%,rgba(8,11,16,.15)),linear-gradient(90deg,rgba(8,11,16,.65),transparent)}.rail{grid-auto-columns:140px}.grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:20px 11px}.live-grid{grid-template-columns:1fr}.mobile-nav{position:fixed;z-index:40;display:grid;grid-template-columns:repeat(6,1fr);inset:auto 0 0;padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:#0b1016ed;border-top:1px solid var(--line);backdrop-filter:blur(15px)}.mobile-nav button{border:0;background:none;color:var(--muted);font-size:9px;padding:4px;display:grid;gap:3px;justify-items:center}.mobile-nav button span{font-size:18px;line-height:1}.mobile-nav button.active{color:var(--amber)}.page-head{padding-top:32px}.day-group{grid-template-columns:1fr;gap:9px}.day-label{display:flex;gap:8px;align-items:baseline}.day-label strong{font-size:19px}.detail-hero{padding:170px 22px 27px}.episodes{padding:0 22px 25px}.episode{grid-template-columns:105px 1fr}.episode>span{display:none}.episode img{width:105px}.dialog-close{margin-left:calc(min(980px,calc(100vw - 30px)) - 52px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- Touch screens, including the browser in a Tesla ----
   The player chrome was revealed by :hover, which never fires on a touch
   screen — the close button was unreachable there. On touch the chrome is
   shown by tapping the picture instead (watch.js toggles .show-chrome), and
   hover-only lift effects are dropped so cards don't stick in a hovered
   state after a tap. */
@media (hover:none),(pointer:coarse){
  .player-header{opacity:1;transition:opacity .25s}
  .player-shell:not(.show-chrome) .player-header{opacity:0}
  .player-shell.show-chrome .player-header{opacity:1}
  .media-card:hover .poster{transform:none;box-shadow:0 12px 25px rgba(0,0,0,.22)}
  .live-card:hover{transform:none}
  .icon-button,.profile-button,.rail-button,.player-close{min-height:48px}
  .rail-button{width:48px;height:48px}
  .chip{padding:12px 18px;font-size:13px}
  .nav-item{padding:14px 16px;font-size:14px}
  .player-close{width:52px;height:52px;font-size:26px}
}
/* The car screen is landscape and roughly 1200x800 CSS px, so it takes the
   desktop layout — but it is a touch screen at arm's length in daylight, so
   type and hit targets get a step larger and the ambient blur comes off
   (backdrop-filter is expensive on that GPU and the bar is opaque anyway). */
@media (pointer:coarse) and (min-width:851px){
  .topbar{backdrop-filter:none;background:rgba(8,11,16,.97)}
  .card-title{font-size:15px}
  .card-meta{font-size:12.5px}
  .rail{grid-auto-columns:clamp(165px,17vw,215px)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .search-box{height:58px}
  .search-box input{font-size:17px}
  .search-box kbd{display:none}
}

/* ---- Streams: the source list under an addon title ----
   One row per scraper result. The tag on the right says whether a browser
   can decode it, because the release name is the only clue available before
   playing and a wrong pick otherwise ends in a black frame. */
.sources{padding:0 45px 45px}
.sources h3{margin:0 0 14px;display:flex;align-items:center;gap:9px}
.source-count{font:600 11px var(--mono,monospace);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.source-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;text-align:left;padding:13px 15px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,var(--panel2),var(--panel));color:var(--ink);cursor:pointer;transition:border-color .18s,transform .18s}
.source-row:hover,.source-row:focus-visible{border-color:var(--amber);transform:translateY(-1px)}
.source-name{font-size:13px;font-weight:600;white-space:pre-line}
.source-detail{grid-column:1;font-size:11px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.source-tag{grid-row:1/span 2;grid-column:2;align-self:center;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7fd8a4;border:1px solid #2f6a48;border-radius:999px;padding:5px 10px;white-space:nowrap}
.source-row.risky .source-tag{color:#f0b46b;border-color:#6d4a22}
.source-row.risky{opacity:.82}
@media(max-width:850px){.sources{padding:0 22px 25px}.source-row{grid-template-columns:1fr;gap:6px}.source-tag{grid-row:auto;grid-column:1;justify-self:start}}

/* ---- Side rail, mirroring the app's nav ---- */
.side-rail{position:fixed;inset:0 auto 0 0;z-index:40;width:var(--rail);display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 8px;background:var(--panel);border-right:1px solid var(--line)}
.rail-brand{display:block;margin-bottom:14px}
.rail-brand img{width:38px;height:auto;display:block}
.rail-item{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border:0;border-radius:14px;background:none;color:var(--muted);font:600 10px var(--sans,'Sora',system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .18s,color .18s}
.rail-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-item:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.rail-item.active{color:var(--amber-light);background:rgba(201,139,50,.14);box-shadow:inset 0 0 0 1px rgba(201,139,50,.4)}
.rail-settings{margin-top:auto}
.rail-item:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---- Home: heading, destination hub, seam ---- */
.home-heading{margin:0 0 18px;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.04em}
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.hub-tile{position:relative;isolation:isolate;overflow:hidden;min-height:210px;padding:14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--panel2),var(--panel));color:var(--ink);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,transform .2s}
.hub-tile:hover,.hub-tile:focus-visible{border-color:var(--amber);transform:translateY(-2px)}
.hub-art{position:absolute;inset:0;z-index:-2;display:grid;grid-template-columns:repeat(3,1fr);opacity:.5}
.hub-art img{width:100%;height:100%;object-fit:cover}
/* The app frosts its tile art behind the label; same idea, done with a
   scrim that is heaviest where the words sit. */
.hub-tile:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,15,17,.92),rgba(13,15,17,.72) 45%,rgba(13,15,17,.9));backdrop-filter:blur(2px)}
.hub-label{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.hub-label svg{width:20px;height:20px;fill:none;stroke:var(--amber-light);stroke-width:1.8}
.hub-sub{margin:0;font-size:12px;color:var(--muted)}
.hub-now{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.hub-now-row{display:grid;gap:2px}
.hub-now-row b{font:700 10.5px var(--mono,monospace);letter-spacing:.09em;text-transform:uppercase;color:var(--amber-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-now-row span{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-now-row i{display:block;height:2px;margin-top:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.hub-now-row i em{display:block;height:100%;border-radius:2px;background:var(--amber)}
.home-seam{height:1px;margin:22px 0 16px;background:rgba(255,255,255,.16);box-shadow:0 10px 18px -8px rgba(0,0,0,.55)}

/* ---- Downloads ---- */
.dl-row{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;padding:14px 16px;margin-bottom:9px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,var(--panel2),var(--panel))}
.dl-row h3{margin:0;font-size:13.5px}
.dl-row p{margin:0;grid-column:1;font-size:11.5px;color:var(--muted)}
.dl-state{font:700 10px var(--sans,'Sora',system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.dl-state.ready{color:var(--ok);border-color:#2f6a48}
.dl-state.failed{color:var(--danger);border-color:#6d3030}
.dl-bar{grid-column:1/-1;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.dl-bar i{display:block;height:100%;background:var(--amber)}

@media(max-width:850px){
  .side-rail{display:none}
  .hub{grid-template-columns:1fr}
  .hub-tile{min-height:150px}
  .home-heading{font-size:24px}
}

/* A poster is a span in the card markup. Inline boxes ignore aspect-ratio,
   which let the image's intrinsic dimensions distort the whole rail. */
.poster{display:block;width:100%}

/* Horizontal overflow used to crop the card's lift and shadow at every edge.
   Give the transformed poster real breathing room, then cancel that spacing
   outside the rail so its titles still align with the section heading. */
.rail{padding:20px 24px 30px;margin:-16px -24px -14px}

/* Series detail follows the TV flow: season -> episode -> sources. */
.series-browser{padding:0 45px 45px}
.series-browser-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}
.series-browser-head h3,.series-browser .sources h3{margin:0}
.season-nav{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:4px}
.season-nav::-webkit-scrollbar{display:none}
.series-columns{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(310px,.92fr);gap:22px;align-items:start}
.series-browser .episodes,.series-browser .sources{padding:0;min-width:0}
.series-browser .episodes{max-height:520px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:rgba(8,11,16,.28)}
.series-browser .episode{grid-template-columns:120px 1fr auto}
.series-browser .episode img{width:120px}
.series-browser .episode.selected{background:rgba(242,167,67,.1);box-shadow:inset 3px 0 var(--amber)}
.library-series-browser .episodes{max-height:none}
.source-placeholder{min-height:180px;border:1px dashed var(--line);border-radius:14px;padding:20px!important;color:var(--muted)}
.source-placeholder p{margin:12px 0 0;font-size:12px}
.empty-state.compact{min-height:180px}
@media(max-width:850px){.rail{padding:16px 17px 25px;margin:-12px -17px -10px}.series-browser{padding:0 22px 25px}.series-browser-head{align-items:flex-start;flex-direction:column}.series-columns{grid-template-columns:1fr}.series-browser .episodes{max-height:none}.series-browser .episode{grid-template-columns:105px 1fr}.series-browser .episode img{width:105px}}

/* ---- Live TV: player on top, programme guide under it ----
   The app's guide is a channel column pinned left with a scrolling timeline;
   the browser does the same with a sticky column. The timeline width and
   programme offsets come from watch.js (2.7px per minute); only the channel
   column width lives here, and the now-line reads it through --guide-chan. */
.live-watch-layout{--guide-chan:220px;--guide-row:62px;display:grid;gap:16px}
.live-player-card{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:18px;padding:14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--panel2),var(--panel))}
.live-player-stage{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.live-player-stage video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.live-player-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);background:radial-gradient(circle at 50% 45%,rgba(201,139,50,.12),transparent 60%),#0a0b0c;pointer-events:none}
.live-player-idle[hidden]{display:none}
.live-player-idle span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);color:var(--amber-light);font-size:20px}
.live-player-idle strong{font-size:13px;font-weight:600}
.live-player-copy{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.live-player-copy .eyebrow{margin:0}
.live-player-copy h2{margin:0;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.03em;overflow-wrap:anywhere}
.live-player-copy strong{font-size:15px;color:var(--amber-light)}
.live-player-copy p{margin:0;font-size:12.5px;color:var(--muted)}
.live-player-next{font-size:12px}
.live-guide-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.live-guide-toolbar>div{display:flex;gap:6px}
.live-guide-toolbar>span{font:600 11.5px var(--mono,monospace);color:var(--muted)}
.guide-time-button{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font-size:12px;font-weight:600;cursor:pointer;transition:border-color .18s,background .18s}
.guide-time-button:hover,.guide-time-button:focus-visible{border-color:var(--amber)}
.guide-time-button.active{background:rgba(201,139,50,.16);border-color:rgba(201,139,50,.55);color:var(--amber-light)}
.live-guide-shell{border:1px solid var(--line);border-radius:16px;background:rgba(8,11,16,.35);overflow:hidden}
.live-guide-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:160px;color:var(--muted);font-size:13px}
.live-guide-scroll{max-height:min(62vh,640px);overflow:auto;overscroll-behavior:contain}
.live-guide-header{position:sticky;top:0;z-index:3;display:flex;width:max-content;min-width:100%;background:var(--panel);border-bottom:1px solid var(--line)}
.live-guide-header>span{position:sticky;left:0;z-index:1;flex:0 0 var(--guide-chan);padding:10px 14px;background:var(--panel);border-right:1px solid var(--line);font:700 10.5px var(--mono,monospace);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.live-guide-header>div{display:flex;flex:none}
.live-guide-header>div span{flex:none;padding:10px 8px;border-left:1px solid rgba(255,255,255,.06);font:600 11px var(--mono,monospace);color:var(--muted);white-space:nowrap}
.live-guide-rows{position:relative;width:max-content;min-width:100%}
.live-guide-slice{will-change:transform}
.live-guide-row{display:flex;height:var(--guide-row);box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,.06)}
.live-guide-channel{position:sticky;left:0;z-index:2;flex:0 0 var(--guide-chan);display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:0 12px;border:0;border-right:1px solid var(--line);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer}
.live-guide-channel img{width:36px;height:36px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.04)}
.live-guide-channel img.broken{visibility:hidden}
.live-guide-channel>span{display:grid;gap:2px;min-width:0}
.live-guide-channel strong,.live-guide-channel small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-guide-channel strong{font-size:12.5px}
.live-guide-channel small{font-size:10.5px;color:var(--muted)}
.live-guide-channel b{font-size:11px;color:var(--muted);opacity:0;transition:opacity .15s}
.live-guide-channel:hover b,.live-guide-channel:focus-visible b,.live-guide-row.is-playing .live-guide-channel b{opacity:1;color:var(--amber-light)}
.live-guide-channel:hover,.live-guide-channel:focus-visible{background:var(--panel2)}
.live-guide-row.is-playing .live-guide-channel{background:#2a2419;box-shadow:inset 3px 0 var(--amber)}
.live-guide-timeline{position:relative;flex:none}
.live-guide-timeline em{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:11px;font-style:normal;color:rgba(154,157,163,.6)}
.live-programme{position:absolute;top:6px;bottom:6px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 10px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:var(--panel);color:var(--ink);text-align:left;overflow:hidden;cursor:pointer;transition:border-color .15s,background .15s}
.live-programme strong,.live-programme span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-programme strong{font-size:12px;font-weight:600}
.live-programme span{font:500 10px var(--mono,monospace);color:var(--muted)}
.live-programme.is-now{background:#2a2419;border-color:rgba(201,139,50,.45)}
.live-programme.is-now span{color:var(--amber-light)}
.live-programme:hover,.live-programme:focus-visible{border-color:var(--amber);background:var(--panel2)}
.live-guide-channel:focus-visible,.live-programme:focus-visible,.guide-time-button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.live-now-line{position:absolute;top:0;bottom:0;left:calc(var(--guide-chan) + var(--now,0px));z-index:1;width:2px;background:var(--amber);box-shadow:0 0 8px rgba(201,139,50,.6);pointer-events:none}
@media(max-width:850px){
  .live-watch-layout{--guide-chan:132px}
  .live-player-card{grid-template-columns:1fr;padding:10px;gap:12px}
  .live-guide-channel{grid-template-columns:28px minmax(0,1fr);gap:8px;padding:0 8px}
  .live-guide-channel img{width:28px;height:28px}
  .live-guide-channel b{display:none}
  .live-guide-scroll{max-height:none}
}
@media (pointer:coarse){
  .live-watch-layout{--guide-row:70px}
  .guide-time-button{padding:12px 18px;font-size:13px}
}
/* Placeholder bar while a row's batch is in flight. */
.live-guide-pending{position:absolute;left:8px;top:14px;bottom:14px;width:min(520px,60%);border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));background-size:200% 100%;animation:guide-shimmer 1.2s linear infinite}
@keyframes guide-shimmer{to{background-position:-200% 0}}

/* ---- Lite mode: the Tesla browser (see the inline script in watch.html) ----
   That browser runs a big screen off a weak GPU. Blur, layered shadows,
   gradients over the whole page and transitions on every card each cost a
   repaint it cannot afford, so they come off. The layout does not change. */
html.lite body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.lite .ambient{display:none}
html.lite *,html.lite *:before,html.lite *:after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important;transition:none!important}
html.lite .topbar{background:#0d0f11}
html.lite .hub-tile:after{background:rgba(13,15,17,.86)}
html.lite .media-card:hover .poster,html.lite .media-card:focus-visible .poster,html.lite .live-card:hover,html.lite .hub-tile:hover,html.lite .source-row:hover{transform:none}
html.lite .live-guide-pending{animation:none;background:rgba(255,255,255,.06)}
html.lite .live-now-line{box-shadow:none}
html.lite .detail-dialog::backdrop{background:rgba(3,5,8,.92)}