/* --- STYLE.CSS (UPGRADED - TIZEN FRIENDLY, NO GRID DEPENDENCY, NO GAP REQUIRED) --- */

/* ============ THEME ============ */
:root{
  --accent: #00E5FF;
  --accentSoft: rgba(0,229,255,.14);
  --bg0: #000;
  --bg1: #050505;
  --panel: #0a0a0a;
  --panel2: #111;
  --card: rgba(255,255,255,.04);
  --card2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.10);
  --border2: rgba(255,255,255,.16);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --hint: rgba(255,255,255,.45);
  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --shadowGlow: 0 4px 12px rgba(0,229,255,.15), 0 4px 10px rgba(0,0,0,.45);
  /* Etap 3: baked screen background — single definition reused across 5+ screens */
  --screenBg: radial-gradient(ellipse at 50% 0%, rgba(0,229,255,.04) 0%, transparent 60%),
              linear-gradient(180deg, #080810 0%, #0a0a0a 100%);
}

/* ============ GLOBAL ============ */

/* ======= FOCUS RING OVERLAY =======
   Single GPU layer that moves via transform to show focus position.
   Pattern used by YouTube TV / Netflix TV:
     - The ring is the ONLY element that changes border-color (one 3px border, tiny repaint)
     - Tiles themselves only change transform+opacity (compositor-only, zero CPU)
   On tizen-lo/mid: ring replaces all border-color/color changes from .focused states.
   ==================================== */
#focus-ring {
  position: fixed;
  top: 0; left: 0;
  width: 100px; height: 100px; /* overridden via inline style by JS */
  pointer-events: none;
  border: 3px solid var(--accent);
  border-radius: 16px; /* overridden via inline style */
  box-sizing: border-box;
  z-index: 99998;
  /* PERF: opacity:0 instead of display:none — opacity is compositor-only (zero layout cost).
     display:block/none triggers layout reflow every toggle. */
  opacity: 0;
  visibility: hidden;
  /* Pre-promoted GPU layer: ring move = compositor-only, never touches root layer */
  will-change: transform, opacity;
  /* Smooth glide on desktop; tizen overrides below */
  -webkit-transition: -webkit-transform .08s ease-out, width .08s ease-out, height .08s ease-out, opacity .04s ease-out;
  transition: transform .08s ease-out, width .08s ease-out, height .08s ease-out, opacity .04s ease-out;
}
.tizen-mid #focus-ring,
.tizen-lo #focus-ring {
  -webkit-transition: none;
  transition: none; /* instant snap on weak TV */
}
* { box-sizing: border-box; }

html, body {
  background-color: transparent !important;
  margin: 0;
  overflow: hidden;
  font-family: "Segoe UI", sans-serif;
  color: #fff;
  width: 1920px;
  height: 1080px;
  /* PERF: GPU root layer � promotes entire page to one compositor texture.
     translateZ(0) on root = 1 GPU layer for the whole app (not per-element). */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

::-webkit-scrollbar { display: none; }

object {
  position: absolute;
  top:0; left:0;
  width:1920px;
  height:1080px;
  z-index: -1;
}

.video-active { background: transparent !important; }
.video-active #home-screen,
.video-active #columns-view,
.video-active #search-screen,
.video-active #editor-screen { display: none !important; }

#home-screen, #settings-screen, #editor-screen { background-color: var(--bg0); }

/* Helper */
.hidden { display: none !important; }

/* ============ SPLASH ============ */
#splash {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background:#000;
  z-index:9999;
  display:flex;
  justify-content:center;
  align-items:center;
}
#splash img { width: 400px; height: auto; }

/* ============ HOME SCREEN ============ */
#home-screen {
  display: none;
  width: 1920px;
  height: 1080px;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  contain: layout style;
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(0,229,255,.09) 0%, transparent 55%),
    radial-gradient(ellipse 100% 40% at 50% 100%, rgba(0,229,255,.04) 0%, transparent 50%),
    radial-gradient(circle at center, #0d0d0d 0%, #000 70%);
  z-index: 100;
  padding-top: 130px;
}

#home-logo {
  height: 350px;
  width: auto;
  margin-bottom: 20px;
  transition: transform 0.25s;
}

#settings-icon {
  position: absolute;
  top: 50px; right: 60px;
  font-size: 50px;
  color: rgba(255,255,255,.35);
  padding: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  z-index: 10000;
  /* PERF: GPU-only transitions � color/background/border-color/box-shadow cause CPU repaint */
  -webkit-transition: -webkit-transform 0.14s, opacity 0.14s;
  transition: transform 0.14s, opacity 0.14s;
  opacity: 0.6;
}
#settings-icon.focused {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0,229,255,0.10);
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
  opacity: 1;
}

/* HISTORY SECTION */
#home-history-section {
  display: none;
  width: 100%;
  height: 240px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.home-section-title {
  width: 85%;
  font-size: 30px; /* was 24 */
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 15px;
  padding-left: 12px;
  border-left: 5px solid var(--accent);
  letter-spacing: .8px;
}

#home-history-list {
  display: flex;
  justify-content: center;
  width: 100%;
  /* NO gap */
}

.home-history-item {
  width: 220px;
  height: 160px;
  background: #1b1b1b;
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  /* GPU layer — tylko transform+opacity animowane przez kartę graficzną */
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
  contain: layout style;
  opacity: 0.80;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 10px;
}

.home-history-item img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.65;
  z-index: 1;
}

.home-history-item .history-label {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.78);
  color: rgba(255,255,255,.92);
  font-size: 16px; /* was 14 */
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-history-item.focused {
  -webkit-transform: scale(1.08) translateY(-5px);
  transform: scale(1.08) translateY(-5px);
  border-color: var(--accent);
  z-index: 10;
  opacity: 1;
  will-change: transform, opacity;
}
.home-history-item.focused img { opacity: 0.95; }

/* MAIN TILES */
.tiles-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 180px;
  /* NO gap */
}

.tile {
  width: 260px;
  height: 200px;
  background: rgba(255,255,255,.04);
  border: 3px solid rgba(255,255,255,.12);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: var(--muted);
  /* GPU — tylko transform+opacity */
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
  contain: layout style;
  opacity: 0.80;
  font-weight: 800;
  margin: 0 20px;
}

.tile i {
  font-size: 60px;
  margin-bottom: 20px;
  color: rgba(255,255,255,.80);
}

.tile.focused {
  -webkit-transform: scale(1.10) translateY(-6px);
  transform: scale(1.10) translateY(-6px);
  border-color: var(--accent);
  z-index: 10;
  opacity: 1;
  will-change: transform, opacity;
}
.tile.focused i { color: var(--accent); }

/* Small info text */
#id-display {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: var(--hint) !important;
  font-size: 18px !important;
}

/* ============ SEARCH SCREEN ============ */
/* ============ SEARCH SCREEN — PREMIUM REDESIGN ============ */
#search-screen {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  contain: layout style;
  background: var(--screenBg);
  z-index: 600;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/* ── HEADER: pełna szerokość, tytuł + wpisywana fraza ── */
.search-header {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  height: 80px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 60px;
  background: transparent;
  border-bottom: 1px solid rgba(0,229,255,.12);
  box-sizing: border-box;
}
.search-header-label {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin-right: 32px;
}
.search-header-query {
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  height: 54px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 0 24px;
  overflow: hidden;
}
#search-input-display {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  min-width: 4px;
}
.search-cursor {
  color: var(--accent);
  font-size: 32px;
  font-weight: 100;
  margin-left: 2px;
  -webkit-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.search-header-status {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin-left: 24px;
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 1px;
  min-width: 160px;
  text-align: right;
}

/* ── GŁÓWNY OBSZAR: klawiatura + wyniki ── */
.search-body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex: 1;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* LEWA KOLUMNA — klawiatura */
.search-left {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 580px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: transparent;
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 24px 0;
}

/* PRAWA KOLUMNA — wyniki */
.search-right {
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

/* KEYBOARD (NO GAP) */
.keyboard-grid {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.kb-section {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 10px;
}
.key-btn {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.75);
  width: 83px;
  height: 70px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 24px;
  border-radius: 10px;
  border: 2px solid transparent;
  font-weight: 700;
  margin: 3px;
  /* PERF: no translateZ(0) � transition: none means no animation cost */
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 0.75;
  -webkit-transition: none;
  transition: none;
}
.key-btn.focused {
  border-color: var(--accent);
  background: rgba(0,229,255,.18);
  color: #fff;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  opacity: 1;
  z-index: 10;
  will-change: transform, opacity;
}
.key-btn.action-btn {
  -webkit-flex: 1;
  flex: 1;
  min-width: 130px;
  max-width: 180px;
  background: rgba(255,255,255,.10);
  font-size: 18px;
  border-radius: 10px;
}
.kb-section-actions {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  margin-bottom: 0;
}

/* === KLAWIATURA KATEGORII (inline) === */
#cat-kb-inline {
  display: none;
  position: absolute;
  top: 110px;
  left: 0;
  width: 100%;
  padding: 10px 12px 8px;
  background: rgba(10,10,10,.95);
  border-bottom: 2px solid rgba(255,255,255,.10);
  z-index: 22;
  box-sizing: border-box;
}
.cat-kb-input-inline {
  width: 100%;
  min-height: 38px;
  background: rgba(255,255,255,.07);
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 24px;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: 1px;
  box-sizing: border-box;
}
.cat-kb-grid-inline {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.ckb-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  margin-bottom: 2px;
}
.ckb-key {
  width: 68px;
  height: 62px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 2px solid transparent;
  border-radius: 6px;
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
  margin: 2px;
  /* PERF: GPU-only — border-color/background force CPU repaint */
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
}
.ckb-key.focused {
  border-color: var(--accent);
  background: rgba(255,255,255,.20);
  color: #fff;
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(0,229,255,.35);
}
.ckb-key.clr-wide {
  width: 136px;
}

/* ── KARTY KATEGORII — 3 poziomo ── */
#search-cards-wrapper {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  padding: 40px 40px;
  -webkit-align-items: stretch;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
}
.search-card {
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: var(--card);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 20px;
  margin: 0 20px;
  padding: 40px 20px;
  box-shadow: var(--shadow);
  color: rgba(255,255,255,.65);
  /* GPU — tylko transform+opacity */
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
  contain: layout style;
  opacity: 0.78;
}
.search-card:first-child { margin-left: 0; }
.search-card:last-child  { margin-right: 0; }
.search-card.focused {
  -webkit-transform: scale(1.06) translateY(-6px);
  transform: scale(1.06) translateY(-6px);
  border-color: var(--accent);
  z-index: 10;
  opacity: 1;
  will-change: transform, opacity;
}
.scard-icon {
  font-size: 38px;
  color: rgba(255,255,255,.45);
  margin-bottom: 14px;
}
.search-card.focused .scard-icon {
  color: var(--accent);
}
.scard-info { text-align: center; }
.scard-title {
  font-size: 22px;
  font-weight: 800;
  color: rgba(255,255,255,.75);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.search-card.focused .scard-title { color: #fff; }
.scard-count {
  font-size: 36px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}
.scard-count-label {
  font-size: 16px;
  color: rgba(255,255,255,.38);
  letter-spacing: 1px;
  margin-top: 4px;
}
.scard-count-zero { color: rgba(255,255,255,.22); }

/* ── SIATKA WYNIKÓW (postery) ── */
#search-grid-view {
  -webkit-flex: 1;
  flex: 1;
  display: none;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: flex-start;
  align-content: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 50px 6px 20px;
  -webkit-overflow-scrolling: touch;
  /* position:relative so offsetTop of children is relative to this container */
  position: relative;
  box-sizing: border-box;
  background-image: linear-gradient(to bottom, rgba(10,10,10,.95) 0%, rgba(10,10,10,.95) 40px, transparent 40px);
  background-attachment: fixed;
}
.search-item-wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
  contain: layout style;
  will-change: transform;
  opacity: 0.85;
  width: 250px;
  min-width: 0;
  overflow: hidden;
  margin: 0 7px 36px 7px;
}
.search-item-wrapper > div { margin-bottom: 6px; }
.search-poster {
  width: 250px;
  height: 394px;
  background: rgba(255,255,255,.04);
  border: 2px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}
.search-poster img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  background: rgba(255,255,255,.04);
}
.search-item-title {
  font-size: 24px;
  color: rgba(255,255,255,.60);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  padding: 0 4px;
}
.search-item-wrapper.focused {
  -webkit-transform: scale(1.06) translateY(-6px);
  transform: scale(1.06) translateY(-6px);
  opacity: 1;
  z-index: 10;
}
.search-item-wrapper.focused .search-poster {
  border-color: var(--accent);
}
.search-item-wrapper.focused .search-item-title {
  color: #fff;
}

/* ============ COLUMNS VIEW ============ */
#columns-view{
  display: none;
  position: absolute;
  top:0; left:0;
  width:1920px;
  height:1080px;
  overflow: hidden;
  background: #050508;
  z-index: 500;
  contain: layout style;
}

/* Nagłówek ekranu list — identyczny styl jak editor-page-header */
.columns-page-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0 40px;
  background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 100%);
  border-bottom: 1px solid rgba(0,229,255,.10);
  z-index: 30;
  box-sizing: border-box;
}
.columns-page-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.columns-page-hint {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  font-size: 18px;
  color: rgba(255,255,255,.38);
  white-space: nowrap;
}
.columns-page-hint span {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.columns-page-hint i {
  font-size: 15px;
  color: rgba(0,229,255,.6);
  margin-right: 4px;
}

#sliding-wrapper{ position: absolute; top: 64px; left: 0; right: 0; bottom: 0; }

.col-categories{
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 520px;
  background: linear-gradient(135deg, #0c0c14 0%, #08080e 100%);
  border-right: 1px solid rgba(0,229,255,.10);
  z-index: 20;
}

.col-channels{
  position: absolute;
  top: 0; bottom: 0;
  left: 520px;
  width: 1400px;
  background: #0a0a0f;
  border-right: none;
  display: none;
}
#sliding-wrapper.show-channels .col-channels { display: block; }

.panel-header{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 90px;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  z-index: 10;
}

.list-title{
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.list-viewport{
  position: absolute;
  top: 90px; bottom: 0; left: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
  -webkit-overflow-scrolling: touch;
}

.vod-grid-content{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  /* padding handled by #ch-list-container.vod-grid-content (ID specificity) */
}

/* Lists */
#cat-list-container { padding: 6px 12px; overflow-x: visible; }
#ch-list-container { padding: 6px 12px; overflow-x: visible; }
#ch-list-container.vod-grid-content { padding: 24px 0px 0 10px; }

.list-item{
  padding: 12px 18px;
  font-size: 24px;
  color: rgba(255,255,255,.70);
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 3px 8px;
  contain: layout style;
  opacity: 0.80;
}

/* Category list: no icon so increase padding to match channel list item height (~11 visible items) */
#cat-list-container .list-item { padding: 20px 18px; }

.list-item.focused{
  background-color: rgba(0,229,255,.08) !important;
  border: 2px solid rgba(0,229,255,.35) !important;
  color: #fff !important;
  opacity: 1;
}

.list-item.focused i,
.list-item.focused img{
  color: var(--accent);
  text-shadow: 0 0 5px rgba(0,229,255,0.8);
}
/* PERF: Tizen 4 \u2014 disable all transitions, no GPU compositing overhead */
.tizen-lo .list-item { -webkit-transition: none; transition: none; }
.tizen-lo .list-item.focused { will-change: auto; }
.tizen-mid .list-item.focused {
  background-color: rgba(0,229,255,.06) !important;
  border-color: rgba(0,229,255,.24) !important;
}
.tizen-mid .list-item.focused i,
.tizen-mid .list-item.focused img{
  text-shadow: none;
}

.ch-icon{
  width: 50px; height: 50px;
  object-fit: contain;
  margin-right: 20px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
}
.ch-icon-fa{
  width: 50px; height: 50px;
  margin-right: 20px;
  flex-shrink: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 24px;
  color: rgba(255,255,255,.55);
}
.ch-name{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-epg-now{
  max-width: 460px;
  min-width: 0;
  font-size: 22px;
  color: rgba(255,255,255,0.30);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  margin-left: 12px;
  margin-right: 64px;
  font-style: italic;
}

/* Search box */
.search-box{
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 5px 15px;
  width: 240px;
  transition: transform .12s ease-out, opacity .12s ease-out;
}
.search-box i{
  color: rgba(255,255,255,.55);
  margin-right: 10px;
  font-size: 20px;
}
.search-input{
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  width: 100%;
  outline: none;
}
.search-box.focused{
  border-color: var(--accent);
  opacity: 1;
}

/* VOD posters */
.vod-item-wrapper{
  width: 254px;
  display: flex;
  flex-direction: column;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
  /* content-visibility removed: windowing controls DOM, CV:auto fights it and causes remeasure jank */
  contain: layout style;
  /* Pre-promote all visible tiles to GPU layers so focus transition has zero layer-creation cost */
  will-change: transform;
  opacity: 0.85;
  margin: -10px 12px 32px 12px;
}
.vod-item-wrapper > div { margin-bottom: 6px; }

.vod-poster{
  width: 254px;
  height: 392px;
  background: rgba(255,255,255,.04);
  border: 2px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}
/* Gradient overlay at bottom of poster */
.vod-poster::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(transparent, rgba(0,0,0,.5));
  pointer-events: none;
}
.vod-poster img{ width: 100%; height: 100%; object-fit: cover; }

.vod-title{
  font-size: 24px;
  color: rgba(255,255,255,.60);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  padding: 0 4px;
}

.vod-item-wrapper.focused{
  /* will-change already set on base — no layer creation at focus time */
  -webkit-transform: scale(1.06) translateY(-6px);
  transform: scale(1.06) translateY(-6px);
  opacity: 1;
  z-index: 10;
}
.vod-item-wrapper.focused .vod-poster{
  border-color: var(--accent);
  /* PERF-E1: box-shadow var(--shadowGlow) removed — dual shadow triggers expensive paint per focus change */
}
.vod-item-wrapper.focused .vod-title{
  color: #fff;
  /* PERF-E1: font-weight:800 removed — triggers layout reflow in grid on every focus change */
}

/* ============ PLAYER UI ============ */
#subs{
  display: block;
  position: absolute;
  bottom: 80px;
  width: 100%;
  text-align: center;
  z-index: 9999;
  pointer-events: none;
}
#subs span{
  display: inline-block;
  background: transparent;
  padding: 5px 10px;
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    0px 3px 6px rgba(0,0,0,1);
  line-height: 1.3;
}

#vod-ui{
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  transition: opacity 0.35s;
}

/* Top icons (NO gap, use margin) */
.vod-top-icons{
  position: absolute;
  top: 40px;
  right: 60px;
  display: flex;
}

.vod-icon{
  background: rgba(0,0,0,0.60);
  padding: 15px 25px;
  border-radius: 12px;
  font-size: 24px;
  color: rgba(255,255,255,.72);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  min-width: 140px;
  justify-content: center;
  margin-left: 18px; /* replaces gap */
  transition: transform .12s ease-out, opacity .12s ease-out;
  contain: layout style;
}

.vod-icon.focused{
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.06);
  opacity: 1;
  will-change: transform, opacity;
}

.vod-icon.vod-icon-active{
  color: var(--accent);
  border-color: rgba(0,229,255,0.35);
}

.vod-icon.vod-icon-active.focused{
  color: #fff;
  border-color: var(--accent);
}

.vod-controls{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 250px;
  background: linear-gradient(to top, rgba(0,0,0,1), transparent);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 50px;
}

.progress-container{
  width: 90%;
  margin: 0 auto;
  height: 10px;
  background: rgba(255,255,255,.18);
  border-radius: 6px;
  position: relative;
}

.progress-preview{
  position:absolute;
  top:0; left:0;
  height:100%;
  background: rgba(255,255,255,0.28);
  width:0%;
  border-radius:6px;
}

.progress-bar{
  height: 100%;
  background: #e50914;
  width: 0%;
  border-radius: 6px;
  position: relative;
  z-index: 2;
}

.time-display{
  width: 90%;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: rgba(255,255,255,.72);
}

.vod-buttons{
  text-align: center;
  margin-top: 20px;
  font-size: 50px;
  color: #fff;
}

.vod-btn-center{
  display: inline-block;
  padding: 10px 30px;
  border-radius: 50%;
  border: 3px solid transparent;
  margin: 0 10px;
  transition: transform .12s, background .12s, border-color .12s, color .12s;
}

.vod-btn-center.focused{
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0,229,255,.10);
  transform: scale(1.05);
}

#seek-popup{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:rgba(0,0,0,0.72);
  padding:20px 40px;
  border-radius:15px;
  font-size:40px;
  font-weight:900;
  color:#fff;
  border:2px solid var(--accent);
  z-index:3000;
}

/* VOD UI w trybie catch-up: ukryj przyciski audio/napisy/aspect (nieistotne dla archiwalnych stacji) */
#vod-ui.catchup-mode .vod-top-icons { display: none !important; }
#vod-ui.catchup-mode #vod-resolution { display: none !important; }

/* ============ CATCHUP SEEK UI (nieu�ywany backup overlay) ============ */
#catchup-seek-ui {
  display: none;
  position: absolute;
  bottom: 80px;
  left: 80px;
  right: 80px;
  background: rgba(0,0,0,0.92);
  border-radius: 14px;
  padding: 22px 36px 18px;
  z-index: 99999;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 60px rgba(0,0,0,0.9);
}
#cu-seek-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}
.cu-seek-times {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.9);
}
.cu-seek-pb-container {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}
#cu-seek-pb {
  height: 100%;
  background: var(--accent, #e31d3e);
  border-radius: 3px;
  /* PERF-E1: width→scaleX — GPU-only composite instead of layout-triggering width animation */
  width: 100%;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
}
.cu-seek-hint {
  text-align: center;
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
}

/* ============ POPUPS ============ */
.popup-menu{
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 720px;
  background: rgba(0,0,0,0.95);
  border: 2px solid var(--accent);
  border-radius: 15px;
  padding: 30px;
  z-index: 3000;
  text-align: center;
  box-shadow: 0 20px 70px rgba(0,0,0,.65);
}

.track-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 20px;
  max-height: 500px;
  overflow-y: auto;
}

#track-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
  padding: 10px 10px 10px 10px;
}

/* Language selector � always 4 columns to match keyboard navigation */
#lang-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
  padding: 10px;
  max-height: none;
  overflow: visible;
}
#lang-menu .track-tile {
  width: 100%;
  margin: 0;
  height: 72px;
  font-size: 20px;
}

#track-grid .track-tile {
  width: 100%;
  margin: 0;
  font-size: 18px;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  line-height: 1.3;
  padding: 8px 6px;
  height: auto;
  min-height: 70px;
}

.track-tile{
  width: 140px;
  height: 90px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: rgba(255,255,255,.68);
  transition: transform 0.10s ease-out, opacity 0.10s ease-out;
  margin: 10px;
  contain: layout style;
}

.track-tile.focused{
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.04);
  opacity: 1;
  will-change: transform, opacity;
}

.resume-btn{
  display: block;
  width: 100%;
  padding: 20px;
  background: rgba(255,255,255,.06);
  margin: 10px 0;
  font-size: 28px;
  color: rgba(255,255,255,.78);
  border: 2px solid transparent;
  border-radius: 12px;
  transition: transform .12s ease-out, opacity .12s ease-out;
  contain: layout style;
}

.resume-btn.focused{
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.02);
  opacity: 1;
  will-change: transform, opacity;
}

/* ============ FAVORITES DASHBOARD ============ */
.dashboard-container{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: var(--screenBg);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  z-index: 200;
}

.dash-header{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 60px;
  background: transparent;
  border-bottom: 1px solid rgba(0,229,255,.12);
  z-index: 201;
}
.dash-header .dh-icon{
  font-size: 28px;
  color: var(--accent);
  margin-right: 14px;
}
.dash-header .dh-title{
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dash-grid{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.dash-tile{
  width: 280px;
  height: 380px;
  background: var(--card);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 16px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  color: rgba(255,255,255,.65);
  margin: 0 18px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .14s cubic-bezier(.25,.1,.25,1), opacity .14s cubic-bezier(.25,.1,.25,1);
  transition: transform .14s cubic-bezier(.25,.1,.25,1), opacity .14s cubic-bezier(.25,.1,.25,1);
  contain: layout style;
  opacity: .85;
}

.dash-tile i{
  font-size: 56px;
  margin-bottom: 20px;
  color: rgba(255,255,255,.60);
}
.dash-tile .dash-label{
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  color: rgba(255,255,255,.75);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.dash-tile.focused{
  -webkit-transform: scale(1.07) translateY(-6px);
  transform: scale(1.07) translateY(-6px);
  border-color: var(--accent);
  opacity: 1;
  z-index: 10;
  will-change: transform, opacity;
  /* PERF: background + box-shadow removed � CPU repaint on each focus change */
}
.dash-tile.focused i{
  color: var(--accent);
  text-shadow: 0 0 8px rgba(0,229,255,.5);
}
.dash-tile.focused .dash-label{
  color: #fff;
}

/* ============ SETTINGS / EDITOR / LOADER ============ */
#settings-screen{
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  background: var(--screenBg);
  z-index: 200;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* Settings header � left-aligned title bar */
.settings-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 60px;
  border-bottom: 1px solid rgba(0,229,255,.12);
  box-sizing: border-box;
}
.settings-title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0;
}

/* 3-column CSS Grid layout */
.settings-grid {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: flex-start;
  align-content: flex-start;
  width: 960px;
  margin-top: 16px;
  gap: 14px;
}

/* Individual card */
.settings-card {
  width: 300px;
  height: 175px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 18px;
  cursor: pointer;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .14s ease-out, opacity .14s ease-out;
  transition: transform .14s ease-out, opacity .14s ease-out;
  opacity: .7;
  contain: layout style;
}
.settings-card-icon {
  font-size: 34px;
  color: rgba(255,255,255,.45);
  margin-bottom: 12px;
}
.settings-card-label {
  font-size: 19px;
  font-weight: 800;
  color: rgba(255,255,255,.75);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.settings-card-value {
  font-size: 16px;
  color: rgba(255,255,255,.35);
  margin-top: 5px;
  min-height: 20px;
}

/* Focused card */
.settings-card.focused {
  -webkit-transform: scale(1.06) translateY(-5px);
  transform: scale(1.06) translateY(-5px);
  opacity: 1;
  border-color: var(--accent);
  will-change: transform, opacity;
}
.settings-card.focused .settings-card-icon { color: var(--accent); }
.settings-card.focused .settings-card-label { color: #fff; }
.settings-card.focused .settings-card-value { color: var(--accent); }

/* ── Section divider — standalone block between two grids ── */
.settings-section-divider {
  width: 960px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 10px 0 6px;
}
.settings-section-line {
  -webkit-flex: 1;
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(160,155,255,0.60), transparent);
  margin: 0 14px;
}
.settings-section-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(160,155,255,0.90);
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.settings-section-label span {
  color: rgba(160,155,255,0.55);
}

/* ── HEIO™ Feature cards ── */
/* OFF state: lekko fioletowe, widocznie inne od zwykłych kart */
.settings-card-feature {
  background: rgba(108,99,255,0.09);
  border-color: rgba(130,120,255,0.30);
  opacity: 0.80;
}
.settings-card-feature .settings-card-icon {
  font-size: 38px;
  color: rgba(160,155,255,0.50);
}
.settings-card-feature .settings-card-label {
  color: rgba(200,196,255,0.65);
}
.settings-card-feature .settings-card-value {
  color: rgba(140,135,255,0.45);
}
/* Focused (but still OFF) */
.settings-card-feature.focused {
  border-color: rgba(160,155,255,0.55);
  background: rgba(108,99,255,0.10);
  -webkit-transform: scale(1.06) translateY(-5px);
  transform: scale(1.06) translateY(-5px);
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(160,155,255,0.15), 0 8px 28px rgba(108,99,255,0.20);
}
.settings-card-feature.focused .settings-card-icon { color: rgba(180,175,255,0.80); }
.settings-card-feature.focused .settings-card-label { color: rgba(255,255,255,0.90); }
.settings-card-feature.focused .settings-card-value { color: rgba(160,155,255,0.70); }

/* ON state: pełny fiolet, jasność pełna — wyraźnie włączone */
.settings-card-active {
  background: rgba(108,99,255,0.28) !important;
  border-color: #7c75ff !important;
  border-width: 2px !important;
  opacity: 1 !important;
  box-shadow: 0 0 28px rgba(108,99,255,0.30) !important;
}
.settings-card-active .settings-card-icon { color: #b0abff !important; }
.settings-card-active .settings-card-label { color: #e0ddff !important; }
.settings-card-active .settings-card-value { color: #b0abff !important; }
/* ON + focused */
.settings-card-active.focused {
  background: rgba(108,99,255,0.40) !important;
  border-color: #c4c0ff !important;
  box-shadow: 0 0 0 1px rgba(196,192,255,0.35), 0 8px 36px rgba(108,99,255,0.45) !important;
}
.settings-card-active.focused .settings-card-icon { color: #deddff !important; }
.settings-card-active.focused .settings-card-label { color: #fff !important; }
.settings-card-active.focused .settings-card-value { color: #deddff !important; }

/* Playlists screen */
#playlists-screen {
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #050505;
  z-index: 500;
  align-items: stretch;
}
[id^="pl-tile-"].focused {
  border-color: var(--accent) !important;
  box-shadow: 0 0 28px rgba(0,229,255,.25) !important;
  transform: scale(1.04);
  background: rgba(0,229,255,.06) !important;
}
#qr-overlay { display: none; }

#editor-screen{
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #050505;
  z-index: 500;
}

#loader{
  display: none;
  position: absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.82);
  z-index:5000;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  color: var(--accent);
  font-size:24px;
}

/* ============ PSYCHO-UX: CHANNEL PREVIEW ============ */
#channel-preview{
  display:none;
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index:6000; /* powyżej #loader (5000) — logo kanału zawsze na wierzchu */
  background: #0a0a0a;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  transition: opacity .35s ease-out;
}
#cp-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#cp-logo{
  width:320px;
  max-height:180px;
  object-fit:contain;
  margin-bottom:36px;
  border-radius:16px;
}
#cp-spinner{
  display:none;
}
#cp-name{
  color:rgba(255,255,255,.65);
  font-size:22px;
  font-weight:400;
  letter-spacing:2px;
  text-transform:uppercase;
}
/* LiveCheck™ — stream health indicator */
.lc-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:7px;vertical-align:middle;opacity:0;}
.lc-ok{background:#22c55e;opacity:1;}
.lc-warn{background:#eab308;opacity:1;}
.lc-bad{background:#ef4444;opacity:1;}

/* ============ PIN POPUP ============ */
#pin-popup{
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.90);
  z-index: 5000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.pin-title{
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.pin-dots-container{
  display: flex;
  margin-bottom: 30px;
  /* NO gap -> use margin on dots */
}

.pin-dot{
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 50%;
  background: transparent;
  transition: background 0.14s, border-color 0.14s;
  margin: 0 10px; /* replaces gap */
}

.pin-dot.filled{
  background: var(--accent);
  border-color: var(--accent);
}

/* PIN KEYBOARD (keep your grid version; if old Tizen breaks it, switch to flex in JS/HTML) */
.pin-keyboard{
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.pin-key{
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.10);
  border: 2px solid transparent;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  margin: 0;
  /* PERF: GPU-only — background/border-color/box-shadow/color transitions cause CPU repaint */
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
}

.pin-key.focused{
  background: rgba(0,229,255,.75);
  color: #000;
  transform: scale(1.06);
  box-shadow: 0 0 18px rgba(0,229,255,.45);
  z-index: 10;
  border-color: #fff;
}

.pin-key.action-btn{
  font-size: 24px;
  background: rgba(255,0,0,0.18);
}

/* ============ PIN CHANGE POPUP ============ */
#pin-change-popup{
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--screenBg);
  z-index: 5000;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  color: #fff;
}
.pc-title{
  font-size: 32px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
  color: var(--accent);
}
.pc-title i{
  margin-right: 12px;
  font-size: 28px;
}
.pc-step-dots{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 28px;
}
.pc-step-dot{
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.25);
  -webkit-transition: background .2s, border-color .2s, -webkit-transform .2s;
  transition: background .2s, border-color .2s, transform .2s;
}
.pc-step-dot.active{
  background: var(--accent);
  border-color: var(--accent);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(0,229,255,.5);
}
.pc-step-dot.done{
  background: rgba(0,229,255,.4);
  border-color: rgba(0,229,255,.6);
}
.pc-msg{
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-height: 32px;
  margin-top: 16px;
  margin-bottom: 8px;
  text-align: center;
}

/* ============ FAVORITES HEARTS ============ */
.is-fav { border-color: transparent !important; position: relative; }

.vod-item-wrapper.is-fav::after,
.list-item.is-fav::after{
  content: "\f004";
  font-family: "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  color: red;
  position: absolute;
  z-index: 10;
}

.vod-item-wrapper.is-fav::after{
  top: 10px; right: 10px;
  font-size: 32px;
}

.list-item.is-fav::after{
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
}

.search-item-wrapper.is-fav .search-poster::after{
  content: "\f004";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: red;
  position: absolute;
  top: 10px; right: 10px;
  font-size: 32px;
  z-index: 200;
}

.search-item-wrapper.is-fav.focused .search-poster{
  border-color: var(--accent) !important;
}

/* ============ EXIT / INFO / ERRORS ============ */
#exit-popup{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items: center;
}

.exit-box{
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.14);
  padding: 40px;
  border-radius: 14px;
  text-align: center;
  width: 520px;
  box-shadow: 0 20px 70px rgba(0,0,0,.65);
}

.exit-title{
  font-size: 30px;
  color: #fff;
  margin-bottom: 30px;
  font-weight: 900;
}

.exit-buttons{ display: flex; justify-content: center; }

.exit-btn{
  padding: 15px 30px;
  font-size: 24px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.70);
  border: 3px solid transparent;
  border-radius: 10px;
  margin: 0 10px;
  /* PERF: GPU-only transition */
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
}

.exit-btn.focused{
  background: rgba(0,229,255,.18);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(0,229,255,.18);
  transform: scale(1.05);
}

#info-bar{
  display: none;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 350px;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 0 60px 50px 60px;
  box-sizing: border-box;
  z-index: 2000;
  pointer-events: none;
  transition: opacity 0.35s;
}

.info-layout{ display: flex; align-items: center; width: 100%; }
#info-logo{
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: rgba(255,255,255,0.08);
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  margin-right: 30px;
}

.info-content{ flex: 1; display: flex; flex-direction: column; }
#info-ch-name{
  font-size: 34px;
  color: #fff;
  font-weight: 900;
  text-shadow: 2px 2px 4px rgba(0,0,0,1);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}
.info-resolution{
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0,229,255,0.12);
  border: 1px solid rgba(0,229,255,0.30);
  border-radius: 4px;
  padding: 2px 9px;
  letter-spacing: 0.5px;
  text-shadow: none;
  flex-shrink: 0;
  display: none;
}
.info-resolution:not(:empty){
  display: inline-block;
}
.vod-resolution{
  position: absolute;
  top: 52px;
  left: 60px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.38);
  background: rgba(0,0,0,0.45);
  border-radius: 4px;
  padding: 4px 10px;
  letter-spacing: 0.5px;
  display: none;
}
#info-epg{
  font-size: 24px;
  color: rgba(255,255,255,.72);
  margin-bottom: 4px;
  text-shadow: 1px 1px 3px rgba(0,0,0,1);
}
#info-epg-next{
  font-size: 20px;
  color: rgba(255,255,255,.45);
  margin-bottom: 8px;
  text-shadow: 1px 1px 3px rgba(0,0,0,1);
}

.epg-progress-bg{
  width: 98%;
  height: 6px;
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 5px;
}

.epg-progress-fill{
  height: 100%;
  width: 0%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(0,229,255,.35);
}

/* ── Info-bar: TV Guide hint ── */
.info-guide-hint{
  position: absolute;
  bottom: 18px;
  right: 60px;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.7;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  letter-spacing: 0.5px;
}
.info-guide-hint i{
  font-size: 16px;
}

#no-internet-screen{
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  z-index: 9999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
}

.no-net-icon{ font-size: 100px; color: #e50914; margin-bottom: 30px; }
.no-net-text{ font-size: 36px; font-weight: 900; }
.no-net-sub{ font-size: 24px; color: rgba(255,255,255,.55); margin-top: 10px; }

#stream-error-overlay{
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.80);
  z-index: 10;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.error-msg{
  font-size: 28px;
  color: rgba(255,255,255,.75);
  margin-top: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
}

.error-retry{
  font-size: 22px;
  color: var(--accent);
  margin-top: 24px;
  letter-spacing: 1px;
  animation: retryPulse 1.5s ease-in-out infinite;
}

@keyframes retryPulse{
  0%, 100%{ opacity: 0.6; }
  50%{ opacity: 1; }
}

.spinner{
  border: 6px solid rgba(255,255,255,0.10);
  border-top: 6px solid var(--accent);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.search-left-title{ display:none; }
.search-right-title{ display:none; }
/* #search-status is now inline in .search-header — styles via .search-header-status */
#search-status{ /* legacy rule neutralized */ }

.popup-title{ font-size:30px; color:var(--accent); margin-bottom:20px; font-weight: 900; }
.popup-small{ width: 500px; }
.resume-time{ color:#aaa; margin:20px 0; }

.screen{ display:none; position:absolute; top:0; left:0; width:100%; height:100%; }

/* ===== EDITOR KATEGORII — PREMIUM REDESIGN ===== */

/* Górny pasek nagłówka całego ekranu */
.editor-page-header{
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 88px;
  padding: 0 48px;
  background: #000;
  border-bottom: 2px solid rgba(0,229,255,.25);
  box-shadow: 0 2px 24px rgba(0,229,255,.07);
}
.editor-page-title{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
}
.editor-page-hint{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  font-size: 20px;
  color: rgba(255,255,255,.42);
}
.editor-page-hint span{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.editor-page-hint span i{
  margin-right: 5px;
}
.editor-hint-sep{
  margin: 0 18px;
  color: rgba(255,255,255,.18);
  font-size: 22px;
}

/* Obszar trzech kolumn */
.editor-columns-area{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex: 1;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Pojedyncza kolumna */
.editor-col{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.editor-col-border{
  border-left: 2px solid rgba(255,255,255,.08);
  border-right: 2px solid rgba(255,255,255,.08);
}

/* Nagłówek kolumny (TV / MOVIES / SERIES) */
.editor-col-header{
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 80px;
  border-bottom: 2px solid rgba(255,255,255,.08);
  background: rgba(0,229,255,.04);
}
.editor-col-title{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--accent);
  text-transform: uppercase;
}

/* Wrapper listy (toggle + scroll) */
.editor-list{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Wiersz z przyciskiem TOGGLE ALL */
.editor-toggle-row{
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  padding: 10px 16px;
  background: #000;
  border-bottom: 2px solid rgba(255,255,255,.08);
}
.editor-toggle-row .list-item{
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.12);
  padding: 14px 0;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  -webkit-transition: background .12s, border-color .12s, color .12s;
  transition: background .12s, border-color .12s, color .12s;
}
.editor-toggle-row .list-item.focused{
  background: rgba(0,229,255,.15);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 16px rgba(0,229,255,.2);
  -webkit-transform: none;
  transform: none;
}

/* Obszar przewijania listy */
.editor-list-area{
  -webkit-flex: 1;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.editor-list-inner{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
}

/* Pozycje listy w edytorze */
.editor-list-inner .list-item{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 14px 20px;
  font-size: 22px;
  border: 2px solid transparent;
  border-radius: 10px;
  /* BRAK transition — eliminuje smugę przy szybkim scrollu */
  -webkit-transition: none;
  transition: none;
  margin: 3px 8px;
  color: rgba(255,255,255,.68);
}
.editor-list-inner .list-item:nth-child(even){
  background: rgba(255,255,255,.025);
}
.editor-list-inner .list-item.focused{
  background: rgba(0,229,255,.12) !important;
  border: 2px solid var(--accent) !important;
  border-radius: 10px !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(0,229,255,.15);
  -webkit-transform: none;
  transform: none;
}
/* Ikony stanu w edytorze — kolor NIE zmienia się przy focusie
   Celujemy bezpośrednio w <i> żeby pobić globalną regułę .list-item.focused i */
.editor-list-inner .list-item .editor-item-icon-on i,
.editor-list-inner .list-item.focused .editor-item-icon-on i {
  color: var(--accent) !important;
  filter: none !important;
}
.editor-list-inner .list-item .editor-item-icon-off i,
.editor-list-inner .list-item.focused .editor-item-icon-off i {
  color: #ff4444 !important;
  filter: none !important;
}

/* Aktywna kolumna — delikatne podświetlenie ramki */
.editor-col.active-col > .editor-col-header{
  background: rgba(0,229,255,.09);
  border-bottom-color: var(--accent);
}

/* ===== SETTINGS DEVICE INFO FOOTER ===== */
#settings-device-info {
  position: absolute !important;
  bottom: 60px !important;
  left: 0;
  right: 0;
  z-index: 10;
  text-align: center;
  font-size: 17px;
  color: rgba(255,255,255,.65);
  padding: 0 30px;
  box-sizing: border-box;
  line-height: 1.7;
  letter-spacing: 0.5px;
  pointer-events: none;
}

/* ===== UNIVERSAL SCREEN HINT BAR ===== */
.screen-hint-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: rgba(5,5,5,.92);
  border-top: 1px solid rgba(0,229,255,.18);
  z-index: 50;
  padding: 0 40px;
  box-sizing: border-box;
}
.screen-hint-bar .hint-group {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  font-size: 19px;
  color: rgba(255,255,255,.42);
  white-space: nowrap;
}
.screen-hint-bar .hint-group i {
  font-size: 15px;
  color: rgba(0,229,255,.65);
  margin-right: 5px;
}
.screen-hint-bar .hint-group b {
  color: rgba(255,255,255,.62);
  font-weight: 700;
  margin-right: 4px;
}
.screen-hint-bar .hint-sep {
  margin: 0 20px;
  color: rgba(255,255,255,.15);
  font-size: 20px;
}
/* home-screen: hint bar przez margin-top:auto bo layout to flex */
#home-screen .screen-hint-bar {
  position: absolute;
  bottom: 0;
}

/* ===== LEGAL MODAL + SETUP SCREEN (MOVED FROM INLINE <style>) ===== */

/* LEGAL MODAL */
#legal-modal-tv{
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(5,5,5,.98);
  z-index: 999999;
  display: none;            /* IMPORTANT */
  justify-content: center;
  align-items: center;
  color: #fff;
}

.legal-content-tv{
  width: 80%;
  max-width: 900px;
  background: #111;
  border: 2px solid #333;
  border-radius: 20px;
  padding: 50px;
  text-align: center;
  box-shadow: 0 0 100px rgba(0,0,0,.9);
}

.legal-title{
  font-size: 40px;
  font-weight: 900;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  color:#fff;
}

.legal-subtitle{
  font-size: 22px;
  color: rgba(255,255,255,.5);
  margin: 0 0 35px 0;
}

.legal-text{
  font-size: 24px;
  color:#ccc;
  line-height: 1.5;
  margin: 0 0 40px 0;
  text-align: left;
}

.legal-list{
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  text-align: left;
}

.legal-list li{
  font-size: 22px;
  color:#ddd;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.icon-check{
  color: #00E5FF;
  font-size: 30px;
  min-width: 40px;
  margin-right: 15px; /* вместо gap */
}

.legal-footnote{
  font-size: 14px;
  color: #777;
  margin: -20px 0 30px 0;
}

#btn-accept-tv{
  background: #00E5FF;
  color: #000;
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  padding: 20px 60px;
  border-radius: 50px;
  border: 4px solid transparent;
  cursor: pointer;
  display: inline-block;
  transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}

#btn-accept-tv:focus,
#btn-accept-tv.focused{
  background: #fff;
  border-color: #00E5FF;
  transform: scale(1.05);
  box-shadow: 0 0 50px rgba(0,229,255,.6);
  outline: none;
}

/* SETUP / EXPIRED MODAL */
#setup-screen,
#expired-screen{
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(5,5,5,.97);
  z-index: 999900;
  display: none;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.setup-modal-box{
  display: flex;
  flex-direction: row;
  background: #111;
  border: 2px solid #333;
  border-radius: 24px;
  box-shadow: 0 0 120px rgba(0,0,0,.9);
  max-width: 1100px;
  width: 90%;
  overflow: hidden;
}

.setup-modal-left{
  flex: 1;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.setup-modal-right{
  width: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,.03);
  border-left: 1px solid #222;
  padding: 40px;
}

.setup-title{
  font-size: 38px;
  font-weight: 900;
  color:#fff;
  margin: 0 0 20px 0;
  text-transform: uppercase;
  letter-spacing: -1px;
}

.setup-step{
  font-size: 22px;
  color:#aaa;
  margin: 0 0 30px 0;
  line-height: 1.6;
}

.setup-url{
  color: var(--accent);
  font-weight: 800;
  border-bottom: 2px solid var(--accent);
}

.setup-info-boxes{
  display: flex;
  margin-bottom: 30px;
}

.mac-box-tv{
  background: rgba(255,255,255,.04);
  border: 2px solid #333;
  border-radius: 12px;
  padding: 16px 24px;
}

.mac-label{
  font-size: 14px;
  text-transform: uppercase;
  color:#555;
  letter-spacing: 2px;
  display:block;
  margin-bottom: 8px;
}

.mac-value{
  font-family: "Courier New", monospace;
  font-size: 28px;
  color: var(--accent);
  letter-spacing: 3px;
  font-weight: 900;
}

.pin-value{
  font-family: "Courier New", monospace;
  font-size: 36px;
  color: var(--accent);
  letter-spacing: 8px;
  font-weight: 900;
}

#btn-refresh,
#btn-expired-refresh{
  background: #222;
  color:#fff;
  border: 2px solid #444;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 18px 40px;
  border-radius: 50px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}

#btn-refresh:focus, #btn-refresh.focused,
#btn-expired-refresh:focus, #btn-expired-refresh.focused{
  background: var(--accent);
  color:#000;
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 40px rgba(0,229,255,.4);
}

.qr-container{
  background: #fff;
  padding: 18px;
  border-radius: 16px;
  box-shadow: 0 0 50px rgba(0,229,255,.12);
  margin-bottom: 20px;
}

.qr-label{
  font-size: 18px;
  color:#666;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.expired-title{
  font-size: 38px;
  font-weight: 900;
  color: #ff4444;
  margin: 0 0 15px 0;
  text-transform: uppercase;
}

.expired-text{
  font-size: 22px;
  color: #aaa;
  line-height: 1.6;
  margin: 0 0 30px 0;
}

/* ============ BUFFER MENU ============ */
/* Override: buffer popup needs column stacking + higher opacity */
#buffer-menu.popup-menu {
  background: rgba(8,12,20,0.98);
  box-shadow: 0 24px 80px rgba(0,0,0,.85), 0 0 0 1px rgba(0,229,255,.15);
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
}
.buf-options{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 8px;
}
.buf-option{
  width: 160px;
  min-height: 140px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
  color: #666;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  /* PERF-E1: transition limited to GPU-only properties (was 6 props including box-shadow, background, color) */
  -webkit-transition: -webkit-transform .15s, opacity .15s;
  transition: transform .15s, opacity .15s;
  box-sizing: border-box;
  padding: 16px 10px;
}
.buf-option i {
  font-size: 34px;
  margin-bottom: 12px;
}
.buf-opt-label {
  font-size: 18px;
  font-weight: 700;
}
.buf-option.focused{
  color: #fff;
  border-color: var(--accent);
  background: rgba(0,229,255,0.10);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
  box-shadow: 0 8px 28px rgba(0,229,255,0.15);
}
.buf-option.focused i {
  color: var(--accent);
}
.buf-option.buf-active{
  color: var(--accent);
  border-color: rgba(0,229,255,0.30);
}
.buf-option.buf-active i {
  color: var(--accent);
}
.buf-option.buf-active .buf-opt-label::after{
  content: ' \2713';
}

/* ============ SLEEPMATE™ ============ */
#sleep-corner {
  position: fixed;
  bottom: 36px;
  right: 52px;
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.30);
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 200;
  border: 1px solid transparent;
  -webkit-transition: color .2s, border-color .2s;
  transition: color .2s, border-color .2s;
  letter-spacing: 0.5px;
  pointer-events: none;
}
#sleep-corner.active {
  color: rgba(168,156,255,0.70);
  border-color: rgba(108,99,255,0.35);
}

/* ============ SLEEP PICKER (HH:MM) ============ */
.sleep-picker-popup.popup-menu {
  background: rgba(8,12,20,0.98);
  box-shadow: 0 24px 80px rgba(0,0,0,.85), 0 0 0 1px rgba(108,99,255,.18);
  flex-direction: column;
  align-items: center;
  min-width: 340px;
  padding: 28px 36px 24px;
}
.sp-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 16px;
}
.sp-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  border-radius: 14px;
  border: 2px solid transparent;
  min-width: 90px;
  -webkit-transition: border-color .15s, background .15s;
  transition: border-color .15s, background .15s;
}
.sp-col.sp-focused {
  border-color: #6c63ff;
  background: rgba(108,99,255,0.14);
}
.sp-val {
  font-size: 58px;
  font-weight: 700;
  color: #fff;
  min-width: 72px;
  text-align: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sp-arrow {
  font-size: 20px;
  color: rgba(255,255,255,0.30);
}
.sp-col.sp-focused .sp-arrow { color: rgba(255,255,255,0.65); }
.sp-unit {
  font-size: 15px;
  color: rgba(255,255,255,0.40);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sp-sep {
  font-size: 52px;
  font-weight: 700;
  color: rgba(255,255,255,0.30);
  padding-bottom: 20px;
  line-height: 1;
}
.sp-ok-hint {
  font-size: 18px;
  color: #a89cff;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 4px 0 2px;
  min-height: 28px;
  text-align: center;
}
.sp-nav-hints {
  font-size: 13px;
  color: rgba(255,255,255,0.30);
  text-align: center;
  padding: 4px 0 8px;
  letter-spacing: 0.3px;
}
.sp-off-btn {
  margin-top: 8px;
  padding: 12px 36px;
  font-size: 16px;
  color: rgba(255,255,255,0.50);
  border: 2px solid transparent;
  border-radius: 10px;
  text-align: center;
  letter-spacing: 1px;
  -webkit-transition: all .12s;
  transition: all .12s;
}
.sp-off-btn.sp-focused {
  color: #fff;
  border-color: rgba(255,80,80,0.6);
  background: rgba(255,50,50,0.10);
}

/* ============ QUICK PANEL (right side slide-out) ============ */
#quick-panel {
  position: fixed;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%) translateX(100%);
  transform: translateY(-50%) translateX(100%);
  background: rgba(8,12,20,0.97);
  border: 1px solid rgba(0,229,255,0.18);
  border-right: none;
  border-radius: 18px 0 0 18px;
  padding: 24px 18px 28px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 120px;
  -webkit-transition: -webkit-transform 0.22s ease;
  transition: transform 0.22s ease;
  box-shadow: -8px 0 40px rgba(0,0,0,0.6);
}
#quick-panel.qp-open {
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
}
.qp-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,229,255,0.45);
  letter-spacing: 3px;
  margin-bottom: 6px;
}
.qp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 2px solid transparent;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  width: 100%;
  text-align: center;
  -webkit-transition: all .12s;
  transition: all .12s;
}
.qp-item i { font-size: 30px; }
.qp-item.qp-focused {
  background: rgba(0,229,255,0.12);
  border-color: #00E5FF;
  color: #fff;
}
.qp-item.qp-active i,
.qp-item.qp-active span { color: #a89cff; }

/* hint sep inline */
.hint-sep-inline { color: rgba(0,229,255,0.4); }

/* ============ PLAYLIST DELETE DIALOG ============ */
#pl-delete-dialog{
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 9500;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.pl-del-box{
  background: #1a1a1a;
  border: 2px solid #e74c3c;
  border-radius: 16px;
  padding: 40px 50px;
  text-align: center;
  max-width: 560px;
  box-shadow: 0 20px 70px rgba(0,0,0,.65);
}
.pl-del-title{
  font-size: 28px;
  font-weight: 900;
  color: #e74c3c;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.pl-del-msg{
  font-size: 20px;
  color: #ccc;
  margin-bottom: 30px;
  line-height: 1.5;
}
.pl-del-buttons{
  display: flex;
  justify-content: center;
}
.pl-del-btn{
  padding: 14px 40px;
  font-size: 20px;
  font-weight: 700;
  color: #999;
  background: rgba(255,255,255,0.06);
  border: 2px solid transparent;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: transform .15s, opacity .15s, border-color .15s, background .15s, color .15s;
}
.pl-del-btn.focused{
  color: #fff;
  border-color: #e74c3c;
  background: rgba(231,76,60,0.15);
}

/* ============================================================
   EPG GRID — Premium TV Guide
   ============================================================ */
#epg-grid{
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 1080px;
  background: rgba(0,0,0,0.92);
  z-index: 4000;
  flex-direction: column;
  font-family: inherit;
}

/* ── Header ── */
.epg-header{
  display: flex;
  align-items: center;
  padding: 0 30px;
  height: 60px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.epg-header-title{
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  margin-right: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.epg-header-date{
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  margin-right: auto;
}
.epg-header-hints{
  display: flex;
  font-size: 15px;
  color: rgba(255,255,255,0.5);
}
.epg-hint{
  display: flex;
  align-items: center;
}
.epg-hint-key{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  background: rgba(255,255,255,0.15);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Body layout ── */
.epg-body{
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Channel column ── */
.epg-channels{
  width: 270px;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.epg-ch-spacer{
  height: 50px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.epg-ch-row{
  display: flex;
  align-items: center;
  height: 135px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .12s;
  overflow: hidden;
}
.epg-ch-focused{
  background: rgba(0,229,255,0.08);
  border-left: 3px solid var(--accent);
}
.epg-ch-icon{
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 8px;
  margin-right: 10px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
}
.epg-ch-name{
  font-size: 19px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}
.epg-ch-focused .epg-ch-name{
  color: #fff;
}

/* ── Timeline header (time axis) ── */
.epg-timeline-wrapper{
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.epg-time-axis{
  height: 50px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.epg-time-axis-inner{
  position: relative;
  height: 100%;
}
.epg-time-mark{
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  border-left: 1px solid rgba(255,255,255,0.12);
  box-sizing: border-box;
}
.epg-time-tick{
  position: absolute;
  top: 35px;
  width: 1px;
  height: 15px;
  background: rgba(255,255,255,0.06);
}

/* ── Programs area ── */
.epg-programs-area{
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.epg-programs-inner{
  position: relative;
  height: 100%;
}

/* ── Program rows ── */
.epg-prog-row{
  position: absolute;
  left: 0;
  height: 135px;
  width: 100%;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.epg-prog-row-focused{
  background: rgba(0,229,255,0.03);
}

/* ── Program blocks ── */
.epg-prog-block{
  position: absolute;
  top: 4px;
  height: 127px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
  cursor: default;
  box-sizing: border-box;
}
.epg-prog-block.epg-prog-live{
  background: rgba(0,229,255,0.06);
  border-color: rgba(0,229,255,0.15);
}
.epg-prog-block.epg-prog-past{
  opacity: 0.45;
}
.epg-prog-block.epg-prog-focused{
  background: rgba(0,229,255,0.15);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(0,229,255,0.15), inset 0 0 20px rgba(0,229,255,0.05);
  z-index: 2;
}
.epg-prog-block.epg-prog-empty{
  background: rgba(255,255,255,0.02);
  border-style: dashed;
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.3);
  font-size: 14px;
  text-align: center;
}
.epg-prog-title{
  font-size: 28px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  overflow: hidden;
  max-height: 73px;
  word-wrap: break-word;
  line-height: 1.3;
}
.epg-prog-focused .epg-prog-title{
  color: #fff;
}
.epg-prog-time{
  font-size: 24px;
  color: rgba(255,255,255,0.4);
  margin-top: 3px;
}
.epg-live-dot{
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 6px;
  margin-bottom: 4px;
  box-shadow: 0 0 8px rgba(0,229,255,0.5);
  animation: epgPulse 2s infinite;
  vertical-align: middle;
}
@keyframes epgPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.4; }
}

/* ── NOW line ── */
.epg-now-line{
  position: absolute;
  top: 0;
  width: 2px;
  background: var(--accent);
  z-index: 10;
  box-shadow: 0 0 10px rgba(0,229,255,0.4);
  pointer-events: none;
}

/* ── Detail bar ── */
.epg-detail{
  height: 175px;
  padding: 12px 30px 0;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.epg-detail-header{
  display: flex;
  align-items: baseline;
}
.epg-detail-title{
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.epg-detail-time{
  font-size: 20px;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.epg-detail-desc{
  font-size: 28px;
  color: rgba(255,255,255,0.6);
  overflow: hidden;
  line-height: 1.3;
  max-height: 74px;
}
.epg-detail-progress-bg{
  width: 98%;
  height: 5px;
  background: transparent;
  border-radius: 3px;
  overflow: hidden;
  position: absolute;
  bottom: 8px;
  left: 30px;
  transition: opacity .2s;
}
.epg-detail-progress-fill{
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(0,229,255,0.3);
  /* PERF-E1: width→scaleX — GPU-only composite instead of layout-triggering width animation */
  width: 100%;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;
}

/* ===== VOD INFO SCREEN ===== */
#vod-info-screen{
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 1920px; height: 1080px;
  z-index: 800;
  background: #0a0a0a;
  overflow: hidden;
}
/* Full-bleed backdrop image */
.vi-backdrop{
  position: absolute;
  top: 0; left: 0;
  width: 1920px; height: 1080px;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.vi-backdrop.loaded{ opacity: 0.45; }
/* Strong gradient: solid black left � transparent right so text is always readable */
.vi-gradient{
  position: absolute;
  top: 0; left: 0;
  width: 1920px; height: 1080px;
  background:
    linear-gradient(to right, #0a0a0a 0%, #0a0a0a 32%, rgba(10,10,10,0.92) 45%, rgba(10,10,10,0.55) 65%, rgba(10,10,10,0.25) 80%, transparent 100%),
    linear-gradient(to top, #0a0a0a 0%, transparent 35%);
  pointer-events: none;
}
/* Two-column layout */
.vi-layout{
  position: relative;
  z-index: 2;
  display: flex;
  width: 1920px; height: 1080px;
}
/* LEFT: info */
.vi-left{
  width: 1060px;
  padding: 60px 70px 50px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* RIGHT: poster */
.vi-right{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 80px;
}
/* Back hint */
.vi-back-hint{
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.4);
  font-size: 18px;
}
.vi-back-hint i{
  font-size: 20px;
  color: var(--accent);
}
/* Title */
.vi-title{
  font-size: 52px;
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}
/* Tags row */
.vi-tags{
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  font-size: 22px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
/* Plot */
.vi-plot{
  font-size: 26px;
  color: rgba(255,255,255,0.78);
  line-height: 1.5;
  margin-bottom: 20px;
  max-height: 200px;
  overflow: hidden;
}
/* Crew */
.vi-crew{
  margin-bottom: 14px;
  font-size: 22px;
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
}
/* Season info */
.vi-season-info{
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 600;
}
/* Poster */
.vi-poster-wrap{
  width: 420px;
}
.vi-poster{
  width: 420px;
  height: 600px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 80px rgba(0,229,255,0.06);
  background: #111;
  border: 2px solid rgba(255,255,255,0.08);
}
/* Buttons � inline in left column flow */
.vi-buttons{
  display: flex;
  align-items: center;
  margin-top: 18px;
}
.vi-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 44px;
  min-height: 64px;
  box-sizing: border-box;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
  border: 2px solid transparent;
  outline: none;
  color: #fff;
  contain: layout style;
}
.vi-btn-main-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.vi-btn-sub {
  font-size: 17px;
  font-weight: 700;
  opacity: 0.85;
  letter-spacing: 0.4px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  display: none;
}
.vi-btn-sub:not(:empty) { display: block; }
/* Play button � uses app accent */
.vi-btn-play{
  background: var(--accent);
  color: #000;
  min-width: 220px;
  max-width: 380px;
}
.vi-btn-play.focused{
  -webkit-transform: scale(1.06) translateY(-3px);
  transform: scale(1.06) translateY(-3px);
  background: #33EEFF;
  will-change: transform, opacity;
}
.vi-btn-play i{ color: #000; }
/* Episodes button */
.vi-btn-episodes{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  min-width: 200px;
}
.vi-btn-episodes.focused{
  border-color: var(--accent);
  -webkit-transform: scale(1.06) translateY(-3px);
  transform: scale(1.06) translateY(-3px);
  will-change: transform, opacity;
}
/* Fav button */
.vi-btn-fav{
  padding: 18px 36px;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  font-size: 22px;
  min-width: 200px;
}
.vi-btn-fav .fa-star{ margin-right: 2px; }
.vi-btn-fav.focused{
  border-color: var(--accent);
  -webkit-transform: scale(1.06) translateY(-3px);
  transform: scale(1.06) translateY(-3px);
  will-change: transform, opacity;
}
.vi-btn-fav.is-fav{
  color: #ffb400;
  border-color: rgba(255,180,0,0.4);
}
.vi-btn-fav.is-fav .fa-star{ color: #ffb400; }
.vi-btn-fav.is-fav.focused{
  border-color: #ffb400;
}
/* Clock � bottom right */
.vi-clock{
  position: absolute;
  bottom: 28px;
  right: 40px;
  font-size: 18px;
  color: rgba(255,255,255,0.3);
  z-index: 3;
}

/* ===== COMPACT MODE (seasons/episodes view) ===== */
/* GPU-ONLY transition: opacity crossfade wraps layout changes (no CPU layout thrash) */
.vi-layout{
  -webkit-transition: opacity .22s ease;
  transition: opacity .22s ease;
}
/* All vi-compact layout property changes are INSTANT � wrapped in JS opacity crossfade */

/* When screen has .vi-compact � collapse info to top strip */
#vod-info-screen.vi-compact .vi-layout{
  height: 340px;
}
#vod-info-screen.vi-compact .vi-gradient{
  background:
    linear-gradient(to right, #0a0a0a 0%, #0a0a0a 25%, rgba(10,10,10,0.92) 40%, rgba(10,10,10,0.5) 60%, rgba(10,10,10,0.2) 80%, transparent 100%),
    linear-gradient(to top, #0a0a0a 0%, transparent 50%);
}
#vod-info-screen.vi-compact .vi-left{
  width: 1100px;
  padding: 35px 40px 25px 80px;
  justify-content: flex-start;
}
#vod-info-screen.vi-compact .vi-back-hint{
  margin-bottom: 12px;
  font-size: 15px;
}
#vod-info-screen.vi-compact .vi-title{
  font-size: 36px;
  margin-bottom: 8px;
}
#vod-info-screen.vi-compact .vi-tags{
  font-size: 18px;
  margin-bottom: 10px;
}
#vod-info-screen.vi-compact .vi-plot{
  display: none;
}
#vod-info-screen.vi-compact .vi-crew{
  display: none;
}
#vod-info-screen.vi-compact .vi-season-info{
  display: none;
}
#vod-info-screen.vi-compact .vi-buttons{
  display: none;
}
/* Poster shrinks and moves to right-top */
#vod-info-screen.vi-compact .vi-right{
  align-items: flex-start;
  padding-top: 30px;
  padding-right: 60px;
}
#vod-info-screen.vi-compact .vi-poster-wrap{
  width: 190px;
}
#vod-info-screen.vi-compact .vi-poster{
  width: 190px;
  height: 270px;
  border-radius: 12px;
}

/* ===== TILES AREA (seasons & episodes) ===== */
.vi-tiles-area{
  position: absolute;
  bottom: 0; left: 0;
  width: 1920px;
  z-index: 5;
  padding: 0 80px 50px 80px;
  transform: translateY(100%);
  opacity: 0;
  -webkit-transition: -webkit-transform .32s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}
#vod-info-screen.vi-compact .vi-tiles-area{
  transform: translateY(0);
  opacity: 1;
}
.vi-tiles-header{
  font-size: 28px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
}
.vi-tiles-row{
  display: -webkit-flex;
  display: flex;
  overflow: visible;
  padding-bottom: 10px;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.4,0,.2,1);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
/* Season tile */
.vi-tile{
  flex-shrink: 0;
  width: 260px;
  height: 400px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: var(--card2);
  border: 3px solid transparent;
  cursor: pointer;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
  opacity: 0.75;
  contain: layout style;
}
.vi-tile.focused{
  border-color: var(--accent);
  -webkit-transform: scale(1.07) translateY(-6px);
  transform: scale(1.07) translateY(-6px);
  opacity: 1;
  z-index: 10;
  will-change: transform, opacity;
}
.vi-tile-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vi-tile-label{
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  padding: 50px 16px 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
/* Episode tile (wider, shorter) */
.vi-tile-ep{
  flex-shrink: 0;
  width: 320px;
  height: 210px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--card2);
  border: 3px solid transparent;
  cursor: pointer;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
  opacity: 0.75;
  contain: layout style;
}
.vi-tile-ep.focused{
  border-color: var(--accent);
  -webkit-transform: scale(1.06) translateY(-5px);
  transform: scale(1.06) translateY(-5px);
  opacity: 1;
  z-index: 10;
  will-change: transform, opacity;
}
.vi-tile-ep-img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  background: rgba(255,255,255,0.04);
}
.vi-tile-ep-info{
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
}
.vi-tile-ep-num{
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.vi-tile-ep-name{
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== SCREEN TRANSITIONS (Netflix-style fade) ===== */
@-webkit-keyframes screenFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes screenFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
  /* scale(1.01→1) removed — forced full-screen GPU rasterization per frame */
}
.screen-fade-in {
  -webkit-animation: screenFadeIn .28s ease-out forwards;
  animation: screenFadeIn .28s ease-out forwards;
}

/* Splash smooth fade-out */
#splash {
  -webkit-transition: opacity .45s ease;
  transition: opacity .45s ease;
}
#splash.fade-out {
  opacity: 0 !important;
  pointer-events: none;
}

/* ===== AMBIENT LOGO GLOW (Home screen) ===== */
@-webkit-keyframes logoGlow {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@keyframes logoGlow {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
/* PERF: logoGlow animation DISABLED � continuous opacity cycling costs GPU compositing
   every frame (forever). On 8K TVs this is significant overhead for a subtle effect. */
/*
#home-logo {
  -webkit-animation: logoGlow 4s ease-in-out infinite;
  animation: logoGlow 4s ease-in-out infinite;
}
*/

/* ===== FOCUS DEPTH � consistent lift across app ===== */
/* Active category indicator in columns view */
.col-categories .list-item.focused {
  border-left: 4px solid var(--accent) !important;
}

/* Toast notification slide-up */
@-webkit-keyframes toastSlideUp {
  from { -webkit-transform: translateY(30px); opacity: 0; }
  to   { -webkit-transform: translateY(0); opacity: 1; }
}
@keyframes toastSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ===== NEW HOME LAYOUT (DEV � Variant A: Primary 5 + Secondary 2) ===== */
#home-screen.new-home-layout #home-logo {
  height: 320px;
}
#home-screen.new-home-layout .tiles-wrapper {
  margin-top: 120px;
}
.tiles-secondary {
  display: none; /* hidden in production */
}
#home-screen.new-home-layout .tiles-secondary {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 36px;
}
/* ===== NEW HOME LAYOUT (Premium Sections) ===== */
#nh-container {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  margin-top: 225px;
}

.nh-section {
  width: 90%;
  max-width: 1700px;
  margin-bottom: 18px;
}

.nh-section-title {
  display: none; /* Hidden � user doesn't want section labels */
}
.nh-section-title i {
  font-size: 18px;
  margin-right: 8px;
  opacity: 0.7;
}
.nh-section-title-tools {
  display: none;
}
.nh-section-title-tools i {
  color: rgba(255,255,255,.35);
}

.nh-row {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 6px;
}
.nh-row-tools {
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 12px;
}

.nh-tile {
  width: 300px;
  height: 220px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border: 2px solid rgba(255,255,255,.10);
  border-radius: 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 14px;
  /* PERF: no translateZ(0) on all tiles � would promote every tile to a GPU compositor
     layer and exhaust VRAM on TV browsers. Only the focused tile gets will-change. */
  -webkit-transform: scale(1);
  transform: scale(1);
  /* PERF: only GPU-compositable properties (transform + opacity).
     Reduced .22s � .14s for snappier feel. */
  -webkit-transition: -webkit-transform .06s ease-out, opacity .06s ease-out;
  transition: transform .06s ease-out, opacity .06s ease-out;
  /* PERF: DO NOT add will-change here. Promoting ALL 7 tiles to GPU layers causes GPU memory
     pressure on TV hardware (shared DRAM), forces CPU repaint + GPU texture re-upload on every
     border-color change on focus, and makes compositor flatten 7 layers per frame even when nothing
     animates. Samsung guideline (SDC): max 3-5 simultaneous compositor layers on TV. will-change
     is applied ONLY on .nh-tile.focused below — one promoted layer at a time. */
  /* PERF: contain layout isolates repaint � changes inside tile don't trigger parent repaint */
  contain: layout style;
  opacity: 0.85;
  /* PERF: box-shadow REMOVED � blurred shadow on 7 tiles is expensive at high res.
     The border provides sufficient visual separation. */
  position: relative;
  overflow: hidden;
}
/* tizen-lo (Tizen < 5, added by utils.js) disables transitions entirely. */
.tizen-lo .nh-tile { -webkit-transition: none; transition: none; }
.tizen-mid .nh-tile {
  /* PERF: NO will-change — 7 GPU layers eliminated.
     Focus ring provides visual feedback, so scale animation is redundant.
     No transform change = no GPU layer needed = less VRAM pressure. */
  -webkit-transition: none;
  transition: none;
  -webkit-transform: none;
  transform: none;
  /* Keep opacity static — focus ring alone marks the selected tile */
  opacity: 1;
  /* Solid fill instead of gradient — GPU renders solid color for free; gradient forces CPU rasterize */
  background: rgba(255,255,255,.05);
}
/* Simple solid dark bg — replaces 3 radial-gradients that get re-rasterized on each repaint */
.tizen-mid #home-screen {
  background: #0e0e0e !important;
}

/* PERF: ::before overlay REMOVED for all platforms � the radial-gradient fade-in
   on each focus change triggers a full repaint of a 200%�200% pseudo-element. */
.nh-tile::before { display: none; }

.nh-tile-icon {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 18px;
  /* PERF: removed background/border-color transitions � not GPU-compositable */
}
.nh-tile-icon i {
  font-size: 54px;
  color: rgba(255,255,255,.65);
}

.nh-tile-label {
  font-size: 28px;
  font-weight: 700;
  color: rgba(255,255,255,.70);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.nh-tile.focused {
  -webkit-transform: scale(1.08) translateY(-8px);
  transform: scale(1.08) translateY(-8px);
  border-color: var(--accent);
  opacity: 1;
  /* PERF: will-change only on focused tile — promotes ONE layer to GPU, not all 7.
     border-color triggers a single CPU repaint + GPU upload when focus is gained, then
     the scale/translateY animation runs purely on the compositor thread. */
  will-change: transform, opacity;
  /* Ensure focused tile renders above siblings (it scales up and may visually overlap) */
  z-index: 1;
}
/* PERF: child changes minimized � only icon color + label color (cheap solid color).
   Icon background/box-shadow/text-shadow REMOVED � each triggered separate repaint. */
.nh-tile.focused .nh-tile-icon i {
  color: var(--accent);
}
.nh-tile.focused .nh-tile-label {
  color: #fff;
}
.tizen-mid .nh-tile.focused {
  /* PERF: NO scale, NO translateY — zero compositor animation work.
     Focus ring overlay shows which tile is selected (Netflix pattern).
     Saves: 2 compositor animations per focus change (old tile shrink + new tile grow). */
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}
.tizen-mid .dash-tile {
  /* Pre-promote all dash tiles — same fix as nh-tile */
  will-change: transform;
  -webkit-transition: -webkit-transform 60ms ease-out, opacity 60ms ease-out;
  transition: transform 60ms ease-out, opacity 60ms ease-out;
}
.tizen-mid .dash-tile.focused {
  -webkit-transform: scale(1.04) translateY(-4px);
  transform: scale(1.04) translateY(-4px);
  /* GPU layer stays hot */
}
.tizen-mid .dash-tile.focused i {
  text-shadow: none;
}

.tizen-mid .vod-item-wrapper.focused {
  -webkit-transform: scale(1.04) translateY(-4px);
  transform: scale(1.04) translateY(-4px);
}

/* tizen-mid vod: will-change:transform restores GPU-per-tile with windowed DOM (max ~15 tiles).
   Re-rasterise on focus = only 254x422px tile texture, NOT 1920-wide root layer */
.tizen-mid .vod-item-wrapper {
  will-change: transform;
  -webkit-transition: -webkit-transform 60ms ease-out, opacity 60ms ease-out;
  transition: transform 60ms ease-out, opacity 60ms ease-out;
}
.tizen-mid .vod-poster {
  box-shadow: none;
}
/* Remove ::after gradient overlay on all poster tiles — 30-50 gradient pseudo-elements waste GPU memory */
.tizen-mid .vod-poster::after {
  display: none;
}
.tizen-mid .search-item-wrapper {
  will-change: transform;
  -webkit-transition: -webkit-transform 60ms ease-out, opacity 60ms ease-out;
  transition: transform 60ms ease-out, opacity 60ms ease-out;
}
.tizen-mid .search-poster {
  box-shadow: none;
}
.tizen-mid .search-item-wrapper.focused {
  -webkit-transform: scale(1.04) translateY(-4px);
  transform: scale(1.04) translateY(-4px);
}
.tizen-mid .key-btn {
  -webkit-transition: none;
  transition: none;
}
.tizen-mid .ckb-key {
  -webkit-transition: none;
  transition: none;
}
/* Composited scroll — programmatic scrollTop stays on GPU compositor thread, no root layer repaint */
.tizen-mid .list-viewport {
  will-change: scroll-position;
}

.tizen-lo .vod-item-wrapper {
  -webkit-transition: none;
  transition: none;
  /* No GPU pre-promotion on weak TVs — too many layers, no animation benefit */
  will-change: auto;
}

.tizen-lo .vod-item-wrapper.focused{
  -webkit-transform: scale(1.02) translateY(-2px);
  transform: scale(1.02) translateY(-2px);
  will-change: auto;
}

.tizen-mid .settings-card.focused {
  -webkit-transform: scale(1.03) translateY(-4px);
  transform: scale(1.03) translateY(-4px);
}

.tizen-mid [id^="pl-tile-"].focused {
  box-shadow: none !important;
  transform: scale(1.02);
  background: rgba(0,229,255,.04) !important;
}

/* =========================================================
   FOCUS RING MODE: remove ALL paint-triggering CSS from .focused
   Only transform + opacity are compositor-only (zero CPU cost).
   The #focus-ring overlay handles the visible color accent.
   This is the YouTube TV / Netflix TV pattern:
     - Every element only changes transform/opacity on focus
     - ONE ring element shows color border via transform.translate()
   ========================================================= */
/* nh-tile: border-color + child colors = paint → neutralize */
.tizen-mid .nh-tile.focused,
.tizen-lo  .nh-tile.focused        { border-color: rgba(255,255,255,.10); }
.tizen-mid .nh-tile.focused .nh-tile-icon i,
.tizen-lo  .nh-tile.focused .nh-tile-icon i { color: rgba(255,255,255,.65); }
.tizen-mid .nh-tile.focused .nh-tile-label,
.tizen-lo  .nh-tile.focused .nh-tile-label  { color: rgba(255,255,255,.70); }
/* dash-tile focused: border-color + icon color = paint → neutralize */
.tizen-mid .dash-tile.focused,
.tizen-lo  .dash-tile.focused       { border-color: rgba(255,255,255,.08); }
.tizen-mid .dash-tile.focused i,
.tizen-lo  .dash-tile.focused i     { color: rgba(255,255,255,.60); }
.tizen-mid .dash-tile.focused .dash-label,
.tizen-lo  .dash-tile.focused .dash-label   { color: rgba(255,255,255,.75); }
/* vod/search tiles: border-color + title color = paint → neutralize */
.tizen-mid .vod-item-wrapper.focused .vod-poster,
.tizen-lo  .vod-item-wrapper.focused .vod-poster { border-color: rgba(255,255,255,.06); }
.tizen-mid .vod-item-wrapper.focused .vod-title,
.tizen-lo  .vod-item-wrapper.focused .vod-title  { color: rgba(255,255,255,.60); }
/* list items: border-color + color = paint → neutralize */
.tizen-mid .list-item.focused,
.tizen-lo  .list-item.focused { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: rgba(255,255,255,.70); }
/* category items */
.tizen-mid .cat-item.focused,
.tizen-lo  .cat-item.focused { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
/* settings-icon */
.tizen-mid #settings-icon.focused,
.tizen-lo  #settings-icon.focused  { border-color: transparent; background: transparent; color: rgba(255,255,255,.35); }
/* button elements (keyboard, settings buttons, etc.) */
.tizen-mid .key-btn.focused,
.tizen-lo  .key-btn.focused  { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: rgba(255,255,255,.90); }
.tizen-mid .ckb-key.focused,
.tizen-lo  .ckb-key.focused  { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: rgba(255,255,255,.90); }

/* Tools row � smaller tiles */
.nh-tile-sm {
  width: 260px;
  height: 170px;
}
.nh-tile-sm .nh-tile-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 14px;
}
.nh-tile-sm .nh-tile-icon i {
  font-size: 42px;
}
.nh-tile-sm .nh-tile-label {
  font-size: 24px;
}

/* New home modifiers for #home-screen when new layout active */
#home-screen.new-home-layout {
  padding-top: 30px;
}
#home-screen.new-home-layout #home-logo {
  height: 260px !important;
  margin-bottom: 0;
}

/* ===== 8K PERFORMANCE OVERRIDES (display-8k added by utils.js on screens >= 7680px) =====
   On 8K TVs the html element is scaled 4x by Samsung OS, so every repaint covers
   16x more physical pixels than on FHD. These overrides eliminate the most expensive
   operations on the home screen without changing the look on other devices. ===== */

/* 1. Replace 3 radial-gradients with a single solid dark background.
      3 × radial-gradient on 7680x4320 = rasterising 33M pixels per frame. */
.display-8k #home-screen {
  background: #0a0a0e;
}

/* 2. Remove logo transition — logo is large and keeping a live transition
      forces the browser to maintain it as a permanent GPU layer. */
.display-8k #home-logo {
  -webkit-transition: none;
  transition: none;
}

/* 3. On focus: skip border-color change + icon/label color change.
      These force a CPU repaint + GPU texture re-upload of the entire tile
      (300x220px × scale(4) ≈ 4MB texture) on every directional key press.
      Instead: keep border transparent, raise opacity to full — pure GPU op. */
.display-8k .nh-tile.focused {
  -webkit-transform: scale(1.05) translateY(-5px);
  transform: scale(1.05) translateY(-5px);
  border-color: transparent;
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  opacity: 1;
  will-change: transform, opacity;
  z-index: 1;
}
.display-8k .nh-tile.focused .nh-tile-icon i {
  color: rgba(255,255,255,.65); /* unchanged — no repaint */
}
.display-8k .nh-tile.focused .nh-tile-label {
  color: rgba(255,255,255,.70); /* unchanged — no repaint */
}

/* 4. Reduce tile transition duration to absolute minimum —
      shorter animation = fewer frames compositor must composite at 8K scale. */
.display-8k .nh-tile {
  -webkit-transition: -webkit-transform .04s ease-out, opacity .04s ease-out;
  transition: transform .04s ease-out, opacity .04s ease-out;
}

/* 5. tizen-mid + display-8k: PAINT-CONTAINMENT focus (QE75QN800B, Tizen 6.5, 8K)
   ROOT CAUSE: without `contain:paint`, any CSS change on a tile (border-color,
   background) invalidates the ENTIRE home-screen paint layer (1920×1080px GPU
   texture re-upload on every keypress → ~2s visible lag).
   FIX ARCHITECTURE:
   a) #home-screen gets translateZ(0) → own compositor layer (isolated from root).
   b) Each .nh-tile gets contain:paint → repaint capped at 300×220px.
   c) Focus = ONLY border-color change (solid→brighter solid, no color children changes).
      300×220px texture chunk upload vs 1920×1080px = ~45x less GPU work per keypress.
   d) NO transform/scale on focus — no compositor animation overhead on 8K. */
.tizen-mid.display-8k #home-screen {
  /* Own compositor layer: tile repaints stay inside this texture,
     never invalidate the root layer (rest of the app). */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.tizen-mid.display-8k .nh-tile {
  /* contain:paint = repaint bounded to tile box (300x220px).
     No overflow artifacts from scale removed above. */
  contain: layout style paint;
  -webkit-will-change: auto;
  will-change: auto;
  -webkit-transition: none;
  transition: none;
}
.tizen-mid.display-8k .nh-tile.focused {
  -webkit-transform: none;
  transform: none;
  /* Brighter border = clear visual focus. Only this 2px stroke repaints
     within the 300x220px contain:paint boundary. */
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.09);
  -webkit-will-change: auto;
  will-change: auto;
  outline: none;
  z-index: 0;
}
/* Children UNCHANGED vs unfocused — zero additional repaint cost */
.tizen-mid.display-8k .nh-tile.focused .nh-tile-icon i {
  color: rgba(255,255,255,.65);
}
.tizen-mid.display-8k .nh-tile.focused .nh-tile-label {
  color: rgba(255,255,255,.70);
}

#home-screen.new-home-layout #home-old-layout {
  display: none !important;
}

/* ===== CATCH-UP EPG OVERLAY (V2) ===== */
#catchup-epg-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.92);
  z-index: 300;
  display: none;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.catchup-epg-header {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 40px 60px 16px;
}
.catchup-epg-back {
  font-size: 22px;
  color: rgba(255,255,255,.5);
  margin-right: 20px;
}
.catchup-epg-channel {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  -webkit-flex: 1; flex: 1;
}
.catchup-epg-channel-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.catchup-epg-channel-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* --- Date bar (horizontal pills) --- */
.catchup-date-bar {
  display: -webkit-flex;
  display: flex;
  padding: 12px 60px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.catchup-date-pill {
  padding: 10px 22px;
  font-size: 19px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.04);
  border: 2px solid transparent;
  border-radius: 20px;
  white-space: nowrap;
  -webkit-transition: background .12s, border-color .12s, color .12s;
  transition: background .12s, border-color .12s, color .12s;
}
.catchup-date-pill.active {
  color: #fff;
  background: rgba(0,229,255,.12);
  border-color: var(--accent);
}

.catchup-epg-subtitle {
  font-size: 20px;
  color: rgba(255,255,255,.4);
  padding: 0 60px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.catchup-epg-list {
  -webkit-flex: 1;
  flex: 1;
  overflow-y: auto;
  padding: 16px 60px;
}
.catchup-epg-item {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 18px 24px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 2px solid transparent;
  -webkit-transition: -webkit-transform .12s, opacity .12s;
  transition: transform .12s, opacity .12s;
  contain: layout style;
}
.catchup-epg-item.focused {
  border-color: var(--accent);
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
  opacity: 1;
  will-change: transform, opacity;
}
/* Status dot */
.catchup-epg-status {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 14px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.catchup-epg-status.available { background: #4caf50; }
.catchup-epg-status.live { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.catchup-epg-status.expired { background: transparent; border: 2px solid rgba(255,255,255,.2); }
.catchup-epg-status.future { background: transparent; border: 2px solid rgba(255,255,255,.15); }

.catchup-epg-time {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  min-width: 90px;
  margin-right: 16px;
}
.catchup-epg-title {
  font-size: 22px;
  color: rgba(255,255,255,.85);
  -webkit-flex: 1;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catchup-epg-item.focused .catchup-epg-title {
  color: #fff;
}
.catchup-epg-duration {
  font-size: 17px;
  color: rgba(255,255,255,.35);
  margin-left: 16px;
}
.catchup-epg-desc {
  display: none;
  font-size: 17px;
  color: rgba(255,255,255,.4);
  margin-top: 8px;
  line-height: 1.4;
}
.catchup-epg-item.focused .catchup-epg-desc {
  display: block;
}
.catchup-epg-empty {
  text-align: center;
  padding: 80px 0;
  font-size: 24px;
  color: rgba(255,255,255,.3);
}
.catchup-epg-hint {
  padding: 16px 60px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 18px;
  color: rgba(255,255,255,.35);
}
.catchup-epg-hint b { color: rgba(255,255,255,.55); margin: 0 6px; }
.catchup-epg-hint i { margin: 0 4px; }

/* ===== RADIO SCREEN (V2: 2-panel layout) ===== */
#radio-screen {
  position: absolute;
  top: 0; left: 0;
  width: 1920px; height: 1080px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,229,255,.03) 0%, transparent 50%),
    linear-gradient(180deg, #0c0c10 0%, #080810 100%);
  z-index: 300;
  display: none;
  overflow: hidden;
}
.radio-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding: 0 40px;
  background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 100%);
  border-bottom: 1px solid rgba(0,229,255,.10);
  z-index: 30;
  box-sizing: border-box;
}
.radio-back-icon {
  font-size: 20px;
  color: rgba(255,255,255,.5);
  margin-right: 20px;
}
.radio-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.radio-count {
  font-size: 18px;
  color: rgba(255,255,255,.38);
  margin-left: 20px;
}
.radio-sliding-wrapper {
  position: absolute;
  top: 64px; left: 0; right: 0; bottom: 0;
}
.radio-cats-panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 520px;
  background: linear-gradient(135deg, #0c0c14 0%, #08080e 100%);
  border-right: 1px solid rgba(0,229,255,.10);
  z-index: 20;
}
#radio-kb-inline {
  display: none;
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  padding: 10px 12px 8px;
  background: rgba(10,10,10,.95);
  border-bottom: 2px solid rgba(255,255,255,.10);
  z-index: 22;
  box-sizing: border-box;
}
.radio-cat-item {
  padding: 20px 18px;
  font-size: 24px;
  color: rgba(255,255,255,.70);
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 12px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  box-sizing: border-box;
  margin: 3px 8px;
  opacity: 0.85;
  contain: layout style;
}
.radio-cat-item.focused {
  background-color: rgba(0,229,255,.08);
  border: 2px solid rgba(0,229,255,.35) !important;
  color: #fff !important;
  opacity: 1;
}
.radio-cat-item.active {
  color: var(--accent);
  font-weight: 700;
  opacity: 0.9;
}
.radio-cat-count {
  font-size: 15px;
  color: rgba(255,255,255,.25);
  margin-left: 8px;
}
.radio-stations-panel {
  position: absolute;
  top: 0; left: 520px; right: 0; bottom: 0;
  overflow: hidden;
  background: #0a0a0f;
}
#radio-list { padding: 6px 12px; overflow-x: visible; }
#radio-cats-list { padding: 6px 12px; overflow-x: visible; }
.radio-item {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 16px 24px;
  margin-bottom: 5px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 2px solid transparent;
  contain: layout style;
  opacity: 0.85;
}
.radio-item.focused {
  background-color: rgba(0,229,255,.08);
  border-color: rgba(0,229,255,.35);
  color: #fff;
  opacity: 1;
}
.radio-item-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  margin-right: 18px;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
  -webkit-align-items: center; align-items: center;
}
.radio-item-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.radio-item-icon i {
  font-size: 22px;
  color: rgba(255,255,255,.25);
  line-height: 1;
}
.radio-item-name {
  font-size: 24px;
  color: rgba(255,255,255,.85);
  -webkit-flex: 1; flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.radio-item.focused .radio-item-name { color: #fff; }
.radio-item-cat {
  font-size: 16px;
  color: rgba(255,255,255,.25);
  margin-left: 16px;
}
/* ===== RADIO NOW PLAYING ===== */
#radio-now-playing {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 310;
  display: none;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.rnp-gradient {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,229,255,.08) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a12 0%, #060610 50%, #0a0a14 100%);
  z-index: 0;
}
.rnp-content {
  position: relative;
  z-index: 1;
}
.rnp-station-icon {
  width: 160px; height: 160px;
  border-radius: 30px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  margin-bottom: 32px;
  border: 3px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
  -webkit-align-items: center; align-items: center;
}
.rnp-station-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.rnp-station-icon i {
  font-size: 60px;
  color: rgba(255,255,255,.2);
  line-height: 1;
}
.rnp-station-name {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  max-width: 800px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rnp-now-label {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
  -webkit-animation: rnpPulse 2s ease-in-out infinite;
  animation: rnpPulse 2s ease-in-out infinite;
}
@-webkit-keyframes rnpPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
@keyframes rnpPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.rnp-timer {
  font-size: 28px;
  font-weight: 300;
  color: rgba(255,255,255,.4);
  font-variant-numeric: tabular-nums;
}
.rnp-hint {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
}
.rnp-hint b { color: rgba(255,255,255,.55); margin: 0 6px; }

/* ===== NOT AVAILABLE MODAL (Catch-up / Radio) ===== */
#heio-na-modal {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.88);
  z-index: 6000; /* above all screens — _showNaModal calls hideAll() first */
  display: none;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.na-box {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,229,255,.04) 0%, transparent 60%),
    linear-gradient(180deg, rgba(18,18,24,0.98) 0%, rgba(10,10,10,0.98) 100%);
  border: 2px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 52px 60px 44px;
  text-align: center;
  width: 600px;
  max-width: 90%;
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 60px rgba(0,229,255,.05);
}
.na-icon {
  font-size: 52px;
  color: rgba(255,255,255,.25);
  margin-bottom: 24px;
}
.na-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}
.na-message {
  font-size: 22px;
  color: rgba(255,255,255,.55);
  line-height: 1.5;
  margin-bottom: 36px;
}
.na-buttons {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
.na-btn {
  padding: 14px 36px;
  font-size: 22px;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  border: 2px solid rgba(255,255,255,.10);
  border-radius: 12px;
  margin: 0 8px;
  -webkit-transition: -webkit-transform .12s ease-out, opacity .12s ease-out;
  transition: transform .12s ease-out, opacity .12s ease-out;
  contain: layout style;
}
.na-btn.focused {
  color: #fff;
  border-color: var(--accent);
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
  opacity: 1;
  will-change: transform, opacity;
}

/* ===== FLEXBOX GAP FALLBACK � Tizen 6 / Chrome <84 compat ===== */
/* gap in flexbox is unsupported before Chrome 84; use margin on children instead */
.dash-tray > * + * { margin-left: 30px; }
.settings-grid > * { margin-right: 14px; margin-bottom: 14px; }
.settings-grid > *:nth-child(3n) { margin-right: 0; }
/* Separator is now outside the grid — no special overrides needed */
.pc-step-dots > * + * { margin-left: 16px; }
#info-ch-name > * + * { margin-left: 14px; }
.info-guide-hint > * + * { margin-left: 8px; }
.setup-info-boxes > * + * { margin-left: 20px; }
.buf-options > * + * { margin-left: 24px; }
.pl-del-buttons > * + * { margin-left: 24px; }
.epg-header-hints > * + * { margin-left: 18px; }
.epg-hint > * + * { margin-left: 5px; }
.epg-detail-header > * + * { margin-left: 20px; }
.vi-back-hint > * + * { margin-left: 12px; }
.vi-tags > * { margin-right: 16px; margin-bottom: 16px; }
.vi-buttons > * + * { margin-left: 16px; }
.vi-btn > * + * { margin-left: 12px; }
#vod-info-screen.vi-compact .vi-tags > * { margin-right: 12px; margin-bottom: 12px; }
.vi-tiles-row > * + * { margin-left: 20px; }
.vi-tile-ep-info > * + * { margin-top: 2px; }
.catchup-date-bar > * + * { margin-left: 10px; }
.na-buttons > * + * { margin-left: 16px; }