/* Rodaplayer — camada de tema 2026 (ambar/tinta). Carregada por ultimo; corrige
   contraste dos CTAs e remove gradient-text (banido pelo design system). */

:root{
  /* ===== TOKEN BRIDGE — espelha colors.xml/dimens.xml/RodaFocusHelper.kt do app NATIVO
     (fonte de verdade: docs/DESIGN.md). 2026-07 "meia-noite": paleta FRIA do tvapp vc70-76
     aprovada pelo dono — fundo quase-preto, superfícies navy, texto branco-frio, hairline
     slate, selo AO VIVO vermelho único. Ver docs/PLANO_PARIDADE_VISUAL_WEB.md. ===== */
  --roda-amber:#FFAE34;            /* accent / CTA-bg / play / foco / ativo */
  --roda-amber-deep:#E8902A;       /* hover / erro de login (nunca vermelho) */
  --roda-ink:#030509;              /* fundo meia-noite (base do home_bg/screen_bg v2) */
  --roda-ink-soft:#0B1322;         /* superficies/cards/sidebar (roda_ink_soft navy) */
  --roda-paper:#F2F6FC;            /* texto forte (branco FRIO do tvapp) */
  --roda-fg:#F2F6FC;               /* alias retrocompat */
  --roda-paper-soft:#C4CEDD;       /* secundario (roda_paper_soft) */
  --roda-muted:#8CA0BC;            /* texto suave (slate frio do tvapp) */
  --roda-on-amber:#10100C;         /* texto SOBRE ambar (roda_on_amber) */
  --roda-hairline:#46587A;         /* hairline slate (subida p/ ler a 3m, como no tvapp) */
  --roda-skeleton:#101A2C;         /* placeholder de carregamento (roda_skeleton) */
  --roda-live:#C22B2B;             /* selo AO VIVO unico (paper em cima = 5,3:1) */
  --roda-card-top:#0D1626;         /* card navy royal (home_card_bg do tvapp) */
  --roda-card-bot:#0A1120;
  --roda-progress-track:rgba(0,0,0,.50);
  --roda-error:#E5484D;            /* SO erro real, nunca brand */
  /* ambares translucidos canonicos (colors.xml / RodaFocusHelper) */
  --roda-amber-a14:rgba(255,174,52,.10);   /* realce de foco/ativo de card (blend 14%) */
  --roda-amber-a24:rgba(255,174,52,.141);  /* chip de fonte selecionado-sem-foco */
  --roda-amber-a28:rgba(255,174,52,.157);  /* ghost focado */
  --roda-amber-a2e:rgba(255,174,52,.18);   /* EPG "agora" */
  --roda-amber-a36:rgba(255,174,52,.212);  /* pilula sidebar selecionada */
  --roda-amber-a64:rgba(255,174,52,.392);  /* pilula sidebar focada */
  --roda-amber-shimmer:rgba(255,174,52,.15);
  /* tipografia (Space Grotesk SO no display; corpo = system stack do nativo) */
  --roda-font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --roda-font-body:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-hero:clamp(28px,4.4vw,40px);
  --fs-cat-label:clamp(20px,2.6vw,32px);
  --fs-channel-num:clamp(22px,3vw,30px);
  --fs-osd-title:clamp(18px,2vw,24px);
  --fs-detail-title:clamp(20px,2.4vw,26px);
  --fs-section:clamp(16px,1.8vw,20px);
  --fs-card-text:clamp(15px,1.4vw,18px);
  --ls-tight:-0.01em; --ls-label:.04em; --ls-badge:.06em;
  /* espacamento / raios (dimens.xml) */
  --space-overscan:clamp(20px,3vw,32px);
  --radius-card:10px; --radius-btn:13px; --radius-chip:10px;
  --radius-badge:6px; --radius-epg:8px;
  --radius-search-pill:28px; --radius-sidebar-pill:18px; --radius-cat-chip:26px;
  /* foco (clona o "selo" do RodaFocusHelper: scale 1.08 + borda ambar 3dp + 140ms) */
  --focus-ring:3px solid var(--roda-amber); --focus-offset:2px;
  --focus-scale:1.06; --focus-radius:10px;
  --motion-focus:140ms cubic-bezier(0,0,.2,1);
  --motion-poster-fade:200ms; --motion-shimmer:1300ms;
}

/* CTA = bg ambar + TEXTO TINTA (contraste correto; nunca branco sobre ambar) */
.play-button,
.ver-mais-btn,
.featured-movie-info .badge,
.btn.set_type,
.quantum-button,
.navbar .nav-links a.cta,
.mobile-menu a.cta,
.btn-danger,
#retry,
.btn-amber{
  color:var(--roda-on-amber) !important;
  text-shadow:none !important;
}
.play-button i,.ver-mais-btn i,.quantum-button i{ color:var(--roda-on-amber) !important; }

/* gradient-text -> cor solida (impeccable: banido) */
.welcome-title,
.login-title{
  background:none !important;
  -webkit-text-fill-color:#F2F6FC !important;
  color:#F2F6FC !important;
}

/* hover dos links do nav: ambar (nao azul/cyan) */
.navbar .nav-links a:hover,
.navbar .dropdown-menu a:hover{ color:#FFAE34 !important; }

/* ============ Polish 2026 (foco/teclado-TV, cards, selecao) ============ */

/* Foco visivel = anel ambar. Acessibilidade + navegacao por controle remoto/teclado
   (o maior gap de um player web em TV). Vale para todas as paginas. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
.grid-item:focus-visible, .result-item:focus-visible, .channel-item:focus-visible,
.movie-card:focus-visible, .category-item:focus-visible, [tabindex]:focus-visible{
  outline:var(--focus-ring) !important;
  outline-offset:var(--focus-offset);
  border-radius:var(--focus-radius);
}

/* Cards de conteudo: o SELO de foco do nativo (RodaFocusHelper) = scale + leve fill ambar + anel,
   140ms. O foco (teclado/controle-TV) vale SEMPRE; a elevacao de HOVER fica sob @media(hover:hover)
   p/ NAO grudar no iOS (onde :hover persiste = card preso elevado). Sem box-shadow pesada (o nativo
   tira profundidade de superficie+hairline, nao de sombra). */
.grid-item, .result-item, .channel-item, .movie-card{
  transition: transform var(--motion-focus), background-color var(--motion-focus) !important;
}
.grid-item:focus-visible, .result-item:focus-visible,
.channel-item:focus-visible, .movie-card:focus-visible{
  transform: scale(var(--focus-scale)) !important;
  background-color: var(--roda-amber-a14) !important;
  z-index:2;
}
@media (hover:hover) and (pointer:fine){
  .grid-item:hover, .result-item:hover, .channel-item:hover, .movie-card:hover{
    transform: translateY(-4px) scale(var(--focus-scale)) !important;
    background-color: var(--roda-amber-a14) !important;
    z-index:2;
  }
}

/* Selecao de texto e scrollbar na marca */
::selection{ background:rgba(255,174,52,.30); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#22304C; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#31456B; }

/* Estado vazio (utilitario on-brand) */
.roda-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; color:rgba(242,246,252,.55);
  padding:56px 24px; font-size:1.02rem; line-height:1.5;
}
/* display:flex acima venceria o atributo [hidden] (UA usa display:none) — o JS
   esconde/mostra o vazio por .hidden, então o [hidden] precisa ganhar sempre. */
.roda-empty[hidden]{ display:none; }
.roda-empty i{ font-size:2rem; color:rgba(255,174,52,.7); }

@media (prefers-reduced-motion: reduce){
  .grid-item, .result-item, .channel-item, .movie-card{ transition:none !important; }
  .grid-item:hover, .result-item:hover, .channel-item:hover, .movie-card:hover{ transform:none !important; }
}

/* ============ Fase 5 — visual (impeccable) ============
   Traz os componentes funcionais novos (controles do player, EPG now/next +
   catch-up) do cinza-azulado generico para a tinta quente + ambar do sistema.
   Esta camada carrega ANTES das inline styles dessas paginas, entao o !important
   (convencao deste arquivo) garante o override em video_player.php e tvguide.php. */

:root{
  --roda-surface:#0B1322;                  /* superficie navy elevada (meia-noite 2026-07) */
  --roda-soft:rgba(242,246,252,.62);       /* texto secundario */
  --roda-line:rgba(242,246,252,.10);       /* hairline */
}

/* ---- Player: barra de controles (audio / legenda / qualidade / PiP) ----
   Estava em #fff sobre cinza-azulado (rgba(40,46,64)); agora tinta quente +
   borda/realce ambar, alvos de toque maiores e easing de saida exponencial. */
.xbar .xbtn{
  background:rgba(20,18,26,.82) !important;
  border:1px solid var(--roda-line) !important;
  color:var(--roda-fg) !important;
  height:40px !important; min-width:40px !important;
  border-radius:11px !important;
  -webkit-backdrop-filter:blur(6px) saturate(1.08) !important;
  backdrop-filter:blur(6px) saturate(1.08) !important;
  transition:background .22s cubic-bezier(.22,1,.36,1),
             border-color .2s ease,
             transform .22s cubic-bezier(.22,1,.36,1) !important;
}
.xbar .xbtn:hover{
  background:rgba(30,27,38,.94) !important;
  border-color:rgba(255,174,52,.45) !important;
  transform:translateY(-2px) !important;
}
.xbar .xbtn:active{ transform:translateY(0) scale(.97) !important; }
.xbar .xlist{
  background:rgba(16,16,22,.97) !important;
  border:1px solid var(--roda-line) !important;
  border-radius:13px !important;
  box-shadow:0 22px 50px rgba(0,0,0,.55) !important;
  padding:7px !important;
}
.xbar .xitem{
  color:var(--roda-fg) !important;
  border-radius:9px !important; padding:9px 11px !important;
  transition:background .15s ease, color .15s ease !important;
}
.xbar .xitem:hover{ background:rgba(255,174,52,.12) !important; }
.xbar .xitem[aria-checked="true"]{
  color:var(--roda-amber) !important; font-weight:700 !important;
  background:rgba(255,174,52,.10) !important;
}
@media (pointer:coarse){                   /* alvos de toque >= 44px em telas de toque/TV */
  .xbar .xbtn{ height:44px !important; min-width:44px !important; }
  .xbar .xitem{ padding:12px !important; }
}

/* ---- EPG: now / next + barra de progresso + catch-up ----
   Cinzas frios (#e8e8ef/#9aa0b4/#6f7690) -> off-white quente + soft do sistema;
   progresso em ambar solido com leve brilho; catch-up tambem preenche no foco. */
.ch-now{ color:var(--roda-fg) !important; }
.ch-now-title{ font-weight:600 !important; }
.ch-next, .ch-now-until{ color:var(--roda-soft) !important; }
.ch-now-label{ color:var(--roda-amber) !important; }
.ch-next-label{ color:rgba(242,246,252,.42) !important; }
.ch-progress{ background:rgba(242,246,252,.12) !important; }
.ch-progress > span{
  background:var(--roda-amber) !important;
  box-shadow:0 0 8px rgba(255,174,52,.40) !important;
  transition:width .6s cubic-bezier(.22,1,.36,1) !important;
}
.ch-catchup{ border-color:rgba(255,174,52,.40) !important; background:rgba(255,174,52,.07) !important; }
.ch-catchup:hover, .ch-catchup:focus-visible{   /* foco tambem preenche: teclado/controle-TV */
  background:var(--roda-amber) !important; color:var(--roda-ink) !important;
  border-color:var(--roda-amber) !important; transform:translateY(-1px) !important;
}

@media (prefers-reduced-motion: reduce){
  .xbar .xbtn, .xbar .xitem, .ch-progress > span, .ch-catchup{ transition:none !important; }
  .xbar .xbtn:hover, .ch-catchup:hover{ transform:none !important; }
}

/* ============ Consistencia de marca — elementos comuns (impeccable) ============
   Unifica primitivos que aparecem em varias paginas no sistema ambar/tinta,
   limpando resquicios do template antigo: gradiente quente com rosa/vermelho
   nos botoes (#ff2e63), sombra periwinkle fria (#667eea), hover cyan do
   dropdown (0,168,225), link azul do Bootstrap (#007bff), branco puro em
   titulos e o --accent roxo (#7c3aed)/azul (#3b82f6) que sobra em premium.php.
   Estas regras carregam por ULTIMO; o !important (convencao deste arquivo)
   vence as inline styles por-pagina. NAO mexe em .banner-buttons / .xbar / .ch-*. */

/* ---- Botao primario: ambar SOLIDO + texto tinta (mata gradiente rosa/branco) ----
   O topo do arquivo ja forca a COR do texto em .btn/.ver-mais-btn/.btn-danger;
   aqui completamos fundo, raio, hover ambar-profundo e o translateY do sistema. */
.btn,
.ver-mais-btn,
.btn-glow,
.button,
.quantum-button,
button.cta,
input[type="submit"],
input[type="button"],
button[type="submit"]{
  background:var(--roda-amber) !important;
  background-image:none !important;          /* remove gradiente quente com #ff2e63 */
  color:var(--roda-ink) !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  text-shadow:none !important;
  transition:transform .2s cubic-bezier(.22,1,.36,1),
             background-color .2s ease,
             box-shadow .2s ease !important;
}
.btn:hover,
.ver-mais-btn:hover,
.btn-glow:hover,
.button:hover,
.quantum-button:hover,
button.cta:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover{
  background:var(--roda-amber-deep) !important;   /* sem rgba(102,126,234) frio */
  color:var(--roda-ink) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 28px rgba(255,174,52,.28) !important;
}
.btn:active,
.ver-mais-btn:active,
.button:active,
.quantum-button:active,
input[type="submit"]:active,
button[type="submit"]:active{ transform:translateY(0) scale(.98) !important; }
.btn i, .ver-mais-btn i, .btn-glow i, .button i, .quantum-button i{ color:var(--roda-ink) !important; }

/* ---- Botao fantasma: transparente + hairline + off-white; hover borda ambar ---- */
.btn-ghost,
.btn-outline,
.btn-secondary,
button.ghost{
  background:transparent !important;
  background-image:none !important;
  color:var(--roda-fg) !important;
  border:1px solid var(--roda-line) !important;
  border-radius:12px !important;
  text-shadow:none !important;
  transition:border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.22,1,.36,1) !important;
}
.btn-ghost:hover,
.btn-outline:hover,
.btn-secondary:hover,
button.ghost:hover{
  border-color:var(--roda-amber) !important;
  color:var(--roda-amber) !important;
  transform:translateY(-2px) !important;
}

/* ---- Inputs / selects / busca: tinta elevada, hairline, off-white, foco ambar ----
   A busca do header vinha sem borda e com texto #fff puro; padroniza aqui. */
.navbar .search-container input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea{
  background:var(--roda-surface) !important;
  color:var(--roda-fg) !important;
  border:1px solid var(--roda-line) !important;
  border-radius:12px !important;
  caret-color:var(--roda-amber) !important;
}
.navbar .search-container input::placeholder,
input::placeholder, textarea::placeholder{ color:rgba(242,246,252,.42) !important; }
.navbar .search-container input:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus{
  background:var(--roda-surface) !important;
  border-color:rgba(255,174,52,.55) !important;
  outline:3px solid var(--roda-amber) !important;   /* anel ambar = teclado/controle-TV */
  outline-offset:2px !important;
}

/* ---- Nav / links / dropdown: hover ambar (nunca azul/cyan) ----
   O topo ja cobre .nav-links a / .dropdown-menu a:hover; aqui matamos o
   fundo cyan (0,168,225) do dropdown e o azul de link padrao do Bootstrap. */
.navbar .dropdown-menu a:hover{ background:rgba(255,174,52,.10) !important; }
a{ color:inherit; }                                  /* neutraliza #007bff herdado */
a:hover{ color:var(--roda-amber); }
.content a:hover, main a:hover, .dropdown-menu a:hover, p a:hover{ color:var(--roda-amber) !important; }

/* ---- Titulos de secao / headings: Space Grotesk, tinta forte, escala coerente ----
   .section-title vinha ora #fff puro, ora var(--accent) (roxo/azul em premium.php)
   e sem display face; unifica em off-white quente + Space Grotesk com tracking tight. */
.section-title,
.heading,
.welcome-title,
.login-title{
  font-family:"Space Grotesk", system-ui, sans-serif !important;
  color:var(--roda-fg) !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
}
h1, h2, h3, h4{ font-family:"Space Grotesk", system-ui, sans-serif !important; }

/* ---- Vars residuais do template: realinha --accent/--primary para o ambar ----
   Garante que qualquer regra remanescente que use var(--accent)/var(--primary)
   (ex.: premium.php = #7c3aed roxo / #3b82f6 azul) caia no ambar do sistema. */
:root{
  --accent:#FFAE34;
  --primary:#FFAE34;
  --primary-dark:#E8902A;
  --primary-deep:#E8902A;
}

/* =====================================================================
   Perfil "TV Box leve" (FASE 2/3). Ativado por includes/perf_profile.php
   via <html class="roda-lite"> em aparelho fraco OU por preferência manual.
   NÃO altera a identidade âmbar/escura — só corta custo contínuo de
   CPU/GPU (animações infinitas, transições caras, blur/backdrop-filter)
   e mantém o foco do controle visível e instantâneo.
   ===================================================================== */
html.roda-lite *,
html.roda-lite *::before,
html.roda-lite *::after{
  /* mata animações infinitas e encurta transições a ~instantâneo */
  animation-duration:.001s !important;
  animation-delay:0s !important;
  animation-iteration-count:1 !important;
  transition-duration:.001s !important;
  transition-delay:0s !important;
  /* blur/backdrop é caro em GPU fraca: troca por fundo sólido do próprio elemento */
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  /* rolagem instantânea (sem smooth) no controle remoto */
  scroll-behavior:auto !important;
}
/* fundos decorativos animados (partículas/orbs/grade) somem no leve
   — o JS que os cria também é pulado em perf_profile/roda-lite */
html.roda-lite #particles-js,
html.roda-lite #particles,
html.roda-lite .animated-bg,
html.roda-lite .movie-showcase{ display:none !important; }
/* foco do controle sempre visível e nítido (não depende de hover/sombra cara) */
html.roda-lite :focus-visible{ outline:3px solid var(--roda-amber); outline-offset:2px; }

/* =====================================================================
   Catálogo TV Box (.rcat) — Filmes / Séries
   ---------------------------------------------------------------------
   Shell estilo TV Box: rail de ícones à esquerda, busca/ações no topo,
   coluna de categorias densas e grade de pôsteres. Usado por
   moviesondemand/seriesondemand (browser de catálogo) e pela visão de
   categoria (movies/series). Tudo namespaced em .rcat — não toca outras
   telas (player, TV ao Vivo, home).

   Regras de TV: a janela (window) rola; rail + topo + categorias ficam
   sticky. O anel de foco âmbar (regra global :focus-visible) NUNCA é
   recortado — nenhum ancestral focável usa overflow:hidden; áreas com
   rolagem interna têm padding >= o anel (offset 3 + 3px).
   ===================================================================== */
.rcat{
  --rail-w:84px;
  --cats-w:248px;
  --top-h:68px;
  --gap:22px;
  position:relative;
  z-index:0;
  display:flex;
  align-items:flex-start;
  min-height:100vh;
  color:var(--roda-fg);
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.rcat, .rcat *, .rcat *::before, .rcat *::after{ box-sizing:border-box; }
/* fundo cinematográfico estático (textura/estrelas + brilho âmbar no topo +
   vinheta). Sem animação → sobrevive a roda-lite e reduced-motion. */
.rcat::before{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(242,246,252,.16), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 16%, rgba(255,174,52,.14), transparent 60%),
    radial-gradient(1px 1px   at 34% 64%, rgba(242,246,252,.12), transparent 60%),
    radial-gradient(1px 1px   at 62% 82%, rgba(242,246,252,.10), transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 54%, rgba(255,174,52,.10), transparent 60%),
    radial-gradient(1px 1px   at 48% 38%, rgba(242,246,252,.10), transparent 60%),
    radial-gradient(140% 90% at 50% -10%, rgba(255,174,52,.06), transparent 62%),
    linear-gradient(180deg, #14141e 0%, var(--roda-ink) 60%, #0b0b10 100%);
}

/* ---------- Rail de navegação principal (ícones grandes) ---------- */
.rcat-rail{
  position:sticky; top:0; align-self:flex-start;
  flex:0 0 var(--rail-w); width:var(--rail-w);
  height:100vh; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 8px;
  background:rgba(18,18,26,.72);
  border-right:1px solid var(--roda-line);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.rcat-rail .rcat-rail-logo{ display:block; margin:2px 0 12px; }
.rcat-rail .rcat-rail-logo img{ width:34px; height:auto; display:block; }
.rcat-rail-spacer{ flex:1 1 auto; }
.rcat-link{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:64px; padding:10px 4px;
  border:1.5px solid transparent; border-radius:16px;
  color:var(--roda-soft); text-decoration:none;
  font-size:.62rem; font-weight:600; letter-spacing:.01em; text-align:center;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.rcat-link i{ font-size:1.32rem; line-height:1; }
.rcat-link span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rcat-link:hover{ color:var(--roda-fg); background:rgba(255,174,52,.08); }
.rcat-link.is-active{
  color:var(--roda-amber);
  background:rgba(255,174,52,.12);
  border-color:rgba(255,174,52,.55);
}
.rcat-link.is-active i{ color:var(--roda-amber); }

/* ---------- Coluna principal (topo + corpo) ---------- */
.rcat-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.rcat-back{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 20px;
  color:var(--roda-paper); background:rgba(242,246,252,.04);
  border:1px solid rgba(242,246,252,.14); border-radius:14px;
  text-decoration:none; font-size:1.08rem; font-weight:800;
  transition:background-color .16s ease, border-color .16s ease, transform .16s cubic-bezier(.22,1,.36,1);
}
.rcat-back i{ font-size:1.05rem; }
.rcat-back:hover{ color:var(--roda-paper); background:rgba(255,174,52,.08); border-color:rgba(255,174,52,.48); }
.rcat-back:focus-visible{
  outline:none; border-color:var(--roda-amber);
  box-shadow:0 0 0 3px rgba(255,174,52,.52);
  transform:translateY(-1px);
}

/* Ajuda fixa do controle remoto: curta, sempre no mesmo lugar e legivel da sala. */
.rp-remote-help{
  position:fixed; left:var(--rail-w); right:0; bottom:0; z-index:40;
  min-height:54px; box-sizing:border-box;
  display:flex; align-items:center; gap:30px;
  padding:0 24px;
  color:var(--roda-muted); background:rgba(13,13,20,.96);
  border-top:1px solid var(--roda-line);
  font-size:1rem; font-weight:600;
}
.rp-remote-help span{
  display:inline-flex; align-items:center; gap:9px; min-width:0;
  white-space:nowrap;
}
.rp-remote-help i{ color:var(--roda-paper); opacity:.88; font-size:1.08rem; }
.rp-remote-help kbd{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(242,246,252,.84);
  color:var(--roda-paper); background:transparent;
  font-family:var(--roda-font-display); font-size:.72rem; font-weight:800;
  line-height:1;
}

/* ---------- Topo: refresh + busca ---------- */
.rcat-top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  min-height:var(--top-h); padding:12px 24px;
  background:linear-gradient(180deg, rgba(14,14,19,.96), rgba(14,14,19,.78) 70%, rgba(14,14,19,0));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.rcat-refresh{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:rgba(242,246,252,.04); color:var(--roda-fg);
  border:1px solid var(--roda-line); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.rcat-refresh:hover{ border-color:rgba(255,174,52,.5); color:var(--roda-amber); background:rgba(255,174,52,.06); }
.rcat-refresh:active{ transform:rotate(-90deg) scale(.96); }
.rcat-search{
  position:relative; display:flex; align-items:center;
  flex:1 1 520px; max-width:560px;
}
.rcat-search > i{
  position:absolute; left:16px; color:rgba(242,246,252,.5); font-size:1rem; pointer-events:none;
}
.rcat-search input{
  width:100%; box-sizing:border-box;
  height:44px; padding:0 16px 0 42px;
  font-size:1rem; font-family:inherit;
}
.rcat-top-id{
  margin-left:auto; display:flex; align-items:center; gap:9px;
  color:var(--roda-soft); font-size:.84rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.rcat-top-id b{ color:var(--roda-fg); font-weight:700; }

/* ---------- Corpo: categorias + grade ---------- */
.rcat-body{ display:flex; align-items:flex-start; gap:var(--gap); padding:4px 24px 64px; }

/* coluna de categorias (botões retangulares densos) */
.rcat-cats{
  position:sticky; top:var(--top-h); align-self:flex-start;
  flex:0 0 var(--cats-w); width:var(--cats-w);
  max-height:calc(100vh - var(--top-h) - 8px);
  box-sizing:border-box;
  display:flex; flex-direction:column; gap:6px;
  padding:6px 10px 14px 2px;        /* padding direito p/ o anel de foco não recortar */
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin;
}
.rcat-cats-h{
  margin:6px 4px 4px; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(242,246,252,.45);
}
.rcat-shortcuts:empty{ display:none; }
.rcat-shortcuts{ display:flex; flex-direction:column; gap:6px; padding-bottom:6px; margin-bottom:4px; border-bottom:1px solid var(--roda-line); }
.rcat-cat-list{ display:flex; flex-direction:column; gap:6px; }
.rcat-cat{
  display:flex; align-items:center; gap:9px;
  width:100%; box-sizing:border-box;
  padding:11px 14px; min-height:42px;
  font-family:inherit; font-size:.92rem; font-weight:600; text-align:left;
  color:var(--roda-fg);
  background:rgba(242,246,252,.03);
  border:1px solid var(--roda-line); border-radius:11px;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
.rcat-cat > span{ overflow:hidden; text-overflow:ellipsis; }
.rcat-cat i{ flex:0 0 auto; font-size:.92rem; color:rgba(242,246,252,.55); }
.rcat-cat .rcat-cat-count{
  margin-left:auto; flex:0 0 auto;
  font-size:.72rem; font-weight:700; color:rgba(242,246,252,.5);
  background:rgba(242,246,252,.06); border-radius:999px; padding:1px 8px;
}
.rcat-cat:hover{ border-color:rgba(255,174,52,.45); color:var(--roda-amber); transform:translateX(2px); }
.rcat-cat:hover i{ color:var(--roda-amber); }
.rcat-cat.is-active{
  background:var(--roda-amber); color:var(--roda-ink);
  border-color:var(--roda-amber); font-weight:700;
}
.rcat-cat.is-active i,
.rcat-cat.is-active .rcat-cat-count{ color:var(--roda-ink); }
.rcat-cat.is-active .rcat-cat-count{ background:rgba(21,17,10,.18); }

/* grade de pôsteres */
.rcat-grid-wrap{ flex:1 1 auto; min-width:0; }
.rcat-cat-title{
  margin:8px 2px 16px; font-size:1.4rem; font-weight:700; letter-spacing:-.01em;
  color:var(--roda-fg);
}
.rcat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(144px, 1fr));
  gap:26px 20px;
  padding:4px;                       /* respiro p/ o anel de foco das bordas */
}
/* TV/desktop: capas maiores no catálogo (par do tvapp vc153). As COLEÇÕES
   (Continuar/Favoritos/Recentes) recebem .rcat-grid--compact via JS e mantêm a
   densidade clássica; <=1100px segue as media queries de sempre (celular/tablet). */
@media (min-width:1101px){
  .rcat-grid{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
  .rcat-grid--compact{ grid-template-columns:repeat(auto-fill, minmax(144px, 1fr)); }
}
.rcat-card{
  display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:var(--roda-fg);
  border-radius:14px;
  /* D-pad/scrollIntoView nunca tuca o card focado sob o topo sticky (92px) nem
     recorta o anel de foco nas bordas. */
  scroll-margin:104px 10px 30px;
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.rcat-poster{
  position:relative; display:block; width:100%;
  aspect-ratio:2 / 3; border-radius:var(--radius-card); overflow:hidden;
  /* Placeholder on-brand: a marca aparece enquanto/se a capa nao carrega (em vez do
     "buraco cinza" que parece bug na box lenta). A <img> cobre a marca ao pintar.
     Estatico (custo zero de request, sem animacao no Chrome 55 da box). */
  background:#16161f url('../img/roda-mark.svg') center / 38% auto no-repeat;
  box-shadow:0 6px 18px rgba(0,0,0,.38);
  transition:box-shadow .22s ease;
}
.rcat-poster img{
  width:100%; height:100%; object-fit:cover; display:block;
  background:transparent; /* deixa o placeholder de marca aparecer ate a capa pintar */
}
/* "Continuar" — barra + badge de % assistido na capa (so em itens em progresso). */
.rcat-card-prog{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.55); }
.rcat-card-prog>i{ display:block; height:100%; background:var(--roda-amber); }
.rcat-card-pct{
  position:absolute; right:6px; top:6px; padding:2px 6px; border-radius:8px;
  font-size:11px; font-weight:700; line-height:1; color:#0a0a0f;
  background:var(--roda-amber); box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.rcat-title{
  font-size:.86rem; font-weight:600; line-height:1.28; color:rgba(242,246,252,.86);
  /* clamp 2 linhas — título nunca estoura/ocluir; altura estável (sem CLS) */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; min-height:2.56em;
}
.rcat-card:hover{ transform:translateY(-4px); }
.rcat-card:hover .rcat-poster{ box-shadow:0 16px 36px rgba(0,0,0,.55); }
.rcat-card:focus-visible{ transform:translateY(-4px); }
.rcat-card:focus-visible .rcat-poster{ box-shadow:0 16px 36px rgba(0,0,0,.55); }
.rcat-card:hover .rcat-title,
.rcat-card:focus-visible .rcat-title{ color:var(--roda-amber); }

/* estado vazio / carregando dentro da grade */
.rcat-empty{ grid-column:1 / -1; }
.rcat-grid[aria-busy="true"]{ opacity:.55; transition:opacity .2s ease; }

/* Skeleton da grade (só aparece em tab-switch lento >280ms via JS). Pôster-fantasma
   reusa #16161f + aspect-ratio 2/3 da .rcat-poster -> zero CLS. Anima apenas transform
   (nunca width/height/top/left), respeita reduced-motion e o perfil leve roda-lite. */
.rcat-skel{ pointer-events:none; }
.rcat-skel .rcat-poster{ position:relative; overflow:hidden; }
.rcat-skel .rcat-poster::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(242,246,252,.06) 50%, transparent 80%);
  transform:translateX(-100%); animation:rcat-shimmer 1.1s ease-in-out infinite;
}
@keyframes rcat-shimmer{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .rcat-skel .rcat-poster::after{ animation:none; } }
html.roda-lite .rcat-skel .rcat-poster::after{ animation:none; }

/* ---------- Responsivo ---------- */
@media (max-width:1100px){
  .rcat{ --cats-w:212px; }
  .rcat-grid{ grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:22px 16px; }
}
@media (max-width:820px){
  .rcat{ flex-direction:column; align-items:stretch; }
  .rcat-rail{
    position:sticky; top:0; z-index:30;
    flex-direction:row; width:100%; height:auto; gap:4px;
    padding:8px 10px; overflow-x:auto;
    border-right:0; border-bottom:1px solid var(--roda-line);
  }
  .rcat-rail .rcat-rail-logo{ display:none; }
  .rcat-rail-spacer{ display:none; }
  .rcat-link{ flex:0 0 auto; width:auto; min-width:62px; padding:8px 10px; }
  .rcat-main{ width:100%; }
  .rcat-back{ min-height:46px; padding:0 15px; font-size:.98rem; }
  .rp-remote-help{ left:0; gap:18px; min-height:50px; padding:0 14px; font-size:.88rem; overflow-x:auto; }
  .rp-remote-help kbd{ width:28px; height:28px; font-size:.68rem; }
  .rcat-top{ top:53px; }
  .rcat-body{ flex-direction:column; gap:12px; padding:4px 14px 56px; }
  /* categorias viram uma faixa horizontal de chips (atalhos + categorias) */
  .rcat-cats{
    position:static; width:100%; max-width:100%; flex:none;
    max-height:none; overflow-y:visible; overflow-x:auto;
    flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px;
    padding:4px 2px 10px;
    scrollbar-width:none;            /* faixa de chips: sem barra de rolagem visível */
  }
  .rcat-cats::-webkit-scrollbar{ display:none; }
  .rcat-cats-h{ display:none; }
  .rcat-shortcuts{
    flex:0 0 auto; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px;
    padding:0; margin:0; border-bottom:0;
  }
  .rcat-shortcuts:not(:empty){ padding-right:8px; margin-right:2px; border-right:1px solid var(--roda-line); }
  .rcat-cat-list{ flex:0 0 auto; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px; }
  .rcat-cat{ width:auto; flex:0 0 auto; }
  .rcat-cat-title{ font-size:1.18rem; margin:2px 2px 10px; }
  .rcat-grid{ grid-template-columns:repeat(auto-fill, minmax(116px, 1fr)); gap:18px 12px; }
  .rcat-card{ scroll-margin-top:124px; }
}
@media (max-width:520px){
  .rcat-top{ gap:10px; padding:10px 14px; }
  .rcat-search{ flex:1 1 auto; max-width:none; }
  .rcat-top-id{ display:none; }
  .rcat-grid{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:16px 10px; }
}

/* ---------- Perfil leve (TV Box fraca) ---------- */
html.roda-lite .rcat-rail,
html.roda-lite .rcat-top{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--roda-ink-soft); }
html.roda-lite .rcat-card,
html.roda-lite .rcat-cat,
html.roda-lite .rcat-link{ transition:none; }
html.roda-lite .rcat-card:hover{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .rcat-card, .rcat-cat, .rcat-link, .rcat-refresh, .rcat-poster{ transition:none; }
  .rcat-card:hover{ transform:none; }
}

/* =====================================================================
   BLINDAGEM TOUCH / iOS (paridade: o nativo nao "gruda" no iPhone)
   ---------------------------------------------------------------------
   No iOS Safari o :hover PERSISTE apos o toque -> cards/itens ficam presos
   elevados ou ambar. Em telas SEM hover real, neutralizamos os realces
   TRANSITORIOS de hover. O foco REAL (teclado/controle via :focus-visible)
   e o estado .is-active/.is-selected (JS) continuam valendo.
   ===================================================================== */
@media (hover:none){
  .grid-item:hover, .result-item:hover, .channel-item:hover, .movie-card:hover,
  .rcat-card:hover, .rcat-cat:hover, .rcat-link:hover, .rcat-refresh:hover,
  .xbar .xbtn:hover, .xbar .xitem:hover, .ch-catchup:hover,
  .btn:hover, .ver-mais-btn:hover, .btn-glow:hover, .button:hover, .quantum-button:hover,
  .btn-ghost:hover, .btn-outline:hover, .btn-secondary:hover,
  .navbar .nav-links a:hover, .navbar .dropdown-menu a:hover{
    transform:none !important;
  }
  /* nao deixa o realce de cor/sombra de hover preso no toque (o ativo aparece via .is-active) */
  .rcat-card:hover .rcat-poster{ box-shadow:0 6px 18px rgba(0,0,0,.38) !important; }
  .rcat-card:hover .rcat-title{ color:rgba(242,246,252,.86) !important; }
  .rcat-cat:hover{ border-color:var(--roda-line) !important; color:var(--roda-fg) !important; }
  .rcat-cat:hover i{ color:rgba(242,246,252,.55) !important; }
  .rcat-link:hover{ background:transparent !important; color:var(--roda-soft) !important; }
  .ch-catchup:hover{ background:rgba(255,174,52,.07) !important; color:inherit !important; border-color:rgba(255,174,52,.40) !important; }
}

/* safe-area p/ iPhone com notch/home-indicator (so vale com viewport-fit=cover no header.php):
   evita que rails/menus/overlays vazem sob o entalhe. Aditivo, inerte fora do iOS. */
@supports (padding:max(0px)){
  .rcat-rail{ padding-left:max(8px, env(safe-area-inset-left)); }
  .rcat-top{ padding-right:max(24px, env(safe-area-inset-right)); }
}

/* ============ Onda 1 — crítica externa 2026-07 (F21-F33) + D1 "Sala Escura" ============ */
/* F21: labels do rail eram ~10px — ilegíveis a 3 m (navegação primária). */
.rcat-link{ width:72px; font-size:.8rem !important; }
.rcat-link i{ font-size:1.4rem; }
/* F25: pill de categoria ATIVA sai do âmbar sólido (2 blocos âmbar disputavam o cursor)
   -> fill navy + texto paper + borda slate; âmbar fica p/ FOCO e CTA. */
.rcat-cat.is-active{
  background:rgba(21,34,56,.72) !important; color:var(--roda-paper) !important;
  border-color:var(--roda-hairline) !important; font-weight:700;
}
.rcat-cat.is-active i{ color:var(--roda-paper) !important; }
.rcat-cat.is-active .rcat-cat-count{ color:var(--roda-paper) !important; background:rgba(242,246,252,.10) !important; }
/* idem na sidebar do TV ao Vivo (mesma doença: "Abertos" âmbar sólido vs canal focado âmbar) */
.sp-cat-item[aria-selected="true"]{
  background:rgba(21,34,56,.72) !important; color:var(--roda-paper) !important;
  border-color:var(--roda-hairline) !important;
}
.sp-cat-item[aria-selected="true"] .ico, .sp-cat-item[aria-selected="true"] .lbl{ color:var(--roda-paper) !important; }
.sp-cat-item[aria-selected="true"] .cnt{ color:var(--roda-paper) !important; background:rgba(242,246,252,.12) !important; }
/* F22: UMA barra de dicas — o painel do player perde a barra própria (conflitava com a global). */
.sp-player-help{ display:none !important; }
/* F23: barra global SÓLIDA (títulos apareciam POR BAIXO da translúcida) + respiro no corpo. */
.rp-remote-help{ background:#070B16 !important; color:var(--roda-paper-soft, #C4CEDD) !important; }
.rcat-body{ padding-bottom:96px !important; }
/* F26: banner informativo não é item focável — borda/ícones slate, âmbar só quando FOCADO. */
.sp-esportes{ border-color:var(--roda-hairline) !important; }
.sp-esportes .lead, .sp-esportes .arr{ color:var(--roda-paper-soft, #C4CEDD) !important; }
.sp-esportes:focus-visible .lead, .sp-esportes:hover .lead{ color:var(--roda-amber) !important; }
/* F29: estrela de favoritar era ~20px hairline — alvo/afordância fracos. */
.sp-fav{ font-size:1.35rem !important; color:var(--roda-paper-soft, #C4CEDD) !important; }
.sp-fav.on{ color:var(--roda-amber) !important; }
/* F30: breadcrumb "FILMES" no topo era info em destaque — vira discreto. */
.rcat-top-id{ font-size:.72rem !important; color:var(--roda-muted) !important; }
.rcat-top-id i, .rcat-top-id b{ color:var(--roda-muted) !important; }
/* F33: scrollbars visíveis nas colunas = ruído de 10-pés; o fade/corte já sinaliza rolagem. */
.rcat-cats, .sp-cats, .sp-list{ scrollbar-width:none !important; }
.rcat-cats::-webkit-scrollbar, .sp-cats::-webkit-scrollbar, .sp-list::-webkit-scrollbar{ display:none; }