/* ============================================================================
   TrenT NEO — neobrutalist design system
   Fonte de verdade para o app autenticado (base.html e templates dependentes).
   - Light + Dark
   - Bordas 2px sólidas, sombras offset (6px 6px 0)
   - Tokens em CSS variables
   - Componentes: .neo-card, .neo-panel, .neo-input, .neo-btn-*, .neo-pill, etc.
   - Override layer: converte classes legadas (.glass-card, .text-primary, etc.)
     do "cockpit AIOX" para visual NEO automaticamente.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Cores base */
  --neo-ink: #050505;
  --neo-paper: #ffffff;
  --neo-paper-warm: #F5F4E7;
  --neo-trent: #00AEF0;
  --neo-trent-hover: #008fc4;
  --neo-limon: #D1FF00;

  /* Pastéis (light) */
  --neo-pastel-blue: #E0F4FD;
  --neo-pastel-mint: #EBFFF3;
  --neo-pastel-yellow: #FFF9DB;
  --neo-pastel-purple: #f3e8ff;

  /* Status colors */
  --neo-emerald-dark: #047857;
  --neo-emerald-light: #34d399;
  --neo-red: #b91c1c;
  --neo-red-light: #f87171;
  --neo-orange: #c2410c;
  --neo-orange-light: #fb923c;
  --neo-purple: #6d28d9;
  --neo-purple-light: #c4b5fd;

  /* Geometria */
  --neo-shadow-offset: 6px;
  --neo-radius-card: 16px;
  --neo-radius-button: 12px;
  --neo-radius-large: 24px;
  --neo-border-width: 2px;
}

/* ============================================================
   Tipografia base
   ============================================================ */
html { background: var(--neo-paper); color: var(--neo-ink); }
body { font-family: 'Geist', sans-serif; }
h1, h2, h3, h4, .font-display {
  font-family: 'Geist', 'Space Grotesk', sans-serif;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.font-mono, [class*="font-mono"] { font-family: 'Geist Mono', 'Roboto Mono', monospace; }

/* ============================================================
   LIGHT MODE (default) — grid sutil 24px sobre paper branco
   ============================================================ */
html.light body, html:not(.dark) body {
  background-color: var(--neo-paper);
  background-image:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
  color: var(--neo-ink);
}

/* ============================================================
   Componentes NEO (use diretamente em templates novos)
   ============================================================ */
.neo-card {
  background: var(--neo-paper);
  border: var(--neo-border-width) solid var(--neo-ink);
  border-radius: var(--neo-radius-card);
  box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-ink);
}
.neo-card-flat {
  background: var(--neo-paper);
  border: var(--neo-border-width) solid var(--neo-ink);
  border-radius: var(--neo-radius-card);
}
.neo-panel {
  background: var(--neo-paper);
  border-right: var(--neo-border-width) solid var(--neo-ink);
}
.neo-input,
.field {
  border: var(--neo-border-width) solid var(--neo-ink);
  border-radius: var(--neo-radius-button);
  background: var(--neo-paper);
  color: var(--neo-ink);
  outline: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
.neo-input:focus,
.field:focus {
  box-shadow: 4px 4px 0 var(--neo-limon);
  transform: translate(-1px, -1px);
}
.neo-btn-primary,
.btn-black {
  background: var(--neo-ink);
  color: var(--neo-paper);
  border: var(--neo-border-width) solid var(--neo-ink);
  border-radius: var(--neo-radius-button);
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.neo-btn-primary:hover:not(:disabled),
.btn-black:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--neo-trent);
}
.neo-btn-primary:disabled,
.btn-black:disabled { opacity: .55; cursor: not-allowed; }
.neo-btn-secondary,
.neo-btn-limon {
  background: var(--neo-limon);
  color: var(--neo-ink);
  border: var(--neo-border-width) solid var(--neo-ink);
  border-radius: var(--neo-radius-button);
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease;
}
.neo-btn-secondary:hover:not(:disabled),
.neo-btn-limon:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--neo-ink);
}
.neo-btn-outline,
.btn-outline {
  background: var(--neo-paper);
  color: var(--neo-ink);
  border: var(--neo-border-width) solid var(--neo-ink);
  border-radius: var(--neo-radius-button);
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease;
}
.neo-btn-outline:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--neo-limon);
}
.neo-pill {
  border: var(--neo-border-width) solid var(--neo-ink);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-weight: 700;
  background: var(--neo-paper);
}
.neo-badge {
  border: 1px solid var(--neo-ink);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-weight: 700;
  font-size: 0.75rem;
}
.neo-tab-active,
.tab-active {
  background: var(--neo-limon);
  color: var(--neo-ink);
  border-bottom: var(--neo-border-width) solid var(--neo-ink);
  border-radius: 12px 12px 0 0;
}

/* Utilitárias migradas de auth.html */
.auth-panel {
  border: var(--neo-border-width) solid var(--neo-ink);
  border-radius: 1rem;
  background: var(--neo-paper);
  box-shadow: 8px 8px 0 var(--neo-ink);
}
.grid-bg {
  background-image:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size: 24px 24px;
}
.highlight-blue {
  background: linear-gradient(120deg, var(--neo-pastel-blue) 0%, var(--neo-pastel-blue) 100%);
  background-repeat: no-repeat;
  background-size: 100% 42%;
  background-position: 0 88%;
}
.flag-img {
  width: 28px; height: 20px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.18);
  background: var(--neo-paper);
}
.flag-emoji {
  width: 28px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.18);
  background: var(--neo-paper);
  font-size: 18px;
  line-height: 1;
}
.country-list {
  max-height: min(320px, 48vh);
  overflow-y: auto;
  box-shadow: 6px 6px 0 var(--neo-ink);
  z-index: 120;
}
.language-list {
  min-width: 148px;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  box-shadow: 5px 5px 0 var(--neo-ink);
  z-index: 9999;
}

/* Card específico do landing_v2.html — manter compat */
.card-zs {
  background: var(--neo-paper);
  border: var(--neo-border-width) solid var(--neo-ink);
  border-radius: var(--neo-radius-card);
  box-shadow: 4px 4px 0 var(--neo-ink);
}

/* ============================================================
   OVERRIDE LAYER (light) — converte classes legadas do
   cockpit AIOX (glass-card, text-primary, bg-dark-bg, etc.)
   pra visual NEO. Permite que templates antigos virem NEO
   sem reescrita imediata.
   ============================================================ */

/* Surfaces */
.glass-card {
  background: var(--neo-paper) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: var(--neo-radius-card) !important;
  box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-ink) !important;
  backdrop-filter: none !important;
}
.glass-panel {
  background: var(--neo-paper) !important;
  backdrop-filter: none !important;
}
aside.glass-panel {
  background: var(--neo-paper) !important;
  border-right: var(--neo-border-width) solid var(--neo-ink) !important;
  box-shadow: none !important;
}
.glass-input {
  background: var(--neo-paper) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: var(--neo-radius-button) !important;
  color: var(--neo-ink) !important;
}
.glass-input:focus { box-shadow: 4px 4px 0 var(--neo-limon) !important; }
.bg-orb-1, .bg-orb-2, .bg-orb-3, .glow-accent { display: none !important; }
.btn-aiox {
  background: var(--neo-ink) !important;
  color: var(--neo-paper) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: var(--neo-radius-button) !important;
}
.btn-aiox:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--neo-trent) !important;
}

.bg-dark-bg, .bg-dark-card, .bg-dark-surface { background-color: var(--neo-paper) !important; }
/* bg-dark-bg/60 é usado como backdrop de modais — manter escuro semi-transparente
   nos dois modos. Sem isso, o overlay branco confundia com o card branco. */
.bg-dark-bg\/60 { background-color: rgba(5,5,5,0.55) !important; }
.bg-\[\#16212b\], .bg-\[\#111\],
.bg-\[\#161616\], .bg-\[\#1a1a1a\], .bg-\[\#1e2c3a\],
.bg-\[\#0a0a1a\], .bg-\[\#050a10\], .bg-\[\#0e0e0e\], .bg-\[\#0d1a0d\] {
  background-color: var(--neo-paper) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: var(--neo-radius-card) !important;
  box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-ink) !important;
}

/* Cards no padrão Tailwind clássico (bg-white + border + rounded). Não toca
   no background pra preservar dark:bg-[#111] etc. — só impõe borda preta
   2px e offset shadow NEO. Cobre flight_results, dashboard, hotel cards,
   recommendation cards e similares. */
.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-3xl,
.bg-white\/95.rounded-xl, .bg-white\/95.rounded-2xl, .bg-white\/95.rounded-3xl,
.bg-slate-50.rounded-xl, .bg-slate-50.rounded-2xl, .bg-slate-50.rounded-3xl,
.bg-slate-100.rounded-xl, .bg-slate-100.rounded-2xl, .bg-slate-100.rounded-3xl {
  border-width: var(--neo-border-width) !important;
  border-style: solid !important;
  border-color: var(--neo-ink) !important;
  box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-ink) !important;
}

/* Tailwind shadow-{sm,md,lg,xl,2xl} e shadow-primary que muitos cards usam
   — virar offset shadow NEO. shadow-sm/md ganha offset menor pra
   diferenciar de cards maiores. */
.shadow-sm, .shadow-md { box-shadow: 3px 3px 0 var(--neo-ink) !important; }
.shadow-lg, .shadow-xl, .shadow-2xl, .shadow-primary {
  box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-ink) !important;
}
/* Hover shadows com tints (shadow-primary/10, shadow-blue-500/25, etc) —
   substituem pelo padrão NEO hover: translate + cyan shadow. */
.hover\:shadow-lg:hover, .hover\:shadow-xl:hover, .hover\:shadow-2xl:hover,
.hover\:shadow-primary\/10:hover, .hover\:shadow-primary\/20:hover,
.hover\:shadow-blue-500\/25:hover, .hover\:shadow-green-500\/50:hover {
  box-shadow: 8px 8px 0 var(--neo-trent) !important;
  transform: translate(-2px, -2px);
}

/* accent-color em checkboxes/radios */
.accent-\[\#00AEF0\], .accent-\[\#0ea5e9\] { accent-color: var(--neo-ink) !important; }

/* Text colors (neutraliza assunções dark) */
.text-white, .text-slate-100, .text-slate-200, .text-slate-300 { color: var(--neo-ink) !important; }
.text-slate-400, .text-slate-500, .text-slate-600 { color: #525252 !important; }
.text-primary, .text-\[\#0ea5e9\], .text-\[\#00AEF0\] { color: var(--neo-trent) !important; }
.text-limon, .text-\[\#D1FF00\] { color: #6b8b00 !important; }
.text-emerald, .text-emerald-400, .text-\[\#00ff88\], .text-\[\#00a991\] { color: var(--neo-emerald-dark) !important; }
.text-\[\#00f2fe\] { color: var(--neo-trent) !important; }
.text-orange-400 { color: var(--neo-orange) !important; }
.text-red-400 { color: var(--neo-red) !important; }
.text-purple-400, .text-purple-300 { color: var(--neo-purple) !important; }
.text-gradient {
  color: var(--neo-trent) !important;
  background: none !important;
  -webkit-text-fill-color: var(--neo-trent) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
[style*="color:#00ff88"], [style*="color: #00ff88"] { color: var(--neo-emerald-dark) !important; }

/* Button backgrounds → NEO black CTA */
.bg-primary, .bg-\[\#0ea5e9\], .bg-\[\#00AEF0\] {
  background-color: var(--neo-ink) !important;
  color: var(--neo-paper) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: var(--neo-radius-button) !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.bg-primary:hover, .bg-\[\#0ea5e9\]:hover,
.hover\:bg-primary\/90:hover,
.hover\:bg-\[\#0284c7\]:hover,
.hover\:bg-\[\#0090C8\]:hover,
.hover\:bg-\[\#0098d4\]:hover,
.hover\:bg-\[\#00AEF0\]:hover {
  background-color: var(--neo-ink) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--neo-trent) !important;
}
.bg-primary .text-white, .bg-primary.text-white,
.bg-\[\#0ea5e9\] .text-white, .bg-\[\#0ea5e9\].text-white { color: var(--neo-paper) !important; }
.bg-emerald, .bg-emerald-400 {
  background-color: var(--neo-limon) !important;
  color: var(--neo-ink) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: var(--neo-radius-button) !important;
}
.bg-limon {
  background-color: var(--neo-limon) !important;
  color: var(--neo-ink) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
}

/* Tinted backgrounds → pastéis */
.bg-primary\/5, .bg-primary\/10 { background-color: var(--neo-pastel-blue) !important; }
.bg-primary\/20 { background-color: var(--neo-pastel-blue) !important; border: var(--neo-border-width) solid var(--neo-ink) !important; }
.bg-emerald\/5, .bg-emerald\/10 { background-color: var(--neo-pastel-mint) !important; }
.bg-emerald\/20 { background-color: var(--neo-pastel-mint) !important; border: var(--neo-border-width) solid var(--neo-ink) !important; }
.bg-limon\/10, .bg-limon\/20 { background-color: var(--neo-pastel-yellow) !important; }
.bg-purple-500\/10 { background-color: var(--neo-pastel-purple) !important; }
.bg-purple-500\/20 { background-color: #e9d5ff !important; }
.bg-orange-500\/10 { background-color: #fff7ed !important; }
.bg-red-500\/5, .bg-red-500\/10 { background-color: #fef2f2 !important; }
.bg-red-500\/20 { background-color: #fee2e2 !important; }
.bg-white\/5 { background-color: #fafafa !important; border: 1px solid var(--neo-ink) !important; }
.bg-white\/10 { background-color: #f5f5f5 !important; }
.bg-black\/40 { background-color: rgba(255,255,255,0.92) !important; color: var(--neo-ink) !important; border: 1px solid var(--neo-ink) !important; }
.bg-\[\#0ea5e9\]\/5 { background-color: var(--neo-pastel-blue) !important; }

/* Borders → 2px ink */
.border-white\/5, .border-white\/10, .border-white\/20 { border-color: #e5e5e5 !important; }
.border-primary\/20, .border-primary\/30, .border-primary\/50,
.border-emerald\/20, .border-emerald\/30,
.border-purple-500\/20, .border-red-500\/20,
.border-\[\#0ea5e9\]\/30, .border-\[\#0ea5e9\]\/40,
.border-\[\#00ff88\]\/30, .border-\[\#00f2fe\]\/20 {
  border-color: var(--neo-ink) !important;
  border-width: var(--neo-border-width) !important;
}

/* Hero strip gradients → pastéis */
.from-blue-800, .from-blue-700, .from-blue-500,
.from-sky-700, .from-sky-500, .from-cyan-500, .from-cyan-400 { --tw-gradient-from: var(--neo-pastel-blue) !important; }
.to-indigo-900, .to-blue-900, .to-blue-700, .to-cyan-700, .to-sky-500, .to-cyan-400 { --tw-gradient-to: var(--neo-pastel-blue) !important; }
.from-rose-700, .from-red-600 { --tw-gradient-from: #ffe4e6 !important; }
.to-rose-900, .to-red-600 { --tw-gradient-to: #ffe4e6 !important; }
.from-emerald-700, .from-green-500, .from-green-600 { --tw-gradient-from: var(--neo-pastel-mint) !important; }
.to-green-900, .to-green-500, .to-green-600 { --tw-gradient-to: var(--neo-pastel-mint) !important; }
.from-orange-500, .from-orange-400 { --tw-gradient-from: var(--neo-pastel-yellow) !important; }
.to-orange-700, .to-orange-400 { --tw-gradient-to: var(--neo-pastel-yellow) !important; }
.from-purple-500 { --tw-gradient-from: var(--neo-pastel-purple) !important; }
.to-purple-700 { --tw-gradient-to: var(--neo-pastel-purple) !important; }
.from-slate-600, .from-slate-700, .from-slate-800 { --tw-gradient-from: #f5f5f5 !important; }
.to-slate-600, .to-slate-700, .to-slate-800 { --tw-gradient-to: #e5e5e5 !important; }
.from-primary\/20, .from-\[\#16212b\] { --tw-gradient-from: var(--neo-pastel-blue) !important; }
.to-dark-card { --tw-gradient-to: var(--neo-paper) !important; }

/* Glows → offset shadows */
.shadow-glow, .shadow-neon-blue, .shadow-neon-emerald { box-shadow: 4px 4px 0 var(--neo-trent) !important; }
[class*="drop-shadow-"] { filter: none !important; }

/* Blur-glow arbitrary shadows (shadow-[0_0_..._rgba(...)]) ficam fora do
   visual NEO. Os offset shadows (shadow-[6px_6px_0_#000]) sobrevivem. */
[class*="shadow-[0_0_"] { box-shadow: none !important; }

/* Sidebar active marker */
.nav-active::after { background: var(--neo-trent) !important; width: 4px !important; border-radius: 0 !important; }
.nav-active { background-color: var(--neo-pastel-yellow) !important; border-radius: 12px !important; }

/* Avatar ring */
.bg-gradient-to-tr.from-primary { --tw-gradient-from: var(--neo-trent) !important; }
.to-emerald { --tw-gradient-to: var(--neo-limon) !important; }

/* Hover */
.hover\:bg-white\/5:hover, .hover\:bg-white\/10:hover { background-color: var(--neo-pastel-yellow) !important; }
.hover\:border-primary\/30:hover, .hover\:border-primary\/50:hover,
.hover\:border-\[\#0ea5e9\]\/40:hover { border-color: var(--neo-trent) !important; }

/* Rounded harmonization */
.rounded-3xl { border-radius: var(--neo-radius-large) !important; }
.rounded-2xl { border-radius: var(--neo-radius-card) !important; }
.rounded-xl { border-radius: var(--neo-radius-button) !important; }

/* Sidebar logo Δ */
.text-primary.font-black { color: var(--neo-trent) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--neo-ink); border-radius: 0; }

/* ============================================================
   DARK MODE — neobrutalist preto
   ============================================================ */
html.dark { background: #0a0a0a; color: var(--neo-paper-warm); }
html.dark body {
  background-color: #0a0a0a;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
  color: var(--neo-paper-warm);
}
html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: var(--neo-paper); }

/* Componentes em dark */
html.dark .neo-card {
  background: #141414;
  border-color: var(--neo-paper);
  box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-paper);
}
html.dark .neo-card-flat { background: #141414; border-color: var(--neo-paper); }
html.dark .neo-panel { background: #0a0a0a; border-right-color: var(--neo-paper); }
html.dark .neo-input, html.dark .field {
  border-color: var(--neo-paper);
  background: #141414;
  color: var(--neo-paper);
}
html.dark .neo-btn-primary, html.dark .btn-black {
  background: var(--neo-paper);
  color: var(--neo-ink);
  border-color: var(--neo-paper);
}
html.dark .neo-btn-primary:hover:not(:disabled), html.dark .btn-black:hover:not(:disabled) {
  background: var(--neo-paper);
  box-shadow: 4px 4px 0 var(--neo-trent);
}
html.dark .neo-btn-outline, html.dark .btn-outline {
  background: transparent;
  color: var(--neo-paper);
  border-color: var(--neo-paper);
}
html.dark .neo-pill { background: #141414; border-color: var(--neo-paper); color: var(--neo-paper); }
html.dark .auth-panel {
  background: #141414;
  border-color: var(--neo-paper);
  box-shadow: 8px 8px 0 var(--neo-paper);
}
html.dark .card-zs {
  background: #141414;
  border-color: var(--neo-paper);
  box-shadow: 4px 4px 0 var(--neo-paper);
}
html.dark .grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
}
html.dark .country-list, html.dark .language-list { box-shadow: 6px 6px 0 var(--neo-paper); }

/* Override layer em dark — espelho da light */
html.dark .glass-card {
  background: #141414 !important;
  border-color: var(--neo-paper) !important;
  box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-paper) !important;
}
html.dark .glass-panel { background: #141414 !important; }
html.dark aside.glass-panel { background: #0a0a0a !important; border-right-color: var(--neo-paper) !important; }
html.dark .glass-input { background: #141414 !important; border-color: var(--neo-paper) !important; color: var(--neo-paper) !important; }
html.dark .btn-aiox { background: var(--neo-paper) !important; color: var(--neo-ink) !important; border-color: var(--neo-paper) !important; }

html.dark .bg-dark-bg, html.dark .bg-dark-card { background-color: #141414 !important; }
html.dark .bg-dark-bg\/60 { background-color: rgba(5,5,5,0.75) !important; }
html.dark .bg-\[\#16212b\], html.dark .bg-\[\#111\],
html.dark .bg-\[\#161616\], html.dark .bg-\[\#1a1a1a\], html.dark .bg-\[\#1e2c3a\],
html.dark .bg-\[\#0a0a1a\], html.dark .bg-\[\#050a10\], html.dark .bg-\[\#0e0e0e\], html.dark .bg-\[\#0d1a0d\] {
  background-color: #141414 !important;
  border-color: var(--neo-paper) !important;
  box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-paper) !important;
}

/* Cards bg-white em dark — sombra e borda brancas (espelho da regra light) */
html.dark .bg-white.rounded-xl, html.dark .bg-white.rounded-2xl, html.dark .bg-white.rounded-3xl,
html.dark .bg-white\/95.rounded-xl, html.dark .bg-white\/95.rounded-2xl, html.dark .bg-white\/95.rounded-3xl,
html.dark .bg-slate-50.rounded-xl, html.dark .bg-slate-50.rounded-2xl, html.dark .bg-slate-50.rounded-3xl,
html.dark .bg-slate-100.rounded-xl, html.dark .bg-slate-100.rounded-2xl, html.dark .bg-slate-100.rounded-3xl {
  border-color: var(--neo-paper) !important;
  box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-paper) !important;
}
html.dark .shadow-sm, html.dark .shadow-md { box-shadow: 3px 3px 0 var(--neo-paper) !important; }
html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl, html.dark .shadow-primary {
  box-shadow: var(--neo-shadow-offset) var(--neo-shadow-offset) 0 var(--neo-paper) !important;
}
html.dark .hover\:shadow-lg:hover, html.dark .hover\:shadow-xl:hover, html.dark .hover\:shadow-2xl:hover,
html.dark .hover\:shadow-primary\/10:hover, html.dark .hover\:shadow-primary\/20:hover,
html.dark .hover\:shadow-blue-500\/25:hover, html.dark .hover\:shadow-green-500\/50:hover {
  box-shadow: 8px 8px 0 var(--neo-trent) !important;
  transform: translate(-2px, -2px);
}

html.dark .accent-\[\#00AEF0\], html.dark .accent-\[\#0ea5e9\] { accent-color: var(--neo-paper) !important; }

html.dark .text-white { color: var(--neo-paper) !important; }
html.dark .text-slate-100, html.dark .text-slate-200, html.dark .text-slate-300 { color: var(--neo-paper-warm) !important; }
html.dark .text-slate-400, html.dark .text-slate-500, html.dark .text-slate-600 { color: #9ca3af !important; }
html.dark .text-primary, html.dark .text-\[\#0ea5e9\], html.dark .text-\[\#00AEF0\] { color: var(--neo-trent) !important; }
html.dark .text-limon, html.dark .text-\[\#D1FF00\] { color: var(--neo-limon) !important; }
html.dark .text-emerald, html.dark .text-emerald-400, html.dark .text-\[\#00ff88\], html.dark .text-\[\#00a991\] { color: var(--neo-emerald-light) !important; }
html.dark .text-\[\#00f2fe\] { color: var(--neo-trent) !important; }
html.dark .text-orange-400 { color: var(--neo-orange-light) !important; }
html.dark .text-red-400 { color: var(--neo-red-light) !important; }
html.dark .text-purple-400, html.dark .text-purple-300 { color: var(--neo-purple-light) !important; }
html.dark .text-gradient {
  color: var(--neo-trent) !important;
  background: none !important;
  -webkit-text-fill-color: var(--neo-trent) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
html.dark [style*="color:#00ff88"], html.dark [style*="color: #00ff88"] { color: var(--neo-emerald-light) !important; }

html.dark .bg-primary, html.dark .bg-\[\#0ea5e9\], html.dark .bg-\[\#00AEF0\] {
  background-color: var(--neo-paper) !important;
  color: var(--neo-ink) !important;
  border-color: var(--neo-paper) !important;
}
html.dark .bg-primary:hover, html.dark .bg-\[\#0ea5e9\]:hover,
html.dark .hover\:bg-primary\/90:hover,
html.dark .hover\:bg-\[\#0284c7\]:hover,
html.dark .hover\:bg-\[\#0090C8\]:hover,
html.dark .hover\:bg-\[\#0098d4\]:hover,
html.dark .hover\:bg-\[\#00AEF0\]:hover {
  background-color: var(--neo-paper) !important;
  box-shadow: 4px 4px 0 var(--neo-trent) !important;
}
html.dark .bg-primary.text-white, html.dark .bg-primary .text-white,
html.dark .bg-\[\#0ea5e9\].text-white, html.dark .bg-\[\#0ea5e9\] .text-white { color: var(--neo-ink) !important; }
html.dark .bg-emerald, html.dark .bg-emerald-400 {
  background-color: var(--neo-limon) !important;
  color: var(--neo-ink) !important;
  border-color: var(--neo-paper) !important;
}
html.dark .bg-limon {
  background-color: var(--neo-limon) !important;
  color: var(--neo-ink) !important;
  border-color: var(--neo-paper) !important;
}

html.dark .bg-primary\/5, html.dark .bg-primary\/10 { background-color: rgba(0,174,240,0.14) !important; }
html.dark .bg-primary\/20 { background-color: rgba(0,174,240,0.22) !important; border-color: var(--neo-paper) !important; }
html.dark .bg-emerald\/5, html.dark .bg-emerald\/10 { background-color: rgba(52,211,153,0.10) !important; }
html.dark .bg-emerald\/20 { background-color: rgba(52,211,153,0.18) !important; border-color: var(--neo-paper) !important; }
html.dark .bg-limon\/10, html.dark .bg-limon\/20 { background-color: rgba(209,255,0,0.16) !important; }
html.dark .bg-purple-500\/10 { background-color: rgba(196,181,253,0.12) !important; }
html.dark .bg-purple-500\/20 { background-color: rgba(196,181,253,0.20) !important; }
html.dark .bg-orange-500\/10 { background-color: rgba(251,146,60,0.12) !important; }
html.dark .bg-red-500\/5, html.dark .bg-red-500\/10 { background-color: rgba(248,113,113,0.10) !important; }
html.dark .bg-red-500\/20 { background-color: rgba(248,113,113,0.18) !important; }
html.dark .bg-white\/5 { background-color: rgba(255,255,255,0.06) !important; border-color: var(--neo-paper) !important; }
html.dark .bg-white\/10 { background-color: rgba(255,255,255,0.10) !important; }
html.dark .bg-black\/40 { background-color: rgba(10,10,10,0.85) !important; color: var(--neo-paper) !important; border-color: var(--neo-paper) !important; }
html.dark .bg-\[\#0ea5e9\]\/5 { background-color: rgba(0,174,240,0.10) !important; }

html.dark .border-white\/5, html.dark .border-white\/10, html.dark .border-white\/20 { border-color: rgba(255,255,255,0.25) !important; }
html.dark .border-primary\/20, html.dark .border-primary\/30, html.dark .border-primary\/50,
html.dark .border-emerald\/20, html.dark .border-emerald\/30,
html.dark .border-purple-500\/20, html.dark .border-red-500\/20,
html.dark .border-\[\#0ea5e9\]\/30, html.dark .border-\[\#0ea5e9\]\/40,
html.dark .border-\[\#00ff88\]\/30, html.dark .border-\[\#00f2fe\]\/20 {
  border-color: var(--neo-paper) !important;
  border-width: var(--neo-border-width) !important;
}

html.dark .from-blue-800, html.dark .from-blue-700, html.dark .from-blue-500,
html.dark .from-sky-700, html.dark .from-sky-500, html.dark .from-cyan-500, html.dark .from-cyan-400 { --tw-gradient-from: rgba(0,174,240,0.20) !important; }
html.dark .to-indigo-900, html.dark .to-blue-900, html.dark .to-blue-700,
html.dark .to-cyan-700, html.dark .to-sky-500, html.dark .to-cyan-400 { --tw-gradient-to: rgba(0,174,240,0.20) !important; }
html.dark .from-rose-700, html.dark .from-red-600 { --tw-gradient-from: rgba(248,113,113,0.18) !important; }
html.dark .to-rose-900, html.dark .to-red-600 { --tw-gradient-to: rgba(248,113,113,0.18) !important; }
html.dark .from-emerald-700, html.dark .from-green-500, html.dark .from-green-600 { --tw-gradient-from: rgba(52,211,153,0.18) !important; }
html.dark .to-green-900, html.dark .to-green-500, html.dark .to-green-600 { --tw-gradient-to: rgba(52,211,153,0.18) !important; }
html.dark .from-orange-500, html.dark .from-orange-400 { --tw-gradient-from: rgba(251,146,60,0.18) !important; }
html.dark .to-orange-700, html.dark .to-orange-400 { --tw-gradient-to: rgba(251,146,60,0.18) !important; }
html.dark .from-purple-500 { --tw-gradient-from: rgba(196,181,253,0.18) !important; }
html.dark .to-purple-700 { --tw-gradient-to: rgba(196,181,253,0.18) !important; }
html.dark .from-slate-600, html.dark .from-slate-700, html.dark .from-slate-800 { --tw-gradient-from: rgba(255,255,255,0.08) !important; }
html.dark .to-slate-600, html.dark .to-slate-700, html.dark .to-slate-800 { --tw-gradient-to: rgba(255,255,255,0.04) !important; }
html.dark .from-primary\/20, html.dark .from-\[\#16212b\] { --tw-gradient-from: rgba(0,174,240,0.20) !important; }
html.dark .to-dark-card { --tw-gradient-to: #141414 !important; }

html.dark .shadow-glow, html.dark .shadow-neon-blue, html.dark .shadow-neon-emerald { box-shadow: 4px 4px 0 var(--neo-trent) !important; }
html.dark .nav-active::after { background: var(--neo-limon) !important; width: 4px !important; border-radius: 0 !important; }
html.dark .nav-active { background-color: rgba(209,255,0,0.16) !important; border-radius: 12px !important; }
html.dark .bg-gradient-to-tr.from-primary { --tw-gradient-from: var(--neo-trent) !important; }
html.dark .to-emerald { --tw-gradient-to: var(--neo-limon) !important; }
html.dark .hover\:bg-white\/5:hover, html.dark .hover\:bg-white\/10:hover { background-color: rgba(209,255,0,0.16) !important; }
html.dark .hover\:border-primary\/30:hover, html.dark .hover\:border-primary\/50:hover,
html.dark .hover\:border-\[\#0ea5e9\]\/40:hover { border-color: var(--neo-trent) !important; }

html.dark .neo-tab-active, html.dark .tab-active {
  background: var(--neo-limon) !important;
  color: var(--neo-ink) !important;
  border-bottom-color: var(--neo-paper) !important;
}

html.dark .text-primary.font-black { color: var(--neo-trent) !important; }
html.dark ::-webkit-scrollbar-thumb { background: var(--neo-paper); }

/* ============================================================
   Timezone pill + painel — override NEO
   Substitui o glassmorphism (rgba + backdrop-blur) por neobrutalist
   sólido com offset shadow. Light + dark.
   ============================================================ */
.timezone-pill {
  /* Fallback (caso não esteja dentro do header): fica abaixo do header sticky */
  top: 5.5rem !important;
  right: 1rem !important;
  background: var(--neo-paper) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: 999px !important;
  color: var(--neo-ink) !important;
  box-shadow: 4px 4px 0 var(--neo-ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-weight: 800 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
@media (max-width: 768px) {
  .timezone-pill {
    top: 5.25rem !important;
    right: 0.75rem !important;
  }
}

/* Quando o pill é movido pra dentro do header (.in-header é adicionado por JS),
   solta o position:fixed e ajusta pra parecer com os outros botões do header
   (mesma altura, mesmo raio rounded-xl, mesma cor de texto/ícone). */
.timezone-pill.in-header {
  position: static !important;
  top: auto !important;
  right: auto !important;
  height: 2.5rem !important;
  padding: 0 1rem !important;
  border-radius: 12px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  gap: 0.5rem !important;
  box-shadow: 3px 3px 0 var(--neo-ink) !important;
  z-index: auto !important;
}
/* Hiperespecífico (button#id + 2 classes) para vencer .text-primary do span inline */
button#timezone-pill.in-header .material-symbols-outlined,
button#timezone-pill.in-header .material-symbols-outlined.text-primary {
  color: #64748b !important;
  font-size: 18px !important;
}
button#timezone-pill.in-header #timezone-pill-label,
button#timezone-pill.in-header #timezone-pill-time {
  color: var(--neo-ink) !important;
  font-weight: 600 !important;
}
button#timezone-pill.in-header:hover .material-symbols-outlined,
button#timezone-pill.in-header:hover .material-symbols-outlined.text-primary {
  color: var(--neo-trent) !important;
}
.timezone-pill.in-header:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--neo-trent) !important;
}
.timezone-pill.in-header:hover .material-symbols-outlined { color: var(--neo-trent) !important; }
html.dark .timezone-pill.in-header { box-shadow: 3px 3px 0 var(--neo-paper) !important; }
html.dark button#timezone-pill.in-header .material-symbols-outlined,
html.dark button#timezone-pill.in-header .material-symbols-outlined.text-primary { color: #94a3b8 !important; }
html.dark button#timezone-pill.in-header #timezone-pill-label,
html.dark button#timezone-pill.in-header #timezone-pill-time { color: var(--neo-paper) !important; }
html.dark .timezone-pill.in-header:hover { box-shadow: 5px 5px 0 var(--neo-trent) !important; }
html.dark button#timezone-pill.in-header:hover .material-symbols-outlined,
html.dark button#timezone-pill.in-header:hover .material-symbols-outlined.text-primary { color: var(--neo-trent) !important; }

/* ============================================================
   Unificação dos botões DENTRO do header sticky.
   Garante que tema, notificação, moeda, timezone, data e quaisquer
   outros botões do header tenham o MESMO chrome:
   - bordas 2px ink, raio 12px, sombra offset 3px (mais leve que cards)
   - hover: translate -2px + sombra cyan, sem fundo amarelo
   Isto neutraliza o override genérico de hover:bg-white/10 → pastel-yellow
   (que ainda vale pros itens do sidebar).
   ============================================================ */
header.sticky .glass-card,
header[class*="sticky"] .glass-card {
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--neo-ink) !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
  backdrop-filter: none !important;
}
header.sticky .glass-card:hover,
header[class*="sticky"] .glass-card:hover {
  background-color: var(--neo-paper) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--neo-trent) !important;
}
html.dark header.sticky .glass-card,
html.dark header[class*="sticky"] .glass-card {
  box-shadow: 3px 3px 0 var(--neo-paper) !important;
}
html.dark header.sticky .glass-card:hover,
html.dark header[class*="sticky"] .glass-card:hover {
  background-color: #141414 !important;
  box-shadow: 5px 5px 0 var(--neo-trent) !important;
}

.timezone-panel {
  /* Painel default — abre abaixo do pill quando flutuante */
  top: calc(5.5rem + 2.5rem) !important;
}
/* Quando pill está in-header, painel ancora abaixo do header (84px) à direita */
.timezone-panel.in-header-panel {
  top: 5.5rem !important;
}
.timezone-pill:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--neo-trent) !important;
}
html.dark .timezone-pill {
  background: #141414 !important;
  color: var(--neo-paper) !important;
  border-color: var(--neo-paper) !important;
  box-shadow: 4px 4px 0 var(--neo-paper) !important;
}
html.dark .timezone-pill:hover {
  box-shadow: 6px 6px 0 var(--neo-trent) !important;
}

.timezone-panel {
  background: var(--neo-paper) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: 16px !important;
  box-shadow: 8px 8px 0 var(--neo-ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.dark .timezone-panel {
  background: #141414 !important;
  border-color: var(--neo-paper) !important;
  box-shadow: 8px 8px 0 var(--neo-paper) !important;
}
.timezone-option {
  border-radius: 8px !important;
  color: var(--neo-ink) !important;
  font-weight: 600 !important;
}
.timezone-option:hover,
.timezone-option.is-active {
  background: var(--neo-pastel-yellow) !important;
  color: var(--neo-ink) !important;
}
html.dark .timezone-option { color: var(--neo-paper) !important; }
html.dark .timezone-option:hover,
html.dark .timezone-option.is-active {
  background: rgba(209,255,0,0.18) !important;
  color: var(--neo-paper) !important;
}

/* ============================================================
   NEO consistency for all dropdown menus, drawers and modals
   Cobre: language-selector, notifications-drawer, currency-modal,
   mobile-lang-modal, e quaisquer painéis genéricos.
   Light + Dark, com bordas 2px, offset shadow sólido, pastéis
   pra item ativo/hover.
   ============================================================ */

/* ----- Language selector dropdown ----- */
#lang-dropdown {
  background: var(--neo-paper) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: 12px !important;
  box-shadow: 6px 6px 0 var(--neo-ink) !important;
  backdrop-filter: none !important;
}
html.dark #lang-dropdown {
  background: #141414 !important;
  border-color: var(--neo-paper) !important;
  box-shadow: 6px 6px 0 var(--neo-paper) !important;
}
/* Item ativo do dropdown — fundo pastel-yellow + borda ink */
#lang-dropdown button.bg-primary\/10 {
  background-color: var(--neo-pastel-yellow) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
}
html.dark #lang-dropdown button.bg-primary\/10 {
  background-color: rgba(209,255,0,0.16) !important;
  border-color: var(--neo-paper) !important;
}
#lang-dropdown button:hover { background-color: var(--neo-pastel-blue) !important; }
html.dark #lang-dropdown button:hover { background-color: rgba(0,174,240,0.14) !important; }

/* ----- Mobile language modal (slide-up sheet) ----- */
#mobile-lang-modal #mobile-lang-content {
  background: var(--neo-paper) !important;
  border-top: var(--neo-border-width) solid var(--neo-ink) !important;
  border-left: var(--neo-border-width) solid var(--neo-ink) !important;
  border-right: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -6px 0 var(--neo-ink) !important;
}
html.dark #mobile-lang-modal #mobile-lang-content {
  background: #141414 !important;
  border-color: var(--neo-paper) !important;
  box-shadow: 0 -6px 0 var(--neo-paper) !important;
}

/* ----- Notifications drawer (slide-in from right) ----- */
#notifications-drawer {
  background: var(--neo-paper) !important;
  border-left: var(--neo-border-width) solid var(--neo-ink) !important;
  backdrop-filter: none !important;
  box-shadow: -8px 0 0 var(--neo-ink) !important;
}
html.dark #notifications-drawer {
  background: #141414 !important;
  border-left-color: var(--neo-paper) !important;
  box-shadow: -8px 0 0 var(--neo-paper) !important;
}
/* Header do drawer */
#notifications-drawer > div:first-child {
  background: var(--neo-pastel-yellow) !important;
  border-bottom: var(--neo-border-width) solid var(--neo-ink) !important;
  backdrop-filter: none !important;
}
html.dark #notifications-drawer > div:first-child {
  background: rgba(209,255,0,0.10) !important;
  border-bottom-color: var(--neo-paper) !important;
}
/* Cards de notificação dentro do drawer (override mais específico) */
#notifications-drawer .glass-card,
#notifications-drawer [class*="rounded-xl"] {
  box-shadow: 3px 3px 0 var(--neo-ink) !important;
}
html.dark #notifications-drawer .glass-card,
html.dark #notifications-drawer [class*="rounded-xl"] {
  box-shadow: 3px 3px 0 var(--neo-paper) !important;
}

/* ----- Currency modal (centered) ----- */
#currency-modal .glass-card {
  /* Garante NEO mesmo se override genérico não pegar */
  background: var(--neo-paper) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  box-shadow: 8px 8px 0 var(--neo-ink) !important;
}
html.dark #currency-modal .glass-card {
  background: #141414 !important;
  border-color: var(--neo-paper) !important;
  box-shadow: 8px 8px 0 var(--neo-paper) !important;
}

/* ----- Genérico: qualquer dropdown/modal flutuante com bg-dark-card / bg-white ----- */
[role="dialog"],
[role="menu"],
[role="listbox"] {
  backdrop-filter: none !important;
}
[role="dialog"]:not(.bg-transparent),
[role="menu"]:not(.bg-transparent) {
  background: var(--neo-paper) !important;
  border: var(--neo-border-width) solid var(--neo-ink) !important;
  border-radius: 12px !important;
  box-shadow: 6px 6px 0 var(--neo-ink) !important;
}
html.dark [role="dialog"]:not(.bg-transparent),
html.dark [role="menu"]:not(.bg-transparent) {
  background: #141414 !important;
  border-color: var(--neo-paper) !important;
  box-shadow: 6px 6px 0 var(--neo-paper) !important;
}