/* Reset e Configurações Globais */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Evita barras de rolagem indesejadas na TV */
    /* Adiciona suporte para Safe Area (Overscan) em TVs modernas */
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #121212; /* Cor de fundo escura */
    color: #E0E0E0; /* Cor de texto clara */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* Fonte base grande para legibilidade a 3m de distância */
    font-size: 24px; 
}

.container {
    width: 100%;
    max-width: 480px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Esconde elementos */
.hidden {
    display: none !important; /* Garante que o elemento seja escondido */
}

/* Estilos para o contêiner de depuração na tela */
#debug-output {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #121212;
    color: #ff4d4d; /* Cor vermelha para erros */
    font-family: monospace;
    font-size: 18px;
    padding: 20px;
    z-index: 9999; /* Garante que fique acima de tudo */
    overflow: auto;
    display: none; /* Escondido por padrão */
    border: 5px solid #ff4d4d;
}

/* Splash Screen Inicial */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #121212; /* Fundo sólido igual ao do body */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5000; /* O mais alto na pilha */
}

/* --- ANIMAÇÃO DE INTRODUÇÃO (ESTILO NETFLIX) --- */
#intro-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 6000; /* Acima do splash screen */
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform, opacity; /* Otimização de performance */
    animation: introZoom 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.intro-logo svg {
    width: 150px;
    height: 150px;
    fill: #00A1E0;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 30px rgba(0, 161, 224, 0.8));
}

.intro-logo span {
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 6px;
    color: #fff;
    text-transform: uppercase;
}

@keyframes introZoom {
    0% { transform: scale(0.8); opacity: 0; }
    20% { transform: scale(1); opacity: 1; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(5); opacity: 0; }
}

/* Tela de Carregamento (Spinner) */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.8); /* Fundo escuro semi-transparente */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Garante que fique por cima de tudo */
}

#loading-text {
    margin-top: 20px;
    font-size: 1.5rem;
    color: #E0E0E0;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

#loading-progress-container {
    width: 60%;
    max-width: 400px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-top: 15px;
    overflow: hidden;
}

#loading-progress-bar {
    height: 100%;
    width: 0%;
    background-color: #00A1E0;
    transition: width 0.3s ease;
}

/* Notificações Toast (Substitui alert) */
#toast-container {
    position: fixed;
    top: 30px; /* UX: Movido para o topo para não cobrir legendas/controles */
    right: 30px; /* UX: Canto direito é padrão para notificações */
    left: auto;
    transform: none;
    z-index: 6000;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

#toast-container > * { margin-bottom: 10px; }
#toast-container > *:last-child { margin-bottom: 0; }

.toast-message {
    background-color: rgba(50, 50, 50, 0.95);
    color: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    border-left: 5px solid #00A1E0;
    font-size: 1.2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); /* Sombra mais forte para destacar do fundo */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.toast-message.show {
    opacity: 1;
}

.spinner {
    width: 80px;
    height: 80px;
    border: 8px solid #555;
    border-top-color: #00A1E0; /* Cor de destaque do foco */
    border-radius: 50%;
    will-change: transform;
    animation: spin 1s linear infinite;
}

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

/* Formulário de Login */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

#login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.login-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #2a2a2a 0%, #000000 100%);
    z-index: -1;
    animation: fadeIn 0.8s ease-out;
}

.login-box {
    background-color: rgba(30, 30, 30, 0.95); /* Fallback mais sólido para performance */
    /* backdrop-filter movido para @supports abaixo */
    padding: 3rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform, opacity;
    animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Aplica blur apenas se o navegador suportar, economizando GPU em dispositivos antigos */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .login-box {
        background-color: rgba(30, 30, 30, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

.login-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    color: #00A1E0;
}

.login-logo svg {
    width: 80px;
    height: 80px;
    fill: #00A1E0;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 10px rgba(0, 161, 224, 0.4));
}

.login-logo span {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff;
}

#login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#login-form > * { margin-bottom: 1.5rem; }
#login-form > *:last-child { margin-bottom: 0; }

h1, h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Labels escondidas visualmente, mas acessíveis para leitores de tela */
.input-group label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
button {
    width: 100%;
    padding: 1rem;
    font-size: 1.2rem;
    border-radius: 8px;
    border: 2px solid #555;
    background-color: #333;
    color: #E0E0E0;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Grupo de Senha com Botão Toggle */
.password-group {
    position: relative;
}

#toggle-password {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    width: 50px;
    height: auto;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #888;
}

#toggle-password svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

#toggle-password:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #00A1E0;
    box-shadow: none;
}

input::placeholder {
    color: #888;
}

/* --- ESTADO DE FOCO: ESSENCIAL PARA TV --- */
input:focus,
button:focus {
    outline: none;
    border-color: #00A1E0; /* Cor de destaque (azul) */
    box-shadow: none; /* OTIMIZAÇÃO: Removido para performance */
    background-color: #444;
}

button:disabled {
    background-color: #555;
    cursor: not-allowed;
}

button {
    cursor: pointer;
    background-color: #007BFF;
    border-color: #007BFF;
    font-weight: bold;
    color: #fff;
}

button:focus {
    background-color: #0056b3;
    border-color: #00A1E0;
}

#category-selection-container {
    max-width: 1400px; /* Mais largo para acomodar os cartões */
    width: 90%;
}

#category-selection-container > * { margin-bottom: 2.5rem; }
#category-selection-container > *:last-child { margin-bottom: 0; }

.category-options {
    display: flex;
    justify-content: center;
    width: 100%;
}

.category-button {
    flex-grow: 1; /* Faz os botões preencherem o espaço */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    height: 220px; /* Altura fixa para uniformidade */
    font-size: 1.5rem;
    font-weight: bold;
    background: linear-gradient(145deg, #2a2a2a, #1f1f1f);
    border: 2px solid #444;
    border-radius: 16px;
    color: #E0E0E0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    will-change: transform; /* Prepara para o scale no hover/focus */
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-right: 2rem;
}

.category-button:last-child {
    margin-right: 0;
}

.category-button svg {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    fill: #E0E0E0;
    transition: transform 0.2s ease;
}

/* Reutiliza o mesmo estilo de foco para consistência */
.category-button:focus {
    outline: none;
    border-color: #fff;
    background: linear-gradient(145deg, #00A1E0, #007BFF);
    color: #fff;
    box-shadow: none; /* OTIMIZAÇÃO: Removido para performance */
    transform: scale(1.1); /* Aumenta um pouco mais para destaque */
    z-index: 10;
}

.category-button:focus svg {
    fill: #fff;
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

#user-info-display {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2.5rem;
    background: linear-gradient(145deg, #232323, #1a1a1a);
    border: 1px solid #333;
    border-radius: 16px;
    margin-bottom: 3rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

#user-info-display > * { margin-right: 2rem; }
#user-info-display > *:last-child { margin-right: 0; }

.user-info-item {
    display: flex;
    align-items: center;
}

#user-info-item > * { margin-right: 12px; }
#user-info-item > *:last-child { margin-right: 0; }

.user-info-item svg {
    width: 28px;
    height: 28px;
    fill: #00A1E0;
    filter: drop-shadow(0 0 5px rgba(0, 161, 224, 0.4));
}

#user-info-display .username {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.5px;
}

#user-info-display .expiration {
    font-size: 1.2rem;
    color: #bbb;
    font-weight: 500;
}

#user-info-display .expiration.unlimited {
    color: #4CAF50; /* Verde para status ilimitado */
    text-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

#user-info-display .expiration.expiring-soon {
    color: #FF5252; /* Vermelho para vencimento próximo */
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 82, 82, 0.3);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

#no-content-message {
    font-size: 1.5rem;
    color: #888;
    margin: 2rem 0;
    text-align: center;
}

/* --- WIDGET DE SPEED TEST NA TELA INICIAL --- */
.speed-test-widget {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    min-width: 300px;
}

.speed-test-widget > * { margin-right: 1rem; }
.speed-test-widget > *:last-child { margin-right: 0; }

#speedtest-button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    width: auto;
    background-color: #333;
    border: 1px solid #555;
}

#speedtest-button:focus {
    background-color: #00A1E0;
    border-color: #fff;
}

.speed-results {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.speed-results > * { margin-bottom: 4px; }
.speed-results > *:last-child { margin-bottom: 0; }

.speed-progress-bg {
    height: 6px;
    background-color: #444;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
    margin-top: 4px;
}

.speed-progress-fill {
    height: 100%;
    background-color: #00A1E0;
    width: 0%;
    transition: width 0.2s ease;
}

.speed-text {
    font-size: 0.9rem;
    color: #ccc;
    display: flex;
    justify-content: space-between;
}

#logout-button {
    margin-top: 2rem;
    max-width: 250px; /* Botão de sair um pouco menor */
}

/* --- TELA DE EXIBIÇÃO DE CONTEÚDO (3 COLUNAS) --- */

#content-display-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    /* padding: 2rem; -- Removido para dar controle total aos filhos */
    background-color: #121212;
}

.content-grid {
    display: flex;
    flex-grow: 1;
    min-height: 0;
    /* height: auto; foi removido para permitir que as colunas rolem independentemente */
    padding: 0 2rem 2rem; /* Adiciona padding lateral e inferior */
}

.content-grid > * { margin-right: 1.5rem; }
.content-grid > *:last-child { margin-right: 0; }

.content-column {
    display: flex;
    flex-direction: column;
    background-color: #1A1A1A;
    border-radius: 8px;
    overflow-y: auto;
    /* Esconde a barra de rolagem mas permite rolar */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overscroll-behavior: contain; /* Evita que a rolagem afete o body */
    /* UX: Sombra interna para indicar rolagem (Scroll Hint) */
    box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.5), inset 0 -10px 10px -10px rgba(0,0,0,0.5);
    position: relative;
    will-change: scroll-position;
    backface-visibility: hidden;
}

.content-column::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

#categories-list { flex: 0 0 25%; }
#channels-list { flex: 0 0 35%; }
#player-area { 
    flex: 1 1 40%; 
    background-color: transparent; 
    overflow: hidden;
    /* We want the player to take up space, and the EPG to scroll if needed */
    flex-shrink: 0;
}

/* --- TELA DE FILMES (VOD) E SÉRIES --- */
#movie-categories-list,
#series-categories-list {
    flex: 0 0 33.33%;
}

#movie-grid-area,
#series-grid-area {
    flex: 1 1 66.67%;
    padding: 1rem;
    outline: none; /* Permite focar na área para navegação */
    display: block;
    position: relative;
    overflow-y: auto;
}

.movie-poster-item {
    aspect-ratio: 2 / 3; /* Proporção clássica de pôster */
    background-color: #333;
    border-radius: 8px;
    overflow: hidden;
    will-change: box-shadow; /* Transform removido para economizar memória, já que não usamos scale no foco */
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    border: 4px solid transparent; /* Borda base para evitar pulo de layout no foco */
    /* Adicionado para conter os elementos de sobreposição */
    position: relative;
    display: flex;
    height: 350px;
    width: 100%;
    contain: layout paint style; /* OTIMIZAÇÃO: Isola o render deste item do resto da página */
}

/* Efeito Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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


.movie-poster-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #2c2c2c;
}

.movie-poster-item:focus {
    outline: none;
    /* OTIMIZAÇÃO: Border-color é mais leve que box-shadow em GPUs fracas */
    border-color: #00A1E0;
    box-shadow: none;
    z-index: 20;
    position: relative;
}

/* Indicador de "assistido" para filmes */
.movie-poster-item.watched::before {
    content: '✔';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    background-color: #4CAF50; /* Verde */
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    z-index: 10; /* Acima da imagem, abaixo do foco */
    box-shadow: 0 0 8px rgba(0,0,0,0.7);
}
.movie-poster-item.watched img {
    filter: brightness(0.6);
}

.movie-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 0.75rem 0.75rem;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Gradiente para legibilidade do texto sobre a imagem */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}

.movie-poster-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 5;
}

.movie-poster-progress-bar {
    height: 100%;
    background-color: #00A1E0;
    width: 0%;
}

.movie-rating-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    font-weight: bold;
    color: #FFD700; /* Cor dourada para a nota */
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
}

#player-container {
    width: 100%;
    flex-shrink: 0; /* Prevent the player from shrinking */
    /* Força uma proporção de 16:9, estabilizando o layout e prevenindo o loop de redimensionamento. */
    aspect-ratio: 16 / 9;
    background-color: #000; /* Fundo preto enquanto o vídeo carrega */
    border-radius: 8px;
    position: relative; /* Para conter o placeholder e o vídeo */
}

#epg-info {
    margin-top: 0;
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
    /* Esconde a barra de rolagem mas permite rolar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#epg-info::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.epg-program {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
}

.epg-program:last-child {
    border-bottom: none;
}

.epg-full-item {
    padding: 1rem;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: flex-start;
}

.epg-full-item > * { margin-right: 1rem; }
.epg-full-item > *:last-child { margin-right: 0; }

.epg-full-item.current {
    background-color: rgba(0, 161, 224, 0.1);
    border-left: 4px solid #00A1E0;
}

.epg-full-time {
    font-weight: bold;
    color: #00A1E0;
    min-width: 110px;
    font-size: 1.1rem;
}

/* --- NOVA INTERFACE EPG (TIMELINE) --- */
.epg-timeline-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #121212;
    overflow: hidden;
}

.epg-description-panel {
    height: 130px;
    background-color: #1A1A1A;
    border-bottom: 1px solid #333;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 5;
}

.epg-description-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.5rem;
}

.epg-description-meta {
    font-size: 1rem;
    color: #00A1E0;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.epg-description-text {
    font-size: 1.1rem;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epg-timeline-header {
    display: flex;
    height: 50px;
    background-color: #1F1F1F;
    border-bottom: 1px solid #333;
    align-items: center;
    color: #aaa;
    font-size: 0.9rem;
    overflow: hidden;
}

.epg-time-marker {
    flex: 0 0 300px; /* 1 hora = 300px (5px por minuto) */
    border-left: 1px solid #444;
    padding-left: 8px;
    font-weight: bold;
}

.epg-content-area {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.epg-sidebar {
    display: none !important;
}

.epg-channel-header {
    position: sticky;
    left: 0;
    z-index: 10; /* Fica acima dos programas ao rolar para a direita */
    width: 280px; /* Largura fixa */
    min-width: 280px;
    background-color: #1A1A1A; /* Fundo sólido para cobrir o que passa por baixo */
    border-right: 1px solid #333;
    height: 100%; /* Herda a altura exata da linha */
    display: flex;
    align-items: center;
    padding: 0 1rem;
    box-shadow: 2px 0 5px rgba(0,0,0,0.5); /* Sombra para separar da grade */
    font-size: 1.1rem;
    font-weight: bold;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.epg-channel-header:focus {
    outline: none; /* Remove o outline padrão que estava sendo cortado */
    background: linear-gradient(90deg, #00A1E0 0%, #007BFF 100%); /* Fundo azul destaque */
    color: #fff;
    /* Truque Vital: Sombra interna para simular borda que não é cortada */
    box-shadow: inset 0 0 0 3px #fff; 
    z-index: 20; /* Garante que fique acima de outros elementos */
    position: sticky; /* Mantém a propriedade sticky */
}

.epg-channel-logo-sidebar {
    height: 50px;
    width: 50px;
    object-fit: contain;
    margin-right: 10px;
    flex-shrink: 0;
}

.epg-grid-container {
    flex: 1;
    overflow: auto;
    position: relative;
    background-color: #121212;
}

.epg-grid-row {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box !important;
    contain: size layout paint;
    position: relative;
    border-bottom: 1px solid #333;
    display: flex;
    flex-wrap: nowrap;
}

.epg-program-block {
    position: absolute;
    height: 100%;
    background-color: #252525;
    border-right: 1px solid #121212;
    padding: 8px 12px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 1rem;
    color: #ccc;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background-color 0.2s, transform 0.2s;
}

.epg-program-block:focus {
    background-color: #00A1E0; /* Mantém azul */
    color: #fff;
    z-index: 10;
    outline: none; /* Remove o outline externo que corta */
    /* A Mágica: Borda interna branca de 2px que nunca corta */
    box-shadow: inset 0 0 0 2px #fff; 
}

/* Linha de Tempo Atual (EPG) */
.epg-current-time-line {
    position: absolute;
    top: 0;
    width: 2px;
    background-color: #FF0000;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.8);
}

.epg-program-block:focus .epg-program-time { color: #eee; }

.epg-program-title { font-weight: bold; display: block; margin-bottom: 4px; }
.epg-program-time { font-size: 0.85rem; color: #aaa; display: block; }

.epg-time {
    font-size: 1rem;
    color: #aaa;
}

.epg-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0.25rem 0;
}

.epg-program.current .epg-title {
    color: #00A1E0; /* Highlight current program */
}

.epg-progress-bar-container {
    background-color: #444;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.epg-progress-bar {
    background-color: #00A1E0;
    height: 100%;
    width: 0%; /* Será definido pelo JS */
}

.list-item {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.2rem;
    font-size: 1.3rem;
    border-bottom: 1px solid #333;
    cursor: pointer;
    will-change: transform;
    transition: transform 0.15s ease-out;
    overflow: hidden; /* Garante que o conteúdo (como o efeito de scale) não vaze */
    flex-shrink: 0; /* Garante que itens de listas longas mantenham sua altura */
    contain: layout; /* OTIMIZAÇÃO: Melhora performance em listas longas (Canais/EPG) */
    min-height: 72px;
    transform: translateZ(0);
    border-left: 4px solid transparent; /* Prepara para o estado de foco */
}

.list-item > * { margin-right: 1rem; }
.list-item > *:last-child { margin-right: 0; }

.channel-logo {
    width: 48px;
    height: 48px;
    object-fit: contain; /* Garante que o logo não seja distorcido */
    flex-shrink: 0; /* Impede que o logo encolha */
    background-color: transparent; /* Fundo caso a imagem seja transparente ou demore a carregar */
    border-radius: 4px;
}

.channel-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    overflow: hidden;
    margin-left: 1rem;
}

.channel-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #E0E0E0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel-current-program {
    font-size: 0.9rem;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
    min-height: 1.1em; /* Garante altura mesmo sem texto */
}

.channel-progress-bg {
    height: 4px;
    background-color: #333;
    width: 100%;
    margin-top: 6px;
    border-radius: 2px;
    overflow: hidden;
    display: none;
}

.channel-progress-fill {
    height: 100%;
    background-color: #00A1E0;
    width: 0%;
}

.list-item:last-child {
    border-bottom: none;
}

.list-item.selected {
    background-color: #2c2c2c;
    font-weight: bold;
}

.list-item:focus {
    outline: none;
    background: linear-gradient(90deg, #00A1E0 0%, #007BFF 100%); /* Gradiente para visual mais moderno */
    color: #fff;
    transform: scale(1.02) translateX(10px); /* Move levemente para a direita para dar sensação de seleção */
    border-left-color: #fff; /* Indicador visual extra */
    box-shadow: none;
    z-index: 10;
    position: relative;
}

#player-container .player-placeholder {
    width: 100%;
    height: 100%;
    background: #000 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3e%3cpath d='M8 5v14l11-7z'/%3e%3c/svg%3e") center no-repeat;
    background-size: 20%;
    border: 2px dashed #333;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
}

/* Estilo para o player de vídeo para manter a proporção correta na coluna */
#player-container video {
    width: 100%;
    height: 100%; /* O vídeo preenche o contêiner que já tem a proporção correta */
    background-color: #000;
    border-radius: 8px;
    cursor: pointer; /* Indica que o player é clicável para tela cheia */
}

/* Classe para o modo tela cheia */
#player-container video.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000; /* Garante que o vídeo fique acima de tudo */
    border-radius: 0;
    /* Remove o cursor de ponteiro em tela cheia */
    cursor: default; 
}

.epg-no-data {
    font-size: 1.1rem;
    color: #888;
    text-align: center;
    padding-top: 2rem;
}

/* --- TELA DE DETALHES DO FILME --- */
#movie-details-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

/* Efeito de blur e escurecimento no fundo */
#movie-details-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(18, 18, 18, 0.8);
    /* backdrop-filter removido aqui para evitar lag excessivo em tela cheia, usar fallback sólido ou @supports se necessário */
    /* backdrop-filter: blur(15px) saturate(120%); */
    z-index: -1;
}

.movie-details-content {
    display: flex;
    max-width: 1400px;
    width: 90%;
    padding: 2rem;
}

.movie-details-content > * { margin-right: 3rem; }
.movie-details-content > *:last-child { margin-right: 0; }

.movie-details-poster {
    flex: 0 0 320px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.movie-details-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.movie-details-info {
    display: flex;
    flex-direction: column;
    color: #E0E0E0;
}

.movie-details-info > * { margin-bottom: 1.5rem; }
.movie-details-info > *:last-child { margin-bottom: 0; }

.movie-details-info h2 {
    font-size: 3.5rem;
    text-align: left;
    margin-bottom: 0;
}

.movie-details-info .info-block,
.series-details-info .info-block {
    font-size: 1.1rem;
}

.movie-details-info .info-block strong,
.series-details-info .info-block strong {
    color: #aaa;
}

.movie-details-info .info-block span,
.series-details-info .info-block span {
    color: #E0E0E0;
}

.movie-details-meta {
    font-size: 1.1rem;
    color: #ccc;
    display: flex;
}

.movie-details-meta > * { margin-right: 1rem; }
.movie-details-meta > *:last-child { margin-right: 0; }

.movie-details-plot {
    font-size: 1.2rem;
    line-height: 1.6;
    max-height: 240px; /* Limita a altura e permite scroll se necessário */
    overflow-y: auto;
    padding-right: 1rem; /* Espaço para a barra de rolagem (se aparecer) */
}

.movie-details-plot:focus {
    outline: 2px solid #00A1E0;
    border-radius: 4px;
    box-shadow: none; /* OTIMIZAÇÃO: Removido para performance */
}

.movie-details-actions {
    display: flex;
    margin-top: auto; /* Empurra os botões para baixo */
}

.movie-details-actions > * { margin-right: 1.5rem; }
.movie-details-actions > *:last-child { margin-right: 0; }

.series-details-actions {
    display: flex;
    margin-top: 1rem;
}

.series-details-actions > * { margin-right: 1.5rem; }
.series-details-actions > *:last-child { margin-right: 0; }

.movie-details-actions button,
.series-details-actions button {
    padding: 1rem 2.5rem;
    font-size: 1.3rem;
}

/* --- TELA DE DETALHES DA SÉRIE --- */
#series-details-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    padding: 2rem;
}

/* Reutiliza o mesmo efeito de fundo da tela de filmes */
#series-details-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(18, 18, 18, 0.8);
    z-index: -1;
}

@supports (backdrop-filter: blur(15px)) {
    #movie-details-container::before, #series-details-container::before {
        backdrop-filter: blur(15px) saturate(120%);
    }
}

.series-details-header {
    display: flex;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    flex-shrink: 0;
}

.series-details-header > * { margin-right: 3rem; }
.series-details-header > *:last-child { margin-right: 0; }

.series-details-poster {
    flex: 0 0 300px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.series-details-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.series-details-info {
    display: flex;
    flex-direction: column;
    color: #E0E0E0;
    max-width: 60%;
}

.series-details-info > * { margin-bottom: 1.5rem; }
.series-details-info > *:last-child { margin-bottom: 0; }

.series-details-info h2 {
    font-size: 3.5rem;
    text-align: left;
    margin-bottom: 0;
}

.series-details-plot {
    font-size: 1.2rem;
    line-height: 1.6;
    max-height: 150px; /* Limita a altura e permite scroll se necessário */
    overflow-y: auto;
    padding-right: 1rem; /* Espaço para a barra de rolagem (se aparecer) */
}

.series-content-area {
    display: flex;
    width: 100%;
    max-width: 1600px;
    margin: 2rem auto 0;
    flex-grow: 1;
    min-height: 0;
}

.series-content-area > * { margin-right: 1.5rem; }
.series-content-area > *:last-child { margin-right: 0; }

.season-list {
    flex: 0 0 25%;
    background-color: rgba(26, 26, 26, 0.8);
    border-radius: 8px;
    overflow-y: auto;
}

.episode-list {
    flex: 1 1 75%;
    background-color: rgba(26, 26, 26, 0.8);
    border-radius: 8px;
    overflow-y: auto;
}

.season-list .list-item,
.episode-list .list-item {
    background-color: transparent;
}

/* Indicador de episódio assistido */
.episode-list .list-item.watched span {
    color: #888; /* Torna o texto cinza */
}

.episode-list .list-item.watched::after {
    content: '✔'; /* Adiciona um ícone de check */
    color: #4CAF50; /* Cor verde */
    font-weight: bold;
    margin-left: auto; /* Empurra para a direita */
    padding-left: 1rem;
}

/* --- INTERFACE DE BUSCA --- */
/* A especificidade aumentada (ID + classe) garante que o display:flex sobrescreva o display:grid do ID */
#movie-grid-area.search-container,
#series-grid-area.search-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#search-input {
    width: 100%;
    padding: 1rem;
    font-size: 1.5rem;
    border-radius: 8px;
    border: 2px solid #555;
    background-color: #333;
    color: #E0E0E0;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

#search-input:focus {
    outline: none;
    border-color: #00A1E0;
    box-shadow: none; /* OTIMIZAÇÃO: Removido para performance */
    background-color: #444;
}

#search-results-grid, #movie-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1.5rem;
    align-content: flex-start;
    overflow-y: auto;
    padding-right: 1rem; /* Espaço para a barra de rolagem */
}

/* --- BARRA SUPERIOR (TOP BAR) --- */
#top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 2rem;
    flex-shrink: 0;
    height: 90px;
    background: linear-gradient(to bottom, #2a2a2a, #151515);
    border-bottom: 1px solid #333;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    z-index: 10;
}

.top-bar-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.top-bar-center {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-bar-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.top-bar-right > * { margin-right: 1rem; }
.top-bar-right > *:last-child { margin-right: 0; }

#site-name {
    font-size: 1.8rem;
    font-weight: bold;
    color: #00A1E0;
    text-shadow: 0 2px 10px rgba(0, 161, 224, 0.3);
    letter-spacing: 1px;
}

#page-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

#app-clock {
    font-size: 1.2rem;
    color: #aaa;
    font-weight: bold;
    margin-right: 1.5rem;
    font-variant-numeric: tabular-nums; /* Evita que os números pulem ao mudar */
}

#global-search-input {
    width: 100%;
    max-width: 300px;
    text-align: left;
    margin: 0;
    flex: unset;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    border-radius: 50px;
    padding: 0.6rem 1.2rem;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave */
    font-size: 1rem;
}

#global-search-input:focus {
    width: 100%; /* Garante largura total */
    background-color: #fff; /* Fundo claro para alto contraste ao digitar */
    color: #000; /* Texto escuro */
    border-color: #00A1E0;
    box-shadow: none; /* OTIMIZAÇÃO: Removido para performance */
    transform: scale(1.05); /* Expande para chamar atenção */
}

#sort-button {
    padding: 0.6rem;
    font-size: 0;
    width: auto;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

#sort-button svg {
    width: 32px;
    height: 32px;
    fill: #E0E0E0;
}

#sort-button:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #00A1E0;
    box-shadow: none; /* OTIMIZAÇÃO: Removido para performance */
}

#sort-button:focus svg {
    fill: #fff;
}

/* --- MODAL DE ORDENAÇÃO --- */
#sort-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #282828;
    padding: 2rem;
    border-radius: 12px;
    min-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#sort-modal-options {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
}

#sort-modal-options > * { margin-bottom: 1rem; }
#sort-modal-options > *:last-child { margin-bottom: 0; }

#sort-modal-options button.active {
    background-color: #007BFF;
    border-color: #00A1E0;
}

/* --- MODAL DE LOGOUT --- */
#logout-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 5000; /* Acima de tudo, exceto Toast/Splash */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-action-button {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    border: 2px solid transparent;
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
}

.modal-action-button.cancel {
    background-color: #444;
    border-color: #666;
}

.modal-action-button.confirm {
    background-color: #ff4d4d;
    border-color: #ff4d4d;
}

.modal-action-button:focus {
    background-color: #00A1E0;
    border-color: #fff;
    outline: none;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 161, 224, 0.5);
}

.radio-mode {
    visibility: hidden; /* Esconde o elemento de vídeo, mas mantém o áudio */
}

.radio-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #1a1a1a 0%, #000 100%);
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radio-logo-large {
    width: 350px;
    height: 350px;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(0, 161, 224, 0.2);
    z-index: 2;
    will-change: transform, box-shadow;
    animation: pulse-logo 3s infinite ease-in-out;
    background-color: #000;
}

@keyframes pulse-logo {
    0% { transform: scale(1); box-shadow: 0 0 30px rgba(0, 161, 224, 0.2); }
    50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(0, 161, 224, 0.5); }
    100% { transform: scale(1); box-shadow: 0 0 30px rgba(0, 161, 224, 0.2); }
}

/* --- MODERN PLAYER OVERLAY --- */
#movie-player-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent; /* Fix: Evita cobrir o vídeo em TVs com renderização por camadas */
    z-index: 4000; /* Garante que o overlay fique acima de todo o conteúdo da página */
    opacity: 0; /* Estado inicial invisível para animação */
    transition: opacity 0.3s ease; /* Transição suave de opacidade para o container */
}

/* Animação de Entrada (Slide Up + Fade) */
#movie-player-overlay:not(.hidden) {
    opacity: 1;
}

/* Animação de Saída (Fade Out) */
#movie-player-overlay.closing {
    opacity: 0;
}

@keyframes playerEnter {
    /* Removemos opacidade daqui para não conflitar com hidden-controls */
    0% { transform: translateY(30px) scale(0.98); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes playerExit {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.98); }
}

#movie-player-overlay video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    /* Coloca o vídeo na camada de base, abaixo dos controles. */
    z-index: 1;
    background-color: #000; /* Garante fundo preto */
}

.player-ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Camada dos controles, acima do vídeo. */
    z-index: 2;
    background: transparent !important;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
    animation: playerEnter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* Animação movida para a UI */
    pointer-events: none;
}

/* Logo do Canal no Player */
.player-channel-logo {
    position: absolute;
    top: 24px; /* Alinhado com o padding do topo */
    right: 32px; /* Alinhado com o padding da direita */
    height: 80px; /* Tamanho fixo para consistência */
    width: auto;
    max-width: 200px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); /* Sombra para contraste */
}

.player-ui-overlay.hidden-controls {
    opacity: 0;
    visibility: hidden;
    cursor: none;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

.player-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, transparent 100%);
    padding-bottom: 2rem;
    width: 100%;
    pointer-events: auto;
}

.player-back-button {
    background: none;
    border: none;
    padding: 0.5rem;
    margin-right: 1.5rem;
}

.player-back-button svg {
    width: 36px;
    height: 36px;
    fill: #fff;
}

.player-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    text-align: left; /* Sobrescreve o 'text-align: center' global para h2 */
    margin-bottom: 0; /* Sobrescreve a margem global para h2 */
}

.player-controls-container {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem 2rem 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    padding-top: 4rem;
    width: 100%;
    pointer-events: auto;
}

.player-timeline-container .time-display {
    font-size: 1.1rem;
    color: #fff;
    min-width: 80px;
    text-align: center;
    white-space: nowrap;
}

input[type="range"].player-timeline {
    -webkit-appearance: none;
    appearance: none;
    flex-grow: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    transition: height 0.2s ease;
}

input[type="range"].player-timeline:focus {
    height: 12px;
}

input[type="range"].player-timeline::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #00A1E0;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    transition: transform 0.2s ease;
}
input[type="range"].player-timeline:focus::-webkit-slider-thumb {
    transform: scale(1.2);
}

input[type="range"].player-timeline::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #00A1E0;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
}

.player-timeline-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
}

.player-timeline-container > * { margin-right: 1rem; }
.player-timeline-container > *:last-child { margin-right: 0; }

.player-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.player-buttons-left, .player-buttons-right {
    display: flex;
    align-items: center;
}

.player-buttons-left > *, .player-buttons-right > * { margin-right: 1rem; }
.player-buttons-left > *:last-child, .player-buttons-right > *:last-child { margin-right: 0; }

.player-button {
    background: none;
    border: none;
    width: auto; /* Sobrescreve o 'width: 100%' global para botões */
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-button svg {
    width: 32px;
    height: 32px;
    fill: #fff;
    transition: transform 0.2s ease;
}

.player-button:focus {
    outline: none;
}

.player-button:focus svg {
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px #00A1E0);
}

.speed-button {
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 1px solid transparent;
}

.speed-button:focus {
    background-color: #00A1E0;
    border-color: #fff;
}

.next-episode-button {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

.next-episode-button > * { margin-right: 0.5rem; }
.next-episode-button > *:last-child { margin-right: 0; }

.next-episode-button:focus {
    background-color: #00A1E0;
    border-color: #fff;
}

/* --- LIVE PLAYER EPG STYLES --- */
.player-live-info-container {
    width: 100%;
    padding-bottom: 1rem;
}

.live-program-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.5rem;
}

.live-program-meta {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #ccc;
}

.live-program-meta > * { margin-right: 1rem; }
.live-program-meta > *:last-child { margin-right: 0; }

.live-progress-bg {
    flex-grow: 1;
    height: 6px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
}

.live-progress-fill {
    height: 100%;
    background-color: #00A1E0;
    width: 0%;
    transition: width 0.5s ease;
}

.live-description {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: #aaa;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Spinner inside player */
.player-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
    /* Camada do spinner, acima de tudo. */
    z-index: 3;
}

/* --- MINI LISTA DE CANAIS NO PLAYER --- */
.player-mini-list {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 350px;
    background-color: rgba(0, 0, 0, 0.95); /* Fundo mais sólido para performance base */
    z-index: 5000; /* Acima da UI do player */
    border-right: 1px solid #333;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@supports (backdrop-filter: blur(10px)) {
    .player-mini-list {
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
    }
}

.mini-list-content {
    display: flex;
    flex-direction: column;
}

.mini-list-item {
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    color: #aaa;
    border-bottom: 1px solid #222;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-list-item.active-channel {
    color: #00A1E0;
    font-weight: bold;
}

.mini-list-item.selected {
    background-color: #00A1E0;
    color: #fff;
}

.mini-list-empty {
    padding: 2rem;
    text-align: center;
    color: #888;
}

/* --- TELA DE DETALHES DO USUÁRIO --- */
#user-details-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #121212;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-details-content {
    background-color: #1A1A1A;
    padding: 3rem;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #333;
}

.user-details-content h2 {
    color: #00A1E0;
    margin-bottom: 2rem;
    text-align: center;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid #333;
    font-size: 1.2rem;
}

.info-row:last-of-type {
    border-bottom: none;
}

.info-row strong {
    color: #aaa;
}

#back-from-account-button {
    margin-top: 2rem;
    width: 100%;
    background-color: #333;
}

#back-from-account-button:focus {
    background-color: #00A1E0;
}

.action-button {
    width: 100%;
    padding: 1rem;
    background-color: #333;
    border: 1px solid #555;
    font-size: 1.2rem;
    color: #E0E0E0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.action-button:focus {
    background-color: #00A1E0;
    border-color: #fff;
    color: #fff;
    outline: none;
}

.favorite-icon {
    color: #FFD700; /* Dourado */
    margin-left: 10px;
    font-size: 1.2rem;
    display: none; /* Escondido por padrão */
}
.list-item.is-favorite .favorite-icon {
    display: inline-block; /* Mostra se tiver a classe */
}