/* ============================================================
   InferHub — Aurora Theme Engine
   Override layer on top of the compiled Tailwind dump.
   Activates via [data-theme="aurora"] on <html>.
   Also honors .dark (already toggled by the existing theme button).
   ============================================================ */

/* ---- token surface ---- */
:root,
html[data-theme='aurora'] {
  --ih-accent: #8b5cf6;
  --ih-accent-2: #22d3ee;
  --ih-radius: 1rem;
  --ih-blur: 14px;
  --ih-sat: 140%;
}

/* ============ LIGHT (Aurora Dawn) ============ */
html[data-theme='aurora']:not(.dark) body {
  background:
    radial-gradient(32% 40% at 12% 8%, rgba(139, 92, 246, .40) 0%, transparent 62%),
    radial-gradient(28% 36% at 88% 4%, rgba(34, 211, 238, .32) 0%, transparent 60%),
    radial-gradient(40% 46% at 74% 94%, rgba(244, 114, 182, .24) 0%, transparent 62%),
    radial-gradient(34% 38% at 4% 92%, rgba(52, 211, 153, .22) 0%, transparent 60%),
    #f4f3fb;
  background-attachment: fixed;
  min-height: 100vh;
}

html[data-theme='aurora']:not(.dark) header,
html[data-theme='aurora']:not(.dark) aside {
  background: rgba(255, 255, 255, .62) !important;
  backdrop-filter: blur(18px) saturate(var(--ih-sat));
  -webkit-backdrop-filter: blur(18px) saturate(var(--ih-sat));
  border-color: rgba(255, 255, 255, .75) !important;
}

/* mesh lives on a fixed pseudo layer so Tailwind's .bg-white/.bg-zinc-950 can't paint over it */
html[data-theme='aurora'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(32% 40% at 12% 8%, rgba(139, 92, 246, .40) 0%, transparent 62%),
    radial-gradient(28% 36% at 88% 4%, rgba(34, 211, 238, .32) 0%, transparent 60%),
    radial-gradient(40% 46% at 74% 94%, rgba(244, 114, 182, .24) 0%, transparent 62%),
    radial-gradient(34% 38% at 4% 92%, rgba(52, 211, 153, .22) 0%, transparent 60%),
    #f4f3fb;
}
html[data-theme='aurora'].dark body::after {
  background:
    radial-gradient(38% 46% at 10% 6%, rgba(139, 92, 246, .48) 0%, transparent 64%),
    radial-gradient(34% 42% at 90% 2%, rgba(34, 211, 238, .38) 0%, transparent 62%),
    radial-gradient(44% 50% at 78% 98%, rgba(236, 72, 153, .30) 0%, transparent 66%),
    radial-gradient(38% 42% at 2% 96%, rgba(52, 211, 153, .26) 0%, transparent 64%),
    #07070d;
}

/* root layout transparent so the fixed mesh layer shows through at full strength */
html[data-theme='aurora']:not(.dark) body,
html[data-theme='aurora']:not(.dark) body > div > div[class*='min-h-full'],
html[data-theme='aurora']:not(.dark) body > div[class*='min-h-full'] {
  background: transparent !important;
}
html[data-theme='aurora'].dark body,
html[data-theme='aurora'].dark body > div > div[class*='min-h-full'],
html[data-theme='aurora'].dark body > div[class*='min-h-full'] {
  background: transparent !important;
}

/* glass cards — every white surface becomes translucent */
html[data-theme='aurora']:not(.dark) main .rounded-xl,
html[data-theme='aurora']:not(.dark) main .rounded-2xl,
html[data-theme='aurora']:not(.dark) main .rounded-lg,
html[data-theme='aurora']:not(.dark) main .border {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(var(--ih-blur)) saturate(var(--ih-sat));
  -webkit-backdrop-filter: blur(var(--ih-blur)) saturate(var(--ih-sat));
  border-color: rgba(255, 255, 255, .80) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 10px 30px -12px rgba(80, 70, 200, .22) !important;
}

/* primary buttons → gradient + glow */
html[data-theme='aurora']:not(.dark) button.bg-zinc-900,
html[data-theme='aurora']:not(.dark) a.bg-zinc-900,
html[data-theme='aurora']:not(.dark) .bg-zinc-900 {
  background-image: linear-gradient(135deg, #7c3aed, #6d28d9 55%, #4f46e5) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px -6px rgba(124, 58, 237, .65) !important;
  color: #fff !important;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}
html[data-theme='aurora']:not(.dark) button.bg-zinc-900:hover,
html[data-theme='aurora']:not(.dark) a.bg-zinc-900:hover {
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 10px 26px -6px rgba(124, 58, 237, .8) !important;
}

/* nav active state → aurora pill */
html[data-theme='aurora']:not(.dark) nav a.bg-zinc-100 {
  background-image: linear-gradient(120deg, rgba(139, 92, 246, .18), rgba(34, 211, 238, .14)) !important;
  border: 1px solid rgba(139, 92, 246, .30) !important;
  box-shadow: 0 4px 14px -6px rgba(139, 92, 246, .5) !important;
  color: #5b21b6 !important;
}
html[data-theme='aurora']:not(.dark) nav a:hover:not(.bg-zinc-100) {
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(139, 92, 246, .22) !important;
}

/* sidebar group labels */
html[data-theme='aurora']:not(.dark) nav .text-zinc-400 {
  color: #8b5cf6 !important;
  opacity: .85;
}

/* links / accents */
html[data-theme='aurora']:not(.dark) .text-violet-600,
html[data-theme='aurora']:not(.dark) a.text-violet-600 {
  background-image: linear-gradient(90deg, #7c3aed, #0891b2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* brand mark glow */
html[data-theme='aurora']:not(.dark) header a[href='/'] svg {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, .55));
}

/* status dots / badges */
html[data-theme='aurora']:not(.dark) .bg-emerald-500,
html[data-theme='aurora']:not(.dark) .bg-green-500 {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18), 0 0 10px rgba(16, 185, 129, .6);
}
html[data-theme='aurora']:not(.dark) .bg-amber-500 {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18), 0 0 10px rgba(245, 158, 11, .6);
}
html[data-theme='aurora']:not(.dark) .bg-red-500 {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .18), 0 0 10px rgba(239, 68, 68, .6);
}

/* inputs */
html[data-theme='aurora']:not(.dark) input:not([type='range']),
html[data-theme='aurora']:not(.dark) textarea,
html[data-theme='aurora']:not(.dark) select {
  background: rgba(255, 255, 255, .75) !important;
  border-color: rgba(139, 92, 246, .26) !important;
  backdrop-filter: blur(8px);
}
html[data-theme='aurora']:not(.dark) input:focus,
html[data-theme='aurora']:not(.dark) textarea:focus,
html[data-theme='aurora']:not(.dark) select:focus {
  border-color: rgba(139, 92, 246, .65) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .15) !important;
  outline: none !important;
}

/* ============ DARK (Aurora Night) ============ */
html[data-theme='aurora'].dark body {
  background:
    radial-gradient(40% 48% at 10% 6%, rgba(139, 92, 246, .26) 0%, transparent 64%),
    radial-gradient(36% 42% at 90% 2%, rgba(34, 211, 238, .20) 0%, transparent 62%),
    radial-gradient(48% 54% at 78% 98%, rgba(236, 72, 153, .16) 0%, transparent 64%),
    radial-gradient(42% 46% at 2% 96%, rgba(52, 211, 153, .14) 0%, transparent 62%),
    #07070d;
  background-attachment: fixed;
  min-height: 100vh;
}

html[data-theme='aurora'].dark header,
html[data-theme='aurora'].dark aside {
  background: rgba(12, 12, 20, .58) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-color: rgba(255, 255, 255, .08) !important;
}

html[data-theme='aurora'].dark main .rounded-xl,
html[data-theme='aurora'].dark main .rounded-2xl,
html[data-theme='aurora'].dark main .rounded-lg,
html[data-theme='aurora'].dark main .border {
  background: rgba(22, 22, 36, .52) !important;
  backdrop-filter: blur(var(--ih-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ih-blur)) saturate(150%);
  border-color: rgba(255, 255, 255, .09) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 14px 40px -16px rgba(0, 0, 0, .8) !important;
}
/* keep primary buttons opaque — the glass rule would make dark text on dark fill unreadable */
html[data-theme='aurora'].dark main button[class*='dark:bg-white'],
html[data-theme='aurora'].dark main a[class*='dark:bg-white'] {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: transparent !important;
}
html[data-theme='aurora'].dark main button:hover[class*='dark:bg-white'],
html[data-theme='aurora'].dark main a:hover[class*='dark:bg-white'] {
  opacity: .9;
}

html[data-theme='aurora'].dark button.bg-white,
html[data-theme='aurora'].dark a.bg-white {
  background-image: linear-gradient(135deg, #8b5cf6, #6d28d9 55%, #4f46e5) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px -8px rgba(139, 92, 246, .8) !important;
  color: #fff !important;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}
html[data-theme='aurora'].dark button.bg-white:hover,
html[data-theme='aurora'].dark a.bg-white:hover {
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 12px 30px -8px rgba(139, 92, 246, 1) !important;
}

html[data-theme='aurora'].dark nav a.dark\:bg-zinc-800,
html[data-theme='aurora'].dark nav a[class*='dark:bg-zinc-800'] {
  background-image: linear-gradient(120deg, rgba(139, 92, 246, .30), rgba(34, 211, 238, .22)) !important;
  border: 1px solid rgba(139, 92, 246, .42) !important;
  box-shadow: 0 6px 18px -8px rgba(139, 92, 246, .7) !important;
  color: #e9d5ff !important;
}
html[data-theme='aurora'].dark nav a:hover:not([class*='dark:bg-zinc-800']) {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(139, 92, 246, .25) !important;
}

html[data-theme='aurora'].dark nav .dark\:text-zinc-500,
html[data-theme='aurora'].dark nav [class*='dark:text-zinc-500'] {
  color: #a78bfa !important;
}

html[data-theme='aurora'].dark header a[href='/'] svg {
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, .75));
}

html[data-theme='aurora'].dark .bg-emerald-500,
html[data-theme='aurora'].dark .bg-green-500 {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .2), 0 0 12px rgba(16, 185, 129, .75);
}
html[data-theme='aurora'].dark .bg-amber-500 {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .2), 0 0 12px rgba(245, 158, 11, .75);
}
html[data-theme='aurora'].dark .bg-red-500 {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .2), 0 0 12px rgba(239, 68, 68, .75);
}

html[data-theme='aurora'].dark input:not([type='range']),
html[data-theme='aurora'].dark textarea,
html[data-theme='aurora'].dark select {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(167, 139, 250, .28) !important;
}
html[data-theme='aurora'].dark input:focus,
html[data-theme='aurora'].dark textarea:focus,
html[data-theme='aurora'].dark select:focus {
  border-color: rgba(167, 139, 250, .7) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .22) !important;
  outline: none !important;
}

/* ============ NEON TERMINAL (always dark) ============ */
html[data-theme='neon'] body::after { display: none; }
html[data-theme='neon'] body,
html[data-theme='neon'] body.min-h-full,
html[data-theme='neon'] body > div > div[class*='min-h-full'],
html[data-theme='neon'] body > div[class*='min-h-full'] {
  background:
    radial-gradient(26% 32% at 16% 8%, rgba(0, 255, 157, .10) 0%, transparent 64%),
    radial-gradient(24% 30% at 84% 12%, rgba(255, 43, 214, .10) 0%, transparent 62%),
    #050608 !important;
  color: #c8ffe8 !important;
}
html[data-theme='neon']::backdrop,
html[data-theme='neon'] header,
html[data-theme='neon'] aside {
  background: rgba(6, 10, 12, .72) !important;
  backdrop-filter: blur(16px);
  border-color: rgba(0, 255, 157, .16) !important;
}
html[data-theme='neon'] main .rounded-xl,
html[data-theme='neon'] main .rounded-2xl,
html[data-theme='neon'] main .rounded-lg,
html[data-theme='neon'] main .border,
html[data-theme='neon'] .codecard {
  background: rgba(8, 14, 16, .72) !important;
  border-color: rgba(0, 255, 157, .18) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(0, 255, 157, .06), 0 12px 34px -16px rgba(0, 0, 0, .9) !important;
}
html[data-theme='neon'] button.bg-zinc-900,
html[data-theme='neon'] a.bg-zinc-900,
html[data-theme='neon'] .btn-primary,
html[data-theme='neon'] .btn-primary-xs,
html[data-theme='neon'] .btn-primary-sm,
html[data-theme='neon'] button.bg-white,
html[data-theme='neon'] a.bg-white {
  background: rgba(0, 255, 157, .10) !important;
  border: 1px solid rgba(0, 255, 157, .55) !important;
  color: #00ff9d !important;
  box-shadow: 0 0 18px -4px rgba(0, 255, 157, .5) !important;
  text-shadow: 0 0 8px rgba(0, 255, 157, .6);
}
html[data-theme='neon'] h1,
html[data-theme='neon'] h2 {
  color: #00ff9d !important;
  -webkit-text-fill-color: #00ff9d !important;
  background: none !important;
  text-shadow: 0 0 14px rgba(0, 255, 157, .5);
}
html[data-theme='neon'] input,
html[data-theme='neon'] textarea,
html[data-theme='neon'] select {
  background: rgba(0, 255, 157, .04) !important;
  border-color: rgba(0, 255, 157, .28) !important;
  color: #c8ffe8 !important;
}
html[data-theme='neon'] nav a { border-radius: .5rem; }
html[data-theme='neon'] nav a.bg-zinc-100,
html[data-theme='neon'] nav a[class*='dark:bg-zinc-800'] {
  background: rgba(0, 255, 157, .12) !important;
  border: 1px solid rgba(0, 255, 157, .4) !important;
  color: #00ff9d !important;
  box-shadow: 0 0 14px -6px rgba(0, 255, 157, .7) !important;
}
html[data-theme='neon'] body::before { display: none; }

/* ============ BENTO POP (color blocks) ============ */
html[data-theme='bento'] body::after { display: none; }
html[data-theme='bento'] body,
html[data-theme='bento'] body.min-h-full,
html[data-theme='bento'] body > div > div[class*='min-h-full'],
html[data-theme='bento'] body > div[class*='min-h-full'] {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, .14), transparent 34%),
    linear-gradient(225deg, rgba(168, 85, 247, .14), transparent 34%),
    linear-gradient(315deg, rgba(16, 185, 129, .12), transparent 34%),
    linear-gradient(45deg, rgba(245, 158, 11, .12), transparent 34%),
    #fafafc !important;
}
/* bento: tint each card row independently so colors stay distinct */
html[data-theme='bento']:not(.dark) main .grid > .rounded-xl,
html[data-theme='bento']:not(.dark) main .grid > .rounded-2xl {
  background: rgba(219, 234, 254, .85) !important;
  border-color: rgba(59, 130, 246, .4) !important;
}
html[data-theme='bento']:not(.dark) main .grid > .rounded-xl:nth-child(2),
html[data-theme='bento']:not(.dark) main .grid > .rounded-2xl:nth-child(2) {
  background: rgba(237, 233, 254, .85) !important;
  border-color: rgba(168, 85, 247, .4) !important;
}
html[data-theme='bento']:not(.dark) main .grid > .rounded-xl:nth-child(3),
html[data-theme='bento']:not(.dark) main .grid > .rounded-2xl:nth-child(3) {
  background: rgba(209, 250, 229, .85) !important;
  border-color: rgba(16, 185, 129, .4) !important;
}
html[data-theme='bento']:not(.dark) main .grid > .rounded-xl:nth-child(4),
html[data-theme='bento']:not(.dark) main .grid > .rounded-2xl:nth-child(4) {
  background: rgba(254, 243, 199, .85) !important;
  border-color: rgba(245, 158, 11, .4) !important;
}
html[data-theme='bento'] h1,
html[data-theme='bento'] h2 {
  background-image: linear-gradient(96deg, #2563eb, #9333ea 50%, #059669) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============ mobile fixes ============ */
@media (max-width: 820px) {
  /* drop backdrop-filter on big surfaces (iOS Safari blurs the card's own children) */
  html[data-theme='aurora'] main .rounded-xl,
  html[data-theme='aurora'] main .rounded-2xl,
  html[data-theme='aurora'] main .rounded-lg,
  html[data-theme='aurora'] main .border {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* clamp fixed overlays (cookie banner) to the viewport */
  html[data-theme='aurora'] [class*='fixed'][class*='max-w'] {
    max-width: calc(100vw - 1.5rem) !important;
  }
  /* pin the cookie banner to both edges — translate-x-1/2 misplaces it on mobile */
  html[data-theme='aurora'] .fixed.bottom-5 {
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    transform: none !important;
    translate: none !important;
    inset-inline: 0.75rem !important;
  }
  /* hide the account email on small screens — it overflows the header */
  html[data-theme='aurora'] header .text-\[13px\],
  html[data-theme='aurora'] header [class*='text-[13px]'] {
    display: none !important;
  }
  /* tighter page padding on phones */
  html[data-theme='aurora'] main #page { padding: 1rem !important; }
  /* collapse multi-column card grids to one column so cards fit the viewport */
  html[data-theme='aurora'] main .grid-cols-2,
  html[data-theme='aurora'] main .grid-cols-3,
  html[data-theme='aurora'] main .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  /* let long stat values (e.g. $0.0000) wrap instead of clipping */
  html[data-theme='aurora'] main .grid [class*='text-2xl'],
  html[data-theme='aurora'] main .grid [class*='text-3xl'],
  html[data-theme='aurora'] main .grid [class*='font-bold'] {
    overflow-wrap: anywhere;
  }
}

/* ============ shared motion ============ */
html[data-theme='aurora'] main > div > * {
  animation: ih-aurora-in .42s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ih-aurora-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme='aurora'] main > div > * { animation: none; }
}

/* slow drifting aurora layer for extra depth (pointer-events safe) */
html[data-theme='aurora'] body::before {
  content: '';
  position: fixed;
  inset: -30vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(28% 30% at 30% 30%, rgba(139, 92, 246, .10), transparent 70%),
    radial-gradient(26% 28% at 70% 60%, rgba(34, 211, 238, .09), transparent 70%);
  animation: ih-aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes ih-aurora-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(3vmax, -2vmax, 0) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme='aurora'] body::before { animation: none; }
}

/* ============ theme switcher widget ============ */
#aurora-switch {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, .35);
  background: linear-gradient(120deg, rgba(139, 92, 246, .16), rgba(34, 211, 238, .12));
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: inherit;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}
#aurora-switch:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .18), 0 4px 14px -4px rgba(139, 92, 246, .6);
}
html[data-theme='aurora'] #aurora-switch {
  background: linear-gradient(120deg, #8b5cf6, #22d3ee);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .22), 0 6px 18px -4px rgba(139, 92, 246, .75);
  color: #fff;
}
#aurora-menu {
  position: absolute; top: 44px; right: 0;
  min-width: 232px; padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, .28);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 20px 50px -14px rgba(80, 60, 220, .35);
  z-index: 60;
}
html.dark #aurora-menu {
  background: rgba(16, 16, 28, .88);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .85);
}
#aurora-menu button {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 500;
  background: transparent; border: 0; cursor: pointer; color: inherit;
}
#aurora-menu button:hover { background: rgba(139, 92, 246, .12); }
html.dark #aurora-menu button:hover { background: rgba(255, 255, 255, .07); }
#aurora-menu button[aria-current='true'] {
  background: linear-gradient(120deg, rgba(139, 92, 246, .22), rgba(34, 211, 238, .16));
  border: 1px solid rgba(139, 92, 246, .3);
}
#aurora-menu .swatch {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  border: 1px solid rgba(0, 0, 0, .12);
}
html.dark #aurora-menu .swatch { border-color: rgba(255, 255, 255, .18); }
#aurora-menu .ih-menu-hint {
  padding: 7px 10px 2px; font-size: 11px; opacity: .6; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600;
}