/* =====================================================================
   🌈 THEME ENGINE PREMIUM — MyStockStick
   Cada paleta é uma experiência imersiva completa.
   Substitui o bloco de tema antigo no seu style.css
   ===================================================================== */

/* ─────────────────────────────────────────────
   KEYFRAMES GLOBAIS DO ENGINE
   ───────────────────────────────────────────── */
/* 🚨 GATILHO DE SEGURANÇA PARA OS FUNDOS FUNCIONAREM */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  transition: all 0.5s ease;
  pointer-events: none;
}
/* Matcha */
@keyframes matcha-sway {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-6px) rotate(1deg); }
}
@keyframes matcha-ink-drop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes matcha-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Pastel */
@keyframes pastel-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  33%       { transform: translateY(-8px) scale(1.01); }
  66%       { transform: translateY(-4px) scale(0.99); }
}
@keyframes pastel-sparkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%       { opacity: 1; transform: scale(1) rotate(180deg); }
}
@keyframes pastel-blush {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 168, 212, 0); }
  50%       { box-shadow: 0 0 30px 8px rgba(249, 168, 212, 0.25); }
}

/* Dark Academia */
@keyframes academia-flicker {
  0%, 92%, 100% { opacity: 1; }
  94%            { opacity: 0.85; }
  96%            { opacity: 1; }
  98%            { opacity: 0.9; }
}
@keyframes academia-sepia-vignette {
  0%, 100% { box-shadow: inset 0 0 80px rgba(101, 67, 33, 0.18); }
  50%       { box-shadow: inset 0 0 120px rgba(101, 67, 33, 0.28); }
}
@keyframes academia-dust {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-120px) translateX(30px) rotate(360deg); opacity: 0; }
}

/* Cyber Pop */
@keyframes cyber-scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes cyber-glitch {
  0%, 90%, 100% { clip-path: none; transform: none; }
  91%           { clip-path: inset(20% 0 50% 0); transform: translate(-3px, 0); }
  93%           { clip-path: inset(60% 0 20% 0); transform: translate(3px, 0); }
  95%           { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 2px); }
}
@keyframes cyber-neon-pulse {
  0%, 100% { text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff; }
  50%       { text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff; }
}
@keyframes cyber-border-race {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes cyber-rgb-shift {
  0%   { filter: hue-rotate(0deg) saturate(1.4); }
  25%  { filter: hue-rotate(90deg) saturate(1.8); }
  50%  { filter: hue-rotate(180deg) saturate(1.4); }
  75%  { filter: hue-rotate(270deg) saturate(1.8); }
  100% { filter: hue-rotate(360deg) saturate(1.4); }
}


/* =====================================================================
   🍵 MATCHA GREEN — Zen Japanese Tea House
   Paleta: verde sálvia, creme de arroz, tinta nanquim, bambu
   Vibe: calma contemplativa, minimalismo zen, paper texture
   ===================================================================== */

body[data-theme="matcha"] {
  --theme-primary:    #2d6a4f;
  --theme-accent:     #40916c;
  --theme-soft:       #b7e4c7;
  --theme-paper:      #f0ece3;
  --theme-ink:        #1b3a2d;
  --theme-muted:      #74c69d;
  font-family: 'Georgia', 'Hiragino Mincho Pro', serif;
}

/* Fundo: camada de textura de papel washi + gradiente chá verde */
body[data-theme="matcha"]::before {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(45, 106, 79, 0.03) 2px,
      rgba(45, 106, 79, 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 30px,
      rgba(45, 106, 79, 0.02) 30px,
      rgba(45, 106, 79, 0.02) 32px
    ),
    linear-gradient(
      160deg,
      rgba(212, 237, 218, 0.88) 0%,
      rgba(167, 215, 190, 0.92) 40%,
      rgba(140, 200, 165, 0.90) 70%,
      rgba(183, 228, 199, 0.85) 100%
    ),
    url('/backapp.png') !important;
  background-size: 4px 4px, 32px 32px, 100% 100%, cover !important;
}

/* Header: transparência zen com borda bambuzal */
body[data-theme="matcha"] .app-header {
  background: rgba(240, 236, 227, 0.82) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  border-bottom: 2px solid rgba(45, 106, 79, 0.2) !important;
  box-shadow: 0 4px 20px rgba(27, 58, 45, 0.08) !important;
}

body[data-theme="matcha"] .app-header h1,
body[data-theme="matcha"] .logo-text h1 {
  color: #1b3a2d !important;
  font-family: 'Georgia', serif !important;
  letter-spacing: 0.02em !important;
}

body[data-theme="matcha"] .logo-subtitle {
  color: #2d6a4f !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Chat area — papel de pergaminho */
body[data-theme="matcha"] .chat-area {
  background: transparent !important;
}

/* Mensagens — cartões de papel washi */
body[data-theme="matcha"] .message-bubble {
  background: rgba(240, 236, 227, 0.88) !important;
  border: 1px solid rgba(45, 106, 79, 0.18) !important;
  border-radius: 4px 16px 16px 16px !important;
  box-shadow:
    2px 3px 0 rgba(45, 106, 79, 0.08),
    0 8px 24px rgba(27, 58, 45, 0.06) !important;
  color: #1b3a2d !important;
  position: relative !important;
  animation: matcha-ink-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Decoração: traço de pincel no topo dos balões */
body[data-theme="matcha"] .message-bubble::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #40916c 0%, #74c69d 50%, transparent 100%);
  border-radius: 2px 2px 0 0;
  opacity: 0.6;
}

/* Input area — tatami mat feel */
body[data-theme="matcha"] .input-area {
  background: rgba(232, 228, 218, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(45, 106, 79, 0.2) !important;
}

body[data-theme="matcha"] .chat-input {
  background: rgba(255, 252, 245, 0.9) !important;
  border: 1.5px solid rgba(45, 106, 79, 0.25) !important;
  color: #1b3a2d !important;
  border-radius: 8px !important;
}

body[data-theme="matcha"] .chat-input:focus {
  border-color: #40916c !important;
  box-shadow: 0 0 0 3px rgba(64, 145, 108, 0.12) !important;
}

body[data-theme="matcha"] .chat-input::placeholder { color: #74c69d !important; }

/* Botão send — pincel de tinta */
body[data-theme="matcha"] .btn-send.active {
  background: linear-gradient(135deg, #2d6a4f, #40916c) !important;
  box-shadow:
    0 4px 15px rgba(45, 106, 79, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
}

body[data-theme="matcha"] .btn-send.active:hover {
  animation: matcha-sway 1s ease-in-out infinite !important;
}

/* Botões de estilo/modo */
body[data-theme="matcha"] .style-option {
  background: rgba(240, 236, 227, 0.85) !important;
  border-color: rgba(45, 106, 79, 0.3) !important;
  color: #1b3a2d !important;
  font-family: 'Georgia', serif !important;
}

body[data-theme="matcha"] .style-option.active,
body[data-theme="matcha"] .style-option:hover {
  background: rgba(64, 145, 108, 0.15) !important;
  border-color: #40916c !important;
  color: #2d6a4f !important;
}

/* Modais — shoji screen (biombo japonês) */
body[data-theme="matcha"] .modal-content {
  background: rgba(248, 245, 238, 0.97) !important;
  border: 1px solid rgba(45, 106, 79, 0.2) !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 1px rgba(45, 106, 79, 0.08),
    0 24px 64px rgba(27, 58, 45, 0.18) !important;
  animation: matcha-ink-drop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body[data-theme="matcha"] .modal-header {
  background: linear-gradient(135deg, rgba(45, 106, 79, 0.08), rgba(64, 145, 108, 0.06)) !important;
  border-bottom: 1px solid rgba(45, 106, 79, 0.15) !important;
}

body[data-theme="matcha"] .modal-header h3 {
  color: #1b3a2d !important;
  font-family: 'Georgia', serif !important;
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
}

body[data-theme="matcha"] .modal-close {
  color: #40916c !important;
  border: 1px solid rgba(64, 145, 108, 0.3) !important;
}

body[data-theme="matcha"] .modal-close:hover {
  background: rgba(45, 106, 79, 0.1) !important;
}

/* Popover de paletas */
body[data-theme="matcha"] .style-popover {
  background: rgba(248, 245, 238, 0.98) !important;
  border: 1px solid rgba(45, 106, 79, 0.2) !important;
  box-shadow: 0 12px 40px rgba(27, 58, 45, 0.15) !important;
}

body[data-theme="matcha"] .popover-header {
  color: #2d6a4f !important;
  border-bottom: 1px solid rgba(45, 106, 79, 0.15) !important;
}

body[data-theme="matcha"] .btn-palette:hover,
body[data-theme="matcha"] .btn-palette.active {
  background: rgba(64, 145, 108, 0.15) !important;
  color: #1b3a2d !important;
}

/* Token display */
body[data-theme="matcha"] .token-display {
  background: rgba(45, 106, 79, 0.1) !important;
  border-color: rgba(45, 106, 79, 0.25) !important;
  color: #1b3a2d !important;
}

/* Scrollbar zen */
body[data-theme="matcha"] ::-webkit-scrollbar-thumb {
  background: rgba(64, 145, 108, 0.4) !important;
  border-radius: 4px !important;
}


/* =====================================================================
   🌸 PASTEL SOFT — Dreamcore Candy Studio
   Paleta: algodão-doce, lavanda, pêssego, branco leite
   Vibe: kawaii etéreo, bolhas de sabão, doçura maximalista
   ===================================================================== */

body[data-theme="pastel"] {
  --theme-primary:    #f472b6;
  --theme-accent:     #e879f9;
  --theme-blue:       #93c5fd;
  --theme-yellow:     #fde68a;
  --theme-mint:       #a7f3d0;
  --theme-lavender:   #ddd6fe;
}

/* Fundo: mesh gradient de doces */
body[data-theme="pastel"]::before {
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(253, 230, 238, 0.9) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 10%, rgba(221, 214, 254, 0.8) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(191, 219, 254, 0.7) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 70%, rgba(167, 243, 208, 0.6) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 60%, rgba(253, 230, 138, 0.5) 0%, transparent 40%),
    linear-gradient(160deg, rgba(254, 242, 248, 0.95), rgba(245, 243, 255, 0.92)),
    url('/backapp.png') !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, cover !important;
}

/* Header: nuvem de açúcar */
body[data-theme="pastel"] .app-header {
  background: rgba(255, 248, 252, 0.85) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  border-bottom: 1.5px solid rgba(244, 114, 182, 0.2) !important;
  box-shadow:
    0 4px 30px rgba(244, 114, 182, 0.08),
    0 1px 0 rgba(255,255,255,0.9) inset !important;
}

body[data-theme="pastel"] .app-header h1,
body[data-theme="pastel"] .logo-text h1 {
  background: linear-gradient(135deg, #ec4899, #a855f7, #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
}

body[data-theme="pastel"] .logo-subtitle {
  color: #f472b6 !important;
  letter-spacing: 0.1em !important;
}

/* Mensagens — bolha de sabão iridescente */
body[data-theme="pastel"] .message-bubble {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1.5px solid rgba(244, 114, 182, 0.2) !important;
  border-radius: 20px 20px 20px 6px !important;
  box-shadow:
    0 4px 24px rgba(244, 114, 182, 0.1),
    0 1px 0 rgba(255,255,255,0.95) inset,
    inset 0 -1px 0 rgba(232, 121, 249, 0.1) !important;
  color: #4a1942 !important;
  
  /* 🚨 A CURA: Apagamos a animação bugada daqui! 
     Agora o balão vai usar a animação natural de entrada do app e as 
     estrelinhas continuam piscando na paz do Senhor. */
}

/* Estrelinhas decorativas nos balões */
body[data-theme="pastel"] .message-bubble::after {
  content: '✦';
  position: absolute;
  top: -10px;
  right: 12px;
  font-size: 14px;
  color: #f472b6;
  opacity: 0;
  animation: pastel-sparkle 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* Input area — candy bar */
body[data-theme="pastel"] .input-area {
  background: rgba(255, 248, 252, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1.5px solid rgba(244, 114, 182, 0.15) !important;
}

body[data-theme="pastel"] .chat-input {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1.5px solid rgba(244, 114, 182, 0.25) !important;
  border-radius: 16px !important;
  color: #4a1942 !important;
  transition: all 0.3s ease !important;
}

body[data-theme="pastel"] .chat-input:focus {
  border-color: #f472b6 !important;
  box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.15), 0 4px 20px rgba(244, 114, 182, 0.08) !important;
}

body[data-theme="pastel"] .chat-input::placeholder { color: #f9a8d4 !important; }

/* Botão send — coração pulsante */
body[data-theme="pastel"] .btn-send.active {
  background: linear-gradient(135deg, #f472b6, #e879f9, #c084fc) !important;
  box-shadow:
    0 4px 20px rgba(244, 114, 182, 0.4),
    0 0 0 3px rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
  animation: pastel-blush 2.5s ease-in-out infinite !important;
}

/* Estilo buttons */
body[data-theme="pastel"] .style-option {
  background: rgba(255, 248, 252, 0.9) !important;
  border: 1.5px solid rgba(244, 114, 182, 0.2) !important;
  color: #9d174d !important;
  border-radius: 20px !important;
  font-size: 12px !important;
}

body[data-theme="pastel"] .style-option.active,
body[data-theme="pastel"] .style-option:hover {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(232, 121, 249, 0.12)) !important;
  border-color: #f472b6 !important;
  box-shadow: 0 4px 12px rgba(244, 114, 182, 0.2) !important;
}

/* Modais — gift box encantado */
body[data-theme="pastel"] .modal-content {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(253, 242, 248, 0.97)) !important;
  border: 1.5px solid rgba(244, 114, 182, 0.2) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.9),
    0 20px 60px rgba(236, 72, 153, 0.15),
    0 8px 20px rgba(192, 132, 252, 0.1) !important;
  
}

body[data-theme="pastel"] .modal-header {
  background: linear-gradient(135deg, rgba(254, 242, 248, 0.98), rgba(245, 243, 255, 0.98)) !important;
  border-bottom: 1.5px solid rgba(244, 114, 182, 0.15) !important;
}

body[data-theme="pastel"] .modal-header h3 {
  background: linear-gradient(135deg, #ec4899, #a855f7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
}

body[data-theme="pastel"] .modal-close {
  color: #f472b6 !important;
  border: 1.5px solid rgba(244, 114, 182, 0.25) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.8) !important;
}

body[data-theme="pastel"] .modal-close:hover {
  background: rgba(244, 114, 182, 0.1) !important;
  transform: rotate(90deg) !important;
  transition: all 0.3s ease !important;
}

/* Popover */
body[data-theme="pastel"] .style-popover {
  background: rgba(255, 248, 252, 0.99) !important;
  border: 1.5px solid rgba(244, 114, 182, 0.2) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 50px rgba(236, 72, 153, 0.15) !important;
}

body[data-theme="pastel"] .btn-palette:hover,
body[data-theme="pastel"] .btn-palette.active {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(232, 121, 249, 0.1)) !important;
  color: #9d174d !important;
}

/* Tokens */
body[data-theme="pastel"] .token-display {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.1), rgba(192, 132, 252, 0.1)) !important;
  border-color: rgba(244, 114, 182, 0.2) !important;
  color: #9d174d !important;
}

/* Scrollbar */
body[data-theme="pastel"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f472b6, #c084fc) !important;
  border-radius: 10px !important;
}

/* Botões de ação */
body[data-theme="pastel"] .btn-download {
  background: linear-gradient(135deg, #ec4899, #a855f7) !important;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.3) !important;
  border-radius: 14px !important;
}


/* =====================================================================
   ☕ DARK ACADEMIA — Oxford Candlelight Library
   Paleta: pergaminho queimado, sepia, cobre envelhecido, tinta preta
   Vibe: biblioteca victoriana, luz de vela, papiro antigo
   ===================================================================== */

body[data-theme="dark_academia"] {
  --theme-primary:    #78350f;
  --theme-accent:     #b45309;
  --theme-parchment:  #fdf6e3;
  --theme-ink:        #1c1209;
  --theme-dust:       #d6cdc0;
  --theme-copper:     #c2862e;
}

/* Fundo: pergaminho envelhecido com manchas de tinta */
body[data-theme="dark_academia"]::before {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 80px,
      rgba(120, 53, 15, 0.025) 80px,
      rgba(120, 53, 15, 0.025) 82px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 80px,
      rgba(120, 53, 15, 0.02) 80px,
      rgba(120, 53, 15, 0.02) 82px
    ),
    radial-gradient(ellipse at 5% 5%, rgba(100, 60, 20, 0.15) 0%, transparent 35%),
    radial-gradient(ellipse at 95% 95%, rgba(80, 40, 10, 0.12) 0%, transparent 35%),
    linear-gradient(
      170deg,
      rgba(245, 235, 218, 0.95) 0%,
      rgba(235, 225, 205, 0.97) 30%,
      rgba(225, 210, 190, 0.95) 60%,
      rgba(215, 205, 185, 0.97) 100%
    ),
    url('/backapp.png') !important;
  background-size:
    114px 114px,
    114px 114px,
    100% 100%, 100% 100%, 100% 100%, cover !important;
  animation: academia-sepia-vignette 8s ease-in-out infinite !important;
}

/* Header: madeira nobre */
body[data-theme="dark_academia"] .app-header {
  background: rgba(28, 18, 9, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(194, 134, 46, 0.35) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(194, 134, 46, 0.2) !important;
}

body[data-theme="dark_academia"] .app-header h1,
body[data-theme="dark_academia"] .logo-text h1 {
  color: #f5e9d0 !important;
  font-family: 'Georgia', 'Palatino Linotype', serif !important;
  letter-spacing: 0.04em !important;
}

body[data-theme="dark_academia"] .logo-subtitle {
  color: #c2862e !important;
  letter-spacing: 0.15em !important;
  font-variant: small-caps !important;
}

/* Mensagens — cartas manuscritas à luz de vela */
body[data-theme="dark_academia"] .message-bubble {
  background: rgba(253, 246, 227, 0.92) !important;
  border: 1px solid rgba(120, 53, 15, 0.2) !important;
  border-left: 3px solid rgba(194, 134, 46, 0.5) !important;
  border-radius: 3px 12px 12px 3px !important;
  box-shadow:
    3px 3px 0 rgba(120, 53, 15, 0.08),
    0 8px 30px rgba(0, 0, 0, 0.08) !important;
  color: #1c1209 !important;
  font-family: 'Georgia', serif !important;
  animation: academia-flicker 12s ease-in-out infinite !important;
}

/* Linha decorativa de escrita */
body[data-theme="dark_academia"] .message-bubble::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(120, 53, 15, 0.15) 0px,
    rgba(120, 53, 15, 0.15) 20px,
    transparent 20px,
    transparent 24px
  );
}

/* Input area — escrivaninha de mogno */
body[data-theme="dark_academia"] .input-area {
  background: rgba(28, 18, 9, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(194, 134, 46, 0.3) !important;
}

body[data-theme="dark_academia"] .chat-input {
  background: rgba(253, 246, 227, 0.92) !important;
  border: 1px solid rgba(120, 53, 15, 0.3) !important;
  border-radius: 4px !important;
  color: #1c1209 !important;
  font-family: 'Georgia', serif !important;
  font-size: 14px !important;
}

body[data-theme="dark_academia"] .chat-input:focus {
  border-color: #c2862e !important;
  box-shadow: 0 0 0 2px rgba(194, 134, 46, 0.2), 0 4px 16px rgba(0,0,0,0.15) !important;
}

body[data-theme="dark_academia"] .chat-input::placeholder {
  color: rgba(120, 53, 15, 0.45) !important;
  font-style: italic !important;
}

/* Botão send — lacre de cera */
body[data-theme="dark_academia"] .btn-send.active {
  background: radial-gradient(circle at 40% 35%, #c2862e, #78350f) !important;
  box-shadow:
    0 4px 15px rgba(120, 53, 15, 0.4),
    inset 0 1px 0 rgba(255, 220, 150, 0.2) !important;
  border-radius: 50% !important;
}

/* Botões de estilo */
body[data-theme="dark_academia"] .style-option {
  background: rgba(28, 18, 9, 0.75) !important;
  border-color: rgba(194, 134, 46, 0.3) !important;
  color: #d6cdc0 !important;
  font-family: 'Georgia', serif !important;
  font-variant: small-caps !important;
  border-radius: 4px !important;
}

body[data-theme="dark_academia"] .style-option.active,
body[data-theme="dark_academia"] .style-option:hover {
  background: rgba(120, 53, 15, 0.35) !important;
  border-color: #c2862e !important;
  color: #f5e9d0 !important;
  box-shadow: 0 0 12px rgba(194, 134, 46, 0.15) !important;
}

/* Modais — vitrine de museu */
body[data-theme="dark_academia"] .modal-content {
  background: linear-gradient(
    145deg,
    rgba(253, 246, 227, 0.99),
    rgba(240, 228, 210, 0.99)
  ) !important;
  border: 1px solid rgba(120, 53, 15, 0.2) !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 0 3px rgba(194, 134, 46, 0.12),
    0 0 0 6px rgba(120, 53, 15, 0.06),
    0 30px 80px rgba(0, 0, 0, 0.25) !important;
  font-family: 'Georgia', serif !important;
}

body[data-theme="dark_academia"] .modal-header {
  background: linear-gradient(135deg, rgba(28, 18, 9, 0.05), rgba(120, 53, 15, 0.08)) !important;
  border-bottom: 1px solid rgba(120, 53, 15, 0.15) !important;
}

body[data-theme="dark_academia"] .modal-header h3 {
  color: #78350f !important;
  font-family: 'Georgia', 'Palatino Linotype', serif !important;
  letter-spacing: 0.05em !important;
  font-variant: small-caps !important;
}

body[data-theme="dark_academia"] .modal-close {
  color: #b45309 !important;
  border: 1px solid rgba(120, 53, 15, 0.25) !important;
  border-radius: 4px !important;
  background: rgba(253, 246, 227, 0.8) !important;
}

/* Scrollbar — régua de madeira */
body[data-theme="dark_academia"] ::-webkit-scrollbar-thumb {
  background: rgba(120, 53, 15, 0.4) !important;
  border-radius: 2px !important;
}

/* Popover */
body[data-theme="dark_academia"] .style-popover {
  background: rgba(253, 246, 227, 0.99) !important;
  border: 1px solid rgba(120, 53, 15, 0.2) !important;
  border-radius: 6px !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2), 3px 3px 0 rgba(120, 53, 15, 0.06) !important;
  font-family: 'Georgia', serif !important;
}

body[data-theme="dark_academia"] .popover-header {
  color: #78350f !important;
  font-variant: small-caps !important;
}

/* Tokens */
body[data-theme="dark_academia"] .token-display {
  background: rgba(28, 18, 9, 0.6) !important;
  border-color: rgba(194, 134, 46, 0.3) !important;
  color: #f5e9d0 !important;
}


/* =====================================================================
   🌌 CYBER POP — Neon Tokyo Arcade Underground
   Paleta: magenta elétrico, ciano neon, roxo vaporwave, preto void
   Vibe: distrito arcade de tóquio às 3am, glitch art, Y2K extremo
   ===================================================================== */

body[data-theme="cyberpop"] {
  --theme-magenta:  #ff00cc;
  --theme-cyan:     #00ffff;
  --theme-purple:   #7c3aed;
  --theme-yellow:   #ffff00;
  --theme-void:     #050008;
  --theme-grid:     rgba(120, 0, 255, 0.12);
}

/* Fundo: grid de perspectiva 3D com glow */
body[data-theme="cyberpop"]::before {
  background-image:
    /* Linhas horizontais do grid */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(0, 255, 255, 0.06) 39px,
      rgba(0, 255, 255, 0.06) 40px
    ),
    /* Linhas verticais do grid */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(255, 0, 204, 0.06) 39px,
      rgba(255, 0, 204, 0.06) 40px
    ),
    /* Glows de cor */
    radial-gradient(ellipse at 20% 30%, rgba(255, 0, 204, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 60%),
    /* Base void */
    linear-gradient(160deg, #0a0014, #050008, #0a0014),
    url('/backapp.png') !important;
  background-size:
    40px 40px, 40px 40px,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, cover !important;
}

/* Linha de scan (efeito CRT) */
body[data-theme="cyberpop"]::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.6) 20%,
    rgba(255, 0, 204, 0.8) 50%,
    rgba(0, 255, 255, 0.6) 80%,
    transparent 100%
  );
  z-index: 9999;
  pointer-events: none;
  animation: cyber-scan 4s linear infinite;
  opacity: 0.5;
}

/* Header: painel de controle do futuro */
body[data-theme="cyberpop"] .app-header {
  background: rgba(5, 0, 8, 0.92) !important;
  backdrop-filter: blur(20px) saturate(2) !important;
  border-bottom: 1px solid rgba(255, 0, 204, 0.4) !important;
  box-shadow:
    0 0 20px rgba(255, 0, 204, 0.15),
    0 0 40px rgba(0, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 255, 255, 0.2) !important;
}

body[data-theme="cyberpop"] .app-header h1,
body[data-theme="cyberpop"] .logo-text h1 {
  background: linear-gradient(90deg, #ff00cc, #00ffff, #ff00cc) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: matcha-shimmer 3s linear infinite, cyber-glitch 8s ease-in-out infinite !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body[data-theme="cyberpop"] .logo-subtitle {
  color: #00ffff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  opacity: 0.8 !important;
}

/* Mensagens — terminal holográfico */
body[data-theme="cyberpop"] .message-bubble {
  background: rgba(5, 0, 20, 0.85) !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  border-left: 3px solid #ff00cc !important;
  border-radius: 2px 12px 12px 2px !important;
  box-shadow:
    0 0 15px rgba(255, 0, 204, 0.15),
    0 0 30px rgba(0, 255, 255, 0.08),
    inset 0 0 20px rgba(124, 58, 237, 0.05) !important;
  color: #e0e0ff !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 13px !important;
  position: relative !important;
}

/* Canto cortado estilo HUD */
body[data-theme="cyberpop"] .message-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: #ff00cc;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: 0.7;
}

/* Scan line nos balões */
body[data-theme="cyberpop"] .message-bubble::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 255, 255, 0.015) 3px,
    rgba(0, 255, 255, 0.015) 4px
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Input area — cockpit underground */
body[data-theme="cyberpop"] .input-area {
  background: rgba(5, 0, 8, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255, 0, 204, 0.35) !important;
  box-shadow: 0 -10px 40px rgba(255, 0, 204, 0.08) inset !important;
}

body[data-theme="cyberpop"] .chat-input {
  background: rgba(10, 0, 20, 0.9) !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  border-radius: 4px !important;
  color: #00ffff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  caret-color: #ff00cc !important;
}

body[data-theme="cyberpop"] .chat-input:focus {
  border-color: #ff00cc !important;
  box-shadow:
    0 0 0 2px rgba(255, 0, 204, 0.2),
    0 0 20px rgba(255, 0, 204, 0.12),
    0 0 40px rgba(0, 255, 255, 0.06) !important;
}

body[data-theme="cyberpop"] .chat-input::placeholder {
  color: rgba(0, 255, 255, 0.35) !important;
  font-style: normal !important;
}

/* Botão send — laser de plasma */
body[data-theme="cyberpop"] .btn-send.active {
  background: linear-gradient(135deg, #ff00cc, #7c3aed, #00ffff) !important;
  background-size: 200% 200% !important;
  animation: cyber-border-race 2s ease infinite !important;
  box-shadow:
    0 0 15px rgba(255, 0, 204, 0.6),
    0 0 30px rgba(0, 255, 255, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
}

body[data-theme="cyberpop"] .btn-send.active:hover {
  transform: scale(1.05) !important;
  box-shadow:
    0 0 25px rgba(255, 0, 204, 0.8),
    0 0 50px rgba(0, 255, 255, 0.4) !important;
}

/* Botões de estilo */
body[data-theme="cyberpop"] .style-option {
  background: rgba(5, 0, 20, 0.85) !important;
  border: 1px solid rgba(0, 255, 255, 0.25) !important;
  color: #a0a0ff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body[data-theme="cyberpop"] .style-option.active,
body[data-theme="cyberpop"] .style-option:hover {
  background: rgba(255, 0, 204, 0.12) !important;
  border-color: #ff00cc !important;
  color: #ff00cc !important;
  box-shadow:
    0 0 10px rgba(255, 0, 204, 0.25),
    inset 0 0 10px rgba(255, 0, 204, 0.05) !important;
  text-shadow: 0 0 8px rgba(255, 0, 204, 0.6) !important;
}

/* Modais — holodeck de alta tecnologia */
body[data-theme="cyberpop"] .modal-content {
  background: rgba(5, 0, 20, 0.97) !important;
  border: 1px solid rgba(0, 255, 255, 0.25) !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 0 1px rgba(255, 0, 204, 0.15),
    0 0 30px rgba(255, 0, 204, 0.15),
    0 0 60px rgba(0, 255, 255, 0.08),
    0 40px 80px rgba(0, 0, 0, 0.6) !important;
  position: relative !important;
  /* 🚨 OVERFLOW HIDDEN REMOVIDO PARA O LASER NÃO SER CORTADO */
}

/* Borda luminosa percorrendo o modal */
body[data-theme="cyberpop"] .modal-content::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg,
    #ff00cc, #00ffff, #7c3aed, #ff00cc
  );
  background-size: 300% 100%;
  border-radius: 5px;
  z-index: -1;
  animation: cyber-border-race 3s linear infinite;
  opacity: 0.6;
}

body[data-theme="cyberpop"] .modal-header {
  background: linear-gradient(135deg, rgba(255, 0, 204, 0.08), rgba(0, 255, 255, 0.06)) !important;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2) !important;
}

body[data-theme="cyberpop"] .modal-header h3 {
  background: linear-gradient(90deg, #ff00cc, #00ffff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body[data-theme="cyberpop"] .modal-close {
  color: #00ffff !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  border-radius: 3px !important;
  background: rgba(0, 255, 255, 0.05) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

body[data-theme="cyberpop"] .modal-close:hover {
  background: rgba(255, 0, 204, 0.1) !important;
  border-color: #ff00cc !important;
  color: #ff00cc !important;
  box-shadow: 0 0 10px rgba(255, 0, 204, 0.3) !important;
}

/* Textos dentro dos modais */
body[data-theme="cyberpop"] .modal-body {
  color: #c0c0ff !important;
}

body[data-theme="cyberpop"] .modal-body p,
body[data-theme="cyberpop"] .modal-body span:not(.icon):not(.feature) {
  color: #8080c0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}

/* Popover */
body[data-theme="cyberpop"] .style-popover {
  background: rgba(5, 0, 20, 0.98) !important;
  border: 1px solid rgba(255, 0, 204, 0.3) !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 20px rgba(255, 0, 204, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

body[data-theme="cyberpop"] .popover-header {
  color: #00ffff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

body[data-theme="cyberpop"] .btn-palette {
  color: #a0a0ff !important;
}

body[data-theme="cyberpop"] .btn-palette:hover,
body[data-theme="cyberpop"] .btn-palette.active {
  background: rgba(255, 0, 204, 0.12) !important;
  color: #ff00cc !important;
  text-shadow: 0 0 8px rgba(255, 0, 204, 0.5) !important;
}

/* Token */
body[data-theme="cyberpop"] .token-display {
  background: rgba(255, 0, 204, 0.08) !important;
  border-color: rgba(255, 0, 204, 0.3) !important;
  color: #ff00cc !important;
  box-shadow: 0 0 10px rgba(255, 0, 204, 0.1) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Scrollbar */
body[data-theme="cyberpop"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff00cc, #00ffff) !important;
  border-radius: 2px !important;
}

body[data-theme="cyberpop"] ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Botões de ação nos modais */
body[data-theme="cyberpop"] .btn-download {
  background: linear-gradient(135deg, #ff00cc, #7c3aed) !important;
  box-shadow: 0 0 20px rgba(255, 0, 204, 0.4) !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

body[data-theme="cyberpop"] .btn-new {
  background: rgba(0, 255, 255, 0.08) !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  color: #00ffff !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* Sidebar */
body[data-theme="cyberpop"] .sidebar-menu {
  background: rgba(5, 0, 20, 0.98) !important;
  border-right: 1px solid rgba(255, 0, 204, 0.3) !important;
  box-shadow: 0 0 40px rgba(255, 0, 204, 0.1) !important;
}

body[data-theme="cyberpop"] .sidebar-item {
  color: #a0a0ff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}

body[data-theme="cyberpop"] .sidebar-item:hover {
  color: #00ffff !important;
  background: rgba(0, 255, 255, 0.08) !important;
}

/* Sidebar outros temas */
body[data-theme="matcha"] .sidebar-menu {
  background: rgba(240, 236, 227, 0.98) !important;
  border-right: 1px solid rgba(45, 106, 79, 0.2) !important;
}
body[data-theme="matcha"] .sidebar-item { color: #1b3a2d !important; }
body[data-theme="matcha"] .sidebar-item:hover { background: rgba(64, 145, 108, 0.1) !important; }

body[data-theme="pastel"] .sidebar-menu {
  background: rgba(255, 248, 252, 0.98) !important;
  border-right: 1px solid rgba(244, 114, 182, 0.2) !important;
}
body[data-theme="pastel"] .sidebar-item { color: #4a1942 !important; }
body[data-theme="pastel"] .sidebar-item:hover { background: rgba(244, 114, 182, 0.08) !important; }

body[data-theme="dark_academia"] .sidebar-menu {
  background: rgba(28, 18, 9, 0.99) !important;
  border-right: 1px solid rgba(194, 134, 46, 0.3) !important;
}
body[data-theme="dark_academia"] .sidebar-item { color: #d6cdc0 !important; font-family: 'Georgia', serif !important; }
body[data-theme="dark_academia"] .sidebar-item:hover { background: rgba(120, 53, 15, 0.2) !important; color: #f5e9d0 !important; }


/* ─────────────────────────────────────────────
   TRANSIÇÃO SUAVE ENTRE TEMAS
   ───────────────────────────────────────────── */
body {
  transition:
    background 0.6s ease,
    color 0.4s ease !important;
}

.modal-content,
.app-header,
.input-area,
.message-bubble,
.style-option,
.style-popover {
  transition:
    background 0.5s ease,
    border-color 0.4s ease,
    box-shadow 0.5s ease,
    color 0.4s ease !important;
}