/* ===== FONTES ===== */
@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Black+Ops+One&family=Fredoka:wght@600;700&family=Fredoka+One&family=Lilita+One&family=Nunito:wght@400;600;700;800;900&family=Poppins:wght@400;500;600;700&family=Righteous:wght@400;700&family=Audiowide&display=swap");

/* ===== VARIÁVEIS PRINCIPAIS + TODOS OS TEMAS ===== */
:root {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* Reduzir saltos de layout e suavizar carregamento */
* {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.15s ease,
    box-shadow 0.2s ease;
}   

/*
 * PERFORMANCE (perfil.html): Os cards de inventário e compras acumulam múltiplas animações CSS
 * simultaneamente (border-glow, gradient-shift, rotate, chromatic-shine) + a transition global
 * de background-color/border-color que re-dooispara em cada frame do --ckkhromatic-hue.
 * Suprimir transitions de layout nesses cards específicos garante FPS sem afetar mais nada.
 */
.theme-cromatico,
.theme-cromatico *,
.theme-cromatico *::before,
.theme-cromatico *::after {
  transition:
    transform 0.2s ease,
    opacity 0.2s ease !important;
}

/* GPU Acceleration para elementos com animações frequentes */
.cartoon-pill,
.episode-card,
.manga-item,
.catalog-item,
.purchased-card,
.avatar-aura-wrap,
.user-nav-avatar-box {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
}

/* Suavizar entrada de conteúdo */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(-1px);
  }
}

.main-content,
.items-grid>*,
.catalog-grid>*,
.anime-list-grid>*,
.cartoon-list-grid>*,
.section-title,
.loja-hero {
  animation: fadeInSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Auras da Loja SenseiMod */
/* ===== MYSTICAL AURAS (CLASSIFIED BY RARITY/PRICE) ===== */

/* [AURA STYLES] - All aura effects use ::before/::after pseudo-elements defined below */
/* Direct box-shadow styles removed to prevent conflicts with pseudo-element approach */

@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes aura-legendary-rotate {
  to {
    --a: 360deg;
  }
}

/* Shared Animations */
@keyframes aura-simple-pulse {
  from {
    opacity: 0.75;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes aura-medium-pulse {
  from {
    box-shadow: 0 0 12px currentColor;
    transform: scale(0.98);
  }

  to {
    box-shadow:
      0 0 25px currentColor,
      0 0 40px currentColor;
    transform: scale(1.03);
  }
}

@keyframes aura-electric-pulse {

  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }

  50% {
    opacity: 0.85;
    filter: brightness(1.3);
  }
}

@keyframes aura-epic-pulse {
  from {
    transform: scale(0.98);
    filter: hue-rotate(0deg);
  }

  to {
    transform: scale(1.03);
    filter: hue-rotate(10deg);
  }
}

@keyframes aura-void-pulse {
  0% {
    box-shadow: 0 0 20px #fff;
  }

  50% {
    box-shadow:
      0 0 40px #fff,
      0 0 70px rgba(255, 255, 255, 0.4);
  }

  100% {
    box-shadow: 0 0 20px #fff;
  }
}

@keyframes aura-stands-pulse {
  0% {
    box-shadow:
      0 0 20px #ffffff,
      0 0 40px #9b59b6,
      0 0 15px rgba(255, 255, 255, 0.8);
  }

  50% {
    box-shadow:
      0 0 30px #ffffff,
      0 0 60px #8e44ad,
      0 0 25px rgba(255, 255, 255, 1);
  }

  100% {
    box-shadow:
      0 0 25px #ffffff,
      0 0 50px #9b59b6,
      0 0 20px rgba(255, 255, 255, 0.9);
  }
}

/* ===================================== */
/* ===== AURA FX (NON-UI BLOCKING) ===== */
/* ===================================== */

.avatar-aura-wrap,
.user-nav-avatar-box {
  position: relative;
  border-radius: 50%;
  overflow: visible;
}

.avatar-aura-wrap::before,
.avatar-aura-wrap::after,
.user-nav-avatar-box::before,
.user-nav-avatar-box::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translateZ(0) scale(0.98);
  filter: blur(10px);
  transition:
    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.avatar-aura-wrap>img,
.user-nav-avatar-box>img {
  position: relative;
  z-index: 2;
}

.avatar-aura-wrap[class*="aura"],
.avatar-aura-wrap[class*="avatar-aura"],
.avatar-aura-wrap[class*="aura_"],
.user-nav-avatar-box[class*="aura"],
.user-nav-avatar-box[class*="avatar-aura"],
.user-nav-avatar-box[class*="aura_"] {
  isolation: isolate;
}

.avatar-aura-wrap[class*="aura"]::before,
.avatar-aura-wrap[class*="aura"]::after,
.avatar-aura-wrap[class*="avatar-aura"]::before,
.avatar-aura-wrap[class*="avatar-aura"]::after,
.avatar-aura-wrap[class*="aura_"]::before,
.avatar-aura-wrap[class*="aura_"]::after,
.user-nav-avatar-box[class*="aura"]::before,
.user-nav-avatar-box[class*="aura"]::after,
.user-nav-avatar-box[class*="avatar-aura"]::before,
.user-nav-avatar-box[class*="avatar-aura"]::after,
.user-nav-avatar-box[class*="aura_"]::before,
.user-nav-avatar-box[class*="aura_"]::after {
  opacity: 1;
  transform: scale(1);
}

@keyframes aura-fx-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Global auras (perfil + navbar) */

/* === AURA FIRE (Level 50) === */
.avatar-aura-wrap.avatar-aura-fire::before,
.user-nav-avatar-box.avatar-aura-fire::before {
  background:
    radial-gradient(circle at 50% 70%,
      rgba(255, 60, 0, 0.85) 0%,
      rgba(255, 120, 0, 0.65) 28%,
      rgba(255, 30, 0, 0.35) 55%,
      transparent 78%),
    radial-gradient(circle at 35% 30%,
      rgba(255, 230, 0, 0.7) 0%,
      rgba(255, 140, 0, 0.45) 38%,
      transparent 68%),
    radial-gradient(circle at 70% 35%,
      rgba(255, 80, 0, 0.55) 0%,
      transparent 55%);
  filter: blur(9px);
  animation: aura-fire-flicker 2s ease-in-out infinite alternate;
}

.avatar-aura-wrap.avatar-aura-fire::after,
.user-nav-avatar-box.avatar-aura-fire::after {
  inset: -13px;
  filter: blur(14px);
  background: conic-gradient(from 195deg,
      rgba(255, 230, 0, 0.9),
      rgba(255, 110, 0, 0.8),
      rgba(255, 30, 0, 0.7),
      rgba(255, 80, 0, 0.75),
      rgba(255, 230, 0, 0.9));
  animation: aura-fx-rotate 2.8s linear infinite;
  opacity: 0.95;
}

@keyframes aura-fire-flicker {
  0%   { opacity: 0.85; filter: blur(8px) brightness(1);   }
  33%  { opacity: 1;    filter: blur(10px) brightness(1.15); }
  66%  { opacity: 0.9;  filter: blur(9px) brightness(1.05);  }
  100% { opacity: 1;    filter: blur(11px) brightness(1.2);  }
}

/* === AURA GUARDIAN (Level 75) === */
.avatar-aura-wrap.avatar-aura-guardian::before,
.user-nav-avatar-box.avatar-aura-guardian::before {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0, 240, 255, 0.8) 0%,
      rgba(0, 180, 255, 0.55) 35%,
      rgba(30, 100, 255, 0.3) 60%,
      transparent 80%),
    radial-gradient(circle at 25% 25%,
      rgba(100, 220, 255, 0.6) 0%,
      rgba(0, 160, 255, 0.38) 35%,
      transparent 65%),
    radial-gradient(circle at 75% 75%,
      rgba(0, 255, 220, 0.5) 0%,
      transparent 55%);
  filter: blur(9px);
  animation: aura-guardian-breathe 3s ease-in-out infinite alternate;
}

.avatar-aura-wrap.avatar-aura-guardian::after,
.user-nav-avatar-box.avatar-aura-guardian::after {
  inset: -12px;
  filter: blur(14px);
  background: conic-gradient(from 150deg,
      rgba(0, 255, 255, 0.9),
      rgba(0, 180, 255, 0.75),
      rgba(0, 80, 255, 0.6),
      rgba(0, 200, 255, 0.8),
      rgba(0, 255, 255, 0.9));
  animation: aura-fx-rotate 3.8s linear infinite;
  opacity: 0.92;
}

@keyframes aura-guardian-breathe {
  0%   { opacity: 0.8;  filter: blur(8px) brightness(1);   }
  100% { opacity: 1;    filter: blur(10px) brightness(1.18); }
}

/* === AURA IMMORTAL (Level 100) === */
.avatar-aura-wrap.avatar-aura-immortal::before,
.user-nav-avatar-box.avatar-aura-immortal::before {
  background:
    radial-gradient(circle at 45% 55%,
      rgba(240, 100, 255, 0.85) 0%,
      rgba(170, 0, 255, 0.62) 35%,
      rgba(120, 0, 220, 0.35) 58%,
      transparent 78%),
    radial-gradient(circle at 72% 28%,
      rgba(255, 50, 255, 0.65) 0%,
      rgba(200, 0, 255, 0.42) 38%,
      transparent 68%),
    radial-gradient(circle at 20% 70%,
      rgba(180, 0, 255, 0.5) 0%,
      transparent 55%);
  filter: blur(9px);
  animation: aura-immortal-surge 2.5s ease-in-out infinite alternate;
}

.avatar-aura-wrap.avatar-aura-immortal::after,
.user-nav-avatar-box.avatar-aura-immortal::after {
  inset: -13px;
  filter: blur(15px);
  background: conic-gradient(from 170deg,
      rgba(255, 50, 255, 0.9),
      rgba(200, 0, 255, 0.8),
      rgba(150, 0, 255, 0.7),
      rgba(255, 0, 200, 0.8),
      rgba(255, 50, 255, 0.9));
  animation: aura-fx-rotate 3.2s linear infinite;
  opacity: 0.95;
}

@keyframes aura-immortal-surge {
  0%   { opacity: 0.82; filter: blur(8px) brightness(1) hue-rotate(0deg);   }
  100% { opacity: 1;    filter: blur(11px) brightness(1.2) hue-rotate(15deg); }
}

/* Loja / cosméticos (compatível com classes atuais) */

/* === AURA CHAMA SIMPLES (Common) === */
.avatar-aura-wrap.aura-common-chama::before,
.avatar-aura-wrap.aura_chama::before,
.user-nav-avatar-box.aura-common-chama::before,
.user-nav-avatar-box.aura_chama::before {
  background:
    radial-gradient(ellipse at 50% 70%,
      rgba(255, 80, 0, 0.82) 0%,
      rgba(255, 140, 0, 0.6) 30%,
      rgba(255, 40, 0, 0.32) 55%,
      transparent 76%),
    radial-gradient(ellipse at 40% 30%,
      rgba(255, 210, 0, 0.65) 0%,
      rgba(255, 100, 0, 0.42) 40%,
      transparent 70%);
  filter: blur(8px);
  animation: aura-chama-flicker 1.8s ease-in-out infinite alternate;
}

.avatar-aura-wrap.aura-common-chama::after,
.avatar-aura-wrap.aura_chama::after,
.user-nav-avatar-box.aura-common-chama::after,
.user-nav-avatar-box.aura_chama::after {
  inset: -11px;
  filter: blur(13px);
  background: conic-gradient(from 0deg,
      rgba(255, 200, 0, 0.88),
      rgba(255, 90, 0, 0.78),
      rgba(255, 30, 0, 0.7),
      rgba(255, 140, 0, 0.8),
      rgba(255, 200, 0, 0.88));
  animation: aura-fx-rotate 3.5s linear infinite;
  opacity: 0.95;
}

@keyframes aura-chama-flicker {
  0%   { opacity: 0.82; transform: scale(0.98) translateY(1px);  }
  50%  { opacity: 1;    transform: scale(1.02) translateY(-1px); }
  100% { opacity: 0.9;  transform: scale(1.0)  translateY(0px);  }
}

/* === AURA MODO SÁBIO / NARUTO (Common) === */
.avatar-aura-wrap.aura-common-naruto::before,
.avatar-aura-wrap.aura_chama_naruto::before,
.user-nav-avatar-box.aura-common-naruto::before,
.user-nav-avatar-box.aura_chama_naruto::before {
  background:
    radial-gradient(circle at 50% 55%,
      rgba(255, 210, 0, 0.85) 0%,
      rgba(255, 180, 0, 0.62) 30%,
      rgba(230, 140, 0, 0.35) 55%,
      transparent 76%),
    radial-gradient(circle at 65% 35%,
      rgba(255, 240, 80, 0.65) 0%,
      rgba(255, 200, 0, 0.4) 40%,
      transparent 70%),
    radial-gradient(circle at 25% 65%,
      rgba(255, 160, 0, 0.5) 0%,
      transparent 55%);
  filter: blur(8px);
  animation: aura-sage-pulse 2.4s ease-in-out infinite alternate;
}

.avatar-aura-wrap.aura-common-naruto::after,
.avatar-aura-wrap.aura_chama_naruto::after,
.user-nav-avatar-box.aura-common-naruto::after,
.user-nav-avatar-box.aura_chama_naruto::after {
  inset: -11px;
  filter: blur(13px);
  background: conic-gradient(from 90deg,
      rgba(255, 240, 0, 0.92),
      rgba(255, 210, 0, 0.8),
      rgba(255, 160, 0, 0.72),
      rgba(255, 230, 0, 0.85),
      rgba(255, 240, 0, 0.92));
  animation: aura-fx-rotate 3.8s linear infinite;
  opacity: 0.95;
}

@keyframes aura-sage-pulse {
  0%   { opacity: 0.8;  filter: blur(7px)  brightness(1);    }
  100% { opacity: 1;    filter: blur(10px) brightness(1.22); }
}

/* === AURA DO CEIFADOR (Rare) === */
.avatar-aura-wrap.aura-rare-ceifador::before,
.avatar-aura-wrap.aura_ceifador::before,
.user-nav-avatar-box.aura-rare-ceifador::before,
.user-nav-avatar-box.aura_ceifador::before {
  background:
    radial-gradient(circle at 50% 55%,
      rgba(10, 0, 30, 0.95) 0%,
      rgba(80, 0, 160, 0.7) 30%,
      rgba(150, 0, 255, 0.45) 55%,
      transparent 76%),
    radial-gradient(circle at 30% 30%,
      rgba(60, 0, 120, 0.65) 0%,
      transparent 60%),
    radial-gradient(circle at 70% 70%,
      rgba(100, 0, 200, 0.5) 0%,
      transparent 55%);
  filter: blur(9px);
  animation: aura-ceifador-pulse 3s ease-in-out infinite alternate;
}

.avatar-aura-wrap.aura-rare-ceifador::after,
.avatar-aura-wrap.aura_ceifador::after,
.user-nav-avatar-box.aura-rare-ceifador::after,
.user-nav-avatar-box.aura_ceifador::after {
  inset: -11px;
  filter: blur(14px);
  background: conic-gradient(from 60deg,
      rgba(100, 0, 200, 0.9),
      rgba(20, 0, 60, 0.95),
      rgba(160, 0, 255, 0.85),
      rgba(40, 0, 100, 0.9),
      rgba(100, 0, 200, 0.9));
  animation: aura-fx-rotate 5.5s linear infinite;
  opacity: 0.95;
}

@keyframes aura-ceifador-pulse {
  0%   { opacity: 0.75; filter: blur(8px)  brightness(0.9); }
  50%  { opacity: 1;    filter: blur(11px) brightness(1.3); }
  100% { opacity: 0.8;  filter: blur(9px)  brightness(1.0); }
}

/* === AURA RELÂMPAGO / THUNDER (Rare) === */
.avatar-aura-wrap.aura-rare-thunder::before,
.avatar-aura-wrap.aura_thunder::before,
.user-nav-avatar-box.aura-rare-thunder::before,
.user-nav-avatar-box.aura_thunder::before {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(80, 220, 255, 0.7) 25%,
      rgba(0, 160, 255, 0.45) 50%,
      transparent 75%),
    radial-gradient(circle at 30% 25%,
      rgba(180, 240, 255, 0.65) 0%,
      rgba(0, 200, 255, 0.4) 35%,
      transparent 65%),
    radial-gradient(circle at 70% 75%,
      rgba(100, 210, 255, 0.55) 0%,
      transparent 55%);
  filter: blur(8px);
  animation: aura-thunder-zap 0.9s ease-in-out infinite alternate;
}

.avatar-aura-wrap.aura-rare-thunder::after,
.avatar-aura-wrap.aura_thunder::after,
.user-nav-avatar-box.aura-rare-thunder::after,
.user-nav-avatar-box.aura_thunder::after {
  inset: -13px;
  filter: blur(14px);
  background: conic-gradient(from 20deg,
      rgba(255, 255, 255, 0.95),
      rgba(120, 230, 255, 0.82),
      rgba(0, 180, 255, 0.72),
      rgba(180, 240, 255, 0.85),
      rgba(255, 255, 255, 0.95));
  animation: aura-fx-rotate 4s linear infinite;
  opacity: 0.95;
}

@keyframes aura-thunder-zap {
  0%   { opacity: 0.8;  filter: blur(7px)  brightness(1);    }
  40%  { opacity: 1;    filter: blur(12px) brightness(1.5);  }
  60%  { opacity: 0.85; filter: blur(8px)  brightness(1.1);  }
  100% { opacity: 1;    filter: blur(11px) brightness(1.35); }
}

/* === AURA SUSANOO (Rare) === */
.avatar-aura-wrap.aura-rare-susanoo::before,
.avatar-aura-wrap.aura_susanoo::before,
.avatar-aura-wrap.avatar-aura-susanoo::before,
.user-nav-avatar-box.aura-rare-susanoo::before,
.user-nav-avatar-box.aura_susanoo::before,
.user-nav-avatar-box.avatar-aura-susanoo::before {
  background:
    radial-gradient(circle at 50% 55%,
      rgba(0, 180, 255, 0.85) 0%,
      rgba(0, 100, 220, 0.62) 30%,
      rgba(60, 0, 180, 0.38) 56%,
      transparent 76%),
    radial-gradient(circle at 25% 30%,
      rgba(0, 200, 240, 0.6) 0%,
      rgba(40, 0, 200, 0.38) 38%,
      transparent 65%),
    radial-gradient(circle at 75% 70%,
      rgba(100, 0, 200, 0.5) 0%,
      transparent 55%);
  filter: blur(9px);
  animation: aura-susanoo-flare 2.8s ease-in-out infinite alternate;
}

.avatar-aura-wrap.aura-rare-susanoo::after,
.avatar-aura-wrap.aura_susanoo::after,
.avatar-aura-wrap.avatar-aura-susanoo::after,
.user-nav-avatar-box.aura-rare-susanoo::after,
.user-nav-avatar-box.aura_susanoo::after,
.user-nav-avatar-box.avatar-aura-susanoo::after {
  inset: -11px;
  filter: blur(15px);
  background: conic-gradient(from 30deg,
      rgba(0, 200, 255, 0.9),
      rgba(60, 0, 220, 0.85),
      rgba(0, 120, 255, 0.8),
      rgba(80, 0, 200, 0.85),
      rgba(0, 200, 255, 0.9));
  animation: aura-fx-rotate 4.5s linear infinite;
  opacity: 0.95;
}

@keyframes aura-susanoo-flare {
  0%   { opacity: 0.78; filter: blur(8px)  brightness(1) hue-rotate(0deg);   }
  100% { opacity: 1;    filter: blur(11px) brightness(1.2) hue-rotate(12deg); }
}

/* === AURA SAKURA (Rare) === */
.avatar-aura-wrap.aura-rare-sakura::before,
.avatar-aura-wrap.aura_sakura::before,
.user-nav-avatar-box.aura-rare-sakura::before,
.user-nav-avatar-box.aura_sakura::before {
  background:
    radial-gradient(circle at 50% 55%,
      rgba(255, 160, 200, 0.88) 0%,
      rgba(255, 120, 170, 0.65) 30%,
      rgba(255, 180, 215, 0.38) 55%,
      transparent 76%),
    radial-gradient(circle at 70% 30%,
      rgba(255, 200, 220, 0.65) 0%,
      rgba(255, 140, 180, 0.42) 38%,
      transparent 68%),
    radial-gradient(circle at 25% 70%,
      rgba(255, 130, 175, 0.5) 0%,
      transparent 55%);
  filter: blur(8px);
  animation: aura-sakura-bloom 3.5s ease-in-out infinite alternate;
}

.avatar-aura-wrap.aura-rare-sakura::after,
.avatar-aura-wrap.aura_sakura::after,
.user-nav-avatar-box.aura-rare-sakura::after,
.user-nav-avatar-box.aura_sakura::after {
  inset: -11px;
  filter: blur(14px);
  background: conic-gradient(from 45deg,
      rgba(255, 180, 210, 0.92),
      rgba(255, 100, 160, 0.82),
      rgba(255, 220, 235, 0.88),
      rgba(255, 140, 185, 0.85),
      rgba(255, 180, 210, 0.92));
  animation: aura-fx-rotate 5s linear infinite;
  opacity: 0.95;
}

@keyframes aura-sakura-bloom {
  0%   { opacity: 0.8;  filter: blur(7px) brightness(1) saturate(1);    }
  100% { opacity: 1;    filter: blur(10px) brightness(1.15) saturate(1.3); }
}

/* === AURA GELO (Epic) === */
.avatar-aura-wrap.aura-epic-gelo::before,
.avatar-aura-wrap.aura_gelo::before,
.user-nav-avatar-box.aura-epic-gelo::before,
.user-nav-avatar-box.aura_gelo::before {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(220, 250, 255, 0.95) 0%,
      rgba(120, 220, 255, 0.72) 28%,
      rgba(60, 180, 255, 0.45) 52%,
      transparent 76%),
    radial-gradient(circle at 20% 20%,
      rgba(200, 245, 255, 0.7) 0%,
      rgba(80, 210, 255, 0.45) 35%,
      transparent 62%),
    radial-gradient(circle at 80% 80%,
      rgba(150, 235, 255, 0.65) 0%,
      rgba(50, 200, 255, 0.38) 35%,
      transparent 62%),
    radial-gradient(circle at 80% 20%,
      rgba(255, 255, 255, 0.55) 0%,
      transparent 45%);
  filter: blur(8px);
  animation: aura-gelo-crystallize 3.5s ease-in-out infinite alternate;
}

.avatar-aura-wrap.aura-epic-gelo::after,
.avatar-aura-wrap.aura_gelo::after,
.user-nav-avatar-box.aura-epic-gelo::after,
.user-nav-avatar-box.aura_gelo::after {
  inset: -16px;
  filter: blur(14px);
  background: conic-gradient(from 30deg,
      rgba(255, 255, 255, 0.95),
      rgba(160, 235, 255, 0.85),
      rgba(80, 200, 255, 0.75),
      rgba(200, 245, 255, 0.88),
      rgba(255, 255, 255, 0.95));
  animation: aura-fx-rotate 4.5s linear infinite;
  opacity: 0.95;
}

@keyframes aura-gelo-crystallize {
  0%   { opacity: 0.82; filter: blur(7px)  brightness(1)    saturate(0.9);  }
  50%  { opacity: 1;    filter: blur(10px) brightness(1.25) saturate(1.2);  }
  100% { opacity: 0.9;  filter: blur(8px)  brightness(1.1)  saturate(1.05); }
}

/* === AURA STAR PLATINUM / STANDS (Epic) === */
.avatar-aura-wrap.aura-epic-stands::before,
.avatar-aura-wrap.aura_stands::before,
.avatar-aura-wrap.avatar-aura-stands::before,
.user-nav-avatar-box.aura-epic-stands::before,
.user-nav-avatar-box.aura_stands::before,
.user-nav-avatar-box.avatar-aura-stands::before {
  background:
    radial-gradient(circle at 50% 55%,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(200, 130, 255, 0.65) 28%,
      rgba(160, 80, 220, 0.4) 52%,
      transparent 76%),
    radial-gradient(circle at 30% 30%,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(200, 100, 255, 0.42) 35%,
      transparent 65%),
    radial-gradient(circle at 70% 70%,
      rgba(180, 80, 240, 0.55) 0%,
      rgba(140, 60, 200, 0.35) 35%,
      transparent 60%),
    radial-gradient(circle at 70% 25%,
      rgba(220, 160, 255, 0.5) 0%,
      transparent 50%);
  filter: blur(9px);
  animation: aura-stands-shimmer 3s ease-in-out infinite alternate;
}

.avatar-aura-wrap.aura-epic-stands::after,
.avatar-aura-wrap.aura_stands::after,
.avatar-aura-wrap.avatar-aura-stands::after,
.user-nav-avatar-box.aura-epic-stands::after,
.user-nav-avatar-box.aura_stands::after,
.user-nav-avatar-box.avatar-aura-stands::after {
  inset: -13px;
  filter: blur(15px);
  background: conic-gradient(from 90deg,
      rgba(255, 255, 255, 0.95),
      rgba(200, 100, 255, 0.85),
      rgba(150, 60, 230, 0.78),
      rgba(220, 140, 255, 0.88),
      rgba(255, 255, 255, 0.95));
  animation: aura-fx-rotate 4s linear infinite;
  opacity: 0.95;
}

@keyframes aura-stands-shimmer {
  0%   { opacity: 0.8;  filter: blur(8px)  brightness(1)    hue-rotate(0deg);   }
  100% { opacity: 1;    filter: blur(11px) brightness(1.22) hue-rotate(20deg);  }
}

/* === AURA ONE PUNCH / VOID SAITAMA (Epic) === */
.avatar-aura-wrap.aura-epic-void::before,
.avatar-aura-wrap.aura-avatar-void::before,
.avatar-aura-wrap.aura_void_saitama::before,
.avatar-aura-wrap.avatar-aura-void::before,
.user-nav-avatar-box.aura-epic-void::before,
.user-nav-avatar-box.aura-avatar-void::before,
.user-nav-avatar-box.aura_void_saitama::before,
.user-nav-avatar-box.avatar-aura-void::before {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(0, 255, 140, 0.72) 22%,
      rgba(0, 220, 100, 0.5) 42%,
      transparent 72%),
    radial-gradient(circle at 25% 25%,
      rgba(255, 255, 80, 0.75) 0%,
      rgba(230, 255, 0, 0.5) 28%,
      transparent 58%),
    radial-gradient(circle at 75% 75%,
      rgba(0, 255, 200, 0.68) 0%,
      rgba(0, 230, 160, 0.45) 28%,
      transparent 60%),
    radial-gradient(circle at 75% 25%,
      rgba(255, 255, 100, 0.55) 0%,
      transparent 50%),
    conic-gradient(from var(--a, 0deg),
      rgba(0, 255, 140, 0.72),
      rgba(255, 255, 0, 0.65),
      rgba(0, 240, 160, 0.7),
      rgba(180, 255, 0, 0.6),
      rgba(0, 255, 140, 0.72));
  filter: blur(10px);
  animation:
    aura-saitama-rotate 2.5s linear infinite,
    aura-saitama-pulse 1.2s ease-in-out infinite alternate;
  opacity: 0.95;
}

.avatar-aura-wrap.aura-epic-void::after,
.avatar-aura-wrap.aura-avatar-void::after,
.avatar-aura-wrap.aura_void_saitama::after,
.avatar-aura-wrap.avatar-aura-void::after,
.user-nav-avatar-box.aura-epic-void::after,
.user-nav-avatar-box.aura-avatar-void::after,
.user-nav-avatar-box.aura_void_saitama::after,
.user-nav-avatar-box.avatar-aura-void::after {
  inset: -14px;
  filter: blur(16px);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(200, 255, 150, 0.5) 25%,
      transparent 65%),
    radial-gradient(circle at 20% 20%,
      rgba(255, 255, 0, 0.62) 0%,
      rgba(200, 255, 0, 0.4) 22%,
      transparent 52%),
    radial-gradient(circle at 80% 80%,
      rgba(0, 255, 200, 0.6) 0%,
      rgba(0, 230, 170, 0.4) 22%,
      transparent 55%),
    radial-gradient(circle at 80% 20%,
      rgba(180, 255, 80, 0.5) 0%,
      transparent 48%);
  animation: aura-saitama-glow 1.6s ease-in-out infinite alternate;
  opacity: 0.95;
}

@keyframes aura-saitama-rotate {
  from { --a: 0deg; }
  to   { --a: 360deg; }
}

@keyframes aura-saitama-pulse {
  0%   { transform: scale(0.98); opacity: 0.88; filter: brightness(1);    }
  100% { transform: scale(1.04); opacity: 1;    filter: brightness(1.18); }
}

@keyframes aura-saitama-glow {
  0%   { opacity: 0.85; transform: scale(0.98); filter: brightness(1);    }
  100% { opacity: 1;    transform: scale(1.04); filter: brightness(1.22); }
}

/* Animação de explosão de poder do Saitama */
.avatar-aura-wrap.aura_void_saitama .avatar-view-img,
.avatar-aura-wrap.avatar-aura-void .avatar-view-img,
.user-nav-avatar-box.aura_void_saitama img,
.user-nav-avatar-box.avatar-aura-void img {
  animation: saitama-shine 1.8s ease-in-out infinite;
}

@keyframes saitama-shine {
  0%,
  100% { filter: brightness(1)   drop-shadow(0 0 10px rgba(0, 255, 140, 0.6)); }
  50%  { filter: brightness(1.3) drop-shadow(0 0 30px rgba(255, 255, 0, 1));   }
}

.avatar-aura-wrap.aura-legendary-dragon::before,
.avatar-aura-wrap.aura_dragon::before,
.avatar-aura-wrap.avatar-aura-dragon::before,
.user-nav-avatar-box.aura-legendary-dragon::before,
.user-nav-avatar-box.aura_dragon::before,
.user-nav-avatar-box.avatar-aura-dragon::before {
  inset: -14px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.24) 25%,
      transparent 65%),
    conic-gradient(from var(--a, 0deg),
      #ff0000,
      #ff7f00,
      #ffff00,
      #00ff00,
      #00ffff,
      #0080ff,
      #8000ff,
      #ff00ff,
      #ff0000);
  filter: blur(12px);
  animation: aura-legendary-rotate 4s linear infinite;
  opacity: 0.9;
}

.avatar-aura-wrap.aura-legendary-dragon::after,
.avatar-aura-wrap.aura_dragon::after,
.avatar-aura-wrap.avatar-aura-dragon::after,
.user-nav-avatar-box.aura-legendary-dragon::after,
.user-nav-avatar-box.aura_dragon::after,
.user-nav-avatar-box.avatar-aura-dragon::after {
  inset: -11px;
  filter: blur(11px);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.54) 0%,
      rgba(255, 255, 255, 0.32) 30%,
      transparent 72%),
    conic-gradient(from calc(var(--a, 0deg) * -1),
      #ffcccc,
      #ffe6cc,
      #ffffcc,
      #ccffcc,
      #ccffff,
      #ccccff,
      #ffccff,
      #ffcccc);
  animation: aura-legendary-rotate-reverse 3s linear infinite;
  opacity: 0.8;
}

@keyframes aura-legendary-rotate {
  from {
    --a: 0deg;
    transform: rotate(0deg);
  }

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

@keyframes aura-legendary-rotate-reverse {
  from {
    transform: rotate(0deg);
  }

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

@keyframes aura-epic-pulse {
  0% {
    transform: scale(0.98);
    opacity: 0.9;
  }

  100% {
    transform: scale(1.04);
    opacity: 1;
  }
}

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

  .avatar-aura-wrap::before,
  .avatar-aura-wrap::after,
  .user-nav-avatar-box::before,
  .user-nav-avatar-box::after,
  .aura-common-chama,
  .aura_chama,
  .aura-common-naruto,
  .aura_chama_naruto,
  .aura-rare-ceifador,
  .aura_ceifador,
  .aura-rare-thunder,
  .aura_thunder,
  .aura-rare-susanoo,
  .aura_susanoo,
  .aura-rare-sakura,
  .aura_sakura,
  .aura-epic-gelo,
  .aura_gelo,
  .aura-epic-stands,
  .avatar-aura-stands,
  .aura-epic-void,
  .aura-avatar-void,
  .aura_void_saitama,
  .aura-legendary-dragon,
  .aura_dragon,
  .avatar-aura-fire,
  .avatar-aura-guardian,
  .avatar-aura-immortal {
    animation: none !important;
  }
}

/* ===== NOVOS COSMÉTICOS (Banners e Títulos) ===== */
.user-nav-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: rgba(0, 0, 0, 0.05);
  /* Fundo quase transparente para não ofuscar o banner */
  /* Base de contraste leve */
  padding: 2px 6px;
  border-radius: 50px;
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  overflow: visible;
  transition: all 0.4s ease;
  min-width: 175px;
  height: 60px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  isolation: isolate;
  /* Cria um novo contexto de camadas */
}

.user-nav-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Centralização perfeita sugerida pelo usuário */
  background-repeat: no-repeat;
  opacity: 1;
  z-index: -1;
  transition: transform 0.6s ease;
  filter: brightness(1) saturate(1.2);
  clip-path: inset(0 round 50px);
  -webkit-clip-path: inset(0 round 50px);
}

.user-nav-container:hover .user-nav-banner-bg {
  transform: scale(1.1);
  filter: brightness(0.85) contrast(1.2);
}

.user-nav-container:hover {
  border-color: var(--primary);
  box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.6);
}

.user-nav-title {
  position: relative;
  z-index: 2;
  font-family: "Bangers", cursive;
  font-size: 1rem;
  letter-spacing: 1px;
  color: #fff;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(0, 0, 0, 0.7);
  margin-right: auto;
  padding-left: 15px;
  white-space: nowrap;
}

.user-nav-avatar-box {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px;
  overflow: visible;
}

/* Garantir que a imagem do avatar na navbar nunca tenha borda ou sombra indesejada */
#navAvatar,
#displayAvatar {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* O frame-dourado NÃO deve aplicar borda na bolinha da navbar */
.user-nav-avatar-box.frame-dourado {
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Remove any direct box-shadow from avatars when they have aura classes */
.user-nav-avatar-box[class*="aura"],
.user-nav-avatar-box[class*="avatar-aura"],
.user-nav-avatar-box[class*="aura_"],
.avatar-aura-wrap[class*="aura"],
.avatar-aura-wrap[class*="avatar-aura"],
.avatar-aura-wrap[class*="aura_"] {
  box-shadow: none !important;
  border: none !important;
}

:root {
  /* BACKGROUNDS (Padrão para todos) */
  --bg-dark: #050f1f;
  --bg-card: #0a192f;
  --bg-surface: #112240;
  --success: #10b981;
  --danger: #ef4444;
  --radius: 16px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* TEMA DEFAULT - AZUL CLARO MARINHO */
  --default-primary: #72ffff;
  --default-primary-rgb: 114, 255, 255;
  --default-primary-hover: #5ce6e6;
  --default-accent: #7fffd4;
  --default-accent-rgb: 127, 255, 212;
  --default-accent2: #00ced1;
  --default-accent2-rgb: 0, 206, 209;
  --default-text-main: #e0f7fa;
  --default-text-muted: #64b5f6;
  --default-border: var(--default-primary);
  --default-shadow-neon: 0 0 28px rgba(114, 255, 255, 0.6);
  --default-shadow-neon-h:
    0 0 55px rgba(114, 255, 255, 0.8), 0 0 28px rgba(114, 255, 255, 0.5);
  --default-scrollbar: #72ffff;

  /* TEMA - NEON VERDE */
  --ben10-primary: #00ff00;
  --ben10-primary-rgb: 0, 255, 0;
  --ben10-primary-hover: #39ff14;
  --ben10-accent: #adff2f;
  --ben10-accent-rgb: 173, 255, 47;
  --ben10-accent2: #00ff41;
  --ben10-accent2-rgb: 0, 255, 65;
  --ben10-text-main: #f0fff0;
  --ben10-text-muted: #4ade80;
  --ben10-border: #00ff00;
  --ben10-shadow-neon: 0 0 28px rgba(0, 255, 0, 0.6);
  --ben10-shadow-neon-h:
    0 0 55px rgba(0, 255, 0, 0.8), 0 0 28px rgba(0, 255, 0, 0.5);
  --ben10-scrollbar: #00ff00;

  /* TEMA - GOLD (NEON DOMINANTE) */
  --vinland-primary: #f5e200;
  --vinland-primary-rgb: 245, 226, 0;
  --vinland-primary-hover: #fff066;
  --vinland-accent: #fffbd6;
  --vinland-accent-rgb: 255, 251, 214;
  --vinland-accent2: #f0c800;
  --vinland-accent2-rgb: 240, 200, 0;
  --vinland-text-main: #fffef8;
  --vinland-text-muted: #f5e200;
  --vinland-border: #f5e200;
  --vinland-shadow-neon: 0 0 28px rgba(245, 226, 0, 0.6);
  --vinland-shadow-neon-h:
    0 0 55px rgba(245, 226, 0, 0.8), 0 0 28px rgba(245, 226, 0, 0.5);
  --vinland-scrollbar: #f5e200;

  /* TEMA - VERMELHO */
  --aot-primary: #ff0000;
  --aot-primary-rgb: 255, 0, 0;
  --aot-primary-hover: #ff3333;
  --aot-accent: #ffffff;
  --aot-accent-rgb: 255, 255, 255;
  --aot-accent2: #cc0000;
  --aot-accent2-rgb: 204, 0, 0;
  --aot-text-main: #fff5f5;
  --aot-text-muted: #ff5c5c;
  --aot-border: #ff0000;
  --aot-shadow-neon: 0 0 28px rgba(255, 0, 0, 0.6);
  --aot-shadow-neon-h:
    0 0 55px rgba(255, 0, 0, 0.8), 0 0 28px rgba(255, 0, 0, 0.45);
  --aot-scrollbar: #ff0000;

  /* TEMA - ROXO */
  --tt-classic-primary: #a000ff;
  --tt-classic-primary-rgb: 160, 0, 255;
  --tt-classic-primary-hover: #b240ff;
  --tt-classic-accent: #d18cff;
  --tt-classic-accent-rgb: 209, 140, 255;
  --tt-classic-accent2: #7a00db;
  --tt-classic-accent2-rgb: 122, 0, 219;
  --tt-classic-text-main: #f4e8ff;
  --tt-classic-text-muted: #c38cff;
  --tt-classic-border: #a000ff;
  --tt-classic-shadow-neon: 0 0 28px rgba(160, 0, 255, 0.6);
  --tt-classic-shadow-neon-h:
    0 0 55px rgba(160, 0, 255, 0.8), 0 0 28px rgba(160, 0, 255, 0.45);
  --tt-classic-scrollbar: #a000ff;

  /* TEMA - LARANJA */
  --mutant-rex-primary: #ff7a20;
  --mutant-rex-primary-rgb: 255, 122, 32;
  --mutant-rex-primary-hover: #ff8f3d;
  --mutant-rex-accent: #ffc07a;
  --mutant-rex-accent-rgb: 255, 192, 122;
  --mutant-rex-accent2: #ff5a00;
  --mutant-rex-accent2-rgb: 255, 90, 0;
  --mutant-rex-text-main: #fff5e6;
  --mutant-rex-text-muted: #ffc07a;
  --mutant-rex-border: #ff7a20;
  --mutant-rex-shadow-neon: 0 0 28px rgba(255, 122, 32, 0.6);
  --mutant-rex-shadow-neon-h:
    0 0 55px rgba(255, 122, 32, 0.8), 0 0 28px rgba(255, 122, 32, 0.45);
  --mutant-rex-scrollbar: #ff7a20;

  /* TEMA - AZUL CLARO */
  --regular-show-primary: #2979ff;
  --regular-show-primary-rgb: 41, 121, 255;
  --regular-show-primary-hover: #438cff;
  --regular-show-accent: #82b1ff;
  --regular-show-accent-rgb: 130, 177, 255;
  --regular-show-accent2: #1d5fcc;
  --regular-show-accent2-rgb: 29, 95, 204;
  --regular-show-text-main: #e7f0ff;
  --regular-show-text-muted: #a8c8ff;
  --regular-show-border: #2979ff;
  --regular-show-shadow-neon: 0 0 28px rgba(41, 121, 255, 0.65);
  --regular-show-shadow-neon-h:
    0 0 55px rgba(41, 121, 255, 0.85), 0 0 28px rgba(41, 121, 255, 0.5);
  --regular-show-scrollbar: #2979ff;

  /* TEMA - VERDE ESCURO */
  --demon-slayer-primary: #1f6e52;
  --demon-slayer-primary-rgb: 31, 110, 82;
  --demon-slayer-primary-hover: #2b8f67;
  --demon-slayer-accent: #a8f0d3;
  --demon-slayer-accent-rgb: 168, 240, 211;
  --demon-slayer-accent2: #113a2b;
  --demon-slayer-accent2-rgb: 17, 58, 43;
  --demon-slayer-text-main: #eef8f4;
  --demon-slayer-text-muted: #90d8b5;
  --demon-slayer-border: #6fe1ab;
  --demon-slayer-shadow-neon:
    0 0 34px rgba(111, 225, 171, 0.78), 0 0 18px rgba(31, 110, 82, 0.55);
  --demon-slayer-shadow-neon-h:
    0 0 68px rgba(111, 225, 171, 0.96), 0 0 36px rgba(43, 143, 103, 0.82),
    0 0 20px rgba(31, 110, 82, 0.62);
  --demon-slayer-scrollbar: #6fe1ab;

  /* TEMA - BRANCO */
  --vagabond-primary: #ffffff;
  --vagabond-primary-rgb: 255, 255, 255;
  --vagabond-primary-hover: #e0e0e0;
  --vagabond-accent: #c8c8c8;
  --vagabond-accent-rgb: 200, 200, 200;
  --vagabond-accent2: #9e9e9e;
  --vagabond-accent2-rgb: 158, 158, 158;
  --vagabond-text-main: #ffffff;
  --vagabond-text-muted: #bdbdbd;
  --vagabond-border: rgba(255, 255, 255, 0.4);
  --vagabond-shadow-neon: 0 0 28px rgba(255, 255, 255, 0.5);
  --vagabond-shadow-neon-h:
    0 0 55px rgba(255, 255, 255, 0.8), 0 0 28px rgba(255, 255, 255, 0.5);
  --vagabond-scrollbar: #ffffff;

  /* TEMA - AQUA VERDE */
  --aqua-verde-primary: #3ff2a0;
  --aqua-verde-primary-rgb: 63, 242, 160;
  --aqua-verde-primary-hover: #6af6b8;
  --aqua-verde-accent: #cffff0;
  --aqua-verde-accent-rgb: 207, 255, 240;
  --aqua-verde-accent2: #00b07a;
  --aqua-verde-accent2-rgb: 0, 176, 122;
  --aqua-verde-text-main: #eefff8;
  --aqua-verde-text-muted: #7ae3b0;
  --aqua-verde-border: #62f4b4;
  --aqua-verde-shadow-neon:
    0 0 34px rgba(63, 242, 160, 0.82), 0 0 18px rgba(0, 176, 122, 0.58);
  --aqua-verde-shadow-neon-h:
    0 0 68px rgba(98, 244, 180, 0.98), 0 0 34px rgba(63, 242, 160, 0.86),
    0 0 18px rgba(0, 176, 122, 0.64);
  --aqua-verde-scrollbar: #3ff2a0;

  /* TEMA - NATAL */
  --natal-primary: #d42426;
  --natal-primary-rgb: 212, 36, 38;
  --natal-primary-hover: #f03a3d;
  --natal-accent: #165b33;
  --natal-accent-rgb: 22, 91, 51;
  --natal-accent2: #f8b229;
  --natal-accent2-rgb: 248, 178, 41;
  --natal-text-main: #ffffff;
  --natal-text-muted: #ea4630;
  --natal-border: #d42426;
  --natal-shadow-neon: 0 0 28px rgba(212, 36, 38, 0.6);
  --natal-shadow-neon-h:
    0 0 55px rgba(248, 178, 41, 0.8), 0 0 28px rgba(212, 36, 38, 0.5);
  --natal-scrollbar: #d42426;

  /* TEMA - ZENKAI */
  --zenkai-primary: #373efa;
  --zenkai-primary-rgb: 55, 62, 250;
  --zenkai-primary-hover: #6970ff;
  --zenkai-accent: #fb324e;
  --zenkai-accent-rgb: 251, 50, 78;
  --zenkai-accent2: #8b5cf6;
  --zenkai-accent2-rgb: 139, 92, 246;
  --zenkai-text-main: #fff7fa;
  --zenkai-text-muted: #c7c9ef;
  --zenkai-border: #6d62ff;
  --zenkai-shadow-neon:
    0 0 28px rgba(55, 62, 250, 0.42),
    0 0 18px rgba(251, 50, 78, 0.2);
  --zenkai-shadow-neon-h:
    0 0 52px rgba(55, 62, 250, 0.64),
    0 0 32px rgba(251, 50, 78, 0.34);
  --zenkai-scrollbar: #373efa;

  /* VARIÁVEIS ATIVAS (padrão = tema default) */
  --primary: var(--default-primary);
  --primary-rgb: var(--default-primary-rgb);
  --primary-hover: var(--default-primary-hover);
  --accent: var(--default-accent);
  --accent2: var(--default-accent2);
  --text-main: var(--default-text-main);
  --text-muted: var(--default-text-muted);
  --border: var(--default-border);
  --shadow-neon: var(--default-shadow-neon);
  --shadow-neon-h: var(--default-shadow-neon-h);
  --hover-color: var(--primary-hover);
  --hover-glow: rgba(var(--primary-rgb), 0.28);
}

/* ===== TEMA DEFAULT (AZUL CLARO MARINHO) ===== */
.theme-ciano,
.theme-default {
  --primary: var(--default-primary);
  --primary-rgb: var(--default-primary-rgb);
  --primary-hover: var(--default-primary-hover);
  --accent: var(--default-accent);
  --accent2: var(--default-accent2);
  --text-main: var(--default-text-main);
  --text-muted: var(--default-text-muted);
  --border: var(--default-border);
  --shadow-neon: var(--default-shadow-neon);
  --shadow-neon-h: var(--default-shadow-neon-h);
}

/* ===== TEMA BEN 10 (OMNITRIX NEON VIBRANT) ===== */
.theme-verde,
.theme-ben10 {
  --primary: var(--ben10-primary);
  --primary-rgb: var(--ben10-primary-rgb);
  --primary-hover: var(--ben10-primary-hover);
  --accent: var(--ben10-accent);
  --accent2: var(--ben10-accent2);
  --text-main: var(--ben10-text-main);
  --text-muted: var(--ben10-text-muted);
  --border: var(--ben10-border);
  --shadow-neon: var(--ben10-shadow-neon);
  --shadow-neon-h: var(--ben10-shadow-neon-h);
}

/* ===== TEMA VINLAND SAGA (VIKING GOLD GLOW) ===== */
.theme-dourado,
.theme-vinland {
  --primary: var(--vinland-primary);
  --primary-rgb: var(--vinland-primary-rgb);
  --primary-hover: var(--vinland-primary-hover);
  --accent: var(--vinland-accent);
  --accent2: var(--vinland-accent2);
  --text-main: var(--vinland-text-main);
  --text-muted: var(--vinland-text-muted);
  --border: var(--vinland-border);
  --shadow-neon: var(--vinland-shadow-neon);
  --shadow-neon-h: var(--vinland-shadow-neon-h);
}

/* ===== TEMA ATTACK ON TITAN (COLOSSAL RADIANCE) ===== */
.theme-vermelho,
.theme-aot {
  --primary: var(--aot-primary);
  --primary-rgb: var(--aot-primary-rgb);
  --primary-hover: var(--aot-primary-hover);
  --accent: var(--aot-accent);
  --accent2: var(--aot-accent2);
  --text-main: var(--aot-text-main);
  --text-muted: var(--aot-text-muted);
  --border: var(--aot-border);
  --shadow-neon: var(--aot-shadow-neon);
  --shadow-neon-h: var(--aot-shadow-neon-h);
}

/* ===== TEMA JOVENS TITÃS CLÁSSICO (DOMINANT PURPLE) ===== */
.theme-roxo,
.theme-tt-classic {
  --primary: var(--tt-classic-primary);
  --primary-rgb: var(--tt-classic-primary-rgb);
  --primary-hover: var(--tt-classic-primary-hover);
  --accent: var(--tt-classic-accent);
  --accent-rgb: var(--tt-classic-accent-rgb);
  --accent2: var(--tt-classic-accent2);
  --accent2-rgb: var(--tt-classic-accent2-rgb);
  --text-main: var(--tt-classic-text-main);
  --text-muted: var(--tt-classic-text-muted);
  --border: var(--tt-classic-border);
  --shadow-neon: var(--tt-classic-shadow-neon);
  --shadow-neon-h: var(--tt-classic-shadow-neon-h);
}

/* ===== TEMA MUTANTE REX (DOMINANT ORANGE) ===== */
.theme-laranja,
.theme-mutant-rex {
  --primary: var(--mutant-rex-primary);
  --primary-rgb: var(--mutant-rex-primary-rgb);
  --primary-hover: var(--mutant-rex-primary-hover);
  --accent: var(--mutant-rex-accent);
  --accent2: var(--mutant-rex-accent2);
  --text-main: var(--mutant-rex-text-main);
  --text-muted: var(--mutant-rex-text-muted);
  --border: var(--mutant-rex-border);
  --shadow-neon: var(--mutant-rex-shadow-neon);
  --shadow-neon-h: var(--mutant-rex-shadow-neon-h);
}

/* ===== TEMA REGULAR SHOW (DARK BLUE) ===== */
.theme-azul,
.theme-regular-show {
  --primary: var(--regular-show-primary);
  --primary-rgb: var(--regular-show-primary-rgb);
  --primary-hover: var(--regular-show-primary-hover);
  --accent: var(--regular-show-accent);
  --accent2: var(--regular-show-accent2);
  --text-main: var(--regular-show-text-main);
  --text-muted: var(--regular-show-text-muted);
  --border: var(--regular-show-border);
  --shadow-neon: var(--regular-show-shadow-neon);
  --shadow-neon-h: var(--regular-show-shadow-neon-h);
}

/* ===== TEMA DEMON SLAYER (DARK GREEN SLAYER GLOW) ===== */
.theme-verde-escuro,
.theme-demon-slayer {
  --primary: var(--demon-slayer-primary);
  --primary-rgb: var(--demon-slayer-primary-rgb);
  --primary-hover: var(--demon-slayer-primary-hover);
  --accent: var(--demon-slayer-accent);
  --accent2: var(--demon-slayer-accent2);
  --text-main: var(--demon-slayer-text-main);
  --text-muted: var(--demon-slayer-text-muted);
  --border: var(--demon-slayer-border);
  --shadow-neon: var(--demon-slayer-shadow-neon);
  --shadow-neon-h: var(--demon-slayer-shadow-neon-h);
}

/* ===== TEMA VAGABOND (WHITE NEON) ===== */
.theme-branco,
.theme-vagabond {
  --primary: var(--vagabond-primary);
  --primary-rgb: var(--vagabond-primary-rgb);
  --primary-hover: var(--vagabond-primary-hover);
  --accent: var(--vagabond-accent);
  --accent2: var(--vagabond-accent2);
  --text-main: var(--vagabond-text-main);
  --text-muted: var(--vagabond-text-muted);
  --border: var(--vagabond-border);
  --shadow-neon: var(--vagabond-shadow-neon);
  --shadow-neon-h: var(--vagabond-shadow-neon-h);
}

.theme-aqua-verde {
  --primary: var(--aqua-verde-primary);
  --primary-rgb: var(--aqua-verde-primary-rgb);
  --primary-hover: var(--aqua-verde-primary-hover);
  --accent: var(--aqua-verde-accent);
  --accent2: var(--aqua-verde-accent2);
  --text-main: var(--aqua-verde-text-main);
  --text-muted: var(--aqua-verde-text-muted);
  --border: var(--aqua-verde-border);
  --shadow-neon: var(--aqua-verde-shadow-neon);
  --shadow-neon-h: var(--aqua-verde-shadow-neon-h);
}

.theme-natal {
  --primary: var(--natal-primary);
  --primary-rgb: var(--natal-primary-rgb);
  --primary-hover: var(--natal-primary-hover);
  --accent: var(--natal-accent);
  --accent2: var(--natal-accent2);
  --text-main: var(--natal-text-main);
  --text-muted: var(--natal-text-muted);
  --border: var(--natal-border);
  --shadow-neon: var(--natal-shadow-neon);
  --shadow-neon-h: var(--natal-shadow-neon-h);
}

.theme-zenkai {
  --primary: var(--zenkai-primary);
  --primary-rgb: var(--zenkai-primary-rgb);
  --primary-hover: var(--zenkai-primary-hover);
  --accent: var(--zenkai-accent);
  --accent-rgb: var(--zenkai-accent-rgb);
  --accent2: var(--zenkai-accent2);
  --accent2-rgb: var(--zenkai-accent2-rgb);
  --text-main: var(--zenkai-text-main);
  --text-muted: var(--zenkai-text-muted);
  --border: var(--zenkai-border);
  --shadow-neon: var(--zenkai-shadow-neon);
  --shadow-neon-h: var(--zenkai-shadow-neon-h);
  --hover-color: var(--zenkai-accent);
  --hover-glow: rgba(251, 50, 78, 0.28);
  --scrollbar: var(--zenkai-scrollbar);
  --bg-dark: #08070f;
  --bg-surface: #0f0c24;
  --bg-card: #151237;
}

.theme-abismo {
  --primary: #a7ccff;
  --primary-rgb: 167, 204, 255;
  --primary-hover: #d3e6ff;
  --hover-color: #eef6ff;
  --hover-glow: rgba(167, 204, 255, 0.36);
  --accent: #162040;
  --accent2: #070b17;
  --text-main: #fbfcff;
  --text-muted: #b6c3df;
  --border: #344265;
  --bg-dark: #01030a;
  --bg-surface: #050914;
  --bg-card: #0a1020;
  --shadow-neon: 0 0 10px rgba(167, 204, 255, 0.28);
  --shadow-neon-h:
    0 0 18px rgba(167, 204, 255, 0.46),
    0 0 34px rgba(167, 204, 255, 0.18);
  --scrollbar: #a7ccff;
}

.theme-ciano,
.theme-default {
  scrollbar-color: var(--default-scrollbar) #050f1f;
}

.theme-verde,
.theme-ben10 {
  scrollbar-color: var(--ben10-scrollbar) #050f1f;
}

.theme-dourado,
.theme-vinland {
  scrollbar-color: var(--vinland-scrollbar) #050f1f;
}

.theme-vermelho,
.theme-aot {
  scrollbar-color: var(--aot-scrollbar) #050f1f;
}

.theme-roxo,
.theme-tt-classic {
  scrollbar-color: var(--tt-classic-scrollbar) #050f1f;
}

.theme-laranja,
.theme-mutant-rex {
  scrollbar-color: var(--mutant-rex-scrollbar) #050f1f;
}

.theme-azul,
.theme-regular-show {
  scrollbar-color: var(--regular-show-scrollbar) #050f1f;
}

.theme-verde-escuro,
.theme-demon-slayer {
  scrollbar-color: var(--demon-slayer-scrollbar) #050f1f;
}

.theme-branco,
.theme-vagabond {
  scrollbar-color: var(--vagabond-scrollbar) #050f1f;
}

.theme-aqua-verde {
  scrollbar-color: var(--aqua-verde-scrollbar) #050f1f;
}

.theme-natal {
  scrollbar-color: var(--natal-scrollbar) #050f1f;
}

.theme-abismo {
  scrollbar-color: var(--scrollbar) #02040b;
}

.theme-zenkai {
  scrollbar-color: var(--zenkai-scrollbar) #0b0713;
  background: #08070f;
}

body.theme-zenkai {
  background: var(--bg-dark);
}

.theme-zenkai .navbar {
  background: rgba(12, 10, 29, 0.96) !important;
  border-bottom-color: rgba(55, 62, 250, 0.58);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.72),
    0 0 24px rgba(55, 62, 250, 0.22);
}

.theme-zenkai .page-header h1,
.theme-zenkai .loja-hero-title,
.theme-zenkai .loja-hero-title span,
.theme-zenkai .section-title,
.theme-zenkai .home-card h3,
.theme-zenkai .navbar-brand {
  color: #aeb3ff !important;
  text-shadow: 0 0 18px rgba(55, 62, 250, 0.36);
}

.theme-zenkai .navbar-brand span {
  color: #fb324e !important;
  -webkit-text-fill-color: #fb324e !important;
}

.theme-zenkai :is(
    .btn,
    .btn-action,
    .btn-primary,
    .btn-success,
    .btn-secondary,
    .btn-accent,
    .ai-btn-send,
    .home-cta-button,
    .about-button,
    .site-guide-actions .btn
  ) {
  background:
    linear-gradient(
      135deg,
      rgba(var(--zenkai-accent-rgb), 0.18),
      rgba(9, 18, 34, 0.94)
    ) !important;
  border: 1px solid var(--zenkai-accent) !important;
  color: var(--text-main) !important;
  box-shadow:
    0 0 0 1px rgba(var(--zenkai-accent-rgb), 0.08),
    0 10px 28px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(var(--zenkai-accent-rgb), 0.22) !important;
  text-shadow: 0 0 10px rgba(var(--zenkai-accent-rgb), 0.2);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
}

.theme-zenkai :is(
    .btn,
    .btn-action,
    .btn-primary,
    .btn-success,
    .btn-secondary,
    .btn-accent,
    .ai-btn-send,
    .home-cta-button,
    .about-button,
    .site-guide-actions .btn
  ):hover {
  background:
    linear-gradient(
      135deg,
      rgba(var(--zenkai-accent-rgb), 0.26),
      rgba(12, 22, 40, 0.98)
    ) !important;
  color: var(--text-main) !important;
  border-color: var(--zenkai-accent) !important;
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(var(--zenkai-accent-rgb), 0.16),
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(var(--zenkai-accent-rgb), 0.32),
    inset 0 0 12px rgba(var(--zenkai-accent-rgb), 0.08) !important;
}

.theme-zenkai .inventory-item-card .btn-equip {
  background:
    linear-gradient(
      135deg,
      rgba(var(--zenkai-accent-rgb), 0.18),
      rgba(9, 18, 34, 0.94)
    ) !important;
  border: 1px solid var(--zenkai-accent) !important;
  color: var(--text-main) !important;
}

.theme-zenkai .inventory-item-card .btn-equip.equipped {
  background:
    linear-gradient(
      135deg,
      rgba(var(--zenkai-accent-rgb), 0.18),
      rgba(9, 18, 34, 0.94)
    ) !important;
  border: 1px solid var(--zenkai-accent) !important;
  color: var(--text-main) !important;
}

.theme-zenkai .inventory-item-card .btn-equip:hover {
  background:
    linear-gradient(
      135deg,
      rgba(var(--zenkai-accent-rgb), 0.26),
      rgba(12, 22, 40, 0.98)
    ) !important;
  border-color: var(--zenkai-accent) !important;
  color: var(--text-main) !important;
}

.theme-zenkai .inventory-item-card .btn-equip.equipped:hover {
  background:
    linear-gradient(
      135deg,
      rgba(var(--zenkai-accent-rgb), 0.26),
      rgba(12, 22, 40, 0.98)
    ) !important;
  border-color: var(--zenkai-accent) !important;
  color: var(--text-main) !important;
}

.theme-zenkai .card,
.theme-zenkai .episode-card,
.theme-zenkai .manga-item,
.theme-zenkai .season-section,
.theme-zenkai .purchased-card,
.theme-zenkai .inventory-item-card {
  border-color: rgba(55, 62, 250, 0.42) !important;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(55, 62, 250, 0.1);
}

.theme-zenkai .card:hover,
.theme-zenkai .episode-card:hover,
.theme-zenkai .manga-item:hover,
.theme-zenkai .purchased-card:hover,
.theme-zenkai .inventory-item-card:hover {
  border-color: rgba(251, 50, 78, 0.72) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(251, 50, 78, 0.2),
    0 0 32px rgba(55, 62, 250, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .theme-zenkai :is(
      .btn,
      .btn-action,
      .btn-primary,
      .btn-success,
      .btn-secondary,
      .btn-accent,
    .ai-btn-send,
    .home-cta-button,
    .about-button,
    .site-guide-actions .btn
    ):hover {
    transform: none;
  }
}

/* ===================================================== */
/* ===== TEMA CROMÁTICO (ITEM EXCLUSIVO DA LOJA)    ===== */
/* ===================================================== */

@property --chromatic-hue {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

@keyframes chromatic-hue-cycle {
  from {
    --chromatic-hue: 0deg;
  }

  to {
    --chromatic-hue: 360deg;
  }
}

/*
 * PERFORMANCE: A animação fica no próprio .theme-cromatico (html/body).
 * `contain: style` isola a propagação da CSS custom property --chromatic-hue
 * ao subtree, evitando recalcs em todo o documento a cada frame.
 * Saturação 88% e luminosidade 58% → paleta mais suave e menos custosa no GPU.
 */
.theme-cromatico {
  --chromatic-hue: 210deg;
  /* 30 s → menos recalcs/s */
  isolation: isolate;
  contain: style;
  /* impede que --chromatic-hue force recalc fora do subtree */

  /* ── Paleta cromática elegante (sat 88 %, lum 58 %) ── */
  --primary: hsl(var(--chromatic-hue), 88%, 58%);
  --primary-rgb: 180, 180, 255;
  /* valor neutro; evita neon vermelho forçado */
  --primary-hover: hsl(var(--chromatic-hue), 88%, 68%);
  --hover-color: hsl(var(--chromatic-hue), 92%, 72%);
  --hover-glow: hsla(var(--chromatic-hue), 88%, 58%, 0.28);
  --accent: hsl(calc(var(--chromatic-hue) + 120deg), 88%, 58%);
  --accent2: hsl(calc(var(--chromatic-hue) + 240deg), 88%, 58%);
  --text-main: #f0f0ff;
  --text-muted: hsl(var(--chromatic-hue), 60%, 78%);
  --border: hsl(var(--chromatic-hue), 88%, 58%);

  /* Fundos ultra-escuros para maximizar contraste com as cores vivas */
  --bg-dark: #030308;
  --bg-surface: #08080f;
  --bg-card: #0e0e18;

  /* Neon Glow — raios menores = repaint mais barato */
  --shadow-neon: 0 0 8px hsla(var(--chromatic-hue), 88%, 58%, 0.35);
  --shadow-neon-h:
    0 0 16px hsla(var(--chromatic-hue), 88%, 58%, 0.55),
    0 0 32px hsla(var(--chromatic-hue), 88%, 58%, 0.18);

  --scrollbar: hsl(var(--chromatic-hue), 88%, 58%);
}

/* Hover sutil alinhado ao tema, sem mexer no layout */
:where(
    a,
    p,
    span,
    small,
    strong,
    em,
    b,
    i,
    li,
    dt,
    dd,
    label,
    legend,
    figcaption,
    blockquote,
    td,
    th,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
  ):hover {
  color: var(--hover-color, var(--primary-hover));
}

:where(
    a,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    label,
    legend,
    figcaption,
    .card-title,
    .card-meta,
    .page-header h1,
    .home-banner h2,
    .loja-hero-title,
    .loja-hero-title span,
    .section-title,
    .home-card h3,
    #mangaPanelTitle,
    #readerTitle,
    .modal-header h2,
    #formTitle,
    .tool-header h2,
    .xp-value,
    #homeUserStatus span:last-child,
    .user-nav-title,
    .navbar-brand
  ):hover {
  text-shadow: 0 0 10px var(--hover-glow, rgba(var(--primary-rgb), 0.28));
}

:where(img, picture, video, svg):hover {
  filter: saturate(1.08) brightness(1.06)
    drop-shadow(0 0 12px var(--hover-glow, rgba(var(--primary-rgb), 0.28)));
}

::selection {
  background: rgba(var(--primary-rgb), 0.28);
  color: #050f1f;
  text-shadow: none;
}

::-moz-selection {
  background: rgba(var(--primary-rgb), 0.28);
  color: #050f1f;
  text-shadow: none;
}

.theme-cromatico ::selection {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.28);
  color: #050f1f;
}

.theme-cromatico ::-moz-selection {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.28);
  color: #050f1f;
}

.theme-natal ::selection {
  background: rgba(var(--natal-primary-rgb), 0.28);
  color: #050f1f;
}

.theme-natal ::-moz-selection {
  background: rgba(var(--natal-primary-rgb), 0.28);
  color: #050f1f;
}

.theme-abismo ::selection {
  background: rgba(167, 204, 255, 0.34);
  color: #050f1f;
}

.theme-abismo ::-moz-selection {
  background: rgba(167, 204, 255, 0.34);
  color: #050f1f;
}

img,
picture,
video,
svg {
  transition:
    filter 0.28s ease,
    opacity 0.28s ease,
    transform 0.28s ease;
}

.card img,
.ai-card img {
  transition:
    transform 0.5s ease,
    filter 0.28s ease,
    opacity 0.28s ease;
}

.theme-cromatico-lite .inventory-item-card,
.theme-cromatico-lite .purchased-card,
.theme-cromatico-lite .item-card-emerald,
.theme-cromatico-lite .history-sidebar,
.theme-cromatico-lite .history-item,
.theme-cromatico-lite .history-list,
.theme-cromatico-lite .btn,
.theme-cromatico-lite .btn-equip-chromatic,
.theme-cromatico-lite .equipped-badge-chromatic,
.theme-cromatico-lite .card-badge,
.theme-cromatico-lite .badge-pill {
  transition:
    transform 0.18s ease,
    opacity 0.18s ease !important;
}

.theme-cromatico-paused,
.theme-cromatico-paused *,
.theme-cromatico-paused *::before,
.theme-cromatico-paused *::after {
  animation-play-state: paused !important;
}

/* Residual neon fix — raios menores para reduzir custo de repaint */
.theme-cromatico .navbar-brand img,
.theme-cromatico .home-icon,
.theme-cromatico .stats-card,
.theme-cromatico .manga-pill.active {
  filter: drop-shadow(0 0 4px hsla(var(--chromatic-hue), 88%, 58%, 0.28)) !important;
}

/* Títulos com gradiente cromático — paleta elegante (lum 68 %) */
.theme-cromatico .page-header h1,
.theme-cromatico .home-banner h2,
.theme-cromatico .loja-hero-title,
.theme-cromatico .loja-hero-title span,
.theme-cromatico .section-title,
.theme-cromatico .home-card h3,
.theme-cromatico #mangaPanelTitle,
.theme-cromatico #readerTitle,
.theme-cromatico .modal-header h2,
.theme-cromatico #formTitle,
.theme-cromatico .tool-header h2,
.theme-cromatico .xp-value,
.theme-cromatico #homeUserStatus span:last-child,
.theme-cromatico .user-nav-title,
.theme-cromatico .navbar-brand {
  background: linear-gradient(90deg,
      hsl(var(--chromatic-hue), 90%, 70%),
      hsl(calc(var(--chromatic-hue) + 55deg), 90%, 70%),
      hsl(calc(var(--chromatic-hue) + 115deg), 90%, 70%));
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: none !important;
}

.theme-cromatico
  :is(
    .page-header h1,
    .home-banner h2,
    .loja-hero-title,
    .loja-hero-title span,
    .section-title,
    .home-card h3,
    #mangaPanelTitle,
    #readerTitle,
    .modal-header h2,
    #formTitle,
    .tool-header h2,
    .xp-value,
    #homeUserStatus span:last-child,
    .user-nav-title,
    .navbar-brand
  ):hover {
  background: linear-gradient(90deg,
      hsl(var(--chromatic-hue), 95%, 78%),
      hsl(calc(var(--chromatic-hue) + 55deg), 95%, 78%),
      hsl(calc(var(--chromatic-hue) + 115deg), 95%, 78%));
  filter: drop-shadow(0 0 12px hsla(var(--chromatic-hue), 88%, 58%, 0.22));
}

.theme-cromatico .user-nav-container {
  border: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.55) !important;
  box-shadow: 0 0 10px hsla(var(--chromatic-hue), 88%, 58%, 0.1) !important;
  background: rgba(3, 3, 12, 0.5) !important;
}

/* Navbar links should also be chromatic when active or hovered */
.theme-cromatico .navbar-links a:hover,
.theme-cromatico .navbar-links a.active {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid var(--primary);
  box-shadow:
    0 0 28px var(--primary),
    0 0 15px rgba(var(--primary-rgb), 0.5),
    inset 0 0 10px rgba(var(--primary-rgb), 0.2);
  text-shadow: 0 0 12px rgba(var(--primary-rgb), 0.7);
}

/* Overrides para remover o branco de elementos específicos */
.theme-cromatico .home-banner p,
.theme-cromatico .loja-hero-desc,
.theme-cromatico .page-header p,
.theme-cromatico .tool-header p,
.theme-cromatico .stats-info .label,
.theme-cromatico .ai-config-label,
.theme-cromatico .ai-side-note,
.theme-cromatico #homeUserRank,
.theme-cromatico .search-bar input::placeholder {
  color: var(--text-muted) !important;
}

/* Overrides para badges e cards que usavam primary-rgb como branco */
.theme-cromatico .hero-xp-card,
.theme-cromatico #homeUserStatus>div,
.theme-cromatico .search-bar input,
.theme-cromatico .history-search input {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.06) !important;
  border: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.52) !important;
  box-shadow: 0 0 8px hsla(var(--chromatic-hue), 88%, 58%, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.theme-cromatico .xp-orb {
  background: radial-gradient(circle,
      var(--primary) 0%,
      hsla(var(--chromatic-hue), 88%, 58%, 0.25) 60%,
      transparent 100%) !important;
  box-shadow: 0 0 14px hsla(var(--chromatic-hue), 88%, 58%, 0.24) !important;
}

/* Ajuste para banners que têm fundos que podem conflitar */
.theme-cromatico .loja-hero,
.theme-cromatico .home-banner {
  background: linear-gradient(135deg,
      rgba(3, 3, 12, 0.97) 0%,
      hsla(var(--chromatic-hue), 88%, 58%, 0.04) 50%,
      rgba(3, 3, 12, 0.97) 100%) !important;
  border: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.5) !important;
  box-shadow: 0 0 12px hsla(var(--chromatic-hue), 88%, 58%, 0.05) !important;
}

.theme-cromatico .loja-hero-eyebrow::before,
.theme-cromatico .loja-hero-eyebrow::after,
.theme-cromatico .section-title::after {
  background: linear-gradient(90deg, var(--primary), transparent) !important;
}

.theme-cromatico .loja-hero-eyebrow {
  color: var(--primary) !important;
}

.theme-cromatico .stats-widget,
.theme-cromatico .volume-card:hover {
  box-shadow: 0 0 8px hsla(var(--chromatic-hue), 88%, 58%, 0.16) !important;
}

/* No layout overrides for history items in chromatic theme */
.theme-cromatico .history-item {
  border: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.54) !important;
}

/* Specific UI elements chromatization for dashboards */
.theme-cromatico .stats-progress-fill,
.theme-cromatico .season-progress-fill {
  background: linear-gradient(90deg, var(--primary), var(--accent)) !important;
  box-shadow: none !important;
}

.theme-cromatico .stats-widget::before {
  background: var(--primary) !important;
  box-shadow: none !important;
}

.theme-cromatico .stats-info .count {
  color: var(--primary) !important;
  text-shadow: none !important;
}

.theme-cromatico .card-badge,
.theme-cromatico .badge-accent,
.theme-cromatico .badge-pill,
.theme-cromatico .premium-dashboard-badge,
.theme-cromatico .season-complete-badge,
.theme-cromatico .watched-modal-badge,
.theme-cromatico .btn {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.08) !important;
  color: var(--primary) !important;
  border: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.55) !important;
  box-shadow: 0 0 4px hsla(var(--chromatic-hue), 88%, 58%, 0.08) !important;
}

.theme-cromatico .btn-primary,
.theme-cromatico .btn-danger,
.theme-cromatico .btn-outline-primary,
.theme-cromatico .btn-outline-danger {
  border: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.6) !important;
}

.theme-cromatico .btn:hover {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.2) !important;
  box-shadow: 0 0 8px hsla(var(--chromatic-hue), 88%, 58%, 0.18) !important;
}

.theme-cromatico .msg.bot {
  background: linear-gradient(160deg,
      hsla(var(--chromatic-hue), 88%, 58%, 0.07),
      rgba(3, 3, 12, 0.35)) !important;
  border: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.5) !important;
  box-shadow: 0 0 4px hsla(var(--chromatic-hue), 88%, 58%, 0.08) !important;
}

.theme-cromatico .msg.user {
  background: linear-gradient(160deg,
      hsla(var(--chromatic-hue), 88%, 58%, 0.12),
      rgba(3, 3, 12, 0.25)) !important;
  border: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.55) !important;
  box-shadow: 0 0 5px hsla(var(--chromatic-hue), 88%, 58%, 0.1) !important;
}

/* AI Page Overrides for Chromatic Theme */
.theme-cromatico .ai-card,
.theme-cromatico .ai-tab-v,
.theme-cromatico .ai-tab,
.theme-cromatico .ai-content-area,
.theme-cromatico .ai-chat-window,
.theme-cromatico .ai-input-wrapper,
.theme-cromatico .upload-zone,
.theme-cromatico .ocr-result,
.theme-cromatico .full-card,
.theme-cromatico .ai-config-item,
.theme-cromatico .ai-theme-panel,
.theme-cromatico .ai-scroll-panel,
.theme-cromatico .vision-preview,
.theme-cromatico .compare-history-item {
  background: rgba(var(--bg-card), 0.5) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.15) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.theme-cromatico .ai-tab-v.active,
.theme-cromatico .ai-tab.active {
  background: rgba(var(--primary-rgb), 0.08) !important;
  border-color: var(--primary) !important;
  color: var(--text-main) !important;
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.12) !important;
}

.theme-cromatico .ai-input-wrapper input {
  color: var(--text-main) !important;
}

.theme-cromatico .ai-input-wrapper input::placeholder {
  color: var(--text-muted) !important;
}

.theme-cromatico .ai-btn-send {
  background: var(--primary) !important;
  color: var(--bg-dark) !important;
  box-shadow: 0 0 8px var(--primary) !important;
}

.theme-cromatico .ai-card h3 {
  color: var(--primary) !important;
  text-shadow: none !important;
}

.theme-cromatico .upload-zone__content {
  color: var(--text-main) !important;
}

.theme-cromatico .upload-zone__content span {
  color: var(--text-muted) !important;
}

.theme-cromatico .card-badge:hover,
.theme-cromatico .badge-accent:hover {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.22) !important;
  box-shadow: 0 0 8px hsla(var(--chromatic-hue), 88%, 58%, 0.18) !important;
}

/* Corrigindo o neon branco (primary-rgb: 255,255,255) nos cards e sessões */
.theme-cromatico .card,
.theme-cromatico .episode-card,
.theme-cromatico .manga-item,
.theme-cromatico .season-section {
  border: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.52) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 0 6px hsla(var(--chromatic-hue), 88%, 58%, 0.1) !important;
}

.theme-cromatico .card-cover-placeholder {
  background: linear-gradient(135deg,
      var(--bg-card) 0%,
      hsla(var(--chromatic-hue), 88%, 58%, 0.32) 100%) !important;
  color: var(--primary) !important;
  text-shadow: none !important;
}

.theme-cromatico .episodes-grid {
  background: linear-gradient(135deg,
      hsla(var(--chromatic-hue), 88%, 58%, 0.025) 0%,
      hsla(var(--chromatic-hue), 88%, 58%, 0.008) 100%) !important;
}

.theme-cromatico .season-header {
  border-bottom: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.48) !important;
}

.theme-cromatico .season-header:hover {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.12) !important;
  border-bottom: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.72) !important;
  box-shadow: inset 0 0 8px hsla(var(--chromatic-hue), 88%, 58%, 0.12) !important;
}

.theme-cromatico .cartoon-pill:hover,
.theme-cromatico .cartoon-pill.active {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.12) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.theme-cromatico .catalog-item:hover,
.theme-cromatico .card:hover,
.theme-cromatico .volume-card:hover,
.theme-cromatico .inventory-item-card:hover,
.theme-cromatico .purchased-card:hover,
.theme-cromatico .history-item:hover,
.theme-cromatico .episode-card:hover {
  box-shadow: 0 0 10px hsla(var(--chromatic-hue), 88%, 58%, 0.1) !important;
  border: 2px solid hsla(var(--chromatic-hue), 88%, 65%, 0.75) !important;
  background-color: #0c0c18 !important;
}

.theme-cromatico {
  scrollbar-color: hsl(var(--chromatic-hue), 88%, 58%) #030308;
}

/* Chromatic Text Glow — reduzido para diminuir repaint */
.theme-cromatico .btn,
.theme-cromatico .page-header h1,
.theme-cromatico .navbar-brand,
.theme-cromatico .catalog-item .item-title {
  text-shadow: none;
}

.theme-cromatico .navbar {
  background: rgba(3, 3, 12, 0.88) !important;
  border-bottom: 2px solid hsla(var(--chromatic-hue), 88%, 62%, 0.58);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.85),
    0 0 10px hsla(var(--chromatic-hue), 88%, 58%, 0.1);
}

/* Palette options inside the switcher should be more visible against pure black */
.theme-cromatico .theme-options {
  background: #08080f !important;
  border: 2px solid var(--primary);
  box-shadow: 0 0 10px hsla(var(--chromatic-hue), 88%, 58%, 0.14);
}

/* Fixed positioning for palette switcher remains intact */
.theme-cromatico .theme-switcher-wrapper {
  position: fixed !important;
}

/* Título da página — fonte dinâmica para o tema cromático */
.theme-cromatico .page-header h1 {
  font-family: "Audiowide", cursive;
  font-weight: 700;
}

/* Font variável para títulos no tema cromático */
.theme-cromatico {
  --title-font: "Audiowide", cursive;
}

/* Lightweight runtime profile for the chromatic theme */
.theme-cromatico.theme-cromatico-lite .navbar-brand img,
.theme-cromatico.theme-cromatico-lite .home-icon,
.theme-cromatico.theme-cromatico-lite .stats-card,
.theme-cromatico.theme-cromatico-lite .manga-pill.active {
  filter: none !important;
}

.theme-cromatico.theme-cromatico-lite .hero-xp-card,
.theme-cromatico.theme-cromatico-lite #homeUserStatus>div,
.theme-cromatico.theme-cromatico-lite .search-bar input,
.theme-cromatico.theme-cromatico-lite .history-search input {
  backdrop-filter: none !important;
}

.theme-cromatico.theme-cromatico-lite .page-header h1,
.theme-cromatico.theme-cromatico-lite .navbar-brand,
.theme-cromatico.theme-cromatico-lite .catalog-item .item-title,
.theme-cromatico.theme-cromatico-lite .stats-info .count,
.theme-cromatico.theme-cromatico-lite .ai-card h3 {
  text-shadow: 0 0 4px hsla(var(--chromatic-hue), 88%, 58%, 0.22) !important;
}

.theme-cromatico.theme-cromatico-lite .user-nav-container,
.theme-cromatico.theme-cromatico-lite .loja-hero,
.theme-cromatico.theme-cromatico-lite .home-banner,
.theme-cromatico.theme-cromatico-lite .navbar {
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.34),
    0 0 10px hsla(var(--chromatic-hue), 88%, 58%, 0.1) !important;
}

.theme-cromatico.theme-cromatico-lite .xp-orb {
  box-shadow: 0 0 14px hsla(var(--chromatic-hue), 88%, 58%, 0.22) !important;
}

.theme-cromatico.theme-cromatico-lite .card,
.theme-cromatico.theme-cromatico-lite .episode-card,
.theme-cromatico.theme-cromatico-lite .manga-item,
.theme-cromatico.theme-cromatico-lite .season-section {
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.3),
    0 0 8px hsla(var(--chromatic-hue), 88%, 58%, 0.12) !important;
}

.theme-cromatico.theme-cromatico-lite .catalog-item:hover,
.theme-cromatico.theme-cromatico-lite .card:hover,
.theme-cromatico.theme-cromatico-lite .volume-card:hover,
.theme-cromatico.theme-cromatico-lite .inventory-item-card:hover,
.theme-cromatico.theme-cromatico-lite .purchased-card:hover,
.theme-cromatico.theme-cromatico-lite .history-item:hover,
.theme-cromatico.theme-cromatico-lite .episode-card:hover {
  box-shadow: 0 0 16px hsla(var(--chromatic-hue), 88%, 58%, 0.18) !important;
}

/* ===== TRANSIÇÃO SUAVE DE TEMA ===== */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /* Previne pulos de layout ao abrir modais/editores */
}

html,
body {
  font-family: "Poppins", "Nunito", sans-serif;
  background: var(--bg-dark);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  /* Removido o overflow-y: auto !important para evitar scrollbars duplas ou desnecessárias */
}

a {
  color: inherit;
  text-decoration: none;
}

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

input,
textarea,
select,
button {
  font-family: inherit;
}

/* ===== GLOBAL FILE UPLOAD STYLING (THEMED) ===== */
input[type="file"] {
  display: block;
  width: 100%;
  padding: 8px;
  font-family: inherit;
  color: var(--text-main);
  background: rgba(var(--bg-card-rgb), 0.5);
  border: 1px dashed rgba(var(--primary-rgb), 0.4);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

input[type="file"]:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.05);
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.15);
}

input[type="file"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

input[type="file"]::file-selector-button {
  background: var(--primary);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  margin-right: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}

input[type="file"]::file-selector-button:hover {
  filter: brightness(1.15);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.5);
  transform: translateY(-2px);
}

/* =====/* ===== VARIÁVEIS DE SOMBRA E LAYOUT ===== */
:root {
  --sidebar-width: 280px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-deep: 0 20px 50px rgba(0, 0, 0, 0.5);
  --glow-primary: 0 0 20px rgba(var(--primary-rgb), 0.45);
}

/* ===== SCROLLBARS GLOBAIS VIBRANTES (UNIFICADAS POR TEMA) ===== */
html::-webkit-scrollbar, body::-webkit-scrollbar, div::-webkit-scrollbar, ul::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.profile-bubble {
  cursor: pointer;
}

html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, div::-webkit-scrollbar-track, ul::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px;
}

html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb, ul::-webkit-scrollbar-thumb {
  background: var(--primary) !important;
  border-radius: 50px;
  border: 2px solid var(--bg-dark) !important;
  box-shadow: 0 0 10px var(--primary) !important;
}

/* Garante que o body não tenha scroll horizontal e respeite o layout */
html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Previne scroll do body quando modal está aberto */
body.modal-open {
  overflow: hidden !important;
  padding-right: 10px;
  /* Compensa a largura da scrollbar */
}

/* Scrollbar da Navbar - VISÍVEL E TEMATIZADA */
.navbar-links::-webkit-scrollbar {
  display: block !important;
  height: 5px !important;
  width: 0 !important;
}

.navbar-links::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px;
}

.navbar-links::-webkit-scrollbar-thumb {
  background: var(--primary) !important;
  border-radius: 50px;
  border: 1px solid var(--bg-dark) !important;
  box-shadow:
    0 0 10px rgba(var(--primary-rgb), 0.7),
    inset 0 0 4px rgba(var(--primary-rgb), 0.2) !important;
}

/* Scrollbar Firefox - Global */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--bg-dark);
}

/* NOTA: Scrollbars webkit usam variáveis ativas que mudam com os temas */

/* Corpo Principal */
body {
  font-family: "Poppins", "Nunito", sans-serif;
  background: var(--bg-dark);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== NAVBAR SUPERIOR COM SCROLL HORIZONTAL ===== */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  min-width: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3%;
  height: 90px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: none;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  overflow: visible;
  gap: 0;
}

/* Crown styles - Preservado do fix de estabilidade */
.crown-nav {
  position: absolute;
  top: -23px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  z-index: 10;
  text-shadow: none;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Gorro de Noel Icon and Placement Styles */
.gorro-img-cosmetic {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}

/* Adjustments when worn on the head */
.crown-nav .gorro-img-cosmetic,
#sidebarCrown .gorro-img-cosmetic {
  width: 100%;
  height: 100%;
  transform: translate(0, 0);
  filter: none;
}

#sidebarCrown,
.crown-badge-anchor {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  z-index: 10;
  text-shadow: none;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.crown-badge-anchor--nav {
  top: -21px;
}

.crown-badge-anchor--sidebar {
  top: -20px;
}

.crown-badge {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 12px rgba(var(--primary-rgb), 0.35));
}

.crown-badge--crown,
.crown-badge--skull {
  font-size: 1.55rem;
  line-height: 1;
}

.crown-badge--crown {
  transform: translateY(-1px);
}

.crown-badge--skull {
  transform: translateY(0);
}

.crown-badge--hat .crown-hat-img {
  width: 108%;
  height: 108%;
  object-fit: contain;
  display: block;
  transform: none !important;
  animation: none !important;
}

.crown-nav .crown-badge--hat .crown-hat-img {
  width: 108%;
  height: 108%;
}

.crown-nav .crown-badge--crown,
.crown-nav .crown-badge--skull {
  font-size: 1.5rem;
}

#sidebarCrown .crown-badge--hat .crown-hat-img {
  width: 155%;
  height: 155%;
}

#sidebarCrown .crown-badge--crown,
#sidebarCrown .crown-badge--skull {
  font-size: 1.95rem;
}

.crown-badge--hat {
  transform: none !important;
  animation: none !important;
}

#sidebarCrown {
  top: -24px;
  width: 48px;
  height: 48px;
}

@keyframes crown-float {

  0%,
  100% {
    transform: translateX(-50%) rotate(10deg) translateY(-1px);
  }

  50% {
    transform: translateX(-50%) rotate(12deg) translateY(-4px);
  }
}

/* Indicador discreto de rolagem horizontal na navbar (sempre visível quando há overflow) */
.navbar-scroll-indicator {
  display: none;
}

@media (max-width: 900px) {
  .navbar-scroll-indicator {
    left: 18%;
    right: 18%;
  }
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Bangers", cursive;
  font-size: 1.6rem;
  letter-spacing: 1.5px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 20px;
  filter: drop-shadow(0 0 15px rgba(var(--primary-rgb), 0.6));
  text-shadow:
    0 0 12px rgba(var(--primary-rgb), 0.6),
    0 0 25px rgba(var(--primary-rgb), 0.3);
}

.navbar-brand span {
  color: var(--primary);
  text-shadow:
    0 0 25px rgba(var(--primary-rgb), 1),
    0 0 50px rgba(var(--primary-rgb), 0.7);
}

.navbar-brand img {
  height: 50px !important;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(var(--primary-rgb), 0.6)) drop-shadow(0 0 6px rgba(var(--primary-rgb), 0.3));
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 25px;
  list-style: none;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 15px;
  flex: 1;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) rgba(255, 255, 255, 0.08);
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.navbar-links li {
  flex-shrink: 0;
}

.navbar-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  border: 1px solid transparent;
}

.navbar-links a:hover,
.navbar-links a.active {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid var(--primary);
  box-shadow:
    0 0 28px var(--primary),
    0 0 15px rgba(var(--primary-rgb), 0.5),
    inset 0 0 10px rgba(var(--primary-rgb), 0.2);
  text-shadow: 0 0 12px rgba(var(--primary-rgb), 0.7);
  animation: neonFlicker 0.6s ease-in-out;
}

.navbar-links a.active {
  border-width: 2px;
  box-shadow: 0 0 20px var(--primary);
  font-weight: 700;
}

/* Garantir que notificações + perfil nunca se comprimam e fiquem na direita */
#globalAuthContainer {
  flex-shrink: 0 !important;
  margin-left: auto;
}

.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
  min-height: calc(100vh - 90px);
  animation: fadeIn 0.8s ease;
  width: 100%;
  position: relative;
  /* Para ancorar o seletor de temas */
}

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

  to {
    opacity: 1;
    transform: translateY(-1px);
  }
}

/* Ocultar o botão burger em todos os tamanhos para remover a bolinha branca */
.navbar-burger {
  display: none !important;
}

@media (max-width: 1024px) {
}

/* ===== CONTAINER ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* ===== PAGE HEADER ===== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    text-align: center;
  }
}

.page-header .header-main {
  flex: 1;
  text-align: left;
}

@media (max-width: 768px) {
  .page-header .header-main {
    text-align: center;
  }
}

.page-header h1 {
  font-family: "Bangers", cursive;
  font-size: 3rem;
  letter-spacing: 2px;
  color: var(--text-main);
  text-shadow:
    0 4px 10px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(var(--primary-rgb), 0.6),
    0 0 50px rgba(var(--primary-rgb), 0.4);
  animation: glowPulse 4.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 20px rgba(var(--primary-rgb), 0.5));
}

.page-header h1 span {
  color: var(--primary);
}

/* Fonts específicas para cada tema */
.theme-ciano .page-header h1,
.theme-default .page-header h1 {
  font-family: "Bangers", cursive;
}

.theme-verde .page-header h1,
.theme-ben10 .page-header h1 {
  font-family: "Righteous", sans-serif;
  font-weight: 700;
}

.theme-dourado .page-header h1,
.theme-vinland .page-header h1 {
  font-family: "Black Ops One", cursive;
}

.theme-vermelho .page-header h1,
.theme-aot .page-header h1 {
  font-family: "Lilita One", sans-serif;
}

.theme-roxo .page-header h1,
.theme-tt-classic .page-header h1 {
  font-family: "Fredoka One", sans-serif;
}

.theme-laranja .page-header h1,
.theme-mutant-rex .page-header h1 {
  font-family: "Audiowide", cursive;
}

.theme-azul .page-header h1,
.theme-regular-show .page-header h1 {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
}

.theme-verde-escuro .page-header h1,
.theme-demon-slayer .page-header h1 {
  font-family: "Black Ops One", cursive;
}

.theme-branco .page-header h1,
.theme-vagabond .page-header h1 {
  font-family: "Black Ops One", cursive;
  letter-spacing: 3px;
}

.theme-aqua-verde .page-header h1 {
  font-family: "Righteous", sans-serif;
  font-weight: 700;
}

.page-header p {
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-size: 1.1rem;
}

/* ===== STATS WIDGET ===== */
.stats-widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-neon);
  min-width: 200px;
  text-align: left;
  animation: fadeIn 0.5s ease-out;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stats-widget::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
}

.stats-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
}

.stats-info .label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.65rem;
}

.stats-info .count {
  color: var(--primary);
  font-family: "Bangers", cursive;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

.stats-progress-container {
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  width: 0%;
  transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 15px var(--primary);
}

/* ===== SEARCH & FILTER BAR ===== */
.search-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto 2.5rem auto;
  max-width: 1050px;
  background: var(--bg-dark);
  padding: 1.2rem;
  border-radius: var(--radius);
  border: 2px solid rgba(var(--primary-rgb), 0.3);
  box-shadow:
    var(--shadow-neon),
    inset 0 0 15px rgba(var(--primary-rgb), 0.08);
  animation: float 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  position: sticky;
  top: 72px;
  z-index: 100;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(-1px);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes floatCard {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes glowPulse {

  0%,
  100% {
    text-shadow:
      0 4px 10px rgba(0, 0, 0, 0.3),
      0 0 30px rgba(var(--primary-rgb), 0.6),
      0 0 50px rgba(var(--primary-rgb), 0.4);
  }

  50% {
    text-shadow:
      0 4px 10px rgba(0, 0, 0, 0.3),
      0 0 35px rgba(var(--primary-rgb), 0.7),
      0 0 55px rgba(var(--primary-rgb), 0.5);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

@keyframes tilt {

  0%,
  100% {
    transform: rotate(0deg) translateY(0px);
  }

  50% {
    transform: rotate(0.5deg) translateY(-4px);
  }
}

@keyframes gradientShift {

  0%,
  100% {
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }
}

@keyframes neonFlicker {

  0%,
  100% {
    text-shadow:
      0 0 18px rgba(var(--primary-rgb), 0.6),
      0 0 38px rgba(var(--primary-rgb), 0.4);
  }

  50% {
    text-shadow:
      0 0 28px rgba(var(--primary-rgb), 0.8),
      0 0 60px rgba(var(--primary-rgb), 0.6);
  }
}

.search-bar input,
.search-bar select {
  flex: 1;
  min-width: 140px;
  padding: 12px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 0.95rem;
  outline: none;
  transition: all var(--transition);
}

.search-bar input {
  flex: 2;
  min-width: 150px;
}

.search-bar input:focus,
.search-bar select:focus {
  border-color: var(--primary);
  box-shadow:
    0 0 18px rgba(var(--primary-rgb), 0.5),
    0 0 10px rgba(var(--primary-rgb), 0.3);
}

/* ===== BOTÕES ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
}

.btn:active {
  transform: scale(0.97);
}

.btn {
  cursor: pointer;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 6px;
}

/* Botões de ação: salvar, cadastrar, atualizar, aplicar */
:is(.btn-action, .btn-primary, .btn-success, .btn-secondary, .btn-accent) {
  background:
    linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.18),
      rgba(9, 18, 34, 0.94)) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.08),
    0 10px 28px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(var(--primary-rgb), 0.22) !important;
  text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  font-weight: 700;
}

:is(.btn-action, .btn-primary, .btn-success, .btn-secondary, .btn-accent):hover {
  background:
    linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.26),
      rgba(12, 22, 40, 0.98)) !important;
  color: var(--text-main) !important;
  border-color: rgba(var(--primary-rgb), 0.75) !important;
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.16),
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(var(--primary-rgb), 0.32),
    inset 0 0 12px rgba(var(--primary-rgb), 0.08) !important;
}

:is(.btn-action, .btn-primary, .btn-success, .btn-secondary, .btn-accent):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(var(--primary-rgb), 0.22),
    0 10px 28px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(var(--primary-rgb), 0.28) !important;
}

/* Botões destrutivos: excluir, limpar, apagar */
:is(.btn-danger-action, .btn-danger) {
  background:
    linear-gradient(135deg,
      rgba(255, 78, 78, 0.18),
      rgba(32, 8, 14, 0.94)) !important;
  color: #ffd5d5 !important;
  border: 1px solid rgba(255, 93, 93, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(255, 93, 93, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(255, 93, 93, 0.22) !important;
  text-shadow: 0 0 10px rgba(255, 120, 120, 0.26);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  font-weight: 700;
}

:is(.btn-danger-action, .btn-danger):hover {
  background:
    linear-gradient(135deg,
      rgba(255, 78, 78, 0.28),
      rgba(42, 10, 18, 0.98)) !important;
  color: #ffe1e1 !important;
  border-color: rgba(255, 112, 112, 0.92) !important;
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255, 93, 93, 0.14),
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(255, 93, 93, 0.32),
    inset 0 0 12px rgba(255, 93, 93, 0.08) !important;
}

:is(.btn-danger-action, .btn-danger):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 93, 93, 0.2),
    0 10px 28px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(255, 93, 93, 0.3) !important;
}

.btn-primary:disabled,
.btn-success:disabled,
.btn-secondary:disabled,
.btn-accent:disabled,
.btn-danger:disabled,
.btn-action:disabled,
.btn-danger-action:disabled {
  opacity: 0.7;
  filter: saturate(0.95) brightness(0.95);
  transform: none;
}

.theme-cromatico :is(.btn-action, .btn-primary, .btn-success, .btn-secondary, .btn-accent) {
  background:
    linear-gradient(135deg,
      hsla(var(--chromatic-hue), 88%, 58%, 0.18),
      rgba(8, 14, 26, 0.95)) !important;
  color: var(--primary) !important;
  border-color: hsla(var(--chromatic-hue), 88%, 62%, 0.72) !important;
  box-shadow:
    0 0 0 1px hsla(var(--chromatic-hue), 88%, 58%, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.24),
    0 0 24px hsla(var(--chromatic-hue), 88%, 58%, 0.18) !important;
}

.theme-cromatico :is(.btn-action, .btn-primary, .btn-success, .btn-secondary, .btn-accent):hover {
  background:
    linear-gradient(135deg,
      hsla(var(--chromatic-hue), 88%, 58%, 0.28),
      rgba(10, 18, 34, 0.98)) !important;
  color: var(--primary) !important;
  border-color: hsla(var(--chromatic-hue), 88%, 62%, 0.88) !important;
  box-shadow:
    0 0 0 1px hsla(var(--chromatic-hue), 88%, 58%, 0.18),
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 0 32px hsla(var(--chromatic-hue), 88%, 58%, 0.28) !important;
}

.theme-cromatico :is(.btn-danger-action, .btn-danger) {
  background:
    linear-gradient(135deg,
      rgba(255, 78, 78, 0.2),
      rgba(32, 8, 14, 0.95)) !important;
  color: #ffd5d5 !important;
  border-color: rgba(255, 93, 93, 0.8) !important;
  box-shadow:
    0 0 0 1px rgba(255, 93, 93, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(255, 93, 93, 0.18) !important;
}

.theme-cromatico :is(.btn-danger-action, .btn-danger):hover {
  background:
    linear-gradient(135deg,
      rgba(255, 78, 78, 0.3),
      rgba(42, 10, 18, 0.98)) !important;
  color: #ffe1e1 !important;
  border-color: rgba(255, 112, 112, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(255, 93, 93, 0.16),
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 0 32px rgba(255, 93, 93, 0.28) !important;
}

.btn-ghost {
  background:
    linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.08),
      rgba(8, 14, 26, 0.88));
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  color: var(--text-main);
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.06),
    0 8px 20px rgba(0, 0, 0, 0.18),
    inset 0 0 10px rgba(var(--primary-rgb), 0.06);
  font-weight: 700;
}

.btn-ghost:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
  color: var(--primary);
  background:
    linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.16),
      rgba(10, 18, 34, 0.96));
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.12),
    0 12px 28px rgba(0, 0, 0, 0.24),
    0 0 20px rgba(var(--primary-rgb), 0.18),
    inset 0 0 12px rgba(var(--primary-rgb), 0.1);
}

:is(
  .btn-ghost,
  .chat-action-cancel,
  .chat-confirm-btn:not(.danger),
  #cancelBtn,
  #cancelEditBtn,
  #cancelVideoBtn,
  #renameCancelBtn,
  #cropCancelBtn,
  #cancelDeleteAccountBtn,
  #passkeyNameCancelBtn,
  #passkeyDeleteCancelBtn,
  #chatDeleteConfirmCancel,
  #chatActionCancel,
  #chatCancelSelectionBtn
) {
  border-radius: 14px;
}

:is(
  .btn-ghost,
  .chat-action-cancel,
  .chat-confirm-btn:not(.danger),
  #cancelBtn,
  #cancelEditBtn,
  #cancelVideoBtn,
  #renameCancelBtn,
  #cropCancelBtn,
  #cancelDeleteAccountBtn,
  #passkeyNameCancelBtn,
  #passkeyDeleteCancelBtn,
  #chatDeleteConfirmCancel,
  #chatActionCancel,
  #chatCancelSelectionBtn
):hover {
  transform: translateY(-2px);
}

:is(
  #deleteModal .modal,
  #passkeyDeleteModal .modal,
  #deleteAccountModal .modal
) {
  background:
    radial-gradient(circle at top right,
      rgba(var(--primary-rgb), 0.18),
      transparent 34%),
    radial-gradient(circle at bottom left,
      rgba(239, 68, 68, 0.12),
      transparent 30%),
    linear-gradient(180deg,
      rgba(7, 12, 24, 0.98),
      rgba(4, 8, 16, 0.98)) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.05),
    0 28px 80px rgba(0, 0, 0, 0.6),
    0 0 35px rgba(var(--primary-rgb), 0.12),
    0 0 26px rgba(239, 68, 68, 0.1) !important;
  overflow: hidden;
}

:is(
  #deleteModal .modal,
  #passkeyDeleteModal .modal,
  #deleteAccountModal .modal
)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.08),
      transparent 28%,
      rgba(239, 68, 68, 0.05) 100%);
  opacity: 0.95;
}

:is(
  #deleteModal .modal-header h2,
  #passkeyDeleteModal .modal-header h2,
  #deleteAccountModal .modal-header h2
) {
  color: var(--primary) !important;
}

:is(
  #deleteModal .modal-header,
  #passkeyDeleteModal .modal-header,
  #deleteAccountModal .modal-header
) {
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.14);
}

#deleteModal .modal > p,
#passkeyDeleteModal .delete-box,
#deleteAccountModal .delete-account-intro,
#deleteAccountModal .delete-account-warning,
#deleteAccountModal .delete-account-confirmation,
#deleteAccountModal .delete-account-error {
  position: relative;
  z-index: 1;
}

#deleteModal .modal > p {
  padding: 1rem 1.05rem;
  margin: 0 0 0.25rem;
  border-radius: 16px;
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--text-main);
  line-height: 1.75;
}

#deleteModal .modal > p strong {
  color: #ffd3d3;
}

#deleteModal .modal > p::before {
  content: "Atenção";
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.14);
  color: #ffbebe;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#passkeyDeleteModal .delete-box {
  margin-top: 16px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.08),
      rgba(239, 68, 68, 0.05));
  border: 1px solid rgba(var(--primary-rgb), 0.16);
  color: var(--text-main);
  line-height: 1.65;
}

#passkeyDeleteModal .delete-box strong {
  color: #ffdcdc;
}

#deleteAccountModal .modal {
  padding: 0 !important;
}

#deleteAccountModal .modal-header h2 {
  font-family: "Nunito", sans-serif !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  text-shadow: none !important;
  color: var(--text-main) !important;
}

#deleteAccountModal .modal-header {
  padding: 24px 24px 0 24px;
}

#deleteAccountModal .modal-header h2 i {
  color: var(--primary);
}

#deleteAccountModal .modal-header h2,
#deleteAccountModal .modal-close {
  margin-top: 0;
}

#deleteAccountModal .delete-account-card {
  position: relative;
  z-index: 1;
  padding: 24px;
}

#deleteAccountModal .delete-account-intro {
  margin: 0 0 15px;
  color: var(--text-main);
  line-height: 1.7;
  font-size: 0.95rem;
}

#deleteAccountModal .delete-account-intro strong {
  color: #ff9f9f !important;
}

#deleteAccountModal .delete-account-warning {
  background:
    linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.08),
      rgba(239, 68, 68, 0.06));
  border: 1px solid rgba(var(--primary-rgb), 0.16);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
}

#deleteAccountModal .delete-account-warning label {
  display: flex;
  gap: 10px;
  cursor: pointer;
  align-items: flex-start;
}

#deleteAccountModal .delete-account-warning input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

#deleteAccountModal .delete-account-warning span {
  font-size: 0.85rem;
  color: var(--text-main);
  line-height: 1.5;
}

#deleteAccountModal .delete-account-confirmation {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

#deleteAccountModal .delete-account-confirmation strong {
  color: #ff9f9f;
}

#deleteAccountModal .delete-account-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--primary-rgb), 0.16);
  border-radius: 14px;
  color: var(--text-main);
  font-size: 1rem;
  outline: none;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

#deleteAccountModal .delete-account-input:focus {
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow:
    0 0 0 3px rgba(var(--primary-rgb), 0.12),
    inset 0 0 0 1px rgba(var(--primary-rgb), 0.08);
}

#deleteAccountModal .delete-account-actions {
  display: flex;
  gap: 10px;
}

#deleteAccountModal .delete-account-actions .btn {
  flex: 1;
}

#deleteAccountModal .delete-account-actions .btn.btn-danger {
  flex: 2;
}

#deleteAccountModal .delete-account-error {
  display: none;
  margin-top: 14px;
  padding: 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 14px;
  color: #ff9c9c;
  font-size: 0.85rem;
  text-align: center;
}

#chatDeleteConfirmModal .chat-confirm-dialog {
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(239, 68, 68, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(8, 14, 26, 0.98), rgba(4, 8, 16, 0.98));
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.05),
    0 28px 72px rgba(0, 0, 0, 0.58),
    0 0 28px rgba(var(--primary-rgb), 0.12),
    0 0 18px rgba(239, 68, 68, 0.08);
}

#chatDeleteConfirmModal .chat-confirm-icon {
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), 0.14), rgba(239, 68, 68, 0.14));
  color: #ffd5d5;
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.1),
    0 0 20px rgba(239, 68, 68, 0.16);
}

#chatDeleteConfirmModal .chat-confirm-copy h4 {
  color: var(--primary);
}

#chatDeleteConfirmModal .chat-confirm-copy p {
  color: var(--text-muted);
}

#chatDeleteConfirmModal .chat-confirm-btn:not(.danger) {
  background:
    linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.08),
      rgba(8, 14, 26, 0.92));
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  color: var(--text-main);
}

#chatDeleteConfirmModal .chat-confirm-btn:not(.danger):hover {
  background:
    linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.14),
      rgba(12, 20, 34, 0.96));
  border-color: rgba(var(--primary-rgb), 0.48);
  color: var(--primary);
}

#chatDeleteConfirmModal .chat-confirm-btn.danger {
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.2),
    0 0 18px rgba(239, 68, 68, 0.18);
}

.note-clear-btn {
  background: linear-gradient(135deg, rgba(255, 59, 59, 0.18), rgba(255, 38, 38, 0.08)) !important;
  color: #ff5c5c !important;
  border: 1px solid rgba(255, 72, 72, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(255, 72, 72, 0.2),
    0 0 18px rgba(255, 72, 72, 0.45),
    inset 0 0 12px rgba(255, 72, 72, 0.12) !important;
  text-shadow: 0 0 8px rgba(255, 118, 118, 0.45);
  opacity: 1 !important;
}

.note-clear-btn:hover {
  background: linear-gradient(135deg, rgba(255, 59, 59, 0.28), rgba(255, 38, 38, 0.14)) !important;
  color: #ff7777 !important;
  border-color: #ff5b5b !important;
  box-shadow:
    0 0 0 1px rgba(255, 72, 72, 0.28),
    0 0 26px rgba(255, 72, 72, 0.6),
    0 0 44px rgba(255, 72, 72, 0.22),
    inset 0 0 14px rgba(255, 72, 72, 0.18) !important;
  transform: translateY(-2px) scale(1.01);
}

.note-clear-btn:disabled {
  opacity: 1 !important;
  filter: saturate(1.05) brightness(0.96);
}

/* ===== CARDS GRID ===== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.card {
  background: transparent;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  overflow: hidden;
  position: relative;
  /* Essencial para os botões absolutamente posicionados dentro */
  transition: all var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(var(--primary-rgb), 0.2);
  animation: fadeInUp 0.6s ease forwards;
}

.card:nth-child(1) {
  animation-delay: 0.05s;
}

.card:nth-child(2) {
  animation-delay: 0.1s;
}

.card:nth-child(3) {
  animation-delay: 0.15s;
}

.card:nth-child(n + 4) {
  animation-delay: calc((var(--index) - 1) * 0.05s);
}

.card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 8px 35px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(var(--primary-rgb), 0.6),
    0 0 55px rgba(var(--primary-rgb), 0.4);
  border-color: var(--primary);
  border-width: 2px;
}

.card img,
.ai-card img {
  transition: transform 0.5s ease;
}

.history-open {
  cursor: pointer;
}

.card:hover .card-cover {
  transform: scale(1.08);
}

/* Mantém a capa cortada no container sem prender elementos externos */
.card {
  overflow: visible !important;
}

.card-click-area {
  overflow: hidden !important;
  position: relative;
}

/* Apenas o primeiro .card-click-area (área da imagem) recebe borda arredondada no topo */
.card > .card-click-area:first-child {
  border-radius: 14px 14px 0 0;
}

.card-cover {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  object-position: center;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  transform-origin: center center;
  display: block;
}

.card-cover-placeholder {
  width: 100%;
  aspect-ratio: 2/3;
  background: linear-gradient(135deg,
      var(--bg-surface) 0%,
      var(--primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  border-radius: 14px 14px 0 0;
}

.card-body {
  padding: 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 480px) {
  .card-body {
    padding: 0.8rem;
  }
}

.card-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.card-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  flex: 1;
}

.card-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 600;
  align-self: flex-start;
  transition: all var(--transition);
  animation: fadeInUp 0.6s ease forwards;
  border: 1px solid rgba(var(--primary-rgb), 0.4);
}

.card-badge:hover {
  background: rgba(var(--primary-rgb), 0.35);
  box-shadow:
    0 0 18px rgba(var(--primary-rgb), 0.4),
    inset 0 0 8px rgba(var(--primary-rgb), 0.15);
  transform: translateX(2px);
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: all var(--transition);
  animation: fadeInUp 0.5s ease forwards;
}

.badge-accent {
  background: rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
  transition: all var(--transition);
}

.badge-accent:hover {
  background: rgba(var(--primary-rgb), 0.35);
  box-shadow:
    0 0 25px rgba(var(--primary-rgb), 0.45),
    inset 0 0 8px rgba(var(--primary-rgb), 0.2);
  transform: scale(1.1);
}

/* Variante para Animes (Púrpura) */
.anime-context .badge-accent {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.1);
}

/* ===== TABELA (CADASTRO) ===== */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  background: var(--bg-card);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(var(--primary-rgb), 0.2);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background: rgba(15, 23, 42, 0.5);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px 20px;
  text-align: left;
  border-bottom: 2px solid var(--border);
}

td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  vertical-align: middle;
}

/* History Category Filters */
.history-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.3) transparent;
}

.history-filters::-webkit-scrollbar {
  height: 4px;
}

.history-filters::-webkit-scrollbar-track {
  background: transparent;
}

.history-filters::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.3);
  border-radius: 10px;
}

.history-filter-btn {
  padding: 5px 12px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.history-filter-btn:hover {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--text-main);
  border-color: rgba(var(--primary-rgb), 0.3);
}

.history-filter-btn.active {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.td-cover {
  width: 50px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-surface);
}

/* ===== MODAL ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 9999;
  /* Garantir que fique acima de tudo */
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
  /* Trava o scroll no overlay */
}

.modal-overlay.open {
  display: flex !important;
}

.modal,
.patent-info-modal {
  background: var(--bg-card);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-radius: 16px;
  padding: 2rem;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow:
    0 0 50px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(var(--primary-rgb), 0.4);
  animation: slideUpCenter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10000;
}

@media (max-width: 600px) {
  .modal-overlay {
    padding: 1rem;
  }

  .modal,
  .patent-info-modal {
    padding: 1.2rem;
    max-height: 90vh;
  }
}

@keyframes slideUpCenter {
  from {
    transform: translateY(100px) scale(0.9);
    opacity: 0;
  }

  to {
    transform: translateY(-1px) scale(1);
    opacity: 1;
  }
}

/* Bloqueio de scroll do body quando qualquer modal estiver aberto */
body:has(.modal-overlay.open) {
  overflow: hidden !important;
  /* Removido height: 100vh para evitar pulo ao topo */
  touch-action: none;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
  /* Header não encolhe */
}

/* Força display block no conteúdo interno de qualquer modal/card aberto */
.modal form,
.modal .modal-body,
.modal>p,
.modal .modal-content,
.patent-info-modal .patent-details {
  overflow-y: auto !important;
  padding-right: 8px;
  flex: 1;
  display: block !important;
}

/* Scrollbar fixa e temática para o interior do card */
.modal form::-webkit-scrollbar,
.modal .modal-body::-webkit-scrollbar,
.modal .modal-content::-webkit-scrollbar,
.modal>p::-webkit-scrollbar {
  width: 6px;
  display: block !important;
}

.modal form::-webkit-scrollbar-thumb,
.modal .modal-body::-webkit-scrollbar-thumb,
.modal>p::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.3);
  border-radius: 10px;
}

.modal-overlay.open~body {
  overflow: hidden !important;
}

.modal-header h2 {
  font-family: "Bangers", cursive;
  font-size: 2rem;
  letter-spacing: 1px;
  color: var(--primary);
  text-shadow:
    0 0 18px rgba(var(--primary-rgb), 0.6),
    0 0 30px rgba(var(--primary-rgb), 0.35);
}

.modal-close {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.modal-close:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: var(--danger);
}

/* ===== FORMULÁRIO ===== */
.form-group {
  margin-bottom: 1.2rem;
}

/* Linha de formulário flexível que embrulha em telas pequenas */
.form-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.form-row>* {
  flex: 1;
  min-width: 150px;
}

.form-row span {
  flex: 0 0 auto;
  min-width: auto;
}

/* Estilo para linhas de episódios/campos múltiplos */
.ep-form-row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.ep-form-row .form-group {
  margin-bottom: 0;
  flex: 1;
  min-width: 120px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  color: var(--text-main);
  font-size: 1rem;
  outline: none;
  transition: all var(--transition);
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow:
    0 0 25px rgba(var(--primary-rgb), 0.6),
    0 0 15px rgba(var(--primary-rgb), 0.4);
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

/* ===== EPISÓDIOS ===== */
.season-section {
  margin-bottom: 2rem;
  background: var(--bg-card);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(var(--primary-rgb), 0.3);
}

.season-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  background: var(--bg-surface);
  cursor: pointer;
  user-select: none;
  transition: all var(--transition);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
}

.season-header:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-bottom-color: var(--primary);
  box-shadow: inset 0 0 20px rgba(var(--primary-rgb), 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.season-header h3 {
  font-family: "Bangers", cursive;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: var(--accent);
}

.season-chevron {
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: transform var(--transition);
}

.season-header.open .season-chevron {
  transform: rotate(180deg);
}

.episodes-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.03) 0%,
      rgba(var(--primary-rgb), 0.01) 100%);
  border-radius: var(--radius);
  contain: layout paint style;
}

.episodes-grid.open {
  display: grid;
}

.episode-card {
  background: linear-gradient(135deg,
      rgba(var(--bg-card)) 0%,
      rgba(var(--primary-rgb), 0.03) 100%);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.24),
    0 0 12px rgba(var(--primary-rgb), 0.16);
  animation: none;
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: 320px 270px;
}

.episode-card:hover {
  border-color: var(--primary);
  border-width: 1.5px;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(var(--primary-rgb), 0.35),
    0 0 30px rgba(var(--primary-rgb), 0.18);
  transform: translateY(-6px) scale(1.01);
  animation: none;
}

.episode-card:hover iframe {
  filter: brightness(1.03);
  transition: filter 0.2s ease;
}

.episode-card iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  display: block;
}

body.anime-context .cartoon-pill,
body.anime-context .episode-card {
  transform: none;
  will-change: auto;
  backface-visibility: visible;
  perspective: none;
}

body.anime-context .episodes-grid,
body.anime-context .episode-card {
  scroll-margin-top: 80px;
}

.episode-label {
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== MANGA CARDS ===== */
.manga-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.manga-item {
  background: var(--bg-card);
  border: 1px solid rgba(var(--primary-rgb), 0.1);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: all var(--transition);
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.2),
    0 0 10px rgba(var(--primary-rgb), 0.15);
}

.manga-item:hover {
  border-color: var(--primary);
  border-width: 1.5px;
  transform: translateX(8px);
  box-shadow:
    0 8px 35px rgba(0, 0, 0, 0.4),
    0 0 38px rgba(var(--primary-rgb), 0.6),
    0 0 52px rgba(var(--primary-rgb), 0.4);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.manga-info {
  flex: 1;
}

.manga-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
}

.manga-info p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.manga-actions {
  display: flex;
  gap: 0.8rem;
  flex-shrink: 0;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 5rem 1rem;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 2px dashed rgba(var(--primary-rgb), 0.4);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(var(--primary-rgb), 0.1);
}

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

.empty-state p {
  font-size: 1.1rem;
}

/* ===== THANK YOU PAGE ===== */
.thanks-card {
  max-width: 750px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  padding: 4rem 3rem;
  text-align: center;
  box-shadow:
    0 0 35px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(var(--primary-rgb), 0.35);
}

.thanks-card .big-icon {
  font-size: 5rem;
  margin-bottom: 1.5rem;
}

.thanks-card h2 {
  font-family: "Bangers", cursive;
  font-size: 2.8rem;
  color: var(--primary);
  letter-spacing: 2px;
  margin-bottom: 1.2rem;
  text-shadow:
    0 0 28px rgba(var(--primary-rgb), 0.6),
    0 0 45px rgba(var(--primary-rgb), 0.35);
}

.thanks-card p {
  color: var(--text-muted);
  line-height: 1.8;
  font-size: 1.1rem;
}

/* ===== TOAST ===== */
#toast {
  position: fixed;
  bottom: 5.4rem;
  right: 1.4rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: min(360px, calc(100vw - 1.5rem));
}

.toast-item {
  padding: 14px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-main);
  box-shadow: var(--shadow);
  animation: toastIn 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-item.success {
  background: var(--success);
}

.toast-item.error {
  background: var(--danger);
}

.toast-item.info {
  background: var(--primary);
  box-shadow:
    0 4px 20px rgba(var(--primary-rgb), 0.6),
    0 0 20px rgba(var(--primary-rgb), 0.4);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

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

/* ===== UNDO TOAST ===== */
.undo-toast {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(15px);
  border: 2px solid var(--primary);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-width: 300px;
  box-shadow:
    0 0 35px rgba(var(--primary-rgb), 0.5),
    0 0 20px rgba(0, 0, 0, 0.6);
  animation: toastIn 0.3s ease;
}

.undo-content {
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.undo-content span {
  font-weight: 500;
  color: var(--text-main);
}

@media (max-width: 640px) {
  #toast {
    bottom: 5rem;
    right: 0.9rem;
    left: 0.9rem;
    max-width: none;
  }

  .undo-toast {
    min-width: 0;
    width: 100%;
  }
}

.btn-undo {
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.8rem;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-undo:hover {
  background: var(--primary);
  color: var(--bg-dark);
  box-shadow:
    0 0 28px var(--primary),
    0 0 15px rgba(var(--primary-rgb), 0.5);
}

.undo-progress {
  height: 4px;
  background: var(--primary);
  width: 100%;
  animation: progressUndo 7s linear forwards;
  box-shadow:
    0 0 20px var(--primary),
    0 0 12px rgba(var(--primary-rgb), 0.6);
}

/* Seletor de Temas FIXO (igual em todas as páginas e sem atrapalhar a UI) */
.theme-switcher-wrapper {
  position: fixed;
  right: 20px;
  top: 115px;
  /* abaixo da navbar (110px) */
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 640px) {
  .theme-switcher-wrapper {
    right: 12px;
    top: 115px;
  }

  .theme-main-btn {
    width: 44px;
    height: 44px;
  }
}

.theme-main-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid var(--primary);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow:
    0 0 20px rgba(var(--primary-rgb), 0.5),
    0 0 10px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

/* Mini “dot” mostrando a cor do tema atual */
.theme-main-btn::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow:
    0 0 18px var(--primary),
    0 0 28px rgba(var(--primary-rgb), 0.6);
  border: 1px solid rgba(255, 255, 255, 0.45);
  z-index: 3;
}

.theme-main-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, var(--primary), transparent 30%);
  animation: rotateGlow 2.5s linear infinite;
  opacity: 0.6;
}

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

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

.theme-main-btn span {
  position: relative;
  z-index: 2;
}

.theme-main-btn:hover {
  transform: scale(1.15) rotate(10deg);
  background: var(--primary);
  color: var(--bg-dark);
  box-shadow:
    0 0 45px var(--primary),
    0 0 28px rgba(var(--primary-rgb), 0.6);
}

.theme-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-card);
  padding: 12px;
  border-radius: 20px;
  border: 2px solid var(--primary);
  box-shadow:
    var(--shadow-deep),
    0 0 28px rgba(var(--primary-rgb), 0.4);
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.theme-switcher-wrapper.active .theme-options {
  transform: translateY(-1px);
  opacity: 1;
  visibility: visible;
}

.theme-opt-btn {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: var(--transition);
  position: relative;
}

.theme-opt-btn:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 22px rgba(var(--primary-rgb), 0.8));
}

.theme-opt-btn[data-theme="theme-ciano"] {
  background: var(--default-primary);
  color: #050f1f;
}

.theme-opt-btn[data-theme="theme-verde"] {
  background: var(--ben10-primary);
  color: #020617;
}

.theme-opt-btn[data-theme="theme-dourado"] {
  background: var(--vinland-primary);
  color: #0c0a09;
}

.theme-opt-btn[data-theme="theme-vermelho"] {
  background: var(--aot-primary);
  color: #050505;
}

.theme-opt-btn[data-theme="theme-roxo"] {
  background: var(--tt-classic-primary);
  color: #0a0015;
}

.theme-opt-btn[data-theme="theme-laranja"] {
  background: var(--mutant-rex-primary);
  color: #0d0600;
}

.theme-opt-btn[data-theme="theme-azul"] {
  background: var(--regular-show-primary);
  color: #eff6ff;
}

.theme-opt-btn[data-theme="theme-verde-escuro"] {
  background: var(--demon-slayer-primary);
  color: #ecfdf5;
}

.theme-opt-btn[data-theme="theme-branco"] {
  background: var(--vagabond-primary);
  color: #111827;
}

.theme-opt-btn[data-theme="theme-aqua-verde"] {
  background: var(--aqua-verde-primary);
  color: #042f24;
}

.theme-opt-btn[data-theme="theme-natal"] {
  background: linear-gradient(135deg, #ff0044, #00ffaa);
  color: #ffffff;
}

.theme-opt-btn[data-theme="theme-cromatico"] {
  background: linear-gradient(45deg,
      #ff0000,
      #ff7f00,
      #ffff00,
      #00ff00,
      #0000ff,
      #4b0082,
      #9400d3);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.theme-opt-btn::after {
  content: attr(title);
  position: absolute;
  right: 50px;
  background: var(--bg-dark);
  color: var(--text-main);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  border: 1px solid var(--border);
}

.theme-opt-btn.active {
  box-shadow:
    0 0 0 3px white,
    0 0 20px var(--primary),
    0 0 30px rgba(var(--primary-rgb), 0.5);
  transform: scale(1.1);
}

@keyframes progressUndo {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

.undo-toast.fade-out {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* ===== HOME LINKS E GLOBAIS ===== */
.home-banner {
  background: linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.15) 0%,
      rgba(var(--primary-rgb), 0.08) 100%);
  border: 2px solid rgba(var(--primary-rgb), 0.4);
  border-radius: var(--radius);
  padding: 3rem;
  text-align: center;
  margin-bottom: 3rem;
  box-shadow:
    0 0 30px rgba(var(--primary-rgb), 0.2),
    inset 0 0 20px rgba(var(--primary-rgb), 0.1);
}

.home-banner h2 {
  font-family: "Bangers", cursive;
  font-size: 2.5rem;
  color: var(--text-main);
  letter-spacing: 1.5px;
  margin-bottom: 1rem;
  text-shadow:
    0 0 30px rgba(var(--primary-rgb), 0.6),
    0 0 50px rgba(var(--primary-rgb), 0.3);
}

.home-banner p {
  color: var(--text-muted);
  font-size: 1.1rem;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.home-card {
  background: transparent;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(var(--primary-rgb), 0.25);
}

.home-card:hover {
  transform: translateY(-12px) scale(1.05);
  border-color: var(--primary);
  border-width: 2px;
  box-shadow:
    0 8px 35px rgba(0, 0, 0, 0.4),
    0 0 35px rgba(var(--primary-rgb), 0.5),
    0 0 50px rgba(var(--primary-rgb), 0.3);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-card .home-icon {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.home-card:hover .home-icon {
  animation: pulse 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 2;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(var(--primary-rgb), 0.6));
  }

  50% {
    transform: scale(1.1);
    filter:
      drop-shadow(0 0 25px rgba(var(--primary-rgb), 1)),
      drop-shadow(0 0 45px rgba(var(--primary-rgb), 0.6));
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(var(--primary-rgb), 0.6));
  }
}

.home-icon {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

section.home-notification-hub {
  display: none;
}

/* ===== NAVBAR NOTIFICATION BELL ===== */
.navbar-notification-wrapper {
  margin: 0 10px;
  display: flex;
  align-items: center;
}

.navbar-bell-trigger {
  background: rgba(var(--primary-rgb), 0.1);
  border: 1.5px solid rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
  font-size: 1.25rem;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 0;
}

.navbar-bell-trigger:hover {
  background: rgba(var(--primary-rgb), 0.2);
  border-color: var(--primary);
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
}

.navbar-bell-trigger .navbar-badge-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4d4d;
  color: white;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000;
  box-shadow: 0 0 10px rgba(255, 77, 77, 0.6);
  animation: badgePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.navbar-bell-trigger.ringing {
  animation: bellRing 0.6s ease;
}

@keyframes bellRing {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(20deg); }
  30% { transform: rotate(-15deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-5deg); }
}




.home-notification-hub__header,
.notification-center__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1.2rem;
}

.home-notification-hub__eyebrow,
.notification-center__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-notification-hub h3,
.notification-center__header h3 {
  margin: 0.85rem 0 0.35rem;
  font-size: 1.55rem;
  color: var(--text-main);
}

.home-notification-hub p,
.notification-center__header p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.home-notification-hub__badge,
.notification-center__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(var(--primary-rgb), 0.18);
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  color: var(--primary);
  font-weight: 900;
  box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.18);
}

.notification-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1rem;
}

.notification-column {
  min-width: 0;
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(7, 12, 26, 0.68);
  backdrop-filter: blur(12px);
}

.notification-column__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.9rem;
}

.notification-column__title h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-main);
}

.notification-mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.notification-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.9rem 1.05rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  text-align: left;
  transition: 0.22s ease;
  color: inherit;
  text-decoration: none;
  position: relative;
}

.notification-item.is-seen {
  opacity: 0.5;
  filter: grayscale(0.7);
}

.notification-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--primary-rgb), 0.2);
}

.notification-item__action-seen {
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.65rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 5;
}

.notification-item__action-seen:hover {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
  transform: scale(1.05);
}


.notification-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notification-item__title {
  font-weight: 700;
  color: var(--text-main);
}

.notification-item__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.notification-item__text {
  color: var(--text-muted);
  line-height: 1.5;
  word-break: break-word;
}

.notification-item__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.notification-item__status.unread {
  background: rgba(16, 185, 129, 0.12);
  color: #7cf0c0;
}

.notification-item__status.notice {
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--primary);
}

.notification-empty {
  padding: 1rem;
  border-radius: 16px;
  border: 1px dashed rgba(var(--primary-rgb), 0.2);
  background: rgba(var(--primary-rgb), 0.04);
  color: var(--text-muted);
  line-height: 1.6;
  text-align: center;
}

.notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0.9rem;
}

.notification-actions .btn,
.notification-item .btn {
  min-height: 40px;
}

.notification-admin-card {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  background: rgba(255, 255, 255, 0.03);
}

.notification-admin-card h4 {
  margin: 0 0 0.85rem;
  color: var(--primary);
}

.notification-admin-grid {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 0.9rem;
}

.notification-field,
.notification-admin-card textarea,
.notification-admin-card select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  background: rgba(5, 10, 22, 0.72);
  color: var(--text-main);
  padding: 0.85rem 1rem;
  outline: none;
}

.notification-admin-card textarea {
  min-height: 120px;
  resize: vertical;
}

.notification-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0.85rem;
}

.notification-admin-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1rem;
}

.notification-admin-list .notification-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.notification-admin-list .notification-item__main {
  display: grid;
  gap: 0.35rem;
}


.notification-center-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 20, 0.68);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 10040;
}

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

.notification-center {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  width: min(760px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  padding: 1.5rem;
  border-radius: 28px;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background:
    linear-gradient(180deg, rgba(6, 12, 26, 0.98), rgba(8, 12, 22, 0.98)),
    radial-gradient(circle at center, rgba(var(--primary-rgb), 0.1), transparent 70%);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(var(--primary-rgb), 0.15);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow-y: auto;
  z-index: 10050;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.3) transparent;
}

.notification-center.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}


.notification-center__close {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.notification-center__close:hover {
  transform: rotate(90deg) scale(1.1);
  background: rgba(var(--primary-rgb), 0.15);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
}

.notification-center__close:active {
  transform: rotate(90deg) scale(0.9);
}

.notification-inline-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.notification-inline-link:hover {
  text-decoration: underline;
}

/* === NOTIFICATION CENTER ENHANCEMENTS === */
.notification-center__content {
  max-height: 400px;
  overflow-y: auto;
  margin: 0 -1.5rem;
  padding: 0 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.2) transparent;
}

.notification-center__footer {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: flex-end;
}

.btn-mark-all-read {
  background: transparent;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  color: var(--primary);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-mark-all-read:hover {
  background: rgba(var(--primary-rgb), 0.1);
  border-color: var(--primary);
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2);
}

.notif-empty-state {
  text-align: center;
  padding: 40px 20px;
}

.notif-empty-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.8;
  filter: drop-shadow(0 0 10px rgba(var(--primary-rgb), 0.2));
  animation: floating 3s ease-in-out infinite;
  display: block;
}

@keyframes floating {
  0%, 100% { transform: translateY(-1px) rotate(0); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

.notification-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  border-radius: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
}

.notification-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(var(--primary-rgb), 0.15);
}

.notification-item.unread {
  background: rgba(var(--primary-rgb), 0.05);
}

.notification-item__icon {
  width: 40px;
  height: 40px;
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.notification-item__main {
  flex-grow: 1;
}

.notification-item__title {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.notification-item__text {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 6px;
}

.notification-item__time {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.6;
}

.notification-item__dot {
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 10px var(--primary);
}

/* === NOTIFICATION CENTER ANIMATIONS === */
@keyframes notifPopIn {
  from { opacity: 0; transform: translate(-50%, -45%) scale(0.92); filter: blur(10px); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

@keyframes notifSlideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px) scale(0.95); 
    filter: blur(5px);
  }
  to { 
    opacity: 1; 
    transform: translateY(-1px) scale(1); 
    filter: blur(0);
  }
}

.notification-center {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  width: min(760px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  padding: 1.5rem;
  border-radius: 28px;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background:
    linear-gradient(180deg, rgba(6, 12, 26, 0.98), rgba(8, 12, 22, 0.98)),
    radial-gradient(circle at center, rgba(var(--primary-rgb), 0.1), transparent 70%);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(var(--primary-rgb), 0.15);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow-y: auto;
  z-index: 10050;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.3) transparent;
}

.notification-center.active {
  animation: notifPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.notification-item {
  animation: notifSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-left: 4px solid transparent;
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 8px;
}

/* Staggered entrance */
.notification-item:nth-child(1) { animation-delay: 0.05s; }
.notification-item:nth-child(2) { animation-delay: 0.1s; }
.notification-item:nth-child(3) { animation-delay: 0.15s; }
.notification-item:nth-child(4) { animation-delay: 0.2s; }
.notification-item:nth-child(5) { animation-delay: 0.25s; }
.notification-item:nth-child(n+6) { animation-delay: 0.3s; }

.notification-item:hover {
  background: rgba(var(--primary-rgb), 0.1) !important;
  transform: translateX(8px) scale(1.01);
  border-left-color: var(--primary);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.2),
    0 0 15px rgba(var(--primary-rgb), 0.1);
  z-index: 2;
}

.notification-item:active {
  transform: translateX(4px) scale(0.98);
}

.notification-item__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--primary-rgb), 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-item__checkbox:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
  box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
  transform: scale(1.1);
}

.notification-item__checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4);
}

.notification-item__checkbox::after {
  content: '✓';
  font-size: 14px;
  color: #fff;
  font-weight: 900;
  display: none;
}

.notification-item__checkbox:checked::after {
  display: block;
  animation: checkPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Identical style for "Select All" checkbox */
#selectAllNotifs {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--primary-rgb), 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  display: flex !important; /* Ensure visibility */
  align-items: center;
  justify-content: center;
}

#selectAllNotifs:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
  box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
}

#selectAllNotifs:checked {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4);
}

#selectAllNotifs::after {
  content: '✓';
  font-size: 14px;
  color: #fff;
  font-weight: 900;
  display: none;
}

#selectAllNotifs:checked::after {
  display: block;
  animation: checkPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#selectAllNotifs:indeterminate {
  background: rgba(var(--primary-rgb), 0.2);
  border-color: var(--primary);
}

#selectAllNotifs:indeterminate::after {
  content: '-';
  display: block;
  font-size: 20px;
  color: var(--primary);
}

@keyframes checkPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.notification-item__delete {
  position: absolute;
  right: 15px;
  bottom: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.notification-item:hover .notification-item__delete {
  opacity: 0.6;
}

.notification-item__delete:hover {
  opacity: 1 !important;
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.15);
  transform: scale(1.1) rotate(8deg);
  box-shadow: 0 0 15px rgba(255, 77, 77, 0.2);
}

.notification-center__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-notif-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-notif-action:hover {
  background: rgba(var(--primary-rgb), 0.1);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-notif-action.danger:hover {
  background: rgba(255, 77, 77, 0.1);
  border-color: #ff4d4d;
  color: #ff4d4d;
}

.notif-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
  position: relative;
}

.notif-tab:hover {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

.notif-tab::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.notif-tab.active {
  color: var(--primary);
  font-weight: 700;
  background: rgba(var(--primary-rgb), 0.14);
  border-color: rgba(var(--primary-rgb), 0.25);
}

.notif-tab.active::after {
  width: 100%;
}

.notification-admin-panel {
  border: 1px dashed rgba(var(--primary-rgb), 0.3) !important;
  background: rgba(var(--primary-rgb), 0.04) !important;
  transition: all 0.3s ease;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.notification-admin-panel:hover {
  border-style: solid !important;
  background: rgba(var(--primary-rgb), 0.07) !important;
}

.notification-admin-panel h4 {
  color: var(--primary);
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.notification-admin-panel input,
.notification-admin-panel textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.notification-admin-panel input:focus,
.notification-admin-panel textarea:focus {
  border-color: var(--primary) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  outline: none;
}

@media (max-width: 920px) {
  .notification-grid,
  .notification-admin-grid {
    grid-template-columns: 1fr;
  }

  .home-notification-hub,
  .notification-center {
    border-radius: 20px;
  }
}

/* ===== WATERMARK ===== */
.watermark {
  position: fixed;
  bottom: 15px;
  right: 15px;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: rgba(var(--bg-dark), 0.4);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  pointer-events: none;
  z-index: 9990;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  letter-spacing: 0.5px;
  transition: all 0.4s ease;
  user-select: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0.6;
}

body:hover .watermark {
  opacity: 1;
  color: var(--text-main);
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow:
    0 4px 15px rgba(var(--primary-rgb), 0.3),
    0 0 10px rgba(var(--primary-rgb), 0.2);
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  .notification-center {
    top: 78px;
    right: 10px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 96px);
    padding: 1rem;
  }

  .home-notification-hub {
    padding: 1.15rem;
  }

  .watermark {
    bottom: 14px;
    right: 12px;
    font-size: 0.72rem;
  }

  .home-banner-notification-anchor {
    margin-top: -1rem;
    margin-bottom: 1.8rem;
  }

  .home-notification-trigger {
    width: 100%;
  }
}

/* ===== WATCH FRAME — PLAYER ===== */
/* Garante que o iframe dentro do watchFrame ocupe 100% do espaço */
#watchFrame {
  position: relative;
  isolation: isolate;
  /* Stacking context próprio — evita herdar blur de pais */
}

#watchFrame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  border-radius: 0;
  /* border-radius em iframe causa desfoque no Chromium */
}

/* ===== SISTEMA DE MARCAÇÃO DE EPISÓDIOS ASSISTIDOS ===== */

/* Botão de marcação no episode-card */
.watched-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(15, 23, 42, 0.75);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.watched-btn:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.2);
  transform: scale(1.12);
}

.watched-btn.watched {
  border-color: #10b981;
  background: #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.45);
}

.watched-btn.watched:hover {
  background: #059669;
  border-color: #059669;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.5);
  transform: scale(1.08);
}

.watched-icon {
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

.watched-btn:not(.watched) .watched-icon {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}


/* Overlay "assistido" sobre o thumbnail */
.watched-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 20, 35, 0.35);
  border: 2px solid rgba(16, 185, 129, 0.55);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.watched-overlay .watched-badge-icon {
  background: #10b981;
  color: #fff;
  border-radius: 14px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(16, 185, 129, 0.25);
  transform: scale(0.6);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}

.episode-card.is-watched .watched-overlay {
  opacity: 1;
}

.episode-card.is-watched .watched-overlay .watched-badge-icon {
  transform: scale(1);
  opacity: 1;
}

.episode-card.is-watched .episode-thumb-inner {
  opacity: 0.8;
}


/* Barra de progresso da temporada */
.season-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px 0;
  min-width: 120px;
}

.season-progress-bar {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  min-width: 60px;
}

.season-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), #34d399);
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.season-progress-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-weight: 600;
}

.season-progress-label.complete {
  color: var(--success);
}

/* Badge no header da temporada quando 100% */
.season-complete-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: var(--success);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

/* Modal de watch: botão "Marcar como assistido" */
.watched-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  background: transparent;
  font-family: inherit;
}

.watched-modal-badge.not-watched {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
}

.watched-modal-badge.not-watched:hover {
  border-color: #10b981;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.25);
}

.watched-modal-badge.is-watched {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}

.watched-modal-badge.is-watched:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.25);
}


/* Animação do check ao marcar */
@keyframes watchedPop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.35);
  }

  70% {
    transform: scale(0.9);
  }

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

.watched-btn.pop {
  animation: watchedPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================= */
/* ====== AURAS DE CONQUISTA GLOBAIS ======= */
/* ========================================= */

/* === HOKAGE (Aura de Fogo Nível 50) === */
.avatar-aura-wrap.avatar-aura-fire::before,
.user-nav-avatar-box.avatar-aura-fire::before {
  background: radial-gradient(circle,
      transparent 40%,
      rgba(255, 69, 0, 0.7) 65%,
      rgba(255, 140, 0, 0.4) 90%,
      transparent 100%);
  animation: aura-fire-pulse 1s ease-in-out infinite alternate;
  opacity: 1;
  inset: -5px;
}

.avatar-aura-wrap.avatar-aura-fire::after,
.user-nav-avatar-box.avatar-aura-fire::after {
  background: conic-gradient(from 0deg,
      rgba(255, 69, 0, 0.9) 0deg 10deg,
      transparent 10deg 30deg,
      rgba(255, 140, 0, 0.8) 30deg 40deg,
      transparent 40deg 60deg,
      rgba(255, 0, 0, 0.9) 60deg 70deg,
      transparent 70deg 90deg,
      rgba(255, 69, 0, 0.9) 90deg 100deg,
      transparent 100deg 120deg,
      rgba(255, 140, 0, 0.8) 120deg 130deg,
      transparent 130deg 150deg,
      rgba(255, 0, 0, 0.9) 150deg 160deg,
      transparent 160deg 180deg,
      rgba(255, 69, 0, 0.9) 180deg 190deg,
      transparent 190deg 210deg,
      rgba(255, 140, 0, 0.8) 210deg 220deg,
      transparent 220deg 240deg,
      rgba(255, 0, 0, 0.9) 240deg 250deg,
      transparent 250deg 270deg,
      rgba(255, 69, 0, 0.9) 270deg 280deg,
      transparent 280deg 300deg,
      rgba(255, 140, 0, 0.8) 300deg 310deg,
      transparent 310deg 330deg,
      rgba(255, 0, 0, 0.9) 330deg 340deg,
      transparent 340deg 360deg);
  animation: aura-fire-spin 3s linear infinite;
  opacity: 0.8;
  inset: -15px;
  filter: blur(2px);
}

@keyframes aura-fire-pulse {
  from {
    filter: brightness(1) saturate(1.2);
    transform: scale(0.98);
  }

  to {
    filter: brightness(1.5) saturate(1.8);
    transform: scale(1.05);
  }
}

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

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

/* === GUARDIÃO (Aura Nível 75) === */
.avatar-aura-wrap.avatar-aura-guardian::before,
.user-nav-avatar-box.avatar-aura-guardian::before {
  background: radial-gradient(circle,
      transparent 40%,
      rgba(0, 191, 255, 0.7) 65%,
      rgba(0, 0, 255, 0.4) 90%,
      transparent 100%);
  animation: aura-guardian-pulse 1.2s ease-in-out infinite alternate;
  opacity: 1;
  inset: -5px;
}

.avatar-aura-wrap.avatar-aura-guardian::after,
.user-nav-avatar-box.avatar-aura-guardian::after {
  background: conic-gradient(from 0deg,
      rgba(0, 191, 255, 0.9) 0deg 20deg,
      transparent 20deg 40deg,
      rgba(0, 255, 255, 0.8) 40deg 60deg,
      transparent 60deg 80deg,
      rgba(0, 191, 255, 0.9) 80deg 100deg,
      transparent 100deg 120deg,
      rgba(0, 255, 255, 0.8) 120deg 140deg,
      transparent 140deg 160deg,
      rgba(0, 191, 255, 0.9) 160deg 180deg,
      transparent 180deg 200deg,
      rgba(0, 255, 255, 0.8) 200deg 220deg,
      transparent 220deg 240deg,
      rgba(0, 191, 255, 0.9) 240deg 260deg,
      transparent 260deg 280deg,
      rgba(0, 255, 255, 0.8) 280deg 300deg,
      transparent 300deg 320deg,
      rgba(0, 191, 255, 0.9) 320deg 340deg,
      transparent 340deg 360deg);
  animation: aura-guardian-spin 4s linear infinite forwards;
  opacity: 0.85;
  inset: -12px;
  filter: blur(1px);
}

@keyframes aura-guardian-pulse {
  from {
    filter: brightness(1);
    transform: scale(1);
  }

  to {
    filter: brightness(1.6) blur(1px);
    transform: scale(1.08);
  }
}

@keyframes aura-guardian-spin {
  from {
    transform: rotate(360deg);
  }

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

/* === IMORTAL (Nível 100) === */
.avatar-aura-wrap.avatar-aura-immortal::before,
.user-nav-avatar-box.avatar-aura-immortal::before {
  background: radial-gradient(circle,
      transparent 35%,
      rgba(138, 43, 226, 0.8) 60%,
      rgba(218, 112, 214, 0.5) 85%,
      transparent 100%);
  animation: aura-immortal-pulse 0.9s ease-in-out infinite alternate;
  opacity: 1;
  inset: -6px;
}

.avatar-aura-wrap.avatar-aura-immortal::after,
.user-nav-avatar-box.avatar-aura-immortal::after {
  background: conic-gradient(from 0deg,
      rgba(138, 43, 226, 0.9) 0deg 5deg,
      transparent 5deg 15deg,
      rgba(218, 112, 214, 0.7) 15deg 20deg,
      transparent 20deg 30deg,
      rgba(75, 0, 130, 0.9) 30deg 35deg,
      transparent 35deg 45deg,
      rgba(138, 43, 226, 0.9) 45deg 50deg,
      transparent 50deg 60deg,
      rgba(218, 112, 214, 0.7) 60deg 65deg,
      transparent 65deg 75deg,
      rgba(75, 0, 130, 0.9) 75deg 80deg,
      transparent 80deg 90deg,
      rgba(138, 43, 226, 0.9) 90deg 95deg,
      transparent 95deg 105deg,
      rgba(218, 112, 214, 0.7) 105deg 110deg,
      transparent 110deg 120deg,
      rgba(75, 0, 130, 0.9) 120deg 125deg,
      transparent 125deg 135deg,
      rgba(138, 43, 226, 0.9) 135deg 140deg,
      transparent 140deg 150deg,
      rgba(218, 112, 214, 0.7) 150deg 155deg,
      transparent 155deg 165deg,
      rgba(75, 0, 130, 0.9) 165deg 170deg,
      transparent 170deg 180deg,
      rgba(138, 43, 226, 0.9) 180deg 185deg,
      transparent 185deg 195deg,
      rgba(218, 112, 214, 0.7) 195deg 200deg,
      transparent 200deg 210deg,
      rgba(75, 0, 130, 0.9) 210deg 215deg,
      transparent 215deg 225deg,
      rgba(138, 43, 226, 0.9) 225deg 230deg,
      transparent 230deg 240deg,
      rgba(218, 112, 214, 0.7) 240deg 245deg,
      transparent 245deg 255deg,
      rgba(75, 0, 130, 0.9) 255deg 260deg,
      transparent 260deg 270deg,
      rgba(138, 43, 226, 0.9) 270deg 275deg,
      transparent 275deg 285deg,
      rgba(218, 112, 214, 0.7) 285deg 290deg,
      transparent 290deg 300deg,
      rgba(75, 0, 130, 0.9) 300deg 305deg,
      transparent 305deg 315deg,
      rgba(138, 43, 226, 0.9) 315deg 320deg,
      transparent 320deg 330deg,
      rgba(218, 112, 214, 0.7) 330deg 335deg,
      transparent 335deg 345deg,
      rgba(75, 0, 130, 0.9) 345deg 350deg,
      transparent 350deg 360deg);
  animation: aura-immortal-spin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  opacity: 0.9;
  inset: -20px;
  filter: blur(1.5px);
}

@keyframes aura-immortal-pulse {
  from {
    filter: brightness(1) hue-rotate(0deg);
    transform: scale(0.95);
  }

  to {
    filter: brightness(1.8) hue-rotate(20deg);
    transform: scale(1.1);
  }
}

@keyframes aura-immortal-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.05);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* ===== AURAS DA LOJA (classes usadas pelo perfil.html) ===== */

/* AURAS DA LOJA - COMPATIBILITY OVERRIDES */
.avatar-aura-susanoo {
  border-radius: 50%;
  box-shadow:
    0 0 25px #9400d3,
    0 0 50px #4b0082;
}

.avatar-aura-stands {
  border-radius: 50%;
  box-shadow: 0 0 20px #9b59b6;
}

.avatar-aura-dragon {
  border-radius: 50%;
}

.avatar-aura-void {
  border-radius: 50%;
}

.aura_sakura {
  box-shadow:
    0 0 15px #f9c,
    0 0 35px #ffb6c1,
    0 0 55px #fff;
  border: 3px solid #f9c !important;
  border-radius: 50%;
  animation: aura-pulse-generic 2.5s infinite alternate;
}

.aura_infinity {
  box-shadow:
    0 0 30px #04f,
    0 0 60px #000,
    inset 0 0 25px #fff;
  border: 3px solid #fff !important;
  border-radius: 50%;
  animation: aura-float 4s infinite ease-in-out;
}

.aura_void_saitama {
  box-shadow:
    0 0 50px #fff,
    0 0 100px rgba(255, 255, 255, 0.4),
    inset 0 0 20px rgba(0, 0, 0, 0.5);
  border: 4px solid #eee !important;
  border-radius: 50%;
  animation: aura-void 2.5s infinite alternate;
}

@keyframes aura-pulse-fire {
  0% {
    filter: brightness(1) contrast(1.2);
    transform: scale(1);
  }

  100% {
    filter: brightness(1.4) contrast(1.5);
    transform: scale(1.04);
  }
}

@keyframes aura-pulse-lightning {
  0% {
    transform: translate(0, 0) skewX(0deg);
    opacity: 0.9;
  }

  25% {
    transform: translate(1px, -1px) skewX(1deg);
    opacity: 1;
  }

  50% {
    transform: translate(-1px, 1px) skewX(-1deg);
    opacity: 0.8;
  }

  100% {
    transform: translate(0, 0) skewX(0deg);
    opacity: 1;
  }
}

@keyframes aura-pulse-generic {
  from {
    transform: scale(1);
    opacity: 0.8;
  }

  to {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes aura-fade {
  from {
    filter: grayscale(1) blur(1px);
  }

  to {
    filter: grayscale(0) blur(0px);
  }
}

@keyframes aura-float {

  0%,
  100% {
    transform: translateY(-1px);
  }

  50% {
    transform: translateY(-5px) scale(1.02);
  }
}

@keyframes aura-void {
  0% {
    box-shadow:
      0 0 40px #fff,
      0 0 80px rgba(255, 255, 255, 0.3);
  }

  100% {
    box-shadow:
      0 0 70px #fff,
      0 0 130px rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
  }
}

.profile-banner-custom {
  background-size: cover !important;
  background-position: center !important;
}

/* FONTES DINÂMICAS PARA H1 "Catálogo de" */
.theme-ciano,
.theme-default {
  --title-font: "Bangers", cursive;
}

.theme-verde,
.theme-ben10 {
  --title-font: "Audiowide", cursive;
}

.theme-dourado,
.theme-vinland,
.theme-natal,
.theme-zenkai {
  --title-font: "Righteous", cursive;
}

.theme-vermelho,
.theme-aot {
  --title-font: "Black Ops One", cursive;
}

.theme-roxo,
.theme-tt-classic {
  --title-font: "Lilita One", cursive;
}

.theme-laranja,
.theme-mutant-rex {
  --title-font: "Fredoka One", cursive;
}

.theme-azul,
.theme-regular-show {
  --title-font: "Nunito", sans-serif;
}

.theme-verde-escuro,
.theme-demon-slayer {
  --title-font: "Bangers", cursive;
}

.theme-branco,
.theme-vagabond {
  --title-font: "Poppins", sans-serif;
}

.theme-aqua-verde {
  --title-font: "Righteous", cursive;
}

.theme-abismo {
  --title-font: "Black Ops One", cursive;
}

.header-main h1 {
  font-family: var(--title-font, "Bangers");
}

/* Botão de Favorito nos Cards */
.card-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-fav-btn:hover {
  transform: scale(1.15);
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.5);
}

.card-fav-btn.active {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4);
}

/* ===== PERKS DE ITENS ESPECIAIS (PERFIL) ===== */

/* 1. Moldura Elite (Frame Dourado) */
.frame-dourado {
  border: 3px solid gold !important;
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.6),
    inset 0 0 10px rgba(255, 215, 0, 0.3) !important;
  position: relative;
  animation: frame-glow 2s infinite alternate;
}

@keyframes frame-glow {
  from {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  }

  to {
    box-shadow:
      0 0 25px rgba(255, 215, 0, 0.8),
      0 0 40px rgba(255, 215, 0, 0.2);
  }
}

/* 2. Modo Cinema (Ambiental) */
body.modo-cinema {
  background: #050505 !important;
  background-image: none !important;
}

body.modo-cinema .profile-shell,
body.modo-cinema .profile-main,
body.modo-cinema .history-sidebar {
  background: rgba(0, 0, 0, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* 3. Painel Premium (Dashboard) */
.premium-dashboard-badge {
  background: linear-gradient(45deg, #ffd700, #ffa500);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.premium-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px dashed rgba(var(--primary-rgb), 0.3);
}

/* 4. Placa de Colecionador */
.collector-plaque {
  background: linear-gradient(135deg, #e5e4e2 0%, #b4b4b4 50%, #e5e4e2 100%);
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 6px 12px;
  margin-top: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.collector-plaque::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  animation: plaque-shimmer 3s infinite;
}

@keyframes plaque-shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }

  100% {
    transform: translateX(100%) translateY(100%);
  }
}

.plaque-text {
  color: #333;
  font-family: "Bangers", cursive;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* 5. Lista Destaque (Favoritos) — Premium */
.destaque-favoritos .fav-card {
  position: relative;
  border: 2px solid rgba(var(--primary-rgb), 0.5) !important;
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2);
  animation: fav-highlight-pulse 2s infinite ease-in-out;
}

.fav-pin {
  position: absolute;
  top: -10px;
  left: -8px;
  font-size: 1.5rem;
  z-index: 10;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
  animation: pinBounce 1.5s infinite ease-in-out;
  pointer-events: none;
}

@keyframes fav-highlight-pulse {
  0% {
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.4);
  }

  50% {
    box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.5);
    border-color: var(--primary);
  }

  100% {
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.4);
  }
}

@keyframes pinBounce {

  0%,
  100% {
    transform: translateY(-1px) rotate(-5deg);
  }

  50% {
    transform: translateY(-5px) rotate(5deg);
  }
}

/* 6. Botões de Favorito */
.card-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-size: 1rem;
}

.card-fav-btn:hover {
  transform: scale(1.2);
  background: rgba(var(--primary-rgb), 0.8);
  border-color: var(--primary);
  box-shadow: 0 0 15px var(--primary);
}

.card-fav-btn.active,
.fav-star.active,
#detailFavBtn.active {
  color: #ffca28 !important;
  background: rgba(var(--primary-rgb), 0.2) !important;
  border-color: #ffca28 !important;
  text-shadow:
    0 0 12px rgba(255, 202, 40, 0.9),
    0 0 20px rgba(255, 202, 40, 0.4);
  animation: starPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 1 !important;
}

@keyframes starPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.4);
  }

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

#detailFavBtn {
  transition: all 0.3s ease;
}

#detailFavBtn:hover {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

/* ===== FAVORITOS DESTACADOS (INVENTÁRIO STYLE) ===== */
.equipped-ribbon {
  position: absolute;
  top: 15px;
  right: -30px;
  background: #22c55e;
  color: #fff;
  padding: 5px 35px;
  font-weight: 900;
  font-size: 0.6rem;
  transform: rotate(45deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card.highlighted-fav {
  border-color: var(--primary) !important;
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4) !important;
  transform: translateY(-5px) scale(1.02);
}

.btn-equip-fav {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-unequip-fav {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid #22c55e;
  border-radius: 8px;
}

/* Selo de favorito nos cards (discreto; a estrela já indica no canto superior esquerdo) */
.fav-ribbon {
  position: absolute;
  bottom: 8px;
  right: 8px;
  left: auto;
  top: auto;
  transform: none;
  margin: 0;
  max-width: calc(100% - 56px);
  padding: 3px 7px;
  font-weight: 600;
  font-size: 0.5rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(var(--primary-rgb), 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  z-index: 12;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Novo Indicador de Equipado Discreto */
.equipped-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background: #22c55e;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
  z-index: 20;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  animation: dotPulse 2s infinite;
}

@keyframes dotPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.8);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
  }
}

.inventory-item.equipped {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, 0.05) !important;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.15) !important;
}

.card {
  position: relative;
  overflow: hidden;
}

/* Estrela de Favoritos Unificada e Premium */
.fav-star {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  width: 34px !important;
  height: 34px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1.3rem !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  z-index: 30 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.fav-star-sm {
  width: 28px !important;
  height: 28px !important;
  font-size: 0.9rem !important;
}

.fav-star.is-hidden {
  display: none !important;
}

.fav-star:hover {
  transform: scale(1.15) rotate(15deg);
  background: rgba(var(--primary-rgb), 0.6) !important;
  border-color: var(--primary) !important;
}

.fav-star.active {
  background: var(--primary) !important;
  color: #ffca28 !important;
  border-color: #ffca28 !important;
  box-shadow: 0 0 20px rgba(255, 202, 40, 0.4) !important;
  text-shadow: 0 0 10px rgba(255, 202, 40, 0.8) !important;
}

.fav-star-container {
  position: relative;
  display: inline-block;
}

/* ===== SEARCH BAR: lupa + texto minúsculo ===== */
/* Texto do placeholder em minúsculo e fonte normal */
.search-bar input::placeholder {
  text-transform: none !important;
  font-family: 'Inter', 'Poppins', system-ui, sans-serif !important;
  font-weight: 400 !important;
}

/* Ícone de lupa via SVG inline no background */
.search-bar input {
  padding-left: 42px !important;
}

.search-bar input,
.theme-cromatico .search-bar input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23888888' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 16px 16px !important;
}
/* Mesma sobrescrita para tema cromático (que usa background shorthand com !important) */
.theme-cromatico .search-bar input {
  background-color: hsla(var(--chromatic-hue), 88%, 58%, 0.06) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  text-transform: none !important;
}



/* ===== CUSTOM SELECT (search-bar) ===== */
.cs-wrapper {
  flex: 1;
  min-width: 140px;
  position: relative;
  font-size: 0.95rem;
}

.cs-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 12px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: all var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-trigger-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.cs-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.cs-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cs-wrapper.open .cs-trigger {
  border-color: var(--primary);
  box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.5), 0 0 10px rgba(var(--primary-rgb), 0.3);
}

.cs-wrapper.open .cs-arrow {
  transform: rotate(180deg);
  color: var(--primary);
}

.cs-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bg-surface);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(var(--primary-rgb), 0.15);
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

.cs-dropdown::-webkit-scrollbar { width: 5px; }
.cs-dropdown::-webkit-scrollbar-track { background: transparent; }
.cs-dropdown::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }

.cs-dropdown.open {
  display: block;
  animation: cs-fade-in 0.15s ease;
}

@keyframes cs-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(-1px); }
}

.cs-option {
  padding: 10px 18px;
  cursor: pointer;
  color: var(--text-main);
  font-size: 0.93rem;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-option:hover {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
}

.cs-option.selected {
  background: rgba(var(--primary-rgb), 0.28);
  color: var(--primary);
  font-weight: 600;
}

/* Tema cromático */
.theme-cromatico .cs-trigger {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.06);
  border-color: hsla(var(--chromatic-hue), 88%, 58%, 0.3);
}

.theme-cromatico .cs-wrapper.open .cs-trigger {
  border-color: hsla(var(--chromatic-hue), 88%, 62%, 0.8);
  box-shadow: 0 0 18px hsla(var(--chromatic-hue), 88%, 58%, 0.4);
}

.theme-cromatico .cs-dropdown {
  background: hsla(var(--chromatic-hue), 20%, 10%, 0.97);
  border-color: hsla(var(--chromatic-hue), 88%, 58%, 0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px hsla(var(--chromatic-hue), 88%, 58%, 0.15);
}

.theme-cromatico .cs-dropdown::-webkit-scrollbar-thumb {
  background: hsla(var(--chromatic-hue), 88%, 62%, 1);
}

.theme-cromatico .cs-option:hover {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.18);
  color: hsla(var(--chromatic-hue), 88%, 75%, 1);
}

.theme-cromatico .cs-option.selected {
  background: hsla(var(--chromatic-hue), 88%, 58%, 0.28);
  color: hsla(var(--chromatic-hue), 88%, 75%, 1);
}

/* Customize Native Spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  width: 30px;
  background: rgba(0, 0, 0, 0.1) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23aaaaaa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 9 12 4 17 9"></polyline><polyline points="7 15 12 20 17 15"></polyline></svg>') no-repeat center center;
  background-size: 14px;
  border-left: 1px solid var(--border);
  opacity: 0.8;
  cursor: pointer;
  height: 100%;
}

input[type="number"]::-webkit-inner-spin-button:hover,
input[type="number"]::-webkit-outer-spin-button:hover {
  opacity: 1;
  background-color: rgba(var(--primary-rgb), 0.2);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 9 12 4 17 9"></polyline><polyline points="7 15 12 20 17 15"></polyline></svg>');
}

/* Tema Cromático */
.theme-cromatico input[type="number"]::-webkit-inner-spin-button,
.theme-cromatico input[type="number"]::-webkit-outer-spin-button {
  background-color: rgba(255, 255, 255, 0.05);
  border-left-color: rgba(255, 255, 255, 0.2);
}
.theme-cromatico input[type="number"]::-webkit-inner-spin-button:hover,
.theme-cromatico input[type="number"]::-webkit-outer-spin-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Password Strength & Generator */
.password-strength-container {
  margin-top: 8px;
}
.password-strength-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
  display: flex;
}
.password-strength-fill {
  height: 100%;
  width: 0%;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.password-strength-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}
.btn-generate-pwd {
  background: none;
  border: 1px dashed var(--primary);
  color: var(--primary);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 6px;
  width: 100%;
}
.btn-generate-pwd:hover {
  background: rgba(var(--primary-rgb), 0.1);
}

/* CURSORS FUTURIST THEME (Now uses cursor-effects JS library) */

/* === AURA SAIYAJIN (Rare) === */
.avatar-aura-wrap.aura_saiyajin::before,
.user-nav-avatar-box.aura_saiyajin::before {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(50, 255, 50, 0.9) 0%,
      rgba(0, 200, 0, 0.7) 25%,
      rgba(0, 100, 0, 0.45) 50%,
      transparent 75%),
    radial-gradient(circle at 30% 25%,
      rgba(150, 255, 150, 0.65) 0%,
      rgba(50, 200, 50, 0.4) 35%,
      transparent 65%),
    radial-gradient(circle at 70% 75%,
      rgba(0, 255, 100, 0.55) 0%,
      transparent 55%);
  filter: blur(8px);
  animation: aura-saiyajin-zap 0.9s ease-in-out infinite alternate;
}

.avatar-aura-wrap.aura_saiyajin::after,
.user-nav-avatar-box.aura_saiyajin::after {
  inset: -13px;
  filter: blur(14px);
  background: conic-gradient(from 20deg,
      rgba(100, 255, 100, 0.95),
      rgba(0, 200, 50, 0.82),
      rgba(0, 100, 0, 0.72),
      rgba(50, 200, 50, 0.85),
      rgba(100, 255, 100, 0.95));
  animation: aura-fx-rotate 4s linear infinite;
  opacity: 0.95;
}

@keyframes aura-saiyajin-zap {
  0%   { opacity: 0.8;  filter: blur(7px)  brightness(1);    }
  40%  { opacity: 1;    filter: blur(12px) brightness(1.5);  }
  60%  { opacity: 0.85; filter: blur(8px)  brightness(1.1);  }
  100% { opacity: 1;    filter: blur(11px) brightness(1.35); }
}

/* === AURA SHINIGAMI (Epic) === */
.avatar-aura-wrap.aura_shinigami::before,
.user-nav-avatar-box.aura_shinigami::before {
  background:
    radial-gradient(circle at 50% 55%,
      rgba(10, 0, 30, 1) 0%,
      rgba(120, 0, 220, 0.9) 30%,
      rgba(255, 0, 0, 0.8) 55%,
      transparent 85%),
    radial-gradient(circle at 30% 30%,
      rgba(139, 0, 0, 0.8) 0%,
      transparent 70%),
    radial-gradient(circle at 70% 70%,
      rgba(100, 0, 200, 0.7) 0%,
      transparent 65%);
  filter: blur(9px);
  animation: aura-shinigami-pulse 3s ease-in-out infinite alternate;
}

.avatar-aura-wrap.aura_shinigami::after,
.user-nav-avatar-box.aura_shinigami::after {
  inset: -15px;
  filter: blur(16px);
  background: conic-gradient(from 60deg,
      rgba(120, 0, 255, 1),
      rgba(30, 0, 90, 1),
      rgba(200, 0, 0, 1),
      rgba(60, 0, 150, 1),
      rgba(120, 0, 255, 1));
  animation: aura-fx-rotate 5.5s linear infinite;
  opacity: 1;
}

@keyframes aura-shinigami-pulse {
  0%   { opacity: 0.9; filter: blur(10px)  brightness(1.1); }
  50%  { opacity: 1;    filter: blur(14px) brightness(1.6); }
  100% { opacity: 0.95;  filter: blur(12px)  brightness(1.2); }
}

/* ===================================================== */
/* ===== DECORAÇÕES DO TEMA NATAL (JS INJECTED)      ===== */
/* ===================================================== */
#natal-decorations {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* --- NEVE --- */
.christmas-snowflakes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.christmas-snowflakes .snowflake {
  position: absolute;
  top: -10vh;
  color: #fff;
  font-size: 1.2em;
  opacity: 0.8;
  animation: fall linear infinite;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
.christmas-snowflakes .snowflake:nth-child(2n) { font-size: 0.8em; animation-duration: 10s; left: 10%; }
.christmas-snowflakes .snowflake:nth-child(3n) { font-size: 1.5em; animation-duration: 12s; left: 25%; }
.christmas-snowflakes .snowflake:nth-child(4n) { font-size: 1em; animation-duration: 8s; left: 40%; }
.christmas-snowflakes .snowflake:nth-child(5n) { font-size: 1.2em; animation-duration: 15s; left: 55%; }
.christmas-snowflakes .snowflake:nth-child(6n) { font-size: 0.9em; animation-duration: 9s; left: 70%; }
.christmas-snowflakes .snowflake:nth-child(7n) { font-size: 1.4em; animation-duration: 11s; left: 85%; }
.christmas-snowflakes .snowflake:nth-child(8n) { left: 95%; }
.christmas-snowflakes .snowflake:nth-child(odd) { animation-delay: -5s; }
.christmas-snowflakes .snowflake:nth-child(even) { animation-delay: -2s; }
.christmas-snowflakes .snowflake:nth-child(9n) { left: 5%; animation-duration: 14s; }
.christmas-snowflakes .snowflake:nth-child(10n) { left: 15%; animation-duration: 9s; }
.christmas-snowflakes .snowflake:nth-child(11n) { left: 35%; animation-duration: 11s; }
.christmas-snowflakes .snowflake:nth-child(12n) { left: 65%; animation-duration: 13s; }
.christmas-snowflakes .snowflake:nth-child(13n) { left: 80%; animation-duration: 8s; }

@keyframes fall {
  0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) translateX(30px) rotate(360deg); opacity: 0; }
}

/* --- PISCA-PISCAS --- */
.christmas-lights {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  margin: 0;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  list-style: none;
  border-top: 2px solid #113311;
  box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.5);
}
.christmas-lights li {
  width: 14px;
  height: 22px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  margin-top: -2px;
  position: relative;
  animation: flash 1.5s infinite;
}
.christmas-lights li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 4px;
  width: 6px;
  height: 5px;
  background: #222;
  border-radius: 2px;
}
.christmas-lights li:nth-child(4n+1) { background: #d42426; box-shadow: 0px 5px 24px 3px #d42426; }
.christmas-lights li:nth-child(4n+2) { background: #165b33; box-shadow: 0px 5px 24px 3px #165b33; animation-delay: 0.4s; }
.christmas-lights li:nth-child(4n+3) { background: #f8b229; box-shadow: 0px 5px 24px 3px #f8b229; animation-delay: 0.8s; }
.christmas-lights li:nth-child(4n+4) { background: #ffffff; box-shadow: 0px 5px 24px 3px #ffffff; animation-delay: 1.2s; }

@keyframes flash {
  0%, 100% { opacity: 1; filter: brightness(1.2); }
  50% { opacity: 0.3; filter: brightness(0.5); }
}

/* --- PRESENTES --- */
.christmas-gift {
  position: absolute;
  bottom: 20px;
  font-size: 4.5rem;
  filter: drop-shadow(0 0 20px rgba(248, 178, 41, 0.4));
  animation: float-gift 4s ease-in-out infinite;
}
.christmas-gift.left {
  left: 40px;
  transform-origin: bottom center;
}
.christmas-gift.right {
  right: 40px;
  animation-delay: -2s;
}
@keyframes float-gift {
  0%, 100% { transform: translateY(-1px) rotate(-3deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
}

/* --- BORDAS FESTIVAS --- */
#natal-decorations::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 40px 20px rgba(255, 255, 255, 0.25), inset 0 0 120px 40px rgba(212, 36, 38, 0.2);
  border: 4px solid rgba(248, 178, 41, 0.6);
  z-index: 9998;
  border-radius: 8px;
}

/* --- OVERRIDE BORDAS FESTIVAS ANTERIORES --- */
#natal-decorations::after {
  display: none !important;
}

/* ===================================================== */
/* ===== DECORAÇÕES DO TEMA ABISMO ESTELAR              ===== */
/* ===================================================== */
#abismo-decorations {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  /* Gradientes estáticos substituem os grandes elementos com blur. */
  background:
    radial-gradient(ellipse 52% 42% at 0% 0%, rgba(55, 76, 150, 0.18), transparent 72%),
    radial-gradient(ellipse 46% 40% at 100% 100%, rgba(90, 124, 210, 0.12), transparent 74%);
  contain: strict;
}

.abismo-stars {
  position: absolute;
  inset: 0;
}

.abismo-star {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #eef5ff;
}

.abismo-star--bright {
  width: 2.5px !important;
  height: 2.5px !important;
  background: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  #abismo-decorations { display: none; }
}

/* --- DIAGONAIS DE NATAL --- */
.corner-decor {
  position: absolute;
  width: 300px;
  height: 300px;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.9;
}
.corner-decor.top-left {
  top: 0;
  left: 0;
  background: radial-gradient(circle at top left, rgba(22, 91, 51, 0.5) 0%, rgba(212, 36, 38, 0.35) 45%, transparent 70%);
}
.corner-decor.bottom-right {
  bottom: 0;
  right: 0;
  background: radial-gradient(circle at bottom right, rgba(212, 36, 38, 0.5) 0%, rgba(22, 91, 51, 0.35) 45%, transparent 70%);
}
.corner-decor::after {
  position: absolute;
  font-size: 3.5rem;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
}
.corner-decor.top-left::after {
  content: "";
  top: 20px;
  left: 20px;
  transform: rotate(-10deg);
}
.corner-decor.bottom-right::after {
  content: "";
  bottom: 25px;
  right: 25px;
  font-size: 4rem;
  color: #f8b229;
}

body.site-guide-open {
  overflow: hidden;
}

.site-guide-fab {
  position: fixed;
  left: 12px;
  bottom: 92px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background: rgba(8, 16, 30, 0.86);
  color: var(--primary);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), 0 0 22px rgba(var(--primary-rgb), 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-guide-fab:hover,
.site-guide-fab:focus-visible {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.55);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38), 0 0 30px rgba(var(--primary-rgb), 0.28);
}

.site-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(10px, 2vh, 18px);
  background:
    radial-gradient(circle at top, rgba(var(--primary-rgb), 0.18), transparent 30%),
    rgba(3, 8, 18, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.site-guide-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.site-guide-card {
  width: min(980px, 100%);
  max-height: calc(100vh - clamp(20px, 4vh, 36px));
  border-radius: 22px;
  border: 1px solid rgba(var(--primary-rgb), 0.24);
  background:
    radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.16), transparent 28%),
    linear-gradient(180deg, rgba(10, 18, 34, 0.98), rgba(5, 10, 22, 0.99));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 42px rgba(var(--primary-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.site-guide-header {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 24px 16px;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.16);
  flex: none;
}

.site-guide-avatar {
  width: 112px;
  height: 112px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 28px rgba(var(--primary-rgb), 0.22);
  flex: none;
}

.site-guide-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-guide-kicker {
  margin: 0 0 6px;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-guide-title {
  margin: 0;
  font-family: 'Bangers', cursive;
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  line-height: 0.95;
  color: var(--primary);
  text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.45);
}

.site-guide-subtitle {
  margin: 8px 0 0;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 64ch;
}

.site-guide-close {
  align-self: flex-start;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  font-size: 1.3rem;
  cursor: pointer;
}

.site-guide-body {
  padding: 18px 24px 22px;
  overflow-y: auto;
  min-height: 0;
}

.site-guide-meta,
.site-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.site-guide-meta {
  margin-bottom: 14px;
}

.site-guide-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 800;
}

.site-guide-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  margin-bottom: 14px;
}

.site-guide-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.45));
  box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.3);
  transition: width 0.25s ease;
}

.site-guide-step {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
  gap: 16px;
  align-items: start;
}

.site-guide-copy,
.site-guide-next {
  border: 1px solid rgba(var(--primary-rgb), 0.16);
  border-radius: 18px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
}

.site-guide-copy h4 {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 1.1rem;
}

.site-guide-copy p,
.site-guide-next p {
  margin: 0 0 12px;
  color: var(--text-main);
  line-height: 1.55;
}

.site-guide-copy ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text-main);
}

.site-guide-copy li {
  margin: 0.45rem 0;
  line-height: 1.45;
  color: var(--text-main);
}

.site-guide-next-label {
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-guide-next strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.1rem;
  color: var(--text-main);
}

.site-guide-next p {
  margin: 0;
  color: var(--text-muted);
}

.site-guide-actions {
  margin-top: 16px;
}

.site-guide-actions .btn {
  min-height: 42px;
}

@media (max-width: 860px) {
  .site-guide-header,
  .site-guide-step {
    grid-template-columns: 1fr;
  }

  .site-guide-header {
    position: relative;
    padding-right: 72px;
  }

  .site-guide-close {
    position: absolute;
    top: 14px;
    right: 14px;
  }

  .site-guide-avatar {
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 560px) {
  .site-guide-fab {
    left: 10px;
    bottom: 86px;
  }

  .site-guide-overlay {
    padding: 8px;
  }

  .site-guide-card {
    border-radius: 18px;
    max-height: calc(100vh - 16px);
  }

  .site-guide-header {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 60px 14px 14px;
  }

  .site-guide-avatar {
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }

  .site-guide-kicker {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }

  .site-guide-title {
    font-size: 1.65rem;
  }

  .site-guide-subtitle {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .site-guide-body {
    padding: 14px;
  }

  .site-guide-pill {
    padding: 7px 10px;
    font-size: 0.72rem;
  }

  .site-guide-copy,
  .site-guide-next {
    padding: 14px;
  }

  .site-guide-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .site-guide-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ======================================================== */
/* MOBILE APP LAYOUT OVERRIDES                              */
/* ======================================================== */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .navbar {
    height: 72px !important;
    padding: 0 12px !important;
  }

  .navbar-brand {
    gap: 8px !important;
  }

  .navbar-brand img {
    height: 40px !important;
  }

  .container,
  .profile-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .page-header h1 {
    font-size: 1.45rem !important;
    line-height: 1.1 !important;
  }

  .page-header p {
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
  }

  .search-bar,
  .page-header .search-bar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }

  .search-bar input,
  .search-bar select,
  .search-bar button {
    width: 100% !important;
  }

  .cards-grid,
  .reader-grid,
  .items-grid,
  .anime-list-grid,
  .catalog-grid,
  .manga-grid,
  .episodes-grid,
  .store-grid,
  .loja-grid,
  .users-grid,
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .card,
  .episode-card,
  .manga-item,
  .volume-card,
  .edition-card,
  .store-card,
  .loja-item,
  .user-card {
    border-radius: 14px !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .btn-ghost {
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  .profile-shell {
    min-height: calc(100dvh - 72px) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .profile-layout {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .profile-main {
    padding: 16px !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  .history-sidebar {
    padding: 12px !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .history-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-right: 6px !important;
  }

  .history-item {
    padding: 10px !important;
    gap: 10px !important;
  }

  .history-item-actions {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }

  .history-action-btn {
    min-height: 42px !important;
    padding: 8px 10px !important;
  }

  .sidebar-footer {
    padding-top: 12px !important;
    margin-top: 12px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  #readerModal .modal,
  .site-fullscreen {
    width: 100vw !important;
    max-width: none !important;
  }

  #readerModal .modal {
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #readerModal .modal-header,
  .site-fullscreen .modal-header {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  #readerTitle,
  .site-fullscreen #readerTitle {
    font-size: 1rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  #readerFrame,
  .site-fullscreen iframe {
    height: calc(100dvh - 92px) !important;
    min-height: 0 !important;
  }
}