@charset "utf-8";
/* CSS Document */

/* 
   Suno Prompt Builder v2
*/

:root {
  /* Fundo hospitalar claro */
  --bg-dark: #f2f5f7;               /* Cinza-clínico suave */

  /* Profundidade e sombras frias */
  --midnight-blue: #dce3e8;         /* Azul hospitalar leve */

  /* Acento principal (sirene vermelha) */
  --accent-purple: #ff2b2b;         /* Vermelho alerta */

  /* Destaque secundário (neon cirúrgico) */
  --neon-green: #ff4d4d;            /* Vermelho neon suave */

  /* Painéis estilo acrílico */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(0, 0, 0, 0.08);

  /* Texto escuro para fundo claro */
  --text-main: #1a1a1a;
}

/* ============================================
   1. RESET & BASE (Extraído do Backup)
============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

.spacer {
    margin-bottom: 20px;
}

.center {
    text-align: center;
}
/* ============================================
   2. ESTRUTURA & GRID (Seu sistema de alinhamento)
============================================ */
.dashboard-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Grid: 2 Colunas (Metal vs Electronic) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* Grid: 3 Colunas (Artistas / Lançamentos) */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

/* Grid Assimétrico: (Ideal para Bio de Artista + Player) */
.grid-side-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 15px;
  align-items: stretch;
}

.grid-auto-left {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
}

.grid-auto-right {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
}

.grid-auto-60 {
    display: grid;
    grid-template-columns: auto 60%;
    gap: 20px;
    align-items: start;
}

.grid-auto-40 {
    display: grid;
    grid-template-columns: auto 40%;
    gap: 20px;
    align-items: start;
}

/* ============================================
   3. COMPONENTES "GLASS" (Estética do Selo)
============================================ */
/* --- Botão principal com estética clínica --- */


.glass-panel {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(6px);
  margin-bottom: 20px;
  transition: border 0.3s ease;
}


.glass-panel-paper {
  background: rgba(225, 204, 165, 1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(6px);
  margin-bottom: 20px;
  transition: border 0.3s ease;
}


/* Borda com destaque Verde Neon para itens de IA */
.glass-panel-ia {
  border-left: 4px solid var(--neon-green);
}


/* ============================================
   SIGNAL - NOVOS PAINÉIS E NEONS
============================================ */

/* Painel Dark (Para destacar vídeos ou áreas de aviso) */
.glass-panel-dark {
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid rgba(255, 43, 43, 0.3);
  border-radius: 12px;
  padding: 20px;
  color: #f2f5f7;
  backdrop-filter: blur(8px);
  margin-bottom: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

/* Neon Vermelho (Sirene) */
.neon-text-red {
  color: var(--accent-purple);
  text-shadow: 0 0 8px rgba(255, 43, 43, 0.6), 0 0 15px rgba(255, 43, 43, 0.4);
  font-weight: 900;
  text-transform: uppercase;
}

/* Efeito de Scanline (Para dar clima de TV antiga no fundo dos vídeos) */
.scanline-effect {
  position: relative;
  overflow: hidden;
}

.scanline-effect::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}


/* ============================================
   4. TIPOGRAFIA & BOTÕES
============================================ */
h1, h2, h3 { font-weight: 800; color: #fff; margin-bottom: 15px; }

.accent-text { color: var(--accent-purple); }
.neon-text { color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green); }

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* BOTÃO PRINCIPAL — DOPE MINE */
.btn-main {
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid #ff2b2b; /* Vermelho sirene */
  background: transparent;
  color: #1a1a1a; /* Texto escuro */
  cursor: pointer;
  transition: 0.3s ease;
  text-align: center;
}

/* HOVER —*/
.btn-main:hover {
  background: rgba(255, 0, 0, 0.15);
  border-color: #ff2b2b;
  color: #b30000;
}

/* ============================================
   SIGNAL - BLACK NEON SMUDGE (Efeito Borrado)
============================================ */

.neon-black-smudge {
    color: #000000;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 
        0 0 4px rgba(255, 43, 43, 0.9),
        0 0 10px rgba(255, 43, 43, 0.6),
        0 0 20px rgba(255, 43, 43, 0.4);
    filter: blur(0.4px);
    display: inline-block;
    /* Adiciona a animação: 3 segundos, infinita */
    animation: signal-flicker 3s infinite;
}

/* Efeito de interferência ao passar o mouse (opcional) */
.neon-black-smudge:hover {
    filter: blur(0.8px) contrast(1.5);
    text-shadow: 
        -2px 0 10px rgba(255, 43, 43, 0.8),
         2px 0 15px rgba(255, 43, 43, 0.5);
    transform: skewX(-2deg); /* Inclinação leve de erro de sinal */
}

/* Animação de instabilidade de sinal */
@keyframes signal-flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: 1;
        filter: blur(0.4px);
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.7;
        filter: blur(1.5px); /* O texto "derrete" quando falha */
    }
}

.neon-red-smudge {
    color: #ff2b2b; /* Vermelho Hellthoven */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* Sombra escura pesada para dar profundidade e o efeito "sujo" */
    text-shadow: 
        0 0 2px rgba(0, 0, 0, 1),        /* Contorno seco */
        0 0 8px rgba(0, 0, 0, 0.8),      /* Sombra média */
        0 0 15px rgba(0, 0, 0, 0.5),     /* Borrão de fundo */
        2px 2px 0px rgba(255, 255, 255, 0.1); /* Um leve reflexo "fantasma" */

    filter: blur(0.3px);
    display: inline-block;
    
    /* Mesma animação para manter o clima de transmissão pirata */
    animation: signal-flicker 4s infinite reverse; /* Velocidade diferente para não sincronizar */
}

/* ============================================
   5. RESPONSIVIDADE MOBILE (Fixado do Backup)
============================================ */
@media (max-width: 768px) {
  .dashboard-layout { padding: 15px; }

  /* Empilha as colunas no celular */
  .grid-2, .grid-3, .grid-side-layout {
    grid-template-columns: 1fr;
  }
  
  h1 { font-size: 1.8rem; }
}

/* ============================================
   ENHANCED ARTIST LIST & BUTTONS
============================================ */
.artist-list {
  list-style: none;
  padding: 0;
  margin: 25px 0;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espaço entre os botões */
}

/* Botão Base do Artista */
.artist-list li a {
  display: block;
  text-decoration: none;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

/* Título dentro do botão (ajustando o seu <h3>) */
.artist-list li a h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: 0.3s;
}

/* Hover Padrão: Roxo Glow (Hellthoven Style) */
.artist-list li a:hover {
  background: rgba(98, 0, 238, 0.1);
  border-color: var(--accent-purple);
  box-shadow: 0 0 20px rgba(98, 0, 238, 0.4);
  transform: translateY(-2px);
}

.artist-list li a:hover h3 {
  color: #fff;
  text-shadow: 0 0 10px var(--accent-purple);
}

/* BOTÃO DESTACADO (Destaque Verde Neon para IA/Atomic Bomb) */
.artist-list li.featured a {
  border: 1px solid var(--neon-green);
  background: rgba(57, 255, 20, 0.05);
}

.artist-list li.featured a h3 {
  color: var(--neon-green);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}

.artist-list li.featured a:hover {
  background: rgba(57, 255, 20, 0.15);
  box-shadow: 0 0 25px rgba(57, 255, 20, 0.5);
}

/* ============================================
   AUDIO PLAYER + PLAYLIST
============================================ */
#hellthovenPlayer {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

#playlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

#playlist li {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: 0.3s ease;
}

#playlist li:hover {
  background: rgba(98, 0, 238, 0.15);
  border-color: var(--accent-purple);
}

#playlist li.active {
  background: rgba(98, 0, 238, 0.25);
  border-color: var(--accent-purple);
  box-shadow: 0 0 10px var(--accent-purple);
}

/* ============================================
   FORMS (Subscribe + Contact)
============================================ */
form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

form input,
form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  font-size: 1rem;
  transition: 0.3s ease;
}

form input:focus,
form textarea:focus {
  border-color: var(--accent-purple);
  outline: none;
  box-shadow: 0 0 10px var(--accent-purple);
}

form textarea {
  min-height: 120px;
  resize: vertical;
}




/* ============================================
   RETRO UNDERGROUND PLAYER STYLE
============================================ */

/* Player container */
.glass-panel h2 {
  font-family: "Inter", sans-serif;
  letter-spacing: 1px;
}

/* Audio element */
#hellthovenPlayer {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(20,20,20,0.6));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

/* Playlist container */
#playlist {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 10px;
}

/* Playlist items */
#playlist li {
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(10, 10, 10, 0.35);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: 0.25s ease;
  font-family: "Inter", monospace;
  letter-spacing: 0.5px;
  font-size: 0.95rem;
  color: #cbd5e1;
  position: relative;
}

/* Hover effect */
#playlist li:hover {
  background: rgba(98, 0, 238, 0.15);
  border-color: var(--accent-purple);
  box-shadow: 0 0 8px rgba(98, 0, 238, 0.4);
}

/* Active track */
#playlist li.active {
  background: rgba(98, 0, 238, 0.25);
  border-color: var(--accent-purple);
  box-shadow: 0 0 12px rgba(98, 0, 238, 0.6);
  color: #fff;
}

/* Retro tape‑deck indicator */
#playlist li.active::before {
  content: "▶";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--neon-green);
  font-size: 0.9rem;
  text-shadow: 0 0 6px var(--neon-green);
}

/* ============================================
   RETRO UNDERGROUND PLAYER CONTAINER
============================================ */
.player-container {
  padding: 25px;
  background: linear-gradient(135deg, rgba(10,10,10,0.45), rgba(0,0,0,0.7));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.4);
  position: relative;
}

/* Linha retrô superior */
.player-container::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: rgba(57,255,20,0.2);
  box-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* ============================================
   6. UTILITÁRIOS / CLASSES GERAIS
   (Imagens responsivas, helpers, etc.)
============================================ */
.imagem-responsiva {
  max-width: 100%;
  height: auto;
}

.imagem-responsiva-retro {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
  transition: 0.3s ease;
}

.imagem-responsiva-retro:hover {
  border-color: var(--accent-purple);
  box-shadow: 0 0 15px rgba(98,0,238,0.5);
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.icon-responsive {
  width: clamp(16px, 5vw, 40px);
  height: auto;
  object-fit: contain;
}

.icon-responsive-lg {
  width: clamp(20px, 6vw, 48px);
  height: auto;
  object-fit: contain;
}

/* Banners */
.banner-large {
  width: clamp(160px, 40vw, 320px);
  height: auto;
  object-fit: contain;
}

.banner-medium {
  width: clamp(90px, 22vw, 180px);
  height: auto;
  object-fit: contain;
}

.banner-small {
  width: clamp(60px, 15vw, 120px);
  height: auto;
  object-fit: contain;
}

.banner-xl {
  width: clamp(220px, 55vw, 480px);
  height: auto;
  object-fit: contain;
}

/* ============================================
   CLASSES INTERMEDIÁRIAS (SIGNAL & ATOMIC)
============================================ */

/* Alvo: 100px (Ideal para selos de rodapé ou logos secundários) */
.banner-xs {
  width: clamp(50px, 12vw, 100px);
  height: auto;
  object-fit: contain;
}

/* Alvo: 80px (Ideal para mini-ícones de controle ou avatares) */
.banner-tiny {
  width: clamp(40px, 10vw, 80px);
  height: auto;
  object-fit: contain;
}

/* Variação fixa para Ícones (Se precisar de precisão cirúrgica) */
.icon-100 {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.icon-80 {
  width: 80px;
  height: 80px;
  object-fit: contain;
}


/* ============================================
   LEGAL INFORMATION (DISCREET STYLE)
============================================ */
.legal-box {
  border: 1px solid rgba(255,255,255,0.08);
  padding: 18px;
  font-size: 0.75rem;
  margin-top: 30px;
  margin-bottom: 30px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  backdrop-filter: blur(6px);
}

.legal-title {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-main);
  opacity: 0.8;
}

.legal-box div {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 6px 0;
  opacity: 0.85;
}

.legal-box div:last-child {
  border-bottom: none;
}

.legal-link {
  color: var(--neon-green);
  text-decoration: none;
  transition: 0.3s ease;
}

.legal-link:hover {
  color: var(--accent-purple);
  text-shadow: 0 0 6px var(--accent-purple);
}

.legal-explanation {
  margin-top: 12px;
  opacity: 0.7;
  line-height: 1.4;
}

/* ============================================
   SIGNAL - TRANSMISSION LIST (Mobile First)
============================================ */

.signal-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.signal-item {
    background: rgba(0, 0, 0, 0.03); /* Fundo quase invisível */
    border-left: 4px solid var(--accent-purple); /* A barra de sinal vermelha */
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
}

/* Efeito de destaque ao passar o mouse ou tocar */
.signal-item:hover {
    background: rgba(255, 43, 43, 0.05);
    transform: translateX(5px);
    box-shadow: -5px 0 15px rgba(255, 43, 43, 0.1);
}

.signal-item strong {
    display: block; /* Força o título a ficar em cima no mobile */
    color: var(--accent-purple);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.signal-item span {
    display: block;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-main);
}

@media (max-width: 480px) {
    .signal-item {
        padding: 12px;
    }
    .signal-item span {
        font-size: 0.85rem; /* Ajuste fino para telas muito pequenas */
    }
}

/* ============================================
    AUDIT - TECHNICAL SPEC LIST (Forense)
============================================ */

.audit-list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.audit-item {
    background: #ffffff; /* Fundo branco puro para contrastar com o cinza hospitalar */
    border: 1px solid var(--glass-border);
    border-left: 6px solid var(--accent-purple); /* Faixa de erro mais grossa */
    padding: 20px;
    margin-bottom: 20px;
    /* Sombra rígida e fria para dar aspecto de papel sobreposto */
    box-shadow: 4px 4px 0px var(--midnight-blue); 
    transition: all 0.2s ease-in-out;
}

/* Efeito Hover: O item parece ser "selecionado" para análise */
.audit-item:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 0px var(--midnight-blue);
    border-color: var(--neon-green);
}

.audit-item strong {
    display: block;
    color: var(--accent-purple);
    font-family: 'Courier New', Courier, monospace; /* Fonte técnica */
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    /* Uma linha pontilhada para separar o título do conteúdo */
    border-bottom: 1px dashed var(--midnight-blue);
    padding-bottom: 5px;
}

.audit-item span {
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-main);
    font-weight: 500;
}

/* Ajuste da Versão Forense do Título */
.audit-title {
    color: var(--accent-purple);
    text-transform: uppercase;
    font-weight: 900;
    border-bottom: 3px solid var(--accent-purple);
    display: inline-block;
    padding-bottom: 2px;
    margin-bottom: 20px;
    font-size: 1.4rem;
}

@media (max-width: 480px) {
    .audit-item {
        padding: 15px;
        box-shadow: 3px 3px 0px var(--midnight-blue);
    }
}

/* ============================================
   YOUTUBE BUTTONS (RETRO UNDERGROUND)
============================================ */
.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.yt-btn {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-family: "Inter", monospace;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-align: center;
    transition: 0.25s ease;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,10,10,0.35);
    color: #cbd5e1;
    position: relative;
}

/* Ícone fake do YouTube feito só com CSS */
.yt-btn::before {
    content: "▶";
    font-size: 0.8rem;
    margin-right: 8px;
    opacity: 0.8;
}

/* Canal principal */
.main-channel:hover {
    border-color: var(--accent-purple);
    background: rgba(98,0,238,0.15);
    box-shadow: 0 0 10px rgba(98,0,238,0.4);
    color: #fff;
}

/* Canal underground */
.underground-channel:hover {
    border-color: var(--neon-green);
    background: rgba(57,255,20,0.12);
    box-shadow: 0 0 10px rgba(57,255,20,0.4);
    color: #fff;
}


/* ============================================
   SIGNAL - CHANNEL SELECTOR (Menu de Navegação)
============================================ */

.channel-selector {
    margin-top: 30px;
    padding: 15px;
    border-top: 1px solid var(--glass-border);
}

.channel-grid {
    display: grid;
    grid-template-columns: 1fr; /* Coluna única no mobile por padrão */
    gap: 12px;
}

.channel-btn {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--glass-border);
    padding: 15px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.channel-btn:hover, .channel-btn:active {
    border-color: var(--accent-purple);
    background: rgba(255, 43, 43, 0.03);
}

.ch-num {
    font-family: monospace;
    font-weight: bold;
    color: var(--accent-purple);
    background: rgba(255, 43, 43, 0.1);
    padding: 2px 6px;
    margin-right: 15px;
    font-size: 0.8rem;
    border: 1px solid var(--accent-purple);
}

.ch-label {
    color: var(--text-main);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
}

/* Responsividade: No Desktop os canais ficam lado a lado */
@media (min-width: 768px) {
    .channel-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .channel-btn {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 20px;
    }
    
    .ch-num {
        margin-right: 0;
        margin-bottom: 10px;
    }
}


/* ============================================
   ALBUM INFO BOX
============================================ */
.album-box {
    border: 2px solid rgba(255,255,255,0.12);
    padding: 20px;
    font-size: 0.9rem; /* maior que a legal-box */
    margin-bottom: 30px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    min-height: 100%; /* garante altura igual ao painel ao lado */
    display: flex;
    flex-direction: column;
}

.album-box div {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 8px 0;
}

.album-box div:last-child {
    border-bottom: none;
}

.album-title {
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 1rem;
    opacity: 0.9;
}

/* ============================
   GALERIA 
============================ */

.gallery-square {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.gallery-square .item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.5);
    box-shadow: 0 0 12px rgba(0,0,0,0.15);
    transition: 0.3s ease;
}

.gallery-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease;
}

/* Hover sirene */
.gallery-square .item:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 0 15px rgba(255,0,0,0.4);
}

.gallery-square .item:hover img {
    transform: scale(1.05);
}

.video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
    box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   ENHANCED VIDEO SIGNAL PLAYER
============================================ */

.video-main-container {
  border: 2px solid var(--accent-purple);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(255, 43, 43, 0.2);
  margin-bottom: 25px;
  background: #000;
}

/* Grid de Miniaturas de Vídeo (Estilo Galeria de Shorts) */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.video-thumb {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  transition: 0.3s ease;
  background: #fff;
}

.video-thumb:hover {
  border-color: var(--accent-purple);
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(255, 43, 43, 0.2);
}

@media (max-width: 480px) {
  .video-grid {
    grid-template-columns: 1fr; /* Força uma coluna só no celular para vídeos */
  }
}


/* =========================================================
   MOBILE IMPROVEMENTS (inspirado no SPB, adaptado Hellthoven)
   Adicionado automaticamente
========================================================= */

/* Utilitários (o SPB tem isso; aqui ajuda muito em mobile) */
.flex { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }





/* Evita estouro por textos longos (playlist, links, etc.) */
#playlist li,
.artist-list a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- TABLET / SMALL DESKTOP --- */
@media (max-width: 1024px) {
  .dashboard-layout {
    max-width: 95%;
    padding: 15px;
  }

  /* Se ainda ficar “apertado” no 2-col, pode empilhar antes do 768 */
  .grid-side-layout {
    grid-template-columns: 1fr;
  }
}

/* --- MOBILE (até 768) - complementa o seu --- */
@media (max-width: 768px) {
  .glass-panel { padding: 16px; }

  /* Títulos um pouco menores (não só h1) */
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.15rem; }
  h3 { font-size: 1.0rem; }

  /* Player/playlist mais “mobile” */
  #playlist li {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  /* Indicador ▶ não pode “puxar” pra fora demais no celular */
  #playlist li.active::before {
    left: 8px;
  }
  /* dá espaço pra não sobrepor o texto */
  #playlist li.active {
    padding-left: 28px;
  }
}

/* --- MOBILE PORTRAIT (até 640) --- */
@media (max-width: 640px) {
  .dashboard-layout { padding: 10px; }

  /* Player/playlist ainda mais compactos */
  #playlist li {
    padding: 9px 10px;
    font-size: 0.85rem;
    letter-spacing: 0.2px;
  }

  .yt-btn {
    font-size: 0.9rem;
    padding: 10px 14px;
  }
}

/* --- SMALL MOBILE (até 480) --- */
@media (max-width: 480px) {
  body { font-size: 14px; }

  .dashboard-layout { padding: 8px; }
  .glass-panel { padding: 12px; }

  /* Fonte do player/lista (o seu problema principal) */
  #playlist li {
    font-size: 0.82rem;
    padding: 8px 10px;
  }

  /* Ajusta o indicador e evita layout “apertado” */
  #playlist li.active::before {
    font-size: 0.8rem;
  }

  /* Títulos mais contidos */
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.05rem; }
}

html, body {
  overflow-x: hidden;
}

/* MARGENS — TOP */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }

/* MARGENS — BOTTOM */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }

/* MARGENS — LEFT */
.ml-0 { margin-left: 0 !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-4 { margin-left: 1rem !important; }

/* MARGENS — RIGHT */
.mr-0 { margin-right: 0 !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-4 { margin-right: 1rem !important; }

/* MARGEM TOTAL */
.m-0 { margin: 0 !important; }
.m-2 { margin: 0.5rem !important; }
.m-4 { margin: 1rem !important; }
.m-6 { margin: 1.5rem !important; }

/* PADDING — TOTAL */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-6 { padding: 1.5rem !important; }

/* PADDING — HORIZONTAL */
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }

/* PADDING — VERTICAL */
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.flex-center { display: flex !important; justify-content: center !important; align-items: center !important; }
.flex-between { display: flex !important; justify-content: space-between !important; }
.flex-end { display: flex !important; justify-content: flex-end !important; }


/* Classe para textos de observação e detalhes técnicos */
.observation-note {
    font-size: 0.85rem;
    margin-top: 10px;
    text-align: justify;
    line-height: 1.6; /* Melhora a legibilidade em fontes menores */
}

/* =========================================================
   HELLTHOVEN FINAL MASTER ALIGNMENT
   (Unificado: Moderno + Legado + Mobile Safety)
========================================================= */

/* 1. Base para parágrafos */
.glass-panel p, .album-box p, .legal-box p {
  text-align: left;
  line-height: 1.7;
  margin-bottom: 1.2rem;
  width: 100%;
}

/* 2. O JUSTIFY COMPLETO (Use este bloco) */
.justify-text {
  text-align: justify !important;
  text-justify: inter-word;      /* Lógica moderna para Inglês */
  
  /* Hifenização (Essencial para não dar 'buracos' no texto) */
  hyphens: auto !important;
  -webkit-hyphens: auto;         /* Suporte para Android antigo/Safari */
  -moz-hyphens: auto;            /* Suporte para Firefox antigo */
  -ms-hyphens: auto;             /* Suporte para IE/Edge antigo */
  
  /* Alinhamento da última linha (Garante que a última frase não estique) */
  text-align-last: left;
  -moz-text-align-last: left;
}

/* 3. O CENTRO ÚNICO (Não precisa repetir no media query) */
.center-text {
  text-align: center !important;
}

@media (max-width: 768px) {
  .justify-text {
    /* word-break é a 'rede de segurança' para o seu celular antigo */
    /* Se a hifenização falhar, ele quebra a palavra para não estourar a margem */
    word-break: break-word; 
  }
  
  /* .center-text FOI REMOVIDA DAQUI - Já está valendo a de cima */
}

/* =========================================================
   GRID AUTO LAYOUTS (Hellthoven Responsive)
========================================================= */

.grid-auto-left {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center; /* <-- CORRIGIDO */
}

.grid-auto-right {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center; /* <-- CORRIGIDO */
}

.grid-auto-60 {
    display: grid;
    grid-template-columns: auto 60%;
    gap: 20px;
    align-items: center; /* <-- CORRIGIDO */
}

.grid-auto-40 {
    display: grid;
    grid-template-columns: auto 40%;
    gap: 20px;
    align-items: center; /* <-- CORRIGIDO */
}

/* Responsividade dos grids auto */
@media (max-width: 768px) {
    .grid-auto-left,
    .grid-auto-right,
    .grid-auto-60,
    .grid-auto-40 {
        grid-template-columns: 1fr;
    }
}


/* CARD DE EVIDÊNCIA - ESTILO FORENSE */
.audit-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 6px solid var(--accent-purple); /* Faixa vermelha de alerta lateral */
    padding: 25px;
    margin: 20px 0;
    box-shadow: 4px 4px 10px var(--midnight-blue);
    position: relative;
    border-radius: 2px;
}

/* Título de remetente dentro do card */
.audit-card strong {
    color: var(--accent-purple);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Courier New', Courier, monospace; /* Tom de máquina de escrever */
}

/* Divisor técnico para separar as mensagens no dossiê */
.audit-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--midnight-blue), rgba(0, 0, 0, 0));
    margin: 40px 0;
}

/* Utilitário para destacar trechos de erro (Stamps) */
.failure-stamp {
    display: inline-block;
    border: 2px solid var(--accent-purple);
    color: var(--accent-purple);
    padding: 2px 8px;
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(-2deg);
    margin: 5px;
    font-size: 0.8rem;
}

/* BOTÃO DE CONTROLE RETRO-INDUSTRIAL */
.audit-control-btn {
    background-color: #e0e4e8; /* Cinza metálico claro */
    border: 2px solid #555;
    border-right-color: #222;
    border-bottom-color: #222;
    color: #1a1a1a;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 10px 18px;
    cursor: pointer;
    margin-top: 12px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 3px 3px 0px var(--midnight-blue);
    transition: all 0.1s;
    outline: none;
}

.audit-control-btn:hover {
    background-color: #d1d8de;
    border-color: var(--accent-purple);
    color: var(--accent-purple);
}

/* EFEITO DE PRESSÃO FÍSICA */
.audit-control-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px;
    border: 2px solid #222;
    border-right-color: #555;
    border-bottom-color: #555;
}

/* ESTILO PARA O TEXTO DE TEMPO DENTRO DO BOTÃO */
.audit-control-btn span {
    color: var(--accent-purple);
}

/* Container que agrupa a troca de mensagens com perspectiva */
.depth-container {
    position: relative;
    padding: 40px 20px;
    background: var(--midnight-blue); /* Fundo levemente mais escuro para dar contraste */
    border-radius: 4px;
    margin-bottom: 50px;
}

/* Camada de Fundo: A sua mensagem ignorada */
.ignored-layer {
    background: var(--bg-dark);
    border: 1px solid var(--glass-border);
    padding: 20px;
    opacity: 0.5; /* Deixa "apagado" */
    filter: blur(0.6px); /* Leve desfoque para parecer longe */
    transform: scale(0.95); /* Diminui um pouco para dar profundidade */
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Camada de Frente: A resposta do robô (Audit Card adaptado) */
.audit-layer {
    background: var(--glass-bg);
    border-left: 8px solid var(--accent-purple);
    border-right: 1px solid var(--glass-border);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    padding: 25px;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10; /* Fica por cima */
    margin-top: -50px; /* Sobe para sobrepor a mensagem de fundo */
    margin-left: 30px; /* Desloca para o lado */
}

/* Efeito Hover: Quando o usuário passa o mouse, a mensagem ignorada "volta à vida" */
.depth-container:hover .ignored-layer {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    z-index: 11; /* Passa para frente no hover se você quiser ler */
}

/* --- ADIÇÕES PARA O SIGNAL --- */

/* Esta classe podes usar para os títulos que queres que brilhem em vermelho */
.signal-title {
  color: #ff2b2b;
  text-shadow: 0 0 10px rgba(255, 43, 43, 0.5);
  text-transform: uppercase;
  font-weight: 900;
}

/* Painel escuro para os vídeos (contrasta com o resto branco) */
.video-area {
  background: #000;
  border: 1px solid #ff2b2b;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(255, 43, 43, 0.1);
}

/* Garante que o vídeo seja responsivo no mobile */
.responsive-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
}


.video-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
    position: sticky;
    top: 0;
    background: rgba(242, 245, 247, 0.9); /* O fundo cinza-hospitalar com transparência */
    z-index: 10;
    border-bottom: 1px solid var(--glass-border);
}

.nav-btn {
    font-family: monospace;
    font-size: 0.7rem;
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
    padding: 5px 10px;
    transition: 0.3s;
}

.nav-btn:hover {
    background: #ff2b2b;
    color: #fff;
    border-color: #ff2b2b;
}

/* ============================================
   THE LAB - COMPARISON PLAYER (Human vs Machine)
============================================ */

.lab-comparison-box {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    padding: 30px;
    margin: 40px 0;
    border-radius: 4px;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.audio-card {
    display: flex;
    flex-direction: column;
}

.audio-label {
    font-family: monospace;
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 10px;
    color: #000;
}

.b-side .audio-label {
    color: #ff2b2b; /* Destaque para a infecção da IA */
}

.custom-player {
    width: 100%;
    height: 40px;
}

.audio-meta {
    font-size: 0.7rem;
    margin-top: 8px;
    color: #666;
    text-transform: uppercase;
}

/* Customização visual dos controles do player */
audio::-webkit-media-controls-panel {
    background-color: #f2f5f7;
}


/* ============================================
   SIGNAL - VIDEO MONITORING GRID
============================================ */

.video-section-title {
    margin-top: 60px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-purple);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.video-card {
    background: #ffffff;
    border: 1px solid var(--glass-border);
    padding: 12px;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.video-card:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 5px 15px rgba(255, 43, 43, 0.1);
}

.video-wrapper {
    width: 100%;
    background: #000;
    line-height: 0;
    border: 1px solid #000;
}

.video-signal {
    width: 100%;
    height: auto;
    display: block;
}

.video-info {
    margin-top: 15px;
}

.video-tag {
    font-family: monospace;
    font-size: 0.65rem;
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    color: #666;
    text-transform: uppercase;
}

.video-title {
    font-weight: 900;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin: 8px 0 5px 0;
    color: var(--text-main);
}

.video-desc {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.4;
}

/* Reset Global - Coloque no topo do arquivo .css */
* {
    box-sizing: border-box;
}

/* Forçar todos os vídeos a nunca passarem do tamanho do container */
video, img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Reafirmando a nossa classe de sinal */
.video-signal {
    width: 100% !important; /* O !important garante que o CSS vença o padrão do navegador */
    aspect-ratio: 16 / 9;   /* Mantém a proporção de cinema trash */
    object-fit: cover;      /* Garante que o vídeo preencha o espaço sem sobrar borda */
    background: #000;
}

.center-block {
    margin-left: auto !important;
    margin-right: auto !important;
}