/* ====== Design tokens ====== */
:root {
  --c-bg:        #0a0d18;
  --c-surface:   #131829;
  --c-surface-2: #1a2038;
  --c-border:    rgba(255,255,255,0.06);
  --c-border-strong: rgba(255,255,255,0.12);
  --c-text:      #e7eaf3;
  --c-text-dim:  #8a92b2;
  --c-accent:    #7c6cff;
  --c-accent-2:  #5ac8fa;
  --c-success:   #3ddc97;
  --c-warning:   #ffb547;
  --c-danger:    #ff5570;
  --c-grad:      linear-gradient(135deg, #7c6cff 0%, #5ac8fa 100%);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.3);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.5);
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --topbar-h:    62px;
  --sidebar-w:   260px;
}

[hidden] { display: none !important; }

[data-theme="light"] {
  --c-bg: #f7f8fc;
  --c-surface: #ffffff;
  --c-surface-2: #f0f3fa;
  --c-border: rgba(0,0,0,0.06);
  --c-border-strong: rgba(0,0,0,0.12);
  --c-text: #14182a;
  --c-text-dim: #5a6080;
}

/* ====== Reset ====== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
button { font-family: inherit; }
img { max-width: 100%; display: block; }
a { color: var(--c-accent); text-decoration: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* ====== Loading skeleton ====== */
.loading-skeleton {
  background: linear-gradient(90deg, var(--c-surface) 0%, var(--c-surface-2) 50%, var(--c-surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* ====== Topbar ====== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: rgba(10,13,24,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-border);
}
.topbar-left { display: flex; align-items: center; gap: 18px; }
.brand {
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em;
  background: var(--c-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar-nav { display: flex; gap: 4px; }
.nav-tab {
  background: transparent; border: none; color: var(--c-text-dim);
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 500; transition: all 0.15s;
}
.nav-tab:hover { color: var(--c-text); background: rgba(255,255,255,0.04); }
.nav-tab.active { color: var(--c-text); background: rgba(124,108,255,0.15); }
.nav-toggle { display: none; }
.icon-btn, .icon-btn-small {
  background: rgba(255,255,255,0.04); border: 1px solid var(--c-border);
  color: var(--c-text); width: 38px; height: 38px;
  border-radius: 10px; display: grid; place-items: center; cursor: pointer;
  transition: all 0.15s;
}
.icon-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--c-border-strong); }
.icon-btn-small { width: 28px; height: 28px; border-radius: 6px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.search-wrap {
  position: relative; width: 320px; max-width: 32vw;
}
.search-wrap input {
  width: 100%; background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-border); color: var(--c-text);
  padding: 9px 14px 9px 36px; border-radius: 10px; font-size: 14px;
  font-family: inherit; transition: all 0.15s;
}
.search-wrap input:focus { outline: none; border-color: var(--c-accent); background: rgba(124,108,255,0.06); }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-text-dim); pointer-events: none; }
.user-menu { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--c-border);
  border-radius: 999px; cursor: pointer; color: var(--c-text);
}
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-grad); display: grid; place-items: center;
  font-weight: 700; font-size: 12px; color: white;
}
.user-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.user-name { font-size: 13px; font-weight: 600; }
.user-expiry { font-size: 11px; color: var(--c-text-dim); }
.user-expiry.warn { color: var(--c-warning); }
.user-expiry.danger { color: var(--c-danger); }
.user-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 12px; padding: 6px; min-width: 200px;
  box-shadow: var(--shadow-lg);
}
.user-dropdown.open { display: block; }
.user-dropdown a {
  display: block; padding: 10px 12px; color: var(--c-text);
  border-radius: 8px; font-size: 13px;
}
.user-dropdown a:hover { background: rgba(255,255,255,0.04); }
.user-dropdown hr { border: none; border-top: 1px solid var(--c-border); margin: 6px 0; }

/* ====== Main wrap ====== */
.main-wrap {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--topbar-h));
}
.sidebar {
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  padding: 16px 12px; overflow-y: auto;
  height: calc(100vh - var(--topbar-h));
  position: sticky; top: var(--topbar-h);
}
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 14px; }
.sidebar-title { font-size: 11px; font-weight: 700; color: var(--c-text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
#sidebar-close { display: none; }
.cat-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--c-text-dim); margin: 2px 0;
  transition: all 0.12s; user-select: none;
}
.cat-item:hover { background: rgba(255,255,255,0.04); color: var(--c-text); }
.cat-item.active { background: rgba(124,108,255,0.15); color: var(--c-text); }
.cat-count { font-size: 11px; color: var(--c-text-dim); background: rgba(255,255,255,0.06); padding: 2px 8px; border-radius: 999px; }

/* ====== Content ====== */
.content {
  padding: 18px;
  display: grid; grid-template-rows: auto 1fr; gap: 18px;
  min-width: 0;
}

/* Player */
.player-section { display: grid; grid-template-rows: auto auto; gap: 12px; }
.player-frame {
  position: relative; aspect-ratio: 16/9; background: #000;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border);
}
.player-frame video { width: 100%; height: 100%; }
.player-overlay {
  position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
  display: grid; place-items: center; pointer-events: none; transition: opacity 0.2s;
}
.player-frame.playing .player-overlay { opacity: 0; }
.player-empty { text-align: center; color: var(--c-text-dim); }
.player-empty p { margin-top: 12px; font-size: 14px; }
.player-error {
  position: absolute; inset: 0; background: rgba(10,13,24,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--c-text); padding: 20px;
}
.player-error strong { font-size: 16px; color: var(--c-danger); }

.now-playing {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); padding: 12px;
}
.np-thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--c-surface-2); }
.np-thumb img { width: 100%; height: 100%; object-fit: contain; }
.np-title { font-weight: 600; font-size: 15px; }
.np-epg { font-size: 12px; color: var(--c-text-dim); margin-top: 2px; }
.np-actions { display: flex; gap: 8px; }

/* Streams grid */
.streams-section {}
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-header h2 { margin: 0; font-size: 18px; font-weight: 700; }
.view-toggle { display: flex; gap: 4px; background: var(--c-surface); border-radius: 10px; padding: 4px; border: 1px solid var(--c-border); }
.view-btn {
  background: transparent; border: none; color: var(--c-text-dim);
  width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
  display: grid; place-items: center;
}
.view-btn.active { background: rgba(124,108,255,0.18); color: var(--c-text); }

.streams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.streams-grid.list { grid-template-columns: 1fr; }
.streams-grid.list .stream-card {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  aspect-ratio: auto; padding: 10px 14px;
}
.streams-grid.list .stream-thumb { aspect-ratio: 1; height: 64px; }
.streams-grid.list .stream-name { text-align: left; padding: 0; font-size: 14px; }

.stream-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
  transition: all 0.15s; position: relative;
  display: flex; flex-direction: column;
}
.stream-card:hover { transform: translateY(-2px); border-color: var(--c-border-strong); box-shadow: var(--shadow-md); }
.stream-card.playing { border-color: var(--c-accent); box-shadow: 0 0 0 2px rgba(124,108,255,0.3); }
.stream-thumb {
  aspect-ratio: 16/10; background: var(--c-surface-2);
  display: grid; place-items: center; padding: 14px;
}
.stream-thumb img { max-height: 100%; max-width: 100%; object-fit: contain; }
.stream-thumb .placeholder {
  font-weight: 800; font-size: 22px; color: var(--c-text-dim);
}
.stream-name {
  padding: 8px 10px 10px; font-size: 12px; font-weight: 500;
  text-align: center; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.stream-num {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.6); color: white;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
}
.stream-fav {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,0.6); border: none; color: white;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity 0.15s;
}
.stream-card:hover .stream-fav, .stream-fav.active { opacity: 1; }
.stream-fav.active { color: var(--c-warning); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--c-text-dim); }

/* ====== Search overlay ====== */
.search-overlay {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: 0;
  background: rgba(10,13,24,0.96); backdrop-filter: blur(8px);
  z-index: 40; overflow-y: auto; display: none;
}
.search-overlay.open { display: block; }
.search-results-inner { max-width: 980px; margin: 0 auto; padding: 30px 20px; }
.search-group h3 { font-size: 13px; color: var(--c-text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin: 24px 0 12px; }

/* ====== Modal ====== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5,7,15,0.85); backdrop-filter: blur(6px);
  z-index: 100; display: grid; place-items: center; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: 24px;
  max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-card.small { max-width: 420px; }
.modal-card h3 { margin: 0 0 12px; font-size: 18px; }
.modal-card p { color: var(--c-text-dim); font-size: 14px; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.btn-primary, .btn-secondary {
  padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14px;
  cursor: pointer; border: 1px solid transparent; transition: all 0.15s;
}
.btn-primary { background: var(--c-grad); color: white; border: none; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(124,108,255,0.4); }
.btn-secondary { background: rgba(255,255,255,0.04); color: var(--c-text); border-color: var(--c-border); }
.btn-secondary:hover { background: rgba(255,255,255,0.08); }

/* ====== Series episode list ====== */
.series-info { display: grid; grid-template-columns: 200px 1fr; gap: 20px; margin-bottom: 20px; }
.series-cover { width: 100%; border-radius: 12px; aspect-ratio: 2/3; object-fit: cover; background: var(--c-surface-2); }
.series-meta h2 { margin: 0 0 8px; }
.series-meta .plot { color: var(--c-text-dim); font-size: 13px; line-height: 1.5; }
.season-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 12px; }
.season-tab { padding: 6px 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--c-text-dim); }
.season-tab.active { background: rgba(124,108,255,0.15); color: var(--c-text); border-color: var(--c-accent); }
.episode-list { display: flex; flex-direction: column; gap: 6px; }
.episode-row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--c-surface-2); border-radius: 8px;
  cursor: pointer; transition: all 0.12s;
}
.episode-row:hover { background: rgba(124,108,255,0.1); }
.episode-num { color: var(--c-text-dim); font-weight: 600; font-size: 13px; }
.episode-title { font-size: 14px; }
.episode-play { color: var(--c-accent); }

/* ====== Plyr customization ====== */
.plyr--video { --plyr-color-main: #7c6cff; }
.plyr--full-ui input[type=range] { color: var(--c-accent); }

/* ====== Responsive ====== */
@media (max-width: 980px) {
  .topbar-nav { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .search-wrap { width: 200px; }
  .user-info { display: none; }
  .main-wrap { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: min(280px, 86vw);
    z-index: 60; transform: translateX(-100%); transition: transform 0.25s;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  #sidebar-close { display: grid; }
}

/* ===== Mobile (telas até 600px) — otimizado pra IPTV ===== */
@media (max-width: 600px) {
  .topbar { padding: 0 10px; height: 56px; }
  --topbar-h: 56px;
  .brand { font-size: 16px; }
  .search-wrap { width: 130px; max-width: 38vw; }
  .search-wrap input { padding-left: 30px; padding-right: 8px; font-size: 13px; }
  .user-chip { padding: 4px; }
  .content { padding: 10px; gap: 12px; }

  /* Sidebar mais "ampla" no mobile */
  .sidebar { width: min(260px, 80vw); }

  /* Grid de canais — 3 colunas fixas, mais legível */
  .streams-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* Logo quadrado, centralizado, sem espaço morto */
  .stream-thumb {
    aspect-ratio: 1;             /* quadrado em vez de 4:3 */
    padding: 4px;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .stream-thumb img {
    max-width: 92%;
    max-height: 92%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .stream-thumb .placeholder {
    font-size: 24px;
    font-weight: 800;
    color: var(--c-text-dim);
  }

  /* Nome do canal: maior, bold, 2 linhas garantidas */
  .stream-name {
    padding: 8px 6px 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    min-height: 36px;
    letter-spacing: -0.01em;
  }

  /* Número do canal mais visível */
  .stream-num {
    font-size: 10px;
    padding: 2px 6px;
    top: 6px;
    left: 6px;
    background: rgba(0,0,0,0.75);
    font-weight: 700;
  }

  /* Favorito sempre visível no mobile (não tem hover) */
  .stream-fav {
    opacity: 1;
    width: 26px;
    height: 26px;
    top: 6px;
    right: 6px;
    font-size: 13px;
    background: rgba(0,0,0,0.55);
  }

  /* Player + controles compactos */
  .now-playing { grid-template-columns: 48px 1fr; padding: 10px; }
  .now-playing .np-actions { grid-column: span 2; justify-content: flex-end; }
  .np-thumb { width: 48px; height: 48px; }
  .np-title { font-size: 14px; }
  .np-epg { font-size: 11px; }

  /* Cabeçalho da seção */
  .section-header h2 { font-size: 16px; }
}

/* ===== Mobile bem pequeno (até 380px — iPhone SE etc.) ===== */
@media (max-width: 380px) {
  .streams-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .stream-name { font-size: 14px; }
}

/* ===== Modo paisagem mobile (giro o celular) ===== */
@media (max-width: 900px) and (orientation: landscape) {
  .player-frame { aspect-ratio: 21/9; }
  .streams-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}/* ============================================================
 * v2.4 — Adicionar AO FINAL do app.css
 * Estilos: cards com poster (filmes/séries), modal de filme,
 *          rating overlay, melhor mobile.
 * ============================================================ */

/* ===== Cards "poster" pra filmes/séries (formato 2:3 vertical) ===== */
.stream-card.poster .stream-thumb {
  aspect-ratio: 2/3;
  padding: 0;
  background: var(--c-surface-2);
  position: relative;
  overflow: hidden;
}
.stream-card.poster .stream-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  max-height: none;
}
.stream-card.poster .stream-thumb .placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 32px;
}
.stream-card.poster .stream-name {
  font-size: 12px;
  font-weight: 500;
  padding: 8px 8px 10px;
  min-height: auto;
  -webkit-line-clamp: 2;
}

/* Meta bar sobreposta no poster (rating / ano) */
.card-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
  color: white;
  padding: 18px 8px 6px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  gap: 8px;
  justify-content: center;
  pointer-events: none;
}

/* Hover de poster: ergue, mostra meta de forma mais nítida */
.stream-card.poster:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 2px var(--c-accent);
  z-index: 5;
}

/* Grid de filmes/series: posters menores e mais por linha */
.streams-grid:has(.poster) {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

@media (max-width: 600px) {
  .streams-grid:has(.poster) {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .stream-card.poster .stream-name {
    font-size: 11.5px;
    padding: 6px 4px 8px;
  }
}

@media (max-width: 380px) {
  .streams-grid:has(.poster) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Modal de filme (NOVO) ===== */
.modal-card.movie-modal {
  padding: 0;
  overflow: hidden;
  max-width: 820px;
}

.movie-hero {
  height: 280px;
  background-size: cover;
  background-position: center;
  background-color: var(--c-surface-2);
  position: relative;
}

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s;
}
.modal-close:hover { background: rgba(0,0,0,0.85); }

.movie-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 0 28px 28px;
  margin-top: -100px;
  position: relative;
}

.movie-cover {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-surface-2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.movie-cover img { width: 100%; height: 100%; object-fit: cover; }
.movie-cover .placeholder {
  display: grid; place-items: center; height: 100%;
  font-size: 48px; font-weight: 800; color: var(--c-text-dim);
}

.movie-info { padding-top: 110px; }
.movie-info h2 { font-size: 26px; margin: 0 0 10px; line-height: 1.15; }

.movie-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  color: var(--c-text-dim);
  font-size: 13px;
}
.movie-meta .rating { color: var(--c-warning); font-weight: 600; }
.movie-meta .genre { color: var(--c-accent); }

.movie-plot {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text);
  margin: 0 0 16px;
}

.movie-cast, .movie-director {
  font-size: 13px;
  color: var(--c-text-dim);
  margin-bottom: 6px;
}
.movie-cast strong, .movie-director strong { color: var(--c-text); margin-right: 6px; }

.movie-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.btn-play {
  font-size: 16px;
  padding: 12px 28px;
}

@media (max-width: 700px) {
  .modal-card.movie-modal { max-width: 100%; max-height: 100vh; border-radius: 0; }
  .movie-hero { height: 180px; }
  .movie-body {
    grid-template-columns: 130px 1fr;
    gap: 16px;
    padding: 0 16px 20px;
    margin-top: -60px;
  }
  .movie-info { padding-top: 70px; }
  .movie-info h2 { font-size: 18px; }
  .movie-plot { font-size: 13px; }
}

@media (max-width: 480px) {
  .movie-body {
    grid-template-columns: 1fr;
    margin-top: -40px;
  }
  .movie-cover {
    width: 130px;
    margin: 0 auto;
  }
  .movie-info { padding-top: 14px; text-align: center; }
  .movie-meta { justify-content: center; }
  .movie-actions { justify-content: center; }
}

/* ===== Loading "carregando mais" indicator ===== */
#load-progress {
  text-align: center;
  color: var(--c-text-dim);
  font-size: 12px;
  padding: 16px 0;
  letter-spacing: 0.04em;
}
/* ============================================================
   FluxoPrime v2.4.5 — Hero + Carrosséis + Player Modal
   Bloco completo de adições (substitui CSS dos hotfixes anteriores)
   Cole no FINAL do app.css
   ============================================================ */

/* ============================================================
   1. HERO ROTATIVO
   ============================================================ */
.hero-wrap {
  position: relative;
  width: 100%;
  height: clamp(360px, 55vh, 620px);
  margin-bottom: 32px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-bg);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  filter: brightness(0.55);
  transform: scale(1.05);
  transition: transform 8s ease;
}
.hero-slide.active .hero-bg { transform: scale(1.12); }
.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,13,24,0.92) 0%, rgba(10,13,24,0.5) 45%, transparent 70%),
    linear-gradient(180deg, transparent 50%, rgba(10,13,24,0.92) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 48px;
  max-width: 720px;
}
.hero-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--c-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.hero-title {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 14px 0;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
  letter-spacing: -0.5px;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 14px;
  color: #d8d8d8;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
.hero-meta .rating { color: var(--c-warning); font-weight: 700; }
.hero-meta .badge {
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  font-size: 12px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(4px);
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hero-btn:hover { transform: translateY(-1px); }
.hero-btn-primary { background: var(--c-grad); color: #fff; }
.hero-btn-primary:hover { box-shadow: 0 8px 20px rgba(124,108,255,0.45); }
.hero-btn-secondary {
  background: rgba(255,255,255,0.12);
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
}
.hero-btn-secondary:hover { background: rgba(255,255,255,0.22); }
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10,13,24,0.6);
  border: 1px solid var(--c-border-strong);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.hero-wrap:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: rgba(124,108,255,0.85); border-color: var(--c-accent); }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }
.hero-dots {
  position: absolute;
  bottom: 18px;
  right: 24px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hero-dot {
  width: 28px;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.hero-dot.active { background: var(--c-grad); width: 36px; }

/* ============================================================
   2. CARROSSÉIS HORIZONTAIS (com fix de overflow)
   ============================================================ */

/* Fix do overflow: força containers respeitarem largura do grid */
.streams-section { min-width: 0; }
#home-block { min-width: 0; width: 100%; }

.carousel-row {
  margin-bottom: 36px;
  position: relative;
  min-width: 0;
  width: 100%;
}
.carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  margin-bottom: 12px;
}
.carousel-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
  letter-spacing: -0.3px;
}
.carousel-track-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
}
.carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 4px 8px 16px 8px;
  scrollbar-width: none;
  min-width: 0;
  max-width: 100%;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track .stream-card,
.carousel-track .stream-card.poster {
  flex: 0 0 165px;
  width: 165px;
  scroll-snap-align: start;
}
.carousel-arrow {
  position: absolute;
  top: 0;
  bottom: 16px;
  width: 56px;
  background: linear-gradient(90deg, rgba(10,13,24,0.92), rgba(10,13,24,0));
  border: none;
  cursor: pointer;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
  color: #fff;
  font-size: 28px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.carousel-arrow.next {
  right: 0;
  background: linear-gradient(270deg, rgba(10,13,24,0.92), rgba(10,13,24,0));
  justify-content: flex-end;
  padding-right: 8px;
  padding-left: 0;
}
.carousel-arrow.prev { left: 0; }
.carousel-track-wrap:hover .carousel-arrow { opacity: 1; }
.carousel-arrow:hover { color: var(--c-accent-2); }
@media (hover: hover) and (pointer: fine) {
  .carousel-arrow { display: flex; }
}

/* ============================================================
   3. PLAYER MODAL (Netflix-style)
   ============================================================ */

/* Quando NÃO tá tocando: player-section completamente escondido */
.player-section:not(:has(.player-frame.playing)) {
  display: none;
}

/* Quando tá tocando: vira modal fullscreen */
.player-section:has(.player-frame.playing) {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  padding: 0;
  margin: 0;
  animation: playerModalFadeIn 0.25s ease;
}

@keyframes playerModalFadeIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(12px); }
}

/* Player ocupa o centro */
.player-section:has(.player-frame.playing) .player-frame {
  width: min(95vw, 1400px);
  max-width: 1400px;
  max-height: 80vh;
  aspect-ratio: 16/9;
  margin: auto;
  border-radius: var(--radius-lg);
  align-self: center;
  justify-self: center;
  animation: playerModalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes playerModalScaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Now-playing bar fica embaixo, flutuante */
.player-section:has(.player-frame.playing) .now-playing {
  position: relative;
  width: min(95vw, 900px);
  margin: 0 auto 24px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  z-index: 201;
}

/* Botão X de fechar (injetado via JS) */
.player-modal-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 202;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
  line-height: 1;
}
.player-modal-close:hover {
  background: rgba(220, 50, 50, 0.85);
  border-color: rgba(255,255,255,0.4);
  transform: scale(1.08);
}

/* ============================================================
   4. RESPONSIVO MOBILE
   ============================================================ */
@media (max-width: 768px) {
  /* Hero */
  .hero-wrap {
    height: clamp(320px, 60vh, 480px);
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    margin-bottom: 24px;
  }
  .hero-content { padding: 24px 20px; max-width: 100%; }
  .hero-title { font-size: clamp(22px, 6vw, 32px); }
  .hero-meta { font-size: 12px; gap: 10px; }
  .hero-btn { padding: 10px 18px; font-size: 13px; }
  .hero-dots { bottom: 12px; right: 16px; }
  .hero-dot { width: 20px; }
  .hero-dot.active { width: 28px; }

  /* Carrosséis */
  .carousel-track .stream-card,
  .carousel-track .stream-card.poster { flex: 0 0 130px; width: 130px; }
  .carousel-title { font-size: 17px; }
  .carousel-arrow { display: none !important; }
  .carousel-row { margin-bottom: 28px; }

  /* Player modal */
  .player-section:has(.player-frame.playing) .player-frame {
    width: 100%;
    max-height: 60vh;
    border-radius: 0;
  }
  .player-section:has(.player-frame.playing) .now-playing {
    width: calc(100% - 24px);
    margin-bottom: 12px;
  }
  .player-modal-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}

/* ============================================================
   5. LIGHT THEME
   ============================================================ */
[data-theme="light"] .hero-gradient {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 45%, transparent 70%),
    linear-gradient(180deg, transparent 50%, rgba(247,248,252,0.95) 100%);
}
[data-theme="light"] .hero-arrow {
  background: rgba(255,255,255,0.7);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
[data-theme="light"] .carousel-arrow {
  background: linear-gradient(90deg, rgba(247,248,252,0.95), rgba(247,248,252,0));
  color: var(--c-text);
}
[data-theme="light"] .carousel-arrow.next {
  background: linear-gradient(270deg, rgba(247,248,252,0.95), rgba(247,248,252,0));
}
[data-theme="light"] .player-section:has(.player-frame.playing) {
  background: rgba(247,248,252,0.92);
}
/* ============================================================
   FluxoPrime v2.4.6 — Fase 2: Skeleton + Animações
   ============================================================ */

/* ============================================================
   1. SKELETON CARDS (forma de poster, shimmer suave)
   ============================================================ */

/* Skeleton no formato de card real (poster 2:3 + nome embaixo) */
.stream-card.skeleton {
  pointer-events: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Não usa stagger animation */
  animation: none !important;
  opacity: 1 !important;
}

.stream-card.skeleton .stream-thumb,
.stream-card.skeleton .stream-name {
  background: linear-gradient(
    90deg,
    var(--c-surface) 0%,
    var(--c-surface-2) 50%,
    var(--c-surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  color: transparent;
}

.stream-card.skeleton.poster .stream-thumb {
  aspect-ratio: 2/3;
  border-radius: 0;
}

.stream-card.skeleton .stream-name {
  height: 14px;
  border-radius: 4px;
  margin: 8px 12px;
  width: calc(100% - 24px);
}

/* Skeleton da sidebar (categorias) — mais polido */
.cat-skeleton {
  height: 38px;
  border-radius: 8px;
  margin: 4px 0;
  background: linear-gradient(
    90deg,
    var(--c-surface) 0%,
    var(--c-surface-2) 50%,
    var(--c-surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

/* Skeleton do hero (no primeiro load) */
.hero-skeleton {
  width: 100%;
  height: clamp(360px, 55vh, 620px);
  margin-bottom: 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    90deg,
    var(--c-surface) 0%,
    var(--c-surface-2) 50%,
    var(--c-surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

/* ============================================================
   2. TRANSIÇÃO ENTRE SEÇÕES (fade out → in)
   ============================================================ */

.streams-section {
  transition: opacity 0.2s ease;
}

.streams-section.section-fading-out {
  opacity: 0;
  pointer-events: none;
}

.streams-section.section-fading-in {
  animation: sectionFadeIn 0.4s ease;
}

@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   3. CARDS COM ENTRADA EM CASCATA (stagger)
   ============================================================ */

@keyframes cardEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Aplica entrada em cascata só pros primeiros 12 cards (depois fade simples) */
.streams-grid .stream-card:not(.skeleton) {
  animation: cardEnter 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  animation-delay: calc(var(--card-idx, 0) * 30ms);
}

/* Carrosséis também com stagger */
.carousel-track .stream-card:not(.skeleton) {
  animation: cardEnter 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  animation-delay: calc(var(--card-idx, 0) * 25ms);
}

/* Reduce motion fallback */
@media (prefers-reduced-motion: reduce) {
  .streams-grid .stream-card:not(.skeleton),
  .carousel-track .stream-card:not(.skeleton),
  .streams-section.section-fading-in {
    animation: none !important;
  }
}

/* ============================================================
   4. MODAIS COM ENTRADA SUAVE
   ============================================================ */

.modal-backdrop:not([hidden]) {
  animation: modalBackdropIn 0.25s ease;
}

.modal-backdrop:not([hidden]) .modal-card {
  animation: modalCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalBackdropIn {
  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to   { opacity: 1; }
}

@keyframes modalCardIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   5. NAV TABS — indicador suave + hover
   ============================================================ */

.nav-tab {
  position: relative;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--c-grad);
  border-radius: 2px;
  transition: all 0.25s ease;
  transform: translateX(-50%);
}

.nav-tab.active::after {
  width: 70%;
}

/* ============================================================
   6. CAT-ITEM hover/active suaves
   ============================================================ */

.cat-item {
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.cat-item:hover {
  transform: translateX(2px);
}

.cat-item.active {
  position: relative;
}

.cat-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--c-grad);
  border-radius: 0 3px 3px 0;
}

/* ============================================================
   7. HOVER MAIS LEGAL NOS POSTERS
   ============================================================ */

.stream-card.poster:not(.skeleton) {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

.stream-card.poster:not(.skeleton):hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  z-index: 1;
}

/* ============================================================
   8. SCROLL SUAVE GLOBAL
   ============================================================ */

html {
  scroll-behavior: smooth;
}
/* ============================================================
   FluxoPrime v2.4.9 — Fase 3: Continuar Assistindo
   Cole no FINAL do app.css (depois do bloco da Fase 2)
   ============================================================ */

/* ============================================================
   1. CARD DE CONTINUE WATCHING
   ============================================================ */

.continue-watching-row .carousel-title {
  /* Destaque visual pro título — gradient como o brand */
  background: var(--c-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.cw-card {
  position: relative;
}

/* Barra de progresso embaixo do poster (estilo Netflix) */
.cw-progress-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
  overflow: hidden;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.cw-progress-fill {
  height: 100%;
  background: var(--c-grad);
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(124, 108, 255, 0.5);
}

/* Tempo overlay (canto inferior esquerdo) */
.cw-time {
  position: absolute;
  left: 8px;
  bottom: 12px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  letter-spacing: 0.3px;
  backdrop-filter: blur(4px);
}

/* Botão X de remover (canto superior direito do thumb) */
.cw-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
  font-family: inherit;
}

.cw-card:hover .cw-remove {
  opacity: 1;
}

.cw-remove:hover {
  background: rgba(220, 50, 50, 0.9);
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Overlay de play (aparece no hover) */
.cw-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 3;
  pointer-events: none;
  border-radius: var(--radius-md);
}

.cw-card:hover .cw-play-overlay {
  opacity: 1;
}

/* Hover effect mais forte nos cards CW (são especiais) */
.cw-card:hover .stream-thumb {
  border-color: var(--c-accent);
  box-shadow: 0 14px 36px rgba(124, 108, 255, 0.35);
}

/* ============================================================
   2. RESPONSIVO MOBILE
   ============================================================ */

@media (max-width: 768px) {
  .cw-time {
    font-size: 10px;
    padding: 2px 6px;
    bottom: 10px;
  }

  .cw-remove {
    width: 24px;
    height: 24px;
    font-size: 16px;
    /* Mobile: sempre visível (sem hover) */
    opacity: 0.85;
  }

  .cw-play-overlay {
    font-size: 42px;
    /* Mobile: não mostra overlay (tap não tem hover) */
    display: none;
  }

  .cw-progress-bar {
    height: 3px;
  }
}

/* ============================================================
   3. LIGHT THEME ADAPTATIONS
   ============================================================ */

[data-theme="light"] .cw-progress-bar {
  background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .cw-time {
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-text);
}

[data-theme="light"] .cw-remove {
  background: rgba(255, 255, 255, 0.85);
  color: var(--c-text);
  border-color: rgba(0, 0, 0, 0.1);
}

/* ============================================================
   v2.5.0 — PWA: Install banner + Update banner + Offline pill
   ============================================================ */

.pwa-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  width: min(560px, calc(100vw - 32px));
  background: var(--c-surface, #141828);
  border: 1px solid var(--c-border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  z-index: 300;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  opacity: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.pwa-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.pwa-banner-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c6cff, #5ac8fa);
  color: white;
  border-radius: 12px;
}

.pwa-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pwa-banner-text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text, #e7e9f1);
}

.pwa-banner-text span {
  font-size: 12px;
  color: var(--c-text-dim, #9ba3b8);
  line-height: 1.4;
}

.pwa-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-banner-actions button {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.pwa-banner-actions button:hover { transform: translateY(-1px); }
.pwa-banner-actions button:active { transform: translateY(0); }

.pwa-banner-actions .btn-primary {
  background: linear-gradient(135deg, #7c6cff, #5ac8fa);
  color: white;
}

.pwa-banner-actions .btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-text, #e7e9f1);
}

.pwa-banner.update .pwa-banner-icon {
  display: none;
}

@media (max-width: 480px) {
  .pwa-banner {
    flex-wrap: wrap;
    bottom: 12px;
    width: calc(100vw - 24px);
    padding: 12px 14px;
  }
  .pwa-banner-text { flex: 1 1 calc(100% - 60px); }
  .pwa-banner-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-top: 4px;
  }
}

/* Offline indicator (pill flutuante) */
.offline-pill {
  position: fixed;
  top: 64px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 99, 99, 0.15);
  border: 1px solid rgba(255, 99, 99, 0.35);
  color: #ff8a8a;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  z-index: 250;
  animation: offlinePulse 0.3s ease-out;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.offline-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes offlinePulse {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

[data-theme="light"] .pwa-banner {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .pwa-banner-actions .btn-secondary {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .offline-pill {
  background: rgba(255, 99, 99, 0.10);
  border-color: rgba(255, 99, 99, 0.3);
}

/* ============================================================
   v2.6.1 — Bottom nav (mobile) + iOS install banner
   ============================================================ */

/* Bottom nav: escondido em desktop, fixo embaixo no mobile */
.bottom-nav {
  display: none;
}

@media (max-width: 980px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 64px;
    background: rgba(20, 25, 45, 0.95);
    border-top: 1px solid var(--c-border, rgba(255,255,255,0.08));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 90;
    padding-bottom: env(safe-area-inset-bottom, 0); /* iOS notch */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  }

  .bottom-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--c-text-dim, #9ba3b8);
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s ease;
    position: relative;
  }

  .bottom-nav-btn svg {
    transition: transform 0.15s ease;
  }

  .bottom-nav-btn:active svg { transform: scale(0.9); }

  .bottom-nav-btn.active {
    color: var(--c-accent, #7c6cff);
  }

  .bottom-nav-btn.active::before {
    content: '';
    position: absolute;
    top: 0; left: 25%; right: 25%;
    height: 2px;
    background: linear-gradient(90deg, #7c6cff, #5ac8fa);
    border-radius: 0 0 3px 3px;
  }

  /* Padding extra no body pra conteúdo não ficar embaixo do bottom nav */
  body.app-body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
  }

  /* Sidebar precisa não ficar embaixo do bottom nav */
  .sidebar {
    bottom: calc(64px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* Light theme */
[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

/* ====== iOS Install Banner ====== */
.ios-install-banner {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0)); /* acima do bottom-nav */
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  width: min(560px, calc(100vw - 24px));
  background: var(--c-surface, #141828);
  border: 1px solid var(--c-border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  z-index: 300;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0.98;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.ios-install-banner.show {
  transform: translateX(-50%) translateY(0);
}

.ios-install-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.ios-install-header strong { font-size: 14px; font-weight: 600; }
.ios-install-close {
  background: transparent; border: none; color: var(--c-text-dim, #9ba3b8);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
  margin-left: auto;
}
.ios-install-steps {
  font-size: 13px; color: var(--c-text-dim, #9ba3b8);
  line-height: 1.7;
}
.ios-install-steps .step {
  display: flex; align-items: center; gap: 8px;
}
.ios-install-steps svg { flex-shrink: 0; }

@media (max-width: 480px) {
  .ios-install-banner { width: calc(100vw - 16px); padding: 12px 14px; }
}

/* ============================================================
   v2.7.0 — Home Page (Início curado)
   ============================================================ */

.home-greeting {
  margin-bottom: 24px;
  padding: 8px 0 0;
}

.home-greeting h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-text, #e7e9f1);
  margin-bottom: 4px;
}

.home-greeting .greeting-name {
  background: linear-gradient(135deg, #7c6cff 0%, #5ac8fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-greeting p {
  color: var(--c-text-dim, #9ba3b8);
  font-size: 15px;
  font-weight: 400;
}

@media (max-width: 600px) {
  .home-greeting { margin-bottom: 16px; }
  .home-greeting h1 { font-size: 22px; }
  .home-greeting p { font-size: 13px; }
}

/* Skeleton */
.home-skeleton {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.home-greeting-skeleton {
  height: 50px;
  width: 60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 10px;
}

.home-hero-skeleton {
  height: 380px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 14px;
}

.home-row-skeleton {
  height: 220px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 12px;
}

@media (max-width: 600px) {
  .home-hero-skeleton { height: 200px; }
  .home-row-skeleton { height: 160px; }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* CTA "Ver todos os canais ao vivo" */
.home-cta {
  margin: 32px 0 24px;
  display: flex;
  justify-content: center;
}

.home-cta-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: linear-gradient(135deg, rgba(124, 108, 255, 0.18), rgba(90, 200, 250, 0.14));
  border: 1px solid rgba(124, 108, 255, 0.35);
  border-radius: 16px;
  color: var(--c-text, #e7e9f1);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.18s ease;
  width: min(560px, 100%);
}

.home-cta-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 108, 255, 0.6);
  box-shadow: 0 12px 30px rgba(124, 108, 255, 0.18);
}

.home-cta-btn .cta-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.home-cta-btn .cta-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.home-cta-btn .cta-text strong {
  font-weight: 600;
  font-size: 15px;
}

.home-cta-btn .cta-text small {
  color: var(--c-text-dim, #9ba3b8);
  font-size: 12px;
  font-weight: 400;
}

.home-cta-btn .cta-arrow {
  font-size: 22px;
  color: var(--c-accent, #7c6cff);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}

.home-cta-btn:hover .cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .home-cta { margin: 20px 0 16px; }
  .home-cta-btn { padding: 14px 18px; font-size: 14px; }
  .home-cta-btn .cta-icon { font-size: 22px; }
}

/* Esconde o título "Início" do streams-title (a saudação substitui) */
.streams-section .section-header h2:empty {
  display: none;
}

[data-theme="light"] .home-cta-btn {
  background: linear-gradient(135deg, rgba(124, 108, 255, 0.08), rgba(90, 200, 250, 0.06));
  border-color: rgba(124, 108, 255, 0.25);
}

/* ============================================================
   v2.7.1 — Home mode layout fix
   ============================================================ */

/* Quando a home tá ativa, sidebar desaparece e content ocupa 100% */
body.home-mode .main-wrap {
  grid-template-columns: 1fr !important;
}

body.home-mode .sidebar {
  display: none !important;
}

body.home-mode .streams-section .section-header {
  display: none;
}

body.home-mode .streams-grid {
  display: none;
}

/* Padding maior na home pra dar respiro estilo Netflix */
body.home-mode .content {
  padding: 24px 32px;
}

@media (max-width: 980px) {
  body.home-mode .content {
    padding: 16px 14px;
  }
}

/* Content tem que ter min-width=0 pra grid não estourar */
body.home-mode #home-block {
  min-width: 0;
  width: 100%;
}

/* ============================================================
   v2.7.2 — Sidebar toggle universal (desktop + mobile)
   ============================================================ */

/* DESKTOP: sidebar como coluna do grid, controlada pela classe body.sidebar-open */
@media (min-width: 981px) {
  /* Por padrão (sem .sidebar-open) sidebar fica colapsada */
  .main-wrap {
    grid-template-columns: 0 1fr;
    transition: grid-template-columns 0.28s ease;
  }
  body.sidebar-open .main-wrap {
    grid-template-columns: var(--sidebar-w) 1fr;
  }
  /* Sidebar oculta visualmente quando fechada (sem deixar conteúdo vazar) */
  body:not(.sidebar-open) .sidebar {
    overflow: hidden;
    border-right: none;
    padding-left: 0;
    padding-right: 0;
    width: 0;
  }
  /* Cancela override anterior do home-mode (deixa user controlar) */
  body.home-mode .sidebar {
    display: block !important;
  }
  body.home-mode.sidebar-open .main-wrap {
    grid-template-columns: var(--sidebar-w) 1fr !important;
  }
  body.home-mode:not(.sidebar-open) .main-wrap {
    grid-template-columns: 0 1fr !important;
  }
}

/* MOBILE: sidebar continua drawer, controlada por body.sidebar-open OU sidebar.open */
/* Backdrop da sidebar mobile.
   display:none por DEFAULT (fora de media query) pra NUNCA participar do grid
   do .main-wrap — senão vira um 3º item no grid de 2 colunas e desmonta o
   layout. Só vira block (via .show) no mobile. position:fixed = fora do fluxo. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

@media (max-width: 980px) {
  /* Quando body tem sidebar-open, sidebar abre (mantém compat com classe .open antiga) */
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
  /* Backdrop só aparece no mobile, e só quando .show */
  .sidebar-backdrop.show {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================
   v2.7.3 — Seek/resume overlay
   ============================================================ */

.player-frame {
  position: relative; /* garante que overlay absolute fica dentro */
}

.seek-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.seek-overlay.show {
  opacity: 1;
}

.seek-overlay-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--c-accent, #7c6cff);
  border-right-color: var(--c-accent, #7c6cff);
  border-radius: 50%;
  animation: seek-spin 0.85s linear infinite;
}

@keyframes seek-spin {
  to { transform: rotate(360deg); }
}

.seek-overlay-text {
  color: white;
  font-size: 15px;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0 16px;
}

@media (max-width: 480px) {
  .seek-overlay-spinner { width: 38px; height: 38px; }
  .seek-overlay-text { font-size: 13px; }
}

/* =============================================================================
   v2.10.2 — Series Drawer (in-player) + Auto-next overlay
   ============================================================================= */

/* Player frame precisa ser positioning context pros overlays internos */
.player-frame {
  position: relative;
  overflow: hidden; /* drawer slide só dentro do frame */
}

/* ---- Drawer lateral de episódios ---- */
.series-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100%;
  background: rgba(15, 18, 30, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  z-index: 5;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
}

.series-drawer:not([hidden]) {
  display: flex; /* override do hidden depois do show */
}

.series-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.drawer-title-wrap {
  flex: 1;
  min-width: 0;
}

.drawer-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--c-text-faint, #6b7390);
  margin-bottom: 2px;
}

.drawer-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text, #e7e9f1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn-small {
  background: transparent;
  border: none;
  color: var(--c-text-dim, #a4aac0);
  font-size: 24px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 120ms;
}

.icon-btn-small:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-text, #e7e9f1);
}

.drawer-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  scrollbar-width: thin;
}

.drawer-tabs::-webkit-scrollbar { height: 6px; }
.drawer-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.drawer-tab {
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-text-dim, #a4aac0);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  transition: all 120ms;
}

.drawer-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-text, #e7e9f1);
}

.drawer-tab.active {
  background: var(--c-primary, #ff6b6b);
  color: #fff;
  border-color: var(--c-primary, #ff6b6b);
}

.drawer-eps {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  scrollbar-width: thin;
}

.drawer-eps::-webkit-scrollbar { width: 8px; }
.drawer-eps::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.drawer-ep {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background 100ms;
  border-left: 3px solid transparent;
  user-select: none;
}

.drawer-ep:hover {
  background: rgba(255, 255, 255, 0.05);
}

.drawer-ep.current {
  border-left-color: var(--c-primary, #ff6b6b);
  background: rgba(255, 107, 107, 0.08);
}

.drawer-ep.current .drawer-ep-num {
  color: var(--c-primary, #ff6b6b);
}

.drawer-ep-num {
  color: var(--c-text-faint, #6b7390);
  font-size: 11px;
  font-weight: 700;
  min-width: 32px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.drawer-ep-info {
  flex: 1;
  min-width: 0;
}

.drawer-ep-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text, #e7e9f1);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drawer-ep-meta {
  font-size: 11px;
  color: var(--c-text-faint, #6b7390);
  margin-top: 2px;
}

.drawer-ep-play {
  color: var(--c-text-faint, #6b7390);
  font-size: 14px;
  flex-shrink: 0;
}

.drawer-ep:hover .drawer-ep-play {
  color: var(--c-primary, #ff6b6b);
}

/* Mobile: drawer fullscreen */
@media (max-width: 768px) {
  .series-drawer {
    width: 100%;
  }
}

/* ---- Auto-next countdown overlay ---- */
.autonext-overlay {
  position: absolute;
  bottom: 90px;
  right: 24px;
  background: rgba(15, 18, 30, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px;
  width: 280px;
  z-index: 6;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: autonextFadeIn 200ms ease;
}

@keyframes autonextFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.autonext-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.autonext-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.autonext-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--c-text-faint, #6b7390);
  margin-bottom: 4px;
}

.autonext-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text, #e7e9f1);
  margin-bottom: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.autonext-actions {
  display: flex;
  gap: 8px;
}

.autonext-btn {
  flex: 1;
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
  font-family: inherit;
}

.autonext-btn.primary {
  background: var(--c-primary, #ff6b6b);
  color: #fff;
}

.autonext-btn.primary:hover {
  filter: brightness(1.08);
}

.autonext-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-text-dim, #a4aac0);
}

.autonext-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-text, #e7e9f1);
}

.autonext-countdown {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin-left: 4px;
}

@media (max-width: 768px) {
  .autonext-overlay {
    bottom: 70px;
    right: 12px;
    width: calc(100% - 24px);
    max-width: 320px;
  }
}

/* ===== v2.11.0 — Live Section (estilo Pluto) ===== */
.live-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0;
}
@media (min-width: 700px)  { .live-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .live-grid { grid-template-columns: repeat(3, 1fr); } }

.channel-card {
  background: var(--c-card, #14141c);
  border: 1px solid var(--c-border, #22222e);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 14px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  position: relative;
  overflow: hidden;
  animation: cardIn .35s ease both;
  animation-delay: calc(var(--card-idx, 0) * 30ms);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.channel-card:hover {
  background: var(--c-card-hover, #1c1c28);
  border-color: var(--c-primary, #8b5cf6);
  transform: translateY(-2px);
}
.channel-card.playing {
  border-color: var(--c-primary, #8b5cf6);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}
.channel-card:hover .play-overlay { opacity: 1; }

.channel-logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--c-bg-2, #2a2a38);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.channel-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.channel-logo .placeholder {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text-dim, #8a8a96);
}
.play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(139, 92, 246, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s;
  border-radius: 8px;
}
.play-overlay::before {
  content: '▶';
  color: white;
  font-size: 22px;
  margin-left: 3px;
}

.channel-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.channel-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.channel-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text, #e5e5ec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.channel-card .stream-fav {
  background: transparent;
  border: 0;
  color: var(--c-text-faded, #5a5a66);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color .15s, transform .15s;
}
.channel-card .stream-fav:hover { transform: scale(1.15); color: #fbbf24; }
.channel-card .stream-fav.active { color: #fbbf24; }

.live-epg-area { min-height: 50px; }

.epg-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 4px;
  line-height: 1.3;
}
.epg-label {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  width: 56px;
}
.epg-label.now {
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 4px;
}
.epg-label.now::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  50% { opacity: 0.4; }
}
.epg-label.next { color: var(--c-text-faded, #5a5a66); }
.epg-time {
  color: var(--c-text-dim, #8a8a96);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 11.5px;
}
.epg-title {
  color: var(--c-text, #e5e5ec);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.epg-title.dim { color: var(--c-text-dim, #8a8a96); }

.epg-progress {
  margin-top: 8px;
  height: 3px;
  background: var(--c-bg-2, #2a2a38);
  border-radius: 2px;
  overflow: hidden;
}
.epg-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary, #8b5cf6), var(--c-primary-light, #a78bfa));
  transition: width .3s;
}

.no-epg-msg {
  font-size: 12px;
  color: var(--c-text-faded, #5a5a66);
  font-style: italic;
  padding: 8px 0;
}
.channel-card.no-epg .epg-row { color: var(--c-text-faded, #5a5a66); }


/* ===== v2.11.1 — Live Section refinado ===== */
.channel-logo {
  width: 72px;
  height: 72px;
}
.channel-logo .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.channel-card {
  padding: 16px;
  gap: 16px;
}
.channel-name {
  font-size: 15.5px;
  margin-bottom: 0;
}
.channel-name-row {
  margin-bottom: 10px;
}
.epg-title {
  /* Tooltip nativo via title attr */
}
@media (max-width: 480px) {
  .channel-logo { width: 60px; height: 60px; }
  .channel-card { padding: 12px; gap: 12px; }
  .channel-logo .placeholder { font-size: 20px; }
}