* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* remove o contorno (outline)  */
*:focus {
  outline: none;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 10px;
  background: #0f0f0f; /* Mude de #ffffff para #0f0f0f */
  color: #ffffff;      /* Adicione isso para o texto ficar branco */
}


/*  #########################  HEADER #########################  */

.youtube-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 56px;
  background-color: #0f0f0f; /* MUDE AQUI TAMBÉM! */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
}



/*  #########################  HEADER ESQUERDO #########################  */

.header-esq {
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.menu-sanduiche {
  width: 40px;
  height: 40px;
  padding: 8px;
  cursor: pointer;
  position: relative;
  /* relative - Para que o pseudo-elemento seja posicionado em relação a este elemento */
}

.menu-sanduiche::before {
  content: "";
  /* Adiciona um conteúdo vazio para o pseudo-elemento */
  position: absolute;
  /* Posiciona o pseudo-elemento */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Define o raio para tornar o pseudo-elemento redondo */
  background-color: transparent;
  /* Define a cor de fundo inicial como transparente */
  transition: background-color 0.3s;
  /* Adiciona uma transição suave para a mudança de cor de fundo */
  z-index: -1;
  /* Coloca o pseudo-elemento atrás do ícone */
}

.menu-sanduiche:hover::before {
  background-color: #e6e6e6;
  /* Altera a cor de fundo do pseudo-elemento para cinza quando o mouse passa por cima */
}

.sanduiche-svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: #000;
  /* Define a cor de preenchimento inicial como preto */
}

.menu-sanduiche:hover {
   fill: #ff0000;
  /* Altera a cor do preenchimento para vermelho quando o mouse passa por cima do ícone */
}

.youtube-logo {
  display: flex;
  padding: 18px 14px 18px 16px;
}

.youtube-logo-svg {
  height: 20px;
  width: 90px;
  cursor: pointer;
}

#language-logo {
  color: #606060;
  margin: -24px 0 0 -10px;
}


/*  #########################  HEADER CENTRO #########################  */

.header-centro {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: center;
  justify-content: center;
}

.search-form {
  display: flex;
  align-items: center;
  position: relative;
}

.input-container {
  display: flex;
  align-items: center;
  width: 500px;
  transition: width 0.3s;
  /* Adiciona transição para a largura do input */
  position: relative;
  /* Adicione posição relativa para posicionamento do ícone */
}

.search-input {
  background-color: #121212 ; /* Fundo interno do input */
  border: 1px solid #333;    /* Borda discreta */
  border-radius: 40px 0 0 40px;
  color: white;              /* Texto que você digita fica branco */
  width: 100%;
  height: 40px;
  padding-left: 20px;
  outline: none;
}

.search-btn {
  background: #222222;       /* Fundo do botão da lupa */
  border: 1px solid #333;
  border-left: none;         /* Tira a borda dupla entre input e botão */
  border-radius: 0 40px 40px 0;
  color: white;
  height: 40px;
  width: 65px;
}


.search-input:focus {0
  padding-left: 40px;
  border-color: #0070f3;
  /* Altera a cor da borda quando o input está em foco */
}

.lupa-pesquisa {
  fill: #888;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  top: 10px;
  transition: fill 0.3s, left 0.3s;
  z-index: 3;
  /* Aumente o z-index para que a lupa-pesquisa esteja acima da borda esquerda */
  pointer-events: none;
  /* Evita que o ícone seja clicável */
  opacity: 0;
  /* Começa com opacidade zero para escondê-lo */
}

.input-container:focus-within .lupa-pesquisa {
  left: 15px;
  /* Posiciona o ícone à esquerda quando o input está em foco */
  opacity: 1;
  /* Torna o ícone visível quando o input está em foco */
}

#teclado {
  display: flex;
  cursor: pointer;
  position: absolute;
  align-self: center;
  right: 10px;
  /* Posiciona o ícone à direita, ao lado do input */
  z-index: 4;
}

#teclado:hover img {
  filter: brightness(70%);
  transition: filter 0.3s;
}

/* Aplicar hover a todos os elementos SVG, exceto aqueles com a classe .youtube-logo-svg */
svg:not(.youtube-logo-svg):hover {
  fill: #ff0000;
}

.search-btn {
 background: #121212;
 border: 1px solid #333;
  border-radius: 0 40px 40px 0;
  cursor: pointer;
  height: 40px;
  width: 60px;
  padding: 1px 12px;
}

svg.lupa {
  display: block;
  width: 20px !important;
  height: 20px !important;
  fill: #ffffff !important;
}

button.microfone {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: #181818 !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  margin-left: 10px !important;
  cursor: pointer;
}

/* --- Ajuste para os ícones aparecerem --- */
.fa-magnifying-glass, .fa-microphone {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-size: 18px !important;
    display: inline-block !important;
}

/* Garante que o fundo do botão da lupa não fique branco */
button[style*="#222222"] {
    background-color: #222222 !important;
}




.microfone:hover {
  background-color: #333;    /* Efeito de hover escuro */
}


.microfone:hover, .search-btn:hover {
  background-color: #e6e6e6;
}

/*  #########################  HEADER DIREITO #########################  */

.header-direito {
  margin-right: 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

svg.icon {
  width: 24px;
  height: 24px;
  fill: currentcolor;
}

.icon-dir {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 100px;
}

.icon-dir:hover {
  background-color: #e6e6e6;
  /* Altera a cor de fundo no hover */
}

.user {
  cursor: pointer;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.user img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-right: 12px;
}

/* ########################## SIDEBAR ########################## */

.sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 56px;
  left: 0;
   width: 280px !important;            /* Aumentamos mais para garantir */
  background-color: #0f0f0f !important; /* Força o fundo escuro */
  color: #ffffff !important;           /* Força as letras brancas */
  padding: 0 12px;
  max-height: calc(100vh - 56px);    
  overflow-y: auto;
}




/* ESCONDER A BARRA DE ROLAGEM QUANDO NÃO ESTIVER COM O MOUSE NO SIDEBAR */

/* Estilo padrão para a barra de rolagem */
.sidebar::-webkit-scrollbar {
  width: 8px;
}

/* Estilo da alça da barra de rolagem */
.sidebar::-webkit-scrollbar-thumb {
  background-color: #888; /* Cor da alça da barra de rolagem */
  border-radius: 4px; /* Cantos arredondados para a alça */
}

/* Quando o mouse não está sobre o sidebar, esconda a barra de rolagem */
.sidebar:not(:hover)::-webkit-scrollbar {
  width: 0;
}

/* FIM DA BARRA DE ROLAGEM */

.links {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;

  padding: 0 12px;
  /* width: 204px; */
  height: 40px;
}

.sidebar a {
  display: flex;
  align-items: center;
  align-content: center;
}

svg.sidebar-svg {
  width: 24px;
  height: 24px;
}




.links:hover,
.links.active, 
.mais-youtube a:hover,
.configuracoes a:hover,
.inscricoes a:hover, 
.explorar a:hover {
  background: hsl(0, 0%, 93.3%);
  border-radius: 10px;
}

.linha {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin: 20px 0;
  width: 100%;
}

.links p, p {
  margin-left: 10px;
  line-height: 2rem;
  font-weight: 400;
  #F1F1F1
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  flex: 1;
  flex-basis: 1e-9px;
}

.sidebar h3, 
.mais-youtube h3, 
#mais-youtube h3 {
  color: #ffffff !important;
  font-size: 15px !important; /* Aumentamos para 18px */
  font-weight: 700 !important; /* Deixa a letra bem negrito */
  padding: 20px 0 10px 12px !important;
  display: block !important;
}

.inscricoes, .explorar, .mais-youtube, .configuracoes {
  display: flex;
  flex-wrap: wrap;
}

.inscricoes a, .explorar a, .mais-youtube a, .configuracoes a, .sidebar p {

  padding-left: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width:  100% ;
  height: 40px;
  text-decoration: none;
  display: flex;
  align-items: center;

  /* AS LINHAS QUE FALTAVAM DENTRO DA CHAVE: */
  font-size: 16px !important;
  color: #f1f1f1 !important;
}
.inscricoes a:hover, .explorar a:hover, .mais-youtube a:hover, .configuracoes a:hover {
    background-color: #272727 !important; /* Cor cinza do YouTube */
    border-radius: 10px;                  /* Deixa os cantos arredondados */
    color: #ffffff !important;            /* Garante que o texto continue branco */
}


.final {
  font-size: 13px;
  font-weight: 500;
  margin-left: 8px;
  margin-bottom: 20px;
}

.final a {
  text-decoration: none;
  color: #606060;
  display: inline-block;
  margin-right: 10px; /* Espaço entre as palavras */
}

.final a:last-child {
  margin-right: 0; /* Remova a margem direita da última palavra */
}

.final a:hover {
  text-decoration: underline;
}


/* ########################## FILTROS ABAIXO DO HEADER ########################## */

.filtros {
  position: fixed;
  top: 60px;
  /* Altura do header */
  left: 240px;
  /* largura do sidebar */
  width: calc(100% - 240px);
  height: 60px;
  background: #fff;
  padding: 10px 15px 60px 5px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  display: inline-block;
  white-space: nowrap;
}

.filter-options {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-wrap: nowrap;
  flex-direction: row;
  height: 32px;
  min-width: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 0px;
  user-select: none;
  overflow: hidden;
  margin-right: 20px;
  color: #0F0F0F;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  /* Adiciona uma transição suave para hover */
}

.filter-options.active {
  color: #fff;
  background: #242424;
}

.filter-options:hover {
  background: #e6e6e6;
  /* Altera a cor de fundo quando o mouse passa por cima */
  color: #000;
  /* Altera a cor do texto quando o mouse passa por cima */
}

/* ########################## VÍDEOS ########################## */

.video-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 140px;
  /* 60px (altura do header) + 60px (altura do filtro) + padding do filtro 10px */
  margin-left: 250px;
  /* tamanho do sidebar */
  flex: 1;
  width: calc(100% - 250px);
}

.video {
  display: flex;
  flex-direction: column;
  height: auto;
  max-width: 330px;
  padding: 5px;
  cursor: pointer;
  margin-bottom: 20px;
}

/* Procure a classe que faz o fundo dos vídeos e deixe assim: */
.card-do-video {
    background-color: transparent !important;
    border-radius: 12px;
    overflow: hidden; /* Isso garante que a imagem não "escape" das bordas */
}


.thumbnail {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}


.icone-canal {
  border-radius: 200px;
  height: 36px;
  margin-top: 12px;
}

.info-video {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.titulo-video {
  font-size: 16px;
  font-weight: 500;
  color: #0F0F0F;
  margin: 12px 0 0 10px;
}

p.nome-canal, p.video-views {
  font-size: 14px;
  font-weight: 400;
  color: #606060;
  margin-left: 10px;
  margin-top: -4px;
}

/* ####################### MENU SANDUICHE ####################### */

.small-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  gap: 20px;
  position: fixed;
  top: 70px;
  left: 0;
  width: 70px;
  overflow: hidden;
}

.small-sidebar a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  flex-wrap: wrap;
  text-align: center; /* Centralize o texto */
  height: 60px;
}

.small-sidebar p {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  max-height: 14px;
  padding-bottom: 20px;
}

.esconde-outros-icones {
  display: none;
}

.esconde-inscricoes, 
.esconde-explorar, 
.esconde-mais-youtube,
.esconde-configuracoes,
.esconde-final,
.esconde-linha {
  display: none;
}

.aumenta-video-container {
  /* flex-grow: 1; */

  margin-top: 130px;
  /* 60px (altura do header) + 60px (altura do filtro) + padding do filtro 10px */
  margin-left: 100px;
  /* tamanho do sidebar */
  flex: 1;
  width: calc(100% - 100px);
}

.small-filtros {
  position: fixed;
  top: 60px;
  /* Altura do header */
  left: 100px;
  /* largura do sidebar */
  width: calc(100% - 100px);
  height: 60px;
  background: #fff;
  padding: 10px 15px 60px 5px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  display: inline-block;
  white-space: nowrap;
}

.aumenta-video {
  flex-grow: 1;
  justify-content: center;

  height: auto;
  max-width: 360px;
  padding: 5px;
  cursor: pointer;
  margin-bottom: 20px;
}
/* --- MODO ESCURO TELETUBE --- */
body {
    background-color: #0f0f0f !important; /* Fundo preto do YouTube */
    color: #ffffff !important; /* Texto branco */
}

/* Escurecer o Topo e a Barra Lateral */
nav, .sidebar, .container {
    background-color: #0f0f0f !important;
}

/* Fazer os títulos dos vídeos e o nome TeleTube aparecerem */
h1, h2, h3, h4, p, a, span {
    color: #ffffff !important;
}

/* Ajuste dos botões de categoria (os que estão no topo na sua foto) */
.filter-list span {
    background-color: #272727 !important;
    color: white !important;
    border: 1px solid #3f3f3f;
}

/* Destaque para o nome TeleTube no topo */
.logo-txt {
    color: #ffffff !important;
    font-weight: bold;
}
/* Faz o nome TeleTube aparecer em branco no topo */
.nav-left h1, .nav-left a, .logo-txt, .logo {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: block !important;
}

/* Escurecer a barra de navegação que ainda está clara */
nav, .flex-div {
    background-color: #0f0f0f !important;
}
.search-box {
    background: #121212 !important;
    border: 1px solid #333 !important;
    border-radius: 20px !important;
    color: white !important;
}
/* FORÇAR TOPO ESCURO E TEXTO BRANCO */
nav, .flex-div, .nav-right, .nav-left, .nav-middle {
    background-color: #0f0f0f !important;
}

/* FAZER O NOME TELETUBE APARECER */
.nav-left h1, .nav-left a, .logo-txt {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: bold !important;
    display: block !important;
    visibility: visible !important;
}

/* DEIXAR A BARRA DE PESQUISA ESCURA (PARA NÃO OFUSCAR) */
.search-box, .search-box input {
    background-color: #121212 !important;
    color: white !important;
    border: 1px solid #333 !important;
}

/* ESCURECER A BARRA DE CATEGORIAS (Tudo, Música, etc.) */
.filter-list, .list-container, .menu-container {
    background-color: #0f0f0f !important;
}
/* --- ESTILO GLOBAL DO TOPO TELETUBE --- */
.main-header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background-color: #0f0f0f !important;
    height: 56px !important;
    padding: 0 16px !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    border-bottom: 1px solid #222;
}

/* --- ESTILO DA BARRA DE CATEGORIAS (ELIMINA O BRANCO) --- */
.categories-bar {
  background-color: #0f0f0f !important;
  display: flex;
  gap: 12px;
  padding: 10px 24px;
  
  /* ... outros estilos ... */
  position: fixed !important;
  top: 56px !important;
  margin-left: 0 !important;      /* Garante que não haja espaço extra */
   background-color: #0f0f0f !important; /* Cor que cobre o fundo */
  z-index: 10;
}
  z-index: 10;
  border-bottom: 1px solid #222;
  overflow-x: auto;

  position: sticky;
  top: 56px; /* Altura do seu Header */
  z-index: 999;
  width: 100%;

/* Estilo dos Botões (Chips) */
.chip {
    background-color: #272727;
    color: white;
    border: none;
    padding: 7px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s;
}

.chip.selected {
    background-color: white;
    color: black;
}


/* Esquerda: Logo e Menu */
.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.teletube-brand {
    display: flex;
    align-items: center;
    gap: 1px;
}

.logo-redonda {
    width: 25px;  /* Aumente aqui (estava por volta de 30px) */
    height: 25px; /* Mantenha igual à largura para continuar um círculo */
    background-color: rgb(72, 6, 148);
    border-radius:30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Se tiver uma seta branca dentro, talvez precise aumentar ela também: */
.seta-play {
    border-left: 18px solid white; /* Aumente um pouco a largura da seta */
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}


.seta-play {
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid rgb(248, 248, 248);
    margin-left: 2px;
}



.logo-escrito {
    height: 90px; 
    margin-left: -118px; /* <--- O sinal de MENOS faz ele colar no ícone */
    display: inline-block;
    vertical-align: middle;
    image-rendering: -webkit-optimize-contrast;
}
.pais-sigla {
    color: #5a5959;
    font-size: 9.5px; /* Bem pequeno como o original */
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    
    /* O SEGREDO PARA MOVER SEM AFASTAR */
    position: relative;
    top: -12px; /* Valores negativos fazem ele SUBIR */
    left: -157px; /* Ajuste aqui para encostar no final do nome */
}

/* Direita: Ícones */
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

/* Ajuste para o conteúdo não subir */

body {
    padding-top: 56px !important;
    background-color: #0f0f0f;
}
/* --- ORGANIZAÇÃO FINAL DO SIDEBAR E CONTEÚDO --- */

.sidebar {
 width: 250px !important;
min-width: 250px !important;

  height: calc(100vh - 56px);
  background-color:  #0f0f0f;
  position: fixed;
  top: 56px;
  left: 0;
  padding: 12px 0; /* Tiramos o padding das laterais para não apertar os itens */
  z-index: 999;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Garante que tudo comece na esquerda */
}

.categories-bar {
    background-color: #0f0f0f !important; /* ISSO MATA O BRANCO */
    display: flex !important;
    gap: 12px;
    padding: 12px 24px;
    margin-top: 0 !important;   /* Mude de 56px para 0 */
    margin-left: 0 !important;  /* Mude de 240px para 0 */
    border-bottom: 1px solid #222;
    overflow-x: auto;
    width: calc(100% - 280px);
}

/* Estilo dos Botões para não ficarem brancos */
.chip {
    background-color: #272727 !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

.chip.selected {
    background-color: white !important;
    color: black !important;
}


.links {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 4px;
}


/* Linha 932 */
.sidebar .links:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; 
    color: #ffffff !important;
}

/* Linha 943 */
.sidebar .links.active {
    background-color: #272727 !important; /* Cinza do YouTube */
    color: #ffffff !important;           /* Texto branco */
}




/* O SEGREDO: Empurra os vídeos e categorias para não ficarem embaixo do menu */
.categories-bar, 
main, 
.video-grid {
    margin-left: 240px !important;
}

/* Ajuste para telas menores (celular) */
@media (max-width: 768px) {
    .sidebar {
        display: none; /* Esconde o menu no celular para não cobrir tudo */
    }
    .categories-bar, main, .video-grid {
        margin-left: 0 !important;
    }
}/* --- CORRIGIR ÍCONES ESCUROS DO MENU --- */

/* Se você estiver usando ícones SVG */
.sidebar-svg, .sidebar svg, .links svg {
    fill: #ffffff !important; /* Pinta o preenchimento do ícone de branco */
    width: 24px;
    height: 24px;
}

/* Se você estiver usando Font Awesome (ícones de fonte) */
.links i, .sidebar i {
    color: #ffffff !important; /* Pinta o ícone de branco */
    font-size: 20px;
}

/* Ajuste do texto ao lado do ícone para ficar bem nítido */
.links p, .links span {
    color: #ffffff !important;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}/* --- AJUSTE FINO DO MENU LATERAL --- */

.sidebar {
    width: 250px !important; /* Largura padrão para o texto não cortar */
    padding: 12px 0; /* Espaçamento interno */
}

.links {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  gap: 24px;
  text-decoration: none;
  transition: 0.2s;
    width: calc(100% - 24px); /* Troque o 100% por este cálculo */
  margin: 0 auto;           /* Centraliza a barrinha curta */
  border-radius: 10px;      /* Deixa as pontas arredondadas */
  box-sizing: border-box; /* ADICIONE ESTA TAMBÉM para não cortar o texto */
}


.links p {
    font-size: 14px;
    color: #f1f1f1;
    margin-left: 10px; /* Reduza o espaço entre o ícone e o texto */
    white-space: nowrap; 
    overflow: visible; /* Garante que o texto apareça */
}


/* Isso empurra os vídeos para não ficarem colados no menu */
.categories-bar, .video-grid, main {
    margin-left: 240px !important;
    padding-left: 24px;
}/* --- ALINHAMENTO DE PRECISÃO DO MENU --- */
.links {
    display: flex !important;
    align-items: center !important;
    padding: 8px 24px !important;
    gap: 15px !important; /* Aproxima o texto do ícone */
    text-decoration: none;
}

.links p, .links span {
    color: #ffffff;
    font-size: 14px;
    margin: 0; /* Remove margens que podem estar empurrando o texto */
    white-space: nowrap; /* Impede que o texto quebre linha */
}

.sidebar svg, .sidebar i {
    width: 22px;
    height: 22px;
    flex-shrink: 0; /* Impede o ícone de amassar */
}/* Dá um espaço extra para as categorias não colarem no menu */
.categories-bar {
    padding-left: 24px !important;
    margin-left: 240px !important;
}

/* Espaçamento para os vídeos também ficarem alinhados */
.video-grid, main {
    padding: 20px 24px !important;
}/* --- FORÇAR AFASTAMENTO DA BARRA DE CATEGORIAS --- */

/* --- ALINHAMENTO MILIMÉTRICO (REDUZINDO O BURACO) --- */

.sidebar {
    width: 160px !important; /* Ajustamos o menu para 160px */
    position: fixed !important;
    top: 56px !important;
    height: 100vh !important;
}

.categories-bar {
    position: fixed !important;
    top: 56px !important;
    left: 20px !important; /* EMPURRA MENOS PARA A DIREITA */
    width: calc(100% - 160px) !important;
    background-color: #0f0f0f !important;
    padding: 12px 24px !important;
    display: flex !important;
    z-index: 100 !important;
    border-bottom: 1px solid #222;
}

main, .video-grid {
    margin-left: 160px !important; /* ALINHA OS VÍDEOS COM OS BOTÕES */
    margin-top: 110px !important;
    padding: 24px !important;
    background-color: #0f0f0f !important;
}/* --- FAZER A LUPA APARECER --- */
.search-container button i {
    color: #ffffff !important; /* Força a cor branca para a lupa */
    font-size: 18px !important; /* Define um tamanho visível */
    display: block !important;
}

/* Garante que o botão da pesquisa tenha um fundo cinza escuro */
.search-container button {
    background-color: #222 !important; 
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
/* --- AJUSTE DO CONTEÚDO PRINCIPAL (VÍDEOS) --- */
.main-content {
  margin-left: 240px !important; /* Empurra os vídeos para depois da sidebar */
  margin-top: 112px !important;  /* Empurra para baixo do header + categorias */
  padding: 20px;
  display: block;
}
/* --- AJUSTE FINAL DO CONTEÚDO --- */
.video-container {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
    display: grid;
    /* 3 colunas que ocupam todo o espaço, sem sobrar nada */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 20px !important; /* Espaço pequeno entre eles para ficarem grandes */
    padding: 20px !important;
    box-sizing: border-box;
    justify-items: stretch;
}
/* Isso vai forçar o card do vídeo e a imagem a ocuparem 100% do espaço das colunas */
.video, .thumbnail {
    width: 100% !important;
    max-width: 100% !important;
}

.thumbnail {
    aspect-ratio: 16 / 9; /* Mantém o formato retangular do YouTube */
    object-fit: cover;    /* Faz a imagem preencher o espaço sem sobrar preto */
}



a.links:hover {
    background-color: #272727 !important;
}
.teletube-t-bold {
    color: #ffffff !important;
    font-family: 'Montserrat', 'Arial Black', sans-serif !important;
    font-weight: 900 !important;
    font-size: 24px !important; 
    line-height: 0.8 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    transform: translateY(4px) !important; 
    user-select: none;

    /* TRUQUE PARA ENGROSSAR O T (Adiciona borda branca) */
    -webkit-text-stroke: 2px #ffffff !important; /* Engrossa em navegadores Chrome/Edge/Safari */
    paint-order: stroke fill;
}

/* Mantém o fundo roxo sem cortar a perna que vaza */
.logo-redonda {
    overflow: visible !important; 
}
/* 1. Cor padrão de todos os ícones da sidebar (Cinza Claro) */
.sidebar-svg, 
.sidebar-item i, 
.sidebar-item svg {
    fill: #aaaaaa !important; /* Para ícones em vetor/SVG */
    color: #aaaaaa !important; /* Para ícones em fonte/FontAwesome */
    transition: all 0.2s ease;
}

/* 2. Cor do ícone do botão ATIVO (ex: Início - Roxo da Logo) */
.sidebar-item.active .sidebar-svg,
.sidebar-item.active i,
.sidebar-item.active svg {
    fill: #6a1b9a !important;
    color: #6a1b9a !important;
}

/* 3. Cor do ícone quando PASSA O MOUSE (Hover - Efeito Roxo) */
.sidebar-item:hover .sidebar-svg,
.sidebar-item:hover i,
.sidebar-item:hover svg {
    fill: #8e24aa !important; /* Um roxo levemente mais claro para brilhar no hover */
    color: #8e24aa !important;
}
/* Força a cor roxa em todos os caminhos internos do ícone da sidebar */
.teletube-icone,
.teletube-icone path,
.teletube-icone rect,
.teletube-icone circle {
    fill: #6a1b9a !important;
    color: #6a1b9a !important;
}

/* Efeito ao passar o mouse por cima do botão da sidebar */
.sidebar-item:hover .teletube-icone,
.sidebar-item:hover .teletube-icone path {
    fill: #8e24aa !important;
    color: #8e24aa !important;
}
/* Garante o alinhamento correto da linha do canal */
.sidebar-user-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    margin-bottom: 8px;
}

/* Força a foto a ficar perfeitamente redonda e sem distorcer */
.sidebar-user-avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
/* --- CORREÇÃO DEFINITIVA DAS CORES DOS ÍCONES --- */

/* 1. TeleTube Premium */
.premium-icon path:first-child {
    fill: #e040fb !important;
}

/* 2. TeleTube Studio (Pinta o hexágono de fundo e mantém a borda branca) */
.studio-icon path:nth-child(1) { fill: #6a1b9a !important; }
.studio-icon path:nth-child(2) { fill: #e040fb !important; }
.studio-icon path:nth-child(3) { fill: black !important; }
.studio-icon path:nth-child(4) { fill: #ffffff !important; }

/* 3. TeleTube Music (Pinta o círculo azul e mantém a seta branca) */
.music-icon circle {
    fill: #0000ff !important;
}
.music-icon path {
    fill: #ffffff !important; /* Força a setinha a ser branca */
}

/* 4. TeleTube Kids (Fundo Amarelo com Setinha Preta) */
.kids-icon path:nth-child(1) {
    fill: #ffd600 !important; /* Pinta o fundo de amarelo */
}
.kids-icon path:nth-child(2),
.kids-icon path:nth-child(3),
.kids-icon path:last-child {
    fill: #000000 !important; /* Força os elementos de dentro a ficarem pretos */
}