/*
Theme Name: ZmBR Community
Theme URI: https://example.com
Author: ZmBR
Author URI: https://example.com
Description: Tema de comunidade com visual de apocalipse zumbi: preto sujo, sangue, verde toxico e faixas de perigo. Feito para cla de Zombie Mod, pronto para BuddyPress (area de membros) e bbPress (forum).
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zmbr-community
*/

/* ============================================================
   VARIAVEIS
   Paleta de apocalipse: preto sujo de base, sangue como cor de
   acao, verde toxico como cor de sistema/status e ambar de fita
   de isolamento para avisos.
   ============================================================ */
:root{
  --bg: #070807;
  --bg-alt: #0c0e0c;
  --card: #121513;
  --card-alt: #171b18;
  --card-border: #262d27;
  --card-border-forte: #3a443b;

  --sangue: #8e1b13;
  --sangue-vivo: #d62828;
  --sangue-escuro: #4a0d09;

  --toxico: #9ef01a;
  --toxico-escuro: #4b7a05;
  --ambar: #e08b1e;

  --text: #d8ddd6;
  --text-muted: #869080;
  --white: #ffffff;

  --radius: 2px;

  --fonte-titulo: "Impact", "Haettenschweiler", "Franklin Gothic Bold", "Arial Black", "Arial Narrow Bold", sans-serif;
  --fonte-texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-mono: "Consolas", "DejaVu Sans Mono", "Courier New", monospace;

  /* Textura de grao: SVG inline, sem requisicao extra e sem imagem no disco. */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");

  /* Fita de isolamento. */
  --fita: repeating-linear-gradient(45deg, var(--ambar) 0 14px, #0a0a0a 14px 28px);
  --fita-sangue: repeating-linear-gradient(45deg, var(--sangue) 0 14px, #0a0a0a 14px 28px);
}

*{ box-sizing: border-box; }

body{
  background-color: var(--bg);
  /* Camadas: mancha de sangue no topo, luz esverdeada ao fundo e grao por cima. */
  background-image:
    radial-gradient(900px 420px at 50% -140px, rgba(142,27,19,.28), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(75,122,5,.07), transparent 70%),
    var(--grao);
  background-attachment: fixed, fixed, fixed;
  color: var(--text);
  font-family: var(--fonte-texto);
  line-height: 1.65;
  margin: 0;
  overflow-x: hidden;
}

/* Linhas horizontais de monitor velho, por cima de tudo e sem atrapalhar clique. */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity: .35;
  mix-blend-mode: multiply;
}

a{ color: var(--sangue-vivo); text-decoration: none; transition: color .15s ease; }
a:hover{ color: var(--toxico); }

img{ max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4{
  font-family: var(--fonte-titulo);
  font-weight: 400;
  color: var(--white);
  line-height: 1.12;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 .5em;
}
h1{ font-size: 40px; }
h2{ font-size: 28px; }
h3{ font-size: 20px; letter-spacing: .8px; }
h4{ font-size: 16px; }

::selection{ background: var(--sangue); color: var(--white); }

.container{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Icones SVG do inc/icones.php herdam a cor do texto. */
.icone{
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -.2em;
  flex: none;
}
.icone-grande{ width: 34px; height: 34px; }

/* Fita de isolamento: usada como separador entre blocos. */
.fita{
  height: 10px;
  background: var(--fita);
  opacity: .85;
  box-shadow: inset 0 0 14px rgba(0,0,0,.8);
}
.fita-sangue{ background: var(--fita-sangue); }

/* Respingo de sangue escorrendo da borda de baixo de um bloco. */
.escorre{ position: relative; }
.escorre::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 14px;
  pointer-events: none;
  background:
    radial-gradient(6px 13px at 12% 0, var(--sangue) 96%, transparent),
    radial-gradient(4px 9px  at 27% 0, var(--sangue) 96%, transparent),
    radial-gradient(7px 15px at 46% 0, var(--sangue) 96%, transparent),
    radial-gradient(3px 7px  at 58% 0, var(--sangue) 96%, transparent),
    radial-gradient(6px 12px at 74% 0, var(--sangue) 96%, transparent),
    radial-gradient(4px 8px  at 89% 0, var(--sangue) 96%, transparent);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  background:
    linear-gradient(180deg, rgba(20,4,3,.96), rgba(6,7,6,.98)),
    var(--grao);
  border-bottom: 1px solid var(--sangue);
  box-shadow: 0 6px 24px rgba(0,0,0,.85);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header::after{
  content: "";
  display: block;
  height: 5px;
  background: var(--fita);
  opacity: .75;
}
/* Logado, a barra de admin do WordPress e fixa e ocupa os 32px de cima da
   janela. Sem este recuo o header grudado desliza por baixo dela e o topo do
   logo some. Abaixo de 782px a barra do WP e absoluta (rola junto com a
   pagina), entao ali o recuo nao existe — ver o bloco responsivo no fim. */
body.admin-bar .site-header{ top: 32px; }
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Acompanha o logo: a altura vem dele (84px) mais uma folga de 6px de cada
     lado. Mexeu no .site-logo-img, confira aqui. */
  height: 96px;
}

.site-logo{
  display: flex;
  align-items: center;
  gap: 10px;
  /* Nao encolhe: espremido, o nome do site e a descricao quebram em duas
     linhas e o cabecalho inteiro fica torto. */
  flex: none;
  font-family: var(--fonte-titulo);
  font-size: 26px;
  color: var(--white);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}
.site-logo .icone{ color: var(--toxico); width: 30px; height: 30px; }
/* Logo enviado pelo painel: manda a altura, a largura acompanha. O drop-shadow
   descola a arte do fundo preto do header sem precisar de moldura. */
.site-logo-img{
  height: 84px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.9));
  transition: filter .18s ease;
}
/* Passar o mouse tinge o logo de sangue. A receita zera a cor original
   (grayscale) antes de recolorir, senao o vermelho e o laranja que a arte ja
   tem puxariam o resultado pra tons diferentes entre si. */
.site-logo:hover .site-logo-img{
  filter:
    drop-shadow(0 2px 14px rgba(214,40,40,.7))
    grayscale(1) sepia(1) saturate(11) hue-rotate(-34deg) brightness(.88);
}
.site-logo:hover{ color: var(--white); }
.site-logo:hover .icone{ color: var(--sangue-vivo); }
.site-logo b{ font-weight: 400; }
.site-logo-texto{ display: block; line-height: 1; }
.site-logo .risco{ color: var(--sangue-vivo); }
.site-logo small{
  display: block;
  font-family: var(--fonte-mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 3px;
  white-space: nowrap;
}

.main-nav{
  display: flex;
  align-items: center;
  gap: 20px;
}
.main-nav ul{
  display: flex;
  align-items: center;
  /* Com 11 itens, o menu precisa caber nos 1160px do container — e nao na
     largura da tela: acima de 1200px o container para de crescer, entao subir o
     ponto de virada nao resolveria nada. Cada item novo aperta este numero;
     quando ele nao der mais, o proximo passo nao e diminuir a fonte de novo e
     sim mandar um item pro submenu de "Membros".
     Aumentou item de menu? Meça de novo aqui e no .main-nav a logo abaixo. */
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============ ENTRAR / CRIAR CONTA (inc/conta.php) ============ */
.site-auth{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 14px;
  border-left: 1px solid var(--card-border);
}
.site-auth a{
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text);
  /* Rotulo de botao nao quebra linha: "Criar conta" em duas linhas empurra a
     altura e desalinha o bloco inteiro. Quando faltar espaco, quem cede e o
     menu (vira painel a partir de 1200px), nao o texto. */
  white-space: nowrap;
}
.site-auth a:hover{ color: var(--toxico); }

/* O "criar conta" e o unico botao cheio aqui: e a acao que o site quer. */
.site-auth .auth-criar{
  padding: 9px 16px;
  font-size: 11px;
  color: var(--white);
}
.site-auth .auth-criar:hover{ color: var(--white); }
.site-auth .auth-criar .icone{ width: 14px; height: 14px; }

/* Foto e nome **lado a lado**. Precisa do .site-auth na frente pra ganhar de
   ".main-nav a{ display: block }", que e mais especifico do que a classe
   sozinha: com o bloco valendo, a foto (que e display:block) empurrava o nome
   pra linha de baixo. Especificidade, e nao !important, como no resto daqui. */
.site-auth a.auth-perfil{ display: flex; align-items: center; gap: 8px; }
/* Apelido comprido nao pode esticar o cabecalho: corta com "...". O nome
   inteiro continua no title do link e no proprio perfil. */
.auth-nome{ max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.auth-avatar{
  width: 30px;
  height: 30px;
  border: 1px solid var(--card-border-forte);
  border-radius: 0;
}
/* O sino de notificacoes (inc/notificacoes.php).
   O painel abre no hover e no foco, sem JavaScript — mesma solucao do submenu
   "Membros", e pelo mesmo motivo: a lista ja veio no HTML. */
.auth-sino{ position: relative; display: flex; align-items: center; }
.site-auth a.auth-sino-botao{
  display: flex;
  align-items: center;
  position: relative;
  padding: 4px;
  color: var(--text-muted);
}
.site-auth a.auth-sino-botao:hover{ color: var(--toxico); }
.auth-sino-botao .icone{ width: 19px; height: 19px; }
/* O numero: pequeno, vermelho e grudado no sino. */
.auth-sino-total{
  position: absolute;
  top: -3px;
  right: -6px;
  min-width: 16px;
  padding: 0 4px;
  background: var(--sangue);
  border: 1px solid var(--sangue-vivo);
  border-radius: 9px;
  color: var(--white);
  font-family: var(--fonte-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
/* Com novidade, o sino em si tambem muda de cor: quem le rapido pega a cor
   antes de pegar o numero. */
.auth-sino-tem .auth-sino-botao{ color: var(--sangue-vivo); }

.auth-sino-painel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 320px;
  padding: 6px 0 0;
  background: var(--bg-alt);
  border: 1px solid var(--card-border-forte);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}
.auth-sino:hover .auth-sino-painel,
.auth-sino:focus-within .auth-sino-painel{ opacity: 1; visibility: visible; transform: none; }
/* Ponte transparente entre o sino e o painel, pro mouse nao perder o hover no
   caminho — mesma solucao do submenu do cabecalho. */
.auth-sino-painel::before{ content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.auth-sino-painel ul{ list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.auth-sino-painel li{
  padding: 10px 14px;
  border-bottom: 1px solid var(--card-border);
  font-family: var(--fonte-corpo);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.site-auth .auth-sino-painel li a{
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--text);
}
.site-auth .auth-sino-painel li a:hover{ color: var(--sangue-vivo); }
.auth-sino-vazio{ color: var(--text-muted); }

/* Fila de aprovacao: os dois botoes de decidir.
   Eles viviam dentro do painel do sino e sairam de la — decidir uma
   candidatura num painel que fecha ao tirar o mouse e clique de risco. Agora
   ficam na **pagina de notificacoes**, onde a lista fica aberta, entao as
   medidas nao dependem mais dos 320px do painel: eles seguem a frase na mesma
   linha e descem sozinhos quando nao cabe. */
/* "Clique aqui para ver o conteudo", entre a frase e os botoes de decidir.
   Imagem abre numa camada sobre a lista; video vai pra uma aba nova. */
.sino-ver{
  display: block;
  margin: 6px 0 0;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--toxico);
}

.sino-acoes{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 2px;
}
.sino-acao{
  display: inline-block;
  line-height: 1.4;
  padding: 6px 14px;
  border: 1px solid var(--card-border-forte);
  background: var(--card);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sino-acao-aprovar:hover{
  border-color: var(--toxico);
  color: var(--toxico);
}
.sino-acao-recusar:hover{
  border-color: var(--sangue-vivo);
  color: var(--sangue-vivo);
}

/* O recado que aparece depois de decidir, logo abaixo do cabecalho. */
.zmbr-fila-recado{
  border-left: 4px solid var(--toxico);
  background: var(--bg-alt);
  padding: 10px 20px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
}
.zmbr-fila-recado p{ margin: 0; }
.zmbr-fila-recusar,
.zmbr-fila-erro{ border-left-color: var(--sangue-vivo); }

/* Site fechado pra visitante: a tarja que so quem administra ve. Âmbar, e nao
   verde: e um estado que precisa acabar, nao um recado que passou. */
.zmbr-manutencao-tarja{ border-left-color: var(--ambar); }
.zmbr-manutencao-tarja a{ color: var(--ambar); text-decoration: underline; }

/* ============================================================
   TELA DE MANUTENÇÃO (inc/manutencao.php)
   Pagina propria, sem cabecalho nem rodape: quem chega aqui nao
   tem pra onde ir dentro do site, entao nao ha menu pra oferecer.
   ============================================================ */
body.zmbr-manutencao{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #0a0c0a;
  color: var(--text);
}
.manutencao-caixa{
  width: 100%;
  max-width: 520px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--ambar);
  padding: 40px 30px;
}
.manutencao-logo{ max-width: 190px; height: auto; margin: 0 auto 22px; }
.manutencao-marca{ font-size: 20px; letter-spacing: 2px; margin: 0 0 18px; }
.manutencao-titulo{ font-size: 26px; margin: 0 0 14px; }
.manutencao-texto{ color: var(--text-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.manutencao-volta{
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--card-border);
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ambar);
}
.zmbr-fila-tarde{ border-left-color: var(--ambar); }
.site-auth a.auth-sino-todas{
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-size: 10px;
  color: var(--toxico);
}

/* No celular (ate 780px) o sino e so o atalho pra aba de notificacoes: a
   lista fica la. Nao e questao de hover — ali o sino mora **dentro** do painel
   do menu, encostado a esquerda, e uma caixa de 320px abriria fora da tela
   (medido: comecava em -269px). Acima disso o painel aparece: ancorado pela
   direita ate 1340px e centrado no sino acima, onde ha espaco pros dois lados. */
@media (max-width: 780px){
  .auth-sino-painel{ display: none; }
}

/* Especificidade em vez de !important, como no resto do arquivo. */
.site-auth a.auth-sair{ color: var(--text-muted); font-weight: 400; }
.site-auth a.auth-sair:hover{ color: var(--sangue-vivo); }
.main-nav a{
  position: relative;
  display: block;
  color: var(--text);
  font-family: var(--fonte-mono);
  /* 11px/1px e o que faz os onze itens caberem na coluna; no painel do celular
     o tamanho volta a 13px, onde ha espaco de sobra. */
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 0;
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--sangue-vivo);
  transition: right .18s ease;
}
.main-nav a:hover{ color: var(--toxico); }
.main-nav a:hover::after{ right: 0; }
.main-nav .current-menu-item > a{ color: var(--toxico); }
.main-nav .current-menu-item > a::after{ right: 0; background: var(--toxico); }

/* ============ Interferência no hover do menu ============
   Sinal falhando: o texto se desdobra em ciano e vermelho por um instante e
   volta. Dura 320ms e roda duas vezes — o suficiente pra ler como interferência
   e curto demais pra incomodar em cada passada de mouse. `steps(2)` é o que
   deixa o movimento **quebrado** em vez de suave; interpolado, viraria um
   borrão. Só text-shadow e transform entram na animação, então nada disso
   recalcula layout. */
@keyframes zmbr-interferencia{
  0%{ text-shadow: none; transform: translate(0, 0); }
  33%{ text-shadow: -2px 0 #14e0e0, 2px 0 var(--sangue-vivo); transform: translate(1px, -1px); }
  66%{ text-shadow: 2px 0 #14e0e0, -2px 0 var(--sangue-vivo); transform: translate(-1px, 1px); }
  100%{ text-shadow: none; transform: translate(0, 0); }
}
.main-nav a:hover{ animation: zmbr-interferencia .32s steps(2, end) 2; }

/* ============ O item "Doar" (classe posta por inc/doacoes.php) ============
   Verde e nao vermelho de proposito: no resto do site o vermelho e a acao de
   sempre, entao o item que pede dinheiro precisa ler como outra coisa. */
.main-nav .menu-doar > a{
  padding: 8px 16px;
  color: var(--toxico);
  border: 1px solid var(--toxico-escuro);
  background-color: rgba(158,240,26,.08);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  /* O efeito do hover e o proprio fundo crescendo da esquerda pra direita
     (background-size, nao pseudo-elemento) — assim nada disputa lugar com o
     texto e o clip-path continua valendo pra sombra e pro preenchimento. */
  background-image: linear-gradient(90deg, var(--toxico), var(--toxico-escuro));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .25s ease, color .2s ease, box-shadow .25s ease;
}
/* A barrinha vermelha dos outros itens nao entra aqui. */
.main-nav .menu-doar > a::after{ display: none; }

.main-nav .menu-doar > a:hover,
.main-nav .menu-doar.current-menu-item > a{
  color: #0a0c0a;
  background-size: 100% 100%;
  box-shadow: 0 0 20px rgba(158,240,26,.45);
}

/* ============ Fórum e Eventos em destaque (inc/menu-destaque.php) ============
   Mesma forma do Doar — moldura, canto cortado e o fundo crescendo no hover —
   em **vermelho**, que é a cor de ação do site. O verde continua sendo só do
   Doar: dinheiro precisa ler como outra coisa. */
.main-nav .menu-destaque > a{
  padding: 8px 16px;
  color: var(--sangue-vivo);
  border: 1px solid var(--sangue);
  background-color: rgba(214,40,40,.10);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background-image: linear-gradient(90deg, var(--sangue-vivo), var(--sangue));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .25s ease, color .2s ease, box-shadow .25s ease;
}
.main-nav .menu-destaque > a::after{ display: none; }
.main-nav .menu-destaque > a:hover,
.main-nav .menu-destaque.current-menu-item > a,
.main-nav .menu-destaque.current-menu-parent > a{
  color: var(--white);
  background-size: 100% 100%;
  box-shadow: 0 0 20px rgba(214,40,40,.45);
}

/* ============ Sangue + interferência (Eventos, Fórum e Doar) ============
   Escolha do dono do site. O preenchimento **sobe do rodapé**, como um copo
   enchendo, em vez de crescer da esquerda — é o que dá a leitura de sangue —, e
   a interferência do resto do menu continua por cima. `background-position:
   bottom` é o que fixa o crescimento na base; sem isso o gradiente cresce a
   partir do topo e o efeito se perde.

   O Doar troca o verde pelo vermelho **só no hover**: parado ele continua verde
   (dinheiro precisa ler como outra coisa), e o vermelho só aparece enquanto o
   mouse está em cima. */
.main-nav .menu-destaque > a,
.main-nav .menu-doar > a{
  background-image: linear-gradient(0deg, var(--sangue-vivo), #8e1b13);
  background-position: bottom;
  transition: background-size .45s cubic-bezier(.25,.8,.3,1), color .25s ease, box-shadow .25s ease;
}
.main-nav .menu-destaque > a:hover,
.main-nav .menu-doar > a:hover{
  color: #fff;
  background-size: 100% 100%;
  box-shadow: 0 0 20px rgba(214,40,40,.5);
  animation: zmbr-interferencia .32s steps(2, end) 2;
}

@media (prefers-reduced-motion: reduce){
  .main-nav .menu-doar > a,
  .main-nav .menu-destaque > a{ transition: none; }
  /* Quem pediu menos movimento não recebe a interferência: o hover continua,
     só que sem o tranco e sem o deslocamento do texto. */
  .main-nav a:hover,
  .main-nav .menu-doar > a:hover,
  .main-nav .menu-destaque > a:hover{ animation: none; }
}

/* ============ SUBMENU (o item da equipe mora dentro de "Membros") ============
   O menu nasceu de um nivel so; este bloco e o que da conta do segundo. */
/* O item do menu ocupa a altura inteira do cabecalho pra **area de hover**
   cobrir a coluna toda — o mouse nao perde o menu ao subir ou descer um pouco.
   A posicao do painel **nao** sai dai: ele e ancorado no link (ver o `top` do
   .sub-menu logo abaixo), porque o cabecalho e alto por causa do logo e abrir
   no fim do item deixava o painel 39px longe do botao.
   O link continua com a altura do texto, entao a barrinha vermelha do hover
   segue colada nele, e nao no fundo do cabecalho. */
.main-nav{ align-self: stretch; }
/* align-self estica a lista dentro do nav (que centraliza os filhos);
   align-items estica os itens dentro dela. Sao os dois passos da corrente. */
.main-nav > ul{ align-self: stretch; align-items: stretch; }
.main-nav > ul > li{ display: flex; align-items: center; }

.main-nav li{ position: relative; }

/* A setinha que avisa que o item abre. */
.main-nav .menu-item-has-children > a{ padding-right: 13px; }
.main-nav .menu-item-has-children > a::before{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -1px;
  border: 4px solid transparent;
  border-top-color: currentColor;
}

.main-nav .sub-menu{
  /* Vence o display:flex de .main-nav ul, que aqui empilharia os itens lado a
     lado dentro do painel. */
  display: block;
  position: absolute;
  /* Ancorado no **link**, e nao no fim do item.
     O <li> ocupa a altura inteira do cabecalho (para a area de hover cobrir a
     coluna toda), e o cabecalho e alto por causa do logo: abrir em top:100%
     jogava o painel 39px abaixo do botao, com um vao no meio. Como o link fica
     centralizado no item, 50% e o meio dele; somando metade da altura do link
     (15px) chega-se a base do texto, e os 8px seguintes sao o respiro. O painel
     passa por cima da fita de isolamento — de proposito: ele pertence ao botao,
     nao ao cabecalho. */
  top: calc(50% + 15px + 8px);
  left: -16px;
  z-index: 120;
  min-width: 210px;
  padding: 6px 0;
  gap: 0;
  background: linear-gradient(180deg, #100302, #070807);
  border: 1px solid var(--card-border-forte);
  border-top: 2px solid var(--sangue);
  box-shadow: 0 16px 34px rgba(0,0,0,.85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Ponte invisivel sobre o vao entre o item e o painel: sem ela o mouse "cai"
   no caminho e o submenu fecha na cara de quem ia clicar. */
.main-nav .sub-menu::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 9px;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu{
  opacity: 1;
  visibility: visible;
  transform: none;
}
.main-nav .sub-menu li{ border: 0; }
.main-nav .sub-menu a{ padding: 10px 18px; font-size: 11px; white-space: nowrap; }
.main-nav .sub-menu a::after{ display: none; }
.main-nav .sub-menu a:hover{ background: rgba(214,40,40,.16); }

/* Etiqueta ao lado do item (o "STAFF"), posta por inc/equipe.php. Ambar pra
   nao competir nem com o vermelho do menu nem com o verde do "Doar". */
.menu-etiqueta{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: #0a0c0a;
  background: var(--ambar);
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce){
  .main-nav .sub-menu{ transition: none; }
}

.nav-toggle{
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--sangue);
  color: var(--white);
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
}
.nav-toggle:hover{ background: var(--sangue); }
.nav-toggle .barras{
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  /* Hero 30% mais baixo que a primeira versao (era 96/84 com h1 de 76px):
     572px -> 400px em tela de 1280. Os valores daqui, do h1 e das margens
     abaixo foram calibrados juntos pra fechar essa conta. */
  padding: 50px 0 44px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(680px 320px at 50% 0, rgba(142,27,19,.42), transparent 72%),
    linear-gradient(180deg, #150403 0%, var(--bg) 92%);
  border-bottom: 1px solid var(--card-border);
}
/* Manchas de sangue seco no fundo do hero. */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120px 70px at 14% 22%, rgba(74,13,9,.75), transparent 70%),
    radial-gradient(180px 90px at 82% 34%, rgba(74,13,9,.6), transparent 72%),
    radial-gradient(90px 50px at 62% 78%, rgba(74,13,9,.5), transparent 70%);
}
.hero .container{ position: relative; z-index: 1; }

.hero-etiqueta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--toxico);
  border: 1px solid rgba(158,240,26,.35);
  background: rgba(158,240,26,.06);
  padding: 5px 12px;
  margin-bottom: 18px;
}
.hero-etiqueta .icone{ color: var(--toxico); }

.hero h1{
  font-size: clamp(26px, 4.4vw, 48px);
  letter-spacing: 2px;
  margin-bottom: 12px;
  /* Contorno duplo: o texto parece estencil pichado na parede. */
  text-shadow:
    3px 3px 0 var(--sangue-escuro),
    -1px -1px 0 rgba(0,0,0,.9);
}
.hero h1 span{
  color: var(--sangue-vivo);
  text-shadow: 0 0 26px rgba(214,40,40,.5), 3px 3px 0 #000;
}
.hero p{
  color: var(--text-muted);
  /* O texto encolhe menos que o resto do bloco: abaixo de 15px a linha de
     apoio ja comeca a ficar dificil de ler. */
  font-size: 14px;
  max-width: 620px;
  margin: 0 auto 18px;
}

.hero-acoes{ display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Botoes: canto cortado, como placa de metal. */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--sangue);
  color: var(--white);
  font-family: var(--fonte-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 13px 26px;
  white-space: nowrap;
  border: 1px solid var(--sangue-vivo);
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover{
  background: var(--sangue-vivo);
  color: var(--white);
  box-shadow: 0 0 22px rgba(214,40,40,.45);
}
.btn-outline{
  background: transparent;
  border-color: var(--toxico-escuro);
  color: var(--toxico);
}
.btn-outline:hover{
  background: rgba(158,240,26,.12);
  color: var(--toxico);
  box-shadow: 0 0 22px rgba(158,240,26,.2);
}

/* Barra de infeccao: enfeite com cara de HUD. */
.infeccao{
  max-width: 560px;
  margin: 28px auto 0;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.infeccao-topo{ display: flex; justify-content: space-between; margin-bottom: 7px; }
.infeccao-barra{
  height: 9px;
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  padding: 1px;
}
.infeccao-nivel{
  display: block;
  height: 100%;
  width: 87%;
  background: repeating-linear-gradient(90deg, var(--sangue-vivo) 0 8px, var(--sangue) 8px 12px);
  box-shadow: 0 0 12px rgba(214,40,40,.6);
}

/* ============================================================
   SECOES E CARDS
   ============================================================ */
.section{ padding: 70px 0; position: relative; }
.section-alt{
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), transparent),
    var(--bg-alt);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.section-title{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  margin-bottom: 8px;
}
.section-title .icone{ color: var(--sangue-vivo); width: 28px; height: 28px; }
.section-sub{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 34px;
  padding-left: 2px;
}

.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }

/* Servidores: tres por linha, sempre. Era "quantos couberem" (auto-fit), o que
   dava quatro em tela larga; com um card por jogo — CS2, L4D2, TF2 — tres
   fecham a linha certinho, e o quarto jogo comeca a linha de baixo.
   A especificidade maior existe pra vencer a regra de 900px la de cima, entao
   os cortes de tela menor tambem precisam vir daqui. */
/* minmax(0, 1fr) e nao 1fr: com "1fr" puro, um endereco ou um nome de servidor
   comprido empurra a propria coluna e as tres saem com larguras diferentes. */
.grid.grid-servidores{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px){ .grid.grid-servidores{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px){ .grid.grid-servidores{ grid-template-columns: 1fr; } }

/* Card = placa de metal parafusada: canto cortado e faixa no topo. */
.card{
  position: relative;
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card::before{
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sangue), transparent 80%);
}
.card:hover{
  border-color: var(--sangue);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(214,40,40,.25);
}
.card h3{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  margin-bottom: 10px;
  /* Sem isto, "BARRICADA/ESCAPE" nao cabe na coluna e vaza pra fora do card:
     item de flex nao encolhe abaixo da maior palavra a menos que a quebra seja
     permitida. */
  overflow-wrap: anywhere;
}
.card h3 .icone{ flex: none; }
.card h3 a{ color: var(--white); }
.card h3 a:hover{ color: var(--sangue-vivo); }
.card p{ color: var(--text-muted); font-size: 14px; margin: 0; }
.card .icone{ color: var(--sangue-vivo); }

.card .tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(214,40,40,.12);
  border: 1px solid rgba(214,40,40,.35);
  color: var(--sangue-vivo);
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 4px 10px;
  margin-bottom: 14px;
}
.card .tag .icone{ width: 13px; height: 13px; }

/* Enderecos do servidor: so aparecem quando preenchidos no painel. */
.servidor-ips{ margin: 12px 0 0; }
.servidor-ip{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 5px;
}
.servidor-ip:last-child{ margin-bottom: 0; }
/* Do segundo em diante o icone nao se repete; o recuo alinha os enderecos. */
.servidor-ip:not(.servidor-ip-principal){ padding-left: 21px; }
.servidor-ip:not(.servidor-ip-principal) code{ color: var(--text-muted); }
.servidor-ip code{
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--toxico);
  background: #0a0c0a;
  border: 1px solid var(--card-border);
  padding: 3px 8px;
}
.servidor-ip .icone{ color: var(--text-muted); width: 14px; height: 14px; }

/* Status do servidor com luz pulsando. */
.server-status{
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--card-border);
}
.dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--toxico);
  box-shadow: 0 0 10px var(--toxico);
  display: inline-block;
  animation: pulso 2s ease-in-out infinite;
}
.dot.off{ background: #4a4a4a; box-shadow: none; animation: none; }
@keyframes pulso{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .35; }
}
@media (prefers-reduced-motion: reduce){
  .dot{ animation: none; }
  .card:hover{ transform: none; }
}

/* ============================================================
   CONTEUDO PADRAO (posts, paginas, BuddyPress)
   ============================================================ */
.content-area{ padding: 56px 0; }

.entry-content, article{
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--sangue);
  border-radius: var(--radius);
  padding: 34px;
  margin-bottom: 26px;
}
article h1{
  font-size: 34px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--card-border);
}
.entry-content-inner h2{
  font-size: 23px;
  margin-top: 34px;
  padding-left: 13px;
  border-left: 3px solid var(--toxico-escuro);
}
.entry-content-inner h3{ margin-top: 26px; color: var(--sangue-vivo); }
.entry-content-inner ul{ padding-left: 20px; }
.entry-content-inner li{ margin-bottom: 7px; }
.entry-content-inner li::marker{ color: var(--sangue-vivo); }
.entry-content-inner code{
  font-family: var(--fonte-mono);
  background: #0a0c0a;
  border: 1px solid var(--card-border);
  color: var(--toxico);
  font-size: 13px;
  padding: 2px 6px;
}
.entry-content-inner strong{ color: var(--white); }
.entry-content-inner blockquote{
  border-left: 3px solid var(--sangue);
  background: rgba(142,27,19,.08);
  margin: 22px 0;
  padding: 14px 20px;
  color: var(--text-muted);
}
.entry-meta{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: -12px 0 20px;
}

/* Formularios (BuddyPress, bbPress, comentarios, login) */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="date"], textarea, select{
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  padding: 11px 14px;
  border-radius: var(--radius);
  width: 100%;
  margin-bottom: 12px;
  font-family: inherit;
}
/* Sem isto o seletor de data do navegador desenha o calendario claro, com o
   icone preto sumindo no fundo escuro. */
input[type="date"]{ color-scheme: dark; }

input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--toxico-escuro);
  box-shadow: 0 0 0 1px rgba(158,240,26,.25);
}
input[type="submit"], button{
  background: var(--sangue);
  color: var(--white);
  border: 1px solid var(--sangue-vivo);
  padding: 11px 24px;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--fonte-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 12px;
  width: auto;
}
input[type="submit"]:hover, button:hover{ background: var(--sangue-vivo); box-shadow: 0 0 18px rgba(214,40,40,.4); }

table{ width: 100%; border-collapse: collapse; }
table th, table td{ border-bottom: 1px solid var(--card-border); padding: 11px; text-align: left; }
table th{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

ul.menu, .buddypress ul{ list-style: none; padding-left: 0; }

/* BuddyPress generico: caixas de listagem viram placas de metal. */
.buddypress div.item-list-tabs, .buddypress .item-list{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 10px 16px;
}
.buddypress div.item-list-tabs ul li a{
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.buddypress div.item-list-tabs ul li.selected a{ color: var(--toxico); }
.buddypress a.button, .buddypress input[type="submit"]{
  background: var(--sangue);
  color: var(--white);
  border: 1px solid var(--sangue-vivo);
  padding: 9px 18px;
  border-radius: 0;
}
.buddypress img.avatar{ border: 1px solid var(--card-border-forte); border-radius: 0; }

/* ============ FORUM (bbPress) ============
   O bbpress.min.css do plugin carrega antes deste arquivo e vem com cores
   claras. Os seletores abaixo repetem a forca dos dele de proposito, pra
   sobrescrever sem precisar de !important. */

.forum-header{
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--card-border);
}
.forum-header h1{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  margin: 0;
}
.forum-header h1 .icone{ color: var(--sangue-vivo); width: 28px; height: 28px; }

#bbpress-forums{
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 30px;
}
#bbpress-forums a{ color: var(--text); }
#bbpress-forums a:hover{ color: var(--toxico); }

/* Caixas de listagem */
#bbpress-forums ul.bbp-lead-topic,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-search-results{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 26px;
}

/* Cabecalho e rodape das listas */
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer{
  background: #0a0c0a;
  border-top: 1px solid var(--card-border);
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 11px 14px;
}
#bbpress-forums li.bbp-header{
  background: #0a0c0a;
  border-top: 0;
  border-bottom: 1px solid var(--sangue);
  border-radius: var(--radius) var(--radius) 0 0;
}
#bbpress-forums li.bbp-footer{ border-radius: 0 0 var(--radius) var(--radius); }

/* Linhas */
#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic{
  border-top: 1px solid var(--card-border);
  padding: 17px 14px;
  transition: background .15s ease, box-shadow .15s ease;
}
#bbpress-forums li.bbp-body > ul:first-child{ border-top: 0; }
#bbpress-forums div.even, #bbpress-forums ul.even{ background-color: transparent; }
#bbpress-forums div.odd,  #bbpress-forums ul.odd{ background-color: rgba(255,255,255,.018); }
/* Conteudo na lixeira, marcado como spam ou esperando aprovacao. O bbPress
   pinta esses tres de branco, rosa e creme (#fee, #fdd, #fef7f1) — cores de
   tema claro que no escuro viravam uma caixa branca no meio do topico, que foi
   exatamente o que o dono do site viu ao mandar um topico pra lixeira. Aqui
   eles ganham a cor do tema: vermelho apagado pro que saiu de circulacao,
   ambar pro que ainda espera decisao. */
#bbpress-forums div.status-trash.even, #bbpress-forums ul.status-trash.even,
#bbpress-forums div.status-trash.odd,  #bbpress-forums ul.status-trash.odd,
#bbpress-forums div.status-spam.even,  #bbpress-forums ul.status-spam.even,
#bbpress-forums div.status-spam.odd,   #bbpress-forums ul.status-spam.odd{
  background-color: rgba(142,27,19,.16);
  box-shadow: inset 3px 0 0 rgba(142,27,19,.7);
}
#bbpress-forums div.status-pending.even, #bbpress-forums ul.status-pending.even,
#bbpress-forums div.status-pending.odd,  #bbpress-forums ul.status-pending.odd{
  background-color: rgba(224,139,30,.12);
  box-shadow: inset 3px 0 0 rgba(224,139,30,.6);
}
/* O plugin pinta ate o fundo dos links de quem esta esperando aprovacao. */
#bbpress-forums ul.status-pending a{ background-color: transparent; }

#bbpress-forums li.bbp-body ul.forum:hover,
#bbpress-forums li.bbp-body ul.topic:hover{
  background-color: rgba(142,27,19,.12);
  box-shadow: inset 3px 0 0 var(--sangue-vivo);
}

/* Titulos de forum e topico */
#bbpress-forums .bbp-forum-title,
#bbpress-forums .bbp-topic-permalink{
  color: var(--white);
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .6px;
  text-transform: uppercase;
}
#bbpress-forums .bbp-forum-title:hover,
#bbpress-forums .bbp-topic-permalink:hover{ color: var(--sangue-vivo); }

#bbpress-forums div.bbp-forum-content,
#bbpress-forums p.bbp-topic-meta,
#bbpress-forums li.bbp-forum-topic-count,
#bbpress-forums li.bbp-forum-reply-count,
#bbpress-forums li.bbp-topic-voice-count,
#bbpress-forums li.bbp-topic-reply-count,
#bbpress-forums li.bbp-forum-freshness,
#bbpress-forums li.bbp-topic-freshness{
  color: var(--text-muted);
  font-size: 13px;
}
#bbpress-forums li.bbp-forum-topic-count,
#bbpress-forums li.bbp-forum-reply-count,
#bbpress-forums li.bbp-topic-voice-count,
#bbpress-forums li.bbp-topic-reply-count{
  font-family: var(--fonte-mono);
  font-size: 12px;
}
#bbpress-forums div.bbp-forum-content{ margin: 6px 0 0; }

/* Forum fechado: em vez de cinza apagado, ganha etiqueta */
#bbpress-forums ul.status-closed,
#bbpress-forums ul.status-closed a{ color: var(--text); }
#bbpress-forums ul.bbp-forum-status-closed .bbp-forum-title::after,
#bbpress-forums ul.status-closed .bbp-topic-permalink::after{
  content: var(--zmbr-etiqueta-lacrado, "lacrado");
  display: inline-block;
  vertical-align: middle;
  background: rgba(224,139,30,.14);
  border: 1px solid rgba(224,139,30,.4);
  color: var(--ambar);
  font-family: var(--fonte-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  margin-left: 9px;
}

/* Topico fixado no topo.

   O !important aqui nao e preguica: o bbPress pinta a linha fixada de
   `#ffffe0 !important`, e importante so perde pra outro importante — a
   especificidade do #bbpress-forums sozinha nao alcanca. Era isso que deixava
   as linhas fixadas amarelas no meio do forum escuro. O font-size volta ao
   normal pelo mesmo motivo (o plugin aumenta pra 1.1em). */
#bbpress-forums ul.sticky,
#bbpress-forums ul.super-sticky,
#bbpress-forums .bbp-topics ul.sticky,
#bbpress-forums .bbp-topics ul.super-sticky,
#bbpress-forums .bbp-topics-front ul.super-sticky,
#bbpress-forums .bbp-forum-content ul.sticky{
  background-color: rgba(142,27,19,.14) !important;
  box-shadow: inset 3px 0 0 var(--sangue);
  font-size: inherit;
}
#bbpress-forums ul.sticky .bbp-topic-permalink::before,
#bbpress-forums ul.super-sticky .bbp-topic-permalink::before{
  content: var(--zmbr-etiqueta-fixado, "alerta");
  display: inline-block;
  vertical-align: middle;
  background: var(--sangue);
  color: var(--white);
  font-family: var(--fonte-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  margin-right: 9px;
}

/* Lista de subforuns dentro da categoria */
#bbpress-forums .bbp-forums-list{
  margin: 12px 0 0;
  padding: 10px 0 0 0;
  border-left: 0;
  border-top: 1px dashed var(--card-border);
}
#bbpress-forums .bbp-forums-list .bbp-forum{
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 12px;
  margin-right: 8px;
}
#bbpress-forums .bbp-forums-list .bbp-forum a{ color: var(--text-muted); }
#bbpress-forums .bbp-forums-list .bbp-forum a:hover{ color: var(--toxico); }

/* Topico e resposta */
#bbpress-forums div.bbp-forum-header,
#bbpress-forums div.bbp-topic-header,
#bbpress-forums div.bbp-reply-header{
  background-color: #0a0c0a;
  border-top: 1px solid var(--card-border);
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 9px 14px;
}
#bbpress-forums div.bbp-forum-author,
#bbpress-forums div.bbp-topic-author,
#bbpress-forums div.bbp-reply-author{
  width: 130px;
  padding: 18px 0;
}
#bbpress-forums div.bbp-forum-author img.avatar,
#bbpress-forums div.bbp-topic-author img.avatar,
#bbpress-forums div.bbp-reply-author img.avatar{
  border-radius: 0;
  border: 1px solid var(--card-border-forte);
  box-shadow: 0 0 0 3px #0a0c0a;
  margin: 0 auto 10px;
}
#bbpress-forums div.bbp-topic-author .bbp-author-name,
#bbpress-forums div.bbp-reply-author .bbp-author-name{
  color: var(--white);
  font-weight: 700;
}
#bbpress-forums div.bbp-forum-author .bbp-author-role,
#bbpress-forums div.bbp-topic-author .bbp-author-role,
#bbpress-forums div.bbp-reply-author .bbp-author-role{
  color: var(--toxico);
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
#bbpress-forums div.bbp-forum-content,
#bbpress-forums div.bbp-topic-content,
#bbpress-forums div.bbp-reply-content{
  margin-left: 145px;
  padding: 18px 16px 18px 0;
}
#bbpress-forums div.bbp-topic-content a,
#bbpress-forums div.bbp-reply-content a{ color: var(--sangue-vivo); }
#bbpress-forums div.bbp-reply-content pre,
#bbpress-forums div.bbp-topic-content pre{
  background: #0a0c0a;
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--toxico-escuro);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--fonte-mono);
  padding: 14px;
  overflow-x: auto;
}

/* Migalhas, busca e acoes */
#bbpress-forums div.bbp-breadcrumb,
#bbpress-forums div.bbp-topic-tags{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#bbpress-forums div.bbp-topic-tags{ color: var(--text-muted); }

/* Caminho de navegacao (Inicio > Foruns > ...) em vermelho, em qualquer
   nivel: o seletor pega o texto, os links e os separadores. */
#bbpress-forums div.bbp-breadcrumb,
#bbpress-forums div.bbp-breadcrumb p,
#bbpress-forums div.bbp-breadcrumb a,
#bbpress-forums div.bbp-breadcrumb span,
#bbpress-forums div.bbp-breadcrumb .bbp-breadcrumb-sep,
#bbpress-forums div.bbp-breadcrumb .bbp-breadcrumb-current{
  color: var(--sangue-vivo);
}
#bbpress-forums div.bbp-breadcrumb a:hover{ color: var(--toxico); }
#bbpress-forums #bbp-search-form #bbp_search{
  display: inline-block;
  width: auto;
  margin-bottom: 0;
}
#bbpress-forums div.bbp-search-form{ margin-bottom: 14px; }
#bbpress-forums span.bbp-admin-links a{
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 10px;
  text-transform: uppercase;
}
#bbpress-forums span.bbp-admin-links a:hover{ color: var(--sangue-vivo); }
.bbp-forum-header a.bbp-forum-permalink,
.bbp-topic-header a.bbp-topic-permalink,
.bbp-reply-header a.bbp-reply-permalink{ color: var(--text-muted); }

/* Paginacao */
#bbpress-forums .bbp-pagination-links a,
#bbpress-forums .bbp-pagination-links span.current{
  border: 1px solid var(--card-border-forte);
  border-radius: 0;
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 12px;
  line-height: 24px;
  padding: 0 10px;
}
#bbpress-forums .bbp-pagination-links a:hover{
  background: var(--bg-alt);
  border: 1px solid var(--toxico-escuro);
  color: var(--toxico);
  opacity: 1;
}
#bbpress-forums .bbp-pagination-links span.current{
  background: var(--sangue);
  border: 1px solid var(--sangue-vivo);
  color: var(--white);
  opacity: 1;
}
.bbp-pagination-count{ color: var(--text-muted); font-family: var(--fonte-mono); font-size: 12px; }

/* Formularios (novo topico, resposta, login, cadastro) */
#bbpress-forums fieldset.bbp-form{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--sangue);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 26px;
}
#bbpress-forums fieldset.bbp-form legend{
  color: var(--white);
  font-family: var(--fonte-titulo);
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 8px;
}
#bbpress-forums fieldset.bbp-form label{
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
#bbpress-forums fieldset.bbp-form select,
#bbpress-forums fieldset.bbp-form input[type="text"],
#bbpress-forums fieldset.bbp-form input[type="password"]{
  height: auto;
  min-height: 42px;
  padding: 11px 14px;
}
#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content{
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  font-size: 14px;
}
#bbpress-forums div.wp-editor-container{
  border: 1px solid var(--card-border-forte);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Duas telas usam esta barra: o forum e o formulario de publicar noticia
   (.noticia-form). Por isso cada seletor daqui carrega os dois escopos — a
   barra na tela de noticias ficava clara, com o aviso de tamanho montado em
   cima dela, porque tudo aqui estava preso a #bbpress-forums.

   A barra de botoes do editor (Negrito, Link, i, b...) vem do proprio
   WordPress, em cinza claro de painel — no meio do formulario escuro ela era a
   unica coisa branca da tela. O editor visual (TinyMCE) desenha dentro de um
   iframe, que CSS de fora nao alcanca; por isso o forum usa a aba "Texto",
   que e HTML normal e obedece a estas regras. */
#bbpress-forums div.quicktags-toolbar,
#bbpress-forums div.wp-editor-tools,
#bbpress-forums div.wp-switch-editor,
.noticia-form div.quicktags-toolbar,
.noticia-form div.wp-editor-tools{
  background: var(--bg-alt);
  border-color: var(--card-border-forte);
}
#bbpress-forums div.quicktags-toolbar input.button,
#bbpress-forums div.quicktags-toolbar input[type="button"],
#bbpress-forums .wp-switch-editor,
.noticia-form div.quicktags-toolbar input.button,
.noticia-form div.quicktags-toolbar input[type="button"]{
  background: var(--card);
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  font-family: var(--fonte-mono);
  font-size: 11px;
  text-shadow: none;
  box-shadow: none;
}
/* O limite de tamanho, escrito na propria barra do editor
   (inc/forum-imagem.php). E recado, nao botao: sem caixa, sem borda.
   Vai numa linha propria embaixo dos botoes — ao lado deles, o texto caia por
   cima da borda da barra, que tem altura fixa no CSS do WordPress. */
#bbpress-forums div.quicktags-toolbar,
.noticia-form div.quicktags-toolbar{
  height: auto;
  overflow: visible;
  padding-bottom: 8px;
}
#bbpress-forums div.quicktags-toolbar .zmbr-img-ajuda,
.noticia-form div.quicktags-toolbar .zmbr-img-ajuda{
  display: block;
  width: 100%;
  clear: both;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--sangue-vivo);
  margin: 8px 0 0;
}
#bbpress-forums div.quicktags-toolbar input.button:hover,
#bbpress-forums .wp-switch-editor:hover,
.noticia-form div.quicktags-toolbar input.button:hover{
  background: var(--sangue);
  border-color: var(--sangue);
  color: var(--white);
}
#bbpress-forums div.wp-editor-container textarea.wp-editor-area,
.noticia-form div.wp-editor-container textarea.wp-editor-area{
  background: #0a0c0a;
  color: var(--text);
}

div.bbp-submit-wrapper{ margin-bottom: 6px; }

/* Avisos do plugin (precisa entrar, topico fechado, erro de envio) */
#bbpress-forums div.bbp-template-notice,
div.bbp-template-notice{
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--ambar);
  border-radius: var(--radius);
  color: var(--text-muted);
  margin: 0 0 22px;
  padding: 14px 18px;
}
#bbpress-forums div.bbp-template-notice p,
div.bbp-template-notice p{ margin: 0; font-size: 14px; }
#bbpress-forums div.bbp-template-notice.info,
div.bbp-template-notice.info{ border-left-color: var(--toxico-escuro); }
#bbpress-forums div.bbp-template-notice a{ color: var(--sangue-vivo); }

/* Perfil do bbPress (/forum/users/...): a aba aberta vinha com fundo #eee, o
   unico retangulo claro da tela. Vira a mesma marcacao vermelha do resto. */
#bbpress-forums #bbp-single-user-details #bbp-user-navigation li.current a{
  background: rgba(142,27,19,.18);
  border-color: var(--card-border-forte);
  color: var(--white);
  opacity: 1;
}
#bbpress-forums #bbp-single-user-details #bbp-user-navigation a:hover{
  background: var(--bg-alt);
  color: var(--sangue-vivo);
}

/* "Editar meu perfil" pelo forum (/forum/users/<pessoa>/edit/): o plugin pinta
   os campos de #f9f9f9 com seletor de id, que ganha das regras genericas de
   input do tema — davam texto claro sobre fundo claro, ilegivel. */
#bbpress-forums #bbp-your-profile fieldset input,
#bbpress-forums #bbp-your-profile fieldset textarea,
#bbpress-forums #bbp-your-profile fieldset select{
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  color: var(--text);
}
#bbpress-forums #bbp-your-profile fieldset span.description{
  color: var(--text-muted);
  font-size: 12px;
}

/* Medidor de forca de senha (aparece ao editar o proprio perfil pelo forum).
   As quatro cores do plugin sao claras e o texto dentro delas e escuro — o que
   funciona, mas so se o fundo continuar claro; e o que fica aqui. */
#bbpress-forums #password #pass-strength-result{
  background-color: var(--bg-alt);
  border: 1px solid var(--card-border-forte);
  color: var(--text);
}
#bbpress-forums #password #pass-strength-result.short,
#bbpress-forums #password #pass-strength-result.bad,
#bbpress-forums #password #pass-strength-result.good,
#bbpress-forums #password #pass-strength-result.strong{ color: #101210; }

/* Widgets do forum na barra lateral */
.widget .bbp-login-form label{ color: var(--text-muted); font-size: 12px; }
.widget .bbp-login-form .bbp-username input,
.widget .bbp-login-form .bbp-password input{ width: 100%; }
.widget .bbp-logged-in img.avatar{
  border-radius: 0;
  border: 1px solid var(--card-border-forte);
  float: left;
  margin: 0 12px 0 0;
}
.widget .bbp-login-links{ font-size: 12px; }
/* Os widgets do bbPress herdam o mesmo recuo das listas do WordPress (ver o
   bloco "Cada item da lista e um item" mais abaixo): sem o padding-left, a
   marca vermelha do ::before cai por cima da primeira palavra. */
.widget ul.bbp-forums-widget li,
.widget ul.bbp-topics-widget li,
.widget ul.bbp-replies-widget li{
  border-bottom: 1px solid var(--card-border);
  padding: 10px 0 10px 14px;
  font-size: 13px;
}
.widget ul li:last-child{ border-bottom: 0; }

/* Forum no celular: as colunas do plugin sao float com % fixa */
@media (max-width: 780px){
  #bbpress-forums li.bbp-forum-info,
  #bbpress-forums li.bbp-topic-title{ float: none; width: 100%; }
  #bbpress-forums li.bbp-forum-topic-count,
  #bbpress-forums li.bbp-forum-reply-count,
  #bbpress-forums li.bbp-topic-voice-count,
  #bbpress-forums li.bbp-topic-reply-count,
  #bbpress-forums li.bbp-forum-freshness,
  #bbpress-forums li.bbp-topic-freshness{
    float: none;
    display: inline-block;
    width: auto;
    margin: 8px 18px 0 0;
    text-align: left;
  }
  #bbpress-forums li.bbp-header ul.forum-titles{ display: none; }
  #bbpress-forums div.bbp-forum-author,
  #bbpress-forums div.bbp-topic-author,
  #bbpress-forums div.bbp-reply-author{
    float: none;
    width: 100%;
    text-align: left;
    padding: 12px 14px 0;
  }
  #bbpress-forums div.bbp-forum-author img.avatar,
  #bbpress-forums div.bbp-topic-author img.avatar,
  #bbpress-forums div.bbp-reply-author img.avatar{
    float: left;
    margin: 0 10px 0 0;
    max-width: 40px;
  }
  #bbpress-forums div.bbp-forum-content,
  #bbpress-forums div.bbp-topic-content,
  #bbpress-forums div.bbp-reply-content{
    margin-left: 0;
    padding: 14px;
  }
}

/* ============================================================
   FAIXAS LATERAIS (parceiros, ads)
   Ficam na margem que sobra ao lado do container de 1160px. A
   largura vem de calc() sobre esse espaco, entao a faixa nunca
   invade o conteudo: o que nao couber quebra pra linha de baixo,
   dentro da propria faixa. Abaixo de 1560px nao ha margem util e
   a faixa vira uma tira normal, no fim da secao.
   ============================================================ */
/* Grade de tres colunas em vez de posicionamento absoluto: as faixas ocupam
   as margens de verdade, entao a secao cresce junto com elas. Com absolute, um
   monte de parceiros deixava a faixa mais alta que a secao e ela passava por
   cima do bloco seguinte. */
/* Imagem de fundo de uma faixa (escolhida no Personalizar).
   Fica num pseudo-elemento com opacidade propria, atras do conteudo: assim a
   imagem clareia sem levar junto o texto que esta por cima. O gradiente escuro
   por cima dela segura o contraste nas bordas, onde o card encosta. */
.secao-fundo{ position: relative; overflow: hidden; }
/* Nas paginas o fundo cobre a area de conteudo inteira, entao ela precisa do
   respiro que antes vinha do .content-area interno. */
.content-area.secao-fundo{ padding: 56px 0; }
.secao-fundo::before{
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}
.secao-fundo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,8,7,.75), rgba(7,8,7,.45) 40%, rgba(7,8,7,.85));
  pointer-events: none;
  z-index: 0;
}
/* Conteudo por cima das duas camadas. */
.secao-fundo > *{ position: relative; z-index: 1; }

.section.com-trilhos{
  display: grid;
  grid-template-columns: 1fr min(1160px, 100% - 40px) 1fr;
  column-gap: 20px;
  align-items: start;
}
/* A linha e fixada nos tres: sem isso, o posicionamento automatico coloca as
   faixas na linha 1 e joga o conteudo (que vem depois no HTML e pede a coluna
   2, ja ultrapassada pelo cursor) pra linha 2 — o conteudo despencava meia
   tela abaixo das faixas. */
.section.com-trilhos > .container{ grid-column: 2; grid-row: 1; max-width: none; }
.section.com-trilhos > .trilho-lateral{ grid-column: 1; grid-row: 1; }
.section.com-trilhos > .trilho-direita{ grid-column: 3; grid-row: 1; }

.trilho-lateral{
  /* Uma coluna so, sempre: cabe um painel de largura, e painel novo desce.
     Lado a lado a faixa avancava sobre a margem e empurrava a leitura do
     conteudo pra direita — foi o que aconteceu com cinco parceiros, que viram
     dois paineis. Como a faixa vive na margem, ela cresce **pra baixo**, que e
     o unico lado onde sobra espaco. */
  max-width: 196px;
  /* Encosta no conteudo: a faixa da esquerda alinha pela direita. O padding
     evita que o painel cole na borda da janela. */
  margin-left: auto;
  padding-left: 20px;
  /* Desce a faixa ate a altura do primeiro card, em vez de comecar junto com
     o titulo da secao: 94px e o que o bloco "titulo + linha de apoio" ocupa. */
  padding-top: 94px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  z-index: 2;
}

.painel-trilho{
  /* Numa coluna, `flex: 1 1 …` cresceria na **altura** e esticaria o painel
     ate o fim da faixa. Aqui a largura e fixa e a altura e a do conteudo. */
  flex: 0 0 auto;
  width: 176px;
  min-width: 132px;
  max-width: 100%;
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px 14px 16px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.painel-titulo{
  font-size: 14px;
  letter-spacing: 1.4px;
  color: var(--toxico);
  text-align: center;
  padding-bottom: 9px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--card-border);
}

.parceiro{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  background: rgba(0,0,0,.25);
  transition: border-color .15s ease, transform .15s ease;
}
.parceiro:last-child{ margin-bottom: 0; }
.parceiro:hover{ border-color: var(--sangue); transform: translateY(-2px); }

/* A logo se ajusta a caixa: arquivo grande nao estica o painel. */
.parceiro-logo{
  max-width: 100%;
  max-height: 92px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.parceiro-nome{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

/* A faixa da direita e o espelho da esquerda: alinha pelo lado de dentro e
   cresce pra fora. */
.trilho-direita{
  margin-left: 0;
  margin-right: auto;
  padding-left: 0;
  padding-right: 20px;
  flex-direction: row;
  justify-content: flex-start;
}

/* ---- Posts destacados (inc/destaques.php) ---- */
.painel-destaques{ max-width: 200px; flex: 1 1 200px; }

/* Mesma conversa do widget de posts recentes: um destaque sem capa e so data
   e titulo, e dois deles seguidos liam como um texto so. A linha tracejada
   sozinha nao dava conta — com titulo em caixa alta de duas linhas, ela some
   no meio da mancha. Agora sao tres sinais: mais respiro, linha continua e a
   marca vermelha comecando cada item. */
.destaque{
  position: relative;
  display: block;
  padding: 12px 0 12px 14px;
  border-top: 1px solid var(--card-border);
}
.destaque::before{
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 2px;
  background: var(--sangue-vivo);
}
.destaque:first-of-type{ border-top: 0; padding-top: 0; }
.destaque:first-of-type::before{ top: 5px; }

.destaque-capa{
  width: 100%;
  height: 78px;
  object-fit: cover;
  margin-bottom: 8px;
  border: 1px solid var(--card-border);
  filter: grayscale(.4);
  transition: filter .15s ease;
}
.destaque:hover .destaque-capa{ filter: none; }

.destaque-data{
  display: block;
  font-family: var(--fonte-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.destaque-titulo{
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--white);
}
.destaque:hover .destaque-titulo{ color: var(--sangue-vivo); }

/* ---- Anuncios (inc/anuncios.php) ----
   O espaco util e de 160px: e a largura dos formatos verticais que as redes
   servem bem numa lateral (160x600 e 120x600). Altura livre — cortar anuncio
   de rede e proibido pelas politicas delas. */
.painel-anuncios{ max-width: 192px; flex: 1 1 192px; }
.trilho-anuncios{ max-width: 420px; }

/* ---- Anuncio dentro da noticia (inc/anuncios.php) ---- */
/* Ele mora no meio do texto, entao a caixa nao pode parecer um paragrafo: fio
   em cima e embaixo separam do que se estava lendo, e o rotulo "Publicidade"
   fica onde a pessoa o encontra antes de clicar — exigencia das redes, e
   tambem o que impede que o anuncio passe por conteudo do site. */
.anuncio-no-texto{
  display: block;
  margin: 30px 0;
  padding: 18px 0;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  text-align: center;
}
.anuncio-no-texto .painel-trilho{
  /* No meio do texto a caixa nao repete o fundo de painel: dois retangulos
     encaixados, um dentro do outro, e o que faz o bloco parecer um erro. */
  background: none;
  border: 0;
  padding: 0;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
.anuncio-no-texto .painel-titulo{ border-bottom: 0; margin-bottom: 10px; padding-bottom: 0; }
/* O formato de dentro do texto e largo (retangulo/leaderboard), nao o de 160px
   da margem: aqui ha a largura da coluna inteira. */
.anuncio-no-texto .anuncio{ max-width: 728px; margin: 0 auto 12px; }
.anuncio-no-texto .anuncio:last-child{ margin-bottom: 0; }
/* **Teto de altura, e so no banner proprio.** Sem ele, um banner quadrado (o
   logo do cla, por exemplo) chega em 700px de altura e toma a tela inteira no
   meio da leitura — foi o que aconteceu na primeira versao. `width: auto`
   junto pra imagem encolher pelos dois lados e nao achatar.

   O bloco de rede (`.anuncio-codigo`) fica **de fora deste teto** de proposito:
   quem decide o tamanho ali e o Google, e cortar o quadro do anuncio e
   violacao das politicas do AdSense. */
.anuncio-no-texto .anuncio-imagem{ width: auto; max-width: 100%; max-height: 160px; margin: 0 auto; }

/* ---- Anuncio no fim da coluna da direita ---- */
/* Acompanha a largura da coluna e o desenho dos widgets ao lado, pra nao
   parecer coisa colada de fora. */
/* No topico o bloco fica **entre** duas mensagens, e nao dentro de uma delas:
   a lista de respostas do bbPress e uma pilha de caixas, e ele entra como mais
   um item dessa pilha. Sem `list-style` porque o pai e uma lista e o marcador
   apareceria do lado do anuncio. */
.anuncio-no-topico{
  list-style: none;
  margin: 18px 0;
  padding: 16px 0;
}

.anuncio-lateral{ display: block; width: 100%; }
.anuncio-lateral .anuncio{ max-width: 300px; margin: 0 auto 12px; }
.anuncio-lateral .anuncio-imagem{ width: auto; max-width: 100%; max-height: 300px; margin: 0 auto; }

.anuncio{
  display: block;
  width: 100%;
  max-width: 160px;
  margin: 0 auto 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid transparent;
  padding: 6px;
  transition: border-color .15s ease;
}
.anuncio:last-child{ margin-bottom: 0; }
.anuncio:hover{ border-color: var(--sangue); }
.anuncio-imagem{ width: 100%; height: auto; }

/* Bloco da rede: nao mexer no que vem de la alem de conter a largura. */
.anuncio-codigo{ overflow: hidden; padding: 0; background: none; border: 0; }
.anuncio-codigo :is(iframe, ins, img){ max-width: 100%; }

/* ---- Publicidade em faixa horizontal (fim da secao de servidores) ----
   Aqui nao ha margem lateral estreita mandando no tamanho: os anuncios ficam
   lado a lado, centralizados, e podem usar formatos deitados (728x90 e afins).
   O que nao couber na linha desce, sem estourar. */
.trilho-horizontal{
  margin: 40px auto 0;
  padding: 0;
  max-width: 100%;
  width: 100%;
}
.trilho-horizontal .painel-trilho{
  width: 100%;
  max-width: none;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background: none;
  border: 0;
  clip-path: none;
  padding: 0;
}
.trilho-horizontal .painel-titulo{
  flex: 1 1 100%;
  border-bottom: 0;
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  margin: 0;
  padding: 0;
}
.trilho-horizontal .anuncio{
  width: auto;
  max-width: min(728px, 100%);
  margin: 0;
}
.trilho-horizontal .anuncio-imagem{ width: auto; max-height: 120px; }

/* A mesma faixa fechando as demais paginas, logo antes do rodape. */
/* A faixa sobe: os 60px de margem mais os 56px de respiro do .content-area
   somavam 116px de vazio entre o fim do conteudo e o anuncio — na noticia, com
   o formulario de comentario acima, aquilo lia como "a pagina acabou" e o
   anuncio aparecia sozinho la embaixo. */
.anuncios-rodape{
  padding: 0 0 24px;
  border-top: 1px solid var(--card-border);
  margin-top: 0;
}
.anuncios-rodape .trilho-horizontal{ margin-top: 12px; }

/* A maior parte do vazio nao era da faixa: eram os 56px de respiro do
   .content-area, que existem pra separar o conteudo do rodape. Quando a faixa
   esta na tela, e ela que faz essa separacao — com o fio proprio em cima —,
   entao o respiro encolhe. O `:has()` limita isso as telas que **tem** a
   faixa: as outras continuam com os 56px de sempre. Navegador sem `:has()`
   simplesmente mantem o espaco de antes, sem quebrar nada. */
body:has(.anuncios-rodape) .content-area{ padding-bottom: 12px; }

/* Caixa que so o administrador ve quando nao ha parceiro/anuncio nenhum. */
.painel-vazio{ border-style: dashed; }
.parceiro-add{
  display: block;
  text-align: center;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 18px 8px;
  border: 1px dashed var(--card-border-forte);
  color: var(--text-muted);
}
.parceiro-add:hover{ border-color: var(--toxico-escuro); color: var(--toxico); }
.painel-dica{
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
  margin: 10px 0 0;
  text-align: center;
}

/* ---- As outras noticias, na margem esquerda (inc/noticias-geral.php) ---- */
/* A mesma grade de tres colunas da home, mas **sem** a classe .section: quem da
   o respiro vertical aqui e o .content-area de dentro, e somar os 70px da secao
   abriria um buraco no alto da noticia. */
/* A faixa e uma **coluna de verdade**, de 373px, e nao a sobra da margem.
   Enquanto ela era `1fr` de `1fr / 1160 / 1fr`, a largura dela era o que
   restasse dividido por dois: a 1600px isso da 213, e o painel abria com 173
   dos 353 que ele precisa para ler como par do "Posts recentes" da direita —
   defeito que existia em toda largura, nao so na faixa que empilhava.

   O par (373 + 20 + 1160) pede 1553px + respiro; acima disso o `1fr` da
   direita centraliza o conjunto, e abaixo o `minmax(0, …)` deixa a coluna do
   meio encolher em vez de empurrar a faixa pra fora da janela. */
.noticia-trilhos{
  display: grid;
  grid-template-columns: minmax(0, 373px) minmax(0, 1160px) 1fr;
  column-gap: 20px;
  align-items: start;
  justify-content: center;
  padding-left: 20px;
  padding-right: 20px;
}
/* A linha e fixada nos dois pelo mesmo motivo da grade da home: sem isso o
   conteudo, que vem depois no HTML, despenca pra linha 2. */
.noticia-trilhos > .content-area{ grid-column: 2; grid-row: 1; max-width: none; }
.noticia-trilhos > .trilho-lateral{
  grid-column: 1;
  grid-row: 1;
  /* A faixa nasce na mesma linha do "Posts recentes" da direita, e nao no topo
     da noticia: sao 56px do padding do .content-area mais 174px, que e o que a
     caixa de busca ocupa acima dele. Medido na tela, nao chutado.

     Esse 174 acompanha o **primeiro widget** da barra lateral: trocar a busca
     por outra coisa em Aparencia > Widgets desalinha as duas colunas, e o
     numero aqui e o que se ajusta. */
  padding-top: calc(56px + 174px);
}
/* A faixa acompanha a largura da coluna da direita (353px, a mesma do widget
   "Posts recentes"), para as duas colunas lerem como um par. Ela e **fluida**,
   e nao fixa em 353: a margem onde ela mora encolhe junto com a tela — a 1560px
   sobram uns 180px de cada lado —, e uma largura cravada vazaria para fora da
   janela. Entao ela toma a coluna inteira e para nos 353. */
.noticia-trilhos > .trilho-lateral{ width: 100%; max-width: 373px; }
.painel-noticias{ width: 100%; max-width: 353px; }

/* ---- 1280 a 1591px: os trilhos continuam do lado, com a coluna estreita ----

   O empilhamento comecava em 1560px, e isso pegava **1920 em janela pela
   metade, 1440, 1366 e 1280** — as larguras em que a maioria olha o site. A
   margem onde os trilhos moram e `(tela - 1160) / 2`, entao a 1280 ela vale
   60px: nao cabia um painel de 176px e o CSS jogava tudo pra cima do conteudo.

   O teto e **1591 e nao 1560** porque o layout largo (1160 + 196 + 196 + os
   dois vaos de 20) precisa de 1592px. Medido a 1561: o trilho da direita saia
   31px fora da janela — defeito que ja existia antes desta mudanca, dentro da
   faixa que agora esta coberta.

   A saida e **estreitar a coluna central e os trilhos**, mantendo os tres lado
   a lado ate 720p, que foi o pedido dele. A conta a 1280: 2 x 146 (trilho de
   130 + vao de 16) = 292, mais 932 de conteudo = 1224, sobrando 28px de
   respiro nas bordas — medido: com 948 o painel da esquerda encostava na borda
   da janela (folga 0). Nao ha numero de posts a mexer: com a grade em duas
   colunas, os mesmos 6 posts viram 3 fileiras de 2. */
@media (max-width: 1591px) and (min-width: 1280px){
  .section.com-trilhos{
    grid-template-columns: 1fr min(932px, 100% - 40px) 1fr;
    column-gap: 16px;
  }
  /* 146px = 130 de painel + 16 de recuo. Medido a 1280: com 164/144 o painel
     encostava na borda da janela.

     Tudo aqui e preso ao `.section.com-trilhos` de proposito: `.trilho-lateral`
     e `.painel-trilho` sao as **mesmas classes** da faixa "Outras noticias" da
     pagina de uma noticia, que tem margem propria e cabe em 373px. Sem o
     prefixo, esses 130px vazavam pra la e a lista abria com um terco da
     largura — foi exatamente o que aconteceu. */
  .section.com-trilhos > .trilho-lateral{ max-width: 146px; padding-left: 16px; }
  .section.com-trilhos > .trilho-direita{ padding-left: 0; padding-right: 16px; }
  .section.com-trilhos .painel-trilho{ width: 130px; min-width: 110px; }
  /* O painel de destaques declara a largura dele em `flex-basis`; sem baixar
     aqui ele ignoraria os 130px e voltaria a estourar a margem. */
  .painel-destaques{ max-width: 130px; flex: 1 1 130px; }
  /* Duas colunas: a grade e `repeat(3, 1fr)` fixo, entao com 948px os tres
     cards sairiam com ~300px e o texto do card ficaria apertado. */
  .section.com-trilhos .grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---- Abaixo de 1280px: os dois trilhos viram UMA tira horizontal ----

   1280 (720p) e o piso pedido por ele para os trilhos ao lado. Abaixo disso —
   tablet e celular — nao ha margem que caiba painel nenhum, e empilhar as duas
   caixas uma sobre a outra comia meia tela antes de a pessoa chegar no
   conteudo. Como tira, "Parceiros" e "Posts destacados" ficam lado a lado numa
   linha so, acima da grade.

   **Quem vira linha e a `.section`, nao cada trilho.** Os dois trilhos sao
   elementos irmaos no HTML (`zmbr_parceiros_render()` e
   `zmbr_destaques_render()`, antes do `.container`), entao mandar cada um ser
   `flex-direction: row` alinha o painel dentro dele e nao um trilho com o
   outro — medido a 1280: os paineis continuavam empilhados, 350px de altura
   morta antes do conteudo. Com a secao em `flex-wrap`, os dois trilhos dividem
   a primeira linha e o `.container` (que pede 100%) cai pra linha de baixo. */
@media (max-width: 1279px){
  .section.com-trilhos{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 20px;
    /* Sem isto, no celular (uma coluna) o painel encosta nas duas bordas da
       tela — medido a 390px: o trilho saia com os 390 inteiros. */
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Cada trilho e meia linha; abaixo de ~700px o flex-wrap quebra e cada um
     toma a linha inteira, que e o certo no celular. */
  .section.com-trilhos > .trilho-lateral{
    flex: 1 1 280px;
    max-width: 420px;
    width: auto;
    /* Como tira ela nao acompanha card nenhum: sem o recuo do desktop. */
    padding: 0;
    margin: 0 0 24px;
    align-items: stretch;
  }
  /* O conteudo toma a linha inteira, embaixo da tira. As margens negativas
     desfazem o padding que a secao ganhou para o celular: o .container ja tem
     o respiro proprio dele, e somar os dois estreitava a grade de posts. */
  .section.com-trilhos > .container{
    flex: 1 1 100%;
    margin-left: -20px;
    margin-right: -20px;
  }
  /* Na tira o trilho da direita perde o espelhamento: os dois ficam iguais. */
  .section.com-trilhos > .trilho-direita{ margin: 0 0 24px; padding: 0; justify-content: flex-start; }
  /* O painel preenche a metade que couber, em vez dos 176px do desktop.
     Preso a secao pelo mesmo motivo do bloco de cima: a faixa "Outras
     noticias" usa estas mesmas classes e tem regra propria. */
  .section.com-trilhos .painel-trilho{ width: 100%; max-width: none; min-width: 0; flex: 0 0 auto; }
  .painel-destaques{ max-width: none; flex: 0 0 auto; }
  /* Logo de parceiro em linha, para varios caberem na largura da tira. */
  .section.com-trilhos .painel-trilho .parceiro{ display: inline-flex; margin: 0 6px 6px 0; }
}

/* ---- 1280 a 1560px: "Outras noticias" continua do lado da noticia ----

   Mesmo problema e mesma solucao dos trilhos da home: o empilhamento comecava
   em 1560px, e nessa faixa estao 1440, 1366 e 1280 — as larguras em que a
   maioria le o site. A margem onde a faixa mora vale `(tela - 1160) / 2`, ou
   seja 60px a 1280: nao cabia a coluna de 373 e o CSS jogava a lista pro fim
   da pagina, encolhida no canto direito, porque o .content-area de dentro tem
   grade propria (a noticia mais o "Posts recentes").

   Entao aqui quem encolhe e a **coluna do meio**, como na home: a faixa fica
   nos 373px dela (o `minmax` da regra de cima ja garante isso) e o conteudo
   toma o que sobrar.

   O piso e **1000 e nao 1280** (que e o da home) porque aqui ha **uma** faixa
   e nao duas: a home precisa de 1160 + 2 trilhos, esta pagina precisa de
   373 + 16 + o conteudo. A 1000px sobram 591px de noticia, que ainda le bem.
   Abaixo disso a noticia ficaria estreita demais e a faixa desce. */
@media (max-width: 1560px) and (min-width: 1000px){
  .noticia-trilhos{
    grid-template-columns: 373px minmax(0, 1fr) 0;
    column-gap: 16px;
  }
}

/* ---- Abaixo de 1000px: a faixa vira coluna, DEPOIS da noticia ----

   Aqui ela segue **outra** regra que a da home: NAO vira tira em cima do
   conteudo — quem clicou num titulo quer a noticia, e nao a lista de outros
   titulos antes dela. Vira coluna com a ordem trocada, entao a lista fecha a
   leitura.

   E ela **mantem os 373px** em vez de tomar a largura inteira: esticada, a
   lista virava um bloco gigante de titulos gigantes no fim da pagina — foi o
   que ele viu. Como coluna estreita e centrada, continua lendo como a mesma
   caixa que estava do lado. */
@media (max-width: 999px){
  .noticia-trilhos{ display: flex; flex-direction: column; }
  .noticia-trilhos > .content-area{ order: 1; width: 100%; }
  .noticia-trilhos > .trilho-lateral{
    order: 2;
    padding-top: 0;
    width: 100%;
    max-width: 373px;
    /* `align-items: center` no pai nao serve: ele centraria contra o filho
       mais largo (o .content-area), e a faixa saia encostada na direita —
       medido a 900px, comecando em x=492. A margem automatica centra contra a
       **linha**, que e o que se quer. */
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- 781 a 999px: a faixa entra na coluna do "Posts recentes" ----

   Solta, ela caia no **fim da pagina** — embaixo do anuncio e do formulario de
   comentario (medido a 871px: y=1875, com o "Posts recentes" acabando em
   1116). O lugar dela e logo embaixo do "Posts recentes", que e a copia
   impressa por zmbr_noticias_trilho_na_lateral(): ali ela acompanha o bloco de
   links do site, esteja a barra lateral do lado (acima de 901px) ou ja
   empilhada (abaixo).

   Acima de 999px quem aparece e a do lado da noticia. Abaixo de 781px — o
   mesmo ponto em que o menu do site vira botao, ou seja, celular — volta a
   valer a caixa solta no fim, que foi o que ele pediu pra manter. */
.trilho-noticias-lateral{ display: none; }
@media (max-width: 999px) and (min-width: 781px){
  /* A copia da barra lateral entra... */
  .sidebar > .trilho-noticias-lateral{
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0 0 24px;
  }
  .sidebar > .trilho-noticias-lateral .painel-noticias{ max-width: none; width: 100%; }
  /* ...e a solta sai, ou a lista apareceria duas vezes. */
  .noticia-trilhos > .trilho-noticias{ display: none; }
}

/* ============================================================
   SELO DE PAPEL (inc/perfil.php)
   Cores por papel: quanto mais poder, mais quente. O cinza e para
   quem so olha; o vermelho fechado, para quem foi punido.
   ============================================================ */
.zmbr-papel{
  /* flex (e nao inline-flex) de proposito: e um contentor de bloco, entao o
     selo cai numa linha propria abaixo do "Ativo agora" em vez de disputar a
     linha com ele. O width evita que a caixa estique ate a borda. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-top: 8px;
  border: 1px solid var(--card-border-forte);
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
  white-space: nowrap;
}
.zmbr-papel .icone{ width: 13px; height: 13px; }

.zmbr-papel[data-papel="bbp_keymaster"],
.zmbr-papel[data-papel="administrator"]{
  border-color: rgba(214,40,40,.5);
  background: rgba(214,40,40,.12);
  color: var(--sangue-vivo);
}
.zmbr-papel[data-papel="bbp_moderator"]{
  border-color: rgba(224,139,30,.5);
  background: rgba(224,139,30,.12);
  color: var(--ambar);
}
.zmbr-papel[data-papel="zmbr_membro_cla"]{
  border-color: rgba(158,240,26,.45);
  background: rgba(158,240,26,.1);
  color: var(--toxico);
}
.zmbr-papel[data-papel="bbp_participant"]{
  border-color: var(--card-border-forte);
  color: var(--text);
}
.zmbr-papel[data-papel="bbp_blocked"]{
  border-color: rgba(142,27,19,.6);
  background: rgba(142,27,19,.18);
  color: #b06a63;
  text-decoration: line-through;
}

/* Admin de servidor de jogo (inc/admins-servidor.php). Azul frio de proposito:
   nao e papel do cla nem da poder no site — e de que servidor a pessoa cuida.
   Assim ninguem confunde "Admin CS2" com a Administracao do site. */
.zmbr-papel.papel-servidor,
.zmbr-papel[data-papel="zmbr_admin_servidor"]{
  border-color: rgba(96,165,250,.45);
  background: rgba(96,165,250,.1);
  color: #7fb2f0;
  text-decoration: none;
}
/* O nome do jogo e escrito por quem cadastra o servidor: pode ser "CS2" ou
   "Left 4 Dead 2". Na coluna do autor no forum (130px) o nome comprido tem que
   quebrar em duas linhas em vez de vazar por cima do texto do post. */
.zmbr-papel.papel-servidor{ max-width: 100%; }
.zmbr-papel.papel-servidor.papel-forum{ white-space: normal; text-align: center; }

/* Na lista de membros o selo fica em linha propria, sob o nome. */
.zmbr-papel.papel-lista{ margin-top: 6px; font-size: 9px; padding: 3px 8px; }

/* ============ Admin Geral (inc/admins-servidor.php) ============
   A unica etiqueta do site com **movimento continuo**, e de proposito: ela nao
   sai do menu Servidores como as outras, existe sempre e diz "esta pessoa cuida
   de tudo". Ambar da fita de isolamento em vez do azul dos servidores, fita
   correndo na borda de baixo e o simbolo de risco girando devagar — o
   movimento e o que separa, entao ela continua legivel em qualquer tela.

   O `padding-bottom` maior abre o lugar da fita: sem ele o filete passaria por
   cima da ultima linha do texto quando o selo quebra em duas linhas no forum. */
.zmbr-papel.papel-admin-geral,
.zmbr-papel[data-papel="zmbr_admin_geral"]{
  position: relative;
  overflow: hidden;
  border-color: var(--ambar-escuro, #a37a0c);
  background: rgba(240,180,26,.10);
  color: var(--ambar);
  text-decoration: none;
  padding-bottom: 7px;
}
.zmbr-papel.papel-admin-geral::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: repeating-linear-gradient(45deg, var(--ambar) 0 6px, #0a0c0a 6px 12px);
  background-size: 17px 3px;
  animation: zmbr-fita-corre 1.4s linear infinite;
}
.zmbr-papel.papel-admin-geral svg{ animation: zmbr-gira 6s linear infinite; }
@keyframes zmbr-fita-corre{ to{ background-position: 17px 0; } }
@keyframes zmbr-gira{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  /* Quem pediu menos movimento fica com a fita parada — ela continua sendo o
     que distingue a etiqueta, so nao corre. */
  .zmbr-papel.papel-admin-geral::after,
  .zmbr-papel.papel-admin-geral svg{ animation: none; }
}

/* ============================================================
   FICHA DO AUTOR NO FORUM (inc/ficha.php)
   Numeros pequenos, em mono, na coluna estreita do autor — sem competir com o
   nome nem com os selos, que sao o que se le primeiro.
   ============================================================ */
.zmbr-ficha{
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .6px;
}
.zmbr-ficha .ficha-linha{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.zmbr-ficha .ficha-rotulo{ color: var(--text-muted); text-transform: uppercase; }
.zmbr-ficha .ficha-valor{ color: var(--text); font-weight: 700; }

/* ============================================================
   DESTAQUES DA SEMANA (inc/semana.php)
   Tres quadros lado a lado. Cada um e um cartao com o fio ambar na lateral —
   ambar porque isto e um placar, coisa que chama atencao sem ser acao.
   ============================================================ */
.semana-grade{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
/* Teto de largura no cartao, e nao auto-fill na grade: numa semana em que so
   um quadro tem conteudo (comum enquanto as reacoes sao novas), o auto-fit
   esticava aquele cartao sozinho pelos 1120px da coluna. Com o teto ele fica
   do tamanho de um cartao, e tres continuam dividindo a linha. */
.semana-caixa{ max-width: 420px; }
.semana-caixa{
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--ambar);
}
.semana-caixa-titulo{
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 14px;
}
.semana-lista{ list-style: none; margin: 0; padding: 0; }
.semana-pessoa{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--card-border);
}
.semana-pessoa:last-child{ border-bottom: 0; }
.semana-pessoa a{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
}
.semana-pessoa a:hover{ color: var(--sangue-vivo); }
.semana-avatar{
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--card-border-forte);
}
/* Apelido comprido nao pode empurrar a contagem pra fora do cartao. */
.semana-nome{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.semana-conta{
  flex: none;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.semana-topico{
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}
.semana-topico:hover{ color: var(--sangue-vivo); }

/* ============================================================
   SINAIS DE VIDA NA HOME (inc/vida.php)
   Duas metades: os rostos de quem esta conectado, que e o que se olha, e os
   numeros do forum ao lado, que e o que se confere. Abaixo de 900px viram uma
   coluna so, com os rostos em cima.
   ============================================================ */
.vida-grade{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 26px;
  align-items: start;
}
.vida-lista{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vida-pessoa a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 74px;
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .6px;
  text-align: center;
}
.vida-pessoa a:hover{ color: var(--toxico); }
.vida-avatar{
  width: 44px;
  height: 44px;
  border: 1px solid var(--card-border-forte);
  /* O fio verde e o "esta online": e a cor de sistema do tema, e dispensa
     legenda embaixo de cada rosto. */
  box-shadow: 0 0 0 2px rgba(158,240,26,.35);
}
.vida-pessoa a:hover .vida-avatar{ box-shadow: 0 0 0 2px var(--toxico); }
/* Nome comprido nao pode alargar o rosto ao lado. */
.vida-nome{ max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vida-mais,
.vida-ninguem{ color: var(--text-muted); font-size: 13px; margin: 14px 0 0; }

.vida-numeros{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vida-dado{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--sangue);
  color: var(--text-muted);
}
a.vida-dado:hover{ border-left-color: var(--toxico); }
.vida-numero{
  font-family: var(--fonte-titulo);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--white);
  /* Apelido comprido no "mais novo" nao pode estourar a caixa. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vida-rotulo{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.vida-acao{ margin: 22px 0 0; }

@media (max-width: 900px){
  .vida-grade{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .vida-numeros{ grid-template-columns: 1fr; }
}

/* ============================================================
   REAGIR NO FORUM (inc/reacoes.php)
   Fica embaixo do texto do post, antes da assinatura. Botoes discretos: eles
   repetem em todo post e nao podem competir com o que foi escrito. So a
   reacao que a propria pessoa deu acende.
   ============================================================ */
.zmbr-reacoes{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.zmbr-reacao{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--card-border-forte);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
}
.zmbr-reacao .icone{ width: 14px; height: 14px; }
.zmbr-reacao-total:empty{ display: none; }
.zmbr-reacao-total{
  padding-left: 7px;
  border-left: 1px solid var(--card-border-forte);
  color: var(--text);
}
button.zmbr-reacao:hover{ border-color: var(--toxico); color: var(--toxico); }
/* A sua reacao: cada uma com a cor do que ela quer dizer. */
.zmbr-reacao-minha{ color: var(--white); }
.zmbr-reacao-curtir.zmbr-reacao-minha{ border-color: var(--toxico); background: rgba(158,240,26,.1); color: var(--toxico); }
.zmbr-reacao-concordo.zmbr-reacao-minha{ border-color: var(--ambar); background: rgba(224,139,30,.12); color: var(--ambar); }
.zmbr-reacao-util.zmbr-reacao-minha{ border-color: #4aa3c7; background: rgba(74,163,199,.12); color: #8fcbe8; }
.zmbr-reacao-engracado.zmbr-reacao-minha{ border-color: var(--sangue-vivo); background: rgba(214,40,40,.12); color: var(--sangue-vivo); }
/* Quem nao pode reagir ve o mesmo desenho, sem a mao de clicar. */
span.zmbr-reacao{ cursor: default; }

@media (max-width: 620px){
  .zmbr-reacao{ padding: 5px 9px; }
  .zmbr-reacao .zmbr-reacao-nome{ display: none; }
}

/* ============================================================
   CITACAO NO FORUM (inc/citar.php)
   O trecho citado precisa se ler como "isto e de outra pessoa" num relance,
   sem roubar a atencao do que foi escrito agora: recuo, fio vermelho na
   lateral e o texto um tom abaixo.
   ============================================================ */
#bbpress-forums div.bbp-topic-content blockquote,
#bbpress-forums div.bbp-reply-content blockquote{
  margin: 0 0 16px;
  padding: 12px 16px;
  background: rgba(0,0,0,.28);
  border-left: 3px solid var(--sangue);
  color: var(--text-muted);
  font-size: 14px;
}
#bbpress-forums div.bbp-topic-content blockquote p,
#bbpress-forums div.bbp-reply-content blockquote p{ margin: 0 0 8px; }
#bbpress-forums div.bbp-topic-content blockquote p:last-child,
#bbpress-forums div.bbp-reply-content blockquote p:last-child{ margin-bottom: 0; }
/* Quem escreveu, na cor de quem fala. */
#bbpress-forums div.bbp-topic-content blockquote strong,
#bbpress-forums div.bbp-reply-content blockquote strong{
  color: var(--sangue-vivo);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#bbpress-forums .zmbr-citar{ color: var(--toxico); }
#bbpress-forums .zmbr-citar:hover{ color: var(--white); }

/* Sem IP na tela, a caixa dele fica vazia (o bbPress a desenha pra quem pode
   moderar, e o valor e que sai vazio pra quem nao e Administracao). */
#bbpress-forums .bbp-reply-ip:empty,
#bbpress-forums .bbp-topic-ip:empty{ display: none; }

/* O tempo de casa no cabecalho do perfil, junto do "Ativo agora". */
.zmbr-desde{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-basis: 100%;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.zmbr-desde .icone{ width: 13px; height: 13px; color: var(--toxico); }
.zmbr-desde strong{ color: var(--text); }

/* A assinatura, embaixo do texto do post. Discreta de proposito: ela repete em
   todos os posts da pessoa, entao nao pode disputar com o que foi escrito. */
.zmbr-assinatura{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--card-border);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
}
/* A imagem da assinatura (status de jogo, assinatura da Steam) tem altura
   travada: ela vem de outro site, com o tamanho que aquele site quiser, e uma
   imagem de 600px embaixo de cada resposta transformaria o topico numa rolagem
   de banners. 80px e a altura das assinaturas de Steam. */
.zmbr-assinatura img{
  display: block;
  max-height: 80px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 6px 0 0;
}
.zmbr-assinatura a{ color: var(--text-muted); text-decoration: underline; }
.zmbr-assinatura a:hover{ color: var(--sangue-vivo); }
.zmbr-assinatura a:has(img){ display: inline-block; text-decoration: none; }

/* ============================================================
   NOVIDADES NO FORUM (inc/lidos.php)
   O bloco abre a pagina do forum; a etiqueta "Novo" e o fio verde marcam a
   linha na lista. Verde toxico e a cor de sistema do tema — e o site falando,
   nao alguem falando.
   ============================================================ */
.lidos-bloco{
  margin: 0 0 26px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--toxico);
}
.lidos-titulo{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  letter-spacing: 1px;
  margin: 0 0 14px;
}
.lidos-titulo .icone{ width: 17px; height: 17px; color: var(--toxico); }
.lidos-lista{ list-style: none; margin: 0 0 16px; padding: 0; }
.lidos-lista li{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--card-border);
}
.lidos-lista li:last-child{ border-bottom: 0; }
/* O titulo fica com a sobra da linha e corta com "..." — topico de nome longo
   nao pode empurrar o forum e a hora pra fora. */
.lidos-topico{
  flex: 1 1 260px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 14px;
}
.lidos-topico:hover{ color: var(--sangue-vivo); }
.lidos-onde,
.lidos-quando{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lidos-onde{ color: var(--toxico); }
.lidos-marcar{ margin: 0; }
.lidos-marcar .btn{ font-size: 10px; padding: 7px 14px; }
.lidos-bloco-vazio{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
}
.lidos-bloco-vazio .icone{ width: 16px; height: 16px; color: var(--toxico); }

/* O "pronto, nada pendente" e um recado de confirmacao, e nao um aviso pra
   ficar na tela: ele apaga sozinho depois de alguns segundos. Sem isso, o
   recado so sumia quando a pessoa saia da pagina — quem so atualizava o forum
   via a mesma frase de novo e achava que tinha travado.
   A caixa encolhe junto (max-height, margem, borda e recheio), senao ficaria
   um buraco no lugar dela — mas o encolhimento acontece **de uma vez**, nos
   ultimos milesimos: interpolando a altura, o forum inteiro subia devagar
   junto com o recado, e a pagina parecia estar se mexendo sozinha. Primeiro o
   texto esmaece com a caixa parada; so depois ela sai. */
@keyframes zmbr-lidos-some{
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
.lidos-bloco-vazio{
  /* **Fora do fluxo**, e nao uma caixa no meio do forum. Ocupando espaco, ele
     empurrava a lista de topicos pra baixo enquanto aparecia e a devolvia pro
     lugar ao sumir — a pagina inteira dava um pulo duas vezes por um recado de
     confirmacao. Flutuando no canto, nada em volta se mexe.
     step-end: some de uma vez, sem percorrer valor nenhum. */
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: max-content;
  max-width: min(90vw, 420px);
  margin: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: zmbr-lidos-some 7s step-end forwards;
}
/* Com a barra do WordPress no topo, o cabecalho desce 32px e o recado junto. */
body.admin-bar .lidos-bloco-vazio{ top: 128px; }
@media (max-width: 780px){
  .lidos-bloco-vazio{ top: 86px; max-width: 92vw; }
  body.admin-bar .lidos-bloco-vazio{ top: 132px; }
}

/* A etiqueta na lista de topicos do forum. */
.zmbr-novo{
  display: inline-block;
  padding: 2px 7px;
  margin-right: 4px;
  background: rgba(158,240,26,.14);
  border: 1px solid rgba(158,240,26,.45);
  border-radius: var(--radius);
  color: var(--toxico);
  font-family: var(--fonte-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  vertical-align: middle;
}
/* A linha inteira com novidade ganha um fio verde na lateral. */
#bbpress-forums li.bbp-body ul.zmbr-topico-novo{
  border-left: 3px solid var(--toxico);
  background: rgba(158,240,26,.03);
}

/* ============================================================
   PATENTES (inc/patentes.php)
   Mesma etiqueta dos selos de papel — pro visitante e a mesma coisa: o que a
   pessoa e aqui dentro. A cor sobe com a carreira: praca no tom do texto,
   oficial em ambar, oficial superior em vermelho.
   ============================================================ */
.zmbr-patente{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  white-space: nowrap;
}
.zmbr-patente .icone{ width: 15px; height: 15px; }
.zmbr-patente[data-faixa="oficial"]{
  border-color: rgba(224,139,30,.5);
  background: rgba(224,139,30,.1);
  color: var(--ambar);
}
.zmbr-patente[data-faixa="superior"]{
  border-color: rgba(214,40,40,.5);
  background: rgba(214,40,40,.1);
  color: var(--sangue-vivo);
}
.zmbr-patente.patente-lista{ margin-top: 6px; font-size: 9px; padding: 3px 8px; }
/* Na coluna do autor, no forum: centralizado, como os outros selos de la. */
.zmbr-patente.patente-forum{ margin: 8px auto 0; font-size: 9px; padding: 3px 8px; }

/* Papel extra dentro do bloco do autor, no forum. A coluna do autor e estreita
   e centralizada, entao o selo se centra tambem — como faz o de apoiador, que
   vem logo abaixo. */
.zmbr-papel.papel-forum{ margin: 8px auto 0; font-size: 9px; padding: 3px 8px; }

/* Selo de apoiador (inc/doacoes.php): mesma forma do selo de papel, em ambar,
   pra ler como "outra coisa" e nao como mais um cargo. */
.zmbr-doador{
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-top: 8px;
  border: 1px solid rgba(224,139,30,.55);
  background: rgba(224,139,30,.12);
  color: var(--ambar);
  white-space: nowrap;
}
.zmbr-doador .icone{ width: 13px; height: 13px; }
.zmbr-doador.doador-lista{ margin-top: 6px; font-size: 9px; padding: 3px 8px; }

/* Ao lado do nick (comentarios): tem que caber na linha do nome. */
.zmbr-doador.doador-inline{
  display: inline-flex;
  margin: 0 0 0 8px;
  padding: 2px 7px;
  font-size: 9px;
  vertical-align: middle;
}

/* No forum o selo mora na coluna estreita do autor, centralizado como o resto. */
.bbp-reply-author .zmbr-doador,
.bbp-topic-author .zmbr-doador{ margin: 8px auto 0; }

/* Quem esta em mais de um grupo mostra um selo por papel, lado a lado. */
.zmbr-papeis{ display: flex; flex-wrap: wrap; gap: 6px; }

/* No alto do perfil os selos sao de duas naturezas, e agora se leem como duas
   faixas: em cima **o que a pessoa e aqui dentro** (papel no cla e apoiador),
   embaixo **onde ela esta la fora** (Steam, Google e redes), com um fio entre
   as duas.

   O bloco vira um flex-wrap e cada faixa se resolve sozinha: quem tem que
   ocupar a linha inteira pede flex-basis 100% ("Ativo agora" e a faixa das
   contas), e papeis e apoiador ficam lado a lado no que sobra, descendo de
   linha quando nao couber. Sem isso nao havia como junta-los: eles sao
   impressos por arquivos diferentes, em ganchos diferentes, e nao tem um
   contentor em comum pra receber um flex. */
#item-header-content .item-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#item-header-content .item-meta > .activity,
#item-header-content .item-meta > .zmbr-ligadas{ flex-basis: 100%; }
/* Cada selo traz a margem de que precisa no lugar onde tambem aparece — no
   forum, no comentario, na lista de membros. Aqui dentro quem cuida do espaco e
   o gap do flex, entao **toda** margem propria e zerada de uma vez: era um
   margin-top de 8px no selo de papel que esticava a caixa dele e deixava o
   "Apoiador" 4px fora de linha. Zerar so o que estava torto deixaria o proximo
   selo repetir o erro, entao a regra vale pra todos, inclusive os que vierem. */
#item-header-content .item-meta [class*="zmbr-"]{ margin: 0; }
#item-header-content .item-meta .zmbr-ligadas{
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
}

/* ============================================================
   ENTRAR (/entrar/ — inc/login.php)
   ============================================================ */
.coluna-estreita{ max-width: 560px; margin: 0 auto; }
.pagina-login{ border-left-color: var(--toxico-escuro); }
.pagina-login h1{ font-size: 28px; }
.login-apoio{ color: var(--text-muted); font-size: 14px; margin: -8px 0 22px; }

.login-form label{
  display: block;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.login-form .login-lembrar{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 20px;
  text-transform: none;
  letter-spacing: 1px;
  cursor: pointer;
}
.login-form .login-lembrar input{ width: auto; margin: 0; }
.login-form button{ width: 100%; justify-content: center; }

.login-erro{
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(214,40,40,.1);
  border: 1px solid rgba(214,40,40,.4);
  border-left-width: 4px;
  color: var(--text);
  font-size: 14px;
  padding: 12px 16px;
  margin: 0 0 20px;
}
.login-erro .icone{ color: var(--sangue-vivo); flex: none; }

.login-links{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  /* Dentro do formulario, entre o "manter conectado" e o botao: sem a linha
     tracejada que o bloco tinha quando fechava a tela — ali ela separava duas
     partes, aqui cortaria o proprio formulario ao meio. */
  margin: 14px 0 18px;
}
.login-links a{ color: var(--text-muted); }
.login-links a:hover{ color: var(--toxico); }
.login-sep{ color: var(--card-border-forte); margin: 0 8px; }

.zmbr-login-ok .login-acoes{ display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }

/* ============================================================
   CHAT (inc/chat.php)
   ============================================================ */
.pagina-chat{ border-left-color: var(--toxico-escuro); }

.zmbr-chat{
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  border-radius: var(--radius);
  margin-top: 22px;
  overflow: hidden;
}

.chat-topo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, #150403, #0c0e0c);
  border-bottom: 1px solid var(--sangue);
  padding: 11px 16px;
}
.chat-titulo{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-titulo);
  font-size: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--white);
}
.chat-titulo .icone{ color: var(--sangue-vivo); }
.chat-estado{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chat-estado::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4a4a4a;
}
.chat-estado.ok{ color: var(--toxico); }
.chat-estado.ok::before{ background: var(--toxico); box-shadow: 0 0 8px var(--toxico); animation: pulso 2s ease-in-out infinite; }
.chat-estado.off{ color: var(--sangue-vivo); }
.chat-estado.off::before{ background: var(--sangue-vivo); }

.chat-mensagens{
  height: 440px;
  overflow-y: auto;
  padding: 16px;
  /* Barra de rolagem no tom do resto, sem virar elemento de destaque. */
  scrollbar-width: thin;
  scrollbar-color: var(--card-border-forte) transparent;
}
.chat-mensagens::-webkit-scrollbar{ width: 9px; }
.chat-mensagens::-webkit-scrollbar-thumb{ background: var(--card-border-forte); }

.chat-vazio{
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  margin: 30px 0;
}

.chat-msg{
  display: flex;
  gap: 11px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  transition: background .15s ease;
}
.chat-msg:hover{ background: rgba(255,255,255,.02); }
.chat-msg:hover .chat-apagar{ opacity: 1; }
.chat-msg.minha{ border-left-color: var(--toxico-escuro); background: rgba(158,240,26,.04); }

.chat-avatar{
  width: 34px; height: 34px;
  border: 1px solid var(--card-border-forte);
  flex: none;
}
.chat-corpo{ min-width: 0; flex: 1; }

.chat-cab{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 2px;
}
.chat-autor{
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
}
.chat-papel{
  font-family: var(--fonte-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--toxico);
  border: 1px solid rgba(158,240,26,.3);
  padding: 1px 6px;
}
/* No chat o selo de apoiador reaproveita a caixinha do papel, so trocando a
   cor — sao dois rotulos irmaos na mesma linha. */
.chat-papel.chat-doador{
  color: var(--ambar);
  border-color: rgba(224,139,30,.45);
  background: rgba(224,139,30,.1);
}
.chat-hora{
  font-family: var(--fonte-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
.chat-apagar{
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  margin-left: auto;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
  width: auto;
}
.chat-apagar:hover{ background: none; color: var(--sangue-vivo); box-shadow: none; }

.chat-texto{
  margin: 0;
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.chat-form{
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--card-border);
  background: var(--bg-alt);
  padding: 14px 16px;
}
.chat-form input[type="text"]{ margin-bottom: 0; }
.chat-form .btn{ flex: none; }

.chat-aviso{
  color: var(--sangue-vivo);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  margin: 0;
  padding: 0 16px 12px;
}

/* Visitante: mesma faixa do formulario, com o convite pra entrar. */
.chat-bloqueado{
  border-top: 1px solid var(--card-border);
  background: var(--bg-alt);
  padding: 16px;
}
.chat-bloqueado p{
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.chat-bloqueado a{ color: var(--toxico); }

@media (max-width: 780px){
  .chat-mensagens{ height: 60vh; }
  .chat-form{ flex-wrap: wrap; }
  .chat-form .btn{ width: 100%; justify-content: center; }
}

/* ============================================================
   DISCORD (inc/discord.php)
   ============================================================ */
.discord-bloco{
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border: 1px solid var(--card-border);
  /* Azul do Discord na lateral: e a unica cor do site que nao e da paleta, e
     serve justamente pra dizer "isto aqui e outro servico". */
  border-left: 3px solid #5865f2;
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 26px 0;
}
.discord-topo{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.discord-icone{
  width: 64px;
  height: 64px;
  flex: none;
  border: 1px solid var(--card-border-forte);
  border-radius: var(--radius);
  object-fit: cover;
}
.discord-icone-vazio{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0c0a;
  color: #5865f2;
}
.discord-icone-vazio .icone{ width: 32px; height: 32px; }
.discord-info{ min-width: 0; }
.discord-nome{ font-size: 20px; margin: 0 0 6px; }

.discord-numeros{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--text-muted);
}
.discord-online{ display: inline-flex; align-items: center; gap: 7px; color: var(--toxico); }
.discord-texto{ color: var(--text-muted); margin: 16px 0 0; }
.discord-acao{ margin: 18px 0 0; }
.btn-discord{ background: #5865f2; border-color: #7983f5; color: #fff; }
.btn-discord:hover{ background: #4752c4; border-color: #99a0f8; box-shadow: 0 0 22px rgba(88,101,242,.4); color: #fff; }

/* Quem esta na sala agora (so aparece com o widget ligado no Discord). */
.discord-lista{ margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--card-border); }
.discord-lista-titulo{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.discord-lista ul{ display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.discord-lista li{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  padding: 4px 10px 4px 4px;
  font-size: 12px;
}
.discord-lista img{ width: 24px; height: 24px; border-radius: 50%; }
.discord-lista-mais{ margin: 10px 0 0; font-size: 12px; color: var(--text-muted); }

.discord-vazio{ border-left-color: var(--ambar); }
.discord-aviso-admin{
  margin: 16px 0 0;
  padding: 10px 13px;
  border-left: 3px solid var(--ambar);
  background: rgba(224,139,30,.1);
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================================
   ENTRAR COM STEAM E GOOGLE (inc/login-social.php)
   ============================================================ */
.login-social{
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--card-border);
}
.login-social-titulo{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.login-social-botoes{ display: flex; flex-wrap: wrap; gap: 10px; }
.btn-social{ flex: 1 1 200px; justify-content: center; font-size: 12px; }
/* Azul-aco da Steam e vermelho de sempre pro resto: o botao tem que parecer o
   servico que abre, senao ninguem confia em clicar. */
.btn-steam{ background: #1b2838; border-color: #2a475e; color: var(--white); }
.btn-steam:hover{ background: #2a475e; border-color: #66c0f4; box-shadow: 0 0 20px rgba(102,192,244,.28); }
.btn-google{ background: #202124; border-color: #5f6368; color: var(--white); }
.btn-google:hover{ background: #303134; border-color: #8ab4f8; box-shadow: 0 0 20px rgba(138,180,248,.25); }

.login-social-aviso{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.login-social-aviso .icone{ width: 15px; height: 15px; flex: none; color: var(--toxico); margin-top: 2px; }

.login-social-nota{
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--ambar);
  background: rgba(224,139,30,.09);
  font-size: 12px;
  color: var(--text-muted);
}

/* "em breve" dentro do botao desligado, sem mudar a altura dele. */
.btn-social .btn-nota{
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: lowercase;
  opacity: .8;
  margin-left: 6px;
}
.btn-email{ background: var(--card-alt); border-color: var(--card-border-forte); color: var(--text); }
.btn-email:hover{ background: #23282a; border-color: var(--toxico-escuro); color: var(--toxico); box-shadow: none; }

/* ============ CADASTRO DO BUDDYPRESS (/registro/) ============
   O plugin traz o proprio CSS e ele vence o do tema: os campos chegavam claros,
   largos e com moldura vermelha de "obrigatorio". Aqui eles voltam a ser do
   tamanho e da cor do resto do site. */
.buddypress .layout-wrap{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 34px;
}
.buddypress .bp-heading{ font-size: 19px; margin: 0 0 14px; }

.buddypress #signup-form label,
.buddypress #signup-form legend{
  display: block;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 5px;
}
.buddypress #signup-form input[type="text"],
.buddypress #signup-form input[type="email"],
.buddypress #signup-form input[type="password"],
.buddypress #signup-form input[type="tel"],
.buddypress #signup-form input[type="url"],
/* O campo de data entra na mesma lista: fora dela ele herdava o #fafafa que o
   proprio BuddyPress pinta, e saia branco no meio dos campos escuros. */
.buddypress #signup-form input[type="date"],
.buddypress #signup-form textarea,
.buddypress #signup-form select{
  width: 100%;
  max-width: 320px;
  padding: 8px 11px;
  font-size: 14px;
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  border-radius: var(--radius);
  color: var(--text);
  margin: 0 0 16px;
}
.buddypress #signup-form input:focus,
.buddypress #signup-form textarea:focus{
  border-color: var(--toxico-escuro);
  box-shadow: 0 0 0 1px rgba(158,240,26,.25);
}
/* Sem moldura vermelha em campo obrigatorio: o "(obrigatorio)" ja esta escrito
   no rotulo, e vermelho aqui parece erro antes de a pessoa digitar. */
.buddypress #signup-form input:required,
.buddypress #signup-form input:invalid{ border-color: var(--card-border-forte); }

.buddypress #signup-form fieldset{ border: 0; padding: 0; margin: 0; }
.buddypress #signup-form .description,
.buddypress #signup-form .indicator-hint,
.buddypress #signup-form .field-visibility-settings-notoggle,
.buddypress .field-visibility-settings-toggle,
.buddypress .field-visibility-settings{
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: -10px 0 14px;
  max-width: 320px;
  /* A dica da senha vem do painel com fundo #fafafa e padding proprio: uma
     tarja branca com letra cinza, ilegivel aqui. */
  background: transparent;
  padding: 0;
}
.buddypress #pass-strength-result{
  max-width: 320px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  border-radius: var(--radius);
}
/* Aceite das Regras e dos Termos, logo acima do botao de concluir. Fica numa
   caixa com fio pra ser a ultima coisa que a pessoa le antes de enviar — e o
   .buddypress na frente porque o plugin estica todo label do formulario. */
.zmbr-aceite{
  max-width: 460px;
  margin: 18px 0 6px;
  padding: 12px 14px;
  border: 1px solid var(--card-border-forte);
  background: var(--card-alt);
}
.buddypress #signup-form .zmbr-aceite label,
.zmbr-aceite label{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
}
/* O bloco do cadastro do BuddyPress dita largura e cor de todo campo por id,
   entao a caixa de marcar precisa repetir a estrutura dele pra nao sair
   achatada (13px de largura com 16 de altura) e com a cor de outro campo. */
.buddypress #signup-form .zmbr-aceite input[type="checkbox"],
.zmbr-aceite input[type="checkbox"]{
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--sangue-vivo);
}
.zmbr-aceite a{ color: var(--toxico); text-decoration: underline; }
.zmbr-aceite a:hover{ color: var(--sangue-vivo); }

/* O "Completar registro" com a cara dos botoes do site: o CSS do BuddyPress
   vence o global do tema por especificidade, entao a receita do .btn precisa
   ser repetida aqui — inclusive o canto cortado. */
.buddypress #signup-form .submit{ margin-top: 6px; }
.buddypress #signup-form input[type="submit"],
.buddypress #signup-form #submit{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  max-width: none;
  margin-top: 8px;
  padding: 13px 26px;
  background: var(--sangue);
  border: 1px solid var(--sangue-vivo);
  border-radius: 0;
  color: var(--white);
  font-family: var(--fonte-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.buddypress #signup-form input[type="submit"]:hover,
.buddypress #signup-form #submit:hover{
  background: var(--sangue-vivo);
  box-shadow: 0 0 22px rgba(214,40,40,.45);
}
/* Desabilitado enquanto a senha e fraca: precisa parecer desabilitado. */
.buddypress #signup-form input[type="submit"]:disabled{
  opacity: .4;
  filter: grayscale(1);
  cursor: default;
  box-shadow: none;
}

.buddypress .pw-weak{ font-size: 12px; margin-bottom: 14px; }
/* "Confirmar o uso de uma senha fraca" e um rotulo com a caixa de marcar
   dentro, mas caia na regra dos rotulos do cadastro — mono, caixa alta e
   espacado —, e numa coluna estreita a frase quebrava em duas linhas com a
   segunda passando por baixo da caixa. Vira uma linha so, como o aceite. */
.buddypress #signup-form .pw-weak label{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
}
.buddypress #signup-form .pw-weak input[type="checkbox"]{
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--sangue-vivo);
}
.buddypress .password-input-wrapper{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* O botao do olho e um `.button` do painel: 36px de altura, canto reto e fundo
   transparente, ao lado de um campo de 43px com canto de 2px e fundo proprio —
   ficava menor e flutuando no meio da linha. Ele copia o campo. */
.buddypress #signup-form .wp-hide-pw{
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  padding: 0 11px;
  border-radius: var(--radius);
  background: #0a0c0a;
}
/* O aviso de Caps Lock e desenhado pelo script do painel **dentro** desta mesma
   caixa, entao ele entrava como terceiro item da linha: o campo de senha caia
   de 208px pra 85, o botao do olho grudava nele e o aviso saia uma palavra por
   linha. Ele passa a tomar a linha inteira, abaixo do campo, e o campo volta a
   crescer com o espaco que sobra. */
.buddypress #signup-form .password-input-wrapper > #caps-warning{ flex: 1 0 100%; margin: 2px 0 0; }
/* O espaco de baixo sai do campo e vai pro bloco inteiro: dentro do flex, a
   margem do campo entrava na altura da linha e o botao, esticado, ficava mais
   alto que ele (59px contra 43). */
.buddypress #signup-form .password-input-wrapper > .password-entry{ flex: 1 1 0; width: auto; min-width: 0; margin-bottom: 0; }
.buddypress #signup-form .wp-pwd{ margin-bottom: 16px; }

@media (max-width: 780px){
  .buddypress .layout-wrap{ grid-template-columns: 1fr; }
}

.login-recado{ padding: 11px 14px; margin: 0 0 16px; border-left: 3px solid var(--toxico-escuro); background: rgba(158,240,26,.06); }
.login-recado-erro{ border-left-color: var(--sangue-vivo); background: rgba(214,40,40,.09); }
/* ============================================================
   BUDDYPRESS ESCURO (perfil, atividade, grupos)
   O plugin traz o proprio CSS, claro, e ele vence o do tema por
   especificidade — as telas chegavam brancas no meio de um site preto. Aqui
   elas voltam pro tema: fundo escuro, texto claro, vermelho so em link e
   destaque (texto vermelho corrido sobre preto cansa a vista).
   ============================================================ */
.buddypress .activity-list li.activity-item,
.buddypress .activity-inner,
.buddypress .activity-meta.action,
.buddypress .activity-comments li,
.buddypress .bp-list li,
.buddypress .item-list li,
.buddypress aside.bp-feedback,
.buddypress .bp-messages,
.buddypress #message,
.buddypress .standard-form,
.buddypress .dir-search,
.buddypress .groups-members-search{
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border-color: var(--card-border);
  color: var(--text);
}
/* A tabela do perfil ("Ver": Nome, e o que mais for criado em campos do
   xProfile). O BuddyPress pinta linha sim, linha nao em cinza claro com texto
   escuro — sobre o fundo preto do tema, virava uma faixa branca com o nome da
   pessoa quase invisivel. */
#buddypress table.profile-fields,
#buddypress table.bp-tables-user{
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text);
}
#buddypress table.profile-fields tr td,
#buddypress table.bp-tables-user tr td{
  background: var(--card);
  border-bottom: 1px solid var(--card-border);
  color: var(--text);
}
#buddypress table.profile-fields tr:nth-child(odd) td,
#buddypress table.bp-tables-user tr:nth-child(odd) td{
  background: var(--card-alt);
}
/* A coluna da esquerda e rotulo, nao conteudo: fica em mono, menor e apagada,
   como os demais rotulos do site. */
#buddypress table.profile-fields td.label,
#buddypress table.bp-tables-user td.label{
  width: 30%;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-right: 1px solid var(--card-border);
}
#buddypress table.profile-fields td.data,
#buddypress table.bp-tables-user td.data{
  color: var(--white);
}

.buddypress .activity-list li.activity-item{
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--sangue);
  border-radius: var(--radius);
  margin-bottom: 16px;
  padding: 16px 18px;
}
/* O #buddypress aqui nao e enfeite: as regras do plugin pra estes tres sao mais
   especificas que qualquer combinacao de classes do tema, e um id resolve sem
   precisar de !important. */
#buddypress .activity-list li div.activity-inner,
#buddypress .activity-list li div.activity-meta,
#buddypress .activity-list li div.activity-meta.action{
  background: none;
  border: 0;
  color: var(--text);
}
/* O bloco interno vinha com 18px de recuo proprio, entao o cartao ficava
   deslocado em relacao aos botoes de baixo. Sem recuo, tudo comeca na mesma
   linha vertical. */
#buddypress .activity-list li div.activity-inner{ padding: 0; margin: 12px 0 10px; }
#buddypress img.avatar{ background: transparent; }
/* "fulano e [foto] beltrano agora sao amigos": o plugin alinha essa fotinha
   pelo topo da letra (text-top), e ela fica flutuando acima da linha. Pelo meio
   ela senta junto com o texto. */
#buddypress .activity-header img.avatar,
#buddypress .activity-content .activity-header p img.avatar{
  /* "middle" alinha pelo meio da letra "x", nao pelo centro da linha — sobram
     uns 2px. O deslocamento fecha a conta sem mexer no fluxo do texto. */
  vertical-align: middle;
  position: relative;
  top: -2px;
  margin: 0 6px 0 3px;
}
#buddypress .activity-header p{ line-height: 1.7; }

/* Cartao de membro dentro da atividade ("fulano e beltrano agora sao amigos").
   O plugin centraliza foto, nome e apelido e empurra o botao pra direita, cada
   um por conta — fica tudo desencontrado. Aqui vira uma linha so: foto na
   esquerda, nome e apelido ao lado dela, botao na ponta. */
#buddypress .bp-member-activity-preview{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  /* Era um bloco alto com muito vazio: o cartao precisa da altura da foto, so. */
  padding: 2px 0;
  min-height: 0;
}
/* Tres colunas: foto | nome e apelido | botao. O botao mora **dentro** deste
   bloco (nao e irmao dele), e era isso que quebrava tudo: como quarto item da
   grade, ele caia numa linha propria e ainda impunha a largura dele a coluna da
   foto, jogando o nome pra direita. */
#buddypress .bp-member-short-description{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
  flex: 1 1 100%;
  text-align: left;
}
/* **A foto da lista tem tamanho fixo.** O BuddyPress manda `width:auto;
   height:auto` em toda foto de lista, entao quem enviou uma imagem aparecia no
   tamanho do arquivo (300px) e quem nao enviou aparecia com o boneco cinza de
   150 — dois cartoes vizinhos com fotos de tamanhos diferentes. `object-fit`
   evita que uma foto retangular saia esticada dentro do quadrado. */
#buddypress .bp-list li .item-avatar img.avatar,
#buddypress #members-list li .item-avatar img.avatar{
  width: 150px;
  height: 150px;
  max-width: 100%;
  object-fit: cover;
}

#buddypress .bp-member-avatar-content{
  grid-row: 1 / span 2;
  /* A caixa do avatar vem com largura fixa maior que a foto, e o nome ficava
     boiando longe dela. */
  width: 56px;
  min-width: 0;
  margin: 0;
}
#buddypress .bp-member-avatar-content img.avatar{
  width: 56px;
  height: 56px;
  border: 1px solid var(--card-border-forte);
}
#buddypress .bp-member-short-description-title{
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-size: 14px;
  text-align: left;
}
#buddypress .bp-member-nickname{
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: left;
}
#buddypress .bp-profile-button{
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
  width: auto;
  margin: 0;
  text-align: right;
}
/* Do tamanho dos outros botoes da atividade, e nao "large". */
#buddypress .bp-profile-button a.button{ font-size: 11px; padding: 8px 14px; }
/* O contador ao lado de "Comentar" nasce cinza-escuro e sumia no botao. */
#buddypress .comment-count{ color: var(--white); }

.buddypress .activity-header,
.buddypress .activity-header a,
.buddypress .activity-inner p,
.buddypress .bp-list li .item-title a{ color: var(--text); }
.buddypress .activity-header a{ color: var(--sangue-vivo); }
.buddypress .activity-header a:hover{ color: var(--white); }
.buddypress .activity-header .time-since,
.buddypress .activity-meta .time-since{ color: var(--text-muted); }

/* O que ha de novo */
.buddypress #whats-new-form,
.buddypress #whats-new-content{
  background: none;
  border-color: var(--card-border);
}
.buddypress textarea#whats-new,
.buddypress #whats-new{
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  padding: 11px 14px;
}
.buddypress textarea#whats-new::placeholder{ color: #6d777f; }

/* Botoes do plugin com a cara dos do site. */
#buddypress .generic-button a,
#buddypress .generic-button button,
#buddypress a.button,
#buddypress button.friendship-button,
#buddypress input[type="submit"],
#buddypress button.submit,
#buddypress .bp-primary-action{
  background: var(--sangue);
  border: 1px solid var(--sangue-vivo);
  border-radius: 0;
  color: var(--white);
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 9px 16px;
}
#buddypress .generic-button a:hover,
#buddypress a.button:hover,
#buddypress input[type="submit"]:hover{
  background: var(--sangue-vivo);
  color: var(--white);
  box-shadow: 0 0 18px rgba(214,40,40,.35);
}

/* Abas (Atividade, Perfil, Mensagens...) */
.buddypress .bp-navs,
.buddypress div.item-list-tabs{ background: var(--bg-alt); border: 1px solid var(--card-border); }
.buddypress .bp-navs a{ color: var(--text-muted); }
.buddypress .bp-navs a:hover{ color: var(--white); }
/* A aba ativa vinha branca com texto escuro: o id do proprio nav do plugin
   e o que vence a regra dele sem !important. */
#buddypress .bp-navs li.current > a,
#buddypress .bp-navs li.selected > a,
#buddypress .bp-navs a.selected,
#buddypress #object-nav li.current > a,
#buddypress #object-nav li.selected > a{
  background: var(--sangue);
  color: var(--white);
}
/* A bolinha com o numero ao lado de "Amigos", "Grupos", "Notificacoes".
   Leva o id #buddypress porque o CSS do plugin pinta essa bolinha com id — e na
   aba aberta ele a deixava **branca**, com o numero branco que este tema pede
   por cima: fundo e letra da mesma cor, ou seja, invisivel. */
#buddypress .bp-navs li span,
#buddypress .bp-navs li a span{ background: var(--card-border-forte); color: var(--white); }

/* Na aba aberta o fundo ja e o vermelho do tema; a bolinha vai de quase-preto
   pra se destacar dele. */
#buddypress .bp-navs li.selected a span,
#buddypress .bp-navs li.current a span,
#buddypress .bp-navs a.selected span{ background: var(--bg); color: var(--white); }

/* Campos das telas do perfil (Configuracoes, Editar Perfil, Visibilidade...).
   O BuddyPress entrega esses formularios claros, com a caixa branca no meio do
   preto — foi o "Email da conta" assim que o dono do site apontou. Agora usam a
   mesma receita de campo do resto do site (doacao, midia, redes, comentarios):
   fundo quase preto, letra clara, borda que acende no vermelho ao clicar.

   Leva o id #buddypress porque o CSS do plugin tambem pinta com id — mesmo
   motivo do resto deste bloco, e sem !important. */
#buddypress .standard-form input[type="text"],
#buddypress .standard-form input[type="email"],
#buddypress .standard-form input[type="password"],
#buddypress .standard-form input[type="tel"],
#buddypress .standard-form input[type="url"],
#buddypress .standard-form input[type="number"],
#buddypress .standard-form input[type="search"],
#buddypress .standard-form textarea,
#buddypress .standard-form select{
  width: 100%;
  max-width: 420px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  border-radius: var(--radius);
  color: var(--text);
}
#buddypress .standard-form textarea{ resize: vertical; min-height: 110px; }
#buddypress .standard-form input:focus,
#buddypress .standard-form textarea:focus,
#buddypress .standard-form select:focus{ border-color: var(--sangue-vivo); outline: none; }
#buddypress .standard-form select option{ background: var(--bg); color: var(--sangue-vivo); }
/* A caixa de marcar mantem o tamanho dela: a largura acima e pros campos de
   escrever. */
#buddypress .standard-form input[type="checkbox"],
#buddypress .standard-form input[type="radio"]{ width: auto; }
#buddypress .standard-form label,
#buddypress .standard-form legend{
  display: block;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
#buddypress .standard-form label span{ text-transform: none; letter-spacing: 0; }
#buddypress .standard-form input[type="checkbox"] + label,
#buddypress .standard-form label > input[type="checkbox"]{ display: inline-block; }

/* O cadastro ja tinha a largura dele ajustada (320px, campos curtos numa
   coluna): a regra geral acima e mais especifica que a antiga e alargava a
   tela toda, entao ele reafirma a propria medida. */
#buddypress #signup-form input[type="text"],
#buddypress #signup-form input[type="email"],
#buddypress #signup-form input[type="password"],
#buddypress #signup-form input[type="tel"],
#buddypress #signup-form input[type="url"],
#buddypress #signup-form textarea,
#buddypress #signup-form select{ max-width: 320px; }

/* Avisos e enviador de foto/capa do BuddyPress.

   O plugin pinta tudo isso claro: a caixa de instrucao vem branca (#fff), o
   aviso vem amarelo (#ffd com borda #cb2) e a area de soltar arquivo tem
   tracejado cinza. No meio do preto ficam tres retangulos acesos. Aqui eles
   passam a usar as cores do tema, mantendo o significado de cada uma: verde
   toxico pra informacao, ambar pra aviso, sangue pra erro.

   Os seletores levam #buddypress porque e assim que o plugin pinta (o amarelo
   vem de "#buddypress p.warning", que so um id alcanca). */
#buddypress .bp-feedback,
#buddypress .bp-messages{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--toxico);
  border-radius: var(--radius);
  box-shadow: none;
  color: var(--text);
}
#buddypress .bp-feedback .text,
#buddypress .bp-feedback p{ color: var(--text); font-style: normal; }
#buddypress .bp-feedback .bp-icon{ background: transparent; color: var(--toxico); }
#buddypress .bp-feedback.error,
#buddypress .bp-feedback.warning{ border-left-color: var(--ambar); }
#buddypress .bp-feedback.error .bp-icon,
#buddypress .bp-feedback.warning .bp-icon{ color: var(--ambar); }
#buddypress .bp-feedback.error{ border-left-color: var(--sangue-vivo); }
#buddypress .bp-feedback.error .bp-icon{ color: var(--sangue-vivo); }
#buddypress .bp-feedback a{ color: var(--sangue-vivo); }

/* O aviso amarelo do enviador de foto e o retorno de sucesso/erro dele. */
#buddypress p.warning,
#buddypress div.bp-avatar-status p.updated,
#buddypress div.bp-cover-image-status p.updated{
  background: rgba(224,139,30,.1);
  border: 1px solid transparent;
  border-left: 3px solid var(--ambar);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
}
#buddypress div.bp-avatar-status p.success,
#buddypress div.bp-cover-image-status p.success{
  background: rgba(158,240,26,.08);
  border-left-color: var(--toxico);
  color: var(--text);
}
#buddypress div.bp-avatar-status p.error,
#buddypress div.bp-cover-image-status p.error{
  background: rgba(214,40,40,.1);
  border-left-color: var(--sangue-vivo);
  color: var(--text);
}

/* A area de soltar o arquivo. */
#buddypress #drag-drop-area{
  border: 2px dashed var(--card-border-forte);
  border-radius: var(--radius);
  background: rgba(0,0,0,.25);
}
#buddypress .drag-drop.drag-over #drag-drop-area{ border-color: var(--toxico); background: rgba(158,240,26,.06); }
#buddypress .drag-drop-inside p{ color: var(--text-muted); }
/* O botao de escolher arquivo e desenhado pelo enviador, entao ele nao tem as
   classes do tema — a receita do .btn e repetida aqui. */
#buddypress .drag-drop-buttons button,
#buddypress .drag-drop-buttons input[type="button"],
#buddypress .drag-drop-buttons .moxie-shim + button{
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 9px 16px;
  background: var(--sangue);
  border: 1px solid var(--sangue-vivo);
  border-radius: var(--radius);
  color: var(--white);
  cursor: pointer;
}
#buddypress .drag-drop-buttons button:hover{ background: var(--sangue-vivo); }

/* As abas "Enviar / Excluir" do enviador. */
#buddypress .avatar-nav-items .avatar-nav-item a{ color: var(--text-muted); }
#buddypress .avatar-nav-items .avatar-nav-item.current a{ color: var(--white); }

/* A caixa de cada campo em "Editar Perfil". O BuddyPress a pinta de #fafafa com
   borda clara — no meio do preto vira um retangulo branco, que foi o que o dono
   do site viu ao abrir a tela de trocar o nome. */
#buddypress .profile.edit .editfield,
.buddypress-wrap .profile.edit .editfield{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
#buddypress .profile.edit .editfield legend,
#buddypress .profile.edit .field-visibility-settings,
#buddypress .profile.edit .field-visibility-settings-toggle,
#buddypress .profile.edit .field-visibility-settings-notoggle{
  color: var(--text-muted);
  background: transparent;
}
#buddypress .profile.edit .field-visibility-settings-toggle a,
#buddypress .profile.edit .field-visibility-settings a{ color: var(--sangue-vivo); }

/* O aviso de Caps Lock, que no cadastro continua vindo do script do painel. O
   icone dele e um SVG **sem largura nem altura**, dimensionado por um CSS do
   wp-admin que nao existe aqui — solto, ele estica ate ocupar a tela (foi a
   "seta gigante" da tela de senha, onde o script foi removido). Aqui o script
   ainda tem funcao, entao o icone e que ganha tamanho. */
.caps-warning{
  /* **Nasce escondido.** O script cria a caixa ja visivel e so a esconde no
     primeiro toque de tecla — quem hospeda isso no painel e o CSS do wp-admin,
     que comeca com display:none e nao carrega aqui. Sem esta linha, o aviso
     aparecia sozinho ao abrir a pagina, com o caps lock desligado.
     E `display: block` (nao flex) porque quem mostra e o jQuery `.show()`, que
     devolve o display padrao da <div>; em flex o aviso ficaria escondido. */
  display: none;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 6px 0 0;
}
/* No wp-login.php o CSS do painel carrega e ganha por especificidade, pintando
   o aviso de amarelo claro com letra quase preta no meio da tela escura. */
body .wp-pwd .caps-warning{
  background: transparent;
  border: 0;
  padding: 0;
  top: 0;
  color: var(--ambar);
}
.caps-warning .caps-icon{ display: inline-flex; vertical-align: middle; margin-right: 8px; }
.caps-warning .caps-warning-text{ vertical-align: middle; }
.caps-warning .caps-icon svg{ width: 14px; height: 14px; fill: var(--ambar); stroke: var(--ambar); }

/* O campo de confirmar a senha. O BuddyPress o esconde com
   "body.buddypress.settings.js .user-pass2-wrap{display:none}" porque, no fluxo
   original, ele so aparecia depois de clicar em "Gerar senha" — botao que este
   tema tirou. Sem esta regra o campo existe no HTML e nao aparece na tela. */
body.buddypress.settings.js .user-pass2-wrap{ display: block; }

/* As exigencias da senha, antes dos campos: ambar, a cor de aviso do tema. */
.zmbr-senha-regras{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 520px;
  border-left: 3px solid var(--ambar);
  background: rgba(224,139,30,.1);
  padding: 12px 16px;
  margin: 18px 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.zmbr-senha-regras .icone{ width: 16px; height: 16px; flex: none; color: var(--ambar); margin-top: 2px; }

/* Perfil sem capa: o BuddyPress guarda os 225px dela do mesmo jeito, e aqui
   isso vira uma faixa preta vazia acima da foto. A marca no <body> vem do
   inc/perfil.php e so aparece quando nao ha imagem — quem enviar uma capa
   continua vendo a capa. */
body.zmbr-sem-capa #header-cover-image{ display: none; }
body.zmbr-sem-capa #buddypress #item-header-cover-image{ min-height: 0; }

/* Capa do perfil: o cinza de fabrica no meio do preto.

   `contain` em vez do `cover` do plugin: a capa e uma faixa larga e baixa, e
   `cover` amplia a imagem ate cobrir a moldura — o que corta as pontas de
   qualquer banner que nao tenha exatamente essa proporcao. Com `contain` a
   imagem aparece inteira e o que sobra fica com o fundo do tema. A reducao sem
   corte no envio esta em inc/imagens.php. */
.buddypress #header-cover-image{
  background-color: #1a0f0e;
  background-image: linear-gradient(180deg, #1a0f0e, var(--bg-alt));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--card-border);
}

.buddypress .activity-comments{ border-left: 2px solid var(--card-border); }
.buddypress .acomment-meta{ color: var(--text-muted); }
.buddypress .load-more a,
.buddypress .pag-count,
.buddypress .pagination-links a{ color: var(--text-muted); }

/* A lista aberta do seletor "Mostrar:". A caixa fechada ja era escura, mas as
   opcoes sao desenhadas pelo sistema e voltavam brancas com texto cinza. So o
   <option> aceita cor aqui — o resto do visual dessa lista (largura, sombra,
   cantos) e do navegador, e nao ha CSS que alcance. */
#buddypress .select-wrap select option{
  background: #0a0c0a;
  color: var(--sangue-vivo);
}
/* A opcao em uso vinha com o azul de selecao do sistema. */
#buddypress .select-wrap select option:checked{
  background: var(--sangue);
  color: var(--white);
}

/* Contas ligadas, no perfil do membro. */
.zmbr-ligadas{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.zmbr-ligada{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--card-border-forte);
  color: var(--text-muted);
  white-space: nowrap;
}
.zmbr-ligada .icone{ width: 13px; height: 13px; }
.zmbr-ligada-steam{ border-color: #2a475e; background: rgba(27,40,56,.55); color: #9bc9e8; }
.zmbr-ligada-steam:hover{ border-color: #66c0f4; color: #cfe8fa; }
.zmbr-ligada-google{ border-color: #5f6368; color: #b8c2cc; }

/* ============================================================
   REDES SOCIAIS DO MEMBRO (inc/redes-sociais.php)
   Os selos usam a mesma forma dos de conta ligada, so mudando a cor por rede.
   A cor e a da propria marca, discreta: aqui ela identifica a rede num relance,
   ao contrario dos botoes de compartilhar, onde seis logos coloridos brigariam
   com o tema.
   ============================================================ */
.zmbr-ligada-rede{ background: rgba(0,0,0,.35); }
.zmbr-ligada-rede:hover{ color: var(--white); }
.zmbr-rede-instagram{ border-color: #a3388a; color: #e29ad0; }
.zmbr-rede-facebook{ border-color: #2a4b8d; color: #94b3ec; }
.zmbr-rede-x{ border-color: #4a4a4a; color: #cfcfcf; }
.zmbr-rede-tiktok{ border-color: #3aa8a0; color: #82e4dd; }
.zmbr-rede-youtube{ border-color: #8e2020; color: #f09a9a; }
.zmbr-rede-twitch{ border-color: #6441a5; color: #bda6ee; }
.zmbr-rede-kick{ border-color: #3f8f2a; color: #a5e58e; }
.zmbr-rede-reddit{ border-color: #a1441a; color: #f0a882; }
.zmbr-rede-discord{ border-color: #4752c4; color: #a8afef; }
.zmbr-rede-telegram{ border-color: #1f6f9c; color: #8fcbe8; }
.zmbr-rede-whatsapp{ border-color: #1f7a4d; color: #8ddcb0; }

/* A tela de edicao, dentro de Perfil > Redes sociais. */
.zmbr-redes-titulo{ font-size: 22px; margin: 0 0 8px; }
/* Aviso de quem vai ver a rede. Ambar, a cor de alerta do tema — nao e erro
   (vermelho) nem confirmacao (verde), e um "saiba disto antes de colar". */
.zmbr-redes-publico{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left: 3px solid var(--ambar);
  background: rgba(224,139,30,.1);
  padding: 14px 18px;
  margin: 0 0 24px;
  color: var(--text);
  font-size: 14px;
}
.zmbr-redes-publico .icone{ width: 18px; height: 18px; flex: none; color: var(--ambar); margin-top: 2px; }
.zmbr-redes-lista{ list-style: none; margin: 0 0 24px; padding: 0; }
.zmbr-redes-item{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  background: var(--card);
  margin-bottom: 8px;
}
.zmbr-redes-nome{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  min-width: 130px;
}
.zmbr-redes-nome .icone{ width: 15px; height: 15px; color: var(--sangue-vivo); }
/* O endereco pode ser longo: ele fica com a sobra da linha e corta com "...",
   em vez de esticar a caixa. */
.zmbr-redes-link{
  flex: 1 1 220px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 13px;
}
.zmbr-redes-link:hover{ color: var(--sangue-vivo); }
.zmbr-redes-remover{ margin: 0; }
.zmbr-redes-remover .btn{ font-size: 10px; padding: 5px 12px; }
.zmbr-redes-vazio,
.zmbr-redes-aviso{ color: var(--text-muted); font-size: 14px; margin: 0 0 20px; }
.zmbr-redes-form{ border-top: 1px solid var(--card-border); padding-top: 20px; max-width: 520px; }
.zmbr-redes-campo{ margin: 0 0 14px; }
.zmbr-redes-campo label{
  display: block;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.zmbr-redes-campo select,
.zmbr-redes-campo textarea,
.zmbr-redes-campo input[type="text"]{
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  border-radius: var(--radius);
  color: var(--text);
}
.zmbr-redes-campo select option{ background: var(--bg); color: var(--sangue-vivo); }
.zmbr-redes-campo select:focus,
.zmbr-redes-campo textarea:focus,
.zmbr-redes-campo input[type="text"]:focus{ border-color: var(--sangue-vivo); outline: none; }

/* A tela da assinatura: campo de texto largo, envio de imagem logo abaixo e o
   botao vermelho de sempre. O textarea herda o desenho dos outros campos (a
   regra acima passou a inclui-lo), e o que sobra e o que so ele tem. */
.zmbr-assinatura-form{ max-width: 640px; }
.zmbr-assinatura-form textarea{
  min-height: 110px;
  font-family: var(--fonte-mono);
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.zmbr-assinatura-arquivo{ margin-top: 18px; }
.zmbr-assinatura-arquivo input[type="file"]{
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: #0a0c0a;
  border: 1px dashed var(--card-border-forte);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 12px;
  cursor: pointer;
}
.zmbr-assinatura-arquivo input[type="file"]:hover{ border-color: var(--sangue-vivo); }
/* O botao de escolher arquivo e desenhado pelo navegador: sem isto ele chega
   cinza-claro do sistema, no meio de um formulario preto. */
.zmbr-assinatura-arquivo input[type="file"]::file-selector-button{
  background: var(--card-alt);
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 14px;
  margin-right: 12px;
  cursor: pointer;
}
.zmbr-assinatura-arquivo input[type="file"]::file-selector-button:hover{
  border-color: var(--sangue-vivo);
  color: var(--sangue-vivo);
}
.zmbr-assinatura-arquivo .zmbr-redes-ajuda{ display: block; margin-top: 8px; }
.zmbr-assinatura-form .btn{ margin-top: 20px; }
/* O botao chegava cinza e transparente: dentro do perfil quem desenha botao e
   o BuddyPress, com `#buddypress button`, e um id vence qualquer classe. Aqui o
   vermelho do site volta pelo mesmo caminho — id contra id, sem !important. */
#buddypress .zmbr-assinatura-form .btn,
#buddypress .zmbr-redes-form .btn{
  background: var(--sangue);
  border: 0;
  color: var(--white);
  font-family: var(--fonte-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 13px 26px;
}
#buddypress .zmbr-assinatura-form .btn:hover,
#buddypress .zmbr-redes-form .btn:hover{ background: var(--sangue-vivo); color: var(--white); }
/* A previa mostra a assinatura como ela sai no forum. */
.zmbr-assinatura-edicao .zmbr-assinatura{ max-width: 640px; }

/* Primeiro acesso pela Steam: criar em cima, vincular embaixo. */
.zmbr-steam-novo h2{ font-size: 22px; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.zmbr-steam-novo h2 .icone{ color: var(--toxico); width: 20px; height: 20px; }
.steam-novo-ja{
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px dashed var(--card-border);
}
.steam-novo-ja .login-apoio{ margin-bottom: 14px; }

.zmbr-social-email h2{ font-size: 22px; display: flex; align-items: center; gap: 10px; }
.zmbr-social-email h2 .icone{ color: var(--toxico); width: 20px; height: 20px; }

/* ============================================================
   STATUS REAL DOS SERVIDORES (inc/a2s.php)
   ============================================================ */
/* Cada maquina do cadastro vira um bloco: um card de "Turbine e MvM" mostra os
   dois servidores, cada um com seu estado, mapa e botao. */
.servidor-maquinas{ display: grid; gap: 14px; margin-top: 4px; }
.servidor-maquina{
  border-top: 1px dashed var(--card-border);
  padding-top: 12px;
}
.servidor-maquina:first-child{ border-top: 0; padding-top: 0; }

.servidor-maquina-topo{
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
/* O nome que o proprio servidor anuncia — e o que o jogador ve na lista do
   Steam, e o que diz em qual dos dois ele esta clicando. */
.servidor-maquina-nome{
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--fonte-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  overflow-wrap: anywhere;
}
.servidor-maquina-estado{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Mapa e gente em campo, vindos do proprio servidor de jogo. */
.servidor-jogo{ display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; }
.servidor-jogo:empty{ display: none; }
.servidor-jogo span{
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--text);
}
.servidor-jogo b{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 5px;
}
.servidor-jogadores{ color: var(--toxico); }

/* Endereco e botao na mesma linha: o que copiar e o que clicar, lado a lado. */
.servidor-maquina-pe{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.servidor-maquina-pe code{
  font-family: var(--fonte-mono);
  font-size: 12px;
  background: #0a0c0a;
  border: 1px solid var(--card-border);
  color: var(--toxico);
  padding: 5px 9px;
}
.servidor-maquina-pe .btn{ font-size: 11px; padding: 8px 14px; margin-left: auto; }
/* Servidor fora do ar: o botao **continua na tela** — a caixa nao muda de
   tamanho a cada consulta e a pessoa ve que existe um "Conectar" ali — mas fica
   apagado e sem clique ate o servidor responder de novo.
   O seletor e o proprio botao, e nao o bloco em volta: assim ja quebrou uma
   vez, quando o botao mudou de lugar dentro do card e a regra ficou orfa. */
.btn.desligado{
  opacity: .4;
  filter: grayscale(1);
  pointer-events: none;
  cursor: default;
}

/* ============================================================
   MIDIA (galeria em /midia/ — inc/midia.php)
   ============================================================ */
.midia-galeria{ margin-top: 24px; }
.midia-vazio{ color: var(--text-muted); }

/* Os dois botoes do alto da galeria: video ou print, valendo pra pagina toda.
   Substituiram os tres botoes que cada faixa tinha (seis na tela, e podiam se
   contradizer). O numero ao lado diz quanto existe do outro lado — sem ele,
   tirar o "Tudo" esconderia metade da galeria de quem acabou de chegar. */
.midia-tipos{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.midia-tipo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--card-border-forte);
  background: var(--card);
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.midia-tipo:hover{ border-color: var(--sangue-vivo); color: var(--sangue-vivo); }
.midia-tipo-conta{
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  border-left: 1px solid var(--card-border-forte);
  padding-left: 10px;
}
.midia-tipo.ativo{ background: var(--sangue); border-color: var(--sangue-vivo); color: var(--white); }
.midia-tipo.ativo .midia-tipo-conta{ color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.35); }

/* Tres por linha, fixo — nas duas faixas. minmax(0, 1fr) e nao 1fr: um titulo
   longo ou um endereco sem espaco alargaria a propria coluna e as tres sairiam
   desiguais. Coluna fixa tambem evita o que o auto-fit fazia, que era esticar
   um item solitario pra largura inteira da pagina. */
/* Video e imagem tem **grades separadas**, e nunca dividem uma linha: os dois
   tem alturas e proporcoes diferentes, e misturar deixava linha com vao no fim
   e cards de tamanhos desencontrados. Cada grade tem o seu numero de colunas,
   entao as linhas fecham certas nas duas.
   - videos:  2 por linha (~513px) — tamanho em que da pra assistir;
   - imagens: 3 por linha (~335px). */
.grid.grid-midia-videos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.grid-midia-imagens{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* As duas grades da mesma faixa se encostam: e uma lista so, partida por tipo. */
.grid.grid-midia-videos + .grid.grid-midia-imagens{ margin-top: 22px; }

/* ---- Imagem aberta sobre a pagina (assets/js/midia-lightbox.js) ----
   Fica em z-index 998: logo abaixo das scanlines do body::after, que estao em
   999 e nao capturam clique — assim a camada cobre o site sem furar a regra de
   camadas do tema. */
.midia-camada{
  position: fixed;
  inset: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(2px);
}
.midia-camada[hidden]{ display: none; }

/* A caixa e o "padrao" de tamanho: imagem pequena aparece no tamanho dela,
   imagem gigante encolhe ate caber — em nenhum caso ela estoura a tela nem
   obriga a rolar de lado. */
.midia-camada-caixa{
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.midia-camada-imagem{
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.midia-camada-legenda{
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  text-align: center;
}
.midia-camada-fechar{
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--card-border-forte);
  border-radius: 50%;
  cursor: pointer;
}
.midia-camada-fechar:hover{
  background: var(--sangue);
  border-color: var(--sangue);
  color: var(--white);
  box-shadow: none;
}
/* Com a camada aberta, o fundo nao rola: rolar a pagina atras da imagem e
   desnorteante, e no celular a imagem sai da tela. */
body.com-camada{ overflow: hidden; }

@media (max-width: 700px){
  .midia-camada{ padding: 16px; }
  .midia-camada-fechar{ top: -8px; right: -8px; width: 34px; height: 34px; font-size: 20px; }
}

/* Card alcancado pela vitrine da home (#midia-123): pisca uma vez pra dizer
   "e este". scroll-margin porque o cabecalho e fixo e cobriria o topo do card. */
.midia{ scroll-margin-top: 100px; }
.midia:target{
  border-color: var(--sangue);
  box-shadow: 0 0 0 1px var(--sangue), 0 0 26px rgba(214,40,40,.25);
}
@media (prefers-reduced-motion: no-preference){
  .midia:target{ animation: zmbr-achou 1.6s ease-out 1; }
}
@keyframes zmbr-achou{
  0%   { box-shadow: 0 0 0 1px var(--sangue), 0 0 46px rgba(214,40,40,.55); }
  100% { box-shadow: 0 0 0 1px var(--sangue), 0 0 26px rgba(214,40,40,.25); }
}

/* ---- Ultimos topicos do forum, na home ---- */
.forum-recentes{
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--sangue);
  border-radius: var(--radius);
  padding: 6px 18px 14px;
  /* Ocupa toda a altura que a coluna receber, pra caixa fechar junto com a
     vitrine ao lado. */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.forum-recentes-lista{ list-style: none; margin: 0; padding: 0; }
.forum-recentes-item{
  padding: 9px 0;
  border-bottom: 1px dashed var(--card-border);
}
.forum-recentes-item:last-child{ border-bottom: 0; }

/* Titulo em uma linha so: topico com nome comprido nao pode empurrar a caixa
   nem virar tres linhas na home. */
/* Item compacto de proposito: com o corpo do texto normal, cinco topicos
   passavam bem da altura da vitrine ao lado. Assim os cinco cabem no mesmo
   espaco, que era o pedido — a lista acompanha a caixa, nao o contrario. */
.forum-recentes-titulo{
  display: block;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forum-recentes-titulo:hover{ color: var(--sangue-vivo); }

.forum-recentes-meta{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 0;
  font-family: var(--fonte-mono);
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.forum-recentes-forum{
  color: var(--toxico);
  text-decoration: none;
  border: 1px solid rgba(158,240,26,.25);
  padding: 1px 6px;
}
.forum-recentes-forum:hover{ background: rgba(158,240,26,.08); }
.forum-recentes-quando{ margin-left: auto; }
.forum-recentes-vazio{ color: var(--text-muted); font-size: 13px; margin: 12px 0; }
/* margin-top: auto empurra o botao pro fim da caixa: e a sobra de altura que
   vira espaco antes dele, e nao um degrau entre as duas colunas. */
.forum-recentes-pe{ margin: 14px 0 4px; margin-top: auto; padding-top: 14px; }
.forum-recentes-pe .btn{ font-size: 10px; padding: 8px 14px; }

/* ---- Vitrine da pagina inicial ---- */
/* Segundo andar da faixa de noticias: vitrine da midia na esquerda, ultimos
   topicos do forum na direita. A coluna da esquerda tem a largura fixa da
   vitrine (430px) e a da direita fica com o que sobra — assim o bloco do forum
   acompanha a largura da pagina em vez de espremer a vitrine. */
.home-duplo{
  display: grid;
  /* Larguras limitadas e o par centralizado: nesta secao o container ocupa a
     tela inteira quando as faixas laterais viram tira horizontal, e sem o teto
     o bloco do forum esticaria sozinho ate a borda. */
  grid-template-columns: 430px minmax(0, 560px);
  justify-content: center;
  gap: 34px;
  /* stretch, e nao start: as duas caixas terminam na mesma linha. A do forum
     tem menos conteudo, entao e ela que estica — a sobra vai pro rodape, com o
     botao encostado embaixo, em vez de deixar um degrau entre as duas. */
  align-items: stretch;
  margin: 42px 0 0;
}
.home-forum{ display: flex; flex-direction: column; }
.home-vitrine{ max-width: 430px; }
.home-vitrine .section-title,
.home-forum .section-title{ font-size: 18px; }
.home-vitrine .section-sub,
.home-forum .section-sub{ font-size: 10px; }

@media (max-width: 980px){
  /* Sem largura pras duas, uma embaixo da outra — a vitrine primeiro. */
  .home-duplo{ grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .home-vitrine{ max-width: none; }
}

/* Bloco de noticias de jogos na home (abaixo das transmissoes). */
.home-game-news{ margin-top: 42px; }
.section-mais{ margin-top: 24px; text-align: center; }

/* Filtro de jogo na pagina /noticias/. */
/* ==========================================================================
   NOTICIAS (/noticias/)
   ========================================================================== */

/* Os botoes de filtro sao um por jogo, e o numero cresce a cada feed novo.
   Com a medida cheia de .btn (13px de letra, 26px de folga) sete jogos ja
   quebravam em duas linhas dentro da coluna principal; aqui eles sao um
   pouco menores, e o "Todos" continua legivel. */
.noticias-filtro{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.noticias-filtro .btn{
  font-size: 11px;
  letter-spacing: 1.1px;
  padding: 9px 15px;
}

/* A grade mora na coluna principal (749px a 1440px, por causa da barra
   lateral), estreita demais para as tres colunas fixas de .grid: o card
   ficava com 235px e o titulo de feed quebrava em quatro linhas. Aqui e
   "quantas couberem a partir de 300px" — duas ao lado da barra lateral,
   tres quando ha largura. auto-fill e nao auto-fit, a mesma razao da
   galeria: com um unico resultado, auto-fit esticaria o card sozinho pela
   coluna inteira. */
.grid-noticias{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* O card vira coluna para o "Ler noticia" encostar embaixo. As alturas de
   uma linha ja sao iguais (o grid estica), entao sem isto o link flutua no
   meio do card de texto mais curto e a linha fica desalinhada. */
.grid-noticias .card{ display: flex; flex-direction: column; }
.grid-noticias .card p{ flex: 1 1 auto; margin-bottom: 0; }

/* O titulo vem do feed e nao tem limite de tamanho: sem overflow-wrap uma
   palavra longa ("Counter-Strike") empurra a largura do proprio card. */
.card-titulo{
  font-size: 20px;
  line-height: 1.15;
  margin: 10px 0;
  overflow-wrap: anywhere;
}
.card-titulo a{ color: var(--white); }
.card-titulo a:hover{ color: var(--sangue-vivo); }

.card-ler{
  margin-top: 16px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--toxico);
}
.card-ler:hover{ color: var(--sangue-vivo); }
.btn-ativo{ background: var(--sangue); color: #fff; border-color: var(--sangue); }
.btn-ativo:hover{ background: var(--sangue-vivo); border-color: var(--sangue-vivo); color: #fff; }
.tag-jogo{ margin-left: 6px; padding: 1px 6px; background: var(--sangue); color: #fff; border-radius: 3px; font-size: .75em; vertical-align: middle; }

/* Pagina individual de noticia (single-wprss_feed_item). */
.noticia-conteudo{ margin-top: 32px; }
.noticia-conteudo img{ max-width: 100%; height: auto; margin: 16px 0; }
.noticia-conteudo ul,.noticia-conteudo ol{ padding-left: 1.4em; margin-bottom: 14px; }
.noticia-conteudo li{ margin-bottom: 4px; }
.noticia-fonte{ display: flex; align-items: center; gap: 8px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--borda,#333); font-size: .85rem; }
.noticia-fonte svg{ flex-shrink: 0; width: 20px; height: 20px; }
.noticia-fonte a{ color: var(--toxico); text-decoration: underline; }
.noticia-fonte a:hover{ color: var(--sangue-vivo); }
.noticia-voltar{ margin-top: 24px; }

.midia-vitrine{ position: relative; }
.midia-vitrine-palco{
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

/* Todos os itens ocupam o mesmo lugar; so o ativo aparece. Sem position
   absolute o palco pularia de altura a cada troca. */
.midia-vitrine-item{
  display: block;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset: 0;
  transition: opacity .45s ease;
  text-decoration: none;
  color: inherit;
}
.midia-vitrine-item.ativo{ opacity: 1; visibility: visible; position: relative; }
.midia-vitrine-item:hover .midia-vitrine-imagem img{ transform: scale(1.03); }

.midia-vitrine-imagem{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0c0a;
}
.midia-vitrine-imagem img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.midia-vitrine-sem{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--card-border-forte);
}
.midia-vitrine-sem .icone{ width: 42px; height: 42px; }

/* Triangulo de "play" pros itens de video, que aqui aparecem como capa. */
.midia-vitrine-play{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: rgba(0,0,0,.45);
}
.midia-vitrine-play::after{
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
}

/* A legenda: titulo, origem e quem postou, em corpo pequeno. */
.midia-vitrine-legenda{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--card-alt), var(--card));
  border-top: 1px solid var(--card-border);
  font-size: 13px;
}
/* Com a vitrine estreita, titulo/etiqueta/autor lado a lado viravam tres
   linhas. O titulo passa a ocupar a linha inteira (cortado com reticencias
   quando e longo) e a etiqueta divide a segunda linha com o autor. */
.midia-vitrine-legenda strong{
  flex: 1 0 100%;
  min-width: 0;
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.midia-vitrine-origem{
  font-family: var(--fonte-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid currentColor;
}
.midia-vitrine-origem[data-origem="oficial"]{ color: var(--sangue-vivo); }
.midia-vitrine-origem[data-origem="comunidade"]{ color: var(--toxico); }
.midia-vitrine-autor{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-left: auto;
}

/* Bolinhas de navegacao. */
.midia-vitrine-pontos{ display: flex; gap: 7px; justify-content: center; margin: 12px 0 0; }
.midia-vitrine-ponto{
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--card-border-forte);
  background: transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.midia-vitrine-ponto.ativo{ background: var(--sangue); border-color: var(--sangue); }
.midia-vitrine-ponto:hover{ border-color: var(--sangue-vivo); box-shadow: none; }

/* Duas faixas empilhadas: em cima o que o cla publicou, embaixo o que a
   comunidade mandou. A separacao e feita por **tamanho de cartao** — 3 por
   linha em cima, 4 embaixo —, porque e o jeito mais barato de dizer "isto
   importa mais" sem inventar aba nem segunda coluna. */
.midia-faixa{ margin: 0 0 8px; }

/* Titulo da faixa como barra com fundo, no mesmo desenho do cabecalho de tabela
   do forum: fundo quase preto, borda inferior na cor do bloco e canto cortado.
   E o que da a "cara de secao" que as outras telas do site tem. */
.midia-faixa-titulo{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
  padding: 12px 18px;
  background: linear-gradient(180deg, #0d0f0d, #0a0c0a);
  border: 1px solid var(--card-border);
  border-bottom: 2px solid var(--sangue);
  border-radius: var(--radius) var(--radius) 0 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.midia-faixa-titulo .icone{ width: 20px; height: 20px; flex: none; color: var(--sangue-vivo); }

/* A comunidade usa a mesma barra em tom mais frio: mesma peca, hierarquia
   diferente — igual ao que a moldura dos cards ja faz. */
.midia-faixa-comunidade .midia-faixa-titulo{ border-bottom-color: var(--toxico-escuro); }
.midia-faixa-comunidade .midia-faixa-titulo .icone{ color: var(--toxico); }

/* A linha de apoio vira o "rodape" da barra, colada nela. */
.midia-faixa-sub{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 18px;
  padding: 9px 18px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* A faixa oficial tem a mesma grade de tres colunas (pedido do dono). O que
   separa uma faixa da outra agora e a moldura vermelha do card, o titulo da
   secao e a posicao na pagina — nao mais o tamanho. */
.midia-oficial{
  border-color: var(--card-border-forte);
  border-left: 3px solid var(--sangue);
}

/* O separador de fita entre as duas faixas: o mesmo da home, mais discreto. */
.midia-separador{ margin: 22px 0 26px; opacity: .5; }

/* Selo nos oficiais antigos, que aparecem na grade da comunidade. */
.midia-selo{
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--sangue-vivo);
  border: 1px solid rgba(214,40,40,.45);
  background: rgba(142,27,19,.16);
  padding: 2px 7px;
  margin: 0 0 8px;
}

/* Telas menores descem de degrau. O video perde a companhia antes da imagem:
   ele precisa de mais largura pra continuar assistivel. */
@media (max-width: 1000px){
  .grid.grid-midia-videos{ grid-template-columns: 1fr; }
  .grid.grid-midia-imagens{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .grid.grid-midia-videos,
  .grid.grid-midia-imagens{ grid-template-columns: 1fr; }
}

.midia{
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Player em iframe: caixa 16:9, independente do tamanho que a plataforma pede.
   O !important aqui nao e preguica: o SureCookie troca o player por um aviso de
   consentimento com altura fixa em style inline (e devolve o iframe em 720x405
   depois do aceite), e style inline so perde para !important. Sem isso o card
   fica com altura dobrada antes do aceite e com o video vazando depois. */
.midia-video{ position: relative; padding-top: 56.25%; background: #000; }
.midia-video > *,
.midia-video iframe,
.midia-video embed,
.midia-video object,
.midia-video video{
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
/* Bloco com altura propria (TikTok, X): so nao deixa estourar a largura. */
.midia-embed{ background: #000; overflow: hidden; }
.midia-embed iframe,
.midia-embed blockquote{ max-width: 100%; margin: 0 auto; }

.midia-imagem{ display: block; background: #000; }
.midia-imagem img{ display: block; width: 100%; height: 230px; object-fit: cover; }
.midia-imagem:hover img{ opacity: .88; }

/* Quando nao da pra incorporar (Instagram, Facebook, link solto). */
.midia-cartao{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 170px;
  background: #0a0c0a;
  border-bottom: 1px solid var(--card-border);
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--toxico);
}
.midia-cartao .icone{ width: 20px; height: 20px; }
/* `background-color`, nunca o atalho `background`: o atalho zera **todas** as
   outras propriedades do fundo, e no cartao com capa isso apagava a imagem e
   devolvia a posicao pro canto — a foto pulava pra baixo ao passar o mouse. */
.midia-cartao:hover{ background-color: #0f130f; color: var(--sangue-vivo); }

/* Video que o YouTube nao deixa incorporar: o cartao ganha a capa do proprio
   video como fundo, com um veu escuro por cima pro rotulo continuar legivel —
   a capa muda de imagem pra imagem e texto claro sobre foto clara some.
   A altura e a **mesma do player** (16:9) e nao os 170px do cartao sem capa,
   senao dois itens lado a lado saem de tamanhos diferentes e a linha entorta. */
.midia-cartao-capa{
  position: relative;
  height: auto;
  padding-top: 56.25%;
  background-size: cover;
  background-position: center;
}
.midia-cartao-veu{
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(7,8,7,.35), rgba(7,8,7,.82));
}
/* Com o padding fazendo a altura, o conteudo do cartao nao pode ficar no fluxo:
   icone e rotulo viajam juntos numa caixa centrada por cima da capa — sem
   medida escrita a mao, porque o rotulo muda de tamanho ("YouTube", "Vimeo",
   "abrir link"). */
.midia-cartao-face{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.midia-cartao-capa:hover .midia-cartao-veu{ background: linear-gradient(rgba(7,8,7,.2), rgba(7,8,7,.7)); }

/* "Esse conteúdo será aberto fora do site", entre a capa e o titulo. */
.midia-fora{
  margin: 0;
  padding: 8px 18px;
  border-bottom: 1px solid var(--card-border);
  background: rgba(224,139,30,.08);
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ambar);
}

.midia-corpo{ padding: 16px 18px; }
.midia-titulo{ font-size: 17px; margin: 0 0 6px; }
.midia-meta{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.midia-meta span{ color: var(--sangue-vivo); margin-left: 8px; }

/* "Gostei" e "Denunciar" dividem a mesma linha no pe do card. */
.midia-acoes{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.midia-gostei-form{ margin: 0; }
.midia-gostei{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--card-border-forte);
  background: transparent;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}
.midia-gostei .icone{ width: 14px; height: 14px; }
.midia-gostei:hover{ border-color: var(--sangue-vivo); color: var(--sangue-vivo); }
/* Curtido por mim: a gota enche de sangue e o texto acompanha. */
.midia-gostei.meu{ border-color: var(--sangue-vivo); color: var(--sangue-vivo); }
.midia-gostei.meu .icone{ fill: var(--sangue-vivo); }
.midia-gostei-conta{
  color: var(--text);
  border-left: 1px solid var(--card-border-forte);
  padding-left: 8px;
  letter-spacing: 1px;
}
.midia-gostei.meu .midia-gostei-conta{ color: var(--sangue-vivo); border-color: var(--sangue-vivo); }
/* Sem conta, o placar nao finge ser botao: nao tem moldura nem cursor de clique. */
.midia-gostei-parado{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  padding: 6px 0;
  cursor: default;
}

/* Paginacao (tambem usada pela lista de posts e pelas abas do perfil).
   O BuddyPress monta os links dele com as mesmas classes do WordPress
   (.page-numbers), entao os seletores dele entram aqui em vez de virar uma
   segunda receita de paginacao que um dia sairia do lugar. Eles carregam o id
   #buddypress porque o CSS do plugin ja aperta esses links (padding: 0 5px) e
   um id ganha de qualquer pilha de classes — mesmo motivo do resto do bloco
   BUDDYPRESS ESCURO, e sem precisar de !important. */
.pagination{ margin-top: 26px; }
.pagination .page-numbers,
#buddypress .bp-pagination-links .page-numbers{
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 12px;
  padding: 7px 12px;
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  margin: 0 4px 4px 0;
}
.pagination .page-numbers:hover,
#buddypress .bp-pagination-links .page-numbers:hover{ border-color: var(--sangue-vivo); color: var(--sangue-vivo); }
.pagination .page-numbers.current,
#buddypress .bp-pagination-links .page-numbers.current{ background: var(--sangue); border-color: var(--sangue-vivo); color: var(--white); }

/* A barra de paginacao do BuddyPress: contagem de um lado, paginas do outro. */
.buddypress .bp-pagination{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0;
  /* O plugin flutua a barra e cada metade dela. Flutuando, ela sai do fluxo da
     caixa da lista: a caixa fechava antes, e os botoes apareciam por cima do fio
     de baixo dela. Sem float, a barra volta pra dentro do fluxo e desce. */
  float: none;
}
.buddypress .bp-pagination .pag-count,
.buddypress .bp-pagination .bp-pagination-links{ float: none; margin: 0; }
.buddypress .bp-pagination.bottom{ margin-top: 24px; }
.buddypress .bp-pagination .pag-data{ margin: 0; }

/* ============================================================
   EVENTOS (inc/eventos.php)
   Ambar e a cor de alerta do tema (a fita de isolamento): evento nao e acao
   comum (vermelho) nem sistema (verde), e aviso de que tem coisa acontecendo.
   ============================================================ */

/* --- A faixa da pagina inicial, acima do hero ---
   Uma linha so: etiqueta, nome e chamada, tudo dentro de um link. O evento em
   si mora na tela dele; aqui e convite, nao pagina. */
.evento-faixa{
  position: relative;
  background:
    linear-gradient(90deg, rgba(224,139,30,.18), rgba(10,12,10,.72)),
    var(--grao);
  border-bottom: 1px solid rgba(224,139,30,.45);
}
.evento-faixa::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--fita);
  opacity: .9;
}

.evento-chamada{
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 6px 0 5px;
  color: var(--text);
}
/* Varios eventos na faixa: uma linha por evento, separadas por um risco. */
.evento-chamada + .evento-chamada{ border-top: 1px solid rgba(224,139,30,.22); }
.evento-chamada-nome{
  font-family: var(--fonte-titulo);
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--white);
}
.evento-chamada-resumo{
  flex: 1 1 220px;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.evento-chamada-ir{
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ambar);
  white-space: nowrap;
}
.evento-chamada-ir::after{ content: " →"; }
.evento-chamada:hover .evento-chamada-nome{ color: var(--ambar); }
.evento-chamada:hover .evento-chamada-ir{ color: var(--white); }

/* Etiqueta de estado: placa verde, do mesmo verde do "online" dos servidores.
   Tamanho proximo do resto do texto da faixa — a 11px ela ficava pequena
   demais ao lado do nome do evento. */
.evento-etiqueta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  background: var(--toxico);
  box-shadow: 0 0 16px rgba(158,240,26,.35);
  padding: 5px 11px;
  margin: 0 0 12px;
  white-space: nowrap;
}
.evento-etiqueta .icone{ width: 15px; height: 15px; }
/* Na faixa a etiqueta divide a linha com o nome: nada de margem embaixo, e um
   corpo menor que o dos cards — ali ela e titulo de bloco, aqui e so um selo
   numa tira que precisa ocupar pouco espaco no topo da home. */
.evento-chamada .evento-etiqueta{
  margin: 0;
  font-size: 10px;
  letter-spacing: 1.4px;
  padding: 3px 8px;
}
.evento-chamada .evento-etiqueta .icone{ width: 12px; height: 12px; }

/* Verde e "esta rolando agora"; ambar e "ainda vai comecar". A pulsacao segue a
   mesma logica — piscar por evento que so acontece daqui a tres dias seria
   avisar de urgencia que nao existe. Vale na faixa da home e no card da lista:
   a etiqueta e a mesma peca, so muda a cor. */
.evento-chamada[data-estado="breve"] .evento-etiqueta,
.evento-etiqueta[data-estado="breve"]{
  background: var(--ambar);
  box-shadow: 0 0 16px rgba(224,139,30,.3);
}
.evento-chamada[data-estado="agora"] .evento-etiqueta .icone,
.evento-etiqueta[data-estado="agora"] .icone{ animation: pulso 2s ease-in-out infinite; }

/* A contagem ao lado da etiqueta na faixa ("Comeca em 8 dias"): informacao de
   apoio, entao nao compete com o nome do evento. */
.evento-chamada-conta{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ambar);
  white-space: nowrap;
}

.evento-nome{ font-size: 24px; margin: 0 0 8px; }

.evento-quando,
.evento-local,
.evento-premio{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.evento-quando .icone{ width: 14px; height: 14px; color: var(--ambar); }
.evento-local span,
.evento-premio span{
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ambar);
}
.evento-local code{
  font-family: var(--fonte-mono);
  background: #0a0c0a;
  border: 1px solid var(--card-border);
  color: var(--toxico);
  padding: 2px 7px;
}

/* Botao de entrar no servidor, ao lado do endereco. Menor que o do card de
   servidores: aqui ele divide a linha com rotulo, nome e endereco. */
.evento-local .btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 1.4px;
  padding: 5px 11px;
  margin-left: 4px;
}
.evento-local .btn .icone{ width: 13px; height: 13px; }
.evento-premio{ color: var(--text); }

/* A contagem e o que cria urgencia: e o maior elemento depois do nome. */
.evento-contagem{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.evento-contagem span{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.evento-contagem strong{
  font-family: var(--fonte-titulo);
  font-size: 24px;
  letter-spacing: 1.5px;
  color: var(--ambar);
}

.evento-descricao{ color: var(--text-muted); margin: 0 0 14px; max-width: 70ch; }

/* --- A barra fina nas demais telas --- */
.evento-barra{
  background:
    linear-gradient(90deg, rgba(224,139,30,.2), rgba(224,139,30,.06)),
    var(--bg-alt);
  border-bottom: 1px solid rgba(224,139,30,.4);
}
.evento-barra .container{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 9px;
  padding-bottom: 9px;
  font-family: var(--fonte-mono);
  font-size: 12px;
}
.evento-barra-etiqueta{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ambar);
}
.evento-barra-etiqueta .icone{ width: 14px; height: 14px; }
.evento-barra strong{ color: var(--white); }
.evento-barra-tempo{ color: var(--text-muted); }
.evento-barra-tempo b{ color: var(--ambar); }
/* Sem margin-left:auto: o link fica logo depois da contagem, e nao jogado na
   outra ponta da tela — em monitor largo ele ficava a meio metro do texto. */
.evento-barra a{
  color: var(--toxico);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 11px;
  font-weight: 700;
  transition: color .2s ease, text-shadow .2s ease;
}
/* A seta e um pseudo-elemento so pra poder andar sozinha no hover. */
.evento-barra a::after{
  content: " →";
  display: inline-block;
  transition: transform .2s ease;
}
.evento-barra a:hover{
  color: var(--sangue-vivo);
  text-shadow: 0 0 12px rgba(214,40,40,.55);
}
.evento-barra a:hover::after{ transform: translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .evento-barra a,
  .evento-barra a::after{ transition: none; }
  .evento-barra a:hover::after{ transform: none; }
}

/* --- Os cards da pagina /eventos/ --- */
.eventos{ margin-top: 26px; }
.eventos-vazio{ color: var(--text-muted); }
.eventos-antigos-titulo{
  font-size: 20px;
  margin: 34px 0 18px;
  padding-top: 22px;
  border-top: 1px dashed var(--card-border);
}

.evento-card{
  display: grid;
  /* Sem capa, uma coluna so; a classe vem do PHP (ver inc/eventos.php). */
  grid-template-columns: 1fr;
  gap: 0;
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--card-border-forte);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.evento-card.evento-com-capa{ grid-template-columns: 260px 1fr; }
.evento-card[data-estado="agora"]{ border-left-color: var(--ambar); }
.evento-card[data-estado="breve"]{ border-left-color: var(--toxico-escuro); }
.evento-card[data-estado="fim"]{ opacity: .62; }
.evento-card[data-estado="fim"]:hover{ opacity: 1; }

.evento-capa{ position: relative; overflow: hidden; }
.evento-capa img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.evento-card .evento-corpo{ padding: 24px 26px; min-width: 0; }
.evento-card .evento-nome{ font-size: 24px; }

/* --- Confirmacao de presenca --- */
.evento-presenca{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--card-border);
}
.evento-presenca-titulo{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.evento-presenca-titulo strong{ color: var(--toxico); font-size: 13px; }
.evento-presenca-nomes{ font-size: 13px; color: var(--text); margin: 0 0 12px; }
.evento-presenca-aviso{ font-size: 13px; color: var(--text-muted); margin: 0; }
.evento-presenca-form{ margin: 0; }

/* "Mostrar mais" da lista de confirmados: um <details>, entao o <summary> e que
   vira o botao. A setinha padrao do navegador sai; a marca e o "+" proprio. */
.evento-presenca-mais{ margin: -4px 0 12px; }
.evento-presenca-mais summary{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px dashed var(--card-border-forte);
  padding: 6px 12px;
  transition: color .15s, border-color .15s;
}
.evento-presenca-mais summary::-webkit-details-marker{ display: none; }
.evento-presenca-mais summary::before{ content: "+"; font-size: 14px; line-height: 1; }
.evento-presenca-mais[open] summary::before{ content: "\2212"; } /* menos */
.evento-presenca-mais summary:hover{ color: var(--toxico); border-color: var(--toxico-escuro); }
.evento-presenca-resto{ margin: 10px 0 0; color: var(--text-muted); }

@media (max-width: 780px){
  .evento-faixa .evento-nome{ font-size: 27px; }
  .evento-faixa .evento-contagem strong{ font-size: 26px; }
  .evento-card.evento-com-capa{ grid-template-columns: 1fr; }
  .evento-capa img{ max-height: 200px; }
}

/* ============================================================
   EQUIPE (pagina /equipe/ — inc/equipe.php)
   ============================================================ */
.staff-lista{ margin-top: 26px; }

/* O aviso de golpe vem antes dos rostos de proposito: quem chega aqui
   desconfiando de alguem precisa ler isso primeiro. */
.staff-aviso{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left: 3px solid var(--ambar);
  background: rgba(224,139,30,.1);
  padding: 14px 18px;
  margin: 0 0 24px;
  color: var(--text);
  font-size: 14px;
}
.staff-aviso .icone{ width: 18px; height: 18px; flex: none; color: var(--ambar); margin-top: 2px; }
.staff-vazio{ color: var(--text-muted); }

/* Quatro por linha nos 1160px do container, como o grid de servidores. */
.grid.grid-staff{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.staff{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--sangue);
  border-radius: var(--radius);
  padding: 24px 18px 20px;
}

.staff-foto{ margin-bottom: 14px; }
.staff-img{
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--card-border-forte);
  /* A foto entra dessaturada e ganha cor ao passar o mouse — o mesmo truque do
     logo, pra galeria de rostos nao brigar com a paleta do site. */
  filter: grayscale(.65) contrast(1.05);
  transition: filter .2s ease;
}
.staff:hover .staff-img{ filter: none; }
.staff-sem-foto{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 1px dashed var(--card-border-forte);
  color: var(--sangue);
}
.staff-sem-foto .icone{ width: 44px; height: 44px; }

.staff-nome{ font-size: 19px; margin: 0 0 6px; }
/* O selo de papel e o mesmo do perfil; aqui ele so precisa centralizar. */
.staff .zmbr-papel{ margin: 0 auto 8px; }
.staff .zmbr-papeis{ justify-content: center; }

.staff-cargo{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--toxico);
  margin: 0 0 10px;
}
.staff-bio{ color: var(--text-muted); font-size: 13px; margin: 0 0 12px; }

.staff-links{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: auto; }
.staff-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 11px;
}
.staff-link .icone{ width: 13px; height: 13px; }
.staff-link:hover{ border-color: var(--sangue-vivo); color: var(--sangue-vivo); }
/* O link da Steam e o que prova identidade: cor propria pra ser achado rapido. */
.staff-steam{ border-color: var(--toxico-escuro); color: var(--toxico); }
.staff-steam:hover{ border-color: var(--toxico); color: var(--toxico); background: rgba(158,240,26,.1); }

/* ============================================================
   DOACOES (pagina /doar/)
   ============================================================ */
.doar{ display: grid; gap: 24px; margin-top: 26px; }

/* O bloco que aparece pra quem nao esta logado, no lugar da chave PIX e do
   formulario. Barra vermelha em vez da verde: nao e um passo da doacao, e uma
   parada no caminho. */
.doar-bloco.doar-entrar{ border-left-color: var(--sangue); }

/* Manutencao: a pagina inteira vira este bloco, entao ele leva a fita ambar
   do tema — a mesma cor que o site usa pra "isto esta parado". */
.doar-bloco.doar-manutencao{ border-left-color: var(--ambar); }
.doar-manutencao .doar-nota{
  margin-top: 14px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.doar-entrar-acao{ margin: 18px 0 0; }

.doar-bloco{
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--toxico-escuro);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.doar-campanha{ border-left-color: var(--sangue); }
.doar-vazio{ border-left-color: var(--ambar); }

.doar-titulo{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  margin: 0 0 12px;
}
.doar-titulo .icone{ width: 22px; height: 22px; flex: none; color: var(--sangue-vivo); }
.doar-texto{ color: var(--text-muted); margin: 0 0 16px; }
.doar-nota{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin: 14px 0 0;
}

/* A barra da campanha e a mesma do hero, so que larga e alinhada a esquerda. */
.doar-campanha .infeccao{
  max-width: none;
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: 1.4px;
}
.doar-campanha .infeccao-topo span:first-child{ font-size: 17px; color: var(--toxico); }
.doar-campanha .infeccao-barra{ height: 14px; }
.doar-estado{
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 12px 0 0;
}

/* PIX: QR de um lado, chave e valores do outro. */
.pix-corpo{ display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.pix-qr-caixa{
  flex: none;
  width: 190px;
  padding: 8px;
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
}
.pix-qr{ display: block; width: 100%; height: auto; }
.pix-dados{ flex: 1 1 300px; min-width: 0; }

.pix-rotulo{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.pix-chave{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.pix-chave code{
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--fonte-mono);
  font-size: 14px;
  color: var(--toxico);
  background: #0a0c0a;
  border: 1px solid var(--card-border);
  padding: 9px 12px;
  overflow-wrap: anywhere;
}
/* O copia-e-cola e uma linha enorme: cabe menor e com rolagem propria. */
.pix-chave code.pix-longo{ font-size: 11px; max-height: 96px; overflow: auto; }
.pix-copiar{ flex: none; }
.pix-titular{ color: var(--text-muted); font-size: 13px; margin: -10px 0 18px; }

.pix-valores{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pix-valor{
  background: transparent;
  border: 1px dashed var(--card-border-forte);
  color: var(--text);
  font-family: var(--fonte-mono);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 8px 14px;
}
.pix-valor:hover{
  background: rgba(158,240,26,.08);
  border-color: var(--toxico-escuro);
  color: var(--toxico);
  box-shadow: none;
}

/* Beneficios */
.doar-lista{ list-style: none; padding: 0; margin: 0; }
.doar-lista li{
  position: relative;
  padding: 9px 0 9px 26px;
  border-bottom: 1px dashed var(--card-border);
}
.doar-lista li:last-child{ border-bottom: 0; }
.doar-lista li::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 8px;
  height: 8px;
  background: var(--toxico);
  box-shadow: 0 0 8px var(--toxico);
}

/* Apoiadores: so nome, nunca valor. */
.apoiadores{ list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.apoiadores li{
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  padding: 7px 13px;
  font-family: var(--fonte-mono);
  font-size: 13px;
}
.apoiadores .icone{ width: 14px; height: 14px; flex: none; color: var(--sangue-vivo); }

/* Formulario "ja doei" */
.doar-campos{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.doar-campo{ margin: 0 0 14px; }
.doar-campo label{
  display: block;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
/* O espaco entre campos e do paragrafo, nao do input — senao soma duas vezes. */
.doar-campo input, .doar-campo textarea{ margin-bottom: 0; }
.doar-checkbox label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .4px;
  text-transform: none;
  color: var(--text);
}
.doar-checkbox input{ width: auto; margin: 0; }

/* Campo isca contra robo: fora da tela, mas nao display:none — robo ignora o
   que esta escondido de forma obvia. */
.doar-isca{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.doar-recado{
  border-left: 3px solid var(--toxico-escuro);
  background: rgba(158,240,26,.06);
  padding: 12px 16px;
  margin: 0 0 16px;
}
.doar-recado-erro{ border-left-color: var(--sangue-vivo); background: rgba(214,40,40,.08); }

@media (max-width: 700px){
  .doar-campos{ grid-template-columns: 1fr; }
  .doar-bloco{ padding: 22px 18px; }
  .pix-qr-caixa{ width: 100%; max-width: 240px; }
}

/* ============================================================
   COMENTARIOS DOS POSTS (comments.php + inc/comentarios.php)
   A conversa vem depois dos botoes de compartilhar e usa o desenho de cartao do
   resto do site. As respostas aninhadas ganham um fio a esquerda em vez de
   fundo proprio: dois tons de caixa dentro da caixa do post ficariam pesados, e
   o fio ja diz de quem e a resposta.
   ============================================================ */
.comentarios{ margin-top: 34px; }
.comentarios-titulo{
  font-size: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--card-border);
}
.comentarios-lista{ list-style: none; margin: 0 0 26px; padding: 0; }
.comentarios-lista .children{
  list-style: none;
  margin: 0 0 0 22px;
  padding-left: 18px;
  border-left: 2px solid var(--card-border);
}
.zmbr-comentario{ margin: 0 0 14px; }
.comentario-corpo{
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--card-border);
  /* Canto cortado, a marca do tema. */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.comentario-foto{ flex: none; }
.comentario-foto img{ display: block; width: 44px; height: 44px; border: 1px solid var(--card-border-forte); }
.comentario-conteudo{ flex: 1 1 auto; min-width: 0; }
.comentario-topo{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 8px;
}
.comentario-autor{ font-family: var(--fonte-titulo); font-size: 15px; letter-spacing: .6px; color: var(--white); }
.comentario-autor a{ color: var(--sangue-vivo); }
.comentario-autor a:hover{ color: var(--white); }
.comentario-data{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.comentario-data .icone{ width: 13px; height: 13px; color: var(--toxico); }
.comentario-texto{ font-size: 15px; line-height: 1.65; }
.comentario-texto p{ margin: 0 0 10px; }
.comentario-texto p:last-child{ margin-bottom: 0; }
.comentario-espera{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 8px;
}
.comentario-acoes{
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.comentario-acoes a{ color: var(--text-muted); }
.comentario-acoes a:hover{ color: var(--sangue-vivo); }
/* O comentario do autor do post ganha o fio vermelho — mesma ideia do card
   oficial na galeria. */
.zmbr-comentario.bypostauthor > .comentario-corpo{ border-left: 3px solid var(--sangue); }

.comentarios-fechados,
.comentario-aviso{
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.comentario-aviso a{ color: var(--sangue-vivo); }
/* O link de entrar e a acao da linha, e nao uma palavra colorida no meio da
   frase: ganha o sublinhado a 3px de distancia pra separar do recado. */
.comentario-aviso .comentario-aviso-link{
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.comentario-aviso .comentario-aviso-link:hover,
.comentario-aviso .comentario-aviso-link:focus-visible{ color: var(--toxico); }

/* O formulario repete o desenho dos outros do site (doacao, midia, redes). */
.comment-respond{
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--card-border);
}
.comentario-campo{ margin: 0 0 14px; }
.comentario-campo label{
  display: block;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.comentario-campo input,
.comentario-campo textarea{
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  border-radius: var(--radius);
  color: var(--text);
}
.comentario-campo textarea{ resize: vertical; min-height: 120px; }
.comentario-campo input:focus,
.comentario-campo textarea:focus{ border-color: var(--sangue-vivo); outline: none; }
/* Nome e e-mail dividem a linha quando ha espaco: sao campos curtos e ficam
   ridiculos com 100% da largura. */
@media (min-width: 620px){
  .comment-form .comentario-campo-author,
  .comment-form .comentario-campo-email{ display: inline-block; width: calc(50% - 7px); vertical-align: top; }
  .comment-form .comentario-campo-author{ margin-right: 10px; }
}
.comment-form .comment-form-cookies-consent{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.comment-form .comment-form-cookies-consent input{ width: auto; }
.comment-reply-title small{ margin-left: 10px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.comment-reply-title small a{ color: var(--text-muted); }
.comment-reply-title small a:hover{ color: var(--sangue-vivo); }

@media (max-width: 620px){
  .comentario-corpo{ padding: 14px; gap: 10px; }
  .comentario-foto img{ width: 36px; height: 36px; }
  .comentarios-lista .children{ margin-left: 8px; padding-left: 12px; }
}

/* ============================================================
   COMPARTILHAR (fim do post — inc/partilhar.php)
   Botoes iguais entre si de proposito: cor da marca em seis botoes brigaria
   com o vermelho do tema. A cor entra so no hover, e ai sim e a da rede.
   ============================================================ */
.partilhar{
  margin: 34px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--card-border);
}
.partilhar-titulo{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.partilhar-titulo .icone{ width: 17px; height: 17px; color: var(--sangue-vivo); }

.partilhar-botoes{ display: flex; flex-wrap: wrap; gap: 8px; }

.partilhar-botao{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.partilhar-botao .icone{ width: 16px; height: 16px; flex: none; }
.partilhar-botao:hover{ background: var(--card); color: var(--white); box-shadow: none; }

/* A cor da rede so no hover: identifica sem virar arco-iris. */
.partilhar-whatsapp:hover{ border-color: #25d366; color: #25d366; }
.partilhar-facebook:hover{ border-color: #4a7dff; color: #4a7dff; }
.partilhar-x:hover{ border-color: var(--white); color: var(--white); }
.partilhar-telegram:hover{ border-color: #3aa6df; color: #3aa6df; }
.partilhar-reddit:hover{ border-color: #ff5c33; color: #ff5c33; }
.partilhar-copiar:hover,
.partilhar-aparelho:hover{ border-color: var(--toxico-escuro); color: var(--toxico); }

/* O botão do aparelho nasce com [hidden] e só o JavaScript o revela, onde
   navigator.share existe (celular e HTTPS). Sem esta linha ele aparecia
   assim mesmo: a regra de classe acima define display e vence o [hidden] do
   navegador, que é só uma regra de elemento — e no computador o clique não
   fazia nada, porque o listener nem chega a ser ligado. */
.partilhar-botao[hidden]{ display: none; }

/* Confirmacao do "copiar": o texto ja troca, a cor confirma. */
.partilhar-copiar.copiado{
  border-color: var(--toxico-escuro);
  color: var(--toxico);
  background: rgba(158,240,26,.08);
}

.partilhar-nota{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin: 12px 0 0;
}

@media (max-width: 520px){
  /* No celular os botoes ocupam a largura em duas colunas: alvo maior pro dedo. */
  .partilhar-botoes{ display: grid; grid-template-columns: 1fr 1fr; }
  .partilhar-botao{ justify-content: center; }
}

/* ============================================================
   CONTA BLOQUEADA (inc/bloqueado.php)
   Faixa no topo de todas as telas. Vermelho de aviso, sem drama: a pessoa
   precisa entender por que os botoes sumiram, nao ser humilhada por isso.
   ============================================================ */
.bloqueado-faixa{
  background: linear-gradient(180deg, rgba(142,27,19,.30), rgba(142,27,19,.16));
  border-bottom: 1px solid var(--sangue);
  padding: 10px 0;
  font-size: 13px;
}
.bloqueado-faixa .container{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.bloqueado-faixa strong{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sangue-vivo);
}
.bloqueado-faixa span{ color: var(--text-muted); }

/* ============================================================
   RANK (pagina /rank/ — inc/rank.php)
   So a estrutura por enquanto: o aviso de "em desenvolvimento" e a tabela que
   entra no lugar dele quando houver de onde puxar numero.
   ============================================================ */
.rank-aviso{ border-left-color: var(--ambar); }
.rank-selo{
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ambar);
  border: 1px dashed currentColor;
  padding: 8px 14px;
  margin: 0 0 14px;
}

/* Tabela larga rola dentro do proprio bloco — a pagina nunca rola de lado. */
.rank-rolagem{ overflow-x: auto; }
table.rank{ width: 100%; border-collapse: collapse; margin: 0; }
table.rank th,
table.rank td{
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
table.rank th{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--card-border-forte);
}
table.rank td{ font-size: 14px; }
table.rank tbody tr:hover{ background: rgba(255,255,255,.03); }
table.rank .rank-pos{
  width: 48px;
  font-family: var(--fonte-mono);
  color: var(--text-muted);
}
/* Os tres primeiros em destaque, como em qualquer placar. */
table.rank tbody tr:nth-child(1) .rank-pos{ color: var(--ambar); font-size: 16px; }
table.rank tbody tr:nth-child(2) .rank-pos,
table.rank tbody tr:nth-child(3) .rank-pos{ color: var(--toxico); }

/* ============================================================
   CANDIDATURA (pagina /candidatura/ — inc/candidatura.php)
   Reaproveita os blocos da pagina de doacao (.doar-bloco, .doar-campo,
   .doar-lista): sao o mesmo objeto na tela — um quadro escuro com titulo e
   formulario dentro. Aqui ficam so as diferencas.
   ============================================================ */

/* Coluna estreita: o formulario e uma sequencia de perguntas pra ler, e linha
   comprida demais cansa antes da terceira. */
.container-estreito{ max-width: 820px; }

.candidatura .doar-campo{ margin-bottom: 18px; }

/* A explicacao da pergunta fica ABAIXO do campo, nao no placeholder: texto
   dentro do campo some no instante em que a pessoa comeca a responder. */
.candidatura-ajuda{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.candidatura-opcional{
  font-family: var(--fonte-mono);
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--text-muted);
  opacity: .8;
}

.candidatura-requisitos{ border-left-color: var(--ambar); }

/* Recrutamento fechado: mesmo bloco, sem formulario, na cor de aviso. */
.candidatura-fechada{ border-left-color: var(--ambar); }

/* Previa pra staff: o mesmo formulario, apagado, so pra conferir. O fieldset
   nao tem borda propria — ele existe pelo "disabled", nao pelo desenho. */
.candidatura-previa{ border-left-color: var(--card-border-forte); }
.candidatura-previa fieldset{ border: 0; padding: 0; margin: 0; opacity: .62; }
/* Só o botao de mentira dentro da previa e que nao clica. O seletor precisa do
   fieldset: sem ele a regra apagava tambem o link que leva as candidaturas no
   painel, que esta no mesmo bloco e e o unico clicavel aqui. */
.candidatura-previa fieldset .btn{ pointer-events: none; }
.candidatura-previa > p .btn{ margin-bottom: 4px; }

/* Fila de quem esta esperando: nome que leva direto a ficha no painel. */
.candidatura-fila{ list-style: none; padding: 0; margin: 0 0 18px; }
.candidatura-fila li{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px dashed var(--card-border);
}
.candidatura-fila li:last-child{ border-bottom: 0; }
.candidatura-fila a{ font-weight: 600; }
.candidatura-fila span{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--text-muted);
}

/* O quadro de situacao muda de cor com o estado — e a primeira coisa que a
   pessoa quer saber ao abrir a pagina. */
.candidatura-situacao[data-estado="pendente"]{ border-left-color: var(--ambar); }
.candidatura-situacao[data-estado="aprovada"]{ border-left-color: var(--toxico); }
.candidatura-situacao[data-estado="recusada"]{ border-left-color: var(--sangue-vivo); }
/* Saiu do cla: aviso, nao punicao — ambar, como a fita de isolamento. */
.candidatura-situacao[data-estado="ex"]{ border-left-color: var(--ambar); }

.candidatura-selo{
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 12px;
  margin: 0 0 12px;
  border: 1px solid currentColor;
}
.candidatura-situacao[data-estado="pendente"] .candidatura-selo{ color: var(--ambar); }
.candidatura-situacao[data-estado="aprovada"] .candidatura-selo{ color: var(--toxico); }
.candidatura-situacao[data-estado="recusada"] .candidatura-selo{ color: var(--sangue-vivo); }
.candidatura-situacao[data-estado="ex"] .candidatura-selo{ color: var(--ambar); }

/* ============================================================
   404, BUSCA E ARQUIVOS (404.php, search.php, archive.php)
   As tres telas que aparecem quando alguem se perde. Antes caiam no index.php
   generico — eram as unicas do site sem a cara do tema.
   ============================================================ */
.erro-404{ padding: 40px 0 20px; text-align: center; }

/* O numero e enorme e decorativo: quem chegou aqui ja sabe que deu errado, o
   que importa e o que vem depois dele. Fica atras do conteudo, sem atrapalhar. */
.erro-404-numero{
  font-family: var(--fonte-titulo);
  font-size: clamp(90px, 22vw, 190px);
  line-height: .8;
  letter-spacing: 6px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(214,40,40,.35);
  margin: 0 0 -18px;
  user-select: none;
}
.erro-404-etiqueta,
.busca-etiqueta,
.arquivo-etiqueta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sangue-vivo);
  margin: 0 0 10px;
}
.erro-404-etiqueta .icone,
.busca-etiqueta .icone,
.arquivo-etiqueta .icone{ width: 14px; height: 14px; }

.erro-404 h1{ margin: 0 0 12px; }
.erro-404-texto{ color: var(--text-muted); max-width: 52ch; margin: 0 auto 24px; }
.erro-404-links{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 34px; }
.erro-404-sub{
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.grid-404{ grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }

/* Campo de busca (searchform.php): usado na 404, nos resultados e no widget. */
.busca-form{ display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.erro-404 .busca-form{ justify-content: center; }
.busca-campo{
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
}
.busca-botao{ flex: none; display: inline-flex; align-items: center; gap: 8px; }
.busca-botao .icone{ width: 15px; height: 15px; }

/* Na barra lateral o formulario vira coluna — e ai o `flex: 1 1 260px` do campo
   passa a valer no eixo **vertical**: o input virava uma caixa de 260px de
   altura. Na coluna, o campo ocupa a largura e tem altura normal. */
.widget .busca-form{ flex-direction: column; }
.widget .busca-campo{ flex: none; width: 100%; }
.widget .busca-botao{ align-self: flex-start; }

/* Resultados e arquivos: o mesmo cabecalho de bloco. */
.busca-topo,
.arquivo-topo{
  border-bottom: 1px solid var(--card-border);
  padding: 0 0 22px;
  margin: 0 0 28px;
}
.busca-titulo,
.arquivo-titulo{ font-size: 26px; margin: 0 0 14px; overflow-wrap: anywhere; }
/* O WordPress envolve o nome num <span> ("Categoria: <span>Avisos</span>"): o
   prefixo fica discreto e o nome, em destaque. */
.arquivo-titulo span{ color: var(--sangue-vivo); }
.arquivo-descricao{ color: var(--text-muted); margin: -6px 0 12px; }
.busca-item{ border-bottom: 1px dashed var(--card-border); padding: 0 0 18px; margin: 0 0 22px; }
.busca-item:last-of-type{ border-bottom: 0; }
.busca-item h2{ font-size: 21px; margin: 0 0 6px; }
/* A linha de "tipo · data" nascia **por cima** do titulo: o .entry-meta carrega
   `margin-top: -12px`, que existe pra subir a linha debaixo do <h1> da pagina
   de um post, onde o titulo tem margem inferior grande. Aqui o <h2> tem 6px, e
   os -12 comiam a folga inteira e mais 6 — medido, a distancia real era -6px.
   Aqui o recuo e zerado e a folga e escrita. */
.busca-item .entry-meta{ margin-top: 14px; }
.busca-item .entry-meta span{ opacity: .5; }
.busca-vazio p{ color: var(--text-muted); max-width: 56ch; }
.grid-arquivo{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arquivo-vazio{ color: var(--text-muted); }

@media (max-width: 1000px){
  .grid-404,
  .grid-arquivo{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .grid-404,
  .grid-arquivo{ grid-template-columns: 1fr; }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.layout{ display: grid; grid-template-columns: 2.2fr 1fr; gap: 30px; }
/* Item de grid nasce com min-width: auto, ou seja, **nao encolhe abaixo do
   proprio conteudo**. Numa tela de 360px o forum ficava 372px de largura e
   vazava pela direita — cortado no celular, e inteiro no emulador do
   computador, que costuma ser mais largo. E a mesma armadilha que a grade de
   servidores resolve com minmax(0, 1fr). */
.layout > *{ min-width: 0; }
/* O <fieldset> nasce do navegador com min-width: min-content e ignora a
   largura do pai — o formulario de entrar do forum, na barra lateral, vazava
   por isso. E uma peculiaridade antiga do elemento, nao do bbPress. */
#bbpress-forums fieldset,
.widget fieldset,
.bbp-login-form fieldset{ min-width: 0; }
@media (max-width: 900px){ .layout{ grid-template-columns: 1fr; } }

.widget{
  background:
    linear-gradient(180deg, var(--card-alt), var(--card)),
    var(--grao);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.widget h3{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 1.6px;
  color: var(--toxico);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--card-border);
}
.widget ul{ list-style: none; padding-left: 0; margin: 0; }
.widget li{ font-size: 13px; }
.widget a{ color: var(--text); }
.widget a:hover{ color: var(--sangue-vivo); }

/* Cada item da lista e um item, e nao uma linha de um paragrafo.
   "Posts recentes", "Comentarios", "Categorias" e "Arquivos" saem do
   WordPress como <li> sem espaco nem separacao nenhuma: com titulos de duas
   linhas — que e a regra aqui, nao a excecao — a lista lia como um bloco de
   texto corrido, e nao dava pra saber onde acabava um post e comecava o
   outro. A separacao vem de tres coisas ao mesmo tempo, de proposito: o
   espaco, a linha divisoria e a marca vermelha na frente. So o espaco nao
   resolve quando o titulo quebra; so a linha vira tabela. */
.widget ul li{
  position: relative;
  padding: 10px 0 10px 14px;
  border-bottom: 1px solid var(--card-border);
  line-height: 1.35;
}
.widget ul li:last-child{ border-bottom: 0; padding-bottom: 0; }
.widget ul li:first-child{ padding-top: 0; }

/* A marca e um traco curto, no alto da primeira linha — nao um "bullet"
   centrado, que num item de duas linhas fica boiando no meio. */
.widget ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 2px;
  background: var(--sangue-vivo);
}
.widget ul li:first-child::before{ top: 5px; }

.widget ul li a{
  display: inline-block;
  font-weight: 600;
  letter-spacing: .2px;
}

/* A data do widget de posts recentes: linha propria, mono e miuda, do jeito
   que o resto do site marca hora. E o segundo sinal de onde um item termina. */
.widget .post-date,
.widget .rss-date{
  display: block;
  margin-top: 3px;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* Sublista de categoria: recuada, sem a marca do nivel de cima. */
.widget ul li ul{ margin-top: 8px; }
.widget ul li ul li{ padding-left: 12px; }
.widget ul li ul li:last-child{ padding-bottom: 8px; }

/* Menu no widget: mesma logica, sem o negrito de titulo de post. */
.widget .menu li a{ font-weight: 500; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  position: relative;
  background:
    linear-gradient(180deg, rgba(6,7,6,.98), rgba(20,4,3,.96)),
    var(--grao);
  border-top: 1px solid var(--sangue);
  padding: 0 0 40px;
  margin-top: 60px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.site-footer::before{
  content: "";
  display: block;
  height: 5px;
  background: var(--fita);
  opacity: .75;
  margin-bottom: 40px;
}
.footer-menu ul{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.footer-menu a{
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.footer-menu a:hover{ color: var(--toxico); }
.footer-assinatura{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.footer-assinatura .icone{ color: var(--sangue); vertical-align: -.25em; margin-right: 6px; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
/* O botao "Menu" e so pra celular (ate 780px).

   Ele valia ate 1320px, porque com onze itens e os botoes de conta a linha
   unica so cabe acima disso — mas trocar o menu inteiro por um botao num
   monitor de 1280px e esconder o site de quem tem tela de sobra. Agora, entre
   781 e 1340px, o menu **quebra em linhas** (ver o bloco logo abaixo) em vez
   de sumir; o painel deslizante fica pro celular, onde nao ha linha que caiba.

   O limite subiu de 1320 pra 1340 quando "Noticias" entrou no menu: com doze
   itens, a 1321px o atalho de moderacao (`.auth-moderar`, que so a equipe ve)
   terminava em 1328 e a pagina rolava 7px de lado. Medido com o cabecalho
   logado mais largo que existe — sino + foto + Sair + caveira. */
@media (max-width: 780px){
  .nav-toggle{ display: inline-flex; }

  /* Painel deslizando de cima. Fica absoluto dentro do proprio header (que e
     sticky, portanto posicionado) e ancorado em top:100%: assim ele acompanha
     a altura real do header — logo maior, barra de admin, o que for — em vez
     de depender de um numero fixo que precisa ser recalculado a cada mudanca. */
  .main-nav{
    display: block;
    position: absolute;
    /* +1px porque top:100% mede a caixa de preenchimento do header e deixa a
       borda de baixo de fora — sem isso o painel abre 1px por cima dela. */
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #100302, #070807);
    border-bottom: 1px solid var(--sangue);
    transition: max-height .25s ease;
  }
  .main-nav.aberto{ max-height: 75vh; overflow-y: auto; box-shadow: 0 20px 40px rgba(0,0,0,.8); }
  .main-nav ul{ display: block; padding: 6px 0; }
  .main-nav li{ border-bottom: 1px solid var(--card-border); }
  .main-nav li:last-child{ border-bottom: 0; }
  .main-nav a{ padding: 15px 24px; font-size: 13px; }
  .main-nav a::after{ display: none; }

  /* Desfaz o esticamento do desktop: aqui o menu e um painel empilhado, e item
     em flex faria a linha encolher ate o tamanho do texto. */
  .main-nav{ align-self: auto; }
  .main-nav > ul > li{ display: block; }

  /* No painel nao existe passar o mouse: o submenu fica sempre aberto, so
     recuado, em vez de esconder itens atras de um gesto que nao ha. */
  .main-nav .sub-menu{
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: rgba(255,255,255,.025);
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .main-nav .sub-menu::before{ display: none; }
  .main-nav .sub-menu li{ border-bottom: 1px solid var(--card-border); }
  .main-nav .sub-menu a{ padding: 13px 24px 13px 44px; font-size: 12px; }
  .main-nav .menu-item-has-children > a::before{ display: none; }

  /* No painel o "Doar" e uma faixa da largura toda: sem canto cortado nem
     moldura, so a barra verde na lateral. O preenchimento do hover continua. */
  .main-nav .menu-doar > a{
    clip-path: none;
    border: 0;
    border-left: 3px solid var(--toxico-escuro);
    padding: 15px 24px;
  }
  /* Mesma regra pros itens em vermelho: no painel eles viram faixa. */
  .main-nav .menu-destaque > a{
    clip-path: none;
    border: 0;
    border-left: 3px solid var(--sangue);
    padding: 15px 24px;
  }
  body.nav-aberta{ overflow: hidden; }

  /* No painel, a area de conta vira a ultima faixa, separada do menu. */
  .site-auth{
    padding: 16px 24px 20px;
    border-left: 0;
    border-top: 1px solid var(--sangue);
    background: rgba(142,27,19,.08);
    flex-wrap: wrap;
    gap: 16px;
  }
  .site-auth .auth-criar{ width: 100%; justify-content: center; padding: 13px 16px; }
}

/* Fora do bloco acima de proposito: precisa vir depois pra vencer o
   transition do .main-nav sem depender de @media aninhado. */
@media (max-width: 780px) and (prefers-reduced-motion: reduce){
  .main-nav{ transition: none; }
}

/* 782px e onde o proprio WordPress troca a barra de admin de fixa para
   absoluta; abaixo disso ela rola junto e o header volta a encostar no topo. */
@media (max-width: 782px){
  body.admin-bar .site-header{ top: 0; }
}

@media (max-width: 780px){
  .site-header .container{ height: 78px; }
  .site-logo-img{ height: 65px; }
  .site-logo{ font-size: 21px; gap: 8px; }

  .hero{ padding: 45px 0 39px; }
  .entry-content, article{ padding: 24px 20px; }
  .section{ padding: 50px 0; }
}

/* ============================================================
   INFORMACOES DOS SERVIDORES (inc/servidores-info.php)
   ============================================================ */
/* Sanfona embaixo dos cards: um bloco por servidor, aberto so quando a pessoa
   clica. Tudo aberto de uma vez seria uma parede de texto entre o visitante e o
   botao de conectar, que e o que ele veio fazer. */
.servidores-info{ margin: 0 0 44px; }

/* Ate tres blocos lado a lado; o quarto cai pra linha de baixo. Menores que os
   cards de servidor de proposito: aqui e so o nome pra clicar, o card grande
   com estado e botao vem logo abaixo. align-items:start pra que o bloco aberto
   cresca sozinho, sem esticar os vizinhos fechados. */
.servidores-info-lista{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}
@media (max-width: 1000px){ .servidores-info-lista{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px){ .servidores-info-lista{ grid-template-columns: 1fr; } }

.servidores-info-titulo{
  font-family: var(--fonte-titulo);
  font-size: 26px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}
.servidores-info-titulo .icone{ width: 22px; height: 22px; color: var(--toxico); }

.servidores-info-sub{
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 20px;
}

.servidores-info-vazio{
  border: 1px dashed var(--ambar);
  color: var(--ambar);
  font-size: 13px;
  padding: 12px 14px;
  margin-top: 32px;
}

.servidor-info{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--toxico-escuro);
}
.servidor-info[open]{ border-left-color: var(--toxico); }

.servidor-info-topo{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  cursor: pointer;
  /* O triangulo padrao do navegador sai: quem indica aberto/fechado e o "+"
     desenhado no fim da linha, junto com a barra verde da esquerda. */
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: 14px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text);
}
.servidor-info-topo::-webkit-details-marker{ display: none; }
/* Servidor ainda sem texto: fica no lugar dele pra sequencia bater com a dos
   cards, mas apagado e sem o sinal de abrir. */
.servidor-info-sem-texto{ opacity: .55; }
.servidor-info-sem-texto .servidor-info-topo::after{ content: ""; }
.servidor-info-topo:hover{ color: var(--white); background: var(--card-alt); }
.servidor-info-topo .icone{ width: 15px; height: 15px; color: var(--toxico); flex: 0 0 auto; }

.servidor-info-nome{ flex: 1 1 auto; min-width: 0; }

.servidor-info-jogo{
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  border: 1px solid var(--card-border-forte);
  color: var(--text-muted);
  padding: 3px 8px;
  /* A etiqueta do jogo e curta e nao pode quebrar: "CS 1.6" em duas linhas
     dobra a altura da caixa e desalinha a linha inteira. */
  white-space: nowrap;
  flex: 0 0 auto;
}

/* O sinal de abrir/fechar. Vira "−" quando o bloco esta aberto. */
.servidor-info-topo::after{
  content: "+";
  font-family: var(--fonte-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--toxico);
  flex: 0 0 auto;
}
.servidor-info[open] .servidor-info-topo::after{ content: "−"; }

.servidor-info-texto{
  /* A linha tracejada nao encosta na borda do bloco: a margem lateral alinha o
     texto com o titulo logo acima. */
  margin: 0 13px;
  padding: 14px 0 16px;
  border-top: 1px dashed var(--card-border);
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  /* Teto de altura, com rolagem propria: sem ele, o servidor de texto mais
     longo estica a linha inteira da grade e os blocos ao lado ficam com um
     vazio embaixo do texto. Assim um bloco aberto nunca passa desta altura,
     venha ele com tres linhas ou com trinta. */
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Firefox: barra fina e na cor do tema. */
  scrollbar-width: thin;
  scrollbar-color: var(--toxico-escuro) transparent;
}
/* Chrome, Edge e Safari: a mesma barra. */
.servidor-info-texto::-webkit-scrollbar{ width: 8px; }
.servidor-info-texto::-webkit-scrollbar-track{ background: transparent; }
.servidor-info-texto::-webkit-scrollbar-thumb{
  background: var(--toxico-escuro);
  border: 2px solid var(--card);
}
.servidor-info-texto::-webkit-scrollbar-thumb:hover{ background: var(--toxico); }

.servidor-info-texto p{ margin: 0 0 12px; }
.servidor-info-texto p:last-child{ margin-bottom: 0; }
.servidor-info-texto ul,
.servidor-info-texto ol{ margin: 0 0 12px; padding-left: 20px; }
.servidor-info-texto li{ margin-bottom: 6px; }

@media (max-width: 700px){
  .servidor-info-topo{ font-size: 13px; }
  /* No celular a coluna e unica: nao ha vizinho pra desalinhar, e rolagem
     dentro de rolagem so atrapalha. O texto vai inteiro. */
  .servidor-info-texto{ margin: 0 13px; font-size: 14px; max-height: none; overflow: visible; }
}

/* ---- "Mais...": a gaveta do computador (inc/partilhar.php) ----
   No celular este espaço vira a bandeja do sistema; aqui ele abre uma lista
   com as opções que não valem um botão fixo na fileira. É <details>, então
   abre sem JavaScript — o único cuidado é tirar a setinha que o navegador
   desenha sozinha no <summary>, que destoaria dos outros botões. */
.partilhar-mais{ position: relative; }
.partilhar-mais[hidden]{ display: none; }
.partilhar-mais > summary{ list-style: none; cursor: pointer; }
.partilhar-mais > summary::-webkit-details-marker{ display: none; }
.partilhar-mais[open] > summary{ border-color: var(--sangue-vivo); color: var(--sangue-vivo); }

.partilhar-mais-lista{
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  border: 1px solid var(--card-border-forte);
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
}
.partilhar-mais-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--card-border);
}
.partilhar-mais-item:last-child{ border-bottom: 0; }
.partilhar-mais-item:hover{ background: var(--card); color: var(--sangue-vivo); }
.partilhar-mais-item svg{ width: 16px; height: 16px; flex: none; }

/* Numa tela estreita a gaveta vira bloco: 180px flutuando ao lado do botão
   sairiam da tela. */
@media (max-width: 700px){
  .partilhar-mais-lista{ position: static; min-width: 0; margin-top: 6px; }
}

/* ---- Capa do post (single.php) ----
   A mesma imagem destacada que aparece na faixa de destaques da home. Fica
   entre a linha da data e o texto, com a moldura de canto cortado do tema. */
.entry-capa{
  margin: 0 0 26px;
  position: relative;
}
.entry-capa img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--card-border-forte);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.entry-capa figcaption{
  margin-top: 8px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Avatar nos widgets de tópicos/respostas recentes (bbPress) ----
   O plugin escreve o avatar como imagem solta no meio da frase ("por [foto]
   Fulano"). Com o título quebrando em duas linhas, a foto ia parar no meio do
   texto, cada item numa altura diferente. Aqui o título vira bloco e a linha
   do autor vai inteira para baixo dele, com a foto alinhada pelo meio da
   linha — o mesmo lugar em todos os itens. */
.widget ul.bbp-topics-widget li .bbp-forum-title,
.widget ul.bbp-replies-widget li .bbp-forum-title,
.widget ul.bbp-topics-widget li > a:first-child,
.widget ul.bbp-replies-widget li > a:first-child{
  display: block;
  margin-bottom: 4px;
}

.widget .topic-author,
.widget .bbp-author-link{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

.widget .bbp-author-avatar{ display: inline-flex; }

.widget .bbp-author-avatar img,
.widget .bbp-author-link img.avatar{
  width: 18px;
  height: 18px;
  display: block;
  border: 1px solid var(--card-border);
  object-fit: cover;
}

/* "por Fulano" e a hora são apoio, não o assunto: menores e mais apagados. */
.widget ul.bbp-topics-widget li,
.widget ul.bbp-replies-widget li{ color: var(--text-muted); }
.widget ul.bbp-topics-widget li .bbp-author-link,
.widget ul.bbp-replies-widget li .bbp-author-link{ color: var(--text); font-weight: 500; }

/* ---- Bloco de punição no perfil (inc/punir.php) ----
   Só a moderação vê. Fica com a fita âmbar do tema quando está tudo normal e
   vermelha quando a conta está bloqueada — a cor já diz o estado antes da
   leitura. */
.zmbr-punir{
  margin: 20px 0;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--ambar);
}
.zmbr-punir-ativo{ border-left-color: var(--sangue-vivo); }
.zmbr-punir-titulo{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 1.4px;
  color: var(--ambar);
}
.zmbr-punir-ativo .zmbr-punir-titulo{ color: var(--sangue-vivo); }
.zmbr-punir-titulo svg{ width: 18px; height: 18px; }
.zmbr-punir-estado{
  margin: 0 0 12px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--text);
}
.zmbr-punir-form{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.zmbr-punir-form label{
  display: block;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.zmbr-punir-form input[type="text"],
.zmbr-punir-form input[type="number"]{
  background: var(--bg-alt);
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--fonte-corpo);
  font-size: 13px;
}
.zmbr-punir-form input[type="number"]{ width: 110px; }
.zmbr-punir-form input[type="text"]{ flex: 1 1 240px; min-width: 0; }
.zmbr-punir-nota{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.zmbr-punir-recado-bloquear{ border-left-color: var(--sangue-vivo); }
.zmbr-punir-recado-erro{ border-left-color: var(--sangue-vivo); }

/* ==========================================================================
   Denuncia: o botao no site e o painel de plantao (/moderacao/)
   ========================================================================== */

/* O botao fica discreto de proposito: quem le nao pode tropecar nele, e quem
   precisa dele acha na hora. Fechado, e uma palavra pequena. */
.zmbr-denunciar{
  display: inline-block;
  margin-top: 10px;
  font-family: var(--fonte-mono);
  font-size: 11px;
}
.zmbr-denunciar > summary{
  cursor: pointer;
  color: var(--text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  list-style: none;
}
.zmbr-denunciar > summary::-webkit-details-marker{ display: none; }
.zmbr-denunciar > summary:hover{ color: var(--sangue-vivo); }
.zmbr-denunciar[open] > summary{ color: var(--sangue-vivo); }

.zmbr-denunciar-form{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--sangue-vivo);
}
.zmbr-denunciar-form label{
  display: block;
  width: 100%;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.zmbr-denunciar-form input[type="text"]{
  flex: 1 1 220px;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  padding: 7px 9px;
  font-family: var(--fonte-corpo);
  font-size: 13px;
}
.zmbr-denunciado{
  display: inline-block;
  margin-top: 10px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* No comentario e no card da galeria, o botao entra na linha das acoes. */
.comentario-acoes .zmbr-denunciar,
.midia-corpo .zmbr-denunciar{ margin-top: 6px; }

/* No chat: o "!" ao lado do "x" de apagar, mesma familia visual. */
.chat-denunciar{
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--fonte-mono);
  font-size: 13px;
  line-height: 1;
  padding: 0 4px;
}
.chat-denunciar:hover{ color: var(--sangue-vivo); }
.chat-denunciar.chat-denunciado,
.chat-denunciar[disabled]{ color: var(--toxico-escuro); cursor: default; }

/* O painel de plantao. */
.zmbr-denuncia-titulo{
  margin: 24px 0 14px;
  font-size: 16px;
  letter-spacing: 1.2px;
  color: var(--ambar);
}
.zmbr-denuncia-item{
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--sangue-vivo);
}
.zmbr-denuncia-tipo{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--white);
}
.zmbr-denuncia-data{
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.zmbr-denuncia-quem{
  margin: 0 0 8px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.zmbr-denuncia-motivo{ margin: 0 0 10px; font-size: 14px; }
.zmbr-denuncia-copia{
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border-left: 3px solid var(--card-border-forte);
  font-size: 13px;
  color: var(--text-muted);
}
.zmbr-denuncia-acoes{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.zmbr-denuncia-fim{
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--toxico-escuro);
}
.zmbr-denuncia-vazio{ color: var(--text-muted); }

/* Uma denuncia ja fechada nao grita: perde a barra vermelha. */
.zmbr-denuncia-item:has(.zmbr-denuncia-fim){ border-left-color: var(--card-border-forte); }

/* A caixa de "limpar o que a pessoa escreveu", no bloco de punicao. */
.zmbr-punir-form .zmbr-punir-limpar{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--fonte-corpo);
  font-size: 13px;
  color: var(--text);
}
.zmbr-punir-recado-limpeza{ border-left-color: var(--sangue-vivo); }

/* ==========================================================================
   BUDDYPRESS: GRUPOS, MENSAGENS E NOTIFICACOES
   As tres ultimas telas que ainda chegavam com a cara do plugin. O bloco
   "BUDDYPRESS ESCURO" la em cima resolveu perfil e atividade; estas tres tem
   componentes proprios, com cor cravada no CSS do plugin — e como o plugin
   pinta com id, os seletores daqui tambem levam #buddypress. Cada cor abaixo
   foi medida na tela, nao chutada.
   ========================================================================== */

/* --- Os botoes de icone (buscar, apagar, aplicar) ---
   O plugin desenha um dashicon #555 sobre fundo branco. No tema, #555 sobre
   preto e quase invisivel: o botao de buscar da lista de grupos simplesmente
   nao aparecia. */
#buddypress .nouveau-search-submit,
#buddypress .bp-icons,
#buddypress button.messages-button,
#buddypress .dashicons,
/* O botao de buscar das telas de mensagem e de grupo nao tem classe propria:
   o plugin o alcanca por `.buddypress .buddypress-wrap button` (duas classes).
   Um id ganha de qualquer quantidade de classes. Cuidado: o proprio
   #buddypress **e** o elemento .buddypress-wrap, entao `#buddypress
   .buddypress-wrap button` nao casa com nada — tem que ser so `#buddypress
   button`. */
#buddypress button{
  background: transparent;
  border-color: var(--card-border-forte);
  color: var(--text-muted);
}
#buddypress .nouveau-search-submit:hover,
#buddypress .bp-icons:hover,
#buddypress button.messages-button:hover,
#buddypress .nouveau-search-submit:focus,
#buddypress .bp-icons:focus{
  color: var(--toxico);
  border-color: var(--toxico-escuro);
}
/* O botao de apagar e o unico que avisa perigo. */
#buddypress .message-action-delete:hover,
#buddypress .message-action-delete:focus{ color: var(--sangue-vivo); }

/* As caixas de marcar: o navegador as desenha com a cor do sistema (azul), que
   nao e de lugar nenhum aqui. */
#buddypress input[type="checkbox"],
#buddypress input[type="radio"]{
  accent-color: var(--toxico-escuro);
}

/* --- Notificacoes ---
   A celula ja era escura pela regra de .bp-tables-user, mas a **linha** ficava
   #fafafa: aparecia como fio branco em volta de cada celula. */
#buddypress table.notifications tr,
#buddypress table.notifications-list tr{
  background: transparent;
}
#buddypress table.notifications th,
#buddypress table.notifications-list th{
  background: var(--bg-alt);
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
/* A acao ("Marcar como lida", "Apagar") e link, e link aqui e vermelho. */
#buddypress .notification-actions a{ color: var(--sangue-vivo); }
#buddypress .notification-actions a:hover{ color: var(--toxico); }

/* Ja lida: continua na lista, so perde o destaque. */
#buddypress .zmbr-notificacao-lida{ opacity: .58; }
#buddypress .zmbr-notificacao-lida a{ color: var(--osso, #d8d2c6); }

/* --- Mensagens ---
   Tres cores do plugin de uma vez: a conversa selecionada (#fafafa), o titulo
   da previa (#eaeaea) e o corpo da mensagem (#fafafa). Como o tema ja pinta o
   texto de claro, o corpo da mensagem ficava **branco no branco** — dava pra
   selecionar com o mouse e nao dava pra ler. */
#buddypress li.thread-item,
#buddypress .message-box,
#buddypress .bp-messages-content,
/* Estes dois o plugin pinta com id + tres classes; so ganha quem tiver dois
   ids. Sao os que deixavam a mensagem branca no branco. */
#buddypress #message-threads li.selected,
#buddypress #thread-preview .preview-content .preview-message,
#buddypress #thread-preview .preview-message{
  background: var(--card);
  color: var(--text);
}
#buddypress #message-threads li.selected{
  border-left: 3px solid var(--sangue-vivo);
}
#buddypress li.thread-item.unread .thread-subject,
#buddypress li.thread-item.unread .thread-excerpt{ color: var(--white); }

#buddypress h2.message-title,
#buddypress span.messages-title,
/* O plugin pinta este pela posicao ("o primeiro h2 do bloco"), nao pela
   classe: repetir a estrutura dele e a unica forma de ganhar. */
#buddypress .bp-messages-content #thread-preview h2:first-child,
#buddypress .bp-messages-content #bp-message-thread-header h2:first-child{
  background: var(--bg-alt);
  color: var(--white);
  font-family: var(--fonte-titulo, var(--fonte-mono));
  letter-spacing: 1px;
}
#buddypress .thread-date,
#buddypress .preview-message .date{
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 11px;
}
/* O botao de aplicar a acao em lote vem branco do plugin. */
#buddypress button.bulk-apply{
  background: var(--card-alt);
  border: 1px solid var(--card-border-forte);
  color: var(--text);
}
#buddypress button.bulk-apply:hover{
  background: var(--sangue-escuro);
  border-color: var(--sangue-vivo);
  color: var(--white);
}

/* --- Grupos ---
   O cartao do grupo trazia a descricao numa caixa clara e o "Grupo publico"
   em cinza #333, ilegivel sobre preto. */
#buddypress div.desc-wrap,
#buddypress div.group-description,
#buddypress .group-desc{
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
}
#buddypress p.highlight.group-status,
#buddypress .group-status{
  display: inline-block;
  background: rgba(158, 240, 26, .10);
  border: 1px solid var(--toxico-escuro);
  color: var(--toxico);
  padding: 2px 8px;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- A moldura do editor visual (escrever mensagem) ---
   O que a pessoa digita esta dentro de um iframe e recebe outra folha
   (assets/css/editor-mensagem.css, injetada em inc/buddypress-telas.php). Isto
   aqui e o resto: a barra de botoes, os botoes e o rodape. */
#buddypress .mce-panel,
#buddypress .mce-toolbar-grp,
#buddypress .mce-edit-area,
#buddypress .mce-statusbar,
#buddypress .mce-btn,
#buddypress .mce-btn button,
#buddypress .quicktags-toolbar,
#buddypress .wp-editor-container{
  background: var(--card-alt);
  border-color: var(--card-border-forte);
  color: var(--text);
}
#buddypress .mce-btn button{ border: 0; }
#buddypress .mce-ico,
#buddypress .mce-caret,
#buddypress .mce-statusbar .mce-path-item{ color: var(--text-muted); }
#buddypress .mce-btn:hover button,
#buddypress .mce-btn:focus button{ background: var(--card-border); }
#buddypress .mce-btn:hover .mce-ico{ color: var(--toxico); }
/* Os botoes do modo texto (Visual / HTML). */
#buddypress .quicktags-toolbar input.button{
  background: var(--card);
  border: 1px solid var(--card-border-forte);
  color: var(--text);
}

/* --- A moldura dos seletores do BuddyPress ---
   O plugin embrulha todo <select> num `div.select-wrap` que **desenha a
   moldura** (borda #eee) e a setinha, deixando o select transparente e sem
   borda por dentro. Na tela escura isso dava dois defeitos ao mesmo tempo: a
   moldura clara aparecia como uma caixa branca em volta do campo, e a regra
   geral de campo do tema (fundo, borda e padding em todo input/select) pintava
   **outra** caixa por dentro dessa — caixa dentro de caixa, com o texto de
   "Acoes em Massa" estourando a moldura, que foi o que o dono viu na tela de
   notificacoes. Agora a moldura e uma so, do tema, e o select volta a ser o que
   o plugin espera: transparente, sem borda e ocupando a largura do embrulho
   (ele nascia 250px dentro de um pai de 245px, o que empurrava a setinha).
   As cores da lista aberta ficam na regra de `option` mais acima. */
#buddypress .select-wrap{
  /* A moldura acompanha o texto de dentro, e nao a largura do bloco: presa em
     100% ela virava uma caixa enorme com "— Tudo —" perdido no canto, que foi
     o que o dono do site viu na tela de notificacoes. inline-flex tambem
     encosta a setinha no fim do texto, no lugar de deixa-la solta la na ponta. */
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--card-border-forte);
  border-radius: var(--radius);
}
#buddypress .select-wrap:focus-within{ border-color: var(--toxico-escuro); }
#buddypress .select-wrap select{
  width: auto;
  max-width: 100%;
  background: transparent;
  border: 0;
  color: var(--text);
  /* Espaco de sobra em cima: com a linha apertada, o til de "Ações" batia na
     borda e aparecia cortado. E sem a margem negativa que o plugin poe no
     select (-25px, pra enfiar a setinha por cima do campo), que com o texto
     centralizado escondia a ultima letra atras da seta. */
  margin: 0;
  padding: 8px 10px;
  font-family: var(--fonte-corpo);
  font-size: 13px;
  line-height: 1.6;
  /* A largura da caixa vem da opcao mais comprida da lista ("Voce possui uma
     nova resposta para..."), entao a escolhida quase sempre e curta demais pro
     espaco: encostada na esquerda, ficava um vao ate a setinha. Centralizada,
     a caixa parece feita pro texto que esta nela. */
  text-align: center;
  text-align-last: center;
}
#buddypress .select-wrap select option{ text-align: left; }
#buddypress .select-wrap .select-arrow,
#buddypress .select-wrap .select-arrow::before{ color: var(--text-muted); }
/* A setinha e um irmao do select, puxada por cima dele com margem negativa do
   proprio plugin: sem esta folga ela encosta na borda da moldura. */
#buddypress .select-wrap .select-arrow{
  padding: 0 10px 0 2px;
  font-size: 9px;
  line-height: 1;
  /* Fora do fluxo do texto do select: alinhada pelo meio da moldura, e nao
     pela linha de base da letra, que a deixava caida. */
  align-self: center;
}

/* A faixa de abas do perfil e a bolinha de contagem nela.
   O plugin desenha as duas com borda clara (#eee e #ccc): no fundo preto, o
   bloco de abas ficava dentro de uma moldura cinza-clara e a bolinha de "2"
   ganhava um aro branco. O fundo ja era escuro — o que faltava era so a borda. */
#buddypress .bp-navs,
#buddypress .main-navs,
#buddypress .subnav-filters{
  border-color: var(--card-border);
}
#buddypress .bp-navs .count,
#buddypress .main-navs .count{
  border-color: var(--card-border-forte);
  background: var(--card-alt);
  color: var(--text);
}
#buddypress .bp-navs li.selected .count,
#buddypress .bp-navs li.current .count{
  background: var(--sangue);
  border-color: var(--sangue-vivo);
  color: var(--white);
}

/* Sobras claras da tela de Atividade e dos diretorios, achadas na mesma
   varredura: a caixa de escrever, o formulario de busca, a faixa de capa do
   cartao de membro (um cinza #c5c5c5 no meio do preto) e o "carregar mais". */
#buddypress .activity-update-form,
#buddypress .bp-dir-search-form,
#buddypress .dir-search,
#buddypress .groups-members-search{
  border-color: var(--card-border);
}
#buddypress .bp-member-preview-cover{
  background: linear-gradient(180deg, #1a0f0e, var(--bg-alt));
}
#buddypress li.load-more,
#buddypress li.load-newest{
  background: var(--card);
  border: 1px solid var(--card-border);
}
#buddypress li.load-more a,
#buddypress li.load-newest a{ color: var(--text); }
#buddypress li.load-more:hover{ border-color: var(--sangue-vivo); }

/* A citacao da ultima atividade, no cartao do membro: o plugin fecha a caixa
   com uma borda #eaeaea. */
#buddypress .user-update,
#buddypress .item-meta .update{
  border-color: var(--card-border);
  color: var(--text-muted);
}

/* Telas estreitas de verdade (360px e menos, que e o Android mais comum).
   O logo nasce `flex: 0 0 auto` e nao encolhe: com 241px de logo, 16px de vao
   e 86px de botao, a linha do cabecalho pedia 343px dentro de uma caixa de
   320px — a pagina inteira ficava 3px mais larga que a tela e rolava de lado.
   Aqui o logo passa a poder encolher (o nome do site corta com reticencias,
   que e melhor do que a tela toda tremer) e o botao perde um pouco de folga
   lateral. Medido a 360px: de 3px de vazamento para zero. */
@media (max-width: 420px){
  .site-logo{
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .site-logo .site-title,
  .site-logo .site-sub{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-toggle{ padding-left: 10px; padding-right: 10px; }
}

/* ==========================================================================
   O PAINEL DO SINO: UMA NOTIFICACAO EMBAIXO DA OUTRA
   O painel mora dentro de `.main-nav`, e o menu do cabecalho tem uma regra
   `.main-nav ul{ display: flex }` que alcanca **qualquer** <ul> ali dentro —
   inclusive o do sino. Resultado: as notificacoes saiam lado a lado, com barra
   de rolagem horizontal, cada uma espremida numa coluna estreita. A lista do
   sino nao e um menu; ela volta a ser lista.
   ========================================================================== */
.site-auth .auth-sino-painel ul,
.main-nav .auth-sino-painel ul{
  display: block;
  /* Tres itens na tela; do quarto em diante, rola pra baixo. O numero sai da
     conta do proprio item: 2 linhas de texto (13px x 1.45) + 10px de folga em
     cima e embaixo + a borda = ~60px, mais a linha de botoes quando o item tem
     "Aprovar/Recusar". Medido no navegador com itens reais. */
  /* 3 itens x 76px + as bordas. */
  max-height: 231px;
  overflow-y: auto;
  overflow-x: hidden;
}
.auth-sino-painel li{
  display: block;
  width: auto;
  flex: none;
}
/* O texto de cada notificacao para em duas linhas: sem isso, uma frase longa
   estica o item e empurra o terceiro pra fora da conta acima. */
.site-auth .auth-sino-painel li a{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A barra de rolagem, na cor do site — a do sistema chega clara e grossa. */
.auth-sino-painel ul{
  scrollbar-width: thin;
  scrollbar-color: var(--card-border-forte) transparent;
}
.auth-sino-painel ul::-webkit-scrollbar{ width: 8px; }
.auth-sino-painel ul::-webkit-scrollbar-track{ background: transparent; }
.auth-sino-painel ul::-webkit-scrollbar-thumb{
  background: var(--card-border-forte);
  border-radius: 4px;
}
.auth-sino-painel ul::-webkit-scrollbar-thumb:hover{ background: var(--sangue); }

/* Altura igual pra todo item da lista do sino.
   "Mostrar tres" so e exato se os tres tiverem a mesma altura — uma frase de
   uma linha ocupa 52px e uma de duas, 71px, entao um numero fixo no <ul> ora
   mostrava tres, ora quatro. Cada item passa a ter 76px, com o texto centrado
   e limitado a duas linhas. A excecao e o item que traz "Aprovar/Recusar":
   esse pode crescer, porque cortar botao e pior do que mostrar dois e meio. */
.auth-sino-painel li{
  height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
}

/* O painel do sino sai **do sino**, e nao do canto do cabecalho.
   Ele nascia alinhado pela direita (`right: 0`), entao os 320px cresciam pra
   esquerda e o canto de cima do painel caia debaixo de "DOAR" — de longe
   parecia menu do botao de doar, e nao do sino. Agora ele fica centrado no
   proprio sino, com uma setinha apontando pra ele. A animacao de abrir usa
   `transform`, entao o deslocamento horizontal tem que viajar junto nas duas
   posicoes, senao o painel pula pro lado ao abrir. */
/* Limiar subiu de 1321 para 1600: com o cabeçalho usando a tela inteira, o
   sino passou a morar perto da borda, e o painel centrado nele saía 22px
   fora (medido a 1440). Abaixo disso ele volta a abrir ancorado à direita,
   que é o que cabe. */
@media (min-width: 1600px){
  .auth-sino-painel{
    right: auto;
    left: 50%;
    transform: translate(-50%, -6px);
  }
  .auth-sino:hover .auth-sino-painel,
  .auth-sino:focus-within .auth-sino-painel{ transform: translate(-50%, 0); }
  /* A setinha so faz sentido onde o painel esta centrado no sino. */
  .auth-sino-painel::after{
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -7px;
    border: 7px solid transparent;
    border-bottom-color: var(--card-border-forte);
  }
}
/* Abaixo de 1340px o sino mora dentro do painel do menu, que abre a esquerda:
   centrar ali jogaria a caixa pra fora da tela (medido: -122px a 1205px de
   largura). Nessa faixa ele continua ancorado pela direita, como antes. */

/* A ponte invisivel que segura o hover no caminho do sino ate o painel
   continua valendo; so precisa cobrir a setinha tambem. */
.auth-sino-painel::before{ top: -14px; height: 14px; }

/* O apelido no cabecalho nao encolhe.
   `.auth-nome` nascia como item de flex encolhivel: quando o menu ficava
   apertado (entre 1320 e ~1400px, que e onde mora a maioria dos monitores de
   notebook), quem cedia espaco era justamente o apelido — "khaosrlx" virava
   "khaos…" mesmo cabendo folgado nos 140px do limite. O limite continua, pra
   apelido de verdade comprido; o que sai e o encolhimento. */
.site-auth .auth-nome{ flex: 0 0 auto; white-space: nowrap; }

/* Entre 1340px (onde o menu ainda esta inteiro) e 1440px, o limite do apelido
   baixa pra 90px. Medido: com um apelido de 24 letras e os 140px de sempre, o
   cabecalho estoura em 47px nessa faixa; com 90px, nao estoura — e um apelido
   normal (ate ~12 letras) continua aparecendo inteiro, porque cabe em 85px. */
@media (max-width: 1440px){
  .auth-nome{ max-width: 90px; }
}

/* "Sair" separado do apelido.
   Os dois sao texto do mesmo tamanho, na mesma cor de menu e em caixa alta:
   com so o vao do flex entre eles, "KHAOSRLX" e "SAIR" liam como uma palavra
   so. Ganha um fio vertical e mais respiro a esquerda — o fio e o que resolve,
   porque espaco sozinho nao separa duas palavras maiusculas coladas. */
.site-auth a.auth-sair{
  margin-left: 4px;
  padding-left: 18px;
  border-left: 1px solid var(--card-border-forte);
}

/* O bloco do perfil tambem nao encolhe.
   Faltava a metade de cima do conserto anterior: o apelido parou de encolher,
   mas o **link que o contem** continuava encolhivel — entao o cabecalho
   apertava o link, o apelido vazava pra fora dele e passava por baixo do fio
   do "Sair". Era isso que fazia a linha aparecer em cima do nick, e nao entre
   os dois. Medido antes: o fio caia 12px **dentro** do texto do apelido. */
.site-auth a.auth-perfil{ flex: 0 0 auto; }

/* O tracinho vermelho do "Sair" acompanha o texto, nao a caixa.
   O sublinhado do menu e um `::after` colado em `left: 0` — e a caixa do
   "Sair" agora comeca 18px antes do texto, por causa do respiro depois do fio.
   Sem isto o tracinho comecava no fio e passava por baixo do vao, desalinhado
   do que ele sublinha. */
.site-auth a.auth-sair::after{ left: 18px; }

/* ==========================================================================
   MENU EM LINHAS QUANDO A TELA APERTA (781px a 1340px)
   Nesta faixa o menu continua na tela — o que ele faz e **quebrar**: o bloco
   do menu cai pra uma linha propria embaixo do logo, e os itens se
   redistribuem em quantas linhas precisarem. E o comportamento que o dono
   pediu: no computador, mesmo com a janela pequena, os botoes ficam a vista.
   ========================================================================== */
@media (min-width: 781px) and (max-width: 1340px){
  /* O cabecalho deixa de ser uma linha so. `align-items: center` continua
     valendo pra primeira linha; o `row-gap` e o respiro entre as duas. */
  .site-header .container{
    flex-wrap: wrap;
    row-gap: 10px;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* O menu ocupa a linha inteira, centrado, e pode quebrar por dentro. */
  .main-nav{
    flex: 1 1 100%;
    justify-content: center;
    align-self: auto;
  }
  .main-nav > ul{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }

  /* O submenu ("Servidores", "Membros") abre logo abaixo do proprio item, e
     nao do cabecalho inteiro: com o menu em duas linhas, o calculo do desktop
     (que mede a altura do item esticado) apontaria pro lugar errado. */
  .main-nav .sub-menu{ top: calc(100% + 6px); }

  /* O bloco de conta acompanha o menu na mesma linha, sem o fio a esquerda —
     ali ele separaria duas coisas que agora estao no mesmo grupo. */
  .site-auth{ border-left: 0; padding-left: 0; }
}

/* ============================================================
   MODERAÇÃO DO FÓRUM NO SITE (inc/forum-moderar.php)
   Bloco fechado por padrão: quem modera abre quando precisa, e
   ninguém mais o enxerga. Fica discreto de proposito — nao e
   conteudo do forum, e ferramenta.
   ============================================================ */
.zmbr-mod-forum{
  /* O bbPress deixa as migalhas ("Inicio > Foruns > ...") flutuando a esquerda
     e o "Assinar" a direita. Sem o clear, o bloco subia pra beira dessas duas
     caixas: a moldura abracava o caminho de navegacao e o titulo aparecia
     centralizado no meio da linha. */
  clear: both;
  margin: 14px 0 20px;
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--ambar);
  background: var(--card);
  text-align: left;
}
.zmbr-mod-forum > summary{
  cursor: pointer;
  padding: 11px 16px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ambar);
  list-style: none;
}
.zmbr-mod-forum > summary::-webkit-details-marker{ display: none; }
.zmbr-mod-forum > summary::before{ content: "+ "; }
.zmbr-mod-forum[open] > summary::before{ content: "− "; }

.zmbr-mod-form{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 16px;
  border-top: 1px solid var(--card-border);
  /* flex-start, e nao flex-end: com o alinhamento pelo pe, um campo mais baixo
     que o vizinho empurrava o proprio rotulo pra baixo — era o "Ordem"
     descendo em relacao ao "Dentro de". Pelo topo, todos os rotulos comecam
     na mesma linha. */
  align-items: flex-start;
}
.zmbr-mod-form label{ display: flex; flex-direction: column; gap: 5px; flex: 1 1 190px; }
/* Numero pequeno nao precisa de meia linha de largura. */
.zmbr-mod-form label.zmbr-mod-curto{ flex: 0 1 150px; }
.zmbr-mod-form label.zmbr-mod-largo{ flex: 1 1 100%; }
.zmbr-mod-form label > span{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.zmbr-mod-form input[type="text"],
.zmbr-mod-form input[type="number"],
.zmbr-mod-form select,
.zmbr-mod-form textarea{
  width: 100%;
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
}
.zmbr-mod-acoes{ flex: 1 1 100%; display: flex; gap: 10px; }
.zmbr-mod-apagar{ align-items: center; gap: 12px; }
.zmbr-mod-perigo{
  background: rgba(142,27,19,.18);
  border: 1px solid rgba(142,27,19,.6);
  color: #d98b84;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
}
.zmbr-mod-perigo:hover{ background: rgba(142,27,19,.3); }
.zmbr-mod-nota{ color: var(--text-muted); font-size: 12px; }

.zmbr-forum-apagado{ border-left-color: var(--sangue-vivo); }
.zmbr-forum-erro{ border-left-color: var(--sangue-vivo); }


/* Cancelar edição: ao lado do botão de salvar, aqui e nos formulários de
   editar tópico e resposta do bbPress (que só oferecem "enviar").
   O bbPress zera borda e sombra de **todo** link dentro de #bbpress-forums
   (`#bbpress-forums a{border:none;box-shadow:none}`), e era isso que deixava o
   botão sem contorno no meio do formulário. Aqui o padrão do site volta. */
.zmbr-mod-cancelar{ margin-left: 10px; }
#bbpress-forums a.zmbr-mod-cancelar,
#bbpress-forums a.zmbr-mod-cancelar:hover{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--toxico-escuro);
  color: var(--toxico);
  font-family: var(--fonte-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 13px 26px;
  white-space: nowrap;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  vertical-align: middle;
  transition: background .15s ease, box-shadow .15s ease;
}
#bbpress-forums a.zmbr-mod-cancelar:hover{
  background: rgba(158,240,26,.12);
  box-shadow: 0 0 22px rgba(158,240,26,.2);
}


/* Seletor de cor na barra do editor do fórum (inc/forum-cor.php).
   As medidas são as do botão pequeno do WordPress — os vizinhos na barra são
   input.button.button-small —, senão o campo sai mais alto e mais largo que
   eles e a barra fica torta. */
#bbpress-forums div.quicktags-toolbar select.zmbr-cor-selecao,
.quicktags-toolbar select.zmbr-cor-selecao{
  /* Numeros copiados do botao vizinho, que e um `.button.button-small` do
     WordPress: line-height 2, altura minima 24px, fonte 11px, margem 2px.
     A seta nativa do select some (appearance:none) e vira a mesma setinha
     desenhada em CSS — a nativa muda de tamanho conforme o sistema, e era ela
     que engordava o campo em relacao aos botoes. */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-block;
  width: auto;
  min-width: 0;
  height: 26px;
  min-height: 26px;
  line-height: 24px;
  padding: 0 20px 0 8px;
  /* Os botoes vizinhos vem com margem vertical zero; os 2px de cima que este
     select tinha eram exatamente o desalinhamento que se via na barra. */
  margin: 0 3px;
  vertical-align: top;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 11px) 11px, calc(100% - 7px) 11px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  background-color: var(--card);
  border: 1px solid var(--card-border-forte);
  border-radius: 3px;
  color: var(--text);
  font-family: var(--fonte-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: none;
  cursor: pointer;
}
#bbpress-forums div.quicktags-toolbar select.zmbr-cor-selecao:hover{
  background-color: var(--sangue);
  border-color: var(--sangue);
  color: var(--white);
}
.quicktags-toolbar select.zmbr-cor-selecao option{
  background: var(--card);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

/* Recado depois de mandar um tópico ou resposta pra lixeira. Âmbar como a
   tarja de manutenção: é um estado que ainda espera decisão. */
.zmbr-lixeira-recado{ border-left-color: var(--ambar); }

/* Lista de tópicos fixos, dentro do bloco de editar o fórum. */
.zmbr-mod-fixos{ display: flex; flex-direction: column; gap: 5px; }
.zmbr-mod-fixos .zmbr-mod-rotulo{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.zmbr-mod-fixos label{
  /* flex-basis do formulario (190px) vira ALTURA aqui dentro, porque este
     bloco e uma coluna: era isso que abria um vao enorme entre uma linha e
     outra da lista de fixos. */
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.zmbr-mod-fixos label em{ color: var(--ambar); font-size: 12px; font-style: normal; }

/* Com o bloco de edição aberto, o formulário de criar tópico sai da tela: os
   dois seguidos pareciam um só, e o "Tipo de tópico" do formulário de criar
   passava por opção do fórum — foi assim que o dono do site fixou o nada. */
#bbpress-forums .zmbr-mod-forum[open] ~ .bbp-topic-form,
#bbpress-forums .zmbr-mod-forum[open] ~ div .bbp-topic-form,
#bbpress-forums:has(.zmbr-mod-forum[open]) .bbp-topic-form{ display: none; }

/* ============================================================
   JANELA "INSERIR LINK" (o botão LINK do editor do fórum)
   É a janela do próprio WordPress (wp-link), desenhada para o
   painel: fundo branco, azul do wp-admin, borda clara. No site
   escuro ela aparecia como um retângulo branco no meio da tela.
   Aqui ela veste o tema — mesmas cores, mesmos botões.
   ============================================================ */
body #wp-link-backdrop{ background: rgba(0,0,0,.75); }
body #wp-link-wrap{
  background: var(--card);
  border: 1px solid var(--card-border-forte);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  color: var(--text);
}
body #wp-link-wrap .link-modal-title,
body #wp-link-wrap #link-modal-title{
  background: var(--bg-alt);
  border-bottom: 1px solid var(--card-border);
  color: var(--white);
  font-family: var(--fonte-titulo);
  letter-spacing: 1px;
}
body #wp-link-close{ color: var(--text-muted); }
body #wp-link-close:hover{ color: var(--sangue-vivo); }

body #wp-link-wrap label,
body #wp-link-wrap .howto,
body #wp-link-wrap .query-notice,
body #wp-link-wrap #wplink-enter-url,
body #wp-link-wrap #wplink-link-existing-content{ color: var(--text-muted); }

body #wp-link-wrap input[type="text"],
body #wp-link-wrap input[type="search"],
body #wp-link-wrap .link-search-field{
  background: #0a0c0a;
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  box-shadow: none;
}
body #wp-link-wrap input[type="text"]:focus,
body #wp-link-wrap .link-search-field:focus{ border-color: var(--toxico-escuro); outline: none; }

/* A lista de conteúdo do site que a busca devolve. */
body #wp-link-wrap #link-selector,
body #wp-link-wrap #search-panel,
body #wp-link-wrap .query-results{
  background: var(--bg-alt);
  border-color: var(--card-border);
  color: var(--text);
}
body #wp-link-wrap .query-results li{ border-bottom: 1px solid var(--card-border); color: var(--text); }
body #wp-link-wrap .query-results li:hover,
body #wp-link-wrap .query-results li.selected{ background: rgba(214,40,40,.18); color: var(--white); }
body #wp-link-wrap .query-results li .item-info{ color: var(--text-muted); }
body #wp-link-wrap .river-waiting{ color: var(--text-muted); }

/* Rodapé: "Cancelar" e "Adicionar link" no padrão dos botões do site. */
body #wp-link-wrap .submitbox{
  background: var(--bg-alt);
  border-top: 1px solid var(--card-border);
}
body #wp-link-wrap #wp-link-cancel .button,
body #wp-link-wrap #wp-link-submit{
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  height: auto;
  line-height: 1.4;
  cursor: pointer;
}
body #wp-link-wrap #wp-link-submit{
  background: var(--sangue);
  border: 1px solid var(--sangue-vivo);
  color: var(--white);
}
body #wp-link-wrap #wp-link-submit:hover{ background: var(--sangue-vivo); }
body #wp-link-wrap #wp-link-cancel .button{
  background: transparent;
  border: 1px solid var(--toxico-escuro);
  color: var(--toxico);
}
body #wp-link-wrap #wp-link-cancel .button:hover{ background: rgba(158,240,26,.12); }

/* As linhas da lista e o aviso "nenhum termo de busca" continuavam claros: o
   WordPress pinta cada <li> e o aviso separadamente (#wp-link li, .query-notice),
   e o seletor da caixa nao alcanca. */
body #wp-link li,
body #wp-link .query-results li{
  background: var(--bg-alt);
  border-bottom: 1px solid var(--card-border);
  color: var(--text);
}
body #wp-link li:hover,
body #wp-link li.selected{ background: rgba(214,40,40,.2); color: var(--white); }
body #wp-link li.unselectable,
body #wp-link li.unselectable:hover{ background: var(--bg-alt); color: var(--text-muted); }
body #wp-link .item-info{ color: var(--text-muted); }
body #wp-link .query-notice,
body #wp-link-wrap .query-notice{
  background-color: var(--bg-alt);
  border-bottom: 1px solid var(--card-border);
  color: var(--text-muted);
}
body #wp-link .query-notice .query-notice-default{ border-left-color: var(--sangue); }

/* Barra de rolagem da lista e da janela, na cor do tema. */
body #wp-link-wrap,
body #wp-link .query-results,
body #wp-link-wrap #link-selector{
  scrollbar-width: thin;
  scrollbar-color: var(--card-border-forte) var(--bg-alt);
}
body #wp-link-wrap ::-webkit-scrollbar{ width: 10px; height: 10px; }
body #wp-link-wrap ::-webkit-scrollbar-track{ background: var(--bg-alt); }
body #wp-link-wrap ::-webkit-scrollbar-thumb{ background: var(--card-border-forte); border: 2px solid var(--bg-alt); }
body #wp-link-wrap ::-webkit-scrollbar-thumb:hover{ background: var(--sangue); }

/* Linha de ajuda no alto do bloco de moderação do fórum. */
.zmbr-mod-ajuda{
  margin: 0;
  padding: 12px 16px 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* Editar tópico: a caixa "marcar esse post como fixo" substitui o seletor
   "Tipo de tópico" do bbPress — dois controles pra mesma coisa confundem, e
   o do plugin nomeia pelo tipo em vez do efeito. */
#bbpress-forums .zmbr-topico-fixo{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
#bbpress-forums .zmbr-topico-fixo label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}
#bbpress-forums p:has(> #bbp_stick_topic_select),
#bbpress-forums p:has(> label[for="bbp_stick_topic"]){ display: none; }
#bbpress-forums #bbp_stick_topic_select,
#bbpress-forums label[for="bbp_stick_topic"]{ display: none; }

/* Criar evento pelo site (inc/eventos-criar.php). O bloco abre no alto da
   lista: quem marca evento olha o que ja existe antes de marcar mais um. */
.evento-criar{ margin: 0 0 26px; }
.evento-criar-recado{
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .04em;
  border-left: 3px solid var(--card-border-forte);
  padding: 8px 12px;
  margin: 0 0 22px;
}
.evento-criar-aviso{
  border-left: 4px solid var(--toxico-escuro);
  background: var(--card);
  padding: 10px 14px;
  margin: 0 0 16px;
}
.evento-criar-aviso-erro{ border-left-color: var(--sangue-vivo); }
.evento-criar-titulo{ margin: 0 0 16px; }
.evento-criar-form{
  background: linear-gradient(180deg, var(--card-alt), var(--card));
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--sangue);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  padding: 22px 24px;
}
.evento-criar-campo{ margin: 0 0 16px; }
.evento-criar-campo label,
.evento-criar-rotulo{
  display: block;
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.evento-criar-campo input[type="text"],
.evento-criar-campo input[type="datetime-local"],
.evento-criar-campo textarea{
  width: 100%;
  max-width: 520px;
}
/* Comeco e fim andam juntos: sao a mesma decisao, e lado a lado a segunda
   data se le como continuacao da primeira. */
.evento-criar-duplo{ display: flex; flex-wrap: wrap; gap: 18px; }
.evento-criar-duplo .evento-criar-campo{ flex: 1 1 220px; }
.evento-criar-duplo .evento-criar-campo input[type="datetime-local"]{ max-width: 260px; }
.evento-criar-servidores label{
  display: block;
  color: var(--text);
  font-family: var(--fonte-texto);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 6px;
}
.evento-criar-discord{
  display: block;
  color: var(--text);
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .04em;
  margin: 0 0 18px;
}
.evento-criar-acoes{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
}

/* Editar/excluir no rodape do card do evento (so administracao ve). Discretos
   de proposito: sao ferramenta de quem cuida, e nao acao pro visitante. */
.evento-acoes{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--card-border);
}
.evento-acao{
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.evento-acao:hover{ color: var(--toxico); }
.evento-acao-apagar:hover{ color: var(--sangue-vivo); }

/* O recado que ocupa o lugar dos botoes pra quem e avisado mas nao decide
   (moderacao, com "so a administracao aprova" ligado). Discreto: e explicacao,
   nao acao — por isso sem moldura e em texto apagado. */
.sino-acoes-recado,
/* A observacao da cobranca da Steam, na pagina de notificacoes: mesma cara do
   recado da fila — e uma explicacao, nao um segundo aviso. */
.sino-nota{
  display: block;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.5;
}
/* Ela sai como <a> (o BuddyPress so deixa link passar), entao precisa desfazer
   a cor de link e ganhar o respiro que um paragrafo teria. */
.sino-nota{ color: var(--ambar); text-decoration: none; }
.sino-nota:hover{ color: var(--sangue-vivo); }

/* ==========================================================================
   NASCIMENTO E ANIVERSARIOS
   ========================================================================== */

/* O campo, no cadastro e em "Editar Perfil". O <input type="date"> nasce claro
   nos navegadores: a cor tem de ser dita, inclusive a do iconezinho do
   calendario, que e desenhado pelo proprio navegador. */
.zmbr-nascimento-campo{ display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }

.zmbr-nascimento-campo label{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.zmbr-nascimento-campo input[type="date"]{
  max-width: 220px;
  padding: 10px 12px;
  background: var(--card-alt);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-family: var(--fonte-mono);
  font-size: 14px;
}

.zmbr-nascimento-campo input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) opacity(.7);
  cursor: pointer;
}

.zmbr-nascimento-ajuda{
  font-size: 12px;
  color: var(--text-muted);
}

/* A linha no alto do perfil, na mesma faixa do papel e do "Ativo agora". */
.zmbr-nascimento{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.zmbr-nascimento .icone{ width: 14px; height: 14px; color: var(--ambar); }

/* O quadro no pe do forum. */
.aniversarios{
  margin: 32px 0 8px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--ambar);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.aniversarios-titulo{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
}

.aniversarios-titulo .icone{ width: 20px; height: 20px; color: var(--ambar); }

.aniversarios-sub,
.aniversarios-vazio,
.aniversarios-mais{
  margin: 6px 0 0;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.aniversarios-lista{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.aniversario-pessoa{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
}

.aniversario-pessoa a{
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
}

.aniversario-pessoa a:hover .aniversario-nome{ color: var(--sangue-vivo); }

.aniversario-avatar{
  width: 34px;
  height: 34px;
  object-fit: cover;
  border: 1px solid var(--card-border);
}

.aniversario-nome{ font-size: 14px; }

.aniversario-quando{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Quem faz hoje: o avatar ganha o anel toxico, como "online" nos sinais de
   vida, e a data vira a cor de destaque. Sem animacao — o quadro fica no pe de
   toda tela do forum. */
.aniversario-e-hoje .aniversario-avatar{ border-color: var(--toxico); box-shadow: 0 0 0 2px rgba(158, 240, 26, .18); }
.aniversario-e-hoje .aniversario-quando{ color: var(--toxico); }

@media (max-width: 700px){
  .aniversario-pessoa{ min-width: 100%; }
}

/* O botao de salvar a data na tela de leitura do perfil. Precisa do id porque
   o BuddyPress pinta `#buddypress button` com o cinza dele — id ganha de
   qualquer pilha de classes, e e a mesma saida que o resto do bloco do
   BuddyPress usa aqui. */
#buddypress .zmbr-nascimento-sozinho{ margin: 4px 0 24px; }

#buddypress .zmbr-nascimento-sozinho button{
  display: inline-flex;
  align-items: center;
  width: auto;
  background: var(--sangue);
  color: var(--white);
  font-family: var(--fonte-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  padding: 13px 26px;
  border: 1px solid var(--sangue-vivo);
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
}

#buddypress .zmbr-nascimento-sozinho button:hover{
  background: var(--sangue-vivo);
  color: var(--white);
}


/* A data embaixo da foto, no cabecalho do perfil.

   Tres coisas que so aparecem medindo a tela, e todas ja morderam aqui:

   - a linha sai **dentro do link da foto** (a coluna do avatar nao tem gancho
     nenhum no BuddyPress), entao precisa desfazer cor e sublinhado de link;
   - a foto e **flutuante** (`float: left`): sem `clear` o texto sobe pro lado
     dela e vai parar em cima da imagem de capa. O `flow-root` no link e o que
     faz o link conter a propria foto, senao ele tem so a altura do texto;
   - a linha se alinha pela **esquerda da foto** e cabe nos 150px dela — fonte
     10px, espacamento curto e o icone encostado na margem. Centrada, com a
     frase mais larga que a imagem, as duas pontas sobravam e nada batia com a
     borda. */
#item-header-avatar a{
  display: flow-root;
  width: fit-content;
  max-width: 100%;
}

#item-header-avatar a .zmbr-nascimento,
#item-header-avatar .zmbr-nascimento{
  display: flex;
  justify-content: flex-start;
  clear: both;
  gap: 4px;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
}

#item-header-avatar a .zmbr-nascimento .icone,
#item-header-avatar .zmbr-nascimento .icone{
  width: 12px;
  height: 12px;
  margin: 0;
  flex: 0 0 auto;
}

#item-header-avatar a:hover .zmbr-nascimento{ color: var(--text); }

/* ==========================================================================
   FORUM: VER COMO VAI FICAR (previa)
   ========================================================================== */

/* A previa fica acima do formulario, com a moldura de um post publicado — a
   ideia e que o que se ve ali seja o que sai depois. */
.zmbr-previa{
  margin: 0 0 18px;
  border: 1px solid var(--card-border-forte);
  border-top: 2px solid var(--toxico-escuro);
  background: var(--card);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.zmbr-previa-topo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card-alt);
  border-bottom: 1px solid var(--card-border);
}

.zmbr-previa-titulo{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--toxico);
}

.zmbr-previa-fechar{
  background: none;
  border: 1px solid var(--card-border-forte);
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
}

.zmbr-previa-fechar:hover{ color: var(--white); border-color: var(--sangue-vivo); }

.zmbr-previa-corpo{
  padding: 14px;
  /* O texto sai com as mesmas regras do post publicado; o que esta aqui e so
     o respiro da caixa. Imagem grande na previa nao pode esticar o
     formulario. */
  max-height: 420px;
  overflow-y: auto;
}

.zmbr-previa-corpo img{ max-width: 100%; height: auto; }

.zmbr-previa-aviso{
  margin: 0;
  padding: 8px 14px 12px;
  color: var(--text-muted);
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* O botao fica antes do "Enviar", com o desenho de botao secundario: publicar
   continua sendo a acao em destaque da linha. */
#bbpress-forums .zmbr-previa-botao,
.zmbr-previa-botao{
  margin-right: 10px;
  background: transparent;
  border: 1px solid var(--card-border-forte);
  color: var(--text);
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 18px;
  cursor: pointer;
}

#bbpress-forums .zmbr-previa-botao:hover,
.zmbr-previa-botao:hover{
  border-color: var(--toxico-escuro);
  color: var(--toxico);
}

#bbpress-forums .zmbr-previa-botao[disabled]{ opacity: .6; cursor: default; }

/* =========================================================================
   PAGINA DE MODERACAO (o que a moderacao faz sem entrar no wp-admin)
   ========================================================================= */

/* Os atalhos ficam grudados no topo: a pagina tem cinco secoes e quem chega
   pelo sino quer ir direto pro assunto do aviso. */
.zmbr-mod-atalhos{
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--card-border);
}
.zmbr-mod-atalhos a{
  padding: 5px 10px;
  background: var(--card);
  border: 1px solid var(--card-border);
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .6px;
  color: var(--text-muted);
  text-decoration: none;
}
.zmbr-mod-atalhos a:hover{ color: var(--white); border-color: var(--card-border-forte); }

.zmbr-mod-secao{
  margin: 34px 0 14px;
  padding-top: 10px;
  font-size: 16px;
  letter-spacing: 1.2px;
  color: var(--ambar);
}
.zmbr-mod-sub{
  margin: 22px 0 12px;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* Item da fila: a barra lateral e ambar, e nao vermelha — vermelho fica so pra
   denuncia, que e o que precisa saltar. */
.zmbr-mod-item{ border-left-color: var(--ambar); }
.zmbr-mod-sub + .zmbr-mod-item,
.zmbr-mod-sub ~ .zmbr-mod-item{ border-left-color: var(--card-border-forte); }

.zmbr-mod-ficha{ margin: 0 0 12px; }
.zmbr-mod-ficha dt{
  margin: 10px 0 2px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .6px;
  color: var(--text-muted);
}
.zmbr-mod-ficha dd{
  margin: 0;
  font-size: 14px;
  white-space: pre-wrap;
}
.zmbr-mod-vazio{ color: var(--text-muted); font-style: italic; }

.zmbr-mod-imagem{ margin: 0 0 12px; }
.zmbr-mod-imagem img{ max-width: 320px; height: auto; border: 1px solid var(--card-border); }
.zmbr-mod-link{ margin: 0 0 10px; }

.zmbr-mod-ativo{ border-color: var(--ambar); color: var(--ambar); }
.zmbr-mod-perigo:hover{ border-color: var(--sangue-vivo); color: var(--sangue-vivo); }

.zmbr-mod-busca{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.zmbr-mod-busca label{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .6px;
  color: var(--text-muted);
}
.zmbr-mod-busca input[type="search"]{
  min-width: 220px;
  padding: 8px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  color: var(--white);
}

/* A tabela rola sozinha no celular; a pagina nunca rola de lado. */
.zmbr-mod-tabela{ overflow-x: auto; }
.zmbr-mod-tabela table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.zmbr-mod-tabela th,
.zmbr-mod-tabela td{
  padding: 8px 10px;
  border-bottom: 1px solid var(--card-border);
  text-align: left;
  white-space: nowrap;
}
.zmbr-mod-tabela th{
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .6px;
  color: var(--text-muted);
}

/* Moderar um item sem sair da galeria (inc/midia-editar.php). */
.midia-moderar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--card-border);
}
.midia-mod-acao,
.midia-mod-editar > summary{
  padding: 4px 9px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.midia-mod-editar > summary::-webkit-details-marker{ display: none; }
.midia-mod-acao:hover,
.midia-mod-editar > summary:hover{ color: var(--white); border-color: var(--card-border-forte); }
.midia-mod-ativa{ border-color: var(--ambar); color: var(--ambar); }
.midia-mod-perigo:hover{ border-color: var(--sangue-vivo); color: var(--sangue-vivo); }

/* O formulário abre embaixo, ocupando a linha inteira do card. */
.midia-mod-editar{ flex: 1 1 100%; }
.midia-mod-editar[open] > summary{ color: var(--white); border-color: var(--card-border-forte); }
.midia-mod-form{
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
}
.midia-mod-form label{
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .6px;
  color: var(--text-muted);
}
.midia-mod-form input{
  width: 100%;
  padding: 7px 9px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  color: var(--white);
}
.midia-mod-form .midia-mod-botoes{ justify-self: start; margin-top: 4px; }

/* Spam e apagar dentro do próprio comentário. */
.comentario-moderar{
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.comentario-moderar:hover{ color: var(--sangue-vivo); }

/* Salvar e cancelar lado a lado, na edição do item da galeria. */
.midia-mod-botoes{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}
/* O <button> nasce com line-height "normal" e o <a> com a do corpo: lado a
   lado, um ficava 6px mais alto que o outro. */
.midia-mod-botoes .btn{ line-height: 1.2; }

/* Denunciar a conta, no cabeçalho do perfil.

   Os botões do BuddyPress ("Adicionar amigo", "Mensagem") são `float: left`,
   então um bloco solto ao lado deles nasce na mesma linha e o formulário
   aberto passa por cima do botão de baixo — foi o que o dono viu. `clear`
   põe o bloco embaixo de todos eles, e a caixa ganha largura própria. */
.member-header-actions .zmbr-denunciar-conta{
  clear: both;
  display: block;
  padding-top: 4px;
}
.member-header-actions .zmbr-denunciar{
  display: block;
  margin-top: 0;
}
.member-header-actions .zmbr-denunciar-form{
  max-width: 420px;
}

/* Atalho da moderação no cabeçalho (só quem modera vê).

   Botão com moldura, e não mais um texto solto: ao lado de "SAIR", em caixa
   alta e mesma cor, dois links seguidos leem como uma palavra só — o mesmo
   problema que o fio vertical do "Sair" já teve de resolver. */
.site-auth a.auth-moderar{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--ambar);
  color: var(--ambar);
  font-size: 11px;
  letter-spacing: 1.2px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.site-auth a.auth-moderar:hover{
  background: var(--ambar);
  color: var(--bg);
}
.site-auth a.auth-moderar svg{ width: 15px; height: 15px; }
/* Sem o tracinho vermelho do menu, que aqui cairia dentro da moldura. */
.site-auth a.auth-moderar::after{ display: none; }

/* A palavra fica visível também no computador, a pedido do dono — e ela custa
   largura numa linha que já vive no limite (onze itens de menu mais o bloco
   de conta). Por isso vêm juntas três coisas: o botão aperta o próprio
   espaço, o menu encolhe o respiro entre os itens e **o cabeçalho deixa de
   ficar preso aos 1160px do resto da página** — ele é a única faixa larga do
   site, e era a caixa estreita que empurrava o bloco de conta pra fora.
   De 781 a 1200px nao ha largura pra isso: ali o botao volta a ser so a
   caveira, com o nome no title e no leitor de tela. */
@media (min-width: 781px){
  .site-auth a.auth-moderar{ padding: 5px 9px; font-size: 10px; letter-spacing: .9px; }
  .site-auth a.auth-moderar span{ white-space: nowrap; }
}
@media (min-width: 1201px){
  .site-header .container{ max-width: min(1360px, calc(100% - 40px)); }
  .main-nav .menu{ gap: 8px; }
}
@media (min-width: 781px) and (max-width: 1200px){
  .site-auth a.auth-moderar span{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* No painel do celular há largura de sobra: a palavra volta. */
@media (max-width: 780px){
  .site-auth a.auth-moderar{ padding: 6px 12px; }
  .site-auth a.auth-moderar span{
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

/* A faixa de 1321 a 1440px é a mais apertada do cabeçalho: o menu ainda cabe em
   uma linha só e o bloco de conta divide a mesma linha com ele. Com a caveira
   somada, o conjunto passava 29px da tela (medido a 1425px), então aqui o
   respiro entre os itens e a moldura do botão encolhem. */
@media (min-width: 781px) and (max-width: 1440px){
  .site-auth{ gap: 9px; }
  .site-auth a.auth-moderar{ padding: 5px 6px; }
  .site-auth a.auth-moderar svg{ width: 14px; height: 14px; }
  .auth-nome{ max-width: 72px; }
}

/* De 1341 a 1440px o cabeçalho ainda é uma linha só, e nem os 28px da caveira
   cabiam: medido a 1351px, o bloco de conta já terminava em 1357 (a 6px de
   estourar) e o botão empurrava para 1385. Nessa faixa o **apelido** sai e
   fica a foto, que é o mesmo link do perfil e carrega o nome no `title`. */
@media (min-width: 1341px) and (max-width: 1440px){
  .site-auth .auth-nome{ display: none; }
}

/* As seções da moderação abrem e fecham no próprio nome (<details>). */
.zmbr-moderacao .zmbr-mod-secao-bloco{
  margin: 0 0 10px;
  background: var(--card);
  border: 1px solid var(--card-border);
}
.zmbr-moderacao .zmbr-mod-secao-bloco > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ambar);
}
.zmbr-moderacao .zmbr-mod-secao-bloco > summary::-webkit-details-marker{ display: none; }
.zmbr-moderacao .zmbr-mod-secao-bloco > summary:hover{ background: var(--bg-alt); }
/* A setinha diz, fechado, que ali dentro tem coisa. */
.zmbr-moderacao .zmbr-mod-secao-nome::before{
  content: "▸ ";
  color: var(--text-muted);
}
.zmbr-moderacao .zmbr-mod-secao-bloco[open] .zmbr-mod-secao-nome::before{ content: "▾ "; }
.zmbr-moderacao .zmbr-mod-conta{
  flex: 0 0 auto;
  min-width: 24px;
  padding: 2px 8px;
  background: var(--bg-alt);
  border: 1px solid var(--card-border-forte);
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}
.zmbr-moderacao .zmbr-mod-secao-corpo{
  padding: 0 14px 14px;
  border-top: 1px solid var(--card-border);
}
.zmbr-moderacao .zmbr-mod-secao-corpo > :first-child{ margin-top: 14px; }

.zmbr-mod-paginas{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.zmbr-mod-paginas a,
.zmbr-mod-paginas .zmbr-mod-pagina-atual{
  padding: 4px 10px;
  border: 1px solid var(--card-border);
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
}
.zmbr-mod-paginas a:hover{ color: var(--white); border-color: var(--card-border-forte); }
.zmbr-mod-paginas .zmbr-mod-pagina-atual{ color: var(--ambar); border-color: var(--ambar); }

/* A foto do perfil no tamanho do quadro, sempre.

   O BuddyPress imprime width/height 150 no HTML mas manda `width:auto;
   height:auto` no CSS dele, então o que vale é o tamanho do arquivo: os
   avatares gravados a 300px apareciam com o dobro do quadro e empurravam o
   nome e os botões. Mesma correção já feita na lista de membros.

   O seletor precisa ser mais específico que o do plugin: ele manda `width: auto` em
   `.single-headers #item-header-avatar a img`, que é mais específico que
   `#item-header-avatar img.avatar` e ganhava calado — foi por isso que a
   primeira tentativa não mudou nada na tela. */
.single-headers #item-header-avatar a img.avatar,
#buddypress #item-header-avatar img.avatar{
  width: 150px;
  height: 150px;
  object-fit: cover;
}

/* O bloco de punição no perfil: rótulo, campo e botão na mesma linha de base.

   Label e campo são irmãos dentro do flex (não há um embrulho por par), então
   o `align-items: flex-end` de antes encostava o rótulo no fim da caixa e o
   `margin-bottom` dele o empurrava para cima do campo — o desalinho do print.
   Alinhados pelo centro, e com a mesma altura no campo e no botão, os três
   ficam na mesma linha. */
.zmbr-punir-form{ align-items: center; }
.zmbr-punir-form label{ margin-bottom: 0; }
.zmbr-punir-form input[type="text"],
.zmbr-punir-form input[type="number"],
.zmbr-punir-form .btn{
  height: 38px;
  box-sizing: border-box;
  line-height: 1.2;
}

/* Cada rótulo colado no seu campo, e o botão numa linha própria. */
.zmbr-punir-campo{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.zmbr-punir-campo-largo{ flex: 1 1 260px; min-width: 0; }
.zmbr-punir-campo-largo input[type="text"]{ flex: 1 1 auto; width: 100%; }
.zmbr-punir-form .zmbr-punir-limpar{ flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.zmbr-punir-form .btn{ flex: 0 0 auto; }
/* O input do tema traz margem de baixo (herdada dos formulários do site), que
   dentro do par o deslocava 6px para cima do rótulo. */
.zmbr-punir-form input[type="text"],
.zmbr-punir-form input[type="number"]{ margin: 0; }
/* O "Editar" da galeria tem o tamanho do texto, e não o da linha: o <details>
   ocupa a largura toda (é onde o formulário abre), mas o <summary> é bloco por
   natureza e vinha esticado junto. */
.midia-mod-editar > summary{
  display: inline-block;
  width: auto;
}
/* Fechado, o "Editar" fica na linha dos outros botões; aberto, toma a linha
   inteira, senão o formulário nasceria espremido numa coluna. */
.midia-moderar .midia-mod-editar{ flex: 0 0 auto; }
.midia-moderar .midia-mod-editar[open]{ flex: 1 1 100%; }
/* O <details> é bloco e o <summary> dentro dele nascia 1px abaixo dos links
   ao lado; virando flex, o botão encosta na mesma linha que os outros. */
.midia-moderar .midia-mod-editar{ display: flex; flex-wrap: wrap; }
.midia-moderar .midia-mod-editar > summary{ display: block; }
/* Aberto, o <details> deixa de ser uma caixa (`display: contents`): o "Editar"
   continua na linha do "Apagar" e o formulário desce para a linha de baixo,
   inteiro. Antes o details virava uma coluna e empurrava o botão para fora da
   linha dos outros. */
.midia-moderar .midia-mod-editar[open]{ display: contents; }
.midia-moderar .midia-mod-editar[open] > .midia-mod-form{ flex: 1 1 100%; margin-top: 4px; }

/* O bloco de moderação no perfil abre e fecha no próprio título. */
.zmbr-punir > .zmbr-punir-titulo{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  list-style: none;
}
.zmbr-punir > .zmbr-punir-titulo::-webkit-details-marker{ display: none; }
.zmbr-punir > .zmbr-punir-titulo::after{
  content: "▸";
  color: var(--text-muted);
  font-size: 12px;
}
.zmbr-punir[open] > .zmbr-punir-titulo::after{ content: "▾"; }
.zmbr-punir[open] > .zmbr-punir-titulo{ margin-bottom: 14px; }

/* A imagem de fundo não muda de tamanho quando a página cresce.

   O fundo é `cover` dentro de uma caixa que acompanha a altura do conteúdo:
   abrir um bloco (a moderação no perfil, por exemplo) fazia a caixa crescer e a
   imagem ser reescalada na hora — parecia que o fundo "pulava". Presa à janela,
   ela mantém o mesmo tamanho independentemente do que abre e fecha. No celular
   fica como estava: `fixed` é caro de rolar e o iOS ignora. */
@media (min-width: 781px){
  .secao-fundo::before{ background-attachment: fixed; }
}


/* Aviso de tradução automática, no fim da notícia (inc/noticias-traduzir.php).
   Discreto de propósito: informa a procedência sem competir com o texto. */
.noticia-traduzida{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  font-family: var(--fonte-mono);
  font-size: .78rem;
  color: var(--texto-fraco, #8a949c);
}
.noticia-traduzida svg{ flex: none; width: 16px; height: 16px; }

/* ==========================================================================
   NOTICIAS: as duas abas (Jogos Steam / Geral)
   ========================================================================== */

/* As abas escolhem a ORIGEM da noticia; os botoes logo abaixo filtram dentro
   dela. Sao duas perguntas diferentes, entao nao podem ter o mesmo desenho —
   por isso aqui nao se usa `.btn`: a aba e uma placa maior, presa a uma regua,
   e o filtro e uma pastilha solta. Foi o erro que a galeria ja cometeu, com
   seis botoes na tela que se contradiziam.

   O material e o do resto do site: canto cortado por clip-path, fundo de card,
   mono em caixa alta, e o sangue marcando o que esta ativo. */
.noticias-abas{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 24px;
  padding: 0 0 0 2px;
  border-bottom: 2px solid var(--card-border-forte, #3a4148);
}
.noticias-aba{
  position: relative;
  padding: 12px 24px;
  background: linear-gradient(180deg, var(--card-alt), var(--card));
  border: 1px solid var(--card-border);
  border-bottom: 0;
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--texto-fraco, #8a949c);
  /* Canto cortado em cima, como as demais placas do site. */
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
  transition: color .15s ease, background .15s ease;
}
.noticias-aba:hover{
  color: var(--white);
  background: linear-gradient(180deg, var(--card), var(--card-alt));
}

/* A ativa desce 2px pra sentar em cima da regua e "furar" a linha — e o que
   diz que ela e a aba aberta, e nao mais um botao aceso. */
.noticias-aba-ativa,
.noticias-aba-ativa:hover{
  color: var(--white);
  background: linear-gradient(180deg, var(--sangue), #7d1d1d);
  border-color: var(--sangue-vivo);
  margin-bottom: -2px;
  padding-bottom: 14px;
}

/* O fio de sangue no topo da aba ativa, o mesmo que os cards usam. */
.noticias-aba-ativa::before{
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 0;
  height: 2px;
  background: var(--sangue-vivo);
}

@media (max-width: 520px){
  .noticias-aba{ flex: 1 1 auto; text-align: center; padding: 11px 14px; }
}
/* ==========================================================================
   NOTICIAS: publicar pelo proprio site (so administracao e moderacao)
   ========================================================================== */

/* Nasce fechado: quem abre /noticias/ pra ler nao precisa passar por um
   formulario antes da primeira noticia. */
.noticia-form-bloco{
  margin-bottom: 26px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.noticia-form-bloco > summary{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  cursor: pointer;
  font-family: var(--fonte-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--toxico);
}
.noticia-form-bloco[open] > summary{ border-bottom: 1px solid var(--card-border); }

.noticia-form{ padding: 18px 16px 6px; }
.noticia-form p{ margin: 0 0 16px; }
.noticia-form label{
  display: block;
  margin-bottom: 6px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--texto-fraco, #8a949c);
}
.noticia-form input[type="text"],
.noticia-form select{ width: 100%; max-width: 520px; }

/* O editor do WordPress entra no site com a cara dele (branco). Aqui ele
   herda a moldura do tema; o miolo e um iframe do TinyMCE e continua claro,
   o que e aceitavel: e area de escrita, nao de leitura. */
.noticia-form .wp-editor-container{ border: 1px solid var(--card-border); }

/* ---- Ver como vai ficar, antes de publicar (inc/noticias-geral.php) ---- */
/* Moldura tracejada e a etiqueta em verde: a previa tem de ler como um ensaio,
   nunca como a noticia ja no ar — alguem que confunda os dois publica sem
   clicar em publicar e vai embora achando que publicou. */
.noticia-previa{
  border: 1px dashed var(--toxico);
  padding: 18px 20px 4px;
  margin: 0 0 22px;
  background: rgba(0,0,0,.25);
}
.noticia-previa-titulo{
  font-size: 14px;
  letter-spacing: 1.4px;
  color: var(--toxico);
  margin: 0 0 6px;
}
.noticia-previa-aviso{
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--ambar);
  margin: 0 0 14px;
}
/* O corpo repete o desenho da noticia de verdade, mas sem a caixa do artigo:
   duas molduras encaixadas (a tracejada por fora, a do artigo por dentro) e o
   que faz o bloco parecer um erro de layout. */
.noticia-previa-corpo{
  background: none;
  border: 0;
  padding: 0;
}
.noticia-previa-corpo h1{ font-size: 28px; margin: 0 0 8px; }

/* ---- A capa, que sobe antes do "publicar" (assets/js/noticia-capa.js) ---- */
/* Apagar mora longe de "salvar", e nao tem cara de botao: e um link discreto,
   em vermelho, para que a mao nao o encontre por acidente ao lado do submit. */
.noticia-apagar{ margin: 16px 0 0; }
.noticia-apagar-botao{
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--sangue-vivo);
  text-decoration: underline;
  cursor: pointer;
}
.noticia-apagar-botao:hover,
.noticia-apagar-botao:focus-visible{ color: #fff; background: var(--sangue); text-decoration: none; padding: 2px 6px; }

.noticia-capa-recado{
  display: block;
  margin-top: 6px;
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--toxico);
}
.noticia-capa-recado.e-erro{ color: var(--sangue-vivo); }
/* Prova de que a imagem chegou: sem ela, o campo esvaziado pelo script pareceria
   ter perdido o arquivo. */
.noticia-capa-previa{
  display: block;
  margin-top: 10px;
  max-width: 260px;
  height: auto;
  border: 1px solid var(--card-border);
}
/* `display: block` acima ganha do atributo `hidden`, que o navegador aplica
   como `display: none` de folha padrao — sem estas duas linhas a miniatura
   vazia apareceria como um retangulo com borda e sem imagem. */
.noticia-capa-previa[hidden]{ display: none; }
[data-noticia-previa-capa][hidden]{ display: none; }

.noticia-recado{
  margin: 0 0 20px;
  padding: 12px 15px;
  border-left: 3px solid var(--toxico);
  background: var(--card);
  font-family: var(--fonte-mono);
  font-size: .84rem;
}
.noticia-recado-erro{ border-left-color: var(--sangue); }

/* ==========================================================================
   MODAL DE MIDIA NO SITE (botao "Adicionar midia" da tela de noticias)
   Este modal e uma tela do wp-admin aberta dentro do site, e o site tem regras
   de formulario genericas: `input[type="text"], textarea, select` pinta campo
   escuro e `input[type="submit"], button` pinta TODO botao de vermelho-sangue.
   Dentro do modal isso vira dano — a lupa da busca, o X de fechar, as setas de
   pagina e os campos de titulo/legenda sao botoes e campos sem classe propria
   em varios pontos. Aqui as regras do tema sao devolvidas ao padrao para que a
   folha do proprio WordPress (media-views) desenhe a tela dela.
   ========================================================================== */
.media-modal button,
.media-modal input[type="submit"],
.media-frame button,
.media-frame input[type="submit"],
.media-modal-backdrop button{
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  padding: 0;
  clip-path: none;
}

/* O `.button` do wp-core-ui tem desenho proprio e precisa dele de volta: o
   reset acima passa por cima, entao ele e restaurado aqui. */
.media-modal .button,
.media-frame .button,
.media-modal .button-primary,
.media-frame .button-primary{
  padding: 0 10px;
  border: 1px solid;
  border-radius: 3px;
  line-height: 2.15384615;
}

.media-modal input[type="text"],
.media-modal input[type="search"],
.media-modal input[type="url"],
.media-modal input[type="number"],
.media-modal textarea,
.media-modal select,
.media-frame input[type="text"],
.media-frame input[type="search"],
.media-frame input[type="url"],
.media-frame textarea,
.media-frame select{
  background: #fff;
  color: #2c3338;
  border: 1px solid #8c8f94;
  border-radius: 3px;
  font-family: inherit;
  clip-path: none;
}

/* O modal do WordPress vive em z-index 160000; a cortina de scanlines do tema
   fica em 999 e passaria por cima dele. */
.media-modal,
.media-modal-backdrop{ z-index: 160000; }

/* O botao de editar no fim da noticia, pra quem pode edita-la. */
.noticia-editar{ margin: 30px 0 0; }
.noticia-form p:last-of-type{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }