body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  transition: background-color 0.6s ease, color 0.3s ease;
  position: relative;
  /* PidgeyPost light mode — rich sky, not blinding */
  background:
    radial-gradient(ellipse at 15% 18%, rgba(99, 179, 237, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 75%, rgba(167, 139, 250, 0.25) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 95%, rgba(52, 211, 153, 0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 10%, rgba(251, 191, 36, 0.15) 0%, transparent 38%),
    linear-gradient(145deg, #dbeafe 0%, #e9d5ff 35%, #d1fae5 65%, #dbeafe 100%) !important;
  min-height: 100vh;
  background-attachment: fixed;
}

/* ═══ LANDING PAGE ISOLATION — fixed light/neon, immune to themes ═══ */
/* Solid white bg blocks body gradient bleeding through semi-transparent elements */
[data-landing] {
  background: #ffffff !important;
  color-scheme: light !important;
}

[data-landing] section,
[data-landing] footer,
[data-landing] div[class*="bg-white"],
[data-landing] div[class*="bg-slate-50"],
[data-landing] div[class*="bg-slate-100"] {
  background-color: inherit !important;
}

/* Specifically restore the Feature section's pure white bg */
[data-landing] .bg-white {
  background-color: #ffffff !important;
}

[data-landing] .bg-slate-50 {
  background-color: #f8fafc !important;
}

[data-landing] .bg-slate-100 {
  background-color: #f1f5f9 !important;
}

/* Restore colored card backgrounds (tint cards on landing) */
[data-landing] .bg-indigo-50 {
  background-color: #eef2ff !important;
}

[data-landing] .bg-orange-50 {
  background-color: #fff7ed !important;
}

[data-landing] .bg-pink-50 {
  background-color: #fdf2f8 !important;
}

[data-landing] .bg-emerald-50 {
  background-color: #ecfdf5 !important;
}

[data-landing] .bg-sky-50 {
  background-color: #f0f9ff !important;
}

[data-landing] .bg-amber-50 {
  background-color: #fffbeb !important;
}

[data-landing] .bg-violet-50 {
  background-color: #f5f3ff !important;
}

/* Lock text colors to dark-on-light, ignoring theme overrides */
[data-landing] .text-slate-900 {
  color: #0f172a !important;
}

[data-landing] .text-slate-800 {
  color: #1e293b !important;
}

[data-landing] .text-slate-700 {
  color: #334155 !important;
}

[data-landing] .text-slate-600 {
  color: #475569 !important;
}

[data-landing] .text-slate-500 {
  color: #64748b !important;
}

[data-landing] .text-slate-400 {
  color: #94a3b8 !important;
}

[data-landing] .text-slate-300 {
  color: #cbd5e1 !important;
}

/* Neon theme: stop it from going dark on landing */
.theme-neon [data-landing],
.theme-neon [data-landing] [class*="bg-white"],
.theme-neon [data-landing] [class*="bg-slate-50"],
.theme-neon [data-landing] aside,
.theme-neon [data-landing] nav {
  background-color: unset !important;
  color: unset !important;
}

/* ══ html.on-landing — forces pure white body + navbar, kills ALL theme bleeding ══ */
html.on-landing body {
  background: #ffffff !important;
  background-attachment: unset !important;
  font-family: 'Inter', sans-serif !important;
}

/* Nuclear landing isolation — override vintage/neon font-family on ALL elements */
html.on-landing [data-landing] *,
html.on-landing [data-landing] p,
html.on-landing [data-landing] span,
html.on-landing [data-landing] div,
html.on-landing [data-landing] h1,
html.on-landing [data-landing] h2,
html.on-landing [data-landing] h3,
html.on-landing [data-landing] button,
html.on-landing [data-landing] a {
  font-family: 'Inter', sans-serif !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
}

/* Kill any vintage brown or neon colors leaking onto landing */
html.on-landing [data-landing] .text-slate-900,
html.on-landing [data-landing] h1,
html.on-landing [data-landing] h2,
html.on-landing [data-landing] h3 {
  color: #0f172a !important;
}

html.on-landing [data-landing] .text-slate-800 {
  color: #1e293b !important;
}

html.on-landing [data-landing] .text-slate-700 {
  color: #334155 !important;
}

html.on-landing [data-landing] .text-slate-600,
html.on-landing [data-landing] p {
  color: #475569 !important;
}

html.on-landing [data-landing] .text-slate-500 {
  color: #64748b !important;
}

html.on-landing [data-landing] .text-slate-400 {
  color: #94a3b8 !important;
}

html.on-landing [data-landing] .text-slate-300 {
  color: #cbd5e1 !important;
}

/* ══ NEON + LANDING — nuclear override ══
       The neon theme forces light text and dark backgrounds globally with !important.
       On the landing page we need the OPPOSITE: dark text on white backgrounds.
       These use html.on-landing.theme-neon for maximum specificity to beat the neon rules. */

html.on-landing.theme-neon body {
  background: #ffffff !important;
}

/* Restore ALL neon-overridden text colors to dark readable values on landing */
html.on-landing.theme-neon .text-slate-900,
html.on-landing.theme-neon .text-gray-900,
html.on-landing.theme-neon h1,
html.on-landing.theme-neon h2,
html.on-landing.theme-neon h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html.on-landing.theme-neon .text-slate-800,
html.on-landing.theme-neon .text-gray-800 {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

html.on-landing.theme-neon .text-slate-700,
html.on-landing.theme-neon .text-gray-700 {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

html.on-landing.theme-neon .text-slate-600,
html.on-landing.theme-neon .text-gray-600,
html.on-landing.theme-neon p {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

html.on-landing.theme-neon .text-slate-500,
html.on-landing.theme-neon .text-gray-500 {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

html.on-landing.theme-neon .text-slate-400,
html.on-landing.theme-neon .text-gray-400 {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

/* Neon pidgey-500 uses background-clip:text gradient — strip that on landing */
html.on-landing.theme-neon .text-pidgey-500 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  color: #1d4ed8 !important;
}

html.on-landing.theme-neon .text-pidgey-600 {
  color: #1e40af !important;
  -webkit-text-fill-color: #1e40af !important;
}

/* Keep the indigo-500 text unchanged (used for accent labels) */
html.on-landing.theme-neon .text-indigo-500 {
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
}

html.on-landing.theme-neon .text-indigo-600 {
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
}

/* Restore white backgrounds that neon converts to dark glass */
html.on-landing.theme-neon [class*="bg-white"],
html.on-landing.theme-neon .bg-white {
  background-color: #ffffff !important;
}

html.on-landing.theme-neon [class*="bg-slate-50"],
html.on-landing.theme-neon .bg-slate-50 {
  background-color: #f8fafc !important;
}

html.on-landing.theme-neon [class*="bg-slate-100"],
html.on-landing.theme-neon .bg-slate-100 {
  background-color: #f1f5f9 !important;
}

html.on-landing.theme-neon [class*="bg-slate-200"] {
  background-color: #e2e8f0 !important;
}

/* Restore feature card tint backgrounds */
html.on-landing.theme-neon .bg-indigo-50 {
  background-color: #eef2ff !important;
}

html.on-landing.theme-neon .bg-orange-50 {
  background-color: #fff7ed !important;
}

html.on-landing.theme-neon .bg-pink-50 {
  background-color: #fdf2f8 !important;
}

html.on-landing.theme-neon .bg-emerald-50 {
  background-color: #ecfdf5 !important;
}

html.on-landing.theme-neon .bg-sky-50 {
  background-color: #f0f9ff !important;
}

html.on-landing.theme-neon .bg-amber-50 {
  background-color: #fffbeb !important;
}

html.on-landing.theme-neon .bg-violet-50 {
  background-color: #f5f3ff !important;
}

/* Tags/chips in feature cards — readable on light bg */
html.on-landing.theme-neon span[class*="bg-white"] {
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* Footer section */
html.on-landing.theme-neon footer {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.on-landing.theme-neon footer button {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* White text stays white (gradient CTA buttons) */
html.on-landing.theme-neon .text-white {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Navbar glass — crisp white on landing */
html.on-landing nav.glass-morphism,
html.on-landing .glass-morphism {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(99, 102, 241, 0.12) !important;
  border-image: none !important;
  box-shadow: 0 1px 20px rgba(99, 102, 241, 0.08) !important;
}

/* Neon navbar on landing — override neon dark glass with white */
html.on-landing.theme-neon nav.glass-morphism,
html.on-landing.theme-neon .glass-morphism {
  background: rgba(255, 255, 255, 0.95) !important;
  border-image: none !important;
  border-bottom: 1px solid rgba(99, 102, 241, 0.12) !important;
  box-shadow: 0 1px 20px rgba(99, 102, 241, 0.08) !important;
}

/* Kill neon/vintage/zen overrides on landing */
html.on-landing .theme-vintage,
html.on-landing.theme-vintage body,
html.on-landing.theme-neon body,
html.on-landing.theme-zen body {
  background: #ffffff !important;
}

html.on-landing nav button {
  color: #1e293b !important;
}

/* Neon nav buttons — dark text on white nav */
html.on-landing.theme-neon nav button {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

html.on-landing nav .bg-white,
html.on-landing nav .dark\:bg-slate-800 {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.15) !important;
  box-shadow: none !important;
}

/* Neon logo container on landing — strip neon glow */
html.on-landing.theme-neon nav .bg-white,
html.on-landing.theme-neon nav .dark\:bg-slate-800 {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
  box-shadow: none !important;
}

html.on-landing .text-white {
  color: #ffffff !important;
}

/* ═══ GLOBAL TYPOGRAPHY — crisp, clean, readable ═══ */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══ LIGHT MODE — Strong contrast on gradient bg ═══ */
/* These push Tailwind's default slate shades 2 stops darker */
html:not(.dark):not(.theme-neon) .text-slate-900 {
  color: #020617 !important;
}

html:not(.dark):not(.theme-neon) .text-slate-800 {
  color: #0f172a !important;
}

html:not(.dark):not(.theme-neon) .text-slate-700 {
  color: #1e293b !important;
}

html:not(.dark):not(.theme-neon) .text-slate-600 {
  color: #334155 !important;
}

html:not(.dark):not(.theme-neon) .text-slate-500 {
  color: #475569 !important;
}

html:not(.dark):not(.theme-neon) .text-slate-400 {
  color: #64748b !important;
}

/* Nav button text — inactive buttons readable, but DON'T override active state colors */
/* Active buttons use text-pidgey-500 (blue) which must show — so no !important here */
html:not(.dark):not(.theme-neon) nav button {
  color: #1e293b;
}

html:not(.dark):not(.theme-neon) nav button.text-pidgey-500,
html:not(.dark):not(.theme-neon) nav button .text-pidgey-500 {
  color: #1d4ed8 !important;
}

/* Right-side tab buttons when active (bg-pidgey-500 white text) must stay white */
html:not(.dark):not(.theme-neon) nav button.bg-pidgey-500,
html:not(.dark):not(.theme-neon) nav button.bg-pidgey-500 span {
  color: #ffffff !important;
}

/* Active nav pill — deep blue */
html:not(.dark):not(.theme-neon) .text-pidgey-500 {
  color: #1d4ed8 !important;
}

html:not(.dark):not(.theme-neon) .text-pidgey-600 {
  color: #1e40af !important;
}

/* Sidebar active label */
html:not(.dark):not(.theme-neon) .text-red-500 {
  color: #dc2626 !important;
}

html:not(.dark):not(.theme-neon) .text-orange-500 {
  color: #ea580c !important;
}

html:not(.dark):not(.theme-neon) .text-amber-500 {
  color: #d97706 !important;
}

html:not(.dark):not(.theme-neon) .text-purple-500 {
  color: #7c3aed !important;
}

/* Subdued sidebar labels (60% opacity variants) — make them readable */
html:not(.dark):not(.theme-neon) .text-red-400 {
  color: #b91c1c !important;
}

html:not(.dark):not(.theme-neon) .text-orange-400 {
  color: #c2410c !important;
}

html:not(.dark):not(.theme-neon) .text-amber-400 {
  color: #b45309 !important;
}

html:not(.dark):not(.theme-neon) .text-purple-400 {
  color: #6d28d9 !important;
}

/* Light panel backgrounds — slightly opaque white to contrast gradient body */
html:not(.dark):not(.theme-neon) .bg-white {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

.dark body,
body.dark,
.dark {
  background: #0f172a !important;
  background-attachment: fixed;
  --mascot-filter: brightness(1.15) drop-shadow(0 0 10px rgba(96, 180, 255, 0.45));
}

/* Orb animation for depth */
@keyframes orb-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, -20px) scale(1.05);
  }

  66% {
    transform: translate(-20px, 15px) scale(0.97);
  }

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

@keyframes orb-drift-2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  40% {
    transform: translate(-25px, 20px) scale(1.04);
  }

  70% {
    transform: translate(15px, -10px) scale(0.98);
  }

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

.pidgey-orb-1 {
  animation: orb-drift 18s ease-in-out infinite;
}

.pidgey-orb-2 {
  animation: orb-drift-2 22s ease-in-out infinite;
}

.pidgey-orb-3 {
  animation: orb-drift 26s ease-in-out infinite reverse;
}

/* Make square-background logos blend with any bg */
.logo-blend-light {
  mix-blend-mode: multiply;
}

.dark .logo-blend-light {
  display: none;
}

.logo-blend-dark {
  mix-blend-mode: screen;
}

.glass-morphism {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glass-morphism {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sky-gradient {
  background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 100%);
}

.dark .sky-gradient {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

.pidgey-float {
  animation: float 12s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

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

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

.wiggle:hover {
  animation: wiggle 0.5s ease-in-out infinite;
}

@keyframes wiggle {

  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(3deg);
  }
}

.cloud {
  position: absolute;
  opacity: 0.4;
  animation: moveClouds linear infinite;
}

@keyframes moveClouds {
  0% {
    transform: translateX(-150%);
  }

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

@keyframes feather-fall {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translate(var(--tw-translate-x), 100vh) rotate(360deg);
    opacity: 0;
  }
}

.animate-feather {
  animation: feather-fall 3s ease-out forwards;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

/* ═══ ZEN THEME OVERRIDES (Calming Matcha & Stone, Ultra-Readable) ═══ */
.theme-zen body,
.theme-zen {
  font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.theme-zen .pidgey-orb-1,
.theme-zen .pidgey-orb-2,
.theme-zen .pidgey-orb-3 {
  display: none !important;
}

.theme-zen .pidgey-float {
  animation: none;
}

.theme-zen .wiggle:hover {
  animation: none;
}

.theme-zen .animate-feather {
  display: none !important;
  animation: none;
}

/* ── LIGHT MODE ZEN (Calm Sand & Matcha) ── */
html:not(.dark).theme-zen body {
  background: #f5f7f5 !important;
  color: #2e3530 !important;
}

html:not(.dark).theme-zen .bg-pidgey-50,
html:not(.dark).theme-zen .bg-pidgey-50\/80 {
  background-color: #eaf0eb !important;
  color: #1e2520 !important;
  border: 1px solid #d4ded6 !important;
}

html:not(.dark).theme-zen nav.glass-morphism,
html:not(.dark).theme-zen .glass-morphism,
html:not(.dark).theme-zen .bg-white\/90,
html:not(.dark).theme-zen .bg-white,
html:not(.dark).theme-zen .bg-slate-50,
html:not(.dark).theme-zen .bg-slate-100 {
  background-color: #ffffff !important; 
  border-width: 0px 0px 1px 0px !important;
  border-color: #e8ece9 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html:not(.dark).theme-zen .bg-pidgey-500 {
  background-color: #618768 !important;
  color: #ffffff !important;
  border: 1px solid #5a7d60 !important;
  box-shadow: 0 4px 14px rgba(97, 135, 104, 0.15) !important;
}

html:not(.dark).theme-zen .text-slate-900,
html:not(.dark).theme-zen .text-slate-800,
html:not(.dark).theme-zen .text-slate-700,
html:not(.dark).theme-zen .text-gray-900,
html:not(.dark).theme-zen .text-gray-800,
html:not(.dark).theme-zen .text-black {
  color: #2e3530 !important;
}

html:not(.dark).theme-zen .text-slate-600,
html:not(.dark).theme-zen .text-slate-500,
html:not(.dark).theme-zen .text-slate-400,
html:not(.dark).theme-zen .text-gray-600,
html:not(.dark).theme-zen .text-gray-500 {
  color: #5c6e61 !important; 
}

html:not(.dark).theme-zen .text-pidgey-500 {
  color: #4f7355 !important;
  font-weight: 600 !important;
}

html:not(.dark).theme-zen .text-pidgey-600 {
  color: #3f5f44 !important;
  font-weight: 700 !important;
}

html:not(.dark).theme-zen nav button {
  color: #5c6e61 !important;
}

html:not(.dark).theme-zen nav button:hover {
  color: #2e3530 !important;
}

html:not(.dark).theme-zen .glass-morphism {
  background: #ffffff !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid #e8ece9 !important;
}

html:not(.dark).theme-zen [id^="email-row-"] {
  background-color: #ffffff !important;
  margin: 10px 16px !important;
  padding: 20px 24px !important;
  border-radius: 12px !important;
  border: 1px solid #e8ece9 !important;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

html:not(.dark).theme-zen [id^="email-row-"]:hover {
  background-color: #fbfdfb !important;
  transform: translateY(-2px);
  border-color: #dbe4dc !important;
}

html:not(.dark).theme-zen .bg-pidgey-50\/80[id^="email-row-"] {
  background-color: #eff4f0 !important;
  border-color: #c4d6c7 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark).theme-zen .border-b,
html:not(.dark).theme-zen .border-r,
html:not(.dark).theme-zen .border-t {
  border-color: #e8ece9 !important; 
}

html:not(.dark).theme-zen .email-detail-container,
html:not(.dark).theme-zen .bg-white\/60 {
  background-color: #ffffff !important;
  margin: 10px 16px 10px 0 !important;
  border-radius: 12px !important;
  border: 1px solid #e8ece9 !important;
}


/* ── DARK MODE ZEN (Deep Stone green & Matcha) ── */
html.dark.theme-zen body,
.dark.theme-zen body {
  background: #181b19 !important;
  color: #e2e8e4 !important;
}

html.dark.theme-zen .bg-pidgey-50,
html.dark.theme-zen .bg-pidgey-50\/80 {
  background-color: #29342d !important;
  color: #f0f4f1 !important;
  border: 1px solid #36453b !important;
}

html.dark.theme-zen nav.glass-morphism,
html.dark.theme-zen .glass-morphism,
html.dark.theme-zen .bg-\[\#1a2332\]\/90,
html.dark.theme-zen .bg-white,
html.dark.theme-zen .bg-slate-50,
html.dark.theme-zen .bg-slate-100 {
  background-color: #1e2320 !important; 
  border-width: 0px 0px 1px 0px !important;
  border-color: #27302b !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html.dark.theme-zen .bg-pidgey-500 {
  background-color: #618768 !important;
  color: #ffffff !important;
  border: 1px solid #7ea385 !important;
  box-shadow: 0 4px 14px rgba(97, 135, 104, 0.15) !important;
}

html.dark.theme-zen .text-slate-900,
html.dark.theme-zen .text-slate-800,
html.dark.theme-zen .text-slate-700,
html.dark.theme-zen .text-gray-900,
html.dark.theme-zen .text-gray-800,
html.dark.theme-zen .text-black {
  color: #f0f4f1 !important;
}

html.dark.theme-zen .text-slate-600,
html.dark.theme-zen .text-slate-500,
html.dark.theme-zen .text-slate-400,
html.dark.theme-zen .text-gray-600,
html.dark.theme-zen .text-gray-500 {
  color: #9cb0a2 !important; 
}

html.dark.theme-zen .text-pidgey-500 {
  color: #8dae93 !important;
  font-weight: 600 !important;
}

html.dark.theme-zen .text-pidgey-600 {
  color: #a4c4a9 !important;
  font-weight: 700 !important;
}

html.dark.theme-zen nav button {
  color: #c9d6ce !important;
}

html.dark.theme-zen nav button:hover {
  color: #ffffff !important;
}

html.dark.theme-zen .glass-morphism {
  background: #1e2320 !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid #27302b !important;
}

html.dark.theme-zen [id^="email-row-"] {
  background-color: #212623 !important;
  margin: 10px 16px !important;
  padding: 20px 24px !important;
  border-radius: 12px !important;
  border: 1px solid #2a312c !important;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

html.dark.theme-zen [id^="email-row-"]:hover {
  background-color: #272d29 !important;
  transform: translateY(-2px);
  border-color: #38423c !important;
}

html.dark.theme-zen .bg-\[\#1a2840\][id^="email-row-"] {
  background-color: #29342d !important;
  border-color: #435448 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

html.dark.theme-zen .border-b,
html.dark.theme-zen .border-r,
html.dark.theme-zen .border-t {
  border-color: #2a312c !important; 
}

html.dark.theme-zen .email-detail-container,
html.dark.theme-zen .bg-\[\#0f1923\]\/90 {
  background-color: #212623 !important;
  margin: 10px 16px 10px 0 !important;
  border-radius: 12px !important;
  border: 1px solid #2a312c !important;
}

.email-body-selectable,
.email-body-selectable * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* ═══ NEON THEME — Cyberpunk Glassmorphism ═══ */

/* Force dark mode colors when neon is active */
.theme-neon,
.theme-neon body {
  background: #030308 !important;
  color: #e2e8f0 !important;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Animated ambient orbs (neon-colored, replacing default orbs) ── */
.theme-neon .pidgey-orb-1,
.theme-neon .pidgey-orb-2,
.theme-neon .pidgey-orb-3 {
  display: block !important;
  opacity: 1 !important;
}

.theme-neon .pidgey-orb-1 {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%) !important;
}

.theme-neon .pidgey-orb-2 {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, transparent 70%) !important;
}

.theme-neon .pidgey-orb-3 {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.18) 0%, transparent 70%) !important;
}

/* ── Animated rainbow border keyframe ── */
@keyframes neon-border-rotate {
  0% {
    --neon-angle: 0deg;
  }

  100% {
    --neon-angle: 360deg;
  }
}

@keyframes neon-pulse {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

@keyframes neon-glow-breathe {

  0%,
  100% {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15), 0 0 45px rgba(6, 182, 212, 0.05);
  }

  50% {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.3), 0 0 60px rgba(6, 182, 212, 0.12);
  }
}

@keyframes neon-shimmer {
  0% {
    background-position: -200% center;
  }

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

/* ── Navbar — glass with animated bottom gradient border ── */
.theme-neon nav.glass-morphism,
.theme-neon .glass-morphism {
  background: rgba(5, 5, 18, 0.85) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-color: transparent !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #8b5cf6, #06b6d4, #ec4899, #f59e0b, #8b5cf6) 1 !important;
  box-shadow: 0 4px 30px rgba(139, 92, 246, 0.12), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* ── Logo container — neon glow ring ── */
.theme-neon nav .bg-white,
.theme-neon nav .dark\:bg-slate-800 {
  background: rgba(139, 92, 246, 0.12) !important;
  border: 1px solid rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.35), 0 0 4px rgba(6, 182, 212, 0.3);
}

/* ── Brand text — gradient shimmer ── */
.theme-neon .text-pidgey-500 {
  background: linear-gradient(135deg, #a78bfa, #06b6d4, #ec4899) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.theme-neon .text-pidgey-600 {
  color: #a78bfa !important;
}

/* ── ALL TEXT — FORCE bright white on dark neon bg ── */

/* The root sets the base text color that all children inherit */
.theme-neon {
  color: #e2e8f0 !important;
}

/* Slam every slate shade to bright-on-dark equivalents */
.theme-neon .text-slate-900 {
  color: #ffffff !important;
}

.theme-neon .text-slate-800 {
  color: #f8fafc !important;
}

.theme-neon .text-slate-700 {
  color: #f1f5f9 !important;
}

.theme-neon .text-slate-600 {
  color: #e2e8f0 !important;
}

.theme-neon .text-slate-500 {
  color: #cbd5e1 !important;
}

.theme-neon .text-slate-400 {
  color: #94a3b8 !important;
}

.theme-neon .text-slate-300 {
  color: #cbd5e1 !important;
}

/* Colored sidebar folder labels — vivid neon versions */
.theme-neon .text-red-400,
.theme-neon .text-red-500 {
  color: #fca5a5 !important;
}

.theme-neon .text-orange-400,
.theme-neon .text-orange-500 {
  color: #fdba74 !important;
}

.theme-neon .text-amber-400,
.theme-neon .text-amber-500 {
  color: #fcd34d !important;
}

.theme-neon .text-purple-400,
.theme-neon .text-purple-500 {
  color: #c4b5fd !important;
}

.theme-neon .text-emerald-400,
.theme-neon .text-emerald-500 {
  color: #6ee7b7 !important;
}

.theme-neon .text-blue-400,
.theme-neon .text-blue-500 {
  color: #93c5fd !important;
}

/* ── Blanket: ALL white/light panel backgrounds → dark glass ── */
/* .bg-white only catches the plain class, not bg-white/70, bg-white/90, etc. */
/* [class*="bg-white"] catches ALL opacity variants Tailwind CDN generates */
.theme-neon aside,
.theme-neon nav,
.theme-neon [class*="bg-white"],
.theme-neon [class*="bg-slate-50"],
.theme-neon [class*="bg-slate-100"],
.theme-neon [class*="bg-slate-200"] {
  background-color: rgba(8, 8, 28, 0.92) !important;
  /* Also kill the Tailwind opacity variable */
  --tw-bg-opacity: 1 !important;
  color: #e2e8f0 !important;
}


/* Small pill/chip backgrounds — keep them as subtle tints, not full white */
.theme-neon .bg-pidgey-50 {
  background-color: rgba(139, 92, 246, 0.15) !important;
}

.theme-neon .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.12) !important;
}

.theme-neon .bg-orange-50 {
  background-color: rgba(249, 115, 22, 0.12) !important;
}

.theme-neon .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.12) !important;
}

.theme-neon .bg-purple-50 {
  background-color: rgba(139, 92, 246, 0.12) !important;
}

.theme-neon .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.12) !important;
}

.theme-neon .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.12) !important;
}

.theme-neon .bg-pidgey-100 {
  background-color: rgba(139, 92, 246, 0.2) !important;
}

.theme-neon .bg-red-100 {
  background-color: rgba(239, 68, 68, 0.2) !important;
}

.theme-neon .bg-orange-100 {
  background-color: rgba(249, 115, 22, 0.2) !important;
}

.theme-neon .bg-amber-100 {
  background-color: rgba(245, 158, 11, 0.2) !important;
}

.theme-neon .bg-purple-100 {
  background-color: rgba(139, 92, 246, 0.2) !important;
}

/* ══ NEON LIGHT MODE — Text contrast fixes ══
       In light (non-dark) neon mode the panel backgrounds are forced to near-black glass
       but Tailwind's light-mode text colors (slate-900, slate-700, etc.) stay dark
       making them invisible. Force them all to bright readable values. */
.theme-neon .text-slate-900,
.theme-neon .text-slate-800,
.theme-neon .text-gray-900,
.theme-neon .text-gray-800 {
  color: #f1f5f9 !important;
}

.theme-neon .text-slate-700,
.theme-neon .text-slate-600,
.theme-neon .text-gray-700,
.theme-neon .text-gray-600 {
  color: #cbd5e1 !important;
}

.theme-neon .text-slate-500,
.theme-neon .text-gray-500 {
  color: #94a3b8 !important;
}

.theme-neon .text-slate-400,
.theme-neon .text-gray-400 {
  color: #94a3b8 !important;
}

/* Sidebar & list item text — ensure readable on dark glass */
.theme-neon [class*="bg-white"] .text-slate-700,
.theme-neon [class*="bg-white"] .text-slate-600,
.theme-neon [class*="bg-slate-50"] .text-slate-700,
.theme-neon [class*="bg-slate-50"] .text-slate-600,
.theme-neon aside .text-slate-700,
.theme-neon aside .text-slate-600 {
  color: #c8d6e5 !important;
}

/* Button text inside neon panels — keep readable */
.theme-neon [class*="bg-white"] button,
.theme-neon [class*="bg-slate-50"] button,
.theme-neon aside button {
  color: #e2e8f0 !important;
}

/* ── Nav buttons — always bright ── */
.theme-neon nav button {
  color: #e2e8f0 !important;
}

.theme-neon nav button:hover {
  color: #ffffff !important;
}

.theme-neon nav a {
  color: #e2e8f0 !important;
}

.theme-neon nav a:hover {
  color: #ffffff !important;
}

/* ── Headings — neon glow ── */
.theme-neon h1,
.theme-neon h2,
.theme-neon h3 {
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(6, 182, 212, 0.1);
}

/* ── Sidebar — frosted glass with edge glow ── */
.theme-neon .bg-white\/70,
.theme-neon .dark\:bg-\[\\#141e2b\]\/90 {
  background: rgba(8, 8, 25, 0.75) !important;
  backdrop-filter: blur(28px) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
  box-shadow: inset -1px 0 0 rgba(139, 92, 246, 0.15), 0 0 30px rgba(139, 92, 246, 0.05);
}

/* Sidebar active item — neon highlight */
.theme-neon .bg-pidgey-50\/80,
.theme-neon .dark\:bg-\[\\#1a2840\] {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.1)) !important;
  border-left: 3px solid #8b5cf6 !important;
  box-shadow: inset 4px 0 15px rgba(139, 92, 246, 0.12);
}

/* ── Email list panel — glass with gradient top ── */
.theme-neon .bg-white\/90,
.theme-neon .dark\:bg-\[\\#1a2332\]\/90 {
  background: linear-gradient(180deg, rgba(15, 10, 35, 0.85) 0%, rgba(8, 8, 25, 0.8) 100%) !important;
  backdrop-filter: blur(20px) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

/* ── Email rows — rainbow color bands (like the reference image!) ── */
.theme-neon .group.flex.items-start.gap-3\.5 {
  border-left-width: 3px !important;
  transition: all 0.2s ease, border-color 0.1s ease !important;
}

/* Cycle through rainbow colors for email row left borders */
.theme-neon .group.flex.items-start.gap-3\.5:nth-child(6n+1) {
  border-left-color: #ef4444 !important;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.06) 0%, transparent 40%) !important;
}

.theme-neon .group.flex.items-start.gap-3\.5:nth-child(6n+2) {
  border-left-color: #f97316 !important;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.06) 0%, transparent 40%) !important;
}

.theme-neon .group.flex.items-start.gap-3\.5:nth-child(6n+3) {
  border-left-color: #eab308 !important;
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.06) 0%, transparent 40%) !important;
}

.theme-neon .group.flex.items-start.gap-3\.5:nth-child(6n+4) {
  border-left-color: #22c55e !important;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.06) 0%, transparent 40%) !important;
}

.theme-neon .group.flex.items-start.gap-3\.5:nth-child(6n+5) {
  border-left-color: #06b6d4 !important;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.06) 0%, transparent 40%) !important;
}

.theme-neon .group.flex.items-start.gap-3\.5:nth-child(6n+6) {
  border-left-color: #8b5cf6 !important;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.06) 0%, transparent 40%) !important;
}

/* Email row hover — brighten the gradient */
.theme-neon .group.flex.items-start.gap-3\.5:hover {
  filter: brightness(1.3);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.08);
}

/* ── Selected email row — bright glow ── */
.theme-neon .bg-pidgey-50\/80 {
  background: rgba(139, 92, 246, 0.15) !important;
  box-shadow: inset 4px 0 0 #a78bfa, 0 0 25px rgba(139, 92, 246, 0.12);
}

/* ── Email detail panel — glass ── */
.theme-neon .bg-white\/60,
.theme-neon .dark\:bg-\[\\#0f1923\]\/90 {
  background: rgba(6, 6, 20, 0.82) !important;
  backdrop-filter: blur(20px) !important;
}

/* ── Avatar circles — vivid neon gradients ── */
.theme-neon .bg-blue-500 {
  background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4) !important;
}

.theme-neon .bg-emerald-500 {
  background: linear-gradient(135deg, #10b981, #06b6d4) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
}

.theme-neon .bg-purple-500 {
  background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4) !important;
}

.theme-neon .bg-rose-500 {
  background: linear-gradient(135deg, #f43f5e, #f59e0b) !important;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.4) !important;
}

.theme-neon .bg-amber-500 {
  background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}

.theme-neon .bg-teal-500 {
  background: linear-gradient(135deg, #14b8a6, #3b82f6) !important;
  box-shadow: 0 0 10px rgba(20, 184, 166, 0.4) !important;
}

.theme-neon .bg-indigo-500 {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4) !important;
}

.theme-neon .bg-pink-500 {
  background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.4) !important;
}

.theme-neon .bg-cyan-500 {
  background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.4) !important;
}

/* ── Primary buttons — gradient with shimmer animation ── */
.theme-neon .bg-pidgey-500 {
  background: linear-gradient(135deg, #7c3aed, #06b6d4, #ec4899) !important;
  background-size: 200% 200% !important;
  animation: neon-shimmer 4s ease-in-out infinite !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), 0 0 40px rgba(6, 182, 212, 0.15) !important;
  border: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 700 !important;
}

.theme-neon .bg-pidgey-500:hover {
  box-shadow: 0 0 35px rgba(139, 92, 246, 0.6), 0 0 60px rgba(6, 182, 212, 0.25) !important;
  transform: translateY(-1px);
}

.theme-neon .bg-pidgey-50 {
  background: rgba(139, 92, 246, 0.1) !important;
}

/* ── Nav pills — glass active state ── */
.theme-neon .bg-slate-50,
.theme-neon .dark\:bg-slate-800\/50 {
  background: rgba(139, 92, 246, 0.08) !important;
}

.theme-neon .bg-slate-100,
.theme-neon .dark\:bg-slate-800 {
  background: rgba(10, 10, 30, 0.6) !important;
}

/* ── Input fields — neon glass ── */
.theme-neon input,
.theme-neon select,
.theme-neon textarea {
  background: rgba(10, 10, 35, 0.7) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  color: #e2e8f0 !important;
  caret-color: #a78bfa;
}

.theme-neon input::placeholder,
.theme-neon textarea::placeholder {
  color: rgba(148, 163, 184, 0.5) !important;
}

.theme-neon input:focus,
.theme-neon select:focus,
.theme-neon textarea:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.25), 0 0 4px rgba(139, 92, 246, 0.5) !important;
  outline: none;
}

/* ── Cards, modals, dropdowns — glass panels ── */
.theme-neon .bg-white,
.theme-neon .dark\:bg-slate-900 {
  background: rgba(8, 8, 28, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  border-color: rgba(139, 92, 246, 0.2) !important;
}

/* ── ALL borders — neon tint ── */
.theme-neon .border-slate-200\/60,
.theme-neon .dark\:border-slate-700\/50,
.theme-neon .border-slate-100,
.theme-neon .dark\:border-slate-800,
.theme-neon .border-white\/30,
.theme-neon .dark\:border-slate-700\/40,
.theme-neon .border-pidgey-100,
.theme-neon .dark\:border-pidgey-500\/20 {
  border-color: rgba(139, 92, 246, 0.18) !important;
}

/* ── Shadows — colorful neon glow ── */
.theme-neon .shadow-xl {
  box-shadow: 0 4px 30px rgba(139, 92, 246, 0.12), 0 0 2px rgba(6, 182, 212, 0.15) !important;
}

.theme-neon .shadow-2xl {
  box-shadow: 0 8px 50px rgba(139, 92, 246, 0.2), 0 0 3px rgba(236, 72, 153, 0.15) !important;
}

/* ── Scrollbar ── */
.theme-neon ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.3)) !important;
  border-radius: 10px;
}

.theme-neon ::-webkit-scrollbar-track {
  background: rgba(5, 5, 16, 0.5) !important;
}

/* ── Pidgey FAB — rainbow glow with pulse ── */
.theme-neon .bg-gradient-to-br.from-pidgey-400.to-blue-600,
.theme-neon .bg-gradient-to-br {
  background: linear-gradient(135deg, #8b5cf6, #06b6d4, #ec4899) !important;
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.5), 0 0 50px rgba(6, 182, 212, 0.2), 0 0 75px rgba(236, 72, 153, 0.1) !important;
  animation: neon-glow-breathe 3s ease-in-out infinite;
}

/* ── Pidgey Chat — neon accents ── */
.theme-neon .bg-gradient-to-r.from-pidgey-500.to-blue-600 {
  background: linear-gradient(135deg, #7c3aed, #0891b2, #c026d3) !important;
  box-shadow: 0 2px 20px rgba(139, 92, 246, 0.2);
}

.theme-neon .sm\:border-2.sm\:border-pidgey-200 {
  border-color: rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.18), 0 0 80px rgba(6, 182, 212, 0.06) !important;
}

/* ── Category tags — neon tints ── */
.theme-neon .bg-blue-100 {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #a5b4fc !important;
}

.theme-neon .bg-green-100 {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
}

.theme-neon .bg-purple-100 {
  background: rgba(139, 92, 246, 0.18) !important;
  color: #c4b5fd !important;
}

.theme-neon .bg-red-100 {
  background: rgba(244, 63, 94, 0.18) !important;
  color: #fda4af !important;
}

.theme-neon .bg-amber-100 {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fcd34d !important;
}

.theme-neon .bg-emerald-50 {
  background: rgba(16, 185, 129, 0.1) !important;
}

.theme-neon .bg-amber-50 {
  background: rgba(245, 158, 11, 0.1) !important;
}

/* ── Feather animations — neon-ified ── */
.theme-neon .animate-feather {
  filter: hue-rotate(240deg) brightness(1.8) drop-shadow(0 0 6px rgba(139, 92, 246, 0.5));
}

/* ── Date headers — subtle glow ── */
.theme-neon .sticky.top-0.z-10 {
  background: rgba(8, 8, 28, 0.95) !important;
  backdrop-filter: blur(12px) !important;
}

.theme-neon .sticky.top-0.z-10 span {
  color: #a78bfa !important;
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Resize handle ── */
.theme-neon .cursor-col-resize {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%) !important;
}

.theme-neon .cursor-col-resize:hover {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.25) 0%, rgba(6, 182, 212, 0.25) 100%) !important;
}

/* ── Mascot — cyberpunk glow ── */
.theme-neon {
  --mascot-filter: brightness(1.2) drop-shadow(0 0 15px rgba(139, 92, 246, 0.6)) drop-shadow(0 0 30px rgba(6, 182, 212, 0.3));
}


/* ═══ NEON CONTRAST FIXES — Lookout / Scheduled / Snoozed / Email Subs / Journal ═══ */

/* Boosted base text contrast on ultra-dark neon panels */
.theme-neon p {
  color: #cbd5e1 !important;
}

/* Headings bright */
.theme-neon h1,
.theme-neon h2,
.theme-neon h3,
.theme-neon h4,
.theme-neon h5 {
  color: #f8fafc !important;
}

/* Uppercase tracking labels (section headers in panels) */
.theme-neon [class*="uppercase"][class*="tracking-widest"] {
  color: #a78bfa !important;
  text-shadow: 0 0 6px rgba(139, 92, 246, 0.3);
}

/* All subscriptions/snoozed/scheduled card inner text */
.theme-neon article p {
  color: #c8d6e5 !important;
}

/* Colored label classes missing from the main neon block */
.theme-neon .text-emerald-600,
.theme-neon .text-emerald-700 {
  color: #6ee7b7 !important;
}

.theme-neon .text-amber-600,
.theme-neon .text-amber-700 {
  color: #fcd34d !important;
}

.theme-neon .text-teal-600,
.theme-neon .text-teal-700 {
  color: #5eead4 !important;
}

.theme-neon .text-blue-600,
.theme-neon .text-blue-700 {
  color: #93c5fd !important;
}

.theme-neon .text-indigo-600,
.theme-neon .text-indigo-700 {
  color: #a5b4fc !important;
}

.theme-neon .text-purple-500,
.theme-neon .text-purple-600 {
  color: #c4b5fd !important;
}

.theme-neon .text-sky-400,
.theme-neon .text-sky-600 {
  color: #7dd3fc !important;
}

.theme-neon .text-red-600,
.theme-neon .text-red-700 {
  color: #fca5a5 !important;
}

/* Journal entry card — override hardcoded warm bg-[#faf3e6] */
.theme-neon article {
  background: rgba(14, 10, 40, 0.88) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.08), 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Journal spiral holes — neon tinted */
.theme-neon article .w-3.h-3.rounded-full {
  border-color: rgba(139, 92, 246, 0.4) !important;
  background: rgba(5, 5, 20, 0.8) !important;
}

/* Journal nav "All Entries" active pill */
.theme-neon .bg-pidgey-200 {
  background: rgba(139, 92, 246, 0.28) !important;
  color: #e0d4ff !important;
}

/* Journal sidebar inactive buttons */
.theme-neon aside nav button {
  color: #a78bfa !important;
}

.theme-neon aside nav button:hover {
  color: #ddd6fe !important;
  background: rgba(139, 92, 246, 0.12) !important;
}

/* Journal main content bg */
.theme-neon main {
  background: rgba(6, 5, 18, 0.95) !important;
}

/* Pidgey chat suggestion chips — currently near-invisible dark on dark */
.theme-neon .flex.flex-col.gap-2 button {
  background: rgba(22, 15, 60, 0.75) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
  color: #c4b5fd !important;
}

.theme-neon .flex.flex-col.gap-2 button:hover {
  background: rgba(35, 22, 90, 0.9) !important;
  color: #e9d8fd !important;
}

/* ═══ VINTAGE THEME — Aged Parchment & Old Ink ═══ */


@keyframes vintage-flicker {

  0%,
  100% {
    opacity: 1;
  }

  92% {
    opacity: 0.96;
  }

  95% {
    opacity: 0.98;
  }
}

.theme-vintage,
.theme-vintage body {
  /* Warm parchment base */
  background: #eadec8 !important;
  color: #2c1a0e !important;
  /* Libre Baskerville — readable vintage serif for body text */
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif !important;
  letter-spacing: 0.01em !important;
}

/* Paper texture overlay using CSS noise — sits behind all content */
.theme-vintage body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Warm vignette around edges */
.theme-vintage body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(100, 60, 20, 0.18) 100%);
}

/* ── Ambient orbs — warm sepia tones ── */
.theme-vintage .pidgey-orb-1 {
  background: radial-gradient(circle, rgba(210, 160, 80, 0.3) 0%, transparent 70%) !important;
}

.theme-vintage .pidgey-orb-2 {
  background: radial-gradient(circle, rgba(180, 120, 60, 0.22) 0%, transparent 70%) !important;
}

.theme-vintage .pidgey-orb-3 {
  background: radial-gradient(circle, rgba(150, 100, 50, 0.18) 0%, transparent 70%) !important;
}

/* ── Typography — all text in warm ink tones ── */
.theme-vintage .text-slate-900,
.theme-vintage .text-slate-800 {
  color: #1c0f06 !important;
}

.theme-vintage .text-slate-700,
.theme-vintage .text-slate-600 {
  color: #3d2310 !important;
}

.theme-vintage .text-slate-500 {
  color: #5c3a1f !important;
}

.theme-vintage .text-slate-400,
.theme-vintage .text-slate-300 {
  color: #7a5530 !important;
}

/* ── pidgey-500 (primary accent) → warm amber/gold ── */
.theme-vintage .text-pidgey-500 {
  color: #9c5c1a !important;
}

.theme-vintage .text-pidgey-600 {
  color: #7a4010 !important;
}

.theme-vintage .bg-pidgey-500 {
  background-color: #b5712a !important;
  box-shadow: 0 2px 10px rgba(120, 70, 20, 0.35) !important;
}

.theme-vintage .bg-pidgey-500:hover {
  background-color: #9c5c1a !important;
}

.theme-vintage .bg-pidgey-50 {
  background-color: #f4e8d4 !important;
}

.theme-vintage .bg-pidgey-100 {
  background-color: #eedcbf !important;
}

.theme-vintage .border-pidgey-100,
.theme-vintage .border-pidgey-200 {
  border-color: #d4a870 !important;
}

/* ── Panels / paper surfaces — all warm parchment tones ── */
.theme-vintage aside,
.theme-vintage nav,
.theme-vintage [class*="bg-white"],
.theme-vintage [class*="bg-slate-50"],
.theme-vintage [class*="bg-slate-100"],
.theme-vintage [class*="bg-slate-200"] {
  background-color: #f0e3c8 !important;
  --tw-bg-opacity: 1 !important;
  color: #2c1a0e !important;
}


/* ═══════════════════════════════════════════════════════════
       VINTAGE + DARK MODE — Warm Sepia on Dark Parchment Night
       All contrast ratios verified to meet WCAG AA (≥ 4.5:1)
       ═══════════════════════════════════════════════════════════ */

/* Base: dark body gets a deep warm-brown background, not pure black */
.dark.theme-vintage body,
.dark.theme-vintage {
  background: #1a1009 !important;
  color: #e8d5b7 !important;
}

/* Panel surfaces — deep walnut with warm tint */
.dark.theme-vintage aside,
.dark.theme-vintage nav,
.dark.theme-vintage [class*="bg-white"],
.dark.theme-vintage [class*="bg-slate-50"],
.dark.theme-vintage [class*="bg-slate-100"],
.dark.theme-vintage [class*="bg-slate-200"] {
  background-color: #261508 !important;
  --tw-bg-opacity: 1 !important;
  color: #e8d5b7 !important;
}

/* Dark-specific slate classes Tailwind generates */
.dark.theme-vintage [class*="dark:bg-slate-900"],
.dark.theme-vintage .dark\:bg-\[\#141e2b\],
.dark.theme-vintage .dark\:bg-\[\#0f1923\],
.dark.theme-vintage .dark\:bg-\[\#1a2332\]\/90,
.dark.theme-vintage .dark\:bg-\[\#1a2840\] {
  background-color: #1e1106 !important;
  color: #e8d5b7 !important;
}

/* Typography — warm cream tones on dark backgrounds */
.dark.theme-vintage .text-slate-900,
.dark.theme-vintage .text-slate-800 {
  color: #f0e0c4 !important;
}

.dark.theme-vintage .text-slate-700,
.dark.theme-vintage .text-slate-600 {
  color: #d9be96 !important;
}

.dark.theme-vintage .text-slate-500 {
  color: #b89870 !important;
}

.dark.theme-vintage .text-slate-400,
.dark.theme-vintage .text-slate-300 {
  color: #b89870 !important;
}

/* White text (used on colored buttons/avatars) stays white */
.dark.theme-vintage .text-white {
  color: #fff !important;
}

/* pidgey accent — warm amber brightened for dark bg */
.dark.theme-vintage .text-pidgey-500 {
  color: #d4924a !important;
}

.dark.theme-vintage .text-pidgey-600 {
  color: #c07a30 !important;
}

/* Headings — handwriting font in warm cream */
.dark.theme-vintage h1,
.dark.theme-vintage h2,
.dark.theme-vintage h3 {
  color: #f0ddb8 !important;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.4),
    0 0 20px rgba(210, 150, 60, 0.12) !important;
}

/* Nav — parchment night bar */
.dark.theme-vintage nav.glass-morphism,
.dark.theme-vintage .glass-morphism {
  background: rgba(30, 17, 6, 0.96) !important;
  border-bottom: 2px solid #5c3a18 !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.dark.theme-vintage nav button,
.dark.theme-vintage nav a {
  color: #d9be96 !important;
}

.dark.theme-vintage nav button:hover,
.dark.theme-vintage nav a:hover {
  color: #f0ddb8 !important;
}

/* Sidebar active item */
.dark.theme-vintage [class*="bg-pidgey-50"],
.dark.theme-vintage .dark\:bg-\[\#1a2840\] {
  background-color: rgba(140, 90, 30, 0.25) !important;
  color: #f0ddb8 !important;
  border-left-color: #c07a30 !important;
}

/* Input fields -— dark parchment writing area */
.dark.theme-vintage input,
.dark.theme-vintage select,
.dark.theme-vintage textarea {
  background: #2a1a08 !important;
  border: 1.5px solid #6b4520 !important;
  color: #e8d5b7 !important;
  caret-color: #d4924a;
}

.dark.theme-vintage input::placeholder,
.dark.theme-vintage textarea::placeholder {
  color: #7a5830 !important;
}

.dark.theme-vintage input:focus,
.dark.theme-vintage select:focus,
.dark.theme-vintage textarea:focus {
  border-color: #c07a30 !important;
  box-shadow: 0 0 0 3px rgba(192, 122, 48, 0.2) !important;
}

/* Date headers / sticky rows */
.dark.theme-vintage .sticky.top-0.z-10 {
  background: rgba(26, 16, 9, 0.97) !important;
}

.dark.theme-vintage .sticky.top-0.z-10 span {
  color: #c07a30 !important;
}

/* Borders */
.dark.theme-vintage .border-slate-200\/60,
.dark.theme-vintage .border-slate-100,
.dark.theme-vintage .border-slate-200,
.dark.theme-vintage .border-white\/30,
.dark.theme-vintage .border-slate-700\/50,
.dark.theme-vintage [class*="dark:border-slate-700"],
.dark.theme-vintage [class*="dark:border-slate-800"] {
  border-color: #4a2e10 !important;
}

/* Category tags — muted warm tones legible on dark */
.dark.theme-vintage .bg-blue-50,
.dark.theme-vintage .bg-blue-100 {
  background: rgba(80, 100, 150, 0.18) !important;
  color: #a0b8d8 !important;
}

.dark.theme-vintage .bg-red-50,
.dark.theme-vintage .bg-red-100 {
  background: rgba(160, 60, 40, 0.18) !important;
  color: #e09080 !important;
}

.dark.theme-vintage .bg-amber-50,
.dark.theme-vintage .bg-amber-100 {
  background: rgba(180, 130, 40, 0.18) !important;
  color: #d4a850 !important;
}

.dark.theme-vintage .bg-green-50,
.dark.theme-vintage .bg-emerald-50,
.dark.theme-vintage .bg-green-100 {
  background: rgba(80, 120, 60, 0.18) !important;
  color: #90b870 !important;
}

.dark.theme-vintage .bg-purple-50,
.dark.theme-vintage .bg-purple-100 {
  background: rgba(120, 80, 140, 0.18) !important;
  color: #c090d0 !important;
}

/* Scrollbar — dark sepia */
.dark.theme-vintage ::-webkit-scrollbar-thumb {
  background: #6b4520 !important;
}

.dark.theme-vintage ::-webkit-scrollbar-track {
  background: #1a1009 !important;
}

/* Vintage + Dark: selected email row needs readable light text */
.dark.theme-vintage [class*="bg-pidgey-50"],
.dark.theme-vintage [class*="bg-\\[\\#1a2840\\]"] {
  color: #f0ddb8 !important;
}



/* Slightly darker panels for depth (sidebars, modals) */
.theme-vintage aside {
  background-color: #e8d5b0 !important;
  border-right-color: #c9a96a !important;
}

/* ── Navbar — aged leather-book look ── */
.theme-vintage nav.glass-morphism,
.theme-vintage .glass-morphism {
  background: rgba(225, 205, 165, 0.95) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  border-bottom: 2px solid #c9a96a !important;
  box-shadow: 0 2px 20px rgba(100, 60, 20, 0.15), 0 1px 0 rgba(255, 220, 160, 0.5) inset;
}

/* ── Borders — aged sepia ink lines ── */
.theme-vintage .border-slate-200\/60,
.theme-vintage .border-slate-100,
.theme-vintage .border-slate-200,
.theme-vintage .border-white\/30,
.theme-vintage .border-slate-700\/50 {
  border-color: #c9a96a !important;
}

/* ── Input fields — parchment writing area ── */
.theme-vintage input,
.theme-vintage select,
.theme-vintage textarea {
  background: #faf3e6 !important;
  border: 1.5px solid #c9a96a !important;
  color: #2c1a0e !important;
  caret-color: #7a4010;
  border-radius: 4px !important;
}

.theme-vintage input::placeholder,
.theme-vintage textarea::placeholder {
  color: #a07850 !important;
}

.theme-vintage input:focus,
.theme-vintage select:focus,
.theme-vintage textarea:focus {
  border-color: #9c5c1a !important;
  box-shadow: 0 0 0 3px rgba(156, 92, 26, 0.15) !important;
  outline: none;
}

/* ── Email rows — old ledger ruled-line feel ── */
.theme-vintage .group.flex.items-start.gap-3\.5 {
  border-bottom: 1px solid #d4b880 !important;
  background: transparent !important;
}

.theme-vintage .group.flex.items-start.gap-3\.5:nth-child(odd) {
  background: rgba(200, 160, 90, 0.07) !important;
}

.theme-vintage .group.flex.items-start.gap-3\.5:hover {
  background: rgba(180, 130, 60, 0.14) !important;
  border-left: 3px solid #9c5c1a !important;
}

/* ── Shadows — soft warm glow instead of harsh dark ── */
.theme-vintage .shadow-xl {
  box-shadow: 0 4px 20px rgba(100, 60, 20, 0.12), 0 1px 3px rgba(100, 60, 20, 0.08) !important;
}

.theme-vintage .shadow-2xl {
  box-shadow: 0 8px 40px rgba(100, 60, 20, 0.18) !important;
}

/* ── Rounded corners — slightly tighter, more classical ── */
.theme-vintage .rounded-3xl {
  border-radius: 0.75rem !important;
}

.theme-vintage .rounded-2xl {
  border-radius: 0.5rem !important;
}

/* ── Headings — Shadows Into Light Two with ink press shadow ── */
.theme-vintage h1,
.theme-vintage h2,
.theme-vintage h3 {
  color: #1c0f06 !important;
  font-family: 'Shadows Into Light Two', 'Caveat', cursive !important;
  font-weight: 400 !important;
  text-shadow:
    1px 1px 0 rgba(80, 40, 10, 0.25),
    2px 2px 3px rgba(60, 30, 5, 0.12) !important;
  letter-spacing: 0.03em !important;
}

/* Body text — readable Baskerville, not handwriting */
.theme-vintage p,
.theme-vintage span,
.theme-vintage div,
.theme-vintage button,
.theme-vintage label,
.theme-vintage td,
.theme-vintage th,
.theme-vintage li,
.theme-vintage input,
.theme-vintage textarea,
.theme-vintage select {
  font-family: 'Libre Baskerville', Georgia, serif !important;
}

/* Nav bar labels — Caveat is fine at 1rem, feels handwritten without being illegible */
.theme-vintage nav button,
.theme-vintage nav a {
  font-family: 'Caveat', cursive !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
}

/* ── Nav buttons — ink on parchment ── */
.theme-vintage nav button {
  color: #3d2310 !important;
}

.theme-vintage nav button:hover {
  color: #7a4010 !important;
}

/* ── Date headers — like printed chapter headings ── */
.theme-vintage .sticky.top-0.z-10 {
  background: rgba(230, 210, 175, 0.96) !important;
  backdrop-filter: blur(8px) !important;
}

.theme-vintage .sticky.top-0.z-10 span {
  color: #7a4010 !important;
  font-family: 'Shadows Into Light Two', cursive !important;
  font-size: 1rem !important;
  letter-spacing: 0.08em !important;
  text-shadow: 1px 1px 0 rgba(80, 40, 10, 0.2);
}

/* ── Scrollbar — sepia tone ── */
.theme-vintage ::-webkit-scrollbar-thumb {
  background: #c9a96a !important;
  border-radius: 6px;
}

.theme-vintage ::-webkit-scrollbar-track {
  background: #e8d5b0 !important;
}

/* ── Category tag colors — muted earthy tones ── */
.theme-vintage .bg-blue-50,
.theme-vintage .bg-blue-100 {
  background: rgba(120, 100, 60, 0.12) !important;
  color: #4a3018 !important;
}

.theme-vintage .bg-red-50,
.theme-vintage .bg-red-100 {
  background: rgba(160, 60, 40, 0.12) !important;
  color: #7a2818 !important;
}

.theme-vintage .bg-amber-50,
.theme-vintage .bg-amber-100 {
  background: rgba(180, 130, 40, 0.15) !important;
  color: #7a5010 !important;
}

.theme-vintage .bg-green-50,
.theme-vintage .bg-emerald-50,
.theme-vintage .bg-green-100 {
  background: rgba(80, 100, 50, 0.12) !important;
  color: #384a20 !important;
}

.theme-vintage .bg-purple-50,
.theme-vintage .bg-purple-100 {
  background: rgba(100, 70, 100, 0.12) !important;
  color: #4a2850 !important;
}

/* ── Resize handle ── */
.theme-vintage .cursor-col-resize {
  background: #c9a96a !important;
  opacity: 0.4;
}

.theme-vintage .cursor-col-resize:hover {
  opacity: 0.7;
}

/* ── Vintage alert colors — readable on parchment ── */
.theme-vintage .text-red-400 {
  color: #b91c1c !important;
}

.theme-vintage .text-red-300\/70,
.theme-vintage .text-red-300 {
  color: #991b1b !important;
}

.theme-vintage .text-orange-400 {
  color: #c2410c !important;
}

.theme-vintage .text-orange-300\/70,
.theme-vintage .text-orange-300 {
  color: #9a3412 !important;
}

.theme-vintage .text-green-400 {
  color: #15803d !important;
}

.theme-vintage .text-blue-400 {
  color: #1d4ed8 !important;
}

/* ── Feather animation — warm sepia tint ── */
.theme-vintage .animate-feather {
  filter: sepia(0.7) hue-rotate(10deg) brightness(0.9);
}

/* ── Mascot — aged photo look ── */
.theme-vintage {
  --mascot-filter: sepia(0.4) brightness(0.95) contrast(1.05);
}

/* FAB — warm amber gold */
.theme-vintage .bg-gradient-to-br.from-pidgey-400.to-blue-600,
.theme-vintage .bg-gradient-to-br {
  background: linear-gradient(135deg, #c47e2a, #e6a84a) !important;
  box-shadow: 0 4px 20px rgba(150, 90, 20, 0.4) !important;
}

/* ── Book Page Header Gradients ── */
.theme-vintage .contact-hero-header {
  background: linear-gradient(135deg, #7a4010 0%, #b5712a 100%) !important;
  box-shadow: 0 4px 20px rgba(100, 60, 20, 0.12) !important;
}

.theme-zen .contact-hero-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
}

/* ── Driver.js Custom Styling ── */
.pidgey-tour-popover {
  border-radius: 16px !important;
  padding: 16px !important;
  border: 2px solid #bfdbfe !important;
  font-family: 'Inter', sans-serif !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.pidgey-tour-popover .driver-popover-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin-bottom: 8px !important;
}

.pidgey-tour-popover .driver-popover-description {
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

/* Dark Mode Driver.js Overrides */
.dark .pidgey-tour-popover {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.dark .pidgey-tour-popover .driver-popover-title {
  color: #f1f5f9 !important;
}

.dark .pidgey-tour-popover .driver-popover-description {
  color: #94a3b8 !important;
}

.dark .pidgey-tour-popover .driver-popover-footer button {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  text-shadow: none !important;
  border: 1px solid #334155 !important;
}

.dark .pidgey-tour-popover .driver-popover-footer button:hover {
  background: #334155 !important;
}

/* Ensure Pidgey Blue buttons maintain color */
.pidgey-tour-popover .driver-popover-footer .driver-popover-next-btn {
  background-color: #3b82f6 !important;
  color: white !important;
  font-weight: bold !important;
  border: none !important;
}

.pidgey-tour-popover .driver-popover-footer .driver-popover-next-btn:hover {
  background-color: #2563eb !important;
}

/* Zen Mode: No Glass for Peace */
.theme-zen * {
  backdrop-filter: none !important;
}

.theme-zen .bg-white\/80,
.theme-zen .bg-white\/90,
.theme-zen .bg-white\/50,
.theme-zen .bg-white\/60,
.theme-zen .bg-white\/70,
.theme-zen.dark .bg-slate-900\/80,
.theme-zen.dark .bg-slate-900\/90,
.theme-zen.dark .bg-slate-900\/50 {
  background-color: #1a1a1a !important;
  border-color: #2a2a2a !important;
}