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 (Low Glare / Vision Accessibility) ═══ */
.theme-zen body,
.theme-zen {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0.02em;
  /* Slightly wider for readability */
}

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

/* The reference image is overwhelmingly dark mode based. We will enforce the dark palette
       for Zen mode universally to prevent blinding brightness if the user's OS is set to Light mode. */

.theme-zen body,
.dark.theme-zen body {
  background: #1a1a1a !important;
  /* Force dark background */
  color: #e5e5e5 !important;
}

/* The 'Priority' brownish card from the photo */
.theme-zen .bg-pidgey-50,
.dark .theme-zen .bg-pidgey-50,
.theme-zen .bg-pidgey-50\/80,
.dark .theme-zen .bg-pidgey-50\/80 {
  background-color: #352a1a !important;
  /* Muted dark brown */
  color: #f3f4f6 !important;
  border: 1px solid #4a3a23 !important;
}

/* Solid main panels to hide background text on scroll, keeping the minimal vibe */
.theme-zen aside {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

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

/* Active / Pidgey brand color -> Muted golden/brown */
.theme-zen .bg-pidgey-500,
.dark .theme-zen .bg-pidgey-500 {
  background-color: #a26d2e !important;
  /* Golden brown */
  color: #ffffff !important;
  border: 1px solid #c28237 !important;
}

/* Text colors - force light text on dark backgrounds universally */
.theme-zen .text-slate-900,
.theme-zen .text-slate-800,
.theme-zen .text-slate-700,
.theme-zen .text-gray-900,
.theme-zen .text-gray-800,
.theme-zen .text-black,
.dark .theme-zen .text-slate-900,
.dark .theme-zen .text-slate-800,
.dark .theme-zen .text-slate-700 {
  color: #f9fafb !important;
  /* Almost white */
  font-weight: 500 !important;
}

.theme-zen .text-slate-600,
.theme-zen .text-slate-500,
.theme-zen .text-slate-400,
.theme-zen .text-gray-600,
.theme-zen .text-gray-500,
.dark .theme-zen .text-slate-600,
.dark .theme-zen .text-slate-500,
.dark .theme-zen .text-slate-400 {
  color: #9ca3af !important;
  /* Light medium grey for subtext */
}

.theme-zen .text-pidgey-500,
.dark .theme-zen .text-pidgey-500 {
  color: #dcb37b !important;
  /* Golden/khaki text */
  font-weight: 600 !important;
}

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

/* Nav buttons */
.theme-zen nav button,
.dark .theme-zen nav button {
  color: #e5e5e5 !important;
}

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

/* Drop shadows disabled for less eye strain */
.theme-zen .shadow-xl,
.theme-zen .shadow-2xl,
.theme-zen .shadow-md,
.theme-zen .shadow-lg,
.theme-zen .shadow-sm {
  box-shadow: none !important;
  border: 1px solid #404040 !important;
}

.theme-zen .glass-morphism,
.dark .theme-zen .glass-morphism {
  background: #1e1e1e !important;
  backdrop-filter: none !important;
  border-bottom: 2px solid #333333 !important;
}

/* Make text selection readable */
.theme-zen ::selection {
  background: #a26d2e !important;
  color: #ffffff !important;
}

/* ─── MACRO AIRY LAYOUT FOR ZEN MODE ─── */

/* Email Rows as Floating Cards */
.theme-zen [id^="email-row-"] {
  background-color: #222222 !important;
  margin: 16px 32px !important;
  padding: 24px 28px !important;
  border-radius: 20px !important;
  border: 1px solid #333333 !important;
  transition: all 0.2s ease;
}

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

/* Selected email row (priority/active) */
.theme-zen .bg-pidgey-50\/80[id^="email-row-"],
.dark .theme-zen .bg-\[\#1a2840\][id^="email-row-"] {
  background-color: #352a1a !important;
  /* Muted brown */
  border-color: #8c5e27 !important;
}

/* Hide standard borders on rows */
.theme-zen .border-b {
  border-bottom: none !important;
}

.theme-zen .border-r {
  border-right: none !important;
}

.theme-zen .border-t {
  border-top: none !important;
}

/* Detail View Panel as Floating Card */
.theme-zen .email-detail-container,
.theme-zen .bg-white\/60,
.dark .theme-zen .bg-\[\#0f1923\]\/90 {
  background-color: #222222 !important;
  margin: 16px 32px 16px 0 !important;
  border-radius: 20px !important;
  border: 1px solid #333333 !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: #64748b !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;
}

/* 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: #9a7d58 !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;
}

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