/* === css/core/tokens.css === */
/* ========================================
   DESIGN TOKENS — Cosplay Master Design System
   Tema: Tokyo Neon Nights v2.0 - Unified

   ESCOPO: Variáveis CSS (:root), tema base
   e custom properties.

   Não editar regras de componentes aqui —
   este arquivo é SOMENTE variáveis e imports globais.
   ======================================== */

/* Google Fonts carregado via <link> em templates/base.html */

@layer tokens, reset, base, layout, components, pages, utilities, theme;

@layer tokens {
: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: rgb(255 255 255 / 3%);

  /* Glassmorphism */
  --bg-glass-strong: rgb(255 255 255 / 6%);

  /* 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: #f6c;
  --neon-pink-bright: #f9d;
  --neon-pink-dark: #c49;
  --neon-pink-glow: rgb(255 102 204 / 40%);

  /* Roxo Místico - SECUNDÁRIO */
  --neon-purple: #b388ff;
  --neon-purple-bright: #c9a3ff;
  --neon-purple-dark: #96f;
  --neon-purple-glow: rgb(179 136 255 / 40%);

  /* Ciano Elétrico - CONTRASTE/CTAs */
  --neon-cyan: #00d9ff;
  --neon-cyan-bright: #33e5ff;
  --neon-cyan-dark: #00a8cc;
  --neon-cyan-glow: rgb(0 217 255 / 40%);

  /* Vermelho Japonês - ALERTAS/HOVER */
  --neon-red: #ff4d5a;
  --neon-red-bright: #ff7080;
  --neon-red-dark: #cc3d47;
  --neon-red-glow: rgb(255 77 90 / 40%);

  /* 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;

  /* Azul Cobalto — usado para categoria (theme accent dos topics) */
  --neon-blue-bright: #5aa0ff;

  /* Âmbar Dourado — usado para evento (theme accent dos topics) */
  --neon-amber-bright: #ffc857;

  /* ========================================
     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, rgb(28 28 36 / 95%), rgb(5 4 11 / 95%));


  /* ========================================
     BORDAS
     ======================================== */
  --border-default: rgb(255 255 255 / 6%);
  --border-subtle: rgb(255 255 255 / 3%);
  --border-accent: rgb(255 102 204 / 30%);
  --border-focus: var(--neon-pink);

  /* ========================================
     SOMBRAS
     ======================================== */
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 30%);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 40%);
  --shadow-lg: 0 8px 32px rgb(0 0 0 / 50%);
  --shadow-xl: 0 20px 45px rgb(5 4 11 / 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 rgb(194 23 40 / 25%);
  --shadow-hero: 0 8px 30px rgb(0 0 0 / 50%);

  /* ========================================
     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: rgb(17 16 24 / 95%);
  --bg-accent: rgb(255 102 204 / 4%);
  --card: var(--bg-glass);
  --card-bg: var(--bg-glass);
  --bg-card: var(--bg-glass);
  --bg-hover: var(--bg-elevated);
  --glass: var(--bg-glass);

  /* Cores de texto */
  --text: var(--text-primary);
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-main: var(--text-primary);
  --text-color: var(--text-primary);
  --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-color: var(--neon-cyan);
  --accent-hover: var(--neon-pink-bright);
  --highlight: var(--neon-cyan);
  --primary: var(--neon-red-dark);
  --primary-color: var(--neon-purple);
  --danger-color: var(--neon-red);
  --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);
  --border-color: var(--border-default);
  --color-outline: var(--border-default);
  --color-outline-strong: rgb(255 77 90 / 45%);
  --color-chip: rgb(255 77 90 / 9%);
  --color-chip-border: rgb(255 77 90 / 35%);

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


/* === css/core/theme-light.css === */
@layer theme {
/* ========================================
   LIGHT MODE — Tema: Sakura Day
   ESCOPO: Custom properties e overrides globais para .light-mode.
   Overrides de componentes específicos migraram para seus respectivos owners:
     category-tabs → components/category-tabs.css
     bottom-nav / header / mobile-menu / dropdown → components/header.css
     search-form / search-input → components/search.css
     neo-footer → components/footer.css
     project-card → pages/projects.css
   ======================================== */

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

  /* --- Backgrounds --- */

  /* Fundo principal: Quase branco, levemente azulado/frio */
  --bg-void: #f8f9fc;

  /* Fundo profundo: Branco puro */
  --bg-deep: #fff;

  /* Superfícies (Cards): Branco puro */
  --bg-surface: #fff;

  /* Elementos elevados: Off-white */
  --bg-elevated: #f3f4f6;

  /* Glassmorphism Diurno */
  --bg-glass: rgb(255 255 255 / 75%);
  --bg-glass-strong: rgb(255 255 255 / 95%);

  /* --- Texto (Inversão Crítica) --- */

  /* Primário: Cinza quase preto */
  --text-primary: #111827;

  /* Secundário: Cinza escuro */
  --text-secondary: #4b5563;

  /* Muted: Cinza médio */
  --text-muted: #6b7280;

  /* Texto inverso (para botões escuros) */
  --text-inverse: #fff;

  /* --- Cores de Acento (Ajustadas para fundo claro) --- */

  /* Pink: Mais escuro/saturado para ler sobre branco */
  --neon-pink: #d9008d;
  --neon-pink-bright: #f39;
  --neon-pink-glow: rgb(217 0 141 / 15%);

  /* Purple: Roxo real profundo */
  --neon-purple: #7e22ce;
  --neon-purple-glow: rgb(126 34 206 / 15%);

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

  /* --- Inputs (CRÍTICO) --- */
  --bg-input: #fff;
  --text-input: #111827;
  --border-input: #d1d5db;

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

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

  /* Sombras: drop-shadow suave */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
  --shadow-glow-pink: 0 4px 20px rgb(217 0 141 / 20%);

  /* --- Aliases Atualizados --- */
  --bg: var(--bg-deep);
  --card: var(--bg-surface);
  --card-bg: var(--bg-surface);
  --bg-card: var(--bg-surface);
  --bg-hover: var(--bg-elevated);
  --text: var(--text-primary);
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-main: var(--text-primary);
  --text-color: var(--text-primary);
  --muted: var(--text-muted);
  --border: var(--border-default);
  --border-color: var(--border-default);
  --primary-color: var(--neon-purple);
  --accent-color: var(--neon-cyan);
  --danger-color: var(--neon-red);

  /* 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%, #fff 100%);
  --bg-secondary: rgb(243 244 246 / 95%);
  --gradient-glass: linear-gradient(145deg, rgb(255 255 255 / 95%), rgb(248 249 252 / 95%));
  --color-panel: var(--gradient-glass);
}

/* =========================================================
   OVERRIDES GLOBAIS PARA LIGHT MODE
   Sobram aqui apenas overrides que spannam multiplos componentes
   ou que nao tem owner unico claro.
   ========================================================= */

/* 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);
  background: #fff;
  border-color: #d1d5db;
}

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

/* 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: #fff;
  color: var(--text-primary);
  border-color: #e5e7eb;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
}

/* 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"]:not(.project-card, [class*="project-card"]) p,
.light-mode [class*="card"]:not(.project-card, [class*="project-card"]) span:not(.badge, .tag, [class*="badge"], [class*="tag"]),
.light-mode .channel-card-desc {
  color: var(--text-secondary);
}

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

/* 4. Overrides para Página de Vídeo (assistir_video.html)
   Mantido aqui: seletores spannam search.css (.tag) e
   assistir-video.css (multiplos seletores de página). */
.light-mode .summary-content {
  color: var(--text-secondary);
}

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

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

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

.light-mode .ad-price {
  color: #2563eb;
}

.light-mode .sidebar-title {
  color: #1e40af;
}

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

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

/* 5. Overrides para Metadados de Vídeo
   Mantido aqui: seletores spannam video-cards.css e channel-card.css. */
.light-mode .video-channel,
.light-mode .video-meta,
.light-mode .video-date,
.light-mode .channel-subs,
.light-mode .channel-card-desc {
  color: #4b5563;
}

/* 6. Cards de Vídeo e Canais (específicos)
   Mantido aqui: seletores mistos (.video-card, .category-card, .channel-card-list)
   com overlap com o fix global de cards acima. */
.light-mode .video-card,
.light-mode .category-card,
.light-mode .channel-card-list {
  background: #fff;
  border-color: #e5e7eb;
  box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
}

.light-mode .video-card:hover {
  box-shadow: 0 10px 25px rgb(0 0 0 / 10%);
  transform: translateY(-4px);
  border-color: var(--neon-pink);
}

.light-mode .video-title,
.light-mode .channel-title {
  color: var(--text-primary);
}

.light-mode .video-meta,
.light-mode .video-channel {
  color: var(--text-muted);
}

/* 7. Botões — override global (sem componente owner único) */
.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);
}

.light-mode .btn-primary,
.light-mode .btn-add {
  color: #fff;
}

/* Paginação */
.light-mode .btn-page {
  background: #fff;
  color: var(--neon-purple);
  border: 1px solid rgb(126 34 206 / 25%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
}

.light-mode .btn-page:hover {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgb(126 34 206 / 25%);
}

.light-mode .btn-page.active {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgb(126 34 206 / 20%);
}

.light-mode .btn-disabled {
  background: #f3f4f6;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
  opacity: 0.6;
}

/* 8. Ícones e SVGs — override global */
.light-mode .icon,
.light-mode [data-lucide],
.light-mode .lucide {
  fill: none;
  stroke: currentcolor;
}

.light-mode svg:not([data-lucide], .lucide, .icon) {
  fill: initial;
}

.light-mode .chat-toggle-btn svg {
  color: white;
}

/* 9. Modal e Overlays
   Mantido aqui: seletores mistos (.search-modal de search.css, .modal de modal.css). */
.light-mode .search-modal,
.light-mode .modal {
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 25px 50px -12px rgb(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;
  border-color: var(--neon-pink);
}

/* 10. Background Global — SAKURA NEON
   REVERTIDO A PEDIDO DO USUÁRIO: O container da thumbnail deve permanecer dark. */
.light-mode body.neo-theme {
  background:
    radial-gradient(circle at 20% 30%, rgb(236 72 153 / 15%) 0%, transparent 50%),
    radial-gradient(circle at 80% 10%, rgb(99 102 241 / 15%) 0%, transparent 50%),
    linear-gradient(135deg, #e0e7ff 0%, #fae8ff 100%);
  background-attachment: fixed;
  color: var(--text-primary);
}
}


/* === css/core/reset.css === */
@layer reset {
/* ========================================
   RESET + BASE
   ESCOPO: Box-sizing reset, html/body base, .container
   ======================================== */

/* -------------------------
   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 (width <=1279px) {
  .container {
    padding: 0 var(--grid-padding-tablet);
  }
}

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


/* === css/core/layout.css === */
@layer layout {
/* ========================================
   LAYOUT
   ESCOPO: Page shells, containers, grid, neo-theme, neo-section,
   neo-panel, home layout, breadcrumbs, channel cards (layout-only),
   tag-hero, empty state, nav-badge, project-cards

   NOTA: Footer (.neo-footer, .site-footer) removido — já coberto
   por static/css/footer.css carregado via <link> no base.html.
   ======================================== */

/* -------------------------
   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 (width <=1279px) {
  .page-shell {
    padding: var(--space-06) var(--grid-padding-tablet) var(--space-07);
    gap: var(--space-07);
  }
}

@media (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%, rgb(179 136 255 / 15%) 0%, transparent 40%),
    radial-gradient(circle at 80% 10%, rgb(255 102 204 / 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;
}

/* Sticky Footer Layout */
main {
  padding-top: var(--space-05);
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  width: 100%;
  overflow: visible;
}

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

.content-wrapper>* {
  position: relative;
  z-index: 1;
}

.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-h1-title {
  max-width: min(1400px, calc(100% - 2rem));
  margin: 0 auto var(--space-04);
  padding: 0 0.25rem;
  font-size: clamp(1.1rem, 2.3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-surface-contrast);
}

@media (width <= 768px) {
  .home-h1-title {
    margin-bottom: var(--space-03);
    font-size: clamp(1rem, 4.8vw, 1.35rem);
  }
}

.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%, rgb(30 30 30 / 50%) 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-03);
}

.tag-title {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0;
  background: var(--color-tag-gradient-end);
  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);
}
}


/* === css/core/buttons.css === */
@layer components {
/* ========================================
   BUTTONS + FORMS
   ESCOPO: Glass form styles (.form-group, .form-input, etc.)
   Botões (.btn, .btn-primary, .btn-secondary, .btn-page, etc.)
   Theme toggle
   ======================================== */

/* -------------------------
   GLASS FORM STYLES (Global)
   Movido para fora do :root na Fase 1 da refatoração CSS.
   Antes estava erroneamente dentro do bloco :root (não afetava funcionalidade,
   mas era sintaticamente incorreto).
   ------------------------- */
.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: rgb(0 0 0 / 30%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 8px;
  color: white;
  font-family: inherit;
  transition: all 0.3s ease;
}

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

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

/* -------------------------
   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: rgb(255 255 255 / 2%);
  color: var(--color-surface-contrast);
  box-shadow: 0 12px 26px rgb(5 4 11 / 35%);
}

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

/* Paginação - Estilo anime/neon coerente com o tema */
.btn-page {
  background: rgb(255 255 255 / 5%);
  color: var(--neon-purple-bright);
  border: 1px solid rgb(179 136 255 / 30%);
  box-shadow: none;
  font-weight: 600;
}

.btn-page:hover {
  background: linear-gradient(135deg, var(--neon-pink-dark), var(--neon-purple-dark));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 16px var(--neon-pink-glow), 0 0 32px var(--neon-purple-glow);
  transform: translateY(-2px);
}

.btn-page.active {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 12px var(--neon-pink-glow), 0 0 24px var(--neon-purple-glow);
}

.btn-blue {
  background: var(--color-accent);
  color: #05040b;
  border: 1px solid rgb(255 255 255 / 16%);
}

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

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

.btn-disabled {
  background: rgb(255 255 255 / 3%);
  color: var(--text-muted);
  border: 1px solid rgb(255 255 255 / 8%);
  opacity: 0.5;
  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, rgb(255 255 255 / 2%), 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 rgb(0 0 0 / 18%);
}

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

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

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


/* === css/components/header.css === */
@layer components {
/* ========================================
   HEADER + NAVIGATION
   ESCOPO: Header global (.global-header), header interno (.site-header),
   navegação (.nav-link, .nav-links), dropdowns, bottom-nav mobile,
   user-avatar, beta-badge, nav-link-shorts, lang-selector
   ======================================== */

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

.global-header .header-container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-padding-desktop);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-04);
  justify-content: space-between;
}

@media (width <=1279px) {
  .global-header .header-container {
    padding: 0 var(--grid-padding-tablet);
  }
}

@media (width <=767px) {
  .global-header .header-container {
    padding: 0 var(--grid-padding-mobile);
  }
}

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

.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;
  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;
  opacity: 0.7;
}

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

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

.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: rgb(255 255 255 / 3%);
}

.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);
}

.user-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.user-menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-02);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-secondary);
}

.user-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--color-primary-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
  border: 2px solid rgb(255 255 255 / 20%);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.user-avatar-large {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

.user-menu-button:hover .user-avatar,
.user-menu-button:focus-visible .user-avatar {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgb(147 51 234 / 50%);
}

.user-menu-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform var(--trans);
}

.user-menu:hover .user-menu-chevron,
.user-menu:focus-within .user-menu-chevron {
  transform: rotate(180deg);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  z-index: var(--z-dropdown);
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
}

.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown,
.user-menu-dropdown.active,
.user-menu-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background-color var(--trans), color var(--trans);
}

.user-menu-item svg,
.user-menu-item i {
  width: 18px;
  height: 18px;
}

.user-menu-item:hover {
  background: rgb(255 255 255 / 5%);
  color: var(--text-primary);
}

.user-menu-divider {
  height: 1px;
  margin: 0.5rem 0;
  background: var(--border);
}

.user-menu-logout {
  color: var(--neon-cyan-bright);
}

.user-menu-logout:hover {
  color: var(--neon-cyan-bright);
  background: rgb(0 217 255 / 8%);
}

@media (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: rgb(5 4 11 / 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 rgb(0 0 0 / 50%);
    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;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .global-header .header-container,
  .header-shell {
    flex-wrap: nowrap;
    width: 100%;
    gap: var(--space-03);
  }

  .header-shell > .header-content {
    flex: 1 1 auto;
    order: 0;
    min-width: 0;
  }

  .header-content {
    width: auto;
    max-width: none;
    margin: 0;
    gap: var(--space-03);
  }

  .main-nav {
    display: none;
  }

  .nav-toggle-tools,
  .nav-toggle-avatar {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text-1);
    cursor: pointer;
  }

  .nav-toggle-tools {
    position: relative;
    z-index: 50;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: var(--radius);
    font-weight: 600;
  }

  .nav-toggle-tools span {
    font-size: 0.9rem;
  }

  .search-toggle-mobile {
    display: none;
  }

  .header-content .search-form {
    flex: 1 1 360px;
    max-width: min(44vw, 440px);
    min-width: 220px;
  }

  .nav-toggle-avatar {
    padding: 4px;
  }

  .nav-toggle-avatar .user-avatar {
    width: 32px;
    height: 32px;
  }

  .mobile-menu-drawer,
  .user-drawer {
    position: fixed;
    top: 60px;
    width: 80%;
    max-width: 320px;
    height: calc(100vh - 60px);
    padding: 1rem;
    overflow-y: auto;
    background: rgb(10 10 15 / 98%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-2xl);
    backdrop-filter: blur(12px);
    z-index: 1500;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-direction: column;
  }

  .user-drawer {
    right: 0;
    left: auto;
    transform: translateX(110%);
    border-right: none;
    border-left: 1px solid var(--border);
  }

  .tools-drawer {
    left: 0;
    right: auto;
    transform: translateX(-110%);
    border-right: 1px solid var(--border);
    border-left: none;
  }

  .user-drawer.is-open,
  .tools-drawer.is-open {
    transform: translateX(0);
  }
}

@media (width <= 768px) {
  .nav-toggle-tools span {
    display: none;
  }

  .main-nav {
    display: none;
  }

  .header-shell {
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: space-between;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    align-items: center;
  }

  .header-content {
    display: contents;
  }
}

/* -------------------------
   HEADER INTERNO
   ------------------------- */
.site-header {
  background: linear-gradient(180deg, rgb(255 255 255 / 2%), 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,
.header-left h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 6px 18px rgb(183 120 255 / 6%);
}

.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;
}

/* --- 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: rgb(255 255 255 / 5%);
  color: var(--text-primary);
}

.dropdown-item.active {
  background: rgb(255 102 204 / 10%);
  color: var(--neon-pink);
}

.dropdown-item svg {
  width: 18px;
  height: 18px;
}

.dropdown-item-support {
  background: linear-gradient(180deg, rgb(0 217 255 / 6%), rgb(255 255 255 / 2%));
  border: 1px solid rgb(0 217 255 / 14%);
  color: var(--text-primary);
  font-weight: 600;
}

.dropdown-item-support svg {
  color: var(--neon-cyan-bright);
}

.dropdown-item-support:hover {
  background: linear-gradient(180deg, rgb(0 217 255 / 12%), rgb(255 255 255 / 4%));
  border-color: rgb(0 217 255 / 22%);
  color: var(--neon-cyan-bright);
}

.dropdown-item-support.active {
  background: linear-gradient(180deg, rgb(0 217 255 / 16%), rgb(255 255 255 / 4%));
  border-color: rgb(0 217 255 / 28%);
  color: var(--neon-cyan-bright);
}

/* --- Mobile Bottom Navigation --- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;

  /* Altura fixa */
  background: rgb(11 7 16 / 85%);

  /* Fundo escuro translúcido */
  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 rgb(0 0 0 / 30%);
}

.light-mode .bottom-nav {
  background: rgb(255 255 255 / 85%);
  border-top: 1px solid rgb(0 0 0 / 10%);
}

.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);
}

.create-icon-wrapper svg {
  color: #fff;
  width: 28px;
  height: 28px;
}

.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);
}

.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 (width <= 768px) {
  body:has(.bottom-nav) {
    padding-bottom: 80px;

    /* Espaço para a bottom nav */
  }

  .global-header {
    padding: 0.5rem 0;

    /* Header mais compacto no mobile */
  }

  /* 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;
    z-index: 100;
  }

  /* 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 {
    position: relative;
    z-index: 50;
    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;
  }

  /* 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: rgb(10 10 15 / 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;
    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);
  }

  /* 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) */
  .header-shell .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 */
  }

  /* 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: rgb(255 255 255 / 3%);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
  }

  .user-menu-item:hover {
    background: rgb(255 255 255 / 5%);
    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;

    /* 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: rgb(255 102 204 / 10%);
  color: var(--neon-pink);
}

.lang-btn.active::after {
  content: '✓';
  margin-left: auto;
  color: var(--neon-pink);
  font-weight: bold;
}

/* Mobile responsive */
@media (width <= 768px) {
  .lang-dropdown {
    min-width: 140px;
  }

  .lang-btn {
    padding: 12px;
  }
}

/* ========================================
   NAV BADGE (do monolito — L970-L983)
   Restaurado na Fase de Hardening
   ======================================== */
.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);
}

/* --- Light Mode Overrides (migrado de theme-light.css) --- */
.light-mode .global-header {
  background: rgb(255 255 255 / 90%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgb(0 0 0 / 5%);
}

.light-mode .site-logo {
  filter: none;
}

.light-mode .bottom-nav-item {
  color: #4b5563;
}

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

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

.light-mode .mobile-menu-drawer,
.light-mode .user-menu .user-menu-dropdown {
  background: rgb(255 255 255 / 98%);
  border-color: #e5e7eb;
}

.light-mode .nav-link {
  color: var(--text-secondary);
}

.light-mode .nav-link:hover,
.light-mode .nav-link.active {
  color: var(--neon-pink);
  background: rgb(217 0 141 / 5%);
}

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

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

.light-mode .nav-item-dropdown .dropdown-menu {
  background: #fff;
  border-color: #e5e7eb;
  box-shadow: 0 10px 25px rgb(0 0 0 / 10%);
}

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

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

.light-mode .mobile-menu-drawer .nav-link:hover,
.light-mode .user-menu .user-menu-dropdown a:hover {
  background: rgb(0 0 0 / 5%);
  color: var(--neon-pink);
}

/* -------------------------
   RESPONSIVIDADE DO HEADER GLOBAL
   (owner: estrutura do header)
   ------------------------- */

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

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

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

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

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

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

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

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

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


/* === css/components/search.css === */
@layer components {
/* ========================================
   SEARCH — Barra de pesquisa + Modal de busca
   ESCOPO: Barra de pesquisa (.search-form, .search-input),
   botões de filtro/lupa, modal de resultados (.search-modal),
   cards de resultado, estados de loading
   ======================================== */

/* ===== BARRA DE PESQUISA NANO GLASS ===== */
.search-form {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  flex: 1;
  max-width: 600px;
  margin: 0;
  background: rgb(255 255 255 / 3%);

  /* Vidro mais transparente */

  /* Efeito glass forte */
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 999px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 20px rgb(0 0 0 / 20%);
}

.search-form:focus-within {
  border-color: rgb(0 224 255 / 50%);

  /* Ciano Neon */
  box-shadow: 0 0 25px rgb(0 224 255 / 15%), 0 4px 20px rgb(0 0 0 / 30%);
  background: rgb(255 255 255 / 7%);
  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: rgb(255 255 255 / 40%);
  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: rgb(255 255 255 / 60%);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.search-filter-btn:hover {
  background: rgb(255 255 255 / 10%);
  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: rgb(138 180 248 / 5%);
  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;
}

/* ========================================================================================
   RESPONSIVIDADE DA BARRA DE PESQUISA
   ======================================================================================== */

@media (width <= 768px) {
  .search-form {
    max-width: 400px;
  }
}

@media (width <= 640px) {
  .search-form {
    max-width: 100%;
  }

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

@media (width <= 480px) {
  .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: rgb(138 180 248 / 20%);
  border-radius: 20px;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s;
}

.tag-badge:hover {
  background: rgb(138 180 248 / 40%);
  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)
   ======================================================================================== */

/* [Fase 1] Bloco .tag-type-section/.tag-type-header/.tag-checkboxes removido daqui.
   A versão canônica está no bloco "Tags Filter Content inside Modal" (~L5301).
   Aquela versão usa max-height transition em vez de display:none e tem
   estilos mais completos com border e border-radius. */

.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;
}

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

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

/* Overlay - Cobre toda a tela */
.search-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgb(11 7 16 / 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 rgb(0 0 0 / 80%);
  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, rgb(255 255 255 / 2%), transparent);
}

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

[id="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: rgb(255 255 255 / 10%);
  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 rgb(102 102 255 / 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 rgb(0 0 0 / 80%));
}

.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;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

/* 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: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgb(255 102 204 / 30%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.load-more-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgb(255 102 204 / 50%);
}

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

/* 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 #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Responsividade */
@media (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 (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;
}

/* Container de resultados inline da busca */
.inline-search-results {
  display: block;
  min-height: 0;
  width: 100%;
}

/* --- Light Mode Overrides (migrado de theme-light.css) --- */
.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: #fff;
}
}


/* === css/components/modal.css === */
@layer components {
/* ========================================
   MODALS
   ESCOPO: Modais genéricos (nav-button, overlay, container,
   slide animation, header/body/footer, tags filter, mobile fullscreen)

   NOTA: O arquivo static/css/modals.css já existe mas cobre outros modais.
   Este módulo complementa com os modais do monolito.
   ======================================== */

/* ========================================================================================
   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: none;
  align-items: flex-start;
  justify-content: flex-end;
}

.filters-modal.active {
  display: flex;
}

.filters-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 70%);
  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 rgb(0 0 0 / 30%);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease-out;
}

/* [Fase 1] @keyframes fadeIn duplicado removido.
   A versão canônica está em ~L2887 (inclui transform: translateY). */

@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-action {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.filters-modal-action-primary {
  color: #fff;
  background: var(--gradient-primary);
  border-color: transparent;
  box-shadow: var(--shadow-glow-pink);
}

.filters-modal-action-primary:hover {
  filter: brightness(1.08);
}

.filters-modal-action-secondary {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-color: var(--border-default);
}

.filters-modal-action-secondary:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* Mobile - Fullscreen */
@media (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;
}

/* ========================================
   MODAL TAGS + LOADING (do monolito — L3871-L3927)
   Restaurado na Fase de Hardening
   ======================================== */
.modal-tags-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.tag-group h4 {
  margin: 0 0 0.75rem;
  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;
}

/* Restaurado do monolito original */
.tag-type-header span {
  font-weight: 600;
}

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

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

[id="add-to-project-modal"] {
    position: fixed;
    inset: 0;
    z-index: var(--modal-z-index, 10001);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-04);
    background: rgb(5 4 11 / 85%);
    backdrop-filter: blur(8px);
}

[id="add-to-project-modal"].active {
    display: flex;
}

[id="add-to-project-modal"] .project-add-modal {
    width: min(500px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-06);
    background: var(--bg-glass-strong);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), var(--shadow-glow-pink);
    color: var(--text);
}

[id="add-to-project-modal"] .project-add-modal-header,
[id="add-to-project-modal"] .project-add-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-04);
}

[id="add-to-project-modal"] .project-add-modal-title {
    margin: 0;
    color: var(--text-primary);
}

[id="add-to-project-modal"] .project-add-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

[id="add-to-project-modal"] .project-add-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-glass);
}

[id="add-to-project-modal"] .project-add-modal-close svg,
[id="add-to-project-modal"] .project-add-modal-close i {
    width: 20px;
    height: 20px;
}

[id="add-to-project-modal"] .project-add-modal-body {
    overflow: auto;
    padding: var(--space-04) 0;
}

[id="add-to-project-modal"] .project-add-modal-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-02);
    width: 100%;
    padding: var(--space-03) var(--space-04);
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

[id="add-to-project-modal"] .project-add-modal-create:hover {
    color: var(--neon-pink);
    border-color: var(--neon-pink);
}

[id="add-to-project-modal"] .project-add-modal-create svg,
[id="add-to-project-modal"] .project-add-modal-create i {
    width: 16px;
    height: 16px;
}


/* =========================================
   COSPLAY MODAL SYSTEM (Unified)
   ========================================= */

:root {
    --modal-z-index: 10001;

    /* Above reviews-panel (10000) and Toasts */
    --modal-overlay-bg: rgb(0 0 0 / 75%);
    --modal-glass-bg: rgb(20 20 30 / 95%);
    --modal-border: 1px solid rgb(255 255 255 / 10%);
    --modal-glow: 0 0 20px rgb(139 92 246 / 30%);

    /* Purple Glow */
    --modal-radius: 16px;
    --modal-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- OVERLAY --- */
.cosplay-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-overlay-bg);
    backdrop-filter: blur(8px);
    z-index: var(--modal-z-index);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cosplay-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- MODAL CONTAINER --- */
.cosplay-modal {
    background: var(--modal-glass-bg);
    border: var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: 0 10px 40px rgb(0 0 0 / 50%), var(--modal-glow);
    color: #fff;
    width: 90%;
    max-width: 500px;
    transform: scale(0.95) translateY(10px);
    opacity: 0;
    transition: var(--modal-transition);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cosplay-modal-overlay.active .cosplay-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* --- SIZES --- */
.cosplay-modal.modal-sm {
    max-width: 400px;
}

.cosplay-modal.modal-md {
    max-width: 600px;
}

.cosplay-modal.modal-lg {
    max-width: 800px;
}

/* --- CONTENT --- */
.cosplay-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid rgb(255 255 255 / 5%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cosplay-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cosplay-modal-close {
    background: transparent;
    border: none;
    color: rgb(255 255 255 / 50%);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.cosplay-modal-close:hover {
    background: rgb(255 255 255 / 10%);
    color: #fff;
}

.cosplay-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: 70vh;
    font-size: 1rem;
    line-height: 1.6;
    color: rgb(255 255 255 / 90%);
}

.cosplay-modal-footer {
    padding: 1.25rem 1.5rem;
    background: rgb(0 0 0 / 20%);
    border-top: 1px solid rgb(255 255 255 / 5%);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* --- INPUTS IN PROMPTS --- */
.cosplay-modal-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgb(0 0 0 / 30%);
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    margin-top: 1rem;
    transition: all 0.2s;
}

.cosplay-modal-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 2px rgb(139 92 246 / 30%);
}

/* --- BUTTONS --- */
.cosplay-modal-btn {
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
    border: none;
}

.cosplay-modal-btn.cancel {
    background: transparent;
    border: 1px solid rgb(255 255 255 / 20%);
    color: rgb(255 255 255 / 80%);
}

.cosplay-modal-btn.cancel:hover {
    background: rgb(255 255 255 / 10%);
    color: #fff;
    border-color: rgb(255 255 255 / 30%);
}

.cosplay-modal-btn.confirm {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 4px 12px rgb(79 70 229 / 30%);
}

.cosplay-modal-btn.confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgb(79 70 229 / 40%);
}

.cosplay-modal-btn.danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    box-shadow: 0 4px 12px rgb(220 38 38 / 30%);
}

.cosplay-modal-btn.danger:hover {
    box-shadow: 0 6px 16px rgb(220 38 38 / 40%);
}

/* --- MOBILE --- */
@media (width <= 640px) {
    .cosplay-modal {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
        margin-top: auto;

        /* Drawer style */
        transform: translateY(100%);
        border-bottom: none;
    }

    .cosplay-modal-overlay {
        align-items: flex-end;

        /* Drawer alignment */
    }
}

body.is-scroll-locked {
    overflow: hidden;
}
}


/* === css/components/section-heading.css === */
@layer components {
/* ========================================
   SECTION HEADING
   ESCOPO: Cabeçalhos genéricos de seção usados em múltiplas páginas.
   ======================================== */

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

.section-title {
  margin: 0 0 16px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, #fff 0%, #a0a0ff 100%);
  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 rgb(0 224 255 / 40%);
}

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

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


/* === css/core/utilities.css === */
@layer utilities {
/* ========================================
   UTILITIES + ANIMATIONS + BADGES + MISC
   ESCOPO: Keyframes (neon-pulse, float, shimmer, badge-pulse, pulse-beta,
   pulse-favorites), glassmorphism utilities, button variants (.btn-neon),
   visibility utilities (.desktop-only, .mobile-only), nav badges,
   promo/coupon badges, section header dropdown, .sr-only.
   Rotação de imagens de anúncio movida para components/ads.css.
   ======================================== */

/* Lazy-load and scroll reveal utilities. */
.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);
}

.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);
}

.scroll-delay--zero { transition-delay: 0s; }
.scroll-delay--one-hundred { transition-delay: 0.1s; }
.scroll-delay--two-hundred { transition-delay: 0.2s; }
.scroll-delay--three-hundred { transition-delay: 0.3s; }
.scroll-delay--four-hundred { transition-delay: 0.4s; }
.scroll-delay--five-hundred { transition-delay: 0.5s; }

.nav-link-shorts {
  color: var(--color-primary-strong);
  font-weight: 700;
}

.nav-link-shorts.active::after {
  background: var(--color-primary-strong);
}

/* ========================================
   HOME - Shorts Promotional Banner
   ======================================== */

/* Mobile responsive navigation */

.base-shell__initially-hidden {
  display: none;
}

.base-shell__full-width-action {
  width: 100%;
  justify-content: center;
}

.base-shell__selection-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.base-shell__lang-btn-mobile-text-panel-interactive {
  font-size: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
}

.base-shell__lang-selector-mobile-flex-layout {
  display: flex;
  gap: 8px;
}

.base-shell__theme-toggle-accent-media-flex {
  background: var(--bg-surface);
  padding: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.base-shell__mobile-preferences-flex-panel-layout {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  justify-content: space-between;
}

@media (width <= 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-grid-2col {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .mobile-grid-1col {
    grid-template-columns: 1fr;
  }

  .mobile-stack {
    flex-direction: column;
    gap: 12px;
  }

  .mobile-hide {
    display: none;
  }

  .mobile-form input,
  .mobile-form select,
  .mobile-form textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .mobile-form .form-row {
    flex-direction: column;
    gap: 12px;
  }

  .mobile-form button[type="submit"] {
    width: 100%;
  }

  .mobile-container {
    padding: 12px;
  }

  .mobile-card {
    padding: 12px;
    margin: 0;
  }

  .mobile-text-sm {
    font-size: 14px;
  }

  .mobile-text-center {
    text-align: center;
  }
}

@media (width >= 769px) {
  .mobile-only {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .global-header .nav-toggle-tools.mobile-only,
  .global-header .nav-toggle-avatar.mobile-only,
  #tools-mobile-menu.mobile-only,
  [data-mobile-auth-drawer].mobile-only {
    display: flex;
  }

  .global-header .search-toggle-mobile.mobile-only,
  .bottom-nav.mobile-only {
    display: none;
  }
}

/* ==========================================
   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 rgb(255 107 53 / 30%);
  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 (width <= 768px) {
  .beta-badge {
    font-size: 0;
    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);
  }
}

/* ========================================
   ✨ 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);
  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;
}

.mobile-only {
  display: none;
}

@media (width <= 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: flex;
  }
}

/* ========================================
   🏷️ 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 rgb(0 0 0 / 20%);
}

/* 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 rgb(255 215 0 / 60%), 0 0 20px rgb(255 215 0 / 40%);
}

/* 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 rgb(0 255 127 / 60%), 0 0 20px rgb(0 255 127 / 40%);
}

/* Animação de pulsação mais intensa */
@keyframes badge-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgb(255 255 255 / 20%);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgb(255 255 255 / 40%);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgb(255 255 255 / 20%);
  }
}

/* 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 */
[id="english-videos"] .section-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 16px;
  align-items: start;
}

/* Dropdown na seção */
.section-link-dropdown {
  position: relative;
  display: inline-block;
}

[id="english-videos"] .section-header .section-title {
  grid-column: 1;
  grid-row: 1;
}

[id="english-videos"] .section-header .section-description {
  grid-column: 1;
  grid-row: 2;
}

[id="english-videos"] .section-header .section-link-dropdown {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

.section-link-dropdown .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgb(255 255 255 / 85%);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 20px;
  padding: 0.5rem 1rem;
  transition: background 0.2s, border-color 0.2s;
}

.section-link-dropdown .dropdown-toggle:hover {
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 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 rgb(99 102 241 / 30%);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 50%), 0 0 0 1px rgb(255 255 255 / 5%);
  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, rgb(99 102 241 / 20%), rgb(99 102 241 / 10%));
  color: #a5b4fc;
}

.section-dropdown-divider {
  height: 1px;
  background: rgb(99 102 241 / 20%);
  margin: 0.5rem 1rem;
}

/* 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;
}

/* === Utility helpers (from video-page.css) === */
.text-muted {
  color: var(--muted);
}

.flex {
  display: flex;
}

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

[hidden] {
  display: none;
}

.hidden {
  display: none;
}

.is-initially-hidden {
  display: none;
}

/* === Empty State === */
.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;
}

/* ===== LAZY LOADING (from lazy-loading.js) ===== */
.lazy-image {
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

.lazy-image.lazy-loaded {
    opacity: 1;
}

.lazy-iframe {
    background: var(--card-bg, #1a1a2e);
}

.lazy-error {
    filter: grayscale(1);
    opacity: 0.5;
}

/* Skeleton loading para imagens */
.lazy-image:not(.lazy-loaded) {
    background: linear-gradient(
        90deg,
        var(--card-bg, #1a1a2e) 25%,
        var(--card-hover, #252541) 50%,
        var(--card-bg, #1a1a2e) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

/* ===== CLIPBOARD FALLBACK (from event-delegation.js) ===== */
.clipboard-fallback {
    top: 0;
    left: 0;
    position: fixed;
    opacity: 0;
}

/* ===== VISIBILITY UTILITIES ===== */
.is-visible {
    opacity: 1;
}

.is-faded {
    opacity: 0.3;
}

.is-scroll-btn-active {
    opacity: 0.7;
}

.is-disabled {
    pointer-events: none;
}

.is-dimmed {
    opacity: 0.3;
}

.is-half-dimmed {
    opacity: 0.5;
}

.is-paused {
    animation-play-state: paused;
}

.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease;
}
}


/* === css/components/toast.css === */
@layer components {
/* ========================================
   🔔 Cosplay Orbit Toast System
   Design: Neon Glassmorphism
   A11y: High Contrast + Animations
   ======================================== */

.toast-container {
    position: fixed;
    z-index: 9999; /* Highest layer, above modals (1050) and tooltips (1070) */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Allow clicking through container area */

    /* Padding to avoid edge clamping */
    padding: 20px;

    /* Respect reduced motion preference handled in animation definition */

    /* 🖥️ Desktop Positioning (Default) */
    top: 20px;
    right: 20px;
    align-items: flex-end; /* Stack to the right */
}

/* 📱 Mobile Positioning */
@media (width <= 768px) {
    .toast-container {
        top: auto;
        bottom: 20px; /* Thumb-friendly zone */
        right: 50%;
        transform: translateX(50%); /* Center horizontally */
        align-items: center;
        width: 100%;
        max-width: 400px; /* Prevent full width stretch on larger mobiles */
    }
}

/* 🍞 Toast Item */
.cosplay-toast {
    position: relative;
    pointer-events: auto; /* Re-enable clicks on the toast itself */
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 400px;
    padding: 16px;
    border-radius: var(--radius-md, 12px);
    
    /* Glassmorphism Base */
    background: rgb(17 16 24 / 85%); /* Fallback / Darker for contrast */
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
    border: 1px solid rgb(255 255 255 / 10%);
    color: var(--text-primary, #fff);
    font-family: var(--font-sans, sans-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    
    /* Animation Initial State */
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (width <= 768px) {
    .cosplay-toast {
        transform: translateY(20px); /* Slide up on mobile */
        width: 90%; /* Better fit on small screens */
        min-width: auto;
    }
}

/* ✨ Animation Active State */
.cosplay-toast.show {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

.cosplay-toast.hide {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

/* 🎨 Variations (Neon Accents) */
.cosplay-toast[data-type="success"] {
    border-left: 4px solid #10b981; /* Emerald 500 */
    background: linear-gradient(90deg, rgb(16 185 129 / 10%) 0%, rgb(17 16 24 / 90%) 100%);
}

.cosplay-toast[data-type="error"] {
    border-left: 4px solid #ef4444; /* Red 500 */
    background: linear-gradient(90deg, rgb(239 68 68 / 10%) 0%, rgb(17 16 24 / 90%) 100%);
}

.cosplay-toast[data-type="warning"] {
    border-left: 4px solid #f59e0b; /* Amber 500 */
    background: linear-gradient(90deg, rgb(245 158 11 / 10%) 0%, rgb(17 16 24 / 90%) 100%);
}

.cosplay-toast[data-type="info"] {
    border-left: 4px solid #3b82f6; /* Blue 500 */
    background: linear-gradient(90deg, rgb(59 130 246 / 10%) 0%, rgb(17 16 24 / 90%) 100%);
}

/* 🖼️ Toast Content */
.toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon Colors matched to borders */
.cosplay-toast[data-type="success"] .toast-icon { color: #10b981; }
.cosplay-toast[data-type="error"] .toast-icon { color: #ef4444; }
.cosplay-toast[data-type="warning"] .toast-icon { color: #f59e0b; }
.cosplay-toast[data-type="info"] .toast-icon { color: #3b82f6; }

.toast-message {
    flex-grow: 1;
    word-break: break-word; /* Prevent overflow on long errors */
}

/* ❌ Close Button */
.toast-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: rgb(255 255 255 / 50%);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    background: rgb(255 255 255 / 10%);
    color: white;
}

/* 🎢 Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .cosplay-toast {
        transition: opacity 0.3s;
        transform: none;
    }
}
}


/* === css/components/footer.css === */
@layer components {
/* ============================================
   FOOTER COMPLETO - Cosplay Orbit (Visual 2.0 Refined)
   ============================================ */

.site-footer.neo-footer {
  /* Gradiente mais suave e escuro e menos saturado */
  background: radial-gradient(circle at top right, #250b36 0%, #11091f 40%, #0a0a0f 100%);
  border-top: 1px solid rgb(255 255 255 / 3%);
  padding: 16px 0 10px;
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 -5px 20px rgb(0 0 0 / 40%);

  /* Sombra mais contida */
}

.site-footer .footer-container {
  max-width: 1440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Efeito de brilho superior sutil - Opacidade Reduzida */
.site-footer.neo-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgb(0 243 255 / 30%) 20%,
      /* Opacidade reduzida de 0.5 para 0.3 */
      rgb(255 0 255 / 30%) 80%,
      transparent 100%);
  opacity: 0.6;

  /* Opacidade geral reduzida */
}

/* Brilho decorativo de fundo - Mais discreto */
.site-footer.neo-footer::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgb(168 85 247 / 4%) 0%, transparent 70%);

  /* Opacidade bem baixa (0.04) */
  pointer-events: none;
  z-index: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;

  /* Brand maior */
  gap: 1.25rem;
  position: relative;
  z-index: 1;

  /* Ficar acima do background decorativo */
}

.footer-column {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
}

/* --- BRAND COLUMN --- */
.footer-brand {
  padding-right: 1.5rem;
}

.footer-logo {
  font-family: Outfit, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #f0f0f5;

  /* Off-white em vez de branco puro */
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: inline-block;
  letter-spacing: -0.01em;

  /* Shadow muito mais suave */
  text-shadow: 0 0 10px rgb(0 243 255 / 15%);
}

.footer-logo span {
  color: #00d2de;

  /* Ciano um pouco menos saturado (Teal/Cyan) */
}

.footer-tagline {
  color: rgb(255 255 255 / 60%);

  /* Texto mais apagado */
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  max-width: 320px;
}

.footer-stats {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgb(255 255 255 / 3%);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 8%);
  color: #8f8f9e;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.footer-stats:hover {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(0 243 255 / 20%);
  color: #e0e0e0;
}

/* --- TITLES --- */
.footer-title {
  font-size: 1rem;
  font-weight: 700;

  /* Peso reduzido de 800 para 700 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #00d2de;

  /* Ciano menos agressivo */
  margin: 0 0 0.75rem;
  text-shadow: 0 0 8px rgb(0 243 255 / 20%);

  /* Shadow reduzido */
}

/* --- LINKS --- */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-affiliate-notice a {
  color: #00d2de;
  text-decoration: none;
  margin-left: 0.25rem;
  transition: opacity 0.2s ease;
}

.footer-links li a {
  color: #d1d1d6;

  /* Cinza claro, menos contraste que #e2e2e5 */
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-links li a .footer-icon {
  width: 18px;
  height: 18px;
  color: #00d2de;

  /* Ciano menos intenso */
  opacity: 0.7;
  transition: all 0.2s ease;
}

.footer-affiliate-notice a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.footer-links li a:hover {
  color: #fff;
  transform: translateX(4px);

  /* Remover ou reduzir drasticamente o text-shadow no hover */
  text-shadow: 0 0 5px rgb(255 255 255 / 30%);
}

.footer-links li a:hover .footer-icon {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgb(0 243 255 / 40%));
}

/* --- COPYRIGHT BAR --- */
.footer-bottom {
  margin-top: 8px;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(0 243 255 / 10%);

  /* Linha mais discreta */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.footer-copyright {
  color: #00d2de;
  font-size: 0.9rem;
  opacity: 0.7;

  /* Mais transparente */
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.02em;
}

.footer-affiliate-notice {
  color: rgb(255 255 255 / 50%);
  font-size: 0.8rem;
  text-align: center;
  margin-top: 0.5rem;
}

/* --- RESPONSIVE --- */
@media (width <= 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 3rem;
  }

  .footer-brand {
    grid-column: span 3;
    text-align: center;
    padding-right: 0;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-tagline {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (width <= 600px) {
  .site-footer.neo-footer {
    padding: 2.5rem 0 1.5rem;
    text-align: center;

    /* Centralizar tudo no mobile pra ficar mais bonito */
  }

  .footer-grid {
    grid-template-columns: 1fr;

    /* Uma coluna só */
    gap: 2.5rem;
  }

  .footer-brand {
    grid-column: span 1;
    border-bottom: 1px solid rgb(255 255 255 / 5%);
    padding-bottom: 2rem;
    margin-bottom: 0;
  }

  .footer-column {
    align-items: center;

    /* Centralizar itens */
  }

  .footer-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  .footer-links {
    align-items: center;
    gap: 1rem;
  }

  /* Aumentar área de toque no mobile */
  .footer-links li a {
    padding: 4px 0;
    font-size: 1rem;
  }
}

/* Dropdown divider override para manter consistência */
.dropdown-divider {
  height: 1px;
  background: rgb(255 255 255 / 10%);
  margin: 0.5rem 0;
}

/* --- Light Mode Overrides (migrado de theme-light.css) --- */
.light-mode .neo-footer {
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.light-mode .neo-footer strong {
  color: var(--neon-pink);
}
}