/* ==================================================
   style.css — Tema: Anime / Cute Geek / Cosplay
   Design moderno baseado em Netflix, Crunchyroll e tendências 2024/2025

   CHANGELOG (Otimizações de Renderização):
   1. **Lazy Loading de Seções**: Adicionadas classes `.video-carousel-section` e `.video-carousel-section.loaded` para permitir o carregamento assíncrono de seções com IntersectionObserver. As seções começam invisíveis e aparecem com um fade-in suave.
   2. **Otimização de Animações**: Adicionada a propriedade `will-change` a elementos que possuem animações de `transform` (`.video-card`, `.category-card`, `.channel-card-list`), informando ao navegador para otimizar a renderização dessas animações.
   3. **Critical CSS**: Os estilos da seção de destaque (hero) foram extraídos e movidos para um bloco `<style>` inline no `base.html`. O restante do CSS é carregado de forma assíncrona para não bloquear a renderização inicial.

   - Hero section imersivo com gradientes cinematográficos
   - Modo escuro padrão otimizado
   - Layout responsivo e acessível
   ================================================== */

/* -------------------------
   VARIÁVEIS GLOBAIS (DARK)
   ------------------------- */

/* Prevenir FOUC (Flash of Unstyled Content) para seções lazy-loaded */
.video-carousel-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.video-carousel-section.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================
   UI/UX 2026: SCROLL ANIMATIONS
   Elementos aparecem com fade-in up conforme scroll
   ================================================ */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate.scroll-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   🎨 COSPLAY MASTER DESIGN SYSTEM
   Tema: Tokyo Neon Nights
   Versão: 2.0 - Unified
   
   TODAS as variáveis CSS devem ser definidas APENAS aqui.
   Outros arquivos (auth.css, settings.css, etc) devem usar estas variáveis.
   ======================================== */

/* Google Fonts Import - Fontes Japonesas + Modernas */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=M+PLUS+1p:wght@400;500;700;900&family=Noto+Sans+JP:wght@400;500;700;900&family=Source+Sans+3:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ========================================
     🌙 CORES BASE - DARK MODE
     ======================================== */
  color-scheme: dark;

  /* Backgrounds - Progressão de escuro para claro */
  --bg-void: #05040b;
  /* Fundo mais profundo */
  --bg-deep: #0b0710;
  /* Fundo secundário */
  --bg-surface: #1c1c24;
  /* Superfícies elevadas */
  --bg-elevated: #252530;
  /* Elementos hover/focus */
  --bg-glass: rgba(255, 255, 255, 0.03);
  /* Glassmorphism */
  --bg-glass-strong: rgba(255, 255, 255, 0.06);

  /* Texto */
  --text-primary: #f7efff;
  /* Texto principal */
  --text-secondary: #e4dcf7;
  /* Texto secundário */
  --text-muted: #8a8ca3;
  /* Texto desabilitado/hints */
  --text-inverse: #05040b;
  /* Texto sobre fundos claros */

  /* ========================================
     🌈 CORES NEON - IDENTIDADE VISUAL
     ======================================== */

  /* 🌸 Rosa Sakura - COR PRINCIPAL */
  --neon-pink: #ff66cc;
  --neon-pink-bright: #ff99dd;
  --neon-pink-dark: #cc4499;
  --neon-pink-glow: rgba(255, 102, 204, 0.4);

  /* 🔮 Roxo Místico - SECUNDÁRIO */
  --neon-purple: #b388ff;
  --neon-purple-bright: #c9a3ff;
  --neon-purple-dark: #9966ff;
  --neon-purple-glow: rgba(179, 136, 255, 0.4);

  /* ⚡ Ciano Elétrico - CONTRASTE/CTAs */
  --neon-cyan: #00d9ff;
  --neon-cyan-bright: #33e5ff;
  --neon-cyan-dark: #00a8cc;
  --neon-cyan-glow: rgba(0, 217, 255, 0.4);

  /* 🎌 Vermelho Japonês - ALERTAS/HOVER */
  --neon-red: #ff4d5a;
  --neon-red-bright: #ff7080;
  --neon-red-dark: #cc3d47;
  --neon-red-glow: rgba(255, 77, 90, 0.4);

  /* 🍊 Laranja Quente - AVISOS */
  --neon-orange: #ffb347;

  /* ... outras variáveis ... */

  --neon-orange-bright: #ffc875;
  --neon-orange-dark: #e6a040;

  /* ✅ Verde Sucesso */
  --neon-green: #22c55e;
  --neon-green-bright: #4ade80;
  --neon-green-dark: #16a34a;

  /* ========================================
     🎨 GRADIENTES
     ======================================== */
  --gradient-primary: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
  --gradient-accent: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-pink) 100%);
  --gradient-danger: linear-gradient(135deg, var(--neon-red) 0%, var(--neon-orange) 100%);
  --gradient-success: linear-gradient(135deg, var(--neon-green) 0%, var(--neon-cyan) 100%);
  --gradient-hero: linear-gradient(180deg, var(--bg-void) 0%, var(--bg-deep) 100%);
  --gradient-glass: linear-gradient(145deg, rgba(28, 28, 36, 0.95), rgba(5, 4, 11, 0.95));

  /* Glass Form Styles (Global) */
  .form-group {
    margin-bottom: 1.5rem;
  }

  .form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--neon-cyan-bright);
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  .form-input,
  .form-textarea,
  .form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-family: inherit;
    transition: all 0.3s ease;
  }

  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px var(--neon-cyan-glow);
    background: rgba(0, 0, 0, 0.5);
    outline: none;
  }

  /* Modificador para textarea */
  .form-textarea {
    resize: vertical;
    min-height: 120px;
  }

  /* ========================================
     📐 BORDAS
     ======================================== */
  --border-default: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.03);
  --border-accent: rgba(255, 102, 204, 0.3);
  --border-focus: var(--neon-pink);

  /* ========================================
     🌟 SOMBRAS
     ======================================== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 45px rgba(5, 4, 11, 0.45);
  --shadow-glow-pink: 0 0 24px var(--neon-pink-glow);
  --shadow-glow-purple: 0 0 24px var(--neon-purple-glow);
  --shadow-glow-cyan: 0 0 24px var(--neon-cyan-glow);
  --shadow-card: 0 12px 30px rgba(194, 23, 40, 0.25);
  --shadow-hero: 0 8px 30px rgba(0, 0, 0, 0.5);

  /* ========================================
     📏 ESPAÇAMENTO
     ======================================== */
  --space-01: 4px;
  --space-02: 8px;
  --space-03: 12px;
  --space-04: 16px;
  --space-05: 24px;
  --space-06: 32px;
  --space-07: 48px;
  --space-08: 64px;
  --space-09: 96px;
  --space-10: 128px;

  /* Grid */
  --grid-max-width: 100%;
  --grid-padding-desktop: 48px;
  --grid-padding-tablet: 32px;
  --grid-padding-mobile: 20px;
  --page-gap: 64px;

  /* ========================================
     🔲 BORDER RADIUS
     ======================================== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Aliases para compatibilidade */
  --radius: 14px;

  /* ========================================
     ⏱️ TRANSIÇÕES
     ======================================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --trans: 0.22s;
  /* Alias para compatibilidade */

  /* ========================================
     🔤 TIPOGRAFIA
     ======================================== */
  --font-display: "Zen Kaku Gothic New",
  "M PLUS 1p",
  "Noto Sans JP",
  sans-serif;
  --font-sans: "Source Sans 3",
  "Inter",
  system-ui,
  -apple-system,
  sans-serif;
  --font-mono: "JetBrains Mono",
  "Fira Code",
  monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* ========================================
     📚 Z-INDEX
     ======================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ========================================
     🔄 ALIASES PARA COMPATIBILIDADE
     Manter enquanto migramos componentes antigos
     ======================================== */

  /* Cores de fundo */
  --color-bg: var(--bg-void);
  --color-surface: var(--bg-surface);
  --color-surface-contrast: var(--text-primary);
  --color-panel: var(--gradient-glass);
  --bg: var(--bg-deep);
  --bg-2: linear-gradient(135deg, #111018 0%, #0b0710 100%);
  --bg-secondary: rgba(17, 16, 24, 0.95);
  --bg-accent: rgba(255, 102, 204, 0.04);
  --card: var(--bg-glass);
  --card-bg: var(--bg-glass);
  --glass: var(--bg-glass);

  /* Cores de texto */
  --text: var(--text-primary);
  --text-1: var(--text-primary);
  /* Fix: Definindo variável que faltava */
  --text-2: var(--text-secondary);
  --muted: var(--text-muted);
  --color-muted: var(--text-muted);
  --color-muted-strong: #b8b8c8;

  /* Cores de destaque */
  --accent: var(--neon-pink);
  --accent-2: var(--neon-purple);
  --accent-hover: var(--neon-pink-bright);
  --highlight: var(--neon-cyan);
  --primary: var(--neon-red-dark);
  --color-primary: var(--neon-red-dark);
  --color-primary-strong: var(--neon-red);
  --color-accent: var(--neon-orange);
  --color-accent-2: var(--neon-red);

  /* Bordas */
  --border: var(--border-default);
  --color-outline: var(--border-default);
  --color-outline-strong: rgba(255, 77, 90, 0.45);
  --color-chip: rgba(255, 77, 90, 0.09);
  --color-chip-border: rgba(255, 77, 90, 0.35);

  /* Sombras */
  --shadow: var(--shadow-lg);
  --shadow-soft: var(--shadow-xl);
  --shadow-focus: 0 0 0 2px var(--neon-pink-glow);
}


/* ========================================
   ☀️ MODO CLARO (LIGHT MODE)
   ======================================== */
/* ========================================
   ☀️ MODO CLARO (LIGHT MODE) - CORRIGIDO
   Tema: Sakura Day (Branco, Cinza Suave, Rosa Vibrante)
   ======================================== */
.light-mode {
  color-scheme: light;

  /* --- Backgrounds --- */
  /* Fundo principal: Quase branco, levemente azulado/frio para limpeza */
  --bg-void: #f8f9fc;
  /* Fundo profundo: Branco puro */
  --bg-deep: #ffffff;
  /* Superfícies (Cards): Branco puro */
  --bg-surface: #ffffff;
  /* Elementos elevados: Off-white */
  --bg-elevated: #f3f4f6;

  /* Glassmorphism Diurno: Branco translúcido com desfoque */
  --bg-glass: rgba(255, 255, 255, 0.75);
  --bg-glass-strong: rgba(255, 255, 255, 0.95);

  /* --- Texto (Inversão Crítica) --- */
  /* Primário: Cinza quase preto (NUNCA branco) */
  --text-primary: #111827;
  /* Secundário: Cinza escuro */
  --text-secondary: #4b5563;
  /* Muted: Cinza médio */
  --text-muted: #6b7280;
  /* Texto inverso (para botões escuros): Branco */
  --text-inverse: #ffffff;

  /* --- Cores de Acento (Ajustadas para fundo claro) --- */
  /* Pink: Mais escuro/saturado para ler sobre branco */
  --neon-pink: #d9008d;
  --neon-pink-bright: #ff3399;
  --neon-pink-glow: rgba(217, 0, 141, 0.15);
  /* Glow sutil */

  /* Purple: Roxo real profundo */
  --neon-purple: #7e22ce;
  --neon-purple-glow: rgba(126, 34, 206, 0.15);

  /* Cyan: Azul médio */
  --neon-cyan: #0284c7;

  /* --- Inputs (CRÍTICO) --- */
  --bg-input: #ffffff;
  --text-input: #111827;
  /* Texto preto no input */
  --border-input: #d1d5db;
  /* Borda cinza visível */

  /* Footer */
  --bg-footer: #f3f4f6;
  --text-footer: #4b5563;

  /* --- Bordas e Sombras --- */
  --border-default: #e5e7eb;
  /* Cinza claro */

  /* Sombras: Trocar glow neon por drop-shadow suave (estilo moderno) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-glow-pink: 0 4px 20px rgba(217, 0, 141, 0.2);

  /* --- Aliases Atualizados --- */
  --bg: var(--bg-deep);
  --bg-secondary: #ffffff;
  --card: var(--bg-surface);
  --card-bg: var(--bg-surface);
  --text: var(--text-primary);
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --muted: var(--text-muted);
  --border: var(--border-default);

  /* Variáveis faltantes para Light Mode (Fix de Contraste) */
  --color-surface-contrast: var(--text-primary);
  --color-muted-strong: #374151;
  --bg-2: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
  --bg-secondary: rgba(243, 244, 246, 0.95);
  --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 252, 0.95));
  --color-panel: var(--gradient-glass);
}

/* =========================================================
   OVERRIDES ESPECÍFICOS PARA LIGHT MODE (CORREÇÃO DE BUGS)
   ========================================================= */

/* 1. Fix Global para Inputs e Formulários */
.light-mode .form-input,
.light-mode .form-textarea,
.light-mode .form-select,
.light-mode input[type="text"],
.light-mode input[type="email"],
.light-mode input[type="password"] {
  color: var(--text-primary) !important;
  background: #ffffff !important;
  border-color: #d1d5db !important;
}

.light-mode .form-input::placeholder,
.light-mode .form-textarea::placeholder {
  color: #9ca3af !important;
}

/* 2. Fix Global para Cards (Backgrounds Hardcoded) */
.light-mode .video-card,
.light-mode .channel-card,
.light-mode .material-card,
.light-mode .project-card,
.light-mode .neo-section,
.light-mode .neo-panel {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 3. Forçar cor de texto em elementos internos de cards */
.light-mode [class*="card"] h1,
.light-mode [class*="card"] h2,
.light-mode [class*="card"] h3,
.light-mode [class*="card"] p,
.light-mode [class*="card"] span:not(.badge):not(.tag),
.light-mode .project-card-description,
.light-mode .channel-card-desc {
  color: var(--text-secondary) !important;
}

.light-mode [class*="card"] h1,
.light-mode [class*="card"] h2,
.light-mode [class*="card"] h3,
.light-mode .channel-card-title {
  color: var(--text-primary) !important;
}

/* 4. Overrides para Página de Vídeo (assistir_video.html) */
.light-mode .summary-content {
  color: var(--text-secondary) !important;
}

.light-mode .ad-card-enhanced {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

.light-mode .ad-image-wrapper {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
}

.light-mode .ad-product-title {
  color: var(--text-primary) !important;
}

.light-mode .ad-price {
  color: #2563eb !important;
  /* Azul legível no fundo claro */
}

.light-mode .sidebar-title {
  color: #1e40af !important;
  /* Azul escuro para contraste */
}

.light-mode .video-description-box,
.light-mode .video-tags-box {
  background: #f9fafb !important;
  color: var(--text-primary) !important;
}

.light-mode .tag {
  background: #e5e7eb !important;
  color: var(--text-secondary) !important;
}

/* 5. Overrides para Category Tabs (badges de categoria na homepage) */
.light-mode .category-tab {
  color: #1f2937 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.light-mode .category-tab-label {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5) !important;
}

.light-mode .category-tab-overlay {
  background: rgba(255, 255, 255, 0.25);
}

/* 6. Overrides para Bottom Nav Mobile */
.light-mode .bottom-nav-item {
  color: #4b5563 !important;
}

.light-mode .bottom-nav-item:hover {
  color: #1f2937 !important;
}

.light-mode .bottom-nav-item.active {
  color: var(--neon-pink) !important;
}

/* 7. Overrides para Metadados de Vídeo */
.light-mode .video-channel,
.light-mode .video-meta,
.light-mode .video-date,
.light-mode .channel-subs,
.light-mode .channel-card-desc {
  color: #4b5563 !important;
}

/* 8. Overrides para Projects Page */
.light-mode .project-card-description,
.light-mode .project-card .meta-item {
  color: #4b5563 !important;
}

/* 9. Overrides para Mobile Menu Drawers */
.light-mode .mobile-menu-drawer,
.light-mode .user-menu-dropdown {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: #e5e7eb !important;
}

.light-mode .mobile-menu-drawer .nav-link,
.light-mode .user-menu-dropdown a,
.light-mode .user-menu-dropdown button {
  color: var(--text-primary) !important;
}

.light-mode .mobile-menu-drawer .nav-link:hover,
.light-mode .user-menu-dropdown a:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--neon-pink) !important;
}

.light-mode .mobile-menu-title,
.light-mode .user-menu-dropdown .menu-section-title {
  color: var(--text-secondary) !important;
}

.light-mode .dropdown-menu {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.light-mode .dropdown-menu a {
  color: var(--text-primary) !important;
}

.light-mode .dropdown-menu a:hover {
  background: #f3f4f6 !important;
  color: var(--neon-pink) !important;
}

/* -------------------------
   Reset + base
   ------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* CRÍTICO: Reset Universal */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-surface-contrast);
  font-family: var(--font-sans);
  overflow-x: hidden;
  /* Global Overflow Prevention */
  width: 100%;
  line-height: 1.45;
  transition: background var(--trans), color var(--trans);
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-padding-desktop);
  box-sizing: border-box;
}

@media (max-width:1279px) {
  .container {
    padding: 0 var(--grid-padding-tablet);
  }
}

@media (max-width:767px) {
  .container {
    padding: 0 var(--grid-padding-mobile);
  }
}

/* -------------------------
   Layout shells unificados
   ------------------------- */
.page-shell {
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: var(--space-07) var(--grid-padding-desktop) var(--space-08);
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
}

@media (max-width:1279px) {
  .page-shell {
    padding: var(--space-06) var(--grid-padding-tablet) var(--space-07);
    gap: var(--space-07);
  }
}

@media (max-width:767px) {
  .page-shell {
    padding: var(--space-05) var(--grid-padding-mobile) var(--space-06);
    gap: var(--space-06);
  }
}

.layout-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-06);
}

.neo-theme {
  /* Fundo Cyberpunk/Space Rico para realçar o vidro */
  background:
    radial-gradient(circle at 20% 30%, rgba(179, 136, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(255, 102, 204, 0.15) 0%, transparent 40%),
    linear-gradient(135deg, #0b0710 0%, #05040b 100%);
  background-attachment: fixed;
  color: var(--color-surface-contrast);
}

.page-frame {
  /* Deprecated in favor of body background, but kept for compatibility */
  background: transparent;
}



.neo-footer,
.site-footer,
footer {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 40px 0 20px 0;
  color: var(--color-muted);
  font-size: 0.95rem;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  background: linear-gradient(to top, #020205 0%, #0a0812 100%);
  /* Nano Deep */
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.footer-link,
.neo-footer a {
  color: var(--text-2);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-link:hover,
.neo-footer a:hover {
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(0, 224, 255, 0.4);
  transform: translateX(4px);
  display: inline-block;
}

.neo-footer strong {
  color: var(--color-surface-contrast);
}

.footer-bottom {
  margin-top: 8px;
}

/* Sticky Footer Layout */
.content-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-wrapper>main,
.content-wrapper>.page-shell {
  flex: 1 0 auto;
}

.neo-section {
  background: var(--color-panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline);
  box-shadow: var(--shadow-soft);
  padding: var(--space-06);
  backdrop-filter: blur(18px);
}

.neo-section--wide {
  padding: var(--space-07);
}

.neo-panel {
  background: var(--bg-glass);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  padding: var(--space-05);
  box-shadow: var(--shadow-card);
}

.home-hub {
  gap: var(--space-06);
}

.home-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.layout-stack .page-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-05);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-bottom: var(--space-01);
}

.page-heading .btn {
  align-self: flex-start;
}

.channels-grid,
.videos-grid-section .videos-grid,
.category-shell .videos-grid {
  width: 100%;
}

.channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-05);
}

.channel-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-04);
}

.channel-card-head {
  display: flex;
  gap: var(--space-04);
  align-items: center;
}

.channel-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-outline);
}

.channel-card-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-surface-contrast);
}

.channel-card-meta {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.channel-card-desc {
  margin: 0;
  color: var(--color-muted-strong);
  font-size: 0.9rem;
}

.channel-card-actions {
  display: flex;
  justify-content: flex-end;
}

.breadcrumb-nav {
  display: flex;
  gap: var(--space-02);
  align-items: center;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.breadcrumb {
  display: flex;
  list-style: none;
  gap: var(--space-02);
  margin: 0;
  padding: 0;
}

.breadcrumb-item {
  color: var(--color-muted);
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "/";
  margin-right: var(--space-02);
}

.breadcrumb-item a {
  color: inherit;
  text-decoration: none;
  transition: color var(--trans);
}

.breadcrumb-item a:hover {
  color: var(--color-primary-strong);
}

.breadcrumb-item.active {
  color: var(--color-surface-contrast);
}

.tag-hero {
  text-align: center;
  padding: var(--space-07) var(--space-05);
  border-radius: var(--radius-lg);
  border: 1px solid var(--bg-tag-soft);
  background: linear-gradient(135deg, var(--bg-tag-surface) 0%, rgba(30, 30, 30, 0.5) 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-03);
}

.tag-type-badge {
  align-self: center;
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--bg-tag-hover);
  color: var(--color-tag-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.tag-title {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0;
  background: var(--color-tag-gradient-end);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tag-description {
  margin: 0 auto;
  max-width: 720px;
  color: var(--color-muted-strong);
  line-height: 1.6;
}

.tag-stats {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.tag-shell .videos-grid-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-04);
}

.channel-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-06);
}

/* -------------------------
   NAV BADGE
   ------------------------- */
.nav-badge {
  background: var(--primary);
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 0.5rem;
  background-color: var(--accent);
}

/* -------------------------
   PROJECT CARDS
   ------------------------- */
.project-card {
  background: var(--card-bg);
  border: 2px solid rgba(255, 102, 204, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(255, 102, 204, 0.2);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.project-card-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.project-card-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.project-card-description {
  color: var(--text-2);
  font-size: 0.95rem;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.project-card-items,
.project-card-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.project-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

/* -------------------------
   EMPTY STATE
   ------------------------- */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--card);
  border-radius: 16px;
  border: 1px dashed var(--border);
}

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  color: var(--muted);
  max-width: 400px;
  margin: 0 auto 2rem;
}

/* -------------------------
   HEADER GLOBAL
   ------------------------- */
.global-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(5, 4, 11, 0.9);
  border-bottom: 1px solid var(--color-outline);
  padding: 4px 0;
  box-shadow: 0 20px 40px rgba(5, 4, 11, 0.65);
  backdrop-filter: blur(18px);
}

.global-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-04);
  justify-content: space-between;
}

.header-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-04);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-03);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-04);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-02);
  color: var(--color-muted);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-02) var(--space-03);
  border-radius: 999px;
  transition: color var(--trans), background var(--trans);
  position: relative;
  line-height: 1.2;
}

.nav-link:hover {
  color: var(--color-surface-contrast);
  background: rgba(255, 255, 255, 0.03);
}

.nav-link.active {
  color: var(--color-surface-contrast);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--color-primary-strong);
}

.nav-auth-section .btn {
  white-space: nowrap;
}

.nav-links .nav-auth-section {
  display: flex;
  align-items: center;
  gap: var(--space-02);
}

@media (max-width: 1024px) {
  .header-shell {
    flex-wrap: wrap;
    gap: var(--space-03);
  }

  .main-nav {
    width: 100%;
    order: 3;
    position: relative;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: rgba(5, 4, 11, 0.97);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-lg);
    padding: var(--space-04);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    min-width: min(320px, calc(100% - 16px));
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-link {
    width: 100%;
    justify-content: flex-start;
  }

  .nav-links .nav-auth-section {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-02);
  }

  .nav-links .btn,
  .nav-links .theme-toggle,
  .nav-links .user-menu-button {
    width: 100%;
    justify-content: center;
  }

  .nav-links .user-menu {
    width: 100%;
  }

  .nav-links .user-menu-button {
    justify-content: space-between;
  }

  .header-shell>*:first-child {
    flex: 1 1 100%;
    order: 1;
  }
}

main {
  padding-top: var(--space-05);
}

/* -------------------------
   HEADER INTERNO
   ------------------------- */
.site-header,
header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 1100;
  backdrop-filter: blur(6px);
}

.site-header .container,
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-title,
h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 6px 18px rgba(183, 120, 255, 0.06);
}

.subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.header-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.header-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* -------------------------
   BOTÕES
   ------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid var(--color-outline);
  transition: all var(--trans);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-surface-contrast);
  box-shadow: 0 12px 26px rgba(5, 4, 11, 0.35);
}

.btn-primary,
.btn-add,
.btn-view,
.btn-page {
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-strong));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 18px 30px rgba(194, 23, 40, 0.35);
}

.btn-blue {
  background: var(--color-accent);
  color: #05040b;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.btn:hover,
.btn-primary:hover,
.btn-add:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 34px rgba(194, 23, 40, 0.35);
  filter: saturate(1.08);
}

.btn-secondary {
  background: var(--glass);
  color: var(--color-surface-contrast);
  border: 1px solid var(--color-outline);
}

.btn-disabled {
  background: #333;
  color: var(--muted);
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* -------------------------
   THEME TOGGLE
   ------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform var(--trans), background var(--trans);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.theme-toggle:hover {
  transform: translateY(-3px);
}

.theme-toggle .label {
  display: inline-block;
}

@media (max-width:640px) {
  .theme-toggle .label {
    display: none;
  }
}

/* ========================================================================================
   HERO SECTION - DESIGN MODERNO BASEADO EM NETFLIX/CRUNCHYROLL
   Tendências 2024/2025: Full-width, gradientes cinematográficos, tipografia bold
   ======================================================================================== */

.highlight-section,
.highlight {
  position: relative;
  margin: 0 auto 32px auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  width: calc(100% - 16px);
  max-width: none;
  border-radius: 24px;
  overflow: hidden;
}

/* Título "Destaque do dia" */
.highlight-title {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  /* Aumentado de 0.7 para 0.95 - melhor contraste WCAG */
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.65);
  /* Aumentado de 0.4 para 0.65 - melhor contraste */
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

/* Container do vídeo em destaque */
.highlight-link {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 21 / 9;
  background: #000;
  overflow: hidden;
  transition: transform var(--trans);
  box-sizing: border-box;
  /* ✅ ADICIONADO: Garante que padding/border não adicione à largura */
}

.highlight-link:hover {
  transform: scale(1.005);
  will-change: transform;
  /* ✅ ADICIONADO: Otimiza performance da animação */
}

/* Thumbnail em destaque */
.highlight-thumb {
  width: 100%;
  max-width: 100%;
  /* ✅ ADICIONADO: Previne que a imagem exceda o container */
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.75) saturate(1.1) contrast(1.05);
  transition: filter var(--trans), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  /* ✅ ADICIONADO: Garante comportamento consistente */
}

.highlight-link:hover .highlight-thumb {
  filter: brightness(0.85) saturate(1.15) contrast(1.08);
  transform: scale(1.05);
  will-change: transform, filter;
  /* ✅ ADICIONADO: Otimiza performance */
}

/* ✅ CORREÇÃO ADICIONAL: Garantir que containers pais não causem overflow */

/* Gradiente cinematográfico - estilo Netflix */
.highlight-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(11, 7, 16, 0.95) 0%,
      rgba(11, 7, 16, 0.7) 25%,
      rgba(11, 7, 16, 0.4) 50%,
      transparent 75%);
  z-index: 1;
  pointer-events: none;
}

/* Gradiente lateral esquerdo adicional */
.highlight-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(11, 7, 16, 0.8) 0%,
      transparent 50%);
  z-index: 1;
  pointer-events: none;
}

/* Play button centralizado */
.highlight-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  transition: transform var(--trans), opacity var(--trans);
  opacity: 0.9;
}

.highlight-link:hover .highlight-play {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 1;
}

.highlight-play svg {
  width: 90px;
  height: 90px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.7));
  transition: filter var(--trans);
}

.highlight-link:hover .highlight-play svg {
  filter: drop-shadow(0 12px 32px rgba(255, 102, 204, 0.4));
}

/* Meta informações - posicionadas no canto inferior esquerdo */
.highlight-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 650px;
}

.highlight-video-title {
  margin: 0;
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.5px;
}

.highlight-video-link {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  transition: color var(--trans);
  cursor: pointer;
}

.highlight-video-link:hover {
  color: var(--accent);
}

/* Container de meta informações */
.highlight-channel,
.highlight-views {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.highlight-channel::before {
  content: '📺';
  font-size: 1.2em;
}

.highlight-views::before {
  /* Sharingan SVG customizado para tema anime/cosplay */
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='sharingan-grad'%3E%3Cstop offset='0%25' style='stop-color:%23ff3333;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23cc0000;stop-opacity:1' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='48' fill='url(%23sharingan-grad)' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='12' fill='%23000'/%3E%3Cpath d='M 50 12 L 50 38' stroke='%23000' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M 50 12 L 50 38' stroke='%23000' stroke-width='8' stroke-linecap='round' transform='rotate(120 50 50)'/%3E%3Cpath d='M 50 12 L 50 38' stroke='%23000' stroke-width='8' stroke-linecap='round' transform='rotate(240 50 50)'/%3E%3Ccircle cx='50' cy='25' r='8' fill='%23000'/%3E%3Ccircle cx='50' cy='25' r='8' fill='%23000' transform='rotate(120 50 50)'/%3E%3Ccircle cx='50' cy='25' r='8' fill='%23000' transform='rotate(240 50 50)'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 4px rgba(255, 51, 51, 0.6));
}

/* Responsividade do Hero */
@media (max-width: 1200px) {
  .highlight-link {
    aspect-ratio: 16 / 9;
  }

  .highlight-video-title {
    font-size: 2.2rem;
  }

  .highlight-meta {
    padding: 40px;
    max-width: 550px;
  }
}

@media (max-width: 968px) {
  .highlight-link {
    aspect-ratio: 16 / 10;
  }

  .highlight-video-title {
    font-size: 1.9rem;
  }

  .highlight-play svg {
    width: 70px;
    height: 70px;
  }

  .highlight-meta {
    padding: 32px;
    max-width: 90%;
  }

  .highlight-channel,
  .highlight-views {
    font-size: 0.95rem;
  }
}

@media (max-width: 640px) {

  .highlight-section,
  .highlight {
    margin-bottom: 24px;
  }

  .highlight-title {
    font-size: 0.8rem;
    top: 16px;
    padding: 6px 16px;
  }

  .highlight-link {
    aspect-ratio: 16 / 11;
  }

  .highlight-video-title {
    font-size: 1.4rem;
  }

  .highlight-play svg {
    width: 56px;
    height: 56px;
  }

  .highlight-meta {
    padding: 24px 20px;
    gap: 8px;
  }

  .highlight-channel,
  .highlight-views {
    font-size: 0.85rem;
  }
}

/* -------------------------
   CATEGORIAS - SCROLL HORIZONTAL
   ------------------------- */

.section-header {
  margin-bottom: 12px;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, #fff 0%, #a0a0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  padding-left: 0;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
  margin-top: 6px;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0, 224, 255, 0.4);
}

.section-description {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
  padding-left: 4px;
}

.category-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.category-nav-btn:hover {
  opacity: 1;
}

.category-nav-btn.prev {
  left: 10px;
}

.category-nav-btn.next {
  right: 10px;
}

.categories-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 0 20px 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Esconde scrollbar nativa */
  -ms-overflow-style: none;
  /* Para IE/Edge */
  padding: 0 60px;
  /* Espaço para as setas nas laterais */
}

.categories-row::-webkit-scrollbar {
  height: 8px;
}

.categories-row::-webkit-scrollbar-track {
  display: none;
  /* Esconde scrollbar no WebKit */
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.categories-row::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 10px;
  transition: background var(--trans);
}

.categories-row::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, var(--accent-hover), var(--accent-2));
}

.category-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 150px;
  /* Largura fixa de 150px */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  cursor: pointer;
  border: 1px solid var(--border);
  text-decoration: none;
}

.category-card:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-color: var(--accent-2);
}

.btn-upload {
  padding: 6px 10px;
  font-size: 0.85rem;
  border-radius: 10px;
}

.cat-delete {
  padding: 6px 10px;
  font-size: 0.85rem;
  border-radius: 10px;
}

/* -------------------------
   VIDEO GRID / CARDS
   ------------------------- */
.videos-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  margin-top: 18px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Wrapper para conter video card + botões admin */
.video-card-wrapper {
  display: flex;
  flex-direction: column;
}

.video-card-wrapper .video-card {
  flex: 1;
}

.video-admin-actions {
  padding: 8px 12px;
  display: flex;
  gap: 8px;
}

.video-admin-actions .btn {
  flex: 1;
}

.video-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.1));
  border: 1px solid rgba(138, 43, 226, 0.15);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease;
  will-change: transform;
  position: relative;
}

/* Borda neon sutil no estado normal */
.video-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(255, 102, 204, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-card:hover::before {
  opacity: 1;
}

.video-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 25px 50px rgba(138, 43, 226, 0.2),
    0 0 30px rgba(138, 43, 226, 0.1);
  border-color: rgba(138, 43, 226, 0.4);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background: #000;
}

.video-thumbnail img,
.video-thumbnail .video-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04);
}

.video-thumbnail .play-icon {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
  padding: 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.video-thumbnail .play-icon svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

/* Botão de Favoritar */
.favorite-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 18px;
  /* Pill shape */
  min-width: 36px;
  width: auto;
  height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.favorite-count {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

.favorite-btn:hover {
  background: rgba(255, 102, 204, 0.9);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 102, 204, 0.4);
}

.favorite-btn .heart-icon {
  stroke: #fff;
  transition: all 0.3s ease;
}

.favorite-btn.favorited .heart-icon {
  fill: #ff66cc;
  stroke: #ff66cc;
  animation: heartBeat 0.3s ease;
}

.video-actions-bar .favorite-btn {
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-surface-contrast);
  min-width: unset;
  height: auto;
}

.video-actions-bar .favorite-btn .heart-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.video-actions-bar .favorite-btn .favorite-count {
  color: var(--color-surface-contrast);
}

@keyframes heartBeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

/* Prevenir clique no link quando clicar no botão */
.favorite-btn {
  pointer-events: auto;
}

.video-card {
  pointer-events: auto;
}


.video-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.video-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-2);
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.channel-avatar,
.channel-avatar-large {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

.video-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.85rem;
}

/* -------------------------
   CHANNEL LIST
   ------------------------- */
.channel-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

.channel-card-list {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  will-change: transform, box-shadow;
}

.channel-card-list:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.avatar {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.channel-meta {
  flex: 1;
}

.channel-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
}

.channel-stats {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.channel-desc {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}

/* -------------------------
   FILTROS E BUSCA
   ------------------------- */

.country-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.country-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--trans), border-color var(--trans);
}

.country-btn:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.country-btn.active {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
}

.country-btn .flag {
  font-size: 1.1rem;
}

/* -------------------------
   HEADER CONTENT & LOGO
   ------------------------- */
.header-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.site-logo:hover {
  transform: scale(1.05);
}

.logo-img {
  height: 60px;
  width: auto;
  object-fit: contain;
  margin: -10px 0;
  /* Permite logo maior sem aumentar o header */
  position: relative;
  z-index: 2;
}

.logo-placeholder {
  font-size: 2.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  /* Esconde quando tiver logo.png */
  opacity: 0.7;
}

/* Esconde placeholder quando a imagem carregar */
.logo-img[style*="display: none"]~.logo-placeholder {
  display: flex;
}

.logo-img:not([style*="display: none"])~.logo-placeholder {
  display: none;
}

/* ===== BARRA DE PESQUISA NANO GLASS ===== */
.search-form {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  flex: 1;
  max-width: 600px;
  margin: 0;
  background: rgba(255, 255, 255, 0.03);
  /* Vidro mais transparente */
  backdrop-filter: blur(16px) saturate(180%);
  /* Efeito glass forte */
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.search-form:focus-within {
  border-color: rgba(0, 224, 255, 0.5);
  /* Ciano Neon */
  box-shadow: 0 0 25px rgba(0, 224, 255, 0.15), 0 4px 20px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.07);
  transform: scale(1.01);
}

.search-input {
  flex: 1;
  min-width: 0;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  outline: none;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

/* Botão de Filtros */
.search-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 48px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.search-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--neon-cyan);
}

.search-filter-btn i,
.search-filter-btn svg {
  width: 20px;
  height: 20px;
}

/* Lupa Clicável (à direita, integrada mas destacada) */
.search-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 44px;
  padding: 0 20px;
  border: none;
  border-left: 1px solid var(--border);
  background: rgba(138, 180, 248, 0.05);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.search-submit-btn:hover {
  background: var(--accent);
  color: white;
  border-left-color: var(--accent);
}

.search-submit-btn i,
.search-submit-btn svg {
  width: 20px;
  height: 20px;
}

/* Mobile: Lupa mais estreita */
@media (max-width: 480px) {
  .search-submit-btn {
    min-width: 48px;
    padding: 0 14px;
  }

  .search-filter-btn {
    width: 42px;
  }
}

/* ========================================================================================
   RESPONSIVIDADE DO HEADER GLOBAL
   ======================================================================================== */

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
  .header-content {
    gap: 1rem;
  }

  .logo-img {
    height: 50px;
    margin: -8px 0;
  }

  .logo-placeholder {
    font-size: 2rem;
    width: 36px;
    height: 36px;
  }

  .search-form {
    max-width: 400px;
  }
}

/* Mobile (max-width: 640px) */
@media (max-width: 640px) {
  .header-content {
    gap: 0.75rem;
  }

  .logo-img {
    height: 45px;
    margin: -6px 0;
  }

  .logo-placeholder {
    font-size: 1.75rem;
    width: 32px;
    height: 32px;
  }

  .search-form {
    max-width: 100%;
  }

  .search-input {
    padding: 10px 12px;
    font-size: 0.95rem;
  }
}

/* Mobile Pequeno (max-width: 480px) */
@media (max-width: 480px) {
  .header-content {
    gap: 0.5rem;
  }

  .logo-img {
    height: 40px;
    margin: -5px 0;
  }

  .logo-placeholder {
    font-size: 1.5rem;
    width: 28px;
    height: 28px;
  }

  .search-input {
    padding: 9px 10px;
    font-size: 0.9rem;
  }

  .search-filter-btn {
    width: 40px;
    height: 40px;
  }

  .search-submit-btn {
    min-width: 44px;
    padding: 0 12px;
    height: 40px;
  }
}

/* ========================================================================================
   FILTROS DE TAGS (Página Principal)
   ======================================================================================== */

.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(138, 180, 248, 0.2);
  border-radius: 20px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s;
}

.tag-badge:hover {
  background: rgba(138, 180, 248, 0.4);
  transform: translateY(-2px);
}

.tag-badge .remove-icon {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1;
  margin-left: 4px;
}

/* ========================================================================================
   FILTROS DE TAGS (Sidebar)
   ======================================================================================== */

.tag-type-section {
  margin-bottom: 1rem;
}

.tag-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: rgba(138, 180, 248, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--trans);
}

.tag-type-header:hover {
  background: rgba(138, 180, 248, 0.15);
}

.tag-type-header span {
  font-weight: 600;
}

.tag-type-header .accordion-icon {
  transition: transform 0.3s ease;
}

.tag-checkboxes {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0.5rem;
  animation: fadeIn 0.3s ease;
}

.tag-checkboxes.open {
  display: flex;
}

.tag-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--text-2);
}

.tag-checkbox-item:hover {
  color: var(--text);
}


/* -------------------------
   CONTENT SECTIONS
   ------------------------- */
.content-section {
  background: var(--card);
  padding: 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

/* ========================================================================================
   WRAPPER DE CONTEÚDO - CONTROLE DE OVERFLOW HORIZONTAL
   ======================================================================================== */
.content-wrapper {
  position: relative;
  width: 100%;
  overflow: visible !important;
  /* FORÇADO: visible para garantir scroll nativo */
  /* ALTERADO: visible para evitar scrollbar vertical indesejada */
  /* ESSENCIAL: corta qualquer overflow horizontal */
  /* NÃO defina height: 100% aqui - pode quebrar layouts */
}

/* RESET MINIMAL PARA SEGURANÇA */
.content-wrapper>* {
  position: relative;
  /* Garante que elementos filhos não escapem do clipping */
  z-index: 1;
  /* Mantém conteúdo acima do wrapper se necessário */
}

/* PROTEÇÃO CONTRA EFEITOS COLATERAIS */
body {
  overflow-x: visible !important;
  /* Mantém o comportamento padrão do body */
  margin: 0;
  padding: 0;
}

html {
  overflow-x: visible !important;
  /* Nunca modifique o overflow do html diretamente */
}

.tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}

/* -------------------------
   FOOTER
   ------------------------- */
.site-footer,
footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent);
  border-top: 1px solid var(--border);
  padding: 18px 0;
  margin-top: 40px;
  color: var(--muted);
  text-align: center;
  font-size: 0.9rem;
}

/* -------------------------
   PAGINAÇÃO
   ------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  padding: 8px 0;
}

/* -------------------------
   CANAL DETAILS / BANNER
   ------------------------- */
/* ========================================================================================
   BANNER DO CANAL - Full Height, Sem Cortes
   ======================================================================================== */

.channel-banner-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* ✅ CORREÇÃO: Deixar altura automática baseada na imagem */
  min-height: 280px;
  max-height: 480px;
  height: auto;
  background: var(--bg-secondary);
  overflow: hidden;
  /* ✅ CORREÇÃO: Remover margin negativa que causava sobreposição */
  margin-bottom: 0;
  z-index: 1;
  isolation: isolate;
}

.channel-banner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: none;
  z-index: 1;
}

/* Gradiente inferior para destacar ícones de redes sociais */
.channel-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(11, 7, 16, 0.85) 0%,
      rgba(11, 7, 16, 0.4) 30%,
      transparent 60%);
  z-index: 2;
  /* DEVE ser maior que a imagem */
  pointer-events: none;
}

/* Container do canal - SEMPRE na frente do banner */
.channel-header {
  position: relative;
  z-index: 3;
  /* DEVE ser maior que o gradiente e redes sociais */
  background: transparent;
  padding: 0;
}

.channel-profile {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 0 24px;
  margin-top: -60px;
  /* ✅ Ajustado para compensar banner maior */
  position: relative;
  z-index: 5;
  /* Acima do banner */
}

.channel-pfp-wrapper {
  flex-shrink: 0;
}

.channel-pfp {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--bg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.channel-meta-wrapper {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.channel-main-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* Responsivo: Banner menor em mobile */
@media (max-width: 768px) {
  .channel-banner-wrapper {
    min-height: 200px;
    max-height: 320px;
  }
}

@media (max-width: 480px) {
  .channel-banner-wrapper {
    min-height: 160px;
    max-height: 240px;
  }
}

/* ========================================================================================
   REDES SOCIAIS - VERSÃO MINIMALISTA
   Design clean inspirado em interfaces modernas (YouTube, Twitch, Discord)
   ======================================================================================== */

.channel-social-networks {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

.social-networks-container {
  display: flex;
  gap: 8px;
}

.social-network-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-network-link:hover {
  transform: translateY(-2px);
}

.social-network-link:active {
  transform: scale(0.95);
}

/* Ícone circular minimalista */
.social-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.social-icon-circle i {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.2s ease;
}

/* Hover: cor da plataforma */
.social-network-link:hover .social-icon-circle {
  background: var(--social-color, var(--neon-pink));
  border-color: var(--social-color, var(--neon-pink));
}

.social-network-link:hover .social-icon-circle i {
  color: #ffffff;
}

/* Focus para acessibilidade */
.social-network-link:focus {
  outline: none;
}

.social-network-link:focus .social-icon-circle {
  box-shadow: 0 0 0 2px var(--social-color, var(--neon-pink));
}

/* ===== MODO CLARO ===== */

.light-mode .social-icon-circle {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.light-mode .social-icon-circle i {
  color: var(--social-color, var(--neon-pink));
}

.light-mode .social-network-link:hover .social-icon-circle {
  background: var(--social-color, var(--neon-pink));
}

.light-mode .social-network-link:hover .social-icon-circle i {
  color: #ffffff;
}

/* ===== RESPONSIVIDADE ===== */

@media (max-width: 768px) {
  .channel-social-networks {
    top: 12px;
    right: 12px;
  }

  .social-networks-container {
    gap: 6px;
  }

  .social-icon-circle {
    width: 32px;
    height: 32px;
  }

  .social-icon-circle i {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .social-icon-circle {
    width: 30px;
    height: 30px;
  }

  .social-icon-circle i {
    width: 14px;
    height: 14px;
  }
}



/* ========================================================================================
   PÁGINA DE TAGS (admin_tags.html)
   ======================================================================================== */

.tabs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
}

.tab-button {
  padding: 0.75rem 1.25rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s ease;
  position: relative;
  bottom: -2px;
}

.tab-button:hover {
  background: var(--card);
  color: var(--text);
}

.tab-button.active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  background: var(--bg-accent);
}

.tab-content {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.tag-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.tag-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--accent-2);
}

.tag-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.tag-card-title {
  font-weight: 700;
  color: var(--text);
  font-size: 1.1rem;
}

.tag-card-slug {
  font-size: 0.8rem;
  color: var(--muted);
  word-break: break-all;
}

.tag-card-desc {
  font-size: 0.9rem;
  color: var(--text-2);
  flex-grow: 1;
}

.tag-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.tag-type-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tag-type-badge[data-tipo="personagem"] {
  background: #FF6B9D;
}

.tag-type-badge[data-tipo="material"] {
  background: #95E1D3;
  color: #333;
}

.tag-type-badge[data-tipo="evento"] {
  background: #F38181;
}

/* Modo claro: Ajustar contraste */
/* NOTA: A variável --text-1 não existe, substituída por --text para funcionar. */

.channel-description-section {
  margin-top: 24px;
}

.channel-description {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Layout da Home com Grid (Vídeos em Inglês + Canais Populares) */

/* Sidebar de Canais Populares */
.sidebar-section {
  /* flex: 0 0 320px;  Largura fixa, não encolhe */
  background: var(--card);
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  align-self: start;
  /* Impede que estique verticalmente */
}

/* Botão "Ver Todos" */
.all-videos-button-wrapper {
  text-align: center;
  margin: 32px 0;
}

.btn-large {
  padding: 12px 24px;
  font-size: 1.1rem;
}

/* -------------------------
   RESPONSIVIDADE ADICIONAL
   ------------------------- */
@media (max-width: 640px) {
  .category-media {
    height: 120px;
  }

  .category-card {
    width: 200px;
    aspect-ratio: 16 / 10;
  }

  .videos-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .channel-pfp {
    width: 100px;
    height: 100px;
    margin-top: -50px;
  }

  .container {
    padding: 0 12px;
  }
}

/* -------------------------
   UTILITÁRIOS
   ------------------------- */
.text-muted {
  color: var(--muted);
}

.flex {
  display: flex;
}

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

.hidden {
  display: none !important;
}

/* -------------------------
   OBSERVAÇÕES (leia)
   - O CSS preserva todas as classes usadas no seu template.
   - Para ativar o modo claro via botão:
       document.documentElement.classList.toggle('light-mode')
     (ou adicionar/remover em <html> / <body> conforme sua preferência)
   - Se quiser eu já incluo no seu script um handler simples para o botão .theme-toggle
     que persiste escolha em localStorage — mando em seguida se quiser.
   ------------------------- */

/* ========================================================================================
   PÁGINA DE VÍDEO (assistir_video.html)
   Layout moderno inspirado no YouTube, com duas colunas e design responsivo.
   ======================================================================================== */


/* Otimização para "Video Page Mode" (Full Width) */
.video-page-mode .page-shell {
  padding-left: 0;
  padding-right: 0;
  padding-top: 16px;
  /* Apenas um pequeno respiro no topo */
  max-width: 100%;
}

.video-page-mode .container {
  max-width: 100%;
  padding: 0;
}

.video-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  /* Coluna principal flexível, sidebar fixa */
  gap: 24px;
  max-width: calc(135vh + 400px);
  /* Limite dinâmico: Video (135vh) + Sidebar (360px) + Gaps. Mantém sidebar colada. */
  width: 100%;
  margin: 0 auto 0 24px;
  /* Alinhado à esquerda com margem segura, ou '0 auto' para centralizar o bloco todo */
  padding: 0 0 24px;
}

.video-main-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Player de vídeo responsivo */
.video-player-wrapper {
  position: relative;
  width: 100%;
  /* max-width removido aqui, controlado pelo layout pai */
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Moderno, substitui padding-top hack */
}

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

/* Seção de detalhes do vídeo */
.video-details-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Reduzido de 16px para 8px para aproximar Título e Canal */
}

.video-main-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.video-meta-container {
  display: flex;
  justify-content: flex-start;
  /* Alinha tudo à esquerda */
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  /* Aproxima Channel Info e Stats com espaçamento fixo */
}

.video-channel-info .channel-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.video-channel-info .channel-avatar-large {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.video-channel-info .channel-name {
  font-weight: 600;
  color: var(--text-2);
}

.video-channel-info .channel-subs {
  font-size: 0.85rem;
  color: var(--muted);
}

.video-stats {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--muted);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-item svg {
  width: 18px;
  height: 18px;
  fill: var(--muted);
}

/* Caixa de descrição */
.video-description-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.6;
}

.video-description-text {
  margin: 0;
  white-space: pre-wrap;
  /* Preserva quebras de linha */
  max-height: none;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.video-description-text.is-collapsed {
  max-height: 180px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
}

.btn-description-toggle {
  margin-top: 12px;
  align-self: flex-start;
}

/* Actions Bar - Wraps buttons on mobile to prevent overflow */
.video-actions-bar {
  display: flex;
  flex-wrap: wrap;
  /* CRITICAL: Allows buttons to stack */
  gap: 16px;
  align-items: center;
}

.video-actions-description {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-04);
}

/* Caixa de tags */
.video-tags-box {
  margin-top: 8px;
}

.tags-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--muted);
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ========================================================================================
   TAGS NA PÁGINA DE VÍDEO
   ======================================================================================== */

.video-tags-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
}

.video-tags-section .sidebar-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
  color: #8ab4f8;
  font-size: 1rem;
}

.video-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Cores por tipo de tag */

.tag-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  filter: brightness(1.2);
}

.tags-help-text {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

/* Sidebar com vídeos recomendados */
.video-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.recommended-videos-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recommended-video-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: background var(--trans);
  border-radius: 8px;
}

.recommended-video-card:hover {
  background: var(--bg-accent);
}

.recommended-thumb-wrapper {
  width: 160px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.recommended-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommended-info {
  padding: 4px 0;
}

.recommended-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}

.recommended-channel {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Responsividade da página de vídeo */
@media (max-width: 1200px) {
  .video-page-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .recommended-video-card {
    grid-template-columns: 120px 1fr;
  }

  .recommended-thumb-wrapper {
    width: 120px;
  }
}

@media (max-width: 968px) {
  .video-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* FIX: minmax(0, 1fr) prevents content from forcing width */
    padding: 12px;
    margin: 0 auto;
    /* Centering */
    width: 100%;
    max-width: 100%;
    /* FIX: Avoid scrollbar overflow */
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Safe Embed Constraint */
  .video-player iframe {
    max-width: 100%;
  }
}

/* ========================================================================================
   MODAL DE BUSCA - Overlay e Estrutura
   ======================================================================================== */

/* Overlay - Cobre toda a tela */
.search-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 7, 16, 0.50);
  backdrop-filter: blur(8px);
  z-index: 9999;

  /* ESTADOS DE VISIBILIDADE */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  /* Scroll interno */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Estado ativo (quando JavaScript adiciona a classe) */
.search-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Modal interno */
.search-modal {
  position: relative;
  max-width: 900px;
  margin: 40px auto;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  border: 1px solid var(--border);

  /* Animação de entrada */
  transform: translateY(-30px);
  transition: transform 0.3s ease;
}

.search-modal-overlay.active .search-modal {
  transform: translateY(0);
}

/* Header do modal */
.search-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.search-modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}

#search-query-display {
  color: var(--accent);
  font-weight: 800;
}

/* Botão fechar */
.search-modal-close {
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.search-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  transform: rotate(90deg);
}

/* Body do modal (área de resultados) */
.search-modal-body {
  padding: 24px;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

/* Grid de resultados */
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

/* Card de resultado individual */
.search-result-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.search-result-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(102, 102, 255, 0.15);
  border-color: var(--accent-2);
}

/* Thumbnail do resultado */
.search-result-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 */
  overflow: hidden;
  background: #000;
}

/* Ícone de play sobre thumbnail (aparece no hover) */
.search-result-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
}

.search-result-card:hover .search-result-play-icon {
  opacity: 1;
}

.search-result-play-icon svg {
  width: 50px;
  height: 50px;
}

/* Views e tempo formatados */
.search-result-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.search-result-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.search-result-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.search-result-card:hover .search-result-thumbnail img {
  transform: scale(1.05);
}

/* Informações do resultado */
.search-result-info {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-result-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-2);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-channel {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.search-result-meta {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

.search-result-description {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 8px 0 0 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Destaque de pesquisa - TEMA ANIME/COSPLAY */
.search-result-card mark,
mark {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Estados de feedback */
.search-loading,
.search-error,
.search-no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 1rem;
}

.search-loading i {
  font-size: 2rem;
  color: var(--accent);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.search-error {
  color: #ff6b6b;
}

/* Footer do modal */
.search-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}

/* Botão "Carregar Mais Vídeos" */
.load-more-btn {
  min-width: 220px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #ffffff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(255, 102, 204, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.load-more-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 102, 204, 0.5);
}

.load-more-btn:active:not(:disabled) {
  transform: translateY(-1px);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--muted);
  box-shadow: none;
}

/* Animação de loading no botão */
.load-more-btn:disabled::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Responsividade */
@media (max-width: 968px) {
  .search-modal {
    margin: 20px;
  }

  .search-results-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
  }

  .search-modal-body {
    padding: 16px;
  }
}

@media (max-width: 640px) {
  .search-modal {
    margin: 10px;
  }

  .search-results-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .search-modal-header {
    padding: 16px;
  }

  .search-modal-header h2 {
    font-size: 1.1rem;
  }
}

/* Prevenir scroll do body quando modal aberto */
body.modal-open {
  overflow: hidden;
}

/* ========================================================================================
   MODAL DE GERENCIAMENTO DE TAGS
   ======================================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 7, 16, 0.9);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
}

.modal-close-btn:hover {
  color: var(--text);
  transform: rotate(90deg);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex-grow: 1;
}

.modal-body p {
  margin-top: 0;
  color: var(--muted);
}

.modal-body strong {
  color: var(--text-2);
}

.modal-tags-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.tag-group h4 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-2);
  text-transform: capitalize;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.tag-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 4px;
}

.tag-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 40px;
  font-size: 1.1rem;
  color: var(--muted);
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ========== MATERIAIS RECOMENDADOS ========== */
.materiais-recomendados-section {
  background: var(--card);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border);
}

.materiais-recomendados-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--text);
}

.section-subtitle {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.materiais-grid {
  display: grid;
  gap: 1rem;
}

.material-card {
  display: flex;
  gap: 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border);
}

.material-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.material-image {
  position: relative;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  background: white;
}

.material-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
}

.material-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.material-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.material-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}

.btn-material {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
}

/* Responsividade */
@media (max-width: 768px) {
  .material-card {
    flex-direction: column;
  }

  .material-image {
    width: 100%;
    height: 200px;
  }
}

/* ========== ARSENAL DE MATERIAIS ========== */
.main-arsenal {
  --materials-nav-offset: clamp(72px, 10vw, 128px);
  max-width: var(--grid-max-width);
  width: 100%;
  margin: 0 auto;
  padding: clamp(var(--space-05), 4vw, var(--space-07));
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  border: 1px solid var(--color-outline);
  box-shadow: var(--shadow-soft);
}

.main-arsenal::before,
.main-arsenal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.main-arsenal::before {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(194, 23, 40, 0.35), transparent 55%),
    radial-gradient(85% 70% at 100% 0%, rgba(255, 179, 71, 0.28), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  opacity: 0.75;
}

.main-arsenal::after {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 35%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.06) 10%, transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.4;
}

.main-arsenal>* {
  position: relative;
  z-index: 1;
}

/* Header do Arsenal */
.arsenal-header {
  text-align: left;
  margin-bottom: var(--space-06);
  padding: clamp(var(--space-05), 3vw, var(--space-07));
  background:
    linear-gradient(135deg, rgba(5, 4, 11, 0.6), rgba(5, 4, 11, 0.4)),
    linear-gradient(135deg, rgba(194, 23, 40, 0.9) 0%, rgba(255, 179, 71, 0.8) 100%);
  border-radius: var(--radius-md);
  color: var(--color-surface-contrast);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 60px rgba(5, 4, 11, 0.45);
  position: relative;
  overflow: hidden;
}

.arsenal-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.25), transparent 45%),
    radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.2), transparent 45%);
  opacity: 0.35;
  pointer-events: none;
}

.arsenal-hero {
  display: grid;
  gap: var(--space-04);
}

.arsenal-hero h1 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-03);
  font-size: clamp(2rem, 3vw, 2.8rem);
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.arsenal-hero h1 i {
  width: 36px;
  height: 36px;
}

.arsenal-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.arsenal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-04);
  margin-top: var(--space-04);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-02);
  padding: var(--space-04);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  min-height: 120px;
  text-align: center;
}

.stat-number {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-surface-contrast);
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Navegação Rápida */
.arsenal-nav {
  position: sticky;
  top: var(--materials-nav-offset);
  background: var(--glass);
  border-radius: var(--radius-md);
  padding: var(--space-05);
  margin-bottom: var(--space-05);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  z-index: 2;
}

.arsenal-nav h3 {
  margin-bottom: var(--space-03);
  color: var(--text);
  font-size: 1.1rem;
}

/* ==============================
   LAYOUT FLEX: SIDEBAR + MAIN
   Sidebar não reduz o container principal.
   ============================== */
.arsenal-page-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
  width: 100%;
}

/* Sidebar fica fixa à esquerda, sem comprimir a section */
.arsenal-page-layout>.arsenal-sidebar {
  flex-shrink: 0;
  width: 280px;
  margin-right: var(--space-04);
}

/* A section principal mantém seu tamanho original */
.arsenal-main-section {
  flex: 1;
  min-width: 0;
  /* Mantém o max-width original da .main-arsenal (var(--grid-max-width)) */
}

/* ── Botão Mobile para abrir filtros ── */
.arsenal-mobile-filter-btn {
  display: none;
  /* Oculto em desktop */
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  margin-bottom: var(--space-04);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.arsenal-mobile-filter-btn:hover {
  border-color: var(--accent);
  background: rgba(255, 102, 204, 0.08);
}

.arsenal-mobile-filter-btn .filter-badge {
  min-width: 20px;
  height: 20px;
  background: var(--accent);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ── Overlay Mobile ── */
.arsenal-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1099;
  backdrop-filter: blur(4px);
}

.arsenal-sidebar-overlay.active {
  display: block;
}

/* ==============================
   SIDEBAR DE FILTROS
   ============================== */
.arsenal-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-04);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.arsenal-sidebar::-webkit-scrollbar {
  width: 4px;
}

.arsenal-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.arsenal-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

/* ── Sidebar Header ── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-04);
  padding-bottom: var(--space-03);
  border-bottom: 1px solid var(--border);
}

.sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sidebar-title i,
.sidebar-title svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.sidebar-close-btn {
  display: none;
  /* Oculto em desktop, visível em mobile */
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-close-btn:hover {
  background: rgba(255, 102, 204, 0.15);
  color: var(--accent);
}

/* ── Sidebar Sections ── */
.sidebar-section {
  margin-bottom: var(--space-04);
  padding-bottom: var(--space-03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.sidebar-section-title {
  margin: 0 0 var(--space-03);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--text);
  font-size: 0.9rem;
}

.sidebar-option:hover {
  background: rgba(255, 102, 204, 0.07);
}

.sidebar-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Custom Checkbox/Radio ── */
.sidebar-checkbox,
.sidebar-radio {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Price Range ── */
.sidebar-price-range {
  padding: 0 2px;
}

.price-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.price-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 102, 204, 0.1);
}

.price-input::placeholder {
  color: var(--text-3, rgba(255, 255, 255, 0.35));
}

.price-separator {
  color: var(--text-2);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── Sidebar Stars ── */
.sidebar-stars .stars {
  color: #f1c40f;
  letter-spacing: 1px;
}

.sidebar-stars .star-empty {
  opacity: 0.3;
}

/* ── Sidebar Actions ── */
.sidebar-actions {
  padding-top: var(--space-03);
  border-top: 1px solid var(--border);
}

.sidebar-clear-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
}

/* ==============================
   CONTEÚDO PRINCIPAL (ao lado da sidebar)
   ============================== */
.arsenal-main {
  flex: 1;
  min-width: 0;
}

/* ── Barra de Busca (Simplificada) ── */
.arsenal-search-wrapper {
  margin: 0 0 var(--space-05);
}

.arsenal-search-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  transition: all var(--trans);
  padding-left: 16px;
}

.arsenal-search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 102, 204, 0.15);
}

.search-bar-icon {
  width: 20px;
  height: 20px;
  color: var(--text-2);
  flex-shrink: 0;
}

.arsenal-search-bar .search-input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  outline: none;
}

/* Mensagem de Nenhum Resultado */
.arsenal-no-results {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-08) var(--space-04);
  margin: var(--space-06) auto;
  max-width: 500px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.arsenal-no-results i,
.arsenal-no-results svg {
  width: 64px;
  height: 64px;
  color: var(--muted);
  margin-bottom: var(--space-04);
  opacity: 0.6;
}

.arsenal-no-results h3 {
  font-size: 1.25rem;
  color: var(--text);
  margin: 0 0 var(--space-02);
}

.arsenal-no-results p {
  color: var(--muted);
  margin: 0 0 var(--space-04);
}

.arsenal-no-results .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.category-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-02);
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-01);
  padding: 0.5rem 1rem;
  background: var(--glass);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  transition: all 0.25s ease;
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
}

.category-link:hover,
.category-link:focus-visible {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 77, 166, 0.35);
}

/* Container de Materiais */
.materiais-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-06);
}

/* Categoria de Material */
.material-category {
  scroll-margin-top: calc(var(--materials-nav-offset) + var(--space-04));
  transition: background 0.3s, border-color 0.3s;
  padding: var(--space-04);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.material-category.highlight {
  background: var(--glass);
  border-color: var(--accent);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-03);
  margin-bottom: var(--space-04);
  padding-bottom: var(--space-03);
  border-bottom: 1px solid var(--border);
}

.category-header h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--text);
  margin: 0;
}

.product-count {
  background: var(--glass);
  color: var(--text);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--border);
}

/* Grid de Produtos */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-04);
}

/* Card de Produto */
.product-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--color-outline);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(5, 4, 11, 0.35);
}

.product-image {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  background: var(--glass);
  border-bottom: 1px solid var(--color-outline);
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.store-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(5, 4, 11, 0.75);
  color: white;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.product-content {
  padding: var(--space-05);
  display: flex;
  flex-direction: column;
  gap: var(--space-03);
  flex: 1;
}

.product-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin: 0;
  font-family: var(--font-display);
}

.product-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}

.btn-product {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Galeria Adicional */
.product-gallery {
  display: flex;
  gap: 0.5rem;
  padding: 0 var(--space-04) var(--space-04);
}

.product-gallery img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
  border: 2px solid var(--border);
}

.product-gallery img:hover {
  transform: scale(1.1);
  border-color: var(--accent);
}

/* ===== DUAL-PATH LAYOUT (Bridge Pages) ===== */
.dual-path-card {
  overflow: visible;
  /* Sobrescreve o flex-direction: column do .product-card base */
  display: block;
}

.card-dual-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.card-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Barra lateral "Saber Mais" */
.card-side-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.08), rgba(0, 217, 255, 0.15));
  border-left: 1px solid rgba(0, 217, 255, 0.2);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card-side-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--accent), #00a8cc);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-side-action:hover::before {
  opacity: 1;
}

.card-side-action:hover {
  width: 56px;
}

.side-action-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  padding: 16px 8px;
}

.side-action-content i {
  width: 18px;
  height: 18px;
  color: var(--accent);
  transition: color 0.3s;
}

.card-side-action:hover .side-action-content i {
  color: #000;
}

.side-action-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.3s;
  white-space: nowrap;
}

.card-side-action:hover .side-action-text {
  color: #000;
}

/* CTA Principal destacado */
.btn-cta-primary {
  background: linear-gradient(135deg, var(--accent), #00a8cc);
  color: #000 !important;
  font-weight: 700;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
}

.btn-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 217, 255, 0.4);
}

.btn-cta-primary i {
  width: 18px;
  height: 18px;
}

/* Botões secundários compactos */
.card-secondary-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-icon-only {
  flex: 1;
  min-width: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-only i {
  width: 16px;
  height: 16px;
}

/* Responsivo: Sidebar vira drawer em mobile */
@media (max-width: 768px) {
  .arsenal-mobile-filter-btn {
    display: flex;
  }

  .arsenal-page-layout {
    flex-direction: column;
  }

  .arsenal-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    max-height: none;
    z-index: 1100;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-05);
    overflow-y: auto;
    animation: sidebarSlideIn 0.3s ease;
    background: var(--card, #1a1a2e);
    backdrop-filter: blur(24px);
  }

  .arsenal-sidebar.open {
    display: block;
  }

  .sidebar-close-btn {
    display: flex;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@keyframes sidebarSlideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsivo: Mobile - Barra inferior */
@media (max-width: 480px) {
  .card-dual-container {
    flex-direction: column;
  }

  .card-side-action {
    width: 100%;
    height: 44px;
    border-left: none;
    border-top: 1px solid rgba(0, 217, 255, 0.2);
  }

  .card-side-action:hover {
    width: 100%;
    height: 48px;
  }

  .side-action-content {
    flex-direction: row;
    padding: 8px 16px;
  }

  .side-action-text {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .arsenal-sidebar {
    width: 280px;
  }
}

/* Botão Voltar ao Topo */
.btn-back-to-top {
  position: fixed;
  bottom: clamp(1.5rem, 4vw, 3rem);
  right: clamp(1.5rem, 4vw, 3rem);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  border: 1px solid var(--color-outline-strong);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 35px rgba(5, 4, 11, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 60;
  pointer-events: none;
}

.btn-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.btn-back-to-top:hover {
  box-shadow: 0 20px 40px rgba(194, 23, 40, 0.35);
}

@media (prefers-reduced-motion: reduce) {

  .btn-back-to-top,
  .product-card,
  .category-link {
    transition: none;
  }
}

/* Estado Vazio */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--card);
  border-radius: 16px;
  margin: 3rem auto;
  max-width: 600px;
}

.empty-icon {
  width: 80px;
  height: 80px;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.empty-state h2 {
  color: var(--text);
  margin-bottom: 1rem;
}

.empty-state p {
  color: var(--muted);
  margin-bottom: 2rem;
}

/* Responsividade */
@media (max-width: 1024px) {
  .main-arsenal {
    --materials-nav-offset: 0px;
    padding: var(--space-05);
  }

  .arsenal-nav {
    position: relative;
    top: auto;
  }
}

@media (max-width: 768px) {
  .arsenal-hero {
    text-align: center;
  }

  .arsenal-hero h1 {
    flex-direction: column;
  }

  .arsenal-subtitle {
    font-size: 1rem;
  }

  .arsenal-stats {
    gap: var(--space-03);
  }

  .stat-number {
    font-size: 2rem;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .category-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-back-to-top {
    width: 48px;
    height: 48px;
  }
}

/* ========================================================================================
   MODAL DE FILTROS DE TAGS - Estilo Moderno Fullscreen
   ======================================================================================== */

/* Botão nav-button (estilo de link mas é button) */

/* Modal - Overlay e Container */
.filters-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.filters-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease-out;
}

/* Modal Content - Slide from right */
.filters-modal-content {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 100vh;
  background: var(--bg);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* Header do Modal */
.filters-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.filters-modal-back {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  transition: color 0.2s;
}

.filters-modal-back:hover {
  color: var(--accent);
}

.filters-modal-back i {
  width: 20px;
  height: 20px;
}

.filters-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--muted);
  transition: color 0.2s;
  border-radius: 6px;
}

.filters-modal-close:hover {
  color: var(--text);
  background: var(--glass);
}

/* Body do Modal - Scroll Area */
.filters-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* Footer do Modal */
.filters-modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 1rem;
  background: var(--card);
}

.filters-modal-footer .btn {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
}

/* Mobile - Fullscreen */
@media (max-width: 768px) {
  .filters-modal-content {
    max-width: 100%;
  }
}

/* ========================================================================================
   TAG CHIPS (Active Filters Inline)
   ======================================================================================== */

.active-filters-inline {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.filters-label {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.95rem;
}

.active-tags-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.tag-chip:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.tag-chip .remove-icon {
  font-size: 1.2rem;
  font-weight: bold;
  opacity: 0.7;
}

.tag-chip:hover .remove-icon {
  opacity: 1;
}

/* Tags Filter Content inside Modal */
.tag-filters-content {
  width: 100%;
}

.tag-type-section {
  margin-bottom: 1.5rem;
}

.tag-type-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.tag-type-header:hover {
  background: var(--card);
}

.tag-type-header .accordion-icon {
  transition: transform 0.3s;
  width: 18px;
  height: 18px;
}

.tag-checkboxes {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.tag-checkboxes.open {
  max-height: 500px;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.tag-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}

.tag-checkbox-item:hover {
  background: var(--glass);
}

.tag-checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* ========================================================================================
   CATEGORY TABS (YouTube-style Horizontal Navigation)
   ======================================================================================== */

.category-tabs-section {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Versão floating (fora do container) */
.category-tabs-floating {
  margin: 0 auto 16px auto !important;
  /* Força centralização */
  width: 100%;
  max-width: 1400px;
  align-self: center;
  /* Vital para centralizar em Flex container */
  justify-content: center;
}

/* Wrapper com scroll horizontal e arredondamento */
.category-tabs-floating .category-tabs-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 0;
  width: 100%;

  /* Arredondamento nas pontas da barra de rolagem */
  border-radius: 12px;

  /* Máscara removida para evitar fundo preto */
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
}

.category-tabs-floating .category-tabs-wrapper::-webkit-scrollbar {
  display: none;
}

/* Botão de scroll à direita */
.category-scroll-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-scroll-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: scale(1.05);
}

.category-scroll-btn svg {
  width: 18px;
  height: 18px;
}

/* Gradiente de conexão removido - causava fundo preto visível */

.category-tabs-wrapper {
  position: relative;
  z-index: 1;
  /* Fica acima do gradiente */
}

.category-tabs-wrapper {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0;
  width: 100% !important;
  max-width: calc(100vw - 40px) !important;
  box-sizing: border-box !important;
}

.category-tabs-wrapper::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.category-tab {
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.category-tab:hover {
  background: var(--card);
  border-color: var(--accent);
  color: var(--accent);
}

.category-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Compact Visual Pills */

/* Make pills more compact */
.category-card {
  min-width: 140px;
  /* Reduced from default */
  max-width: 140px;
}

/* Mobile optimization */
@media (max-width: 768px) {
  .category-tabs-wrapper {
    gap: 0.5rem;
  }

  .category-tab {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
  }

  .category-card {
    min-width: 120px;
    max-width: 120px;
  }
}

/* ========================================================================================
   ENHANCED VISUAL CATEGORY TABS with Themed Backgrounds
   ======================================================================================== */

.category-tabs-section {
  margin: 2rem 0 2.5rem;
  padding: 0;
}

.category-tabs-wrapper {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0 0.25rem;
}

.category-tabs-wrapper::-webkit-scrollbar {
  display: none;
}

/* Base Tab Style */
.category-tab {
  position: relative;
  flex-shrink: 0;
  min-width: 140px;
  height: 80px;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Overlay for hover effect */
.category-tab-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s;
}

.category-tab:hover .category-tab-overlay {
  opacity: 1;
}

.category-tab-label {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Active State */
.category-tab.active {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.category-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 3px;
  background: #fff;
  border-radius: 3px 3px 0 0;
}

/* ========================================================================================
   THEMED BACKGROUNDS FOR EACH CATEGORY
   ======================================================================================== */

/* Todos - Rainbow Gradient */
.category-tab-all {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Anime & Manga - Japanese Sunset */
.category-tab-anime-manga {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 50%, #c44569 100%);
}

/* Video Games - Neon Gaming */
.category-tab-video-games {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #667eea 100%);
}

/* Super-heróis & Comics - Comic Book */
.category-tab-super-herois-comics {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* Filmes & Cinema - Hollywood Gold */
.category-tab-filmes-cinema {
  background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 50%, #e17055 100%);
}

/* Séries de TV - TV Glow */
.category-tab-series-tv {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

/* Sci-Fi - Space Nebula */
.category-tab-sci-fi {
  background: linear-gradient(135deg, #2e3192 0%, #1bffff 100%);
}

/* Fantasia - Magical Forest */
.category-tab-fantasia {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

/* Horror - Dark Blood */
.category-tab-horror {
  background: linear-gradient(135deg, #360033 0%, #0b8793 100%);
}

/* Steampunk & Cyberpunk - Industrial */
.category-tab-steampunk-cyberpunk {
  background: linear-gradient(135deg, #e43a15 0%, #e65245 50%, #fbb034 100%);
}

/* Histórico - Ancient Gold */
.category-tab-historico {
  background: linear-gradient(135deg, #c79081 0%, #dfa579 100%);
}

/* Original - Creative Purple */
.category-tab-original {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* Outros - Cosplay Rainbow */
.category-tab-outros {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .category-tab {
    min-width: 120px;
    height: 70px;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }
}

/* ========================================================================================
   CATEGORY TABS - ENHANCED v2 (Compact with Icons & Patterns)
   ======================================================================================== */

/* Overriding previous styles with more specific selectors */
.category-tabs-section {
  margin: 0.25rem 0 0.25rem !important;
}

.category-tabs-wrapper {
  gap: 0.75rem !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Smaller base tab */
.category-tab {
  min-width: 110px !important;
  height: 60px !important;
  padding: 0.75rem 1rem !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
}

/* Pattern overlays for texture */
.category-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-size: 20px 20px;
  z-index: 0;
}

.category-tab-label {
  font-size: 0.85rem !important;
  letter-spacing: 0.3px;
}

/* Enhanced themed backgrounds with emojis & patterns */

/* Todos */
.category-tab-all {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.category-tab-all::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
}

.category-tab-all .category-tab-label::before {
  content: '🌟 ';
}

/* Anime & Manga - Japanese culture */
.category-tab-anime-manga {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 50%, #c44569 100%) !important;
}

.category-tab-anime-manga::before {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.1) 10px, rgba(255, 255, 255, 0.1) 20px);
}

.category-tab-anime-manga .category-tab-label::before {
  content: '🎌 ';
}

/* ASMR - Soft gradient */
.category-tab-asmr {
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%) !important;
}

.category-tab-asmr::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 8px 8px;
}

.category-tab-asmr .category-tab-label::before {
  content: '🎧 ';
}

/* Video Games - Pixel art */
.category-tab-video-games {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #667eea 100%) !important;
}

.category-tab-video-games::before {
  background-image:
    linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 10px 10px;
}

.category-tab-video-games .category-tab-label::before {
  content: '🎮 ';
}

/* Comics - Halftone */
.category-tab-super-herois-comics {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.category-tab-super-herois-comics::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 2px, transparent 2px);
  background-size: 15px 15px;
}

.category-tab-super-herois-comics .category-tab-label::before {
  content: '🦸 ';
}

/* Filmes - 4K Film strip */
.category-tab-filmes-cinema {
  background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 50%, #e17055 100%) !important;
}

.category-tab-filmes-cinema::before {
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 8px, transparent 8px, transparent 16px);
}

.category-tab-filmes-cinema .category-tab-label::before {
  content: '🎬 ';
}

/* Séries TV */
.category-tab-series-tv {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
}

.category-tab-series-tv::before {
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, transparent 50%);
  background-size: 100% 4px;
}

.category-tab-series-tv .category-tab-label::before {
  content: '📺 ';
}

/* Sci-Fi - Stars */
.category-tab-sci-fi {
  background: linear-gradient(135deg, #2e3192 0%, #1bffff 100%) !important;
}

.category-tab-sci-fi::before {
  background-image: radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent);
  background-size: 200% 200%;
}

.category-tab-sci-fi .category-tab-label::before {
  content: '🚀 ';
}

/* Fantasia - Magic */
.category-tab-fantasia {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
}

.category-tab-fantasia::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 25px 25px;
}

.category-tab-fantasia .category-tab-label::before {
  content: '🧙 ';
}

/* Horror */
.category-tab-horror {
  background: linear-gradient(135deg, #360033 0%, #0b8793 100%) !important;
}

.category-tab-horror::before {
  background-image: linear-gradient(180deg, transparent 60%, rgba(139, 0, 0, 0.3) 100%);
}

.category-tab-horror .category-tab-label::before {
  content: '👻 ';
}

/* Steampunk - Gears */
.category-tab-steampunk-cyberpunk {
  background: linear-gradient(135deg, #e43a15 0%, #e65245 50%, #fbb034 100%) !important;
}

.category-tab-steampunk-cyberpunk::before {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.1) 5px, rgba(255, 255, 255, 0.1) 10px);
}

.category-tab-steampunk-cyberpunk .category-tab-label::before {
  content: '⚙️ ';
}

/* Histórico */
.category-tab-historico {
  background: linear-gradient(135deg, #c79081 0%, #dfa579 100%) !important;
}

.category-tab-historico::before {
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
}

.category-tab-historico .category-tab-label::before {
  content: '🏛️ ';
}

/* Original */
.category-tab-original {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}

.category-tab-original::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 2px, transparent 2px);
  background-size: 20px 20px;
}

.category-tab-original .category-tab-label::before {
  content: '🎭 ';
}

/* Outros/Cosplay */
.category-tab-outros {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%) !important;
}

.category-tab-outros::before {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255, 107, 107, 0.3) 2px, transparent 2px),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.3) 2px, transparent 2px);
  background-size: 30px 30px;
}

.category-tab-outros .category-tab-label::before {
  content: '✨ ';
}

/* Mobile */
@media (max-width: 768px) {
  .category-tab {
    min-width: 95px !important;
    height: 52px !important;
  }

  .category-tab-label {
    font-size: 0.75rem !important;
  }
}

/* ========================================
   SHORTS PAGE STYLES - Vertical 9:16 Layout
   ======================================== */

/* Desktop Styles */

.shorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.short-card {
  position: relative;
  aspect-ratio: 9/16;
  /* CRITICAL: Vertical proportion */
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: block;
  text-decoration: none;
}

.short-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.short-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge "SHORT" */

/* Duration overlay */

/* Title/info overlay (appears on hover) */
.short-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  color: white;
  padding: 40px 12px 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.short-card:hover .short-info {
  opacity: 1;
}

.short-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* No results container */

.no-results {
  font-size: 18px;
  color: #666;
  margin-bottom: 10px;
}

/* Tablet Styles (max-width: 1024px) */
@media (max-width: 1024px) {
  .shorts-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }

  .short-title {
    font-size: 13px;
  }
}

/* Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
  .shorts-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .short-card {
    border-radius: 8px;
  }

  .short-title {
    font-size: 12px;
  }

  .short-info {
    padding: 30px 8px 8px;
  }
}

/* Extra small mobile (max-width: 480px) */
@media (max-width: 480px) {
  .shorts-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
  }
}

/* ========================================
   SHORTS PAGE STYLES - Vertical 9:16 Layout
   ======================================== */

/* Desktop Styles */

.shorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.short-card {
  position: relative;
  aspect-ratio: 9 / 16;
  /* CRITICAL: Vertical proportion */
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  display: block;
  background: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.short-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.short-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge "SHORT" */

/* Duration overlay */

/* Title info (shown on hover) */
.short-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  padding: 40px 12px 12px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1;
}

.short-card:hover .short-info {
  transform: translateY(0);
}

.short-title {
  color: white;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* No results styling */

.no-results {
  font-size: 18px;
  color: #666;
  margin-bottom: 8px;
}

/* ========================================
   RESPONSIVE: Tablet (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {
  .shorts-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }

  .short-title {
    font-size: 13px;
  }
}

/* ========================================
   RESPONSIVE: Mobile (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {

  .shorts-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .short-card {
    border-radius: 8px;
  }

  .short-title {
    font-size: 12px;
  }

  .short-info {
    padding: 30px 10px 10px;
  }
}

/* ========================================
   RESPONSIVE: Small Mobile (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
  .shorts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ========================================
   NAVIGATION - Shorts Link Styling
   ======================================== */

.nav-link-shorts {
  color: var(--color-primary-strong) !important;
  font-weight: 700;
}

.nav-link-shorts.active::after {
  background: var(--color-primary-strong);
}

/* ========================================
   HOME - Shorts Promotional Banner
   ======================================== */

/* Mobile responsive navigation */

/* ==========================================
   BETA BADGE - Shorts Navigation
   ========================================== */
.beta-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff6b35, #ff8e53);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
  animation: pulse-beta 2s ease-in-out infinite;
}

@keyframes pulse-beta {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.85;
    transform: scale(1.05);
  }
}

/* Mobile - hide BETA text, show only badge */
@media (max-width: 768px) {
  .beta-badge {
    font-size: 0px;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    margin-left: 4px;
    position: relative;
    top: -6px;
  }
}

/* ==========================================
   FAVORITES BADGE - User Avatar Counter
   ========================================== */

@keyframes pulse-favorites {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}

/* Ensure user-avatar has position relative for absolute positioning */
.user-avatar {
  position: relative;
}

/* ========================================
   ✨ PHASE 4: ANIMATIONS & EFFECTS
   ======================================== */

/* 1. Keyframes */
@keyframes neon-pulse {

  0%,
  100% {
    box-shadow: 0 0 10px var(--neon-pink-glow), 0 0 20px var(--neon-pink-glow);
  }

  50% {
    box-shadow: 0 0 20px var(--neon-pink-glow), 0 0 40px var(--neon-pink-glow);
  }
}

@keyframes neon-pulse-cyan {

  0%,
  100% {
    box-shadow: 0 0 10px var(--neon-cyan-glow), 0 0 20px var(--neon-cyan-glow);
  }

  50% {
    box-shadow: 0 0 20px var(--neon-cyan-glow), 0 0 40px var(--neon-cyan-glow);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* 2. Glassmorphism Utilities */
.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}

/* 3. Hover Effects */

/* 4. Neon Text Utilities */

/* 5. Button Variants */
.btn-neon {
  position: relative;
  overflow: hidden;
  background: transparent;
  color: var(--neon-pink);
  border: 1px solid var(--neon-pink);
  transition: all var(--transition-base);
  z-index: 1;
}

.btn-neon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--neon-pink);
  transition: width var(--transition-base);
  z-index: -1;
}

.btn-neon:hover {
  color: #fff;
  box-shadow: 0 0 20px var(--neon-pink-glow);
}

.btn-neon:hover::before {
  width: 100%;
}

.btn-neon-cyan {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
}

.btn-neon-cyan::before {
  background: var(--neon-cyan);
}

.btn-neon-cyan:hover {
  box-shadow: 0 0 20px var(--neon-cyan-glow);
}

/* ========================================
   🚀 HEADER OPTIMIZATION (PHASE 6)
   ======================================== */

/* --- Visibility Utilities --- */
.desktop-only {
  display: flex !important;
}

.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: flex !important;
  }
}

/* --- Desktop Dropdown --- */
.nav-item-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: color var(--trans);
}

.dropdown-trigger:hover,
.dropdown-trigger.active {
  color: var(--text-primary);
}

.dropdown-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--trans);
}

.nav-item-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--trans);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: var(--z-dropdown);
}

.nav-item-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--trans);
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.dropdown-item.active {
  background: rgba(255, 102, 204, 0.1);
  color: var(--neon-pink);
}

.dropdown-item svg {
  width: 18px;
  height: 18px;
}

/* --- Mobile Bottom Navigation --- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  /* Altura fixa */
  background: rgba(11, 7, 16, 0.85);
  /* Fundo escuro translúcido */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: var(--z-fixed);
  padding-bottom: env(safe-area-inset-bottom);
  /* Suporte a iPhone X+ */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.light-mode .bottom-nav {
  background: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  width: 60px;
  height: 100%;
  transition: color var(--trans);
  cursor: pointer;
}

.bottom-nav-item svg {
  width: 24px;
  height: 24px;
  transition: transform var(--trans), stroke var(--trans);
}

.bottom-nav-item:hover {
  color: var(--text-primary);
}

.bottom-nav-item.active {
  color: var(--neon-pink);
}

.bottom-nav-item.active svg {
  filter: drop-shadow(0 0 8px var(--neon-pink-glow));
  transform: translateY(-2px);
}

/* Truncar texto longo nos labels (i18n pode retornar strings longas) */
.bottom-nav-item span {
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
}

/* Botão Central de Criação (FAB Style) */
.bottom-nav-create {
  position: relative;
  top: -12px;
  /* Eleva o botão */
}

.create-icon-wrapper {
  width: 56px;
  height: 56px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px var(--neon-pink-glow);
  transition: transform var(--trans), box-shadow var(--trans);
  border: 4px solid var(--bg-void);
  /* Borda para separar do fundo */
}

.light-mode .create-icon-wrapper {
  border-color: var(--bg-deep);
}

.create-icon-wrapper svg {
  color: #fff;
  width: 28px;
  height: 28px;
}

.bottom-nav-create:active .create-icon-wrapper {
  transform: scale(0.95);
  box-shadow: 0 4px 10px var(--neon-pink-glow);
}

/* Ajuste de padding no body para não cobrir conteúdo */
@media (max-width: 768px) {
  body {
    padding-bottom: 80px;
    /* Espaço para a bottom nav */
  }

  .global-header {
    padding: 0.5rem 0;
    /* Header mais compacto no mobile */
  }

  .header-shell {
    height: 56px;
    /* Altura reduzida */
  }

  /* Esconder elementos desnecessários no header mobile */

  /* Header Mobile Redesign */
  /* Header Mobile Redesign */
  .header-shell {
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    gap: 0.5rem;
  }

  /* Ajuste para alinhar itens do _header_search + avatar corretamente */
  .header-content {
    display: contents;
    /* Faz os filhos (Logo, Tools, Search, Form) participarem do grid/flex do pai (.header-shell) */
  }

  /* Botão de Menu Ferramentas Mobile */
  .nav-toggle-tools {
    background: transparent;
    border: none;
    color: var(--text-1);
    padding: 8px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-weight: 600;
  }

  .nav-toggle-tools span {
    font-size: 0.9rem;
  }

  /* Botão de Busca Mobile */
  .search-toggle-mobile {
    background: transparent;
    border: none;
    color: var(--text-2);
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: auto;
    /* EMPURRA TUDO PARA A DIREITA (Spacer) */
  }

  .search-toggle-mobile svg {
    width: 24px;
    height: 24px;
  }

  /* Botão de Avatar Mobile */
  .nav-toggle-avatar {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: block;
    /* margin-left removido pois o search-toggle já empurra */
  }

  .nav-toggle-avatar .user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 0.9rem;
  }

  /* Drawers Mobile Comuns */
  .mobile-menu-drawer,
  .user-menu-dropdown {
    position: fixed;
    top: 60px;
    /* Abaixo do header */
    width: 80%;
    /* Drawer ocupa 80% da tela */
    max-width: 320px;
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    height: calc(100vh - 60px - 60px);
    /* Altura total - header - bottom nav */
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow-y: auto;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1500;
    /* Alto, mas abaixo do search */
    box-shadow: var(--shadow-2xl);
  }

  /* Configuração Específica Menu de Usuário (DIREITA) */
  .user-menu-dropdown,
  .user-drawer {
    right: 0;
    left: auto;
    transform: translateX(110%);
    border-right: none;
    border-left: 1px solid var(--border);
    margin: 0 !important;
    position: fixed;
    opacity: 1;
    visibility: visible;
    display: flex;
  }

  .user-menu-dropdown.is-open,
  .user-drawer.is-open {
    transform: translateX(0);
  }

  /* Configuração Específica Menu Ferramentas (ESQUERDA) */
  .tools-drawer {
    left: 0;
    right: auto;
    transform: translateX(-110%);
    border-right: 1px solid var(--border);
    border-left: none;
  }

  .tools-drawer.is-open {
    transform: translateX(0);
  }

  /* Botão de Menu Ferramentas Mobile - Z-Index Fix */
  .nav-toggle-tools {
    position: relative;
    z-index: 50;
    /* Garante que está clicável */
    pointer-events: auto;
    background: transparent;
    border: none;
    color: var(--text-1);
    padding: 8px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-weight: 600;
  }

  .nav-toggle-tools span {
    font-size: 0.9rem;
  }

  /* Ajuste no Header Shell para não bloquear cliques */
  .header-shell {
    z-index: 100;
    /* Header base */
  }

  /* Header dentro dos Menus */
  .mobile-menu-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .mobile-menu-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-1);
  }

  /* Barra de Pesquisa Mobile (Colapsável) */
  .search-form {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2050;
    /* Z-INDEX MÁXIMO (Acima de ferramentas e logo) */
    background: var(--bg-body);
    /* Fundo sólido crítico */
    padding: 8px;
    border-radius: 0;
    max-width: none;
    align-items: center;
    /* Centralizar verticalmente se necessário */
  }

  .header-content {
    display: contents;
    /* Restaurado para layout correto */
  }

  /* REGRAS CRÍTICAS DE VISIBILIDADE DO SEARCH */
  /* Quando o search está ativo, esconder explicitamente os outros elementos para evitar sobreposição */
  .header-shell.search-active .site-logo,
  .header-shell.search-active .nav-toggle-tools,
  .header-shell.search-active .search-toggle-mobile,
  .header-shell.search-active .nav-toggle-avatar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s ease;
  }

  .header-shell.search-active .search-form {
    display: flex;
    /* Garante que o form apareça */
    z-index: 2050;
  }

  .search-form.search-expanded .search-input {
    padding-left: 12px;
    font-size: 16px;
  }

  .mobile-user-info {
    display: flex;
    flex-direction: column;
  }

  .mobile-user-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
  }

  .mobile-user-email {
    font-size: 0.8rem;
    color: var(--text-muted);
  }

  .user-menu-item {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
  }

  .user-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
  }

  /* Small Avatar for Bottom Nav */

  /* ===================================================
     BOTTOM NAV VISIBILITY - Hide on specific pages
     Forms (login, register, contact) & Immersive (video, shorts)
     Especificidade: body.classe > body (0,0,1,1 > 0,0,0,1)
     =================================================== */
  body.no-bottom-nav,
  body.shorts-page {
    padding-bottom: 0;
  }

  body.no-bottom-nav .bottom-nav,
  body.shorts-page .bottom-nav {
    display: none !important;
    /* !important required to override .mobile-only */
  }
}

/* ========================================
   🌐 LANGUAGE SELECTOR DROPDOWN
   ======================================== */
.lang-selector-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background var(--trans), transform var(--trans);
}

.lang-toggle:hover {
  background: var(--bg-glass-strong);
  transform: scale(1.05);
}

.lang-icon {
  font-size: 1.3rem;
  filter: grayscale(0.3);
  transition: filter var(--trans);
}

.lang-toggle:hover .lang-icon {
  filter: grayscale(0);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
}

.lang-selector-dropdown:hover .lang-dropdown,
.lang-selector-dropdown:focus-within .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text-secondary);
  transition: background var(--trans), color var(--trans);
  text-align: left;
}

.lang-btn:hover {
  background: var(--bg-glass-strong);
  color: var(--text-primary);
}

.lang-btn.active {
  background: rgba(255, 102, 204, 0.1);
  color: var(--neon-pink);
}

.lang-btn.active::after {
  content: '✓';
  margin-left: auto;
  color: var(--neon-pink);
  font-weight: bold;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .lang-dropdown {
    min-width: 140px;
  }

  .lang-btn {
    padding: 12px;
  }
}

/* --- NOVO: Glassmorphism Cyberpunk Container (Final do Arquivo - Override) --- */
.glass-container {
  /* Fundo escuro mas transparente (60% de opacidade) */
  background: rgba(18, 18, 28, 0.6);

  /* O desfoque do vidro */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  /* Borda fina e transparente */
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* Brilho Neon: Sombra rosa no topo-esquerdo e azul no baixo-direito */
  box-shadow:
    -5px -5px 30px rgba(255, 0, 222, 0.3),
    /* Glow Rosa */
    5px 5px 30px rgba(0, 210, 255, 0.3);
  /* Glow Azul/Ciano */

  border-radius: 24px;
  padding: 30px;
  margin: 20px auto;
  /* Garanta que seja responsivo */
  max-width: 1200px;
  width: 95%;
}

/* Modificador para formulários e páginas menores (ex: contato, settings) */
.glass-container--medium {
  max-width: 800px !important;
}

/* Modificador para páginas muito estreitas (ex: login) */

@media (max-width: 768px) {
  .glass-container {
    padding: 20px;
    margin: 10px auto;
    width: 98%;
  }
}

/* =========================================================
   OVERRIDES ESPECÍFICOS PARA LIGHT MODE (CORREÇÃO DE BUGS)
   ========================================================= */

/* 1. Header Global no Light Mode */
.light-mode .global-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.light-mode .nav-link {
  color: var(--text-secondary);
}

.light-mode .nav-link:hover,
.light-mode .nav-link.active {
  color: var(--neon-pink);
  background: rgba(217, 0, 141, 0.05);
}

.light-mode .site-logo {
  /* filter: invert(1) RELEMOVED - User requested no inversion */
  /* Logo color adjustment should be handled by SVG fill or swapping image if needed */
  filter: none;
}

/* 2. Inputs de Busca e Formulários (Correção "Texto Invisível") */
.light-mode .search-form {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.light-mode .search-input {
  color: #111827;
}

.light-mode .search-input::placeholder {
  color: #9ca3af;
}

.light-mode .search-submit-btn,
.light-mode .search-filter-btn {
  color: var(--text-secondary);
}

.light-mode .search-submit-btn:hover {
  background: var(--neon-pink);
  color: #ffffff;
}

/* 3. Cards de Vídeo e Canais */
.light-mode .video-card,
.light-mode .category-card,
.light-mode .channel-card-list {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.light-mode .video-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  border-color: var(--neon-pink);
}

.light-mode .video-title,
.light-mode .channel-title {
  color: var(--text-primary);
  /* Força cor escura */
}

.light-mode .video-meta,
.light-mode .video-channel {
  color: var(--text-muted);
}

/* 4. Botões */
.light-mode .btn-secondary {
  background: white;
  color: var(--text-primary);
  border-color: var(--border);
}

.light-mode .btn-secondary:hover {
  background: #f9fafb;
  border-color: var(--text-muted);
}

/* Botões primários mantêm texto branco pois o fundo é escuro/vibrante */
.light-mode .btn-primary,
.light-mode .btn-add {
  color: #ffffff;
}

/* 5. Ícones e SVGs */
/* 5. Ícones e SVGs - CORRIGIDO: Apenas Lucide usa stroke */
.light-mode .icon,
.light-mode [data-lucide],
.light-mode .lucide {
  fill: none;
  stroke: currentColor;
}

/* Preserva SVGs complexos (como Sharingan) que usam fill */
.light-mode svg:not([data-lucide]):not(.lucide):not(.icon) {
  fill: initial;
}

.light-mode .chat-toggle-btn svg {
  color: white;
  /* Exceção para o botão do chat que tem fundo colorido */
}

/* 6. Footer */
.light-mode .neo-footer {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.light-mode .neo-footer strong {
  color: var(--neon-pink);
}

/* 7. Modal e Overlays */
.light-mode .search-modal,
.light-mode .modal {
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.light-mode .search-modal-header h2,
.light-mode .modal-title {
  color: var(--text-primary);
}

.light-mode .search-result-card:hover {
  background: #f0fdf4;
  /* Leve tint verde/rosa ao hover */
  border-color: var(--neon-pink);
}

/* 8. Fix para "background-decoration" do index.html (Orbs) */

/* 9. Fix para "Destaque do Dia" (Highlight Section) no Light Mode */
/* REVERTIDO A PEDIDO DO USUÁRIO: O container da thumbnail deve permanecer dark.
   A mudança agora é no BACKGROUND global da página (abaixo). */

/* 10. Fix CRÍTICO de Background Global - SAKURA NEON */
/* Fundo "Destaque" global mais escuro que os cards brancos, com gradiente Rosa/Azul/Roxo */
.light-mode body.neo-theme {
  background:
    radial-gradient(circle at 20% 30%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 10%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #e0e7ff 0%, #fae8ff 100%);
  background-attachment: fixed;
  color: var(--text-primary);
}

/* ========================================
   🏷️ BADGES DE PROMOÇÃO E CUPOM
   Para Shorts Ads e Materials
   ======================================== */

/* Badge base */
.badge-promotion,
.badge-coupon {
  position: absolute;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  /* Extra bold */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
  animation: badge-pulse 2s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Badge Promoção - Neon Yellow/Gold */
.badge-promotion {
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #000;
  border: 1px solid #FFD700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.4);
}

/* Badge Cupom - Neon Green */
.badge-coupon {
  bottom: 8px;
  right: 8px;
  background: linear-gradient(135deg, #00FF7F 0%, #32CD32 100%);
  color: #000;
  border: 1px solid #00FF7F;
  box-shadow: 0 0 10px rgba(0, 255, 127, 0.6), 0 0 20px rgba(0, 255, 127, 0.4);
}

/* Animação de pulsação mais intensa */
@keyframes badge-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  }
}

/* Container relativo para badges */
.ad-bubble {
  position: relative;
}

/* Adaptação para cards de materials */
.product-card {
  position: relative;
}

.product-card .badge-promotion {
  top: 12px;
  left: 12px;
}

.product-card .badge-coupon {
  bottom: auto;
  top: 12px;
  right: 12px;
}


/* Posição relativa para badges em Materials */
.product-image {
  position: relative;
}

.product-image .badge-promotion {
  top: 8px;
  left: 8px;
}

.product-image .badge-coupon {
  bottom: auto;
  top: 8px;
  right: 8px;
}

/* -------------------------
   DROPDOWN SEÇÃO TOP ENGLISH VIDEOS
   ------------------------- */
/* Section header com dropdown posicionado à direita como o "See all" do Shorts */
#english-videos .section-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 16px;
  align-items: start;
}

#english-videos .section-header .section-title {
  grid-column: 1;
  grid-row: 1;
}

#english-videos .section-header .section-description {
  grid-column: 1;
  grid-row: 2;
}

#english-videos .section-header .section-link-dropdown {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

/* Dropdown na seção */
.section-link-dropdown {
  position: relative;
  display: inline-block;
}

.section-link-dropdown .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 0.5rem 1rem;
  transition: background 0.2s, border-color 0.2s;
}

.section-link-dropdown .dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.section-link-dropdown .dropdown-chevron {
  width: 14px;
  height: 14px;
  color: inherit;
  transition: transform 0.2s;
}

.section-link-dropdown .dropdown-chevron.rotated {
  transform: rotate(180deg);
}

.section-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #0f0f1a;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  padding: 0.5rem 0;
  backdrop-filter: blur(20px);
}

.section-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.section-dropdown-item {
  display: block;
  padding: 0.85rem 1.25rem;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.15s, color 0.15s;
}

.section-dropdown-item:hover {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.1));
  color: #a5b4fc;
}

.section-dropdown-divider {
  height: 1px;
  background: rgba(99, 102, 241, 0.2);
  margin: 0.5rem 1rem;
}

/* =====================================================
   ROTAÇÃO DE IMAGENS - Ads (Banner + Native)
   Necessário porque o template usa opacity: 0 inline
   ===================================================== */

/* Container de imagens rotativas precisa de position: relative */
.ad-image-rotator {
  position: relative;
}

.ad-rotating-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* Primeira imagem deve ocupar espaço para manter dimensões do container */
.ad-rotating-img:first-child {
  position: relative;
}

.ad-rotating-img.active {
  opacity: 1 !important;
  z-index: 1;
}

/* SEO: Screen Reader Only Class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}