/* Thiraibox STB Legacy — base styles.
   1280x720 design base. Avoids CSS Grid, CSS variables, calc() nesting,
   and flex gap (not in WebKit 537-). Uses float/inline-block + absolute
   positioning. All colors are literal hex (no runtime token system that
   older WebKit struggles with). */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Matches Stalker portal's reset.css — NO background on html or body.
   On Android WebView / Chromium-based TVs this is interpreted at
   WebView creation time as "use transparent composite mode", which is
   what lets the native video SurfaceView (rendered behind the WebView
   by the Smart STB middleware) show through. Setting ANY background
   here (even toggling it later via JS) can leave the WebView stuck in
   opaque composite mode, producing the classic black-screen-with-audio
   symptom. Opacity is supplied per-UI-element (pages, sidebar, boot
   screen, overlays) instead. */
html, body {
  width: 1280px; height: 720px;
  color: #e6e6e6;
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 16px;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
#player-root { background: transparent; }
#pages      { background: #090b10; }  /* pages area has solid bg when visible */
#pages:empty, #pages[style*="display: none"] { background: transparent; }

img { border: 0; display: block; }

/* ================= BOOT SCREEN ================= */
#boot-screen {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  background: #090b10;
  z-index: 9999;
  text-align: center;
}
.boot-logo {
  position: absolute; top: 300px; left: 0; width: 1280px;
  font-size: 48px; font-weight: 900;
  letter-spacing: 4px;
  color: #FFD700;
}
.boot-status {
  position: absolute; top: 380px; left: 40px; right: 40px;
  font-size: 16px; color: #8b949e;
  text-align: center;
  min-height: 24px;
  line-height: 24px;
}

/* ================= APP SHELL ================= */
#app { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; }

/* ---------- SIDEBAR ---------- */
#sidebar {
  position: absolute; top: 0; left: 0;
  width: 80px; height: 720px;
  background: #000;
  border-right: 1px solid #1f2430;
  z-index: 50;
  overflow: hidden;
}
#sidebar.sidebar-expanded { width: 260px; background: #000; }
/* Belt-and-suspenders: even if overflow:hidden misses on a given WebKit,
   the items themselves are clipped to 80 px wide. */
.sidebar-items { width: 80px; overflow: hidden; }
#sidebar.sidebar-expanded .sidebar-items { width: 260px; }

.sidebar-logo {
  position: absolute; top: 24px; left: 0; width: 80px;
  height: 50px; line-height: 50px;
  text-align: center;
  font-size: 28px;
  color: #FFD700;
}
.sidebar-logo .fas { color: #FFD700; }

.sidebar-items {
  position: absolute; top: 100px; left: 0;
  /* width is set by the sidebar-items rule below; don't set right:0
     because it conflicts with the explicit width in some WebKit builds. */
}
.sidebar-item {
  position: relative;
  height: 60px;
  line-height: 60px;
  margin: 4px 0;
  padding-left: 28px;
  color: #8b949e;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.sidebar-item .fas {
  display: inline-block;
  width: 24px;
  text-align: center;
  margin-right: 20px;
  font-size: 18px;
  vertical-align: middle;
}
.sidebar-item.active { color: #fff; background: rgba(255,255,255,0.08); }
.sidebar-item.focused {
  background: #FFD700;
  color: #000;
  margin: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  height: 60px;
}
/* Triple-hide the label when collapsed — some WebKit 537 builds don't
   respect display:none inside inline-nested elements, so we also zero
   out the font size and set visibility:hidden. */
.sidebar-label {
  display: none;
  visibility: hidden;
  font-size: 0;
  vertical-align: middle;
  margin-left: 4px;
}
#sidebar.sidebar-expanded .sidebar-label {
  display: inline;
  visibility: visible;
  font-size: 16px;
}

.sidebar-clock {
  position: absolute; bottom: 24px; left: 0; right: 0;
  text-align: center;
}
.sidebar-clock-time {
  color: #fff; font-family: Menlo, Consolas, monospace;
  font-size: 18px; font-weight: 700;
}
.sidebar-clock-date {
  color: #8b949e; font-size: 12px; margin-top: 2px;
  display: none;
}
.sidebar-expanded .sidebar-clock-date { display: block; }

/* ---------- PAGE SHELL ---------- */
#pages {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
}

.page {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  display: none;
  overflow: hidden;
  background: #090b10;
}
.page.visible { display: block; }

/* Content offset for the 80 px sidebar overlay. */
.page-content {
  position: absolute; top: 0; left: 80px;
  width: 1200px; height: 720px;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.page-content::-webkit-scrollbar { width: 0; height: 0; }

/* ================= HOME — HERO =================
   380 px tall (~53 vh). Shorter than Movies/Series' 85 vh hero so the
   Home rows appear sooner — Home has many grids and the user needs to
   see at least one row below the hero without scrolling. */
.home-hero {
  position: relative;
  width: 1200px; height: 380px;
  background: #090b10;
}
.home-hero-img {
  position: absolute; top: 0; left: 0;
  width: 1200px; height: 380px;
  object-fit: cover; object-position: top;
}
.home-hero-grad-left {
  position: absolute; top: 0; left: 0;
  width: 1200px; height: 380px;
  background: -webkit-gradient(linear, left top, right top,
    color-stop(0, #090b10), color-stop(0.5, rgba(9,11,16,0.8)), color-stop(1, rgba(9,11,16,0)));
  background: -moz-linear-gradient(left, #090b10 0%, rgba(9,11,16,0.8) 50%, rgba(9,11,16,0) 100%);
  background: linear-gradient(to right, #090b10 0%, rgba(9,11,16,0.8) 50%, rgba(9,11,16,0) 100%);
}
.home-hero-grad-bot {
  position: absolute; top: 0; left: 0;
  width: 1200px; height: 380px;
  background: -webkit-gradient(linear, left bottom, left top,
    color-stop(0, #090b10), color-stop(1, rgba(9,11,16,0)));
  background: linear-gradient(to top, #090b10 0%, rgba(9,11,16,0) 100%);
}
.home-hero-dim {
  position: absolute; top: 0; left: 0;
  width: 1200px; height: 380px;
  background: rgba(0,0,0,0.3);
  display: none;
}
.home-hero-dim.visible { display: block; }
.home-hero-content {
  position: absolute; top: 80px; left: 60px;
  width: 600px;
  z-index: 2;
}
.hero-badge {
  display: inline-block;
  background: rgba(255,215,0,0.2);
  color: #FFD700;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 3px;
  margin-bottom: 14px;
}
.hero-title {
  font-size: 46px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
  text-shadow: 2px 2px 8px #000;
}
.hero-meta {
  color: #d1d5db;
  font-size: 13px;
  margin-bottom: 20px;
}
.hero-meta .meta-chip {
  display: inline-block; border: 1px solid #555;
  padding: 2px 6px; border-radius: 3px; font-size: 11px;
  margin-right: 10px; vertical-align: middle;
}
.hero-meta .fas.fa-star { color: #FFD700; margin-right: 4px; }
.hero-desc {
  color: #d1d5db;
  font-size: 13px; line-height: 20px;
  margin-bottom: 28px;
  max-height: 60px; overflow: hidden;
}
.hero-buttons { display: block; }
.hero-btn {
  display: inline-block;
  padding: 10px 24px;
  margin-right: 16px;
  background: #fff;
  color: #000;
  border: 2px solid #fff;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  vertical-align: middle;
}
.hero-btn .fas { margin-right: 8px; }
.hero-btn.focused {
  background: #FFD700; border-color: #FFD700;
}
.hero-btn-secondary {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 2px solid transparent;
}
.hero-btn-secondary.focused {
  background: rgba(255,255,255,0.2);
  border-color: #fff;
}
.hero-btn-secondary.added { color: #FFD700; border-color: #FFD700; }
.hero-btn-secondary.added.focused { color: #FFD700; background: rgba(255,215,0,0.15); }

/* ================= HOME — SEARCH BUTTON ================= */
.home-search-btn {
  position: absolute; top: 28px; right: 60px;
  width: 48px; height: 48px;
  line-height: 48px; text-align: center;
  border-radius: 24px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  z-index: 40;
  cursor: pointer;
  font-size: 18px;
}
.home-search-btn.focused {
  background: #fff; color: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ================= HOME — ROW GRIDS =================
   Middle-ground spacing: enough breathing room to separate rows without
   leaving the tall empty gaps the default Tailwind port had. */
.home-row {
  position: relative;
  margin-top: 24px;
  padding-left: 60px;
}
/* Home row title — aligned with the first card of the grid. Both the
   title and the vrow start at .home-row's padding-left (60 px), so
   there's no visible inset between title and cards. Gold border on
   active is a 4 px left stripe that uses padding-left:12 + border-l:4
   — the border itself sits OUTSIDE the card column (shifted -16 px
   via negative margin-left) so the title text stays flush with the
   cards. */
.home-row-title {
  font-size: 20px;
  font-weight: 700;
  margin-left: 0;
  margin-bottom: 16px;
  padding-left: 0;
  border-left: 4px solid transparent;
  color: #6b7280;
  line-height: 24px;
  -webkit-transition: color 300ms, border-color 300ms;
  transition: color 300ms, border-color 300ms;
}
.home-row.active > .home-row-title {
  color: #fff;
  border-left-color: #FFD700;
  padding-left: 12px;
  margin-left: -16px;
}

/* Horizontal virtualized strip — height auto so channel rows (130 px
   tall) don't leave a big gap under them while movie rows (240 px) still
   fit comfortably. The inner container handles horizontal panning. */
.vrow {
  position: relative;
  width: 1140px;
  overflow: hidden;
  white-space: nowrap;
}
.vrow-inner {
  position: relative;
  white-space: nowrap;
}

/* Poster / channel card */
.card {
  display: inline-block;
  vertical-align: top;
  margin-right: 16px;
  background: #1f2430;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 2px solid transparent;
  opacity: 0.8;
}
.card.focused {
  border-color: #FFD700;
  opacity: 1;
  z-index: 20;
}
.card-movie { width: 160px; height: 240px; }
.card-channel { width: 220px; height: 130px; }

.card img { width: 100%; height: 100%; display: block; }
.card-movie img { object-fit: cover; }
.card-channel img { object-fit: contain; padding: 12px; }

.card-fallback-title {
  position: absolute; top: 50%; left: 8px; right: 8px;
  margin-top: -12px;
  font-size: 12px; color: #8b949e;
  text-align: center;
  font-weight: 700;
}
.card-progress-track {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: #374151;
}
.card-progress-fill {
  height: 3px;
  background: #E50914;
}
/* Focused-card title overlay — shows the title on the BOTTOM HALF
   of the card only, with solid-black fallback for devices that don't
   render CSS gradients. display:block !important so no later rule
   (browser defaults, middleware injections) can hide it. z-index
   bumped so the overlay always composits above the image. */
.card-title-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 55%;
  background: rgba(0,0,0,0.78);  /* fallback solid */
  background: -webkit-gradient(linear, left top, left bottom,
    color-stop(0, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.95)));
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%);
  pointer-events: none;
  display: none;
  z-index: 5;
}
.card.focused .card-title-overlay { display: block !important; }
.card-title-text {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  color: #fff;
  font-size: 15px; font-weight: 800;
  line-height: 19px;
  white-space: normal;
  max-height: 76px;
  overflow: hidden;
  text-align: center;
  text-shadow: 1px 1px 4px #000;
  z-index: 6;
}
.card-title-seasons {
  position: absolute; left: 12px; right: 12px; bottom: 0;
  color: #FFD700;
  font-size: 11px; font-weight: 700;
  text-align: center;
  text-shadow: 1px 1px 3px #000;
  z-index: 6;
}
.card-title-seasons {
  position: absolute; left: 16px; bottom: 0;
  color: #FFD700;
  font-size: 11px;
  font-weight: 600;
}

/* ================= LIVE TV =================
   3-column layout matching stb/pages/LiveTv.tsx:
     • Categories: 250 px, header + scrolling list.
     • Channels:   350 px, header + rows (logo box + name + program + progress).
     • Preview:    fills remainder (1200 - 250 - 350 = 600 px) with preview
                   area (60 % height) and program-info panel (40 %). */
.live-layout { position: absolute; top: 0; left: 80px; width: 1200px; height: 720px; }

.live-col-categories {
  position: absolute; top: 0; left: 0;
  width: 250px; height: 720px;
  background: #090b10;
  border-right: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}
.live-col-channels {
  position: absolute; top: 0; left: 250px;
  width: 350px; height: 720px;
  background: #090b10;
  border-right: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}
.live-col-preview {
  position: absolute; top: 0; left: 600px;
  width: 600px; height: 720px;
  background: #090b10;
  overflow: hidden;
}

.live-dim { opacity: 0.6; }

.live-col-head {
  position: absolute; top: 0; left: 0; right: 0;
  height: 64px; line-height: 64px;
  padding: 0 24px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px; font-weight: 700; color: #FFD700;
  letter-spacing: 3px; text-transform: uppercase;
}

.live-col-body {
  position: absolute; top: 64px; left: 0; right: 0; bottom: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 8px 0;
}
.live-col-body::-webkit-scrollbar { width: 0; }

/* ---- Category row ---- */
.live-category {
  padding: 14px 24px;
  color: #9ca3af; font-size: 16px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.live-category.active  { background: rgba(255,255,255,0.1); color: #fff; }
.live-category.focused {
  background: #FFD700; color: #000; font-weight: 700;
  margin-left: 8px; border-top-left-radius: 4px; border-bottom-left-radius: 4px;
}

/* ---- Channel row ---- */
.live-channel-row {
  position: relative;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #d1d5db;
  cursor: pointer;
  min-height: 68px;
}
.live-channel-row.active   { background: rgba(255,255,255,0.1); color: #fff; }
.live-channel-row.focused  { background: #fff; color: #000; }
.live-ch-logo {
  display: inline-block;
  width: 40px; height: 40px;
  background: #fff;
  border-radius: 4px;
  padding: 4px;
  margin-right: 12px;
  vertical-align: top;
  box-sizing: border-box;
}
.live-ch-logo img { width: 100%; height: 100%; object-fit: contain; }
.live-ch-meta {
  display: inline-block;
  vertical-align: top;
  width: 260px;
  max-width: 260px;
}
.live-ch-name {
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-ch-prog {
  font-size: 11px; opacity: 0.7;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-ch-prog-track {
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.live-channel-row.focused .live-ch-prog-track { background: rgba(0,0,0,0.2); }
.live-ch-prog-fill {
  height: 3px; background: #FFD700;
}

/* ---- Preview column ---- */
/* Transparent so the native player (positioned by stbx.setVideoWindow
   into the 600x432 preview rect) shows through. The bg #000 that used
   to be here blocked the video and produced a black box. */
.live-preview-area {
  position: absolute; top: 0; left: 0; right: 0;
  height: 432px; /* 60% of 720 */
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}
.live-preview-placeholder {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.4;
  object-fit: cover;
}
.live-preview-grad {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 50%;
  background: -webkit-gradient(linear, left bottom, left top,
    color-stop(0, rgba(0,0,0,0.8)), color-stop(1, rgba(0,0,0,0)));
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
.live-preview-loader {
  position: absolute; top: 50%; left: 50%;
  margin-top: -30px; margin-left: -30px;
  text-align: center; color: #9ca3af; font-size: 12px;
}
.live-preview-loader .loading-spinner {
  margin: 0 auto 12px;
  width: 32px; height: 32px; border-width: 3px; border-radius: 16px;
}
.live-live-badge {
  position: absolute; top: 16px; left: 16px;
  background: #E50914;
  color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
}
.live-live-badge .live-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 3px;
  background: #fff;
  margin-right: 6px;
  vertical-align: middle;
}
.live-preview-bottom-overlay {
  position: absolute; bottom: 20px; left: 20px; right: 20px;
}
.live-preview-logo-box {
  display: inline-block; vertical-align: middle;
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.9);
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
  margin-right: 12px;
}
.live-preview-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.live-preview-title-box {
  display: inline-block; vertical-align: middle;
  background: rgba(0,0,0,0.6);
  padding: 6px 12px;
  border-radius: 4px;
}
.live-preview-title {
  color: #fff; font-size: 18px; font-weight: 700;
  margin-bottom: 2px;
}
.live-preview-chnum {
  color: #FFD700; font-family: Menlo, Consolas, monospace; font-size: 11px;
}
.live-ok-hint {
  position: absolute; bottom: 20px; right: 20px;
  background: rgba(0,0,0,0.5);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px; color: #d1d5db;
}
.live-ok-hint .ok-chip {
  display: inline-block;
  background: #FFD700; color: #000;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  margin: 0 4px;
}

.live-info-panel {
  position: absolute; top: 432px; left: 0; right: 0; bottom: 0;
  background: #161b22;
  padding: 28px 32px;
  overflow: hidden;
  color: #fff;
}
.live-info-nowplaying {
  color: #FFD700;
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 8px;
}
.live-info-time { float: right; color: #9ca3af; font-family: Menlo, Consolas, monospace; font-size: 12px; }
.live-info-title {
  font-size: 24px; font-weight: 700; color: #fff;
  margin-bottom: 12px; line-height: 1.2;
  max-height: 58px; overflow: hidden;
}
.live-info-desc {
  color: #d1d5db; font-size: 14px; line-height: 22px;
  max-height: 88px; overflow: hidden;
}
.live-info-upnext {
  position: absolute; bottom: 24px; left: 32px; right: 32px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  opacity: 0.7;
}
.live-info-upnext-label { font-size: 10px; text-transform: uppercase; letter-spacing: 3px; color: #6b7280; margin-bottom: 4px; }
.live-info-upnext-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.live-info-upnext-time { float: right; font-family: Menlo, Consolas, monospace; font-size: 11px; }

.live-empty {
  position: absolute; top: 50%; left: 0; right: 0;
  margin-top: -60px;
  text-align: center; color: #4b5563;
}
.live-empty .fa-tv { font-size: 64px; opacity: 0.2; margin-bottom: 16px; display: block; }

/* ================= SERIES DETAILS OVERLAY ================= */
.sd-bg {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  background-size: cover; background-position: center;
}
.sd-bg-grad-left {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  background: -webkit-gradient(linear, left top, right top,
    color-stop(0, #0B0F19), color-stop(0.4, rgba(11,15,25,0.9)), color-stop(1, rgba(11,15,25,0)));
  background: linear-gradient(to right, #0B0F19 0%, rgba(11,15,25,0.9) 40%, rgba(11,15,25,0) 100%);
}
.sd-bg-grad-top {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  background: -webkit-gradient(linear, left top, left bottom,
    color-stop(0, #0B0F19), color-stop(0.5, rgba(11,15,25,0)));
  background: linear-gradient(to bottom, #0B0F19 0%, rgba(11,15,25,0) 50%);
}
.sd-content {
  position: absolute; top: 60px; left: 80px; right: 80px; bottom: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sd-content::-webkit-scrollbar { width: 0; height: 0; }
.sd-header { max-width: 780px; margin-bottom: 40px; }
.sd-label { color: #FFD700; font-size: 13px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 16px; }
.sd-title { font-size: 56px; font-weight: 900; color: #fff; text-transform: uppercase; line-height: 1; margin-bottom: 20px; text-shadow: 2px 2px 12px #000; max-height: 120px; overflow: hidden; }
.sd-meta { color: #e5e7eb; font-size: 15px; font-weight: 500; margin-bottom: 24px; }
.sd-meta span { margin-right: 18px; vertical-align: middle; }
.sd-meta .chip-cert { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); padding: 3px 10px; border-radius: 3px; font-size: 12px; font-weight: 700; }
.sd-meta .fa-star { color: #FFD700; margin-right: 4px; }
.sd-meta .rating-text { color: #FFD700; }
.sd-desc {
  color: #d1d5db; font-size: 15px; line-height: 24px;
  max-width: 680px; margin-bottom: 28px;
  max-height: 72px; overflow: hidden;
}
.sd-actions { margin-bottom: 28px; }

/* Season tab pills */
.sd-season-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 14px; margin-bottom: 18px;
  white-space: nowrap;
  overflow: hidden;
}
.sd-season-tab {
  display: inline-block;
  padding: 6px 20px;
  margin-right: 14px;
  border-radius: 20px;
  color: #6b7280;
  font-weight: 700; font-size: 13px;
  background: transparent;
  white-space: nowrap;
}
.sd-season-tab.active { background: rgba(255,255,255,0.2); color: #fff; }
.sd-season-tab.focused { background: #FFD700; color: #000; }

.sd-eps-label {
  font-size: 18px; font-weight: 700; color: #fff;
  border-left: 4px solid #FFD700; padding-left: 10px;
  line-height: 22px; margin-bottom: 14px;
}
.sd-eps-label .muted { color: #6b7280; font-size: 13px; font-weight: 400; margin-left: 8px; }

.sd-eps-strip {
  position: relative;
  width: 100%; height: 300px;
  overflow: hidden;
}
.sd-eps-inner {
  position: absolute; top: 0; left: 0;
  height: 300px;
  white-space: nowrap;
}
.sd-ep-card {
  display: inline-block;
  vertical-align: top;
  width: 320px; height: 280px;
  margin-right: 20px;
  background: #151A23;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.8;
}
.sd-ep-card.focused {
  border-color: #FFD700;
  opacity: 1;
  -webkit-box-shadow: 0 0 20px rgba(255,215,0,0.3);
  box-shadow: 0 0 20px rgba(255,215,0,0.3);
}
.sd-ep-thumb {
  position: relative;
  width: 316px; height: 170px;
  background: #1f2430;
  overflow: hidden;
}
.sd-ep-thumb img {
  position: absolute; top: 0; left: 0;
  width: 316px; height: 170px;
  object-fit: cover; display: block;
}
.sd-ep-e {
  position: absolute; top: 10px; left: 10px;
  background: rgba(255,215,0,0.9); color: #000;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
}
.sd-ep-dur {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.8); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
}
.sd-ep-watched {
  position: absolute; top: 10px; left: 56px;
  background: rgba(34,197,94,0.9); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
}
.sd-ep-watched .fa-check { margin-right: 4px; }
.sd-ep-play {
  position: absolute; top: 50%; left: 50%;
  margin-top: -28px; margin-left: -28px;
  width: 56px; height: 56px;
  line-height: 56px; text-align: center;
  background: rgba(0,0,0,0.6);
  border-radius: 28px;
  border: 2px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 18px;
  display: none;
}
.sd-ep-card.focused .sd-ep-play { display: block; }
.sd-ep-progress-track {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.2);
}
.sd-ep-progress-fill { height: 3px; background: #FFD700; }
.sd-ep-info { padding: 14px; white-space: normal; }
.sd-ep-info-row { color: #FFD700; font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.sd-ep-info-row .pct { float: right; color: #6b7280; font-weight: 400; }
.sd-ep-title { color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.sd-ep-desc { color: #9ca3af; font-size: 11px; line-height: 16px; max-height: 32px; overflow: hidden; }

/* ================= CATCHUP =================
   Top: date chip row. Below: per-channel rows (round logo + name on left,
   horizontal program-card list on right). */
.catchup-root {
  position: absolute; top: 0; left: 80px;
  width: 1200px; height: 720px;
  padding-top: 28px;
  overflow: hidden;
}
.catchup-dates {
  padding: 0 48px;
  margin-bottom: 24px;
  white-space: nowrap;
  overflow: hidden;
}
.catchup-date {
  display: inline-block;
  width: 80px; height: 72px;
  margin-right: 10px;
  background: #161b22;
  border: 2px solid transparent;
  border-radius: 8px;
  color: #9ca3af;
  text-align: center;
  padding-top: 10px;
  box-sizing: border-box;
  vertical-align: top;
}
.catchup-date.active {
  background: #FFD700;
  color: #000;
  border-color: #FFD700;
}
.catchup-date.focused { transform: scale(1.08); -webkit-transform: scale(1.08); }
.catchup-date-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 4px;
}
.catchup-date.active .catchup-date-label { color: rgba(0,0,0,0.7); }
.catchup-date-num { font-size: 26px; font-weight: 900; line-height: 1; }

.catchup-grid {
  position: absolute; top: 140px; left: 0; right: 0; bottom: 0;
  padding: 0 48px 120px;  /* extra bottom padding so last row isn't clipped */
  overflow-y: auto;
}
.catchup-grid::-webkit-scrollbar { width: 0; height: 0; }

.catchup-row {
  position: relative;
  min-height: 280px;
  margin-bottom: 32px;
}
.catchup-row-chinfo {
  display: inline-block;
  vertical-align: top;
  width: 140px;
  padding-top: 16px;
  margin-right: 16px;
  text-align: center;
}
.catchup-row-logo {
  width: 96px; height: 96px;
  line-height: 96px;
  background: #fff;
  border-radius: 48px;
  margin: 0 auto 10px;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}
.catchup-row-logo img { width: 100%; height: 100%; object-fit: contain; }
.catchup-row-chname {
  color: #fff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 4px;
  max-width: 160px; white-space: normal; line-height: 16px;
  max-height: 32px; overflow: hidden;
}
.catchup-row-count { color: #6b7280; font-size: 11px; }

/* Program strip — width chosen so three 300x280 cards fit cleanly
   inside (3×300 + 2 gaps = 940 px), matching the 1200-wide row minus
   the 140 px channel-info column, the 16 px gap and the 48 px grid
   padding on each side (1200 - 140 - 16 - 96 = 948). */
.catchup-progs-wrap {
  display: inline-block;
  vertical-align: top;
  width: 940px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 280px;
}
.catchup-progs {
  position: absolute; top: 0; left: 0;
  white-space: nowrap;
}
.catchup-prog-card {
  display: inline-block;
  vertical-align: top;
  width: 300px; height: 280px;
  margin-right: 20px;
  background: #1f2430;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.8;
}
.catchup-prog-card.focused {
  border-color: #FFD700;
  opacity: 1;
  -webkit-box-shadow: 0 0 20px rgba(255,215,0,0.3);
  box-shadow: 0 0 20px rgba(255,215,0,0.3);
}
.catchup-prog-thumb {
  position: relative;
  width: 296px; height: 166px;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
}
.catchup-prog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catchup-prog-thumb .fallback-img { object-fit: contain; padding: 20px; opacity: 0.5; }
.catchup-prog-dur {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.8); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
}
.catchup-prog-play {
  position: absolute; top: 50%; left: 50%;
  margin-top: -22px; margin-left: -22px;
  width: 44px; height: 44px;
  line-height: 44px; text-align: center;
  background: rgba(0,0,0,0.6);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 15px;
  display: none;
}
.catchup-prog-card.focused .catchup-prog-play { display: block; }
.catchup-prog-info { padding: 12px; white-space: normal; }
.catchup-prog-time { color: #FFD700; font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.catchup-prog-title { color: #fff; font-size: 15px; font-weight: 700; line-height: 18px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catchup-prog-desc { color: #9ca3af; font-size: 11px; line-height: 15px; margin-bottom: 8px; max-height: 30px; overflow: hidden; }
.catchup-prog-status { font-size: 11px; font-weight: 500; }
.catchup-prog-status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; margin-right: 6px; vertical-align: middle; }
.status-available { color: #22c55e; }
.status-available .dot { background: #22c55e; }
.status-expired { color: #ef4444; }
.status-expired .dot { background: #ef4444; }

/* ================= SEARCH / SETTINGS ================= */
.search-input-row { padding: 40px 60px; }
.search-input {
  width: 800px; height: 60px;
  background: #0d1017; color: #fff;
  border: 2px solid #1f2430;
  border-radius: 6px;
  padding: 0 20px;
  font-size: 20px;
}
.search-input.focused { border-color: #FFD700; }

/* ================= SETTINGS =================
   2-column: 280 px sidebar (tabs + STB Settings + Reboot buttons) on
   the left, content area filling the rest. Focus zones: sidebar/content. */
.settings-root {
  position: absolute; top: 0; left: 80px;
  width: 1200px; height: 720px;
  overflow: hidden;
}
.settings-sidebar {
  position: absolute; top: 0; left: 0;
  width: 280px; height: 720px;
  background: rgba(255,255,255,0.05);
  padding-top: 28px;
  box-sizing: border-box;
  z-index: 20;
}
.settings-sidebar-title {
  padding: 0 28px 24px;
  color: #fff;
  font-size: 24px; font-weight: 700;
}
.settings-sidebar-title .fas { color: #FFD700; margin-right: 12px; }

.settings-tab, .settings-action {
  padding: 14px 28px;
  font-size: 16px;
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.settings-tab .fas, .settings-action .fas {
  display: inline-block;
  width: 20px; text-align: center;
  margin-right: 12px;
}
.settings-tab.active  { background: rgba(255,255,255,0.1); color: #fff; border-left: 4px solid #FFD700; padding-left: 24px; }
.settings-tab.focused { background: #FFD700; color: #000; font-weight: 700; border-bottom-right-radius: 4px; border-top-right-radius: 4px; border-left: 0; padding-left: 28px; }

.settings-action-stb { color: #60a5fa; font-weight: 700; }
.settings-action-stb.focused { background: #2563eb; color: #fff; }
.settings-action-reboot { color: #E50914; font-weight: 700; }
.settings-action-reboot.focused { background: #E50914; color: #fff; }

.settings-content {
  position: absolute; top: 0; left: 280px; right: 0; bottom: 0;
  padding: 48px;
  overflow-y: auto;
}
.settings-content::-webkit-scrollbar { width: 0; height: 0; }
.settings-content-title { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 28px; }

.settings-row {
  display: block;
  padding: 18px 20px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  color: #d1d5db;
  font-size: 15px; font-weight: 500;
  overflow: hidden;
}
.settings-row.focused {
  background: #FFD700;
  color: #000;
  border-color: #FFD700;
}
.settings-row-label { display: inline-block; }
.settings-row-value { float: right; color: #FFD700; font-weight: 700; }
.settings-row.focused .settings-row-value { color: #000; }

.settings-mono { font-family: Menlo, Consolas, monospace; font-size: 13px; background: rgba(0,0,0,0.3); padding: 3px 10px; border-radius: 4px; }
.settings-row.focused .settings-mono { background: rgba(0,0,0,0.15); color: #000; }

.settings-chip {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.settings-chip-active   { background: rgba(34,197,94,0.1); color: #22c55e; }
.settings-chip-inactive { background: rgba(239,68,68,0.1); color: #ef4444; }
.settings-chip .fas { margin-right: 6px; }

/* Toggle switch for Auto-Start row */
.settings-toggle {
  display: inline-block;
  width: 44px; height: 24px;
  border-radius: 12px;
  background: #6b7280;
  position: relative;
  vertical-align: middle;
}
.settings-toggle.on { background: #22c55e; }
.settings-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 9px;
  -webkit-transition: left 150ms;
  transition: left 150ms;
}
.settings-toggle.on .settings-toggle-knob { left: 23px; }

/* ================= MOVIES PAGE HERO ================= */
.movies-hero {
  position: relative;
  width: 1200px; height: 612px; /* 85vh of 720 */
  overflow: hidden;
  background: #090b10;
}
.movies-hero-bg {
  position: absolute; top: 0; left: 0;
  width: 1200px; height: 612px;
  background-size: cover; background-position: center;
  background-color: #1f2430;
}
.movies-hero-grad-left {
  position: absolute; top: 0; left: 0;
  width: 1200px; height: 612px;
  background: -webkit-gradient(linear, left top, right top,
    color-stop(0, #090b10), color-stop(0.5, rgba(9,11,16,0.4)), color-stop(1, rgba(9,11,16,0)));
  background: linear-gradient(to right, #090b10 0%, rgba(9,11,16,0.4) 50%, rgba(9,11,16,0) 100%);
}
.movies-hero-grad-bot {
  position: absolute; bottom: 0; left: 0;
  width: 1200px; height: 428px; /* 70% of 612 */
  background: -webkit-gradient(linear, left bottom, left top,
    color-stop(0, #090b10), color-stop(0.6, rgba(9,11,16,0.6)), color-stop(1, rgba(9,11,16,0)));
  background: linear-gradient(to top, #090b10 0%, rgba(9,11,16,0.6) 60%, rgba(9,11,16,0) 100%);
}
.movies-hero-content {
  position: absolute; bottom: 48px; left: 80px;
  width: 900px;
  z-index: 2;
}
.movies-hero-chips { margin-bottom: 18px; }
.chip-featured {
  display: inline-block;
  background: #E50914;
  color: #fff;
  padding: 4px 12px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 3px;
  margin-right: 12px;
}
.chip-genre {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  color: #d1d5db;
  padding: 4px 12px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
}
.movies-hero-title {
  font-size: 72px; font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  line-height: 0.9;
  margin-bottom: 24px;
  text-shadow: 2px 2px 12px #000;
  max-height: 140px; overflow: hidden;
}
.movies-hero-meta {
  color: #d1d5db;
  font-size: 16px;
  margin-bottom: 28px;
  font-weight: 500;
}
.movies-hero-meta span { margin-right: 22px; vertical-align: middle; }
.movies-hero-meta .chip-4k {
  border: 2px solid rgba(255,255,255,0.3);
  padding: 2px 8px; border-radius: 3px;
  font-size: 13px; font-weight: 700;
}
.movies-hero-meta .chip-51 {
  background: rgba(255,255,255,0.2);
  padding: 2px 8px; border-radius: 3px;
  font-size: 13px; font-weight: 700;
}
.movies-hero-meta .fa-star { color: #FFD700; margin-right: 6px; }
.movies-hero-meta .rating-text { color: #FFD700; }
.movies-hero-desc {
  color: #e5e7eb;
  font-size: 17px;
  line-height: 26px;
  margin-bottom: 36px;
  max-width: 780px;
  max-height: 100px; overflow: hidden;
}
.movies-hero-btn {
  display: inline-block;
  background: #FFD700;
  color: #000;
  font-weight: 700;
  font-size: 17px;
  padding: 14px 36px;
  border-radius: 8px;
  cursor: pointer;
}
.movies-hero-btn.focused {
  -webkit-box-shadow: 0 0 0 4px rgba(255,215,0,0.3);
  box-shadow: 0 0 0 4px rgba(255,215,0,0.3);
}
.movies-hero-btn .fas { margin-right: 12px; }

/* Larger movies grid cards (170x260). */
.card-movie-lg { width: 170px; height: 260px; margin-right: 20px; }
/* Movies/Series row title — aligned with first card. Same alignment
   trick as home-row-title: zero offsets by default, border/padding
   only appear on active. */
.movies-row-title {
  font-size: 24px; font-weight: 700;
  color: #9ca3af;
  margin-left: 0; margin-bottom: 20px;
  padding-left: 0;
  border-left: 4px solid transparent;
  letter-spacing: -0.025em;
  line-height: 28px;
  -webkit-transition: color 300ms;
  transition: color 300ms;
}
.movies-row.active > .movies-row-title {
  color: #FFD700;
  border-left-color: #FFD700;
  padding-left: 12px;
  margin-left: -16px;
}
.movies-row { margin-top: 28px; padding-left: 60px; }

/* ================= DETAILS OVERLAY (Movie / Series) ================= */
#overlay-root {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  pointer-events: none;
  z-index: 500;
}
.overlay {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  background: #0B0F19;
  pointer-events: auto;
  overflow: hidden;
}
/* Right-side banner. React uses a clip-path polygon for a diagonal edge;
   CSS clip-path is only in Chrome 55+/Safari 9.1+. Legacy WebKit ignores
   it → full rectangular banner, which looks fine because the left-side
   gradient already fades the edge. Modern browsers get the diagonal. */
.overlay-bg-wrap {
  position: absolute; top: 0; right: 0;
  width: 896px; /* 70% */ height: 720px;
  overflow: hidden;
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
}
.overlay-bg {
  position: absolute; top: 0; left: 0;
  width: 896px; height: 720px;
  background-size: cover; background-position: center;
}
.overlay-bg-grad-left {
  position: absolute; top: 0; left: 0;
  width: 896px; height: 720px;
  background: -webkit-gradient(linear, left top, right top,
    color-stop(0, #0B0F19), color-stop(0.5, rgba(11,15,25,0)));
  background: linear-gradient(to right, #0B0F19 0%, rgba(11,15,25,0) 50%);
  opacity: 0.9;
}
.overlay-bg-grad-bot {
  position: absolute; top: 0; left: 0;
  width: 896px; height: 720px;
  background: -webkit-gradient(linear, left bottom, left top,
    color-stop(0, #0B0F19), color-stop(0.5, rgba(11,15,25,0)));
  background: linear-gradient(to top, #0B0F19 0%, rgba(11,15,25,0) 50%);
  opacity: 0.5;
}

/* Fallback left-fade that ALWAYS renders, so pre-clip-path browsers still
   get the left-to-right dark-to-clear treatment. */
.overlay-left-fade {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  background: -webkit-gradient(linear, left top, right top,
    color-stop(0, #0B0F19), color-stop(0.35, rgba(11,15,25,0.9)), color-stop(0.6, rgba(11,15,25,0)));
  background: linear-gradient(to right, #0B0F19 0%, rgba(11,15,25,0.9) 35%, rgba(11,15,25,0) 60%);
}

.overlay-content {
  position: absolute; top: 0; left: 100px;
  width: 600px; height: 720px;
  z-index: 2;
}
.overlay-content-inner {
  position: absolute; top: 50%; transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 600px;
}
.overlay-label {
  color: #FFD700;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 16px;
}
.overlay-title {
  font-size: 64px; font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 24px;
  text-shadow: 2px 2px 12px #000;
  max-height: 140px; overflow: hidden;
}
.overlay-meta {
  color: #e5e7eb;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 36px;
}
.overlay-meta span { margin-right: 20px; vertical-align: middle; }
.overlay-meta .chip-cert {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 12px; font-weight: 700;
}
.overlay-meta .chip-4khdr {
  background: #FFD700;
  color: #000;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px; font-weight: 700;
}
.overlay-meta .fa-star { color: #FFD700; margin-right: 4px; }
.overlay-meta .rating-text { color: #FFD700; font-weight: 700; }
.overlay-desc {
  color: #d1d5db;
  font-size: 17px;
  line-height: 26px;
  margin-bottom: 48px;
  max-width: 580px;
  max-height: 104px; overflow: hidden;
}

.overlay-btns { display: block; }
.overlay-btn {
  display: inline-block;
  padding: 14px 32px;
  margin-right: 14px;
  background: rgba(255,255,255,0.05);
  color: #d1d5db;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
}
.overlay-btn .fas, .overlay-btn .far { margin-right: 10px; }
.overlay-btn.primary {
  background: #FFD700;
  color: #000;
  border-color: #FFD700;
  opacity: 0.9;
}
.overlay-btn.focused {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-color: #fff;
}
.overlay-btn.primary.focused {
  background: #FFD700; color: #000; border-color: #FFD700;
  opacity: 1;
  -webkit-box-shadow: 0 0 30px rgba(255,215,0,0.4);
  box-shadow: 0 0 30px rgba(255,215,0,0.4);
}
.overlay-btn.added { color: #FFD700; border-color: #FFD700; }
.overlay-btn.added.focused { background: rgba(255,215,0,0.15); color: #FFD700; border-color: #FFD700; }

.overlay-close-btn {
  position: absolute; top: 40px; right: 40px;
  width: 56px; height: 56px;
  line-height: 56px; text-align: center;
  border-radius: 28px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
}
.overlay-close-btn.focused {
  background: #FFD700; color: #000;
  -webkit-box-shadow: 0 0 20px rgba(255,215,0,0.5);
  box-shadow: 0 0 20px rgba(255,215,0,0.5);
}

/* Season/episode picker */
.series-sel-bar {
  position: absolute; top: 420px; left: 60px; right: 60px;
  color: #8b949e;
}
.season-tab {
  display: inline-block;
  padding: 8px 18px;
  margin-right: 8px;
  background: rgba(255,255,255,0.05);
  color: #d1d5db; border-radius: 4px; font-size: 13px; font-weight: 600;
}
.season-tab.focused { background: #FFD700; color: #000; }
.season-tab.active { color: #fff; }
.episode-strip {
  position: absolute; top: 470px; left: 60px; right: 0;
  height: 180px;
  overflow: hidden; white-space: nowrap;
}
.episode-card {
  display: inline-block; vertical-align: top;
  width: 240px; height: 160px;
  margin-right: 12px;
  background: #0d1017; border: 2px solid transparent; border-radius: 6px;
  padding: 10px;
  position: relative;
}
.episode-card.focused { border-color: #FFD700; }
.episode-thumb { width: 220px; height: 90px; background: #1f2430; border-radius: 3px; overflow: hidden; }
.episode-thumb img { width: 100%; height: 100%; object-fit: cover; }
.episode-title { color: #fff; font-size: 12px; font-weight: 700; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.episode-meta { color: #8b949e; font-size: 11px; margin-top: 2px; }

/* ================= PLAYER =================
   Transparent — the Smart STB middleware renders the native player in a
   layer BEHIND the DOM. If this div had a #000 background it would
   cover the video entirely. The HTML5 fallback <video> element keeps
   its own #000 (set inline in core/stb.js getHtml5Video) so a browser
   with no native player still gets a black frame. */
#player-root {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px;
  display: none;
  background: transparent;
  z-index: 1000;
}
#player-root.visible { display: block; }
/* ================ PLAYER OSD (VOD + LIVE) ================
   Matches the modern STB: top bar with gradient fade + back button +
   title, center controls (VOD only), bottom scrubber + toolbar (VOD)
   or bottom channel info (LIVE). Uses opacity+transition for fade-in
   /out so the OSD appears/disappears smoothly. */
.player-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
}
.player-overlay.visible { opacity: 1; pointer-events: auto; }

/* ---- Top bar (shared) ---- */
.player-top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 32px 48px;
  background: -webkit-gradient(linear, left top, left bottom,
    color-stop(0, rgba(0,0,0,0.9)), color-stop(1, rgba(0,0,0,0)));
  background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
}
.player-back-btn {
  display: inline-block;
  padding: 10px 24px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.player-back-btn .fas { margin-right: 8px; }
.player-back-btn.focused {
  background: #FFD700;
  color: #000;
  border-color: #FFD700;
  -webkit-box-shadow: 0 4px 14px rgba(234,179,8,0.2);
  box-shadow: 0 4px 14px rgba(234,179,8,0.2);
}
.player-top-title {
  display: inline-block;
  float: right;
  margin-top: 6px;
  font-size: 22px; font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px 8px #000;
  max-width: 780px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Center controls (VOD) ---- */
.player-center {
  position: absolute; top: 50%; left: 50%;
  margin-top: -48px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  white-space: nowrap;
}
.player-ctl {
  display: inline-block;
  vertical-align: middle;
  width: 56px; height: 56px;
  line-height: 56px; text-align: center;
  margin: 0 16px;
  color: rgba(255,255,255,0.7);
  font-size: 32px;
}
.player-ctl.focused {
  color: #FFD700;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
}
.player-ctl-play {
  display: inline-block;
  vertical-align: middle;
  width: 96px; height: 96px;
  line-height: 92px; text-align: center;
  margin: 0 16px;
  border-radius: 48px;
  border: 4px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 36px;
}
.player-ctl-play.focused {
  border-color: #FFD700;
  background: rgba(255,215,0,0.2);
  color: #FFD700;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

/* ---- Bottom section (VOD) ---- */
.player-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 40px 48px;
  background: -webkit-gradient(linear, left bottom, left top,
    color-stop(0, rgba(0,0,0,0.95)), color-stop(1, rgba(0,0,0,0)));
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
}
.player-scrubber {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  margin-bottom: 20px;
}
.player-scrubber.focused {
  height: 10px;
  -webkit-box-shadow: 0 0 0 2px rgba(255,215,0,0.3);
  box-shadow: 0 0 0 2px rgba(255,215,0,0.3);
}
.player-progress-fill {
  position: absolute; top: 0; left: 0;
  height: 100%;
  background: #FFD700;
  border-radius: 4px;
}
.player-progress-knob {
  position: absolute; top: 50%; right: 0;
  margin-top: -10px; margin-right: -10px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  display: none;
}
.player-scrubber.focused .player-progress-knob { display: block; }

.player-time {
  display: inline-block;
  font-family: Menlo, Consolas, monospace;
  font-size: 18px; font-weight: 700;
  color: #d1d5db;
}
.player-time .sep { color: #6b7280; margin: 0 4px; }
.player-toolbar {
  display: inline-block;
  float: right;
}
.player-tool-btn {
  display: inline-block;
  padding: 8px 16px;
  margin-left: 10px;
  color: #d1d5db;
  font-weight: 700;
  font-size: 13px;
  border-radius: 4px;
  background: transparent;
}
.player-tool-btn .fas { margin-right: 6px; }
.player-tool-btn.focused {
  background: #FFD700;
  color: #000;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

/* ---- LIVE TV OSD ---- */
.liv-top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 32px 48px;
  background: -webkit-gradient(linear, left top, left bottom,
    color-stop(0, rgba(0,0,0,0.9)), color-stop(1, rgba(0,0,0,0)));
  background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
  min-height: 100px;
}
.liv-top-logo {
  display: inline-block; vertical-align: middle;
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 4px;
  box-sizing: border-box;
  margin-right: 16px;
}
.liv-top-logo img { width: 100%; height: 100%; object-fit: contain; }
.liv-top-info { display: inline-block; vertical-align: middle; }
.liv-top-info h2 {
  font-size: 22px; font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 2px 2px 6px #000;
  margin-bottom: 2px;
}
.liv-top-info .sub { color: #d1d5db; font-weight: 600; font-size: 13px; }
.liv-top-num {
  float: right;
  margin-top: 10px;
  color: #FFD700;
  font-family: Menlo, Consolas, monospace;
  font-size: 36px; font-weight: 900;
  text-shadow: 2px 2px 6px #000;
}

.liv-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 48px 56px;
  background: -webkit-gradient(linear, left bottom, left top,
    color-stop(0, rgba(0,0,0,0.95)), color-stop(0.6, rgba(0,0,0,0.6)), color-stop(1, rgba(0,0,0,0)));
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
}
.liv-bottom-logo {
  display: inline-block; vertical-align: bottom;
  width: 72px; height: 72px;
  background: #fff;
  border-radius: 8px;
  padding: 6px;
  box-sizing: border-box;
  margin-right: 20px;
}
.liv-bottom-logo img { width: 100%; height: 100%; object-fit: contain; }
.liv-bottom-main {
  display: inline-block; vertical-align: bottom;
  width: 900px;
}
.liv-bottom-chname {
  color: #9ca3af;
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 4px;
}
.liv-bottom-prog {
  font-size: 32px; font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px 6px #000;
  margin-bottom: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.liv-bottom-row { white-space: nowrap; }
.liv-bottom-row .time-chip {
  display: inline-block; vertical-align: middle;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 3px;
  margin-right: 14px;
}
.liv-bottom-row .time-end {
  display: inline-block; vertical-align: middle;
  color: #9ca3af;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  margin-left: 14px;
}
.liv-prog-track {
  display: inline-block; vertical-align: middle;
  width: 600px; height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  overflow: hidden;
}
.liv-prog-fill { height: 6px; background: #FFD700; }

/* In-player channel list — behaves exactly like the OSD: a
   transparent overlay sitting ON TOP of the video, never resizing
   the underlying surface. Only individual rows have a solid bg so
   the channel names are readable. Panel itself is fully transparent. */
.liv-list-panel {
  position: absolute; top: 80px; right: 40px; bottom: 200px;
  width: 360px;
  background: transparent;
  z-index: 1010;
  display: none;
}
.liv-list-panel.visible { display: block; }
.liv-list-head {
  height: 48px;
  padding: 0 14px;
  line-height: 48px;
  color: #FFD700;
  font-size: 12px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  margin-bottom: 8px;
}
.liv-list-head .count { float: right; color: #9ca3af; }
.liv-list-body {
  position: absolute; top: 56px; left: 0; right: 0; bottom: 44px;
  overflow-y: auto;
  padding: 0;
}
.liv-list-body::-webkit-scrollbar { width: 0; height: 0; }
.liv-list-hint {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 36px; line-height: 36px;
  text-align: center;
  color: #d1d5db;
  font-size: 11px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
}
.liv-list-hint .accent { color: #FFD700; font-weight: 700; }

.liv-list-item {
  position: relative;
  padding: 10px 12px 10px 14px;
  margin-bottom: 6px;
  border-radius: 6px;
  color: #fff;
  background: rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  min-height: 56px;
  box-sizing: border-box;
}
.liv-list-item.current {
  border-left: 4px solid #FFD700;
  padding-left: 10px;
}
.liv-list-item.focused {
  background: rgba(255,215,0,0.85);
  color: #000;
}
.liv-list-item.focused .liv-list-num { color: #000; }
.liv-list-num {
  display: inline-block; vertical-align: middle;
  width: 36px;
  color: #FFD700;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 700;
}
.liv-list-logo {
  display: inline-block; vertical-align: middle;
  width: 36px; height: 36px;
  background: #fff;
  border-radius: 4px;
  padding: 3px;
  box-sizing: border-box;
  margin-right: 10px;
}
.liv-list-logo img { width: 100%; height: 100%; object-fit: contain; }
.liv-list-name {
  display: inline-block; vertical-align: middle;
  width: 240px;
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.liv-list-prog {
  display: block;
  color: #6b7280; font-size: 11px;
  margin-left: 82px;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.liv-list-item.current .liv-list-prog { color: #9ca3af; }
.liv-list-item.focused .liv-list-prog { color: #d1d5db; }
.liv-list-current-badge {
  position: absolute;
  top: 10px; right: 12px;
  background: #FFD700; color: #000;
  font-size: 9px; font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ================= UTIL ================= */
.muted { color: #8b949e; }
.accent { color: #FFD700; }
.hidden { display: none; }
.loading-spinner {
  width: 40px; height: 40px;
  border: 4px solid #FFD700;
  border-top-color: transparent;
  border-radius: 20px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }