/* screens.css — Home, Live TV, Movies & Series, details, Guide, Catch Up, Search and the other screens.
 * Sizes are the Android app's dp values in CSS pixels. */

/* ======================= Home ======================= */
.screen.home { padding-bottom: calc(var(--safe-bottom) + 32px); }
.home-col { display: flex; flex-direction: column; gap: 22px; }
.home-rows { display: flex; flex-direction: column; gap: 22px; }
.home-rows:empty { display: none; }
.home-switching { position: absolute; inset: 0; z-index: 30; background: rgba(20,20,22,0.85); display: flex; align-items: center; justify-content: center; }
:root[data-theme="light"] .home-switching { background: rgba(242,242,245,0.85); }
.hrow-cards { display: flex; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.hrow .sec-head { padding-bottom: 4px; }

/* the section chips (SectionChips): 46 tall, a 34 icon on its gradient */
.home-chips { display: flex; gap: 10px; padding-top: 4px; padding-bottom: 4px; }
.home-chip { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 14px; border-radius: 12px; background: var(--surface); color: var(--text);
  font: 500 14px/19px var(--font); white-space: nowrap; flex: none; transition: transform 140ms var(--ease), background-color 140ms; }
.home-chip.hot { transform: scale(0.97); background: var(--accent); color: var(--on-accent); }
.home-chip .chip-ico { color: var(--accent); }
.home-chip.hot .chip-ico { color: var(--on-accent); }
.sec-ico { display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; position: relative; overflow: hidden; }
.sec-ico::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.2), transparent 55%); pointer-events: none; }

/* the header's buttons: 40, rounded squares (radius 10) */
.ibtn.hb { width: 40px; height: 40px; border-radius: 10px; }
.ibtn.hb .mi { font-size: 20px; }
.ibtn.vpn.dim .mi { opacity: 0.45; color: var(--text-2); }
.vpn-dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--bg); animation: vpn-pulse 1.1s ease-in-out infinite alternate; }
@keyframes vpn-pulse { from { opacity: 0.55; } to { opacity: 1; } }
.bell-count { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font: 700 10px/17px var(--font); text-align: center; }
.contact-box { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface-high); margin-top: 16px; }
/* How to reach the provider (support-ui.js): a row per way, a tap opens it. */
.sup-list { display: flex; flex-direction: column; gap: 8px; }
.sup-row { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 14px; border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; min-width: 0; }
.sup-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sup-note { margin-top: 12px; white-space: pre-line; -webkit-user-select: text; user-select: text; }
.sup-list + .sup-note { margin-top: 12px; }
/* "Your subscription ends in 5 days" in full, over two lines on a narrow phone. */
.sup-sheet .sh-title.ellipsis { white-space: normal; overflow: visible; text-overflow: clip; }
/* Home's Renew button while the subscription's ending: amber, the days left in its corner (red once it's ended). */
.ibtn.renew { color: var(--warning); }
.bell-count.renew-count { background: var(--warning); color: #000; }
.bell-count.renew-count.ended { background: var(--danger); color: #fff; }

/* who's watching: the picture (36, radius 9) and an arrow; the playlist pill */
.pb { display: flex; align-items: center; flex: none; }
.pb-arrow { color: var(--text); opacity: 0.72; display: inline-flex; flex: none; }
.pb-arrow.on-image { color: #fff; }
.pb-pic { width: 36px; height: 36px; flex: none; border-radius: 9px; overflow: hidden; display: block; transition: transform 140ms var(--ease), box-shadow 140ms; }
.pb-pic .avatar { border-radius: 9px !important; }
.pb-pic.hot { transform: scale(1.06); box-shadow: 0 0 0 2px #fff; }
.pl-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border-radius: 12px; background: var(--surface-high); font: 400 13px var(--font); flex: none; }
.pl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* the profile menu (ProfileMenuPanel): 296 wide, solid, over the button */
.pm-wrap { position: absolute; inset: 0; z-index: 65; }
.pm-panel { position: absolute; padding: 8px; border-radius: 18px; background: #242428; border: 0.6px solid rgba(255,255,255,0.10); box-shadow: 0 20px 56px rgba(0,0,0,0.55);
  transform-origin: top right; transform: scale(0.94); opacity: 0; transition: transform 180ms var(--ease), opacity 160ms; }
:root[data-theme="light"] .pm-panel { background: #fff; border-color: rgba(0,0,0,0.08); }
.pm-wrap.show .pm-panel { transform: none; opacity: 1; }
.pm-list { max-height: 250px; display: flex; flex-direction: column; }
.pm-row { display: flex; align-items: center; gap: 12px; height: 50px; padding: 6px 10px; border-radius: 12px; text-align: left; flex: none; }
.pm-row.hot { background: var(--accent); color: var(--on-accent); }
.pm-row.hot .c2, .pm-row.hot .ca { color: var(--on-accent); }
.pm-av { border-radius: 9px !important; }
.pm-sep { height: 0.6px; background: var(--separator); margin: 6px 12px; }
.pm-panel .opt { min-height: 44px; }

/* Spotlight's menu along the top, as Netflix's (home-layouts.js spotlightMenu): it stays put on the user's own
   background, the page scrolling up beneath it; the places scroll, an arrow (and a fade) at each end with more that way */
.sp-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: calc(var(--safe-top) + 8px) calc(var(--pad-h) + var(--safe-right)) 10px calc(var(--pad-h) + var(--safe-left));
  background: linear-gradient(var(--bg-top) 0, var(--bg-top) 84%, color-mix(in srgb, var(--bg-top) 0%, transparent)); }
:root[data-background="solid"] .sp-nav { background: linear-gradient(var(--bg) 0, var(--bg) 84%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.home-col.spotlight > .sp-nav { margin-bottom: -14px; }   /* 8px to the hero, not the column's 22 */
/* Spotlight's side menu (home-layouts.js; streams.css .sr-rail): the page runs under it (the hero edge to edge), its
   menu, words and rows starting clear of it; its places in the app's own colours (Disney's and Prime's have theirs) */
.spot-wrap { --rail-w: calc(64px + var(--safe-left)); display: flex; align-items: flex-start; }
.spot-wrap > .home-col.spotlight { flex: 1; min-width: 0; margin-left: calc(-1 * var(--rail-w)); }
.spot-wrap .sp-nav { padding-left: calc(var(--rail-w) + 8px); }
.spot-wrap .home-col.spotlight .pad { padding-left: calc(var(--rail-w) + 14px); }
.spot-wrap .spot-info { left: calc(var(--rail-w) + 14px); }
.spot-wrap .spot-top { padding-left: calc(var(--rail-w) + 14px); }
.sr-rail.sp .sr-item { color: color-mix(in srgb, var(--text) 62%, transparent); }
.sr-rail.sp .sr-item:active { background: var(--text); color: var(--bg); }
.sr-rail.sp .sr-scrim { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 94%, transparent) 0, color-mix(in srgb, var(--bg) 75%, transparent) 280px, transparent 640px); }
.sp-who { flex: none; }
.sp-strip { position: relative; flex: 1 1 auto; min-width: 0; max-width: 600px; margin: 0 auto; }
.sp-tabs { display: flex; align-items: center; gap: 4px; justify-content: safe center; }
.sp-strip.more-left .sp-tabs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 46px); mask-image: linear-gradient(90deg, transparent, #000 46px); }
.sp-strip.more-right .sp-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); }
.sp-strip.more-left.more-right .sp-tabs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 46px, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, transparent, #000 46px, #000 calc(100% - 46px), transparent); }
.sp-arrow { position: absolute; top: 50%; width: 30px; height: 40px; margin-top: -20px; border: 0; padding: 0; background: transparent; color: var(--text); display: none; align-items: center; justify-content: center; }
.sp-arrow.left { left: 0; }
.sp-arrow.right { right: 0; }
.sp-strip.more-left .sp-arrow.left, .sp-strip.more-right .sp-arrow.right { display: inline-flex; }
.sp-tab { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: color-mix(in srgb, var(--text) 82%, transparent); font: 600 15px/1 var(--font); }
.sp-tab.sel { background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); }
.sp-tab:active { background: var(--text); color: var(--bg); }
.sp-ico { flex: none; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.sp-ico:active { background: var(--text); color: var(--bg); }
/* The menu's buttons (Refresh, the VPN, Renew…) light white when pressed, as its places do, not the accent (Matt;
   Android WhiteFocus). The streaming layouts' corner the same. */
.sp-nav .ibtn.hot, .sr-corner .ibtn.hot { background: var(--text); color: var(--bg); }
.sp-corner { display: flex; align-items: center; gap: 10px; flex: none; }
.sp-clock { margin-left: 2px; }
.sp-mark { flex: none; display: inline-flex; }
.sp-nav.compact { flex-wrap: wrap; row-gap: 6px; }
.sp-nav.compact .sp-who { margin-right: auto; }
.sp-nav.compact .sp-strip { order: 5; flex: 1 1 100%; max-width: none; margin: 0; }

/* the Spotlight hero, under the menu: 230 (phones) or 290 tall */
.spot { position: relative; height: 290px; flex: none; overflow: hidden; }
.spot.compact { height: 230px; }
/* An announcement line sits across its top; the hero grows by its height so the title block (taller with title
   artwork) never climbs up into it. */
.spot.has-notices { height: calc(290px + 46px); }
.spot.compact.has-notices { height: calc(230px + 46px); }
/* A short screen (a phone held sideways) with an announcement: the plot gives way and the title artwork is capped
   lower, so the label and title sit clear of the notice line. */
.lh-short .spot:not(.compact).has-notices .spot-plot { display: none; }
.lh-short .spot:not(.compact).has-notices .title-art.hero .title-art-img { max-height: 56px; }
/* The artwork (and a trailer) melts into the page at its foot, and just at its top (HomeLayouts.kt: WallpaperFade) */
.spot-art { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px, #000 62%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14px, #000 62%, transparent); }
.spot-slide { position: absolute; inset: 0; transition: opacity 700ms ease; }
.spot-slide.entering { opacity: 0; }
.spot-slide > .rimg { position: absolute; inset: 0; background: transparent; }
.spot-wait { position: absolute; inset: 0; background: linear-gradient(135deg, var(--surface-high), var(--surface)); }
.spot-plain { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--accent-rgb),0.55), rgba(var(--accent-rgb),0.08)); }
.spot-accent { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--accent-rgb),0.7), rgba(var(--accent-rgb),0.15)); }
.spot-shade-h { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.8), transparent 65%); }
.spot-shade-v { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 30%); }
/* The owner's own app: the title's trailer under the artwork (lib/hero-trailer.js), unseen until it plays cleanly; then
   the artwork (not its shading) fades off it. It's in .spot-art, so it melts into the page just as the artwork does */
.spot-trailer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 250ms ease;
  /* It melts into the page higher up than the artwork (Matt): a widescreen film's 16:9 picture has black bars, and the
     fade must be done before the bottom one starts (12.8% for 2.39:1), or the picture ends in a hard black edge. */
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 85%); mask-image: linear-gradient(180deg, #000 40%, transparent 85%); }
.spot-trailer.shown { opacity: 1; transition-duration: 700ms; }
.spot-trailer-frame { position: absolute; left: 50%; top: 50%; border: 0; transform: translate(-50%, -50%); pointer-events: none; background: transparent; }
.spot-slide > :first-child { transition: opacity 250ms ease; }
.spot-art.trailer-on > .spot-slide > :first-child { opacity: 0; transition-duration: 700ms; }
/* Its sound (home-layouts.js): a speaker at the hero's right while a trailer shows (an iPhone needs a tap for sound);
   gone should the iPhone not let the sound through */
.spot .spot-sound { position: absolute; right: calc(var(--pad-h) + var(--safe-right)); bottom: 28px; z-index: 2; display: none; }
.spot.has-trailer .spot-sound { display: inline-flex; }
.spot.sound-blocked .spot-sound { display: none; }
.spot-poster { position: absolute; right: calc(var(--pad-h) + var(--safe-right)); top: 16px; bottom: 34px; aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden; }
.spot.has-notices .spot-poster { top: 64px; }
.spot-poster:empty { display: none; }
.spot-poster > .rimg { position: absolute; inset: 0; }
.spot-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: 12px calc(var(--pad-h) + var(--safe-right)) 0 calc(var(--pad-h) + var(--safe-left)); }
.spot-notices:empty { display: none; }
.spot-info { position: absolute; left: calc(var(--pad-h) + var(--safe-left)); right: calc(var(--pad-h) + var(--safe-right)); bottom: 26px; max-width: 580px; z-index: 1; }
.spot-tag { display: inline-block; padding: 3px 7px; margin-right: 8px; border-radius: 6px; background: rgba(var(--accent-rgb), 0.24); color: var(--accent); font: 700 11px/14px var(--font); letter-spacing: 1px; vertical-align: 1px; }
.spot-title { font: 700 34px/40px var(--font); letter-spacing: -0.6px; color: #fff; }
.spot.compact .spot-title { font: 600 22px/28px var(--font); letter-spacing: -0.3px; }
.spot-meta { color: rgba(255,255,255,0.82); margin-top: 6px; }
.spot-plot { color: rgba(255,255,255,0.78); margin-top: 6px; min-height: 38px;   /* two lines, short or long, so the tag's line stays put */
  max-height: 44px; overflow: hidden; transition: opacity 200ms ease, max-height 320ms var(--ease), min-height 320ms var(--ease), margin-top 320ms var(--ease); }
/* A trailer with the screen (Disney's; home-layouts.js .quiet): the description steps aside, the title and its tag
   line sliding down into its place. */
.spot.quiet .spot-plot { opacity: 0; max-height: 0; min-height: 0; margin-top: 0; }
/* The title's UK age rating beside the tag (Matt): the age badge's colours (vod.css .dt-age) at the tag's height
   exactly, 6px from it (HeroAgeBadge). */
.spot-meta .dt-age { display: inline-block; min-width: 22px; padding: 3px 6px; margin: 0 8px 0 -2px; box-sizing: border-box;
  font: 700 11px/14px var(--font); letter-spacing: 0.5px; vertical-align: 1px; }
.spot-actions { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.spot-play { display: flex; align-items: center; gap: 12px; }
/* The page dots, as Disney's: the current one a bar filling as its title's time runs (standing still under a finger) */
.spot-dots { display: flex; align-items: center; }
/* Each dot a button with room round it to click or tap (the Windows and Mac apps have no swipe), looking as before. */
.spot-dots > button { display: flex; align-items: center; padding: 10px 3px; margin: -10px 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.spot-dots > button:first-child { padding-left: 0; }
.spot-dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.45); overflow: hidden; transition: background-color .15s; }
.spot-dots > button:hover > span:not(.on), .spot-dots > button:focus-visible > span:not(.on) { background: rgba(255,255,255,0.9); }
.spot-dots span.on { width: 26px; background: rgba(255,255,255,0.35); }
.spot-dots span.on > i { display: block; height: 100%; width: 0; background: #fff; animation: spot-fill 9s linear forwards; }
.spot.holding .spot-dots span.on > i { animation-play-state: paused; }
@keyframes spot-fill { to { width: 100%; } }
.sk.on-image { background: rgba(255,255,255,0.3); animation: sk-pulse 0.9s ease-in-out infinite alternate; border-radius: 8px; }
@keyframes sk-pulse { from { opacity: 0.45; } to { opacity: 0.85; } }

/* A sports event's slide (home-layouts.js paintEvent; Matt, 20 Oct 2026): its artwork in the middle, big (eventArt places
   it), its edges melting into its surround (the panel's: its own background carried on to the hero's edges); the words
   at the foot, a shade under them. */
.spot-slide > .rimg.spot-ev-surround { position: absolute; }
.spot-ev-art { position: absolute; -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); }
.spot-ev-art-in { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 76%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 76%, transparent); }
.spot-ev-art-in > .rimg { position: absolute; inset: 0; background: transparent; }
.spot-ev-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent 50%); }
.spot-ev-title { font: 700 30px/36px var(--font); letter-spacing: -0.5px; }
.spot.compact .spot-ev-title { font: 600 22px/27px var(--font); letter-spacing: -0.3px; }
.spot-ev-title .ev-side { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.spot-tag.live { background: #e5383b; color: #fff; }

/* announcements on artwork (AnnouncementLine): 40 tall */
.an-line { display: flex; align-items: center; height: 40px; padding: 0 12px 0 7px; gap: 10px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.42); border: 0.6px solid rgba(255,255,255,0.14); transition: opacity 220ms; }
.an-line.important { background: linear-gradient(rgba(255,159,10,0.22), rgba(255,159,10,0.22)), rgba(0,0,0,0.5); border: 1px solid rgba(255,159,10,0.6); }
.an-line.fade { opacity: 0; }
.an-ico { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, currentColor 22%, transparent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.an-imp { font: 700 10px/14px var(--font); letter-spacing: 0.8px; color: rgba(0,0,0,0.85); background: var(--warning); border-radius: 5px; padding: 2px 6px; flex: none; }
.an-track { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.an-text { display: inline-block; font: 400 13px/18px var(--font); color: rgba(255,255,255,0.8); white-space: pre; }
.an-text b { color: #fff; font-weight: 600; }
.an-inner { display: inline-flex; will-change: transform; }
.an-dots { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.an-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.3); transition: width 200ms; }
.an-dot.on { width: 16px; }
.an-strip { position: relative; display: grid; margin-left: calc(var(--pad-h) + var(--safe-left)); margin-right: calc(var(--pad-h) + var(--safe-right)); }   /* the page gutter, as .pad */
.an-card { grid-area: 1 / 1; display: flex; align-items: center; gap: 14px; padding: 16px; opacity: 0; transition: opacity 450ms; pointer-events: none; }
.an-card.on { opacity: 1; pointer-events: auto; }
.an-card.important { border: 1px solid rgba(255,159,10,0.55); background: linear-gradient(rgba(255,159,10,0.16), rgba(255,159,10,0.16)), var(--glass); }
.an-cico { width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, currentColor 18%, transparent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.an-card .an-dots .an-dot { background: color-mix(in srgb, var(--text) 25%, transparent); }

/* banners (BannerCarousel): 1920 × 400, radius 18 */
.home-banner.hidden { display: none; }
.banner { position: relative; width: 100%; aspect-ratio: 1920 / 400; border-radius: 18px; overflow: hidden; background: var(--surface); }
.bn-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms; }
.bn-slide.on { opacity: 1; }
.bn-slide img { width: 100%; height: 100%; object-fit: cover; }
.bn-title { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; color: #fff; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6)); }
.bn-dots { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 5px; align-items: center; }
.bn-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.bn-dots span.on { width: 8px; height: 8px; background: rgba(255,255,255,0.95); }

/* channel tiles (ChannelTile): 168 × 94, radius 14 */
.ch-tile { width: 168px; flex: none; text-align: left; }
.ch-tile-art { position: relative; height: 94px; border-radius: 14px; overflow: hidden; background: var(--surface); transition: transform 140ms var(--ease); }
.ch-tile-art > .chart { position: absolute; inset: 0; }
.ch-tile.hot .ch-tile-art { transform: scale(0.97); }
.ch-tile-name { margin-top: 7px; font: 400 13px/18px var(--font); }

/* the Top 10's numbered posters: the place drawn large and outlined behind the poster */
.numbered { position: relative; flex: none; }
.numbered .num { position: absolute; left: 0; top: 0; bottom: 24px; display: flex; align-items: center; font: 900 calc(var(--pw) * 0.95)/1 var(--font); color: transparent;
  -webkit-text-stroke: 2.5px var(--text-2); letter-spacing: 0; pointer-events: none; padding-bottom: 40px; }
.numbered.wide .num { letter-spacing: -0.06em; }
.numbered .num-poster { position: absolute; right: 0; top: 0; }
.numbered { min-height: calc(var(--pw) * 1.5 + 44px); }

/* ======================= Live TV ======================= */
.pad-l { padding-left: calc(var(--pad-h) + var(--safe-left)); }
.field-clear { display: inline-flex; color: var(--text-3); padding: 4px; margin-right: -6px; }
.field input[type="search"]::-webkit-search-cancel-button { display: none; }
.screen.live { display: flex; flex-direction: column; }
.live-compact { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: calc(var(--safe-top) + 10px); }
.live-chead { display: flex; align-items: center; gap: 10px; }
.live-cicon { display: inline-flex; }
.live-csearch { margin: 10px 0 0; }
.live-chips { display: flex; gap: 8px; padding: 10px calc(var(--pad-h) + var(--safe-right)) 6px 0; flex: none; }
.live-compact .live-listbox { flex: 1; min-height: 0; padding: 4px calc(var(--pad-h) + var(--safe-right)) 0 calc(var(--pad-h) + var(--safe-left)); }
.live-wide { position: absolute; inset: 0; display: flex; gap: 18px; padding: calc(var(--safe-top) + 14px) calc(var(--pad-h) + var(--safe-right)) 0 calc(var(--pad-h) + var(--safe-left)); }
.live-sidebar { width: 210px; flex: none; display: flex; flex-direction: column; min-height: 0; }
.live-sidehead { display: flex; align-items: center; gap: 10px; padding: 0 0 6px 4px; }
.live-sidepanel { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: calc(var(--safe-bottom) + 14px); border-radius: 16px; background: var(--sidebar); }
.live-side { flex: 1; min-height: 0; padding: 4px 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.side-header { font: 600 11px/14px var(--font); letter-spacing: 0.4px; color: var(--text-3); padding: 14px 12px 6px; }
.side-row { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; margin: 0 4px; border-radius: 9px; color: var(--text); font: 400 14px/19px var(--font); text-align: left; flex: none; transition: background-color 120ms; }
.side-row .mi { color: var(--text-2); }
.side-row.sel { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-row.sel .mi { color: var(--accent); }
.side-row.hot { background: var(--accent); color: var(--on-accent); } .side-row.hot .mi { color: var(--on-accent); }
.side-lock { color: var(--text-3); display: inline-flex; }
.live-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.live-head { display: flex; align-items: center; gap: 12px; height: 48px; flex: none; margin-bottom: 6px; }
.live-head-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.live-head-actions .ibtn { position: relative; }
.live-search { flex: none; }
.live-wide .live-listbox { flex: 1; min-height: 0; margin-top: 8px; }
.live-listbox { position: relative; display: flex; flex-direction: column; }
.live-listbox > .state { flex: 1; }
.vl { position: relative; flex: 1; min-height: 0; }
.vl-inner { position: relative; width: 100%; }
/* a channel row (ChannelRow): 62 tall */
.chrow { display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 12px; text-align: left; color: var(--text); transition: background-color 120ms; }
.chrow.playing { background: var(--accent-soft); }
.chrow.hot { background: var(--accent); color: var(--on-accent); }
.chrow.hot .chrow-sub, .chrow.hot .chrow-num { color: rgba(255,255,255,0.8); }
.chrow-num { width: 42px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font: 400 13px/18px var(--font); color: var(--text-2); margin-right: -6px; }
.badge.tag { background: var(--surface-highest); color: var(--text); padding: 1px 4px; font-size: 9px; line-height: 12px; }
.chrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chrow-name { display: flex; align-items: center; gap: 6px; font: 600 15px/20px var(--font); min-width: 0; }
.chrow-sub { display: flex; align-items: center; gap: 5px; font: 400 12px/16px var(--font); color: var(--text-2); min-width: 0; }
.chrow-sub .mi { font-size: 14px; flex: none; }
.chrow-fav { color: #FF375F; display: inline-flex; }
.chrow-pl { width: 90%; margin-top: 3px; background: var(--surface-highest); }
/* the preview pane: 38% wide, at most 460 */
.live-preview { width: min(38%, 460px); flex: none; display: flex; flex-direction: column; min-height: 0; padding-bottom: calc(var(--safe-bottom) + 14px); }
.lp-top { height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: none; margin-bottom: 6px; }
.lp-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #000; flex: none; display: block; }
.lp-video .pm-holder { z-index: 0; }
.lp-state { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,0.7); pointer-events: none; text-align: center; padding: 12px; }
.lp-state .mi { color: rgba(255,255,255,0.5); }
.lp-err { color: #fff; }
.lp-fs { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,0.6); color: #fff; font: 400 12px var(--font); opacity: 0; transition: opacity 160ms; }
.lp-video.hot .lp-fs { opacity: 1; }
@media (hover: hover) { .lp-video:hover .lp-fs { opacity: 1; } }
.lp-ch { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex: none; }
.lp-now { flex: 1; min-height: 0; overflow: hidden; margin-top: 12px; display: flex; flex-direction: column; }
.lp-time { margin: 4px 0 6px; }
.lp-desc { margin-top: 8px; }
.lp-next { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.lp-nrow { display: flex; font: 400 12px/16px var(--font); color: var(--text-2); min-width: 0; }
.lp-ntime { width: 54px; flex: none; font-weight: 600; }
.lp-btns { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex: none; }

/* ======================= Multi-view ======================= */
.scr-multiview { background: #000; }
.multiview { position: absolute; inset: 0; background: #000; color: #fff; overflow: hidden; }
.mv-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
.mv-stage { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc((var(--lh) - var(--safe-top) - var(--safe-bottom)) * 16 / 9)); }
.mv-tile { position: absolute; background: rgba(34,34,38,0.35); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; transition: left 320ms var(--ease), top 320ms var(--ease), width 320ms var(--ease), height 320ms var(--ease); }
.mv-tile.has { background: #000; }
.mv-tile.focused { border: 3px solid var(--accent); }
.mv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.mv-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mv-problem { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: rgba(0,0,0,0.7); text-align: center; font: 400 12px/16px var(--font); max-width: 90%; }
.mv-problem .mi { color: var(--warning); }
.mv-label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 22px 12px 10px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85)); opacity: 0; transition: opacity 300ms; pointer-events: none; }
.mv-label.show { opacity: 1; }
.mv-chname { font: 600 13px/18px var(--font); } .mv-prog { font: 600 11px/14px var(--font); color: rgba(255,255,255,0.75); }
.mv-sound { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.6); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.mv-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.mv-add { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; }
.mv-tile.focused .mv-add { background: var(--accent); }
.mv-addtext { font: 400 13px var(--font); color: rgba(255,255,255,0.7); }
.mv-bar { position: absolute; top: calc(var(--safe-top) + 14px); left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 99px; background: rgba(20,20,23,0.9); opacity: 0; pointer-events: none; transition: opacity 250ms; white-space: nowrap; }
.mv-bar.show { opacity: 1; pointer-events: auto; }
.mv-heard { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; font: 400 13px var(--font); max-width: 260px; min-width: 0; }
.mv-chooser { position: absolute; inset: 0; z-index: 8; background: rgb(10,10,13); display: flex; }
.mv-ch-inner { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--safe-top) + 22px) calc(var(--safe-right) + 44px) calc(var(--safe-bottom) + 22px) calc(var(--safe-left) + 44px); }
.compact .mv-ch-inner { padding-left: calc(var(--safe-left) + 20px); padding-right: calc(var(--safe-right) + 20px); }
.mv-note { color: rgba(255,255,255,0.72); max-width: 640px; margin: 4px 0 18px; }
.mv-group { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 14px; }
.compact .mv-group { flex-direction: column; align-items: stretch; }
.mv-group-label { width: 96px; flex: none; text-align: left; color: rgba(255,255,255,0.85); }
.mv-cards { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.compact .mv-cards { gap: 10px; }
.mv-card { padding: 8px; border-radius: 14px; background: #1B1B20; text-align: left; transition: transform 140ms var(--ease), background-color 140ms; }
.mv-card.inuse { background: #2B2418; }
.mv-card.hot { transform: scale(1.04); background: #2C2C33; }
.mv-sketch { position: relative; aspect-ratio: 16 / 9; }
.mv-sk { position: absolute; border-radius: 3px; background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; font: 700 11px var(--font); color: #fff; }
.mv-sk.first { background: var(--accent); }
.mv-card-label { margin-top: 6px; font: 600 12px/16px var(--font); color: #fff; }
.mv-ch-close { margin-top: 8px; }
.mv-picker { position: absolute; top: 0; right: 0; bottom: 0; z-index: 9; width: min(600px, 100%); background: rgba(20,20,23,0.95); animation: pp-in-r 260ms var(--ease); }
.mv-pk-inner { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 22px) calc(var(--safe-right) + 18px) calc(var(--safe-bottom) + 12px) 18px; }
.mv-pk-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.mv-pk-sub { color: rgba(255,255,255,0.6); }
.mv-pk-body { flex: 1; min-height: 0; display: flex; gap: 14px; }
.mv-cats { width: 200px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.compact .mv-cats { width: 140px; }
.mv-cat { height: 40px; flex: none; padding: 0 12px; border-radius: 10px; text-align: left; color: rgba(255,255,255,0.75); font: 400 13px var(--font); display: flex; align-items: center; }
.mv-cat.sel { background: rgba(255,255,255,0.1); color: #fff; }
.mv-cat.hot { background: var(--accent); color: var(--on-accent); }
.mv-chans { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mv-chan { height: 54px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 8px; border-radius: 12px; text-align: left; color: #fff; font: 400 14px var(--font); }
.mv-chan.hot { background: var(--accent); color: var(--on-accent); }
.mv-chan .chlogo { background: rgba(255,255,255,0.08); }
.mv-on { font: 600 11px var(--font); color: var(--accent); flex: none; }
.mv-none { color: rgba(255,255,255,0.6); text-align: center; margin-top: 40px; }

/* ======================= Search ======================= */
.search-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex: none; }
.search-busy { display: inline-flex; }
.search-body { flex: 1; min-height: 0; padding-top: 18px; padding-bottom: calc(var(--safe-bottom) + 24px); display: flex; flex-direction: column; }
.search-recent { display: flex; flex-direction: column; flex: 1; }
.search-recent-head { display: flex; align-items: center; }
.search-chips { display: flex; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.search-recent .state { flex: 1; }
.search-section { margin-bottom: 18px; }
/* A title's cast (its page's Cast row or tab): about two thirds of a poster (Matt: enough to see who they are). */
.cast-card { width: calc(var(--poster-w) * 0.66); }
.dt-grid.dt-castgrid { grid-template-columns: repeat(auto-fill, calc(var(--poster-w) * 0.66)); }
/* Someone's card in search's People row (ui.js personCard): a poster's size; their name always shows. */
.person-card .poster-art .rimg { position: absolute; inset: 0; }
/* Someone's page (screens/person.js): their photo in a rounded square beside their name, then a row each of films and series. */
.person-body { flex: 1; min-height: 0; padding-bottom: calc(var(--safe-bottom) + 24px); }
.person-head { display: flex; align-items: center; gap: 18px; margin: 4px 0 20px; }
.person-photo { position: relative; width: 84px; aspect-ratio: 2 / 3; flex: none; border-radius: 14px; overflow: hidden; background: var(--surface-high); }
.person-photo > .rimg { position: absolute; inset: 0; }
.person-who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.person-none { min-height: 220px; }
.search-row { display: flex; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.search-ch { position: relative; width: 150px; height: 128px; flex: none; border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; text-align: center; transition: transform 140ms var(--ease); }
.search-ch.hot { transform: scale(0.97); }
.search-chname { font: 500 13px/18px var(--font); }
.search-chnum { position: absolute; left: 8px; top: 8px; font: 600 11px var(--font); color: var(--text-3); }
.search-chlock { width: 56px; height: 56px; border-radius: 12px; background: var(--surface-high); display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); }

/* ======================= Favourites ======================= */
.fav-tabs { margin-top: 6px; }
.fav-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 16px; }
.fav-body { flex: 1; min-height: 0; padding-bottom: calc(var(--safe-bottom) + 28px); display: flex; flex-direction: column; }
.fav-body > .state { flex: 1; }
.fav-grid { display: grid; padding: 8px 6px 0; }
.fav-grid.channels { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px 16px; }
.fav-grid.posters { grid-template-columns: repeat(auto-fill, minmax(var(--poster-w), 1fr)); gap: 22px 18px; padding-top: 10px; }
.fav-grid .grid-poster { width: auto; }
.fav-ch { text-align: left; }
.fav-ch-art { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--surface); transition: transform 140ms var(--ease); display: flex; align-items: center; justify-content: center; }
.fav-ch-art > .chart { position: absolute; inset: 0; }
.fav-ch.hot .fav-ch-art { transform: scale(0.97); }
.fav-lock { color: var(--text-2); display: inline-flex; }
.fav-ch-name { margin-top: 7px; font: 500 13px/18px var(--font); }
.fav-ch-num { font: 400 12px/16px var(--font); color: var(--text-2); }

/* ======================= suspended ======================= */
.suspended { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--bg); }
.susp-inner { max-width: 520px; padding: 32px; display: flex; flex-direction: column; align-items: center; }
.susp-inner h1 { margin: 22px 0 10px; }

/* ======================= the other Home layouts ======================= */
.home-col:not(.spotlight) { padding-top: calc(var(--safe-top) + 14px); }
.home-col-top { display: flex; flex-direction: column; gap: 22px; }
.home-col-top:empty { display: none; }
.home-header { align-items: center; gap: 12px; }
.brand-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.status-line { font: 400 12px/16px var(--font); color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.status-line.warn { color: var(--warning); }
.header-end { display: flex; align-items: center; gap: 10px; flex: none; }
.he-clock { margin: 0 8px 0 10px; }
.he-switch { margin-left: 4px; }
/* section tiles (GradientTile) */
.gtile { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; padding: 20px; color: #fff; text-align: left; transition: transform 160ms var(--ease); }
.gtile.small { border-radius: 16px; padding: 14px; }
.gtile.hot { transform: scale(0.97); }
.gtile-sheen { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent); pointer-events: none; }
.gtile-art { position: absolute; right: -22px; bottom: -26px; opacity: 0.16; pointer-events: none; display: inline-flex; }
.gtile-ico { position: relative; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,0.22); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gtile.small .gtile-ico { width: 32px; height: 32px; border-radius: 10px; }
.gtile.large .gtile-ico { width: 54px; height: 54px; }
.gtile-label { position: relative; font: 600 22px/28px var(--font); letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtile.small .gtile-label { font: 600 15px/20px var(--font); }
.gtile.large .gtile-label { font: 700 34px/40px var(--font); letter-spacing: -0.6px; }
.gtile-detail { position: relative; font: 400 13px/18px var(--font); color: rgba(255,255,255,0.85); }
.classic-tiles { display: flex; gap: 18px; }
.classic-tiles .gtile { flex: 1; height: 164px; }
.compact .classic-tiles { gap: 10px; } .compact .classic-tiles .gtile { height: 112px; }
.pill-row { display: flex; gap: 12px; padding-top: 2px; padding-bottom: 2px; }
.pill-tile { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px 0 10px; border-radius: 16px; background: var(--surface); font: 600 15px var(--font); white-space: nowrap; flex: none; transition: transform 140ms var(--ease), background-color 140ms; }
.pill-tile.hot { transform: scale(0.97); background: var(--accent); color: var(--on-accent); }
/* Mosaic */
.mosaic { display: flex; gap: 14px; height: 260px; }
.mosaic .m-live { flex: 1.15; }
.mosaic .m-right { flex: 2; display: flex; flex-direction: column; gap: 14px; }
.mosaic .m-libs { flex: 1.3; display: flex; gap: 14px; } .mosaic .m-libs .gtile { flex: 1; }
.mosaic .m-smalls { flex: 1; display: flex; gap: 14px; } .mosaic .m-smalls .gtile { flex: 1; min-width: 0; }
.mosaic.compact { flex-direction: column; height: auto; gap: 10px; }
.mosaic.compact .m-live { height: 164px; flex: none; }
.mosaic .m-row { display: flex; gap: 10px; }
.mosaic .m-row .m-lib { flex: 1; height: 136px; } .mosaic .m-row .m-small { flex: 1; height: 84px; }
/* Showcase */
.show-shelf { display: flex; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
.show-card { position: relative; flex: none; display: flex; flex-direction: column; padding: 16px; border-radius: 20px; color: #fff; text-align: left; overflow: hidden; transition: transform 160ms var(--ease); }
.show-card.wide { padding: 20px; }
.show-card.hot { transform: scale(0.97); }
.show-art { position: absolute; right: -14px; bottom: -18px; opacity: 0.18; display: inline-flex; pointer-events: none; }
.show-label, .show-detail { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-detail { color: rgba(255,255,255,0.85); }
/* Top bar */
.tb-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 22px; }
.tb-bar.compact { flex-direction: column; align-items: stretch; gap: 6px; }
.tb-name { margin-left: 10px; }
.tb-tabs { flex: 1; min-width: 0; display: flex; gap: 2px; }
.tb-tab { position: relative; height: 40px; padding: 0 16px; border-radius: 20px; font: 600 14px var(--font); color: var(--text-2); white-space: nowrap; flex: none; }
.tb-tab.sel { color: var(--text); }
.tb-tab.sel::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: var(--accent); }
.tb-tab.hot { background: var(--accent); color: var(--on-accent); }
.tb-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.tb-clock { margin: 0 8px 0 12px; }
.tb-status { gap: 14px; }
/* Sidebar */
.sb-home { position: absolute; left: 0; right: 0; top: 0; min-height: 100%; display: flex; }
.home.scroll:has(.sb-home) { overflow: hidden; }
.sb-side { width: 238px; flex: none; background: color-mix(in srgb, var(--surface) 55%, transparent); display: flex; flex-direction: column; height: var(--lh); }
:root[data-theme="light"] .sb-side { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.sb-rail { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: calc(var(--safe-top) + 14px) 14px calc(var(--safe-bottom) + 18px) calc(var(--safe-left) + 16px); }
.sb-brand { display: flex; align-items: center; gap: 10px; padding-left: 6px; flex: none; }
.sb-switch { padding: 14px 0 18px 6px; flex: none; }
.sb-div { height: 0.6px; background: var(--separator); margin: 10px; flex: none; }
.sb-sep { width: 0.6px; background: var(--separator); flex: none; }
.sb-mainwrap { flex: 1; min-width: 0; height: var(--lh); }
.sb-mainwrap .pad { padding-left: 30px; padding-right: calc(30px + var(--safe-right)); }
.sb-head { display: flex; align-items: center; gap: 10px; padding: 0 calc(30px + var(--safe-right)) 0 30px; }
.sb-clock { margin-left: 10px; }
.rail-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px; border-radius: 12px; text-align: left; flex: none; transition: background-color 120ms; }
.rail-item.large { height: 54px; }
.rail-label { font: 500 14px/19px var(--font); } .rail-item.large .rail-label { font-weight: 600; }
.rail-detail { font: 600 11px/14px var(--font); color: var(--text-2); }
.rail-item.hot { background: var(--accent); color: var(--on-accent); } .rail-item.hot .rail-detail { color: var(--on-accent); }
/* Simple */
.simple-home { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 14px) calc(var(--pad-h) + var(--safe-right)) calc(var(--safe-bottom) + 26px) calc(var(--pad-h) + var(--safe-left)); }
.compact .simple-home { padding-bottom: calc(var(--safe-bottom) + 16px); }
.simple-head { display: flex; align-items: center; gap: 12px; }
.simple-notice { margin-top: 18px; }
.simple-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 18px; margin: 18px 0; }
.simple-grid.compact { grid-template-columns: 1fr; gap: 12px; margin: 12px 0; }
.big-btn { display: flex; align-items: center; gap: 20px; padding: 0 28px; border-radius: 24px; color: #fff; text-align: left; min-height: 0; transition: transform 160ms var(--ease); }
.big-btn.hot { transform: scale(0.98); }
.big-ico { width: 66px; height: 66px; border-radius: 18px; background: rgba(255,255,255,0.22); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.simple-grid.compact .big-ico { width: 48px; height: 48px; }
.lh-short .big-ico { width: 48px; height: 48px; } .lh-short .big-btn .t-display { font-size: 26px; line-height: 32px; }
.big-detail { color: rgba(255,255,255,0.9); }
.simple-foot { display: flex; gap: 12px; justify-content: center; }
/* Live TV first */
.lf-inner { display: flex; gap: 18px; }
.lf-inner.compact { flex-direction: column; gap: 14px; }
.lf-preview { position: relative; width: 60%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; flex: none; display: block; color: #fff; text-align: left; align-self: flex-start; }   /* stays 16:9 beside a taller list */
.lf-inner.compact .lf-preview { width: 100%; }
.lf-note { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: 400 13px var(--font); color: rgba(255,255,255,0.75); pointer-events: none; z-index: 1; text-align: center; padding: 12px; }
.lf-note .mi { color: rgba(255,255,255,0.55); }
.lf-live { position: absolute; left: 12px; top: 12px; z-index: 2; }
.lf-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 16px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78)); display: flex; flex-direction: column; gap: 4px; }
.lf-cur { color: rgba(255,255,255,0.82); }
.lf-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lf-title { height: 22px; padding-left: 6px; flex: none; }
.lf-line { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px; border-radius: 12px; text-align: left; flex: none; }
.lf-line.on { background: var(--surface-high); }
.lf-line.hot { background: var(--accent); color: var(--on-accent); }
.lf-name { font: 600 14px/19px var(--font); }
.lf-now { font: 400 12px/16px var(--font); color: var(--text-2); }
.lf-line.on .lf-now { color: var(--accent); }
.lf-more { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 12px; font: 400 14px var(--font); color: var(--text-2); flex: none; }
/* For You */
.fy-hello { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; }
.fy-head { gap: 12px; }
.fy-top { display: flex; gap: 16px; height: 240px; }
.fy-top.compact { height: 200px; }
.fy-carry { position: relative; flex: 1.6; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--surface); text-align: left; color: #fff; transition: transform 160ms var(--ease); }
.fy-carry.hot { transform: scale(0.98); }
.fy-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.6)); }
.fy-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fy-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.88), rgba(0,0,0,0.35)); }
.fy-text { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.fy-line { color: rgba(255,255,255,0.82); }
.fy-act { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.fy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font: 600 13px var(--font); flex: none; }
.fy-carry.hot .fy-btn { background: var(--accent); color: var(--on-accent); }
.fy-chans { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fy-ct { padding-left: 4px; }
.fy-ch { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 14px; background: var(--surface); text-align: left; min-height: 0; }
.fy-ch.hot { background: var(--accent); color: var(--on-accent); }
/* the TMDB banner (PromoCarousel) */
.promo { position: relative; width: 100%; aspect-ratio: 1920 / 400; border-radius: 18px; overflow: hidden; background: #0A0B10; color: #fff; }
.promo.compact { aspect-ratio: 16 / 9; }
.promo-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms; }
.promo-slide.on { opacity: 1; }
.promo-art { position: absolute; right: 0; top: 0; height: 100%; width: 64%; object-fit: cover; }
.promo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-shade-h { position: absolute; inset: 0; background: linear-gradient(90deg, #0A0B10, #0A0B10 36%, rgba(10,11,16,0.55) 60%, transparent); }
.promo-shade-v { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,11,16,0.92)); }
.promo-text { position: absolute; left: 0; top: 0; bottom: 0; width: 52%; padding: 16px 26px; display: flex; flex-direction: column; justify-content: center; }
.promo-text.phone { top: auto; width: auto; right: 64px; padding: 0 0 14px 16px; }
.promo-label { font: 700 11px/14px var(--font); letter-spacing: 1.4px; color: var(--accent); margin-bottom: 4px; }
.promo-meta { color: rgba(255,255,255,0.8); } .promo-plot { color: rgba(255,255,255,0.72); margin-top: 6px; }
.promo-ph { width: 100%; aspect-ratio: 1920 / 400; border-radius: 18px; }
.promo-ph.compact { aspect-ratio: 16 / 9; }

/* Live TV › Layout "Grid" (ChannelGrid): logo cards that open full screen */
.live-main.grid .live-head { gap: 16px; margin-bottom: 10px; }
.live-main.grid .live-search { width: min(300px, 42%); margin: 0; }
.lg-card { display: flex; flex-direction: column; width: 100%; text-align: left; min-width: 0; }
.lg-art { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--surface); overflow: hidden; transition: transform 140ms var(--ease); }
.lg-card.hot .lg-art { transform: scale(0.97); }
.lg-art > .lg-logo { position: absolute; inset: 18px; background: transparent; }
.lg-num { position: absolute; left: 8px; top: 6px; font: 400 11px/14px var(--font); color: var(--text-3); }
.lg-lock { position: absolute; right: 8px; top: 8px; display: inline-flex; color: var(--text-2); }
.lg-name { margin-top: 6px; font: 500 14px/20px var(--font); }
.lg-now { font: 400 12px/16px var(--font); color: var(--text-2); }
.lp-info { display: contents; }   /* the info under the preview, laid out as the pane's own rows (live.js keeps the picture still) */

/* HERO_FULL (js/lib/polish.js): the Spotlight hero fills the first screen under the menu, less a glimpse of the first
   row (64px). --menu-h is measured by home-layouts.js; 8px is the gap under the menu. Placed last so it outranks the
   fixed heights above (the short-screen and notice rules keep their other effects). */
.home-col.spotlight.full > .spot.full, .home-col.spotlight.full > .spot.full.has-notices { height: calc(var(--lh) - var(--menu-h, 64px) - 8px - 64px); min-height: 240px; }
.spot.full .spot-art { -webkit-mask-image: linear-gradient(180deg, transparent, #000 14px, #000 74%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14px, #000 74%, transparent); }
.spot.full .spot-trailer { -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 85%); mask-image: linear-gradient(180deg, #000 52%, transparent 85%); }
.spot.full .spot-shade-h { background: linear-gradient(90deg, rgba(0,0,0,0.75), transparent 60%); }
.spot.full.compact .spot-shade-h { background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.78)); }

/* Home's clock with the weather where the user is (weather-ui.js, lib/weather.js; WeatherClock.kt): a plain clock until
   there's a forecast for the user's place, then a tap (or a mouse over it) shows the card under it. The padding is
   taken back with margins, so the time stays where it was. */
.wx-clock { -webkit-appearance: none; appearance: none; border: 0; background: transparent; color: inherit; font: inherit; text-align: inherit;
  padding: 3px 8px; margin: -3px -8px; border-radius: 10px; cursor: default; transition: background-color 140ms; }
.wx-clock:disabled { color: inherit; opacity: 1; }
.wx-clock.on { cursor: pointer; }
.wx-clock.on:active, .wx-clock.open { background: color-mix(in srgb, var(--text) 14%, transparent); }
.wx-card { position: absolute; z-index: 66; width: 316px; max-width: calc(100% - 16px); box-sizing: border-box; padding: 14px 18px 12px; border-radius: 18px;
  background: #242428; border: 0.6px solid rgba(255,255,255,0.10); box-shadow: 0 20px 56px rgba(0,0,0,0.55); color: var(--text);
  opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right; transition: opacity 160ms, transform 160ms var(--ease);
  --wx-cloud: #E9EDF3; --wx-cloud-2: #B3BDCB; }
:root[data-theme="light"] .wx-card { background: #fff; border-color: rgba(0,0,0,0.08); box-shadow: 0 20px 56px rgba(0,0,0,0.18); --wx-cloud: #A3AEBC; --wx-cloud-2: #7D8A9B; }
.wx-card.show { opacity: 1; transform: none; }
.wx-place { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font: 600 13px/18px var(--font); color: var(--text-2); }
.wx-place .mi { flex: none; }
.wx-now { display: flex; align-items: center; gap: 12px; }
.wx-temp { font: 700 34px/40px var(--font); letter-spacing: -0.6px; }
.wx-says { flex: 1; min-width: 0; margin-left: 2px; }
.wx-sky { font: 600 15px/20px var(--font); }
.wx-hilo { margin-top: 2px; font: 400 12px/16px var(--font); color: var(--text-2); white-space: nowrap; }
.wx-sep { height: 0.6px; margin: 14px 0 12px; background: var(--separator); }
.wx-hours { display: flex; justify-content: space-between; }
.wx-hour { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wx-at { font: 400 12px/16px var(--font); color: var(--text-2); white-space: nowrap; }
.wx-t { font: 600 13px/18px var(--font); }
.wx-credit { margin-top: 10px; text-align: right; font: 400 11px/14px var(--font); color: var(--text-3); }
.wx-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.wx-foot .wx-credit { margin-top: 0; }
.wx-change { -webkit-appearance: none; appearance: none; border: 0; padding: 4px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); font: 600 11px/14px var(--font); letter-spacing: 0.2px; }
.wx-change:active { background: color-mix(in srgb, var(--text) 16%, transparent); }
.wx-glyph { position: relative; display: inline-block; flex: none; }
.wx-glyph > .mi { position: absolute; }
.wx-bar { position: absolute; border-radius: 99px; background: var(--wx-cloud-2); }
/* Settings › Clock › Weather location */
.wx-search { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.wx-status { display: flex; align-items: center; gap: 8px; margin: 6px 2px; }
.wx-status:empty { display: none; }
.wx-found .wx-credit { margin: 6px 4px 2px; }

/* Movies' and Series' own announcements (screens/vod.js; the panel's "Show on"): under the toolbar, above the titles. */
.vod-notice { flex: none; margin: 0 0 12px; }
.vod-notice:empty { display: none; }
.vod-notice .an-strip { margin-left: 0; margin-right: 0; }   /* lined up with the toolbar, not Home's gutter */

/* ======================= My Groups (lib/groups.js, groups-ui.js, screens/groups.js) ======================= */
/* A group's badge: its icon in white on its colour, whatever row it sits in. */
.gbadge { flex: none; }
.gbadge .mi { color: #fff !important; }
.side-row .side-badge { margin-left: -2px; }
.gchip .mi { color: var(--gcolor); }
.gchip.sel .mi, .gchip.hot .mi { color: inherit; }

/* The editor: name, colour and icon, the badge showing the choice at the top. */
.ge-sheet .sh-body { padding-bottom: 4px; }
.ge-preview { display: inline-flex; }
.ge-body { display: flex; flex-direction: column; }
.ge-body .label { margin-bottom: 6px; }
.ge-error { min-height: 16px; margin: 6px 2px 0; }
.ge-label { font: 600 11px/14px var(--font); letter-spacing: 0.4px; color: var(--text-3); margin: 14px 2px 8px; }
.ge-colours { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 10px; justify-content: space-between; }
.ge-swatch { width: 34px; height: 34px; border-radius: 10px; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform 140ms var(--ease), box-shadow 140ms; }
.ge-swatch.sel { box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4.5px var(--text); }
.ge-swatch.hot { transform: scale(1.12); }
.ge-icons { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 8px; justify-content: space-between; }
.ge-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-high); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; transition: transform 140ms var(--ease), background-color 120ms; }
.ge-icon.sel { color: #fff; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.ge-icon.hot { transform: scale(1.1); color: var(--text); }
.ge-icon.sel.hot { color: #fff; }
.ge-btns { display: flex; align-items: center; gap: 10px; padding: 18px 0 6px; }

/* Add to My Groups: New group, then each group ticked when the title's in it. */
.gp-new .gp-newicon { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gp-new .gp-newicon .mi { color: var(--accent); }
.gp-new .opt-label { color: var(--accent); font-weight: 600; }
.gp-row .gp-check { display: inline-flex; flex: none; }
.gp-row .gp-check .mi { color: var(--text-3); }
.gp-row .gp-check.on .mi { color: var(--accent); }
.gp-row.sel .opt-label { font-weight: 600; }

/* The My Groups page, as Manage categories. */
.mygroups .gm-tools { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; flex: none; }
.gm-tabs { flex: none; }
.gm-hint { margin: 0; padding-bottom: 8px; flex: none; }
.gm-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; padding-bottom: calc(var(--safe-bottom) + 24px); }
.gm-list > .state { flex: 1; }
.gm-row { display: flex; align-items: center; gap: 8px; flex: none; }
.gm-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 14px; background: var(--surface); text-align: left; color: var(--text); transition: background-color 120ms, color 120ms; }
.gm-main.hot { background: var(--accent); color: var(--on-accent); }
.gm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gm-name { font: 600 15px/21px var(--font); }
.gm-count { font: 400 12px/16px var(--font); color: var(--text-2); }
.gm-main.hot .gm-count, .gm-main.hot .gm-chev .mi { color: var(--on-accent); }
.gm-chev { display: inline-flex; flex: none; }
.gm-chev .mi { color: var(--text-3); }
.gm-btn.dim .mi { color: var(--text-3); }
.gm-btn.gm-del .mi { color: var(--danger); }
.gm-btn.hot .mi { color: var(--on-accent); }

/* My Stuff: the parts and the sections, then My Groups' tiles. */
.fav-tabrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fav-tabrows { display: flex; flex-direction: column; gap: 10px; }
.fav-tabrows .fav-parts { align-self: flex-start; }
.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; padding: 8px 6px 0; }
.mg-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 132px; padding: 16px; border-radius: 16px; text-align: left; color: var(--text);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gtint, transparent) 30%, transparent), transparent 62%), var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gtint, var(--separator)) 26%, transparent); transition: transform 140ms var(--ease), box-shadow 140ms; }
.mg-tile.hot { transform: scale(0.98); box-shadow: inset 0 0 0 2px var(--accent); }
.mg-text { min-width: 0; }
.mg-name { font: 600 16px/21px var(--font); }
.mg-count { margin-top: 2px; font: 400 13px/18px var(--font); color: var(--text-2); }
.mg-new { background: transparent; box-shadow: none; border: 1.5px dashed var(--surface-highest); }
.mg-new.hot { box-shadow: none; border-color: var(--accent); }
.mg-newicon { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.mg-newicon .mi { color: var(--accent); }
@media (max-width: 699px) { .mg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .mg-tile { min-height: 116px; padding: 14px; } }