/*
================================================================
PLAY PLAY — app.css DOCUMENTADO
================================================================

ARQUIVO ORIGINAL:
    webapp/assets/css/app.css

OBJETIVO:
    Este arquivo contém exatamente as mesmas regras CSS do projeto.
    Foram adicionados apenas comentários e formatação para facilitar
    manutenção, localização de telas e entendimento das propriedades.

IMPORTANTE:
    - Nenhum seletor foi removido.
    - Nenhuma propriedade foi alterada.
    - Nenhum valor foi modificado.
    - A ordem das regras foi preservada.
    - Comentários não mudam o funcionamento do CSS.

MAPA RÁPIDO DA INTERFACE:

HOME — função home() em assets/js/app.js
┌──────────────────────────────────────────────────────────────┐
│                         .brand                               │
│                                                              │
│  .home-card  .home-card  .home-card  .home-card  .home-card │
│      TV        Filmes      Séries       Lista     Config.    │
│                                                              │
│ .footer-info       .home-activation-code       .device-info │
└──────────────────────────────────────────────────────────────┘

TV AO VIVO — função live() em assets/js/app.js
┌──────────────────────────────────────────────────────────────┐
│                         .topbar                              │
├──────────────────┬────────────────────┬──────────────────────┤
│ .sidebar         │ .list              │ .preview-col         │
│ categorias       │ canais             │ .preview             │
│                  │                    │ .epg-row             │
└──────────────────┴────────────────────┴──────────────────────┘

FILMES/SÉRIES — função library(kind) em assets/js/app.js
┌──────────────────┬───────────────────────────────────────────┐
│ .library-side    │ .library-main                             │
│ .searchbox       │ .library-title                            │
│ categorias       │ .poster-grid                              │
│                  │ .poster .poster .poster .poster           │
└──────────────────┴───────────────────────────────────────────┘

PLAYER — função playMedia() em assets/js/app.js
┌──────────────────────────────────────────────────────────────┐
│ #playerLayer                                                │
│  .player-bar: .player-title              .player-close      │
│                                                              │
│                         #player                              │
│                     .player-status                           │
└──────────────────────────────────────────────────────────────┘
================================================================
*/


/* ============================================================
   1. BASE, TEMA E ESTRUTURA GLOBAL
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: :root
   FUNÇÃO: Variáveis globais do tema. As cores definidas aqui são reutilizadas por praticamente toda a interface.
   ------------------------------------------------------------ */
:root {
    /* Cor principal de ações e botões. */
    --primary: #315cff;
    /* Cor de destaque, foco e detalhes luminosos. */
    --accent: #17d7ff;
    /* Cor do painel principal translúcido. */
    --panel: rgba(24,31,58,.94);
    /* Cor dos cartões, linhas e caixas. */
    --panel2: rgba(38,46,78,.96);
    /* Cor principal dos textos. */
    --text: #fff;
    /* Cor de textos secundários. */
    --muted: #c3cbe2;
    /* Cor de fundo do elemento focado. */
    --focus: #eef5ff;
}
/* ------------------------------------------------------------
   SELETOR: *
   FUNÇÃO: Regra universal aplicada a todos os elementos.
   ------------------------------------------------------------ */
* {
    /* Define como largura e altura calculam borda e preenchimento. Valor usado: border-box. */
    box-sizing: border-box;
}
/* ------------------------------------------------------------
   SELETOR: html,body,#app
   FUNÇÃO: Estrutura raiz da WebApp. Garante que a aplicação ocupe toda a tela e impede rolagem da página inteira.
   ------------------------------------------------------------ */
html,body,#app {
    /* Define o espaço externo ao redor do elemento. Valor usado: 0. */
    margin: 0;
    /* Define a largura. Valor usado: 100%. */
    width: 100%;
    /* Define a altura. Valor usado: 100%. */
    height: 100%;
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: hidden. */
    overflow: hidden;
    /* Define a família da fonte. Valor usado: Arial,Helvetica,sans-serif. */
    font-family: Arial,Helvetica,sans-serif;
    /* Define a cor do texto/ícone. Valor usado: var(--text). */
    color: var(--text);
}
/* ------------------------------------------------------------
   SELETOR: body
   FUNÇÃO: Fundo base da página, usado enquanto a imagem/tema ainda não carregou.
   ------------------------------------------------------------ */
body {
    /* Define somente a cor de fundo. Valor usado: #070d26. */
    background-color: #070d26;
}
/* ------------------------------------------------------------
   SELETOR: button,input
   FUNÇÃO: Faz botões e campos herdarem a mesma tipografia e cor do restante da interface.
   ------------------------------------------------------------ */
button,input {
    /* Atalho para propriedades tipográficas. Valor usado: inherit. */
    font: inherit;
    /* Define a cor do texto/ícone. Valor usado: inherit. */
    color: inherit;
}
/* A foto é controlada exclusivamente por assets/js/background.js. Não usar background/background-image em .bg. */

/* ============================================================
   2. FUNDO E CAMADA GERAL
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .bg
   FUNÇÃO: Camada fixa de fundo. A imagem real é aplicada por assets/js/background.js.
   ------------------------------------------------------------ */
.bg {
    /* Define o método de posicionamento. Valor usado: fixed. */
    position: fixed;
    /* Posiciona a borda superior. Valor usado: 0. */
    top: 0;
    /* Posiciona a borda direita. Valor usado: 0. */
    right: 0;
    /* Posiciona a borda inferior. Valor usado: 0. */
    bottom: 0;
    /* Posiciona a borda esquerda. Valor usado: 0. */
    left: 0;
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: hidden. */
    overflow: hidden;
    /* Define somente a cor de fundo. Valor usado: #070d26. */
    background-color: #070d26;
    /* Define se o fundo se repete. Valor usado: no-repeat. */
    background-repeat: no-repeat;
    /* Define a posição do fundo. Valor usado: center center. */
    background-position: center center;
    /* Define o tamanho do fundo. Valor usado: cover. */
    background-size: cover;
}
/* ------------------------------------------------------------
   SELETOR: .bg:after
   FUNÇÃO: Camada decorativa sobre o fundo, com linhas diagonais luminosas.
   ------------------------------------------------------------ */
.bg:after {
    /* Define o conteúdo gerado por pseudo-elemento. Valor usado: "". */
    content: "";
    /* Define o método de posicionamento. Valor usado: absolute. */
    position: absolute;
    /* Posiciona a borda superior. Valor usado: -8%. */
    top: -8%;
    /* Posiciona a borda direita. Valor usado: -8%. */
    right: -8%;
    /* Posiciona a borda inferior. Valor usado: -8%. */
    bottom: -8%;
    /* Posiciona a borda esquerda. Valor usado: -8%. */
    left: -8%;
    /* Define imagem ou gradiente de fundo. Valor usado: linear-gradient(135deg,transparent 43%,rgba(0,218,255,.18) 44%,transparent 45%),linear-gradient(45deg,transparent 66%,rgba(69,91,255,.20) 67%,transparent 68%). */
    background-image: linear-gradient(135deg,transparent 43%,rgba(0,218,255,.18) 44%,transparent 45%),linear-gradient(45deg,transparent 66%,rgba(69,91,255,.20) 67%,transparent 68%);
    /* Define o tamanho do fundo. Valor usado: 310px 310px. */
    background-size: 310px 310px;
    /* Move, gira ou redimensiona visualmente. Valor usado: rotate(-3deg). */
    transform: rotate(-3deg);
    /* Controla se o elemento recebe cliques/toques. Valor usado: none. */
    pointer-events: none;
}

/* ============================================================
   3. TELAS E NAVEGAÇÃO POR FOCO
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .screen
   FUNÇÃO: Contêiner padrão de cada tela criada pela função shell() em app.js.
   ------------------------------------------------------------ */
.screen {
    /* Define o método de posicionamento. Valor usado: relative. */
    position: relative;
    /* Controla a ordem de sobreposição. Valor usado: 1. */
    z-index: 1;
    /* Define a largura. Valor usado: 100%. */
    width: 100%;
    /* Define a altura. Valor usado: 100%. */
    height: 100%;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 2.2vh 2vw. */
    padding: 2.2vh 2vw;
}
/* ------------------------------------------------------------
   SELETOR: .focusable
   FUNÇÃO: Classe comum dos elementos navegáveis por controle remoto/teclado.
   ------------------------------------------------------------ */
.focusable {
    /* Define/remover o contorno de foco padrão. Valor usado: none. */
    outline: none;
    /* Define borda completa. Valor usado: 1px solid rgba(255,255,255,.14). */
    border: 1px solid rgba(255,255,255,.14);
    /* Suaviza mudanças de propriedades. Valor usado: .14s transform,.14s background,.14s box-shadow. */
    transition: .14s transform,.14s background,.14s box-shadow;
}
/* ------------------------------------------------------------
   SELETOR: .focusable:focus
   FUNÇÃO: Aparência do elemento atualmente focado.
   ------------------------------------------------------------ */
.focusable:focus {
    /* Define o fundo completo. Valor usado: var(--focus). */
    background: var(--focus) !important;
    /* Define a cor do texto/ícone. Valor usado: #101522. */
    color: #101522 !important;
    /* Move, gira ou redimensiona visualmente. Valor usado: scale(1.018). */
    transform: scale(1.018);
    /* Cria sombra externa ou interna. Valor usado: 0 0 0 3px #fff,0 0 22px rgba(23,215,255,.9). */
    box-shadow: 0 0 0 3px #fff,0 0 22px rgba(23,215,255,.9);
    /* Controla a ordem de sobreposição. Valor usado: 5. */
    z-index: 5;
}

/* ============================================================
   4. TELA INICIAL — home()
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .home
   FUNÇÃO: Tela inicial criada pela função home() em app.js.
   ------------------------------------------------------------ */
.home {
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Define a direção dos itens Flex. Valor usado: column. */
    flex-direction: column;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Distribui itens no eixo principal. Valor usado: center. */
    justify-content: center;
}
/* ------------------------------------------------------------
   SELETOR: .brand
   FUNÇÃO: Logotipo textual PLAY PLAY.
   ------------------------------------------------------------ */
.brand {
    /* Define o tamanho do texto. Valor usado: 6.2vh. */
    font-size: 6.2vh;
    /* Define a espessura do texto. Valor usado: 1000. */
    font-weight: 1000;
    /* Define estilo normal/itálico. Valor usado: italic. */
    font-style: italic;
    /* Define o espaçamento entre letras. Valor usado: -.3vh. */
    letter-spacing: -.3vh;
    /* Cria sombra no texto. Valor usado: 0 0 11px var(--accent),4px 5px 0 #091b74. */
    text-shadow: 0 0 11px var(--accent),4px 5px 0 #091b74;
}
/* ------------------------------------------------------------
   SELETOR: .brand span
   FUNÇÃO: Parte destacada do logotipo.
   ------------------------------------------------------------ */
.brand span {
    /* Define a cor do texto/ícone. Valor usado: var(--accent). */
    color: var(--accent);
}
/* ------------------------------------------------------------
   SELETOR: .home-menu
   FUNÇÃO: Grade dos botões principais: TV, Filmes, Séries, Lista e Configurações.
   ------------------------------------------------------------ */
.home-menu {
    /* Escolhe o modelo de layout do elemento. Valor usado: grid. */
    display: grid;
    /* Define quantidade e largura das colunas do Grid. Valor usado: repeat(5,1fr). */
    grid-template-columns: repeat(5,1fr);
    /* Define o espaço entre itens de Grid/Flex. Valor usado: 1.5vw. */
    gap: 1.5vw;
    /* Define a largura. Valor usado: 78vw. */
    width: 78vw;
    /* Define o espaço externo superior. Valor usado: 6vh. */
    margin-top: 6vh;
}
/* ------------------------------------------------------------
   SELETOR: .home-card
   FUNÇÃO: Cada cartão/botão do menu inicial.
   ------------------------------------------------------------ */
.home-card {
    /* Define a altura. Valor usado: 29vh. */
    height: 29vh;
    /* Arredonda os cantos. Valor usado: 8px. */
    border-radius: 8px;
    /* Define o fundo completo. Valor usado: rgba(6,10,42,.86). */
    background: rgba(6,10,42,.86);
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Define a direção dos itens Flex. Valor usado: column. */
    flex-direction: column;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Distribui itens no eixo principal. Valor usado: center. */
    justify-content: center;
    /* Define o tamanho do texto. Valor usado: 2vw. */
    font-size: 2vw;
    /* Define a espessura do texto. Valor usado: 800. */
    font-weight: 800;
}
/* ------------------------------------------------------------
   SELETOR: .home-card .ico
   FUNÇÃO: Ícone grande exibido dentro de cada cartão da Home.
   ------------------------------------------------------------ */
.home-card .ico {
    /* Define o tamanho do texto. Valor usado: 6vw. */
    font-size: 6vw;
    /* Define a cor do texto/ícone. Valor usado: var(--accent). */
    color: var(--accent);
    /* Define o espaço externo inferior. Valor usado: 2vh. */
    margin-bottom: 2vh;
}
/* ------------------------------------------------------------
   SELETOR: .footer-info,.device-info
   FUNÇÃO: Informações fixadas no rodapé da Home.
   ------------------------------------------------------------ */
.footer-info,.device-info {
    /* Define o método de posicionamento. Valor usado: absolute. */
    position: absolute;
    /* Posiciona a borda inferior. Valor usado: 2.6vh. */
    bottom: 2.6vh;
    /* Define o tamanho do texto. Valor usado: 1.25vw. */
    font-size: 1.25vw;
    /* Define a altura da linha. Valor usado: 1.35. */
    line-height: 1.35;
}
/* ------------------------------------------------------------
   SELETOR: .footer-info
   FUNÇÃO: Bloco de informações do lado esquerdo do rodapé.
   ------------------------------------------------------------ */
.footer-info {
    /* Posiciona a borda esquerda. Valor usado: 2.5vw. */
    left: 2.5vw;
}
/* ------------------------------------------------------------
   SELETOR: .device-info
   FUNÇÃO: Bloco com dados do dispositivo do lado direito do rodapé.
   ------------------------------------------------------------ */
.device-info {
    /* Posiciona a borda direita. Valor usado: 2.5vw. */
    right: 2.5vw;
}

/* ============================================================
   5. TV AO VIVO — live()
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .topbar
   FUNÇÃO: Barra superior da tela TV ao vivo, criada pela função live() em app.js.
   ------------------------------------------------------------ */
.topbar {
    /* Define a altura. Valor usado: 8vh. */
    height: 8vh;
    /* Escolhe o modelo de layout do elemento. Valor usado: grid. */
    display: grid;
    /* Define quantidade e largura das colunas do Grid. Valor usado: 39% 14% 1fr. */
    grid-template-columns: 39% 14% 1fr;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: .65vw. */
    gap: .65vw;
}
/* ------------------------------------------------------------
   SELETOR: .topbox
   FUNÇÃO: Cada caixa interna da barra superior da TV.
   ------------------------------------------------------------ */
.topbox {
    /* Define o fundo completo. Valor usado: var(--panel2). */
    background: var(--panel2);
    /* Arredonda os cantos. Valor usado: 7px. */
    border-radius: 7px;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 0 1vw. */
    padding: 0 1vw;
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Define o tamanho do texto. Valor usado: 1.45vw. */
    font-size: 1.45vw;
    /* Define a espessura do texto. Valor usado: 800. */
    font-weight: 800;
}
/* ------------------------------------------------------------
   SELETOR: .between
   FUNÇÃO: Utilitário Flex que coloca um item em cada extremidade.
   ------------------------------------------------------------ */
.between {
    /* Distribui itens no eixo principal. Valor usado: space-between. */
    justify-content: space-between;
}
/* ------------------------------------------------------------
   SELETOR: .content
   FUNÇÃO: Grade principal da tela live(): categorias, canais e prévia/EPG.
   ------------------------------------------------------------ */
.content {
    /* Define a altura. Valor usado: 86vh. */
    height: 86vh;
    /* Define o espaço externo superior. Valor usado: .8vh. */
    margin-top: .8vh;
    /* Escolhe o modelo de layout do elemento. Valor usado: grid. */
    display: grid;
    /* Define quantidade e largura das colunas do Grid. Valor usado: 24% 29% 1fr. */
    grid-template-columns: 24% 29% 1fr;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: .65vw. */
    gap: .65vw;
}
/* ------------------------------------------------------------
   SELETOR: .sidebar,.list,.preview-col
   FUNÇÃO: As três colunas roláveis da tela de TV ao vivo.
   ------------------------------------------------------------ */
.sidebar,.list,.preview-col {
    /* Define a largura mínima. Valor usado: 0. */
    min-width: 0;
    /* Controla excesso e rolagem vertical. Valor usado: auto. */
    overflow-y: auto;
    /* Controla a largura da barra de rolagem no Firefox. Valor usado: none. */
    scrollbar-width: none;
}
/* ------------------------------------------------------------
   SELETOR: .sidebar::-webkit-scrollbar,.list::-webkit-scrollbar,.library-side::-webkit-scrollbar,.poster-grid::-webkit-scrollbar
   FUNÇÃO: Oculta visualmente as barras de rolagem nos navegadores WebKit.
   ------------------------------------------------------------ */
.sidebar::-webkit-scrollbar,.list::-webkit-scrollbar,.library-side::-webkit-scrollbar,.poster-grid::-webkit-scrollbar {
    /* Escolhe o modelo de layout do elemento. Valor usado: none. */
    display: none;
}
/* ------------------------------------------------------------
   SELETOR: .row
   FUNÇÃO: Linha genérica usada em categorias, canais, configurações e listas.
   ------------------------------------------------------------ */
.row {
    /* Define a largura. Valor usado: 100%. */
    width: 100%;
    /* Define a altura. Valor usado: 7.1vh. */
    height: 7.1vh;
    /* Define o espaço externo inferior. Valor usado: .65vh. */
    margin-bottom: .65vh;
    /* Arredonda os cantos. Valor usado: 6px. */
    border-radius: 6px;
    /* Define o fundo completo. Valor usado: var(--panel2). */
    background: var(--panel2);
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 0 .9vw. */
    padding: 0 .9vw;
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Distribui itens no eixo principal. Valor usado: space-between. */
    justify-content: space-between;
    /* Define o tamanho do texto. Valor usado: 1.08vw. */
    font-size: 1.08vw;
    /* Define a espessura do texto. Valor usado: 750. */
    font-weight: 750;
    /* Controla quebra de linha e espaços. Valor usado: nowrap. */
    white-space: nowrap;
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: hidden. */
    overflow: hidden;
}
/* ------------------------------------------------------------
   SELETOR: .row span,.row b
   FUNÇÃO: Impede textos internos das linhas de ultrapassarem o espaço disponível.
   ------------------------------------------------------------ */
.row span,.row b {
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: hidden. */
    overflow: hidden;
    /* Define como texto cortado é sinalizado. Valor usado: ellipsis. */
    text-overflow: ellipsis;
}
/* ------------------------------------------------------------
   SELETOR: .channel-row
   FUNÇÃO: Linha específica de canal dentro da função live().
   ------------------------------------------------------------ */
.channel-row {
    /* Distribui itens no eixo principal. Valor usado: flex-start. */
    justify-content: flex-start;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: .7vw. */
    gap: .7vw;
}
/* ------------------------------------------------------------
   SELETOR: .channel-row b
   FUNÇÃO: Nome do canal; ocupa o espaço restante da linha.
   ------------------------------------------------------------ */
.channel-row b {
    /* Define crescimento, redução e base de um item Flex. Valor usado: 1. */
    flex: 1;
    /* Define o alinhamento horizontal do texto. Valor usado: left. */
    text-align: left;
}
/* ------------------------------------------------------------
   SELETOR: .num
   FUNÇÃO: Número/posição do canal.
   ------------------------------------------------------------ */
.num {
    /* Define a largura mínima. Valor usado: 3.2vw. */
    min-width: 3.2vw;
    /* Define a cor do texto/ícone. Valor usado: #dce5ff. */
    color: #dce5ff;
}
/* ------------------------------------------------------------
   SELETOR: .fav
   FUNÇÃO: Indicador simples de favorito.
   ------------------------------------------------------------ */
.fav {
    /* Define o espaço externo à esquerda. Valor usado: auto. */
    margin-left: auto;
    /* Define o tamanho do texto. Valor usado: 1.45vw. */
    font-size: 1.45vw;
}
/* ------------------------------------------------------------
   SELETOR: .selected
   FUNÇÃO: Marca visualmente um item selecionado.
   ------------------------------------------------------------ */
.selected {
    /* Cria sombra externa ou interna. Valor usado: inset 5px 0 0 var(--accent). */
    box-shadow: inset 5px 0 0 var(--accent);
}

/* ============================================================
   6. PRÉVIA E EPG DA TV
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .preview
   FUNÇÃO: Janela de pré-visualização do canal na terceira coluna da TV.
   ------------------------------------------------------------ */
.preview {
    /* Define a altura. Valor usado: 39vh. */
    height: 39vh;
    /* Define o fundo completo. Valor usado: #030711. */
    background: #030711;
    /* Define borda completa. Valor usado: 2px solid rgba(255,255,255,.15). */
    border: 2px solid rgba(255,255,255,.15);
    /* Arredonda os cantos. Valor usado: 5px. */
    border-radius: 5px;
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: hidden. */
    overflow: hidden;
    /* Define o método de posicionamento. Valor usado: relative. */
    position: relative;
}
/* ------------------------------------------------------------
   SELETOR: .preview-art
   FUNÇÃO: Conteúdo visual ou fallback da janela de prévia.
   ------------------------------------------------------------ */
.preview-art {
    /* Define a largura. Valor usado: 100%. */
    width: 100%;
    /* Define a altura. Valor usado: 100%. */
    height: 100%;
    /* Define o fundo completo. Valor usado: linear-gradient(120deg,#111a43,#3c4f88). */
    background: linear-gradient(120deg,#111a43,#3c4f88);
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Distribui itens no eixo principal. Valor usado: center. */
    justify-content: center;
    /* Define o tamanho do texto. Valor usado: 3.1vw. */
    font-size: 3.1vw;
    /* Define a espessura do texto. Valor usado: 900. */
    font-weight: 900;
    /* Define o alinhamento horizontal do texto. Valor usado: center. */
    text-align: center;
}
/* ------------------------------------------------------------
   SELETOR: .preview-hint
   FUNÇÃO: Texto de ajuda sobreposto no canto inferior da prévia.
   ------------------------------------------------------------ */
.preview-hint {
    /* Define o método de posicionamento. Valor usado: absolute. */
    position: absolute;
    /* Posiciona a borda esquerda. Valor usado: 1vw. */
    left: 1vw;
    /* Posiciona a borda inferior. Valor usado: 1vh. */
    bottom: 1vh;
    /* Define o fundo completo. Valor usado: #000a. */
    background: #000a;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: .5vh .7vw. */
    padding: .5vh .7vw;
    /* Arredonda os cantos. Valor usado: 5px. */
    border-radius: 5px;
    /* Define o tamanho do texto. Valor usado: .85vw. */
    font-size: .85vw;
}
/* ------------------------------------------------------------
   SELETOR: .epg-row
   FUNÇÃO: Linha de programação/EPG exibida abaixo da prévia.
   ------------------------------------------------------------ */
.epg-row {
    /* Define a altura. Valor usado: 7.15vh. */
    height: 7.15vh;
    /* Define o espaço externo superior. Valor usado: .65vh. */
    margin-top: .65vh;
    /* Define o fundo completo. Valor usado: var(--panel2). */
    background: var(--panel2);
    /* Arredonda os cantos. Valor usado: 6px. */
    border-radius: 6px;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 0 .9vw. */
    padding: 0 .9vw;
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Distribui itens no eixo principal. Valor usado: space-between. */
    justify-content: space-between;
    /* Define o tamanho do texto. Valor usado: .95vw. */
    font-size: .95vw;
    /* Define a espessura do texto. Valor usado: 700. */
    font-weight: 700;
}
/* ------------------------------------------------------------
   SELETOR: .epg-dot
   FUNÇÃO: Marcador circular usado na programação.
   ------------------------------------------------------------ */
.epg-dot {
    /* Define a largura. Valor usado: 1.4vw. */
    width: 1.4vw;
    /* Define a altura. Valor usado: 1.4vw. */
    height: 1.4vw;
    /* Arredonda os cantos. Valor usado: 50%. */
    border-radius: 50%;
    /* Define o fundo completo. Valor usado: #dce8ff. */
    background: #dce8ff;
    /* Define o espaço externo à direita. Valor usado: .7vw. */
    margin-right: .7vw;
}
/* ------------------------------------------------------------
   SELETOR: .epg-left
   FUNÇÃO: Agrupa marcador e texto do EPG.
   ------------------------------------------------------------ */
.epg-left {
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
}

/* ============================================================
   7. FILMES E SÉRIES — library(kind)
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .library
   FUNÇÃO: Layout principal de Filmes e Séries, criado pela função library(kind) em app.js.
   ------------------------------------------------------------ */
.library {
    /* Define a altura. Valor usado: 100%. */
    height: 100%;
    /* Escolhe o modelo de layout do elemento. Valor usado: grid. */
    display: grid;
    /* Define quantidade e largura das colunas do Grid. Valor usado: 27% 1fr. */
    grid-template-columns: 27% 1fr;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: 1.2vw. */
    gap: 1.2vw;
}
/* ------------------------------------------------------------
   SELETOR: .library-side
   FUNÇÃO: Coluna da pesquisa e das categorias de Filmes/Séries.
   ------------------------------------------------------------ */
.library-side {
    /* Controla excesso e rolagem vertical. Valor usado: auto. */
    overflow-y: auto;
}
/* ------------------------------------------------------------
   SELETOR: .searchbox
   FUNÇÃO: Campo/barra de pesquisa da biblioteca.
   ------------------------------------------------------------ */
.searchbox {
    /* Define a largura. Valor usado: 100%. */
    width: 100%;
    /* Define a altura. Valor usado: 6.4vh. */
    height: 6.4vh;
    /* Define o fundo completo. Valor usado: var(--panel2). */
    background: var(--panel2);
    /* Arredonda os cantos. Valor usado: 7px. */
    border-radius: 7px;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 0 1vw. */
    padding: 0 1vw;
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Define o tamanho do texto. Valor usado: 1.25vw. */
    font-size: 1.25vw;
    /* Define a espessura do texto. Valor usado: 800. */
    font-weight: 800;
    /* Define o espaço externo inferior. Valor usado: .8vh. */
    margin-bottom: .8vh;
}
/* ------------------------------------------------------------
   SELETOR: .library-main
   FUNÇÃO: Área principal que contém título, ajuda e grade de pôsteres.
   ------------------------------------------------------------ */
.library-main {
    /* Define a largura mínima. Valor usado: 0. */
    min-width: 0;
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: hidden. */
    overflow: hidden;
}
/* ------------------------------------------------------------
   SELETOR: .library-title
   FUNÇÃO: Título da tela de Filmes ou Séries.
   ------------------------------------------------------------ */
.library-title {
    /* Define o tamanho do texto. Valor usado: 2.6vw. */
    font-size: 2.6vw;
    /* Define o espaço externo ao redor do elemento. Valor usado: .2vh 0 2vh. */
    margin: .2vh 0 2vh;
}
/* ------------------------------------------------------------
   SELETOR: .poster-grid
   FUNÇÃO: Grade rolável dos pôsteres.
   ------------------------------------------------------------ */
.poster-grid {
    /* Define a altura. Valor usado: 90vh. */
    height: 90vh;
    /* Controla excesso e rolagem vertical. Valor usado: auto. */
    overflow-y: auto;
    /* Escolhe o modelo de layout do elemento. Valor usado: grid. */
    display: grid;
    /* Define quantidade e largura das colunas do Grid. Valor usado: repeat(4,1fr). */
    grid-template-columns: repeat(4,1fr);
    /* Define o espaço entre itens de Grid/Flex. Valor usado: 2vh 1.8vw. */
    gap: 2vh 1.8vw;
    /* Define o espaço interno direito. Valor usado: .4vw. */
    padding-right: .4vw;
}
/* ------------------------------------------------------------
   SELETOR: .poster
   FUNÇÃO: Botão/cartão clicável de cada filme ou série.
   ------------------------------------------------------------ */
.poster {
    /* Define borda completa. Valor usado: 0. */
    border: 0;
    /* Define o fundo completo. Valor usado: transparent. */
    background: transparent;
    /* Define o alinhamento horizontal do texto. Valor usado: left. */
    text-align: left;
    /* Define a largura mínima. Valor usado: 0. */
    min-width: 0;
}
/* ------------------------------------------------------------
   SELETOR: .poster-art
   FUNÇÃO: Imagem de capa do filme/série.
   ------------------------------------------------------------ */
.poster-art {
    /* Define a altura. Valor usado: 34vh. */
    height: 34vh;
    /* Arredonda os cantos. Valor usado: 7px. */
    border-radius: 7px;
    /* Define borda completa. Valor usado: 2px solid rgba(255,255,255,.16). */
    border: 2px solid rgba(255,255,255,.16);
    /* Define a posição do fundo. Valor usado: center. */
    background-position: center;
    /* Define o tamanho do fundo. Valor usado: cover. */
    background-size: cover;
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: flex-end. */
    align-items: flex-end;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: .8vw. */
    padding: .8vw;
    /* Define o tamanho do texto. Valor usado: 1.1vw. */
    font-size: 1.1vw;
    /* Define a espessura do texto. Valor usado: 900. */
    font-weight: 900;
    /* Cria sombra no texto. Valor usado: 0 2px 4px #000. */
    text-shadow: 0 2px 4px #000;
}
/* ------------------------------------------------------------
   SELETOR: .poster-art.noimage
   FUNÇÃO: Fallback visual quando não existe imagem de capa.
   ------------------------------------------------------------ */
.poster-art.noimage {
    /* Define o fundo completo. Valor usado: linear-gradient(155deg,#2257d8,#151c50). */
    background: linear-gradient(155deg,#2257d8,#151c50);
}
/* ------------------------------------------------------------
   SELETOR: .poster-title
   FUNÇÃO: Título escrito abaixo do pôster.
   ------------------------------------------------------------ */
.poster-title {
    /* Define o tamanho do texto. Valor usado: 1.1vw. */
    font-size: 1.1vw;
    /* Define a espessura do texto. Valor usado: 700. */
    font-weight: 700;
    /* Define o espaço externo superior. Valor usado: .7vh. */
    margin-top: .7vh;
    /* Controla quebra de linha e espaços. Valor usado: nowrap. */
    white-space: nowrap;
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: hidden. */
    overflow: hidden;
    /* Define como texto cortado é sinalizado. Valor usado: ellipsis. */
    text-overflow: ellipsis;
}

/* ============================================================
   8. MODAIS E ESTADOS
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .modal
   FUNÇÃO: Camada escura que cobre a tela quando uma janela modal é aberta.
   ------------------------------------------------------------ */
.modal {
    /* Define o método de posicionamento. Valor usado: fixed. */
    position: fixed;
    /* Controla a ordem de sobreposição. Valor usado: 30. */
    z-index: 30;
    /* Atalho para top, right, bottom e left. Valor usado: 0. */
    inset: 0;
    /* Define o fundo completo. Valor usado: rgba(0,0,0,.76). */
    background: rgba(0,0,0,.76);
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Distribui itens no eixo principal. Valor usado: center. */
    justify-content: center;
}
/* ------------------------------------------------------------
   SELETOR: .modal-card
   FUNÇÃO: Caixa central do modal.
   ------------------------------------------------------------ */
.modal-card {
    /* Define a largura. Valor usado: 50vw. */
    width: 50vw;
    /* Define a altura máxima. Valor usado: 82vh. */
    max-height: 82vh;
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: auto. */
    overflow: auto;
    /* Define o fundo completo. Valor usado: #111a3f. */
    background: #111a3f;
    /* Define borda completa. Valor usado: 2px solid var(--accent). */
    border: 2px solid var(--accent);
    /* Arredonda os cantos. Valor usado: 12px. */
    border-radius: 12px;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 3vh 2.5vw. */
    padding: 3vh 2.5vw;
    /* Define o alinhamento horizontal do texto. Valor usado: center. */
    text-align: center;
}
/* ------------------------------------------------------------
   SELETOR: .modal-card button
   FUNÇÃO: Botões internos dos modais.
   ------------------------------------------------------------ */
.modal-card button {
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 1.2vh 2vw. */
    padding: 1.2vh 2vw;
    /* Arredonda os cantos. Valor usado: 7px. */
    border-radius: 7px;
    /* Define o fundo completo. Valor usado: var(--panel2). */
    background: var(--panel2);
    /* Define a espessura do texto. Valor usado: 800. */
    font-weight: 800;
}
/* ------------------------------------------------------------
   SELETOR: .loading,.empty,.errorbox
   FUNÇÃO: Caixas de estado: carregando, sem conteúdo e erro.
   ------------------------------------------------------------ */
.loading,.empty,.errorbox {
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 3vh 2vw. */
    padding: 3vh 2vw;
    /* Define o fundo completo. Valor usado: var(--panel2). */
    background: var(--panel2);
    /* Arredonda os cantos. Valor usado: 8px. */
    border-radius: 8px;
    /* Define o tamanho do texto. Valor usado: 1.15vw. */
    font-size: 1.15vw;
}
/* ------------------------------------------------------------
   SELETOR: .errorbox
   FUNÇÃO: Variação visual específica para mensagens de erro.
   ------------------------------------------------------------ */
.errorbox {
    /* Define borda completa. Valor usado: 2px solid #ff6b6b. */
    border: 2px solid #ff6b6b;
}
/* ------------------------------------------------------------
   SELETOR: .spinner
   FUNÇÃO: Indicador circular de carregamento.
   ------------------------------------------------------------ */
.spinner {
    /* Define a largura. Valor usado: 3vw. */
    width: 3vw;
    /* Define a altura. Valor usado: 3vw. */
    height: 3vw;
    /* Define borda completa. Valor usado: .35vw solid #ffffff33. */
    border: .35vw solid #ffffff33;
    /* Define a cor da borda superior. Valor usado: #fff. */
    border-top-color: #fff;
    /* Arredonda os cantos. Valor usado: 50%. */
    border-radius: 50%;
    /* Aplica uma animação por keyframes. Valor usado: spin .8s linear infinite. */
    animation: spin .8s linear infinite;
    /* Define o espaço externo ao redor do elemento. Valor usado: 2vh auto. */
    margin: 2vh auto;
}
/* ------------------------------------------------------------
   REGRA: @keyframes spin
   FUNÇÃO: Animação usada pelo indicador de carregamento.
   ------------------------------------------------------------ */
@keyframes spin {
    /* ------------------------------------------------------------
       SELETOR: to
       FUNÇÃO: Estiliza o(s) elemento(s) correspondente(s) a este seletor.
       ------------------------------------------------------------ */
    to {
        /* Move, gira ou redimensiona visualmente. Valor usado: rotate(360deg). */
        transform: rotate(360deg);
    }
}

/* ============================================================
   9. PLAYER — playMedia()/closePlayer()
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: #playerLayer
   FUNÇÃO: Camada do player em tela cheia; controlada por playMedia() e closePlayer() em app.js.
   ------------------------------------------------------------ */
#playerLayer {
    /* Escolhe o modelo de layout do elemento. Valor usado: none. */
    display: none;
    /* Define o método de posicionamento. Valor usado: fixed. */
    position: fixed;
    /* Controla a ordem de sobreposição. Valor usado: 60. */
    z-index: 60;
    /* Atalho para top, right, bottom e left. Valor usado: 0. */
    inset: 0;
    /* Define o fundo completo. Valor usado: #000. */
    background: #000;
}
/* ------------------------------------------------------------
   SELETOR: #player
   FUNÇÃO: Elemento de vídeo principal.
   ------------------------------------------------------------ */
#player {
    /* Define a largura. Valor usado: 100%. */
    width: 100%;
    /* Define a altura. Valor usado: 100%. */
    height: 100%;
    /* Define o fundo completo. Valor usado: #000. */
    background: #000;
}
/* ------------------------------------------------------------
   SELETOR: .player-bar
   FUNÇÃO: Barra sobreposta no topo do player.
   ------------------------------------------------------------ */
.player-bar {
    /* Define o método de posicionamento. Valor usado: absolute. */
    position: absolute;
    /* Posiciona a borda superior. Valor usado: 1.5vh. */
    top: 1.5vh;
    /* Posiciona a borda esquerda. Valor usado: 1.5vw. */
    left: 1.5vw;
    /* Posiciona a borda direita. Valor usado: 1.5vw. */
    right: 1.5vw;
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Distribui itens no eixo principal. Valor usado: space-between. */
    justify-content: space-between;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Controla a ordem de sobreposição. Valor usado: 2. */
    z-index: 2;
}
/* ------------------------------------------------------------
   SELETOR: .player-title
   FUNÇÃO: Título do conteúdo em reprodução.
   ------------------------------------------------------------ */
.player-title {
    /* Define o fundo completo. Valor usado: #000a. */
    background: #000a;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 1vh 1vw. */
    padding: 1vh 1vw;
    /* Arredonda os cantos. Valor usado: 6px. */
    border-radius: 6px;
    /* Define a espessura do texto. Valor usado: 800. */
    font-weight: 800;
}
/* ------------------------------------------------------------
   SELETOR: .player-close
   FUNÇÃO: Botão para fechar o player.
   ------------------------------------------------------------ */
.player-close {
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 1vh 1.2vw. */
    padding: 1vh 1.2vw;
    /* Define o fundo completo. Valor usado: #111a3f. */
    background: #111a3f;
    /* Define borda completa. Valor usado: 2px solid #fff. */
    border: 2px solid #fff;
    /* Arredonda os cantos. Valor usado: 7px. */
    border-radius: 7px;
}
/* ------------------------------------------------------------
   SELETOR: .player-status
   FUNÇÃO: Mensagem central de status do player.
   ------------------------------------------------------------ */
.player-status {
    /* Define o método de posicionamento. Valor usado: absolute. */
    position: absolute;
    /* Posiciona a borda esquerda. Valor usado: 50%. */
    left: 50%;
    /* Posiciona a borda superior. Valor usado: 50%. */
    top: 50%;
    /* Move, gira ou redimensiona visualmente. Valor usado: translate(-50%,-50%). */
    transform: translate(-50%,-50%);
    /* Define o fundo completo. Valor usado: #000b. */
    background: #000b;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 1.5vh 1.5vw. */
    padding: 1.5vh 1.5vw;
    /* Arredonda os cantos. Valor usado: 8px. */
    border-radius: 8px;
    /* Define o tamanho do texto. Valor usado: 1.1vw. */
    font-size: 1.1vw;
}
/* ------------------------------------------------------------
   REGRA: @media (max-width:1000px)
   FUNÇÃO: Regra responsiva: aplica o bloco somente quando a condição de tela é atendida.
   ------------------------------------------------------------ */
@media (max-width:1000px) {
    /* ------------------------------------------------------------
       SELETOR: .home-menu
       FUNÇÃO: Grade dos botões principais: TV, Filmes, Séries, Lista e Configurações.
       ------------------------------------------------------------ */
    .home-menu {
        /* Define a largura. Valor usado: 92vw. */
        width: 92vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .home-card
       FUNÇÃO: Cada cartão/botão do menu inicial.
       ------------------------------------------------------------ */
    .home-card {
        /* Define o tamanho do texto. Valor usado: 1.8vw. */
        font-size: 1.8vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .poster-grid
       FUNÇÃO: Grade rolável dos pôsteres.
       ------------------------------------------------------------ */
    .poster-grid {
        /* Define quantidade e largura das colunas do Grid. Valor usado: repeat(4,1fr). */
        grid-template-columns: repeat(4,1fr);
    }
}

/* ============================================================
   10. RECARGA, FOCO E COMPATIBILIDADE
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .reload-button
   FUNÇÃO: Botão de recarregar a aplicação na Home.
   ------------------------------------------------------------ */
.reload-button {
    /* Define o espaço externo superior. Valor usado: 4.5vh. */
    margin-top: 4.5vh;
    /* Define a largura mínima. Valor usado: 24vw. */
    min-width: 24vw;
    /* Define a altura. Valor usado: 8vh. */
    height: 8vh;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 0 2.4vw. */
    padding: 0 2.4vw;
    /* Define borda completa. Valor usado: 2px solid rgba(255,255,255,.75). */
    border: 2px solid rgba(255,255,255,.75);
    /* Arredonda os cantos. Valor usado: 8px. */
    border-radius: 8px;
    /* Define o fundo completo. Valor usado: rgba(13,20,66,.9). */
    background: rgba(13,20,66,.9);
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Distribui itens no eixo principal. Valor usado: center. */
    justify-content: center;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: 1vw. */
    gap: 1vw;
    /* Define o tamanho do texto. Valor usado: 1.8vw. */
    font-size: 1.8vw;
    /* Define a espessura do texto. Valor usado: 900. */
    font-weight: 900;
}
/* ------------------------------------------------------------
   SELETOR: .reload-icon
   FUNÇÃO: Ícone interno do botão de recarregar.
   ------------------------------------------------------------ */
.reload-icon {
    /* Define o tamanho do texto. Valor usado: 2.5vw. */
    font-size: 2.5vw;
}
/* ------------------------------------------------------------
   SELETOR: .home .reload-button:focus
   FUNÇÃO: Efeito de foco específico do botão de recarga.
   ------------------------------------------------------------ */
.home .reload-button:focus {
    /* Move, gira ou redimensiona visualmente. Valor usado: scale(1.04). */
    transform: scale(1.04);
}
/* ------------------------------------------------------------
   SELETOR: .focusable:focus-visible
   FUNÇÃO: Remove o contorno padrão quando o navegador usa :focus-visible.
   ------------------------------------------------------------ */
.focusable:focus-visible {
    /* Define/remover o contorno de foco padrão. Valor usado: none. */
    outline: none;
}
/* ------------------------------------------------------------
   SELETOR: .sidebar .row:focus,.list .row:focus,.library-side .row:focus
   FUNÇÃO: Reserva margem de rolagem para manter a linha focada visível.
   ------------------------------------------------------------ */
.sidebar .row:focus,.list .row:focus,.library-side .row:focus {
    /* Cria margem usada ao rolar até o elemento. Valor usado: 9vh. */
    scroll-margin: 9vh;
}
/* ------------------------------------------------------------
   SELETOR: .poster:focus
   FUNÇÃO: Amplia levemente o pôster focado.
   ------------------------------------------------------------ */
.poster:focus {
    /* Move, gira ou redimensiona visualmente. Valor usado: scale(1.025). */
    transform: scale(1.025);
}
/* PLAY PLAY 5.0 - compatibilidade TV/Fire OS */
/* ------------------------------------------------------------
   SELETOR: html.legacy .focusable
   FUNÇÃO: Desativa transições em dispositivos antigos/Fire OS no modo legacy.
   ------------------------------------------------------------ */
html.legacy .focusable {
    /* Suaviza mudanças de propriedades. Valor usado: none. */
    transition: none;
}
/* ------------------------------------------------------------
   SELETOR: html.legacy .bg:after
   FUNÇÃO: Remove o efeito decorativo do fundo em dispositivos antigos.
   ------------------------------------------------------------ */
html.legacy .bg:after {
    /* Escolhe o modelo de layout do elemento. Valor usado: none. */
    display: none;
}
/* ------------------------------------------------------------
   SELETOR: .focusable[data-loading="1"]
   FUNÇÃO: Estado temporário de elemento ocupado/carregando.
   ------------------------------------------------------------ */
.focusable[data-loading="1"] {
    /* Define a transparência. Valor usado: .65. */
    opacity: .65;
    /* Controla se o elemento recebe cliques/toques. Valor usado: none. */
    pointer-events: none;
}
/* ------------------------------------------------------------
   REGRA: @media (max-width:1280px)
   FUNÇÃO: Regra responsiva: aplica o bloco somente quando a condição de tela é atendida.
   ------------------------------------------------------------ */
@media (max-width:1280px) {
    /* ------------------------------------------------------------
       SELETOR: .row
       FUNÇÃO: Linha genérica usada em categorias, canais, configurações e listas.
       ------------------------------------------------------------ */
    .row {
        /* Define o tamanho do texto. Valor usado: 1.25vw. */
        font-size: 1.25vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .poster-title
       FUNÇÃO: Título escrito abaixo do pôster.
       ------------------------------------------------------------ */
    .poster-title {
        /* Define o tamanho do texto. Valor usado: 1.25vw. */
        font-size: 1.25vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .home-card
       FUNÇÃO: Cada cartão/botão do menu inicial.
       ------------------------------------------------------------ */
    .home-card {
        /* Define o tamanho do texto. Valor usado: 2.1vw. */
        font-size: 2.1vw;
    }
}
/* ------------------------------------------------------------
   REGRA: @media (max-height:600px)
   FUNÇÃO: Regra responsiva: aplica o bloco somente quando a condição de tela é atendida.
   ------------------------------------------------------------ */
@media (max-height:600px) {
    /* ------------------------------------------------------------
       SELETOR: .home-menu
       FUNÇÃO: Grade dos botões principais: TV, Filmes, Séries, Lista e Configurações.
       ------------------------------------------------------------ */
    .home-menu {
        /* Define o espaço externo superior. Valor usado: 3vh. */
        margin-top: 3vh;
    }
    /* ------------------------------------------------------------
       SELETOR: .home-card
       FUNÇÃO: Cada cartão/botão do menu inicial.
       ------------------------------------------------------------ */
    .home-card {
        /* Define a altura. Valor usado: 27vh. */
        height: 27vh;
    }
    /* ------------------------------------------------------------
       SELETOR: .reload-button
       FUNÇÃO: Botão de recarregar a aplicação na Home.
       ------------------------------------------------------------ */
    .reload-button {
        /* Define o espaço externo superior. Valor usado: 2.5vh. */
        margin-top: 2.5vh;
    }
    /* ------------------------------------------------------------
       SELETOR: .poster-art
       FUNÇÃO: Imagem de capa do filme/série.
       ------------------------------------------------------------ */
    .poster-art {
        /* Define a altura. Valor usado: 32vh. */
        height: 32vh;
    }
}
/* PLAY PLAY 6 - tela Listas */

/* ============================================================
   11. LISTAS/PLAYLIST — lists()
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .lists-screen
   FUNÇÃO: Tela de listas/playlist criada pela função lists() em app.js.
   ------------------------------------------------------------ */
.lists-screen {
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 4vh 5vw. */
    padding: 4vh 5vw;
    /* Escolhe o modelo de layout do elemento. Valor usado: block. */
    display: block;
}
/* ------------------------------------------------------------
   SELETOR: .list-login-page
   FUNÇÃO: Contêiner central do formulário de playlist.
   ------------------------------------------------------------ */
.list-login-page {
    /* Define a largura máxima. Valor usado: 1000px. */
    max-width: 1000px;
    /* Define o espaço externo ao redor do elemento. Valor usado: 0 auto. */
    margin: 0 auto;
}
/* ------------------------------------------------------------
   SELETOR: .list-login-head
   FUNÇÃO: Cabeçalho da tela de playlist.
   ------------------------------------------------------------ */
.list-login-head {
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: 2vw. */
    gap: 2vw;
    /* Define o espaço externo inferior. Valor usado: 5vh. */
    margin-bottom: 5vh;
}
/* ------------------------------------------------------------
   SELETOR: .list-login-head h1
   FUNÇÃO: Título principal da tela de playlist.
   ------------------------------------------------------------ */
.list-login-head h1 {
    /* Define o tamanho do texto. Valor usado: 3.2vw. */
    font-size: 3.2vw;
    /* Define o espaço externo ao redor do elemento. Valor usado: 0. */
    margin: 0;
}
/* ------------------------------------------------------------
   SELETOR: .back-button
   FUNÇÃO: Botão circular para voltar.
   ------------------------------------------------------------ */
.back-button {
    /* Define a largura. Valor usado: 5vw. */
    width: 5vw;
    /* Define a altura. Valor usado: 5vw. */
    height: 5vw;
    /* Arredonda os cantos. Valor usado: 50%. */
    border-radius: 50%;
    /* Define o tamanho do texto. Valor usado: 2vw. */
    font-size: 2vw;
}
/* ------------------------------------------------------------
   SELETOR: .playlist-form
   FUNÇÃO: Formulário de login/configuração da playlist.
   ------------------------------------------------------------ */
.playlist-form {
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Define a direção dos itens Flex. Valor usado: column. */
    flex-direction: column;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: 2.3vh. */
    gap: 2.3vh;
}
/* ------------------------------------------------------------
   SELETOR: .playlist-form input
   FUNÇÃO: Campos do formulário de playlist.
   ------------------------------------------------------------ */
.playlist-form input {
    /* Define a largura. Valor usado: 100%. */
    width: 100%;
    /* Define como largura e altura calculam borda e preenchimento. Valor usado: border-box. */
    box-sizing: border-box;
    /* Define borda completa. Valor usado: 2px solid transparent. */
    border: 2px solid transparent;
    /* Arredonda os cantos. Valor usado: 15px. */
    border-radius: 15px;
    /* Define o fundo completo. Valor usado: rgba(25,25,35,.92). */
    background: rgba(25,25,35,.92);
    /* Define a cor do texto/ícone. Valor usado: #fff. */
    color: #fff;
    /* Define o tamanho do texto. Valor usado: 1.65vw. */
    font-size: 1.65vw;
    /* Define a espessura do texto. Valor usado: 700. */
    font-weight: 700;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 1.2vw 1.8vw. */
    padding: 1.2vw 1.8vw;
    /* Define/remover o contorno de foco padrão. Valor usado: none. */
    outline: none;
}
/* ------------------------------------------------------------
   SELETOR: .playlist-form input:focus
   FUNÇÃO: Aparência do campo ativo.
   ------------------------------------------------------------ */
.playlist-form input:focus {
    /* Define o fundo completo. Valor usado: #fff. */
    background: #fff;
    /* Define a cor do texto/ícone. Valor usado: #333. */
    color: #333;
    /* Define a cor da borda. Valor usado: var(--accent). */
    border-color: var(--accent);
    /* Move, gira ou redimensiona visualmente. Valor usado: scale(1.015). */
    transform: scale(1.015);
}
/* ------------------------------------------------------------
   SELETOR: .playlist-actions
   FUNÇÃO: Área dos botões de ação do formulário.
   ------------------------------------------------------------ */
.playlist-actions {
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Distribui itens no eixo principal. Valor usado: center. */
    justify-content: center;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: 2vw. */
    gap: 2vw;
    /* Define o espaço externo superior. Valor usado: 2vh. */
    margin-top: 2vh;
}
/* ------------------------------------------------------------
   SELETOR: .playlist-actions button
   FUNÇÃO: Botões de salvar/entrar/cancelar.
   ------------------------------------------------------------ */
.playlist-actions button {
    /* Define a largura mínima. Valor usado: 12vw. */
    min-width: 12vw;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 1vw 2vw. */
    padding: 1vw 2vw;
    /* Define o tamanho do texto. Valor usado: 1.45vw. */
    font-size: 1.45vw;
    /* Arredonda os cantos. Valor usado: 30px. */
    border-radius: 30px;
}
/* ------------------------------------------------------------
   SELETOR: .playlist-actions .secondary
   FUNÇÃO: Variação secundária de botão.
   ------------------------------------------------------------ */
.playlist-actions .secondary {
    /* Define o fundo completo. Valor usado: #3d3d46. */
    background: #3d3d46;
}
/* ------------------------------------------------------------
   SELETOR: .playlist-message
   FUNÇÃO: Área reservada para mensagens do formulário.
   ------------------------------------------------------------ */
.playlist-message {
    /* Define a altura mínima. Valor usado: 1.8em. */
    min-height: 1.8em;
    /* Define o alinhamento horizontal do texto. Valor usado: center. */
    text-align: center;
    /* Define a espessura do texto. Valor usado: 700. */
    font-weight: 700;
}
/* ------------------------------------------------------------
   SELETOR: .playlist-message.error
   FUNÇÃO: Mensagem de erro.
   ------------------------------------------------------------ */
.playlist-message.error {
    /* Define a cor do texto/ícone. Valor usado: #ff8f8f. */
    color: #ff8f8f;
}
/* ------------------------------------------------------------
   SELETOR: .playlist-message.success
   FUNÇÃO: Mensagem de sucesso.
   ------------------------------------------------------------ */
.playlist-message.success {
    /* Define a cor do texto/ícone. Valor usado: #7dffad. */
    color: #7dffad;
}
/* ------------------------------------------------------------
   SELETOR: .playlist-help
   FUNÇÃO: Texto de ajuda abaixo do formulário.
   ------------------------------------------------------------ */
.playlist-help {
    /* Define o espaço externo superior. Valor usado: 7vh. */
    margin-top: 7vh;
    /* Define o tamanho do texto. Valor usado: 1.45vw. */
    font-size: 1.45vw;
    /* Define a altura da linha. Valor usado: 1.5. */
    line-height: 1.5;
    /* Define a cor do texto/ícone. Valor usado: #fff. */
    color: #fff;
}
/* ------------------------------------------------------------
   SELETOR: .link-button
   FUNÇÃO: Botão com aparência de link.
   ------------------------------------------------------------ */
.link-button {
    /* Define o fundo completo. Valor usado: none. */
    background: none;
    /* Define borda completa. Valor usado: 0. */
    border: 0;
    /* Define a cor do texto/ícone. Valor usado: #8ab4ff. */
    color: #8ab4ff;
    /* Define o formato do cursor. Valor usado: pointer. */
    cursor: pointer;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 0. */
    padding: 0;
    /* Atalho para propriedades tipográficas. Valor usado: inherit. */
    font: inherit;
}
/* ------------------------------------------------------------
   REGRA: @media (max-width:700px)
   FUNÇÃO: Regra responsiva: aplica o bloco somente quando a condição de tela é atendida.
   ------------------------------------------------------------ */
@media (max-width:700px) {
    /* ------------------------------------------------------------
       SELETOR: .list-login-head h1
       FUNÇÃO: Título principal da tela de playlist.
       ------------------------------------------------------------ */
    .list-login-head h1 {
        /* Define o tamanho do texto. Valor usado: 6vw. */
        font-size: 6vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .back-button
       FUNÇÃO: Botão circular para voltar.
       ------------------------------------------------------------ */
    .back-button {
        /* Define a largura. Valor usado: 11vw. */
        width: 11vw;
        /* Define a altura. Valor usado: 11vw. */
        height: 11vw;
        /* Define o tamanho do texto. Valor usado: 5vw. */
        font-size: 5vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .playlist-form input
       FUNÇÃO: Campos do formulário de playlist.
       ------------------------------------------------------------ */
    .playlist-form input {
        /* Define o tamanho do texto. Valor usado: 4vw. */
        font-size: 4vw;
        /* Define o espaço interno entre conteúdo e bordas. Valor usado: 3vw. */
        padding: 3vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .playlist-actions button
       FUNÇÃO: Botões de salvar/entrar/cancelar.
       ------------------------------------------------------------ */
    .playlist-actions button {
        /* Define a largura mínima. Valor usado: 30vw. */
        min-width: 30vw;
        /* Define o tamanho do texto. Valor usado: 4vw. */
        font-size: 4vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .playlist-help
       FUNÇÃO: Texto de ajuda abaixo do formulário.
       ------------------------------------------------------------ */
    .playlist-help {
        /* Define o tamanho do texto. Valor usado: 3.5vw. */
        font-size: 3.5vw;
    }
}
/* PLAY PLAY 6.3 - teste gratuito e ativação */

/* ============================================================
   12. TESTE GRATUITO E ATIVAÇÃO
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .trial-banner
   FUNÇÃO: Faixa que informa o estado do teste gratuito.
   ------------------------------------------------------------ */
.trial-banner {
    /* Define o espaço externo superior. Valor usado: 2.2vh. */
    margin-top: 2.2vh;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 1.15vh 2vw. */
    padding: 1.15vh 2vw;
    /* Define borda completa. Valor usado: 1px solid rgba(255,255,255,.28). */
    border: 1px solid rgba(255,255,255,.28);
    /* Arredonda os cantos. Valor usado: 999px. */
    border-radius: 999px;
    /* Define o fundo completo. Valor usado: rgba(3,10,35,.72). */
    background: rgba(3,10,35,.72);
    /* Define o tamanho do texto. Valor usado: 1.25vw. */
    font-size: 1.25vw;
    /* Define a espessura do texto. Valor usado: 900. */
    font-weight: 900;
    /* Define o espaçamento entre letras. Valor usado: .04em. */
    letter-spacing: .04em;
    /* Define o alinhamento horizontal do texto. Valor usado: center. */
    text-align: center;
    /* Define a cor do texto/ícone. Valor usado: #fff. */
    color: #fff;
}
/* ------------------------------------------------------------
   SELETOR: .home-activation-code
   FUNÇÃO: Código de ativação exibido no rodapé central da Home.
   ------------------------------------------------------------ */
.home-activation-code {
    /* Define o método de posicionamento. Valor usado: absolute. */
    position: absolute;
    /* Posiciona a borda esquerda. Valor usado: 50%. */
    left: 50%;
    /* Posiciona a borda inferior. Valor usado: 2.2vh. */
    bottom: 2.2vh;
    /* Move, gira ou redimensiona visualmente. Valor usado: translateX(-50%). */
    transform: translateX(-50%);
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Define a direção dos itens Flex. Valor usado: column. */
    flex-direction: column;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: .25vh. */
    gap: .25vh;
    /* Define o alinhamento horizontal do texto. Valor usado: center. */
    text-align: center;
    /* Controla se o elemento recebe cliques/toques. Valor usado: none. */
    pointer-events: none;
}
/* ------------------------------------------------------------
   SELETOR: .home-activation-code span
   FUNÇÃO: Legenda do código de ativação.
   ------------------------------------------------------------ */
.home-activation-code span {
    /* Define o tamanho do texto. Valor usado: 1vw. */
    font-size: 1vw;
    /* Transforma maiúsculas/minúsculas. Valor usado: uppercase. */
    text-transform: uppercase;
    /* Define o espaçamento entre letras. Valor usado: .12em. */
    letter-spacing: .12em;
    /* Define a cor do texto/ícone. Valor usado: #dce7ff. */
    color: #dce7ff;
}
/* ------------------------------------------------------------
   SELETOR: .home-activation-code strong
   FUNÇÃO: Valor destacado do código.
   ------------------------------------------------------------ */
.home-activation-code strong {
    /* Define o tamanho do texto. Valor usado: 2.2vw. */
    font-size: 2.2vw;
    /* Define o espaçamento entre letras. Valor usado: .25vw. */
    letter-spacing: .25vw;
    /* Define a cor do texto/ícone. Valor usado: var(--accent). */
    color: var(--accent);
    /* Cria sombra no texto. Valor usado: 0 0 14px rgba(23,215,255,.7). */
    text-shadow: 0 0 14px rgba(23,215,255,.7);
}
/* ------------------------------------------------------------
   SELETOR: .activation-blocked
   FUNÇÃO: Tela de bloqueio por ativação.
   ------------------------------------------------------------ */
.activation-blocked {
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Distribui itens no eixo principal. Valor usado: center. */
    justify-content: center;
}
/* ------------------------------------------------------------
   SELETOR: .activation-lock
   FUNÇÃO: Cartão central da tela de bloqueio.
   ------------------------------------------------------------ */
.activation-lock {
    /* Define a largura. Valor usado: min(72vw,1000px). */
    width: min(72vw,1000px);
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 6vh 5vw. */
    padding: 6vh 5vw;
    /* Define borda completa. Valor usado: 2px solid var(--accent). */
    border: 2px solid var(--accent);
    /* Arredonda os cantos. Valor usado: 18px. */
    border-radius: 18px;
    /* Define o fundo completo. Valor usado: rgba(7,12,39,.95). */
    background: rgba(7,12,39,.95);
    /* Define o alinhamento horizontal do texto. Valor usado: center. */
    text-align: center;
    /* Cria sombra externa ou interna. Valor usado: 0 0 45px rgba(23,215,255,.23). */
    box-shadow: 0 0 45px rgba(23,215,255,.23);
}
/* ------------------------------------------------------------
   SELETOR: .activation-lock h1
   FUNÇÃO: Título do bloqueio.
   ------------------------------------------------------------ */
.activation-lock h1 {
    /* Define o tamanho do texto. Valor usado: 3.2vw. */
    font-size: 3.2vw;
    /* Define o espaço externo ao redor do elemento. Valor usado: 4vh 0 1.5vh. */
    margin: 4vh 0 1.5vh;
}
/* ------------------------------------------------------------
   SELETOR: .activation-lock p
   FUNÇÃO: Texto explicativo do bloqueio.
   ------------------------------------------------------------ */
.activation-lock p {
    /* Define o tamanho do texto. Valor usado: 1.5vw. */
    font-size: 1.5vw;
    /* Define a cor do texto/ícone. Valor usado: #dce7ff. */
    color: #dce7ff;
}
/* ------------------------------------------------------------
   SELETOR: .activation-lock>span
   FUNÇÃO: Legenda acima do código.
   ------------------------------------------------------------ */
.activation-lock>span {
    /* Escolhe o modelo de layout do elemento. Valor usado: block. */
    display: block;
    /* Define o espaço externo superior. Valor usado: 4vh. */
    margin-top: 4vh;
    /* Define o tamanho do texto. Valor usado: 1.1vw. */
    font-size: 1.1vw;
    /* Transforma maiúsculas/minúsculas. Valor usado: uppercase. */
    text-transform: uppercase;
    /* Define o espaçamento entre letras. Valor usado: .16em. */
    letter-spacing: .16em;
}
/* ------------------------------------------------------------
   SELETOR: .activation-lock-code
   FUNÇÃO: Código grande de ativação.
   ------------------------------------------------------------ */
.activation-lock-code {
    /* Define o espaço externo ao redor do elemento. Valor usado: 1vh 0 4vh. */
    margin: 1vh 0 4vh;
    /* Define o tamanho do texto. Valor usado: 6vw. */
    font-size: 6vw;
    /* Define a espessura do texto. Valor usado: 1000. */
    font-weight: 1000;
    /* Define o espaçamento entre letras. Valor usado: .7vw. */
    letter-spacing: .7vw;
    /* Define a cor do texto/ícone. Valor usado: var(--accent). */
    color: var(--accent);
    /* Cria sombra no texto. Valor usado: 0 0 22px rgba(23,215,255,.85). */
    text-shadow: 0 0 22px rgba(23,215,255,.85);
}
/* ------------------------------------------------------------
   SELETOR: .activation-lock button
   FUNÇÃO: Botão de ação da tela bloqueada.
   ------------------------------------------------------------ */
.activation-lock button {
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 1.4vh 2.5vw. */
    padding: 1.4vh 2.5vw;
    /* Arredonda os cantos. Valor usado: 9px. */
    border-radius: 9px;
    /* Define o fundo completo. Valor usado: var(--primary). */
    background: var(--primary);
    /* Define o tamanho do texto. Valor usado: 1.35vw. */
    font-size: 1.35vw;
    /* Define a espessura do texto. Valor usado: 900. */
    font-weight: 900;
}
/* ------------------------------------------------------------
   REGRA: @media (max-width:900px)
   FUNÇÃO: Regra responsiva: aplica o bloco somente quando a condição de tela é atendida.
   ------------------------------------------------------------ */
@media (max-width:900px) {
    /* ------------------------------------------------------------
       SELETOR: .trial-banner
       FUNÇÃO: Faixa que informa o estado do teste gratuito.
       ------------------------------------------------------------ */
    .trial-banner {
        /* Define o tamanho do texto. Valor usado: 1.8vw. */
        font-size: 1.8vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .home-activation-code span
       FUNÇÃO: Legenda do código de ativação.
       ------------------------------------------------------------ */
    .home-activation-code span {
        /* Define o tamanho do texto. Valor usado: 1.5vw. */
        font-size: 1.5vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .home-activation-code strong
       FUNÇÃO: Valor destacado do código.
       ------------------------------------------------------------ */
    .home-activation-code strong {
        /* Define o tamanho do texto. Valor usado: 3vw. */
        font-size: 3vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .activation-lock h1
       FUNÇÃO: Título do bloqueio.
       ------------------------------------------------------------ */
    .activation-lock h1 {
        /* Define o tamanho do texto. Valor usado: 4vw. */
        font-size: 4vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .activation-lock p
       FUNÇÃO: Texto explicativo do bloqueio.
       ------------------------------------------------------------ */
    .activation-lock p {
        /* Define o tamanho do texto. Valor usado: 2vw. */
        font-size: 2vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .activation-lock button
       FUNÇÃO: Botão de ação da tela bloqueada.
       ------------------------------------------------------------ */
    .activation-lock button {
        /* Define o tamanho do texto. Valor usado: 2vw. */
        font-size: 2vw;
    }
}
/* Aparência remota */

/* ============================================================
   13. APARÊNCIA REMOTA
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: html[data-menu-style=solid] .home-card
   FUNÇÃO: Tema remoto “solid” dos cartões da Home.
   ------------------------------------------------------------ */
html[data-menu-style=solid] .home-card {
    /* Define o fundo completo. Valor usado: var(--panel2). */
    background: var(--panel2);
    /* Aplica efeito visual ao conteúdo atrás do elemento. Valor usado: none. */
    backdrop-filter: none;
}
/* ------------------------------------------------------------
   SELETOR: html[data-menu-style=rounded] .home-card
   FUNÇÃO: Tema remoto “rounded” dos cartões da Home.
   ------------------------------------------------------------ */
html[data-menu-style=rounded] .home-card {
    /* Define o fundo completo. Valor usado: var(--panel2). */
    background: var(--panel2);
    /* Arredonda os cantos. Valor usado: 26px. */
    border-radius: 26px;
}
/* ------------------------------------------------------------
   SELETOR: html[data-menu-style=glass] .home-card
   FUNÇÃO: Tema remoto “glass” dos cartões da Home.
   ------------------------------------------------------------ */
html[data-menu-style=glass] .home-card {
    /* Define o fundo completo. Valor usado: var(--panel2). */
    background: var(--panel2);
    /* Aplica efeito visual ao conteúdo atrás do elemento. Valor usado: blur(12px). */
    backdrop-filter: blur(12px);
}
/* ------------------------------------------------------------
   SELETOR: body,.screen
   FUNÇÃO: Reaplica a cor de texto recebida pelo tema remoto.
   ------------------------------------------------------------ */
body,.screen {
    /* Define a cor do texto/ícone. Valor usado: var(--text,#fff). */
    color: var(--text,#fff);
}
/* PLAY PLAY Studio runtime */
/* ------------------------------------------------------------
   SELETOR: .screen.home
   FUNÇÃO: Garante contexto de posicionamento para widgets do Studio.
   ------------------------------------------------------------ */
.screen.home {
    /* Define o método de posicionamento. Valor usado: relative. */
    position: relative;
}
/* ------------------------------------------------------------
   SELETOR: .studio-runtime-layer
   FUNÇÃO: Camada onde renderStudioWidgets() posiciona widgets do Studio.
   ------------------------------------------------------------ */
.studio-runtime-layer {
    /* Define o método de posicionamento. Valor usado: absolute. */
    position: absolute;
    /* Atalho para top, right, bottom e left. Valor usado: 0. */
    inset: 0;
    /* Controla a ordem de sobreposição. Valor usado: 8. */
    z-index: 8;
    /* Controla se o elemento recebe cliques/toques. Valor usado: none. */
    pointer-events: none;
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: hidden. */
    overflow: hidden;
}
/* ------------------------------------------------------------
   SELETOR: .studio-runtime-widget
   FUNÇÃO: Cada widget visual inserido pelo Studio.
   ------------------------------------------------------------ */
.studio-runtime-widget {
    /* Define o método de posicionamento. Valor usado: absolute. */
    position: absolute;
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Define como largura e altura calculam borda e preenchimento. Valor usado: border-box. */
    box-sizing: border-box;
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: .25em. */
    padding: .25em;
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: hidden. */
    overflow: hidden;
    /* Define a altura da linha. Valor usado: 1.15. */
    line-height: 1.15;
    /* Define a espessura do texto. Valor usado: 700. */
    font-weight: 700;
    /* Cria sombra no texto. Valor usado: 0 2px 8px #0008. */
    text-shadow: 0 2px 8px #0008;
}
/* ------------------------------------------------------------
   SELETOR: .studio-runtime-widget img
   FUNÇÃO: Imagem dentro de um widget do Studio.
   ------------------------------------------------------------ */
.studio-runtime-widget img {
    /* Define a largura. Valor usado: 100%. */
    width: 100%;
    /* Define a altura. Valor usado: 100%. */
    height: 100%;
    /* Define como uma imagem se encaixa no espaço. Valor usado: contain. */
    object-fit: contain;
}
/* ------------------------------------------------------------
   SELETOR: .studio-anim-fade
   FUNÇÃO: Animação de entrada por opacidade.
   ------------------------------------------------------------ */
.studio-anim-fade {
    /* Aplica uma animação por keyframes. Valor usado: studioFade .55s ease both. */
    animation: studioFade .55s ease both;
}
/* ------------------------------------------------------------
   SELETOR: .studio-anim-slide
   FUNÇÃO: Animação de entrada deslizando de baixo.
   ------------------------------------------------------------ */
.studio-anim-slide {
    /* Aplica uma animação por keyframes. Valor usado: studioSlide .55s ease both. */
    animation: studioSlide .55s ease both;
}
/* ------------------------------------------------------------
   SELETOR: .studio-anim-zoom
   FUNÇÃO: Animação de entrada com zoom.
   ------------------------------------------------------------ */
.studio-anim-zoom {
    /* Aplica uma animação por keyframes. Valor usado: studioZoom .5s ease both. */
    animation: studioZoom .5s ease both;
}
/* ------------------------------------------------------------
   SELETOR: .studio-anim-pulse
   FUNÇÃO: Animação pulsante contínua.
   ------------------------------------------------------------ */
.studio-anim-pulse {
    /* Aplica uma animação por keyframes. Valor usado: studioPulse 2s ease-in-out infinite. */
    animation: studioPulse 2s ease-in-out infinite;
}
/* ------------------------------------------------------------
   REGRA: @keyframes studioFade
   FUNÇÃO: Quadros da animação fade.
   ------------------------------------------------------------ */
@keyframes studioFade {
    /* ------------------------------------------------------------
       SELETOR: from
       FUNÇÃO: Estiliza o(s) elemento(s) correspondente(s) a este seletor.
       ------------------------------------------------------------ */
    from {
        /* Define a transparência. Valor usado: 0. */
        opacity: 0;
    }
    /* ------------------------------------------------------------
       SELETOR: to
       FUNÇÃO: Estiliza o(s) elemento(s) correspondente(s) a este seletor.
       ------------------------------------------------------------ */
    to {
        /* Define a transparência. Valor usado: 1. */
        opacity: 1;
    }
}
/* ------------------------------------------------------------
   REGRA: @keyframes studioSlide
   FUNÇÃO: Quadros da animação slide.
   ------------------------------------------------------------ */
@keyframes studioSlide {
    /* ------------------------------------------------------------
       SELETOR: from
       FUNÇÃO: Estiliza o(s) elemento(s) correspondente(s) a este seletor.
       ------------------------------------------------------------ */
    from {
        /* Define a transparência. Valor usado: 0. */
        opacity: 0;
        /* Move, gira ou redimensiona visualmente. Valor usado: translateY(18px). */
        transform: translateY(18px);
    }
    /* ------------------------------------------------------------
       SELETOR: to
       FUNÇÃO: Estiliza o(s) elemento(s) correspondente(s) a este seletor.
       ------------------------------------------------------------ */
    to {
        /* Define a transparência. Valor usado: 1. */
        opacity: 1;
        /* Move, gira ou redimensiona visualmente. Valor usado: none. */
        transform: none;
    }
}
/* ------------------------------------------------------------
   REGRA: @keyframes studioZoom
   FUNÇÃO: Quadros da animação zoom.
   ------------------------------------------------------------ */
@keyframes studioZoom {
    /* ------------------------------------------------------------
       SELETOR: from
       FUNÇÃO: Estiliza o(s) elemento(s) correspondente(s) a este seletor.
       ------------------------------------------------------------ */
    from {
        /* Define a transparência. Valor usado: 0. */
        opacity: 0;
        /* Move, gira ou redimensiona visualmente. Valor usado: scale(.86). */
        transform: scale(.86);
    }
    /* ------------------------------------------------------------
       SELETOR: to
       FUNÇÃO: Estiliza o(s) elemento(s) correspondente(s) a este seletor.
       ------------------------------------------------------------ */
    to {
        /* Define a transparência. Valor usado: 1. */
        opacity: 1;
        /* Move, gira ou redimensiona visualmente. Valor usado: none. */
        transform: none;
    }
}
/* ------------------------------------------------------------
   REGRA: @keyframes studioPulse
   FUNÇÃO: Quadros da animação pulse.
   ------------------------------------------------------------ */
@keyframes studioPulse {
    /* ------------------------------------------------------------
       SELETOR: 50%
       FUNÇÃO: Estiliza o(s) elemento(s) correspondente(s) a este seletor.
       ------------------------------------------------------------ */
    50% {
        /* Move, gira ou redimensiona visualmente. Valor usado: scale(1.04). */
        transform: scale(1.04);
    }
}
/* PLAY PLAY 7 ALPHA 3 — Favoritos e temporadas */

/* ============================================================
   15. FAVORITOS E TEMPORADAS
   ============================================================ */

/* ------------------------------------------------------------
   SELETOR: .favorite-badge
   FUNÇÃO: Botão/medalha de favorito sobre pôsteres e canais.
   ------------------------------------------------------------ */
.favorite-badge {
    /* Define o método de posicionamento. Valor usado: absolute. */
    position: absolute;
    /* Posiciona a borda direita. Valor usado: .45rem. */
    right: .45rem;
    /* Posiciona a borda superior. Valor usado: .4rem. */
    top: .4rem;
    /* Controla a ordem de sobreposição. Valor usado: 3. */
    z-index: 3;
    /* Define a largura. Valor usado: 1.8rem. */
    width: 1.8rem;
    /* Define a altura. Valor usado: 1.8rem. */
    height: 1.8rem;
    /* Arredonda os cantos. Valor usado: 50%. */
    border-radius: 50%;
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Alinha itens no eixo transversal. Valor usado: center. */
    align-items: center;
    /* Distribui itens no eixo principal. Valor usado: center. */
    justify-content: center;
    /* Define o fundo completo. Valor usado: #071026cc. */
    background: #071026cc;
    /* Define a cor do texto/ícone. Valor usado: #9aa5bd. */
    color: #9aa5bd;
    /* Define o tamanho do texto. Valor usado: 1.15rem. */
    font-size: 1.15rem;
    /* Define borda completa. Valor usado: 1px solid #ffffff33. */
    border: 1px solid #ffffff33;
}
/* ------------------------------------------------------------
   SELETOR: .favorite-badge.active
   FUNÇÃO: Estado ativo do favorito.
   ------------------------------------------------------------ */
.favorite-badge.active {
    /* Define a cor do texto/ícone. Valor usado: #ffd84d. */
    color: #ffd84d;
    /* Define o fundo completo. Valor usado: #111a33e8. */
    background: #111a33e8;
    /* Cria sombra no texto. Valor usado: 0 0 10px #ffd84d. */
    text-shadow: 0 0 10px #ffd84d;
}
/* ------------------------------------------------------------
   SELETOR: .poster,.channel-row
   FUNÇÃO: Cria referência de posicionamento para a medalha de favorito.
   ------------------------------------------------------------ */
.poster,.channel-row {
    /* Define o método de posicionamento. Valor usado: relative. */
    position: relative;
}
/* ------------------------------------------------------------
   SELETOR: .channel-row .favorite-badge
   FUNÇÃO: Adapta o favorito para ficar dentro da linha do canal.
   ------------------------------------------------------------ */
.channel-row .favorite-badge {
    /* Define o método de posicionamento. Valor usado: static. */
    position: static;
    /* Define o espaço externo à esquerda. Valor usado: auto. */
    margin-left: auto;
    /* Define o fundo completo. Valor usado: transparent. */
    background: transparent;
    /* Define borda completa. Valor usado: 0. */
    border: 0;
}
/* ------------------------------------------------------------
   SELETOR: .favorite-toast
   FUNÇÃO: Aviso temporário exibido ao adicionar/remover favorito.
   ------------------------------------------------------------ */
.favorite-toast {
    /* Define o método de posicionamento. Valor usado: fixed. */
    position: fixed;
    /* Controla a ordem de sobreposição. Valor usado: 99999. */
    z-index: 99999;
    /* Posiciona a borda esquerda. Valor usado: 50%. */
    left: 50%;
    /* Posiciona a borda inferior. Valor usado: 8vh. */
    bottom: 8vh;
    /* Move, gira ou redimensiona visualmente. Valor usado: translateX(-50%). */
    transform: translateX(-50%);
    /* Define o espaço interno entre conteúdo e bordas. Valor usado: 1rem 1.5rem. */
    padding: 1rem 1.5rem;
    /* Arredonda os cantos. Valor usado: .7rem. */
    border-radius: .7rem;
    /* Define o fundo completo. Valor usado: #0d1736f2. */
    background: #0d1736f2;
    /* Define a cor do texto/ícone. Valor usado: #fff. */
    color: #fff;
    /* Define borda completa. Valor usado: 1px solid #ffffff44. */
    border: 1px solid #ffffff44;
    /* Define o tamanho do texto. Valor usado: 1.25rem. */
    font-size: 1.25rem;
    /* Cria sombra externa ou interna. Valor usado: 0 12px 40px #000b. */
    box-shadow: 0 12px 40px #000b;
}
/* ------------------------------------------------------------
   SELETOR: .library-help
   FUNÇÃO: Texto curto de ajuda da biblioteca.
   ------------------------------------------------------------ */
.library-help {
    /* Define a transparência. Valor usado: .72. */
    opacity: .72;
    /* Define o espaço externo ao redor do elemento. Valor usado: -.6rem 0 .8rem. */
    margin: -.6rem 0 .8rem;
    /* Define o tamanho do texto. Valor usado: .9rem. */
    font-size: .9rem;
}
/* ------------------------------------------------------------
   SELETOR: .series-modal
   FUNÇÃO: Modal de temporadas e episódios criado por seriesInfo() em app.js.
   ------------------------------------------------------------ */
.series-modal {
    /* Define a largura. Valor usado: min(92vw,980px). */
    width: min(92vw,980px);
    /* Define a altura máxima. Valor usado: 86vh. */
    max-height: 86vh;
    /* Escolhe o modelo de layout do elemento. Valor usado: grid. */
    display: grid;
    /* Define quantidade e largura das colunas do Grid. Valor usado: 220px 1fr. */
    grid-template-columns: 220px 1fr;
    /* Define quantidade e altura das linhas do Grid. Valor usado: auto 1fr auto. */
    grid-template-rows: auto 1fr auto;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: .8rem. */
    gap: .8rem;
}
/* ------------------------------------------------------------
   SELETOR: .series-modal h2
   FUNÇÃO: Título do modal de série.
   ------------------------------------------------------------ */
.series-modal h2 {
    /* Define em qual coluna do Grid o elemento fica. Valor usado: 1/-1. */
    grid-column: 1/-1;
    /* Define o espaço externo ao redor do elemento. Valor usado: .2rem 0. */
    margin: .2rem 0;
}
/* ------------------------------------------------------------
   SELETOR: .season-tabs
   FUNÇÃO: Lista de temporadas.
   ------------------------------------------------------------ */
.season-tabs {
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: auto. */
    overflow: auto;
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Define a direção dos itens Flex. Valor usado: column. */
    flex-direction: column;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: .35rem. */
    gap: .35rem;
}
/* ------------------------------------------------------------
   SELETOR: .episode-list
   FUNÇÃO: Área rolável dos episódios.
   ------------------------------------------------------------ */
.episode-list {
    /* Controla o conteúdo que ultrapassa os limites. Valor usado: auto. */
    overflow: auto;
    /* Define a altura mínima. Valor usado: 38vh. */
    min-height: 38vh;
    /* Define a altura máxima. Valor usado: 58vh. */
    max-height: 58vh;
}
/* ------------------------------------------------------------
   SELETOR: .season-panel
   FUNÇÃO: Agrupamento vertical das linhas de episódio.
   ------------------------------------------------------------ */
.season-panel {
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Define a direção dos itens Flex. Valor usado: column. */
    flex-direction: column;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: .35rem. */
    gap: .35rem;
}
/* ------------------------------------------------------------
   SELETOR: .episode-row
   FUNÇÃO: Linha clicável de episódio.
   ------------------------------------------------------------ */
.episode-row {
    /* Escolhe o modelo de layout do elemento. Valor usado: flex. */
    display: flex;
    /* Define o espaço entre itens de Grid/Flex. Valor usado: 1rem. */
    gap: 1rem;
    /* Define o alinhamento horizontal do texto. Valor usado: left. */
    text-align: left;
}
/* ------------------------------------------------------------
   SELETOR: .close-series
   FUNÇÃO: Botão de fechar o modal de temporadas.
   ------------------------------------------------------------ */
.close-series {
    /* Define em qual coluna do Grid o elemento fica. Valor usado: 1/-1. */
    grid-column: 1/-1;
}
/* ------------------------------------------------------------
   REGRA: @media (max-width:720px)
   FUNÇÃO: Regra responsiva: aplica o bloco somente quando a condição de tela é atendida.
   ------------------------------------------------------------ */
@media (max-width:720px) {
    /* ------------------------------------------------------------
       SELETOR: .series-modal
       FUNÇÃO: Modal de temporadas e episódios criado por seriesInfo() em app.js.
       ------------------------------------------------------------ */
    .series-modal {
        /* Define quantidade e largura das colunas do Grid. Valor usado: 1fr. */
        grid-template-columns: 1fr;
    }
    /* ------------------------------------------------------------
       SELETOR: .season-tabs
       FUNÇÃO: Lista de temporadas.
       ------------------------------------------------------------ */
    .season-tabs {
        /* Define a direção dos itens Flex. Valor usado: row. */
        flex-direction: row;
        /* Define a largura máxima. Valor usado: 85vw. */
        max-width: 85vw;
    }
    /* ------------------------------------------------------------
       SELETOR: .close-series
       FUNÇÃO: Botão de fechar o modal de temporadas.
       ------------------------------------------------------------ */
    .close-series {
        /* Define em qual coluna do Grid o elemento fica. Valor usado: 1. */
        grid-column: 1;
    }
}