/* TopMediaTV: fuchsia, violet and electric blue from the existing logo. */
:root {
  --tm-bg: #090a14;
  --tm-surface: #131426;
  --tm-pink: #f50079;
  --tm-violet: #8747ed;
  --tm-blue: #1674f5;
  --tm-focus: #b6baff;
  --tm-gradient: linear-gradient(115deg, #ce0068 0%, #8735d5 52%, #155ad6 100%);
  --accent: #f50079;
  --plyr-color-main: #f50079;
  color-scheme: dark;
}
html body { accent-color: var(--tm-pink); }
html body .topbar {
  background: linear-gradient(180deg, rgba(12,12,25,.98), rgba(12,12,25,.88));
  border-bottom: 1px solid rgba(135,71,237,.3);
}
html body .menu-item.active,
html body .menu-item:focus-visible {
  color: #fff;
  background: var(--tm-gradient);
  border-radius: 999px;
  box-shadow: 0 3px 20px rgba(135,71,237,.24);
}
html body .menu-item:focus-visible,
html body button:focus-visible,
html body a:focus-visible,
html body input:focus-visible { outline-color: var(--tm-focus); }
html body #livetvApp,
html body #moviesApp,
html body #tvShowsApp,
html body #settingsApp {
  --accent: #f50079;
  --plyr-color-main: #f50079;
  background-color: var(--tm-bg);
}
html body #livetvApp .live-hero {
  background: linear-gradient(105deg, rgba(16,10,30,.97), rgba(21,14,40,.88) 45%, rgba(10,25,57,.6)), #111222;
}
html body #livetvApp .live-hero::after {
  background: linear-gradient(transparent, var(--tm-bg));
}
html body #livetvApp .guide-header,
html body #livetvApp .channel-info,
html body #livetvApp .category-panel,
html body #livetvApp .search-panel { background-color: #111322; }
html body #livetvApp .channel-row.is-focused { background-color: rgba(135,71,237,.14); }
html body #livetvApp .program.is-focused,
html body #livetvApp .program:focus,
html body #livetvApp .category-item.is-focused,
html body #livetvApp .category-item.is-active,
html body #livetvApp .search-item.is-focused {
  background: var(--tm-gradient);
  color: #fff;
  border-color: var(--tm-focus);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 0 18px rgba(135,71,237,.18);
}
html body #livetvApp .program.is-focused .program-time,
html body #livetvApp .program:focus .program-time,
html body #livetvApp .category-item.is-focused .category-name { color: #f4edff; }
html body #livetvApp .guide-action:focus,
html body #livetvApp .guide-action:hover { background: var(--tm-gradient); color:#fff; }
html body .home-library-action.is-primary,
html body .details-play,
html body .play-button,
html body .access-button.primary { background: var(--tm-gradient); color: #fff; }
html body .poster:focus,
html body .search-card:focus,
html body .home-dashboard-card:focus-visible { outline-color: var(--tm-focus); box-shadow: 0 0 22px rgba(135,71,237,.3); }
html body input[type=range] { accent-color: var(--tm-pink); }
/* Offline downloads and the retired profile selector have no product surface. */
#profileSwitcher, #profileGate,
.menu-item[data-type="13"], .menu-item[data-type="14"],
#homeLibraryDetailsDownload, #homeDownloadButton,
#detailsDownload, #movieDownloadButton, #episodeDownloadButton,
[data-action="download"], [data-download-button], .download-button,
.player-download-button, .episode-download { display:none !important; }
@media (prefers-reduced-motion: reduce) {
  .menu-item, #livetvApp .program { transition: none !important; }
}
html body #livetvApp .channel-row { background-color: #141625; }
html body #livetvApp .channel-row.is-playing { background-color: #261531; }
html body #livetvApp .program { background-color: #202236; }
html body #livetvApp .program.is-focused,
html body #livetvApp .program:focus {
  background: var(--tm-gradient);
  background-size: max(600px, 85vw) 100%;
  background-repeat: repeat-x;
}
html body .home-dashboard-card-action,
html body .home-promo-action { background: var(--tm-gradient); color: #fff; }
@media (max-width: 600px) {
  html, html body { max-width: 100%; overflow-x: clip; }
  html body #livetvApp .hero-channel { font-size: 14px; line-height: 1.4; }
  html body #livetvApp .hero-title { font-size: 24px; line-height: 1.15; white-space: normal; }
  html body #livetvApp .hero-meta { flex-wrap: wrap; gap: 6px; font-size: 12px; line-height: 1.4; }
  html body #livetvApp .hero-meta span { max-width: 100%; }
  html body #livetvApp .program-title { font-size: 16px; }
  html body #livetvApp .program-time { font-size: 12px; }
}
/* Keep the loading overlay from expanding the page after its exit animation. */
html body .loading-section.hidden { visibility: hidden; pointer-events: none; animation: none; transform: none; }
@media (max-width: 600px) {
  html body .topbar { box-sizing: border-box; min-width: 0; max-width: 100vw; width: 100vw; left: 0; right: 0; padding-left: 12px !important; padding-right: 52px !important; }
  html body .topbar .menu { min-width: 0; width: 100%; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; }
  html body .topbar .logo-right { right: 10px; }
}
@media (max-width: 600px) {
  html body { contain: paint; }
}
/* Preserve the original pill focus geometry across keyboard and remote input. */
html body .menu-item { border-radius: 999px; }
html body #settingsApp {
  --settings-bg: #090a14;
  --settings-panel: rgba(19,20,38,.94);
  --settings-panel-strong: #24203c;
  --settings-line: rgba(135,71,237,.3);
  --settings-line-strong: #8747ed;
  --settings-cyan: #1674f5;
}
html body #settingsApp::before {
  background-image: radial-gradient(ellipse at top right,rgba(135,71,237,.2),transparent 65%),linear-gradient(135deg,#120c20,#090d1c);
}
html body #settingsApp .language-option.is-selected,
html body #settingsApp .interface-language-option.is-selected,
html body #settingsApp .settings-action.is-primary {
  background: var(--tm-gradient); color:#fff; border-color:var(--tm-violet);
  box-shadow: 0 6px 24px rgba(135,71,237,.22);
}
html body #settingsApp .language-option:focus,
html body #settingsApp .language-option.is-focused,
html body #settingsApp .interface-language-option:focus,
html body #settingsApp .interface-language-option.is-focused,
html body #settingsApp .settings-action:focus,
html body #settingsApp .settings-action.is-focused {
  background:var(--tm-gradient);color:#fff;border-color:var(--tm-focus);
  box-shadow:0 0 0 3px rgba(135,71,237,.3),0 12px 28px rgba(0,0,0,.4);
}
html body #livetvApp { --logo-w: 15vw; --gutter-w: 20.2vw; }
html body #livetvApp .channel-cell { gap:3px; padding:5px 7px; overflow:hidden; }
html body #livetvApp .channel-cell img { width:auto; max-width:90%; height:3.4vh; object-fit:contain; flex-shrink:0; }
html body #livetvApp .channel-num { font-size:1.4vh; line-height:1.1; color:#c0bdd3; }
html body #livetvApp .channel-name { font-size:clamp(11px,1.6vh,19px); line-height:1.15; font-weight:700; text-align:center; width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
@media(max-width:600px) {
  html body #livetvApp { --logo-w:26vw; --gutter-w:31.8vw; }
  html body #livetvApp .channel-cell img { height:25px; max-height:25px; }
  html body #livetvApp .channel-num { font-size:10px; }
  html body #livetvApp .channel-name { font-size:11px; }
}
html body #settingsApp .language-option:focus .option-title,
html body #settingsApp .language-option.is-focused .option-title,
html body #settingsApp .interface-language-option:focus .option-title,
html body #settingsApp .interface-language-option.is-focused .option-title { color:#eee6ff; }
/* Shared loading color, including video buffering and catalog placeholders. */
html body .spinner,
html body .player-loading,
html body #moviesApp .player-loading,
html body #tvShowsApp .player-loading,
html body #livePlayerModal .player-loading {
  border-color:rgba(135,71,237,.18);
  border-top-color:#8747ed;
}
html body .poster-frame.is-loading::after { background:linear-gradient(90deg,transparent,rgba(135,71,237,.18),transparent); }
html body .loading-section { z-index:500; background:#090a14; }
html body .start-screen { overflow:hidden; }
@media(max-width:600px) {
  html body #livetvApp { --logo-w:108px !important; --gutter-w:calc(108px + var(--fav-w)) !important; }
  html body #livetvApp .channel-cell { padding:4px 5px !important; gap:2px !important; }
  html body #livetvApp .channel-cell img { height:24px !important; max-height:24px !important; }
  html body #livetvApp.is-touch-controls .channel-num { min-height:0; line-height:11px; font-size:10px; flex-shrink:0; }
  html body #livetvApp .channel-name { flex-shrink:0; min-height:13px; max-height:26px; color:#e3deef; }
}

/* Season selection and elapsed playback use the logo's violet/blue accents. */
:root { --tm-progress: linear-gradient(100deg, #8747ed, #1674f5); }
html body #tvShowsApp .season-tab.is-active,
html body #tvShowsApp .season-tab:focus,
html body #tvShowsApp .season-tab.is-focused,
html body .home-season-tab.is-active,
html body .home-season-tab:focus,
html body .home-season-tab.is-focused {
  background: var(--tm-progress) !important;
  color: #fff !important;
  border-color: #b6baff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 16px rgba(135,71,237,.25) !important;
}
html body .player-progress-fill,
html body #moviesApp .player-progress-fill,
html body #tvShowsApp .player-progress-fill,
html body #moviesApp .card-progress-fill,
html body #tvShowsApp .card-progress-fill,
html body #tvShowsApp .episode-progress-fill,
html body .home-episode-progress-fill,
html body #livetvApp .hero-progress-fill {
  background: var(--tm-progress) !important;
}