/* 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 16px 0 6px; border-radius: 23px; 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); }
.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); }
.ibtn.vpn.on { background: rgba(48,209,88,0.2); color: var(--success); box-shadow: inset 0 0 0 1.5px var(--success); }
.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; }

/* 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; }
.pb-arrow.on-image { color: #fff; }
.pb-pic { width: 36px; height: 36px; 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; }

/* the Spotlight hero: 270 (phones) or 340 tall, plus the status bar */
.spot { position: relative; height: calc(340px + var(--safe-top)); flex: none; overflow: hidden; }
.spot.compact { height: calc(270px + var(--safe-top)); }
/* a phone on its side (about 400 tall): a little less hero and gap so the section chips sit fully on screen */
.lh-short .spot:not(.compact) { height: calc(330px + var(--safe-top)); }
.lh-short .home-col.spotlight > .spot + * { margin-top: -14px; }
.spot-art { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #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 header's buttons sit on the user's own background, fading in from the right */
.spot-scrim { position: absolute; top: 0; right: 0; width: calc(var(--pad-h) + var(--safe-right) + 256px); height: 130%; pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 100% 0%, color-mix(in srgb, var(--bg-top) 95%, transparent) 0%, color-mix(in srgb, var(--bg-top) 85%, transparent) 60%, transparent 100%); }
.spot.compact .spot-scrim { width: 100%; height: calc(120px + var(--safe-top)); }
:root[data-background="solid"] .spot-scrim { background: radial-gradient(ellipse 100% 100% at 100% 0%, color-mix(in srgb, var(--bg) 95%, transparent) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 60%, transparent 100%); }
.spot-poster { position: absolute; right: calc(var(--pad-h) + var(--safe-right) + 56px); top: calc(var(--safe-top) + 14px + 52px); bottom: 34px; aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden; }
.spot.has-notices .spot-poster { top: calc(var(--safe-top) + 14px + 102px); }
.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: calc(var(--safe-top) + 14px) calc(var(--pad-h) + var(--safe-right)) 0 calc(var(--pad-h) + var(--safe-left)); }
.spot-head { display: flex; align-items: center; gap: 10px; }
.spot-brand { flex: 1; min-width: 0; color: #fff; }
.spot-btns { display: flex; align-items: center; gap: 10px; }
.spot-clock { margin-right: 6px; }
.spot-clock .clock-time { color: var(--text); } .spot-clock .clock-date { color: var(--text); }
.spot-notices { margin-top: 10px; }
.spot-notices:empty { display: none; }
.spot:not(.compact) .spot-notices { margin-right: 56px; }
.spot-info { position: absolute; left: calc(var(--pad-h) + var(--safe-left)); right: calc(var(--pad-h) + var(--safe-right) + 56px); bottom: 26px; max-width: 580px; z-index: 1; }
.spot.compact .spot-info { right: calc(var(--pad-h) + var(--safe-right)); }
.spot-label { font: 700 11px/14px var(--font); letter-spacing: 1.4px; color: var(--accent); margin-bottom: 4px; }
.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); }
.spot-plot { color: rgba(255,255,255,0.78); margin-top: 6px; }
.spot-actions { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.spot-dots { display: flex; align-items: center; gap: 6px; }
.spot-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: all 200ms; }
.spot-dots span.on { width: 8px; height: 8px; background: #fff; }
.spot-rail { position: absolute; top: calc(var(--safe-top) + 14px + 54px); right: calc(var(--pad-h) + var(--safe-right) - 2px); z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.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; } }

/* 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-side { flex: 1; min-height: 0; padding: 6px 0 24px; 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; 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; }
.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; }
.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) */